/* ===== Extracted CSS from index.html ===== */
/* --- Main Styles (from ) --- */
/* Load custom PingFang SC Semibold font */
/* @font-face {
font-family: 'PingFang SC';
src: local('PingFang SC Semibold'), local('PingFangSC-Semibold'),
url('https://static.huahuabiz.com/static/files/727545-PingFangSC-Semibold.woff2') format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
} */
/* Global Font Transition: PingFang SC Semibold */
* {
font-family:
"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
}
html,
body {
width: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
body {
background-color: #ffffff;
color: #0f172a;
font-weight: 600 !important;
-webkit-font-smoothing: antialiased;
}
/* Hero & Section Main Headings: Super Bold */
h1,
h2 {
font-weight: 900 !important;
letter-spacing: -0.03em !important;
}
h3,
h4,
h5,
h6,
p,
span,
a,
div,
button {
font-weight: 600 !important;
}
#hero-section {
width: 100%;
position: relative;
}
.hero-shell {
padding: clamp(2rem, 3vw, 4rem);
}
.hero-grid {
padding: clamp(2rem, 3vw, 4rem);
}
.hero-copy {
max-width: min(62rem, 100%);
}
.hero-brand-row {
display: flex;
align-items: baseline;
gap: clamp(1rem, 1.8vw, 1.5rem);
flex-wrap: wrap;
}
.hero-logo-mark {
width: clamp(112px, 10vw, 146px);
height: clamp(112px, 10vw, 144px);
}
.hero-logo-wordmark {
width: clamp(150px, 12vw, 198px);
height: auto;
}
.hero-title {
font-size: clamp(44px, 4.2vw, 71px);
line-height: 1.06;
white-space: normal;
}
.hero-subtitle {
font-size: clamp(22px, 2vw, 34px);
line-height: 1.2;
}
.hero-meta {
font-size: clamp(16px, 1.25vw, 22px);
line-height: 1.45;
}
.hero-aside-panel {
padding: clamp(1.25rem, 2vw, 2.5rem);
border-radius: clamp(24px, 2vw, 40px);
}
.enterprise-shell {
width: min(100%, 1280px);
margin-inline: auto;
padding-inline: clamp(1.5rem, 3vw, 3rem);
}
.enterprise-title {
font-size: clamp(36px, 3.8vw, 64px);
line-height: 1.15;
white-space: normal;
}
.enterprise-subtitle {
font-size: clamp(18px, 1.65vw, 24px);
line-height: 1.5;
}
.enterprise-tabs {
min-height: clamp(42px, 3.6vw, 51px);
gap: clamp(0.25rem, 0.8vw, 1rem);
padding: 4px;
}
.enterprise-tab {
padding-inline: clamp(0.75rem, 1.2vw, 1.25rem);
font-size: clamp(12px, 1vw, 16px);
gap: clamp(0.25rem, 0.6vw, 0.5rem);
}
.enterprise-card {
width: min(100%, 1100px);
aspect-ratio: 878 / 512;
height: auto;
}
.enterprise-rock-left,
.enterprise-rock-right {
width: min(38%, 520px);
}
.top-nav-shell {
width: clamp(680px, 58vw, 760px);
max-width: calc(100vw - 32px);
min-height: clamp(54px, 4.2vw, 60px);
padding-inline: clamp(20px, 2.5vw, 32px);
gap: clamp(12px, 1.5vw, 24px);
}
.top-nav-logo {
width: clamp(80px, 7vw, 110px);
height: clamp(32px, 3vw, 40px);
margin-right: 12px;
}
.top-nav-links {
flex: 1 1 auto;
min-width: 0;
justify-content: center;
gap: clamp(4px, 0.6vw, 12px);
font-size: clamp(14px, 1.1vw, 16px);
white-space: nowrap;
padding-inline: 8px;
}
.top-nav-links .nav-item {
flex-shrink: 0;
white-space: nowrap;
padding-inline: clamp(8px, 0.8vw, 16px);
}
.top-nav-action {
flex-shrink: 0;
gap: clamp(10px, 1vw, 16px);
}
.top-nav-login {
padding-inline: clamp(18px, 1.4vw, 24px);
white-space: nowrap;
}
@media (max-width: 1439px) {
.hero-grid {
padding: 2rem;
}
.hero-aside {
padding-left: 1.5rem;
}
.enterprise-header {
margin-top: 64px;
}
.enterprise-rock-left {
left: -8%;
width: min(34%, 420px);
}
.enterprise-rock-right {
right: -8%;
width: min(34%, 420px);
}
}
@media (max-width: 1279px) {
.hero-grid {
padding: 1.5rem;
}
.hero-main {
grid-column: span 8 / span 8;
padding-block: 2rem;
}
.hero-aside {
grid-column: span 4 / span 4;
padding-block: 2rem;
padding-left: 1rem;
}
.hero-menu-link {
font-size: 14px;
}
.enterprise-header {
margin-top: 48px;
margin-bottom: 0.75rem;
}
.enterprise-tabs {
flex-wrap: wrap;
justify-content: center;
border-radius: 20px;
height: auto;
}
.enterprise-card {
width: min(100%, 920px);
}
.enterprise-rock-left,
.enterprise-rock-right {
width: min(28%, 320px);
bottom: 24px;
}
.top-nav-divider {
display: none;
}
}
.menu-card {
opacity: 0;
transform: translateY(20px) scale(0.95);
transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: none;
}
.menu-card.active {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.btn-text-slider {
display: flex;
flex-direction: column;
height: 14px;
overflow: hidden;
}
.btn-text-slider span {
height: 14px;
display: flex;
align-items: center;
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.group.menu-open .btn-text-slider span {
transform: translateY(-100%);
}
.menu-hover-link {
transition: all 0.3s ease;
}
/* Custom scrollbar - Hidden for minimalism */
::-webkit-scrollbar {
display: none;
width: 0;
}
/* --- JovaShowcase Component Styles --- */
#jovashowcase-section {
min-height: 800px;
display: flex;
align-items: center;
}
.showcase-item {
width: 88px;
height: 500px;
will-change: width, height, border-radius, transform;
}
.showcase-item img {
transition: transform 1s ease;
}
.showcase-item:hover img {
transform: scale(1.05);
}
/* When collapsed (pill shape), center the avatar label */
.showcase-item.collapsed .showcase-label {
left: 50% !important;
transform: translateX(-50%);
bottom: 16px !important;
}
/* Hide the name text in collapsed state */
.showcase-item.collapsed .showcase-label-text {
display: none !important;
}
/* In active state show full label */
.showcase-item.expanded .showcase-label {
left: 2rem;
transform: none;
bottom: 1.5rem;
}
/* Global Cinematic Reveal System */
.blur-reveal {
opacity: 0;
filter: blur(8px) brightness(0.7);
transform: translateY(30px) scale(0.9);
transition:
opacity 1.5s ease,
filter 1.5s ease,
transform 1.5s cubic-bezier(0.2, 0.8, 0.2, 1);
will-change: opacity, filter, transform;
backface-visibility: hidden;
}
.blur-reveal.active {
opacity: 1;
filter: blur(0px) brightness(1);
transform: translateY(0) scale(1);
}
/* Staggered Word System */
.word-span {
display: inline-block;
margin-right: 0.3em;
opacity: 0;
filter: blur(6px);
transform: translateY(15px) scale(0.95);
transition: all 1s cubic-bezier(0.2, 0.8, 0.2, 1);
will-change: opacity, filter, transform;
}
.word-span.active {
opacity: 1;
filter: blur(0px);
transform: translateY(0) scale(1);
}
/* CardSwap Styles */
.card-swap-container {
position: relative;
transform-style: preserve-3d;
perspective: 1200px;
}
.card {
position: absolute;
top: 50%;
left: 50%;
border-radius: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
font-weight: 600;
box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.12);
border: none;
background: white;
overflow: hidden;
transition:
box-shadow 0.3s ease,
transform 0.5s ease;
}
.card:hover {
box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.12);
}
.subtle-white-border {
border: 1px solid rgba(255, 255, 255, 0.4);
}
/* Menu Click-to-Lock Support */
.new-hero-menu-item .accordion-content {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.new-hero-menu-item.is-active .accordion-content {
grid-template-rows: 1fr !important;
}
.chevron-icon {
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.is-active .chevron-icon {
transform: rotate(180deg);
color: #2a4a5a;
}
.new-hero-menu-item.is-active span {
color: #2a4a5a;
}
/* --- Premium 3D Gallery & 3D Effect Styles --- */
.profile-card-3d {
transform-style: preserve-3d;
transition:
transform 0.5s cubic-bezier(0.23, 1, 0.32, 1),
box-shadow 0.5s ease;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}
.glare-effect {
position: absolute;
inset: 0;
z-index: 40;
pointer-events: none;
mix-blend-mode: soft-light;
transition: opacity 0.3s ease;
background: radial-gradient(
circle at 50% 50%,
rgba(255, 255, 255, 0.15) 0%,
transparent 60%
);
}
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
/* --- Project Atmospheric & 3D Orb Effects --- */
.atmosphere-noise {
position: absolute;
inset: 0;
z-index: -2;
opacity: 0.05;
pointer-events: none;
background-image: url("https://grainy-gradients.vercel.app/noise.svg");
mix-blend-mode: multiply;
}
.atmosphere-glow {
position: absolute;
inset: 0;
z-index: -1;
opacity: 0.4;
pointer-events: none;
background: radial-gradient(
1000px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
rgba(0, 0, 0, 0.03),
transparent 80%
);
transition: background 0.1s ease-out;
}
.bg-orb-3d {
position: absolute;
top: 50%;
right: -150px;
width: 800px;
height: 800px;
background: transparent;
border-radius: 50%;
filter: blur(120px);
z-index: -1;
pointer-events: none;
}
@keyframes orb-breathing {
0%,
100% {
transform: translate(0, 0) scale(1);
opacity: 0.15;
}
50% {
transform: translate(-80px, 40px) scale(1.15);
opacity: 0.25;
}
}
/* --- Business Models Horizontal Scroll Styles --- */
.business-models-section {
background: #ffffff;
--bm-fit-scale: 1;
--bm-header-gap: calc(clamp(24px, 2.5vw, 48px) * var(--bm-fit-scale));
--bm-card-width: calc(clamp(360px, 39.0625vw, 750px) * var(--bm-fit-scale));
--bm-card-gap: calc(clamp(20px, 2.5vw, 48px) * var(--bm-fit-scale));
--bm-card-stagger: calc(clamp(150px, 15.625vw, 300px) * var(--bm-fit-scale));
--bm-card-radius: calc(clamp(12px, 0.8333vw, 16px) * var(--bm-fit-scale));
--bm-card-inner-gap: calc(clamp(12px, 0.8333vw, 16px) * var(--bm-fit-scale));
--bm-card-title-size: calc(clamp(14px, 0.9375vw, 18px) * var(--bm-fit-scale));
--bm-card-desc-size: calc(clamp(13px, 0.78125vw, 15px) * var(--bm-fit-scale));
--bm-subtext-size: calc(clamp(15px, 0.9375vw, 18px) * var(--bm-fit-scale));
--bm-subtext-max: calc(clamp(540px, 35.4167vw, 680px) * var(--bm-fit-scale));
}
.bm-sticky-container {
position: sticky;
top: 0;
height: 100vh;
width: 100%;
overflow-x: hidden;
overflow-y: visible;
display: flex;
flex-direction: column;
justify-content: flex-start;
padding-top: calc(clamp(72px, 5.7292vw, 110px) * var(--bm-fit-scale));
}
/* Header uses same horizontal margins as the centered 75% container */
.bm-section-header-wrap {
width: 75%;
margin: 0 auto;
text-align: left;
pointer-events: none;
z-index: 10;
position: relative;
flex-shrink: 0;
}
.bm-horizontal-track {
display: flex;
align-items: flex-start;
/* Start the first card aligned with the title's left edge */
padding-left: var(--bm-left-offset, 12.5vw);
padding-top: var(--bm-header-gap);
height: auto;
will-change: transform;
flex-shrink: 0;
}
.bm-card {
flex-shrink: 0;
width: var(--bm-card-width);
background: white;
border-radius: var(--bm-card-radius);
margin-right: var(--bm-card-gap);
display: flex;
flex-direction: column;
gap: var(--bm-card-inner-gap);
transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
position: relative;
z-index: 1;
opacity: 1 !important;
filter: none !important;
transform: none !important;
}
/* S-shape Staggered Layout:
Cards 01,03,05,07,09 → top row
Cards 02,04,06,08 → bottom row (staggered down)
*/
.bm-card:nth-child(even) {
margin-top: var(--bm-card-stagger);
z-index: 2;
}
.bm-card:nth-child(odd) {
margin-top: 0;
z-index: 3;
}
.bm-card-header {
padding: 0 0.5rem;
}
.bm-card-number {
font-size: var(--bm-card-title-size);
font-weight: 700;
color: #1e293b;
letter-spacing: -0.01em;
margin-bottom: 0.5rem;
}
.bm-card-media {
width: 100%;
height: auto;
border-radius: clamp(10px, 0.625vw, 12px);
background: #f1f5f9;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
display: block;
}
.bm-card-media[src$=".mp4"],
.bm-card video {
width: 100%;
height: auto;
}
.bm-card-footer {
padding: 0 0.5rem;
}
.bm-card-desc {
font-size: var(--bm-card-desc-size);
color: #64748b;
line-height: 1.6;
font-weight: 500;
max-width: 95%;
}
.bm-section-header {
font-size: calc(clamp(36px, 4vw, 64px) * var(--bm-fit-scale));
font-weight: 900;
line-height: 1.1;
color: #1a1a1b;
letter-spacing: -0.02em;
margin-bottom: calc(16px * var(--bm-fit-scale));
white-space: nowrap;
}
.bm-section-subtext {
font-size: var(--bm-subtext-size);
color: #64748b;
font-weight: 500;
line-height: 1.7;
max-width: var(--bm-subtext-max);
}
/* --- Latest News Proportional Scaling --- */
#news-section {
--news-card-size: clamp(220px, 20.1042vw, 386px);
--news-gap-x: clamp(16px, 1.25vw, 24px);
--news-gap-y: clamp(32px, 2.5vw, 48px);
--news-header-gap: clamp(40px, 3.3333vw, 64px);
--news-title-size: clamp(34px, 2.5vw, 48px);
--news-subtitle-size: clamp(12px, 0.7292vw, 14px);
--news-meta-size: clamp(11px, 0.625vw, 12px);
--news-label-size: clamp(10px, 0.625vw, 12px);
--news-card-title-size: clamp(16px, 1.0417vw, 20px);
--news-button-size: clamp(14px, 0.7292vw, 16px);
}
.news-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: var(--news-gap-x);
row-gap: var(--news-gap-y);
}
.news-card {
width: min(100%, var(--news-card-size));
margin: 0 auto;
}
.news-card-media {
width: 100%;
aspect-ratio: 1 / 1;
}
.news-card-text {
width: min(100%, var(--news-card-size));
margin: clamp(14px, 1.0417vw, 20px) auto 0;
}
.news-card-label {
font-size: var(--news-label-size);
}
.news-card-meta {
font-size: var(--news-meta-size);
}
.news-card-title {
font-size: var(--news-card-title-size);
}
.news-section-title {
font-size: var(--news-title-size);
}
.news-section-subtitle {
font-size: var(--news-subtitle-size);
}
.news-more-button {
font-size: var(--news-button-size);
}
@media (max-width: 767px) {
.news-grid {
grid-template-columns: 1fr;
}
}
/* Responsive fixes for shorter screens like MacBook Air */
@media (max-height: 950px) {
#hero-ai-visuals-card {
transform: scale(0.85);
transform-origin: bottom left;
bottom: 2rem !important;
}
}
@media (max-height: 850px) {
#hero-ai-visuals-card {
transform: scale(0.7);
transform-origin: bottom left;
bottom: 1.5rem !important;
}
.hero-title {
font-size: clamp(36px, 3.5vw, 56px);
}
.hero-subtitle {
font-size: clamp(18px, 1.8vw, 28px);
}
.hero-copy {
gap: 1.5rem !important;
}
.hero-copy > :not([hidden]) ~ :not([hidden]) {
margin-top: 1.5rem !important;
}
}
@media (max-height: 750px) {
#hero-ai-visuals-card {
transform: scale(0.6);
transform-origin: bottom left;
bottom: 1rem !important;
}
}
/* --- Growth Scenarios Section Styles --- */
/* Active card: diagonal gradient from top-left to bottom-right */
.growth-card.active-card {
background: linear-gradient(
135deg,
#6366f1 0%,
#4f46e5 25%,
#3b82f6 55%,
#0ea5e9 80%,
#06b6d4 100%
);
transform: scale(1.05);
box-shadow: 0 40px 80px -20px rgba(99, 102, 241, 0.45);
z-index: 20;
}
.growth-card:not(.active-card) {
opacity: 0.6;
filter: grayscale(0.5);
cursor: pointer;
}
.growth-card:hover:not(.active-card) {
opacity: 0.8;
transform: translateY(-10px);
}
#growth-carousel-track {
will-change: transform;
}
/* Bubble styles */
.growth-bubble {
position: absolute;
padding: 10px 22px;
border-radius: 999px;
font-size: 15px;
font-weight: 700;
white-space: nowrap;
pointer-events: none;
opacity: 0;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(8px);
border: 1.5px solid rgba(148, 163, 184, 0.2);
color: #64748b;
box-shadow: 0 4px 24px 0 rgba(148, 163, 184, 0.1);
transition:
opacity 0.6s ease,
transform 0.6s ease;
transform: scale(0.85);
z-index: 1;
}
.growth-bubble.bubble-visible {
opacity: 1;
transform: scale(1);
}
/* --- Card Swap, Tunnel Aspect, Identity Grid & Animation Styles --- */
.card-swap-container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
perspective: 1000px;
}
.card-swap-container .card {
position: absolute;
border-radius: 2.5rem;
box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.15);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0;
border: none;
background: white;
transform-style: preserve-3d;
backface-visibility: hidden;
overflow: hidden;
}
/* 3D Tunnel Aspect Utilities */
.aspect-\[3\/4\] {
aspect-ratio: 3 / 4;
}
.aspect-\[16\/9\] {
aspect-ratio: 16 / 9;
}
@keyframes float {
0%,
100% {
transform: translateY(0) translateX(0);
}
50% {
transform: translateY(-20px) translateX(5px);
}
}
@keyframes float-slow {
0%,
100% {
transform: translateY(0) translateX(0);
}
50% {
transform: translateY(15px) translateX(-5px);
}
}
@keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
.animate-float-slow {
animation: float-slow 8s ease-in-out infinite;
}
.animate-marquee {
animation: marquee 30s linear infinite;
}
@keyframes identity-logo-card-float {
0%,
100% {
transform: translate3d(0, 0, 0) scale(1);
box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.16);
}
50% {
transform: translate3d(0, -10px, 0) scale(1.015);
box-shadow: 0 42px 80px -18px rgba(0, 0, 0, 0.2);
}
}
@keyframes identity-logo-mark-breathe {
0%,
100% {
transform: scale(1);
opacity: 0.92;
}
50% {
transform: scale(1.04);
opacity: 1;
}
}
.identity-grid-logo-card {
position: relative;
overflow: hidden;
will-change: transform, box-shadow;
animation: identity-logo-card-float 4.8s ease-in-out infinite;
}
.identity-grid-logo-card::after {
content: "";
position: absolute;
inset: 18% 22%;
background: radial-gradient(
circle,
rgba(0, 0, 0, 0.08) 0%,
rgba(0, 0, 0, 0) 72%
);
filter: blur(28px);
pointer-events: none;
}
.identity-grid-logo-mark {
position: relative;
z-index: 1;
will-change: transform, opacity;
animation: identity-logo-mark-breathe 4.8s ease-in-out infinite;
}
.perspective-2000 {
perspective: 2000px;
}
.perspective-3000 {
perspective: 3000px;
}
.-rotate-y-20 {
transform: rotateY(-20deg);
}
.hide-scrollbar::-webkit-scrollbar {
display: none;
}
.hide-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
/* --- Web Prompt Modal Styles --- */
#web-prompt-modal.is-active {
display: block;
}
#web-prompt-modal.is-active #modal-backdrop {
opacity: 1;
}
#web-prompt-modal.is-active #modal-card {
opacity: 1;
scale: 1;
}
/* --- Lead Generation Modal Styles --- */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-in {
animation: fadeIn 0.4s ease-out forwards;
}
#identity-grid h4 {
font-size: 18px !important;
}
#identity-grid p {
font-size: 14px !important;
}
#identity-grid p::after {
content: "\667a\80fd\4f53";
}