/* SEO prerender — 提供給爬蟲的純文字版本，視覺上隱藏。 React mount 後會替換掉 #root 的內容，不影響使用者體驗。 */ .seo-prerender { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ================================================================ 阪誠網通 BANCHENG · Design System 科技活力 / 經典藍 / 漸層 / 動效 ================================================================ */ :root { /* Brand */ --bg: #060814; --bg-soft: #0B0F25; --bg-card: #11163A; --line: rgba(255,255,255,0.08); --line-strong: rgba(255,255,255,0.16); --ink: #F5F7FF; --ink-2: #B8C0E0; --ink-3: #6B7299; --brand: #2563EB; /* classic blue */ --brand-2: #4F8AF7; --brand-3: #7AA9FF; --accent: #06B6D4; /* cyan highlight */ --accent-2: #8B5CF6; /* purple */ --accent-3: #F59E0B; /* warm spark from logo cap */ --grad-1: linear-gradient(135deg, #2563EB 0%, #06B6D4 50%, #8B5CF6 100%); --grad-2: linear-gradient(135deg, #4F8AF7 0%, #06B6D4 100%); --grad-text: linear-gradient(120deg, #FFFFFF 0%, #B8D4FF 40%, #06B6D4 80%, #8B5CF6 100%); --grad-card: linear-gradient(180deg, rgba(37,99,235,0.10) 0%, rgba(11,15,37,0.0) 100%); --radius-sm: 10px; --radius: 16px; --radius-lg: 24px; --radius-xl: 32px; --font-sans: "Manrope", "Noto Sans TC", system-ui, -apple-system, "PingFang TC", "Microsoft JhengHei", sans-serif; --font-display: "Space Grotesk", "Noto Sans TC", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --shadow-sm: 0 4px 14px rgba(8,12,40,0.4); --shadow-md: 0 14px 40px rgba(8,12,40,0.45); --shadow-glow: 0 0 50px rgba(37,99,235,0.35); } /* Theme variants — applied via [data-theme] on */ [data-theme="cyan"] { --brand: #0891B2; --brand-2: #06B6D4; --brand-3: #67E8F9; --accent: #2563EB; --grad-1: linear-gradient(135deg, #0891B2 0%, #06B6D4 50%, #2563EB 100%); --grad-text: linear-gradient(120deg, #FFFFFF 0%, #A5F3FC 40%, #06B6D4 80%, #2563EB 100%); } [data-theme="violet"] { --brand: #7C3AED; --brand-2: #8B5CF6; --brand-3: #A78BFA; --accent: #06B6D4; --grad-1: linear-gradient(135deg, #7C3AED 0%, #8B5CF6 50%, #06B6D4 100%); --grad-text: linear-gradient(120deg, #FFFFFF 0%, #DDD6FE 40%, #8B5CF6 80%, #06B6D4 100%); } [data-theme="emerald"] { --brand: #059669; --brand-2: #10B981; --brand-3: #6EE7B7; --accent: #06B6D4; --grad-1: linear-gradient(135deg, #059669 0%, #10B981 50%, #06B6D4 100%); --grad-text: linear-gradient(120deg, #FFFFFF 0%, #A7F3D0 40%, #10B981 80%, #06B6D4 100%); } /* Font theme */ [data-font="grotesk"] { --font-display: "Space Grotesk", "Noto Sans TC", sans-serif; --font-sans: "Manrope", "Noto Sans TC", sans-serif; } [data-font="serif"] { --font-display: "Fraunces", "Noto Serif TC", serif; --font-sans: "Inter", "Noto Sans TC", sans-serif; } [data-font="mono"] { --font-display: "JetBrains Mono", "Noto Sans TC", monospace; --font-sans: "Inter", "Noto Sans TC", sans-serif; } [data-font="rounded"] { --font-display: "Plus Jakarta Sans", "Noto Sans TC", sans-serif; --font-sans: "Plus Jakarta Sans", "Noto Sans TC", sans-serif; } /* ============== reset ============== */ * { box-sizing: border-box; margin: 0; padding: 0; } html, body { background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; } input, textarea, select { font: inherit; color: inherit; } /* ============== ambient background ============== */ .bg-stars { position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(37,99,235,0.35), transparent 60%), radial-gradient(ellipse 60% 40% at 80% 30%, rgba(139,92,246,0.18), transparent 60%), radial-gradient(ellipse 60% 40% at 10% 60%, rgba(6,182,212,0.18), transparent 60%); } .bg-grid { position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000, transparent 75%); } .bg-orb { position: fixed; pointer-events: none; z-index: 0; width: 700px; height: 700px; border-radius: 50%; filter: blur(120px); opacity: 0.35; } .bg-orb.a { background: #2563EB; top: -200px; left: -200px; animation: orb 24s ease-in-out infinite; } .bg-orb.b { background: #8B5CF6; bottom: -200px; right: -200px; animation: orb 28s ease-in-out infinite reverse; } .bg-orb.c { background: #06B6D4; top: 40%; left: 50%; animation: orb 32s ease-in-out infinite; } @keyframes orb { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(80px, -40px) scale(1.1); } 66% { transform: translate(-40px, 60px) scale(0.95); } } /* ============== layout ============== */ .shell { position: relative; z-index: 1; } .container { width: min(1240px, 92vw); margin: 0 auto; } section { position: relative; padding: 120px 0; } @media (max-width: 768px) { section { padding: 80px 0; } } .kicker { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand-3); background: rgba(37,99,235,0.10); border: 1px solid rgba(37,99,235,0.3); border-radius: 999px; } .kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); animation: pulse 1.6s ease-in-out infinite; } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } } .section-title { font-family: var(--font-display); font-size: clamp(2rem, 4.2vw, 3.5rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; margin-top: 18px; } .section-sub { color: var(--ink-2); font-size: clamp(1rem, 1.4vw, 1.15rem); margin-top: 14px; max-width: 640px; } .gradient-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% 200%; animation: shimmer 8s ease-in-out infinite; } @keyframes shimmer { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* ============== nav ============== */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; justify-content: center; padding: 18px 0; transition: padding .3s, background .3s, backdrop-filter .3s; } .nav.scrolled { padding: 10px 0; background: rgba(6,8,20,0.7); backdrop-filter: blur(18px) saturate(140%); border-bottom: 1px solid var(--line); } .nav-inner { width: min(1240px, 92vw); display: flex; align-items: center; justify-content: space-between; gap: 24px; } .brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; } .brand-logo { width: 38px; height: 38px; border-radius: 10px; background: #fff; display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0,0,0,0.25); position: relative; overflow: hidden; } .brand-logo img { width: 86%; height: 86%; object-fit: contain; } .brand-name { font-size: 16px; } .brand-name small { display: block; font-size: 10px; font-weight: 400; color: var(--ink-3); letter-spacing: 0.15em; text-transform: uppercase; } .nav-links { display: flex; gap: 28px; } .nav-links a { font-size: 14px; color: var(--ink-2); position: relative; padding: 6px 0; transition: color .2s; } .nav-links a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: var(--accent); transition: width .3s; } .nav-links a:hover { color: var(--ink); } .nav-links a:hover::after { width: 100%; } @media (max-width: 768px) { .nav-links { display: none; } } .nav-actions { display: flex; align-items: center; gap: 10px; } .lang-toggle { display: flex; padding: 4px; background: rgba(255,255,255,0.06); border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-mono); font-size: 11px; } .lang-toggle button { padding: 5px 10px; border-radius: 999px; color: var(--ink-3); transition: all .2s; } .lang-toggle button.active { background: var(--ink); color: var(--bg); } /* ============== buttons ============== */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 999px; font-weight: 600; font-size: 15px; transition: transform .2s, box-shadow .2s, background .2s; white-space: nowrap; } .btn:hover { transform: translateY(-2px); } .btn-primary { background: var(--grad-1); background-size: 200% 200%; color: white; box-shadow: 0 10px 30px rgba(37,99,235,0.4); animation: btnGrad 6s ease infinite; } @keyframes btnGrad { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .btn-primary:hover { box-shadow: 0 16px 40px rgba(37,99,235,0.55); } .btn-ghost { background: rgba(255,255,255,0.05); border: 1px solid var(--line-strong); color: var(--ink); backdrop-filter: blur(8px); } .btn-ghost:hover { background: rgba(255,255,255,0.10); border-color: var(--brand-3); } .btn-arrow { transition: transform .25s; } .btn:hover .btn-arrow { transform: translateX(4px); } /* ============== hero ============== */ .hero { padding: 160px 0 100px; min-height: 92vh; display: flex; align-items: center; } .hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; align-items: center; } @media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } } .hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,0.04); border: 1px solid var(--line); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.15em; color: var(--ink-2); } .hero-eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); animation: pulse 1.6s ease-in-out infinite; } .hero-title { font-family: var(--font-display); font-size: clamp(2.5rem, 6vw, 5.2rem); font-weight: 700; line-height: 1.02; letter-spacing: -0.025em; margin-top: 22px; } .hero-title .row { display: block; } .hero-sub { margin-top: 24px; color: var(--ink-2); font-size: clamp(1rem, 1.4vw, 1.2rem); max-width: 540px; } .hero-ctas { margin-top: 36px; display: flex; gap: 12px; flex-wrap: wrap; } .hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); } .hero-stat .v { font-family: var(--font-display); font-size: clamp(1.6rem, 2.6vw, 2.4rem); font-weight: 700; background: var(--grad-2); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-stat .v sup { font-size: 0.55em; font-weight: 500; color: var(--brand-3); margin-left: 4px; -webkit-text-fill-color: var(--brand-3); } .hero-stat .l { font-size: 11px; color: var(--ink-3); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 4px; } /* hero visual */ .hero-visual { position: relative; aspect-ratio: 1 / 1; max-width: 520px; margin-left: auto; } .hv-ring { position: absolute; inset: 0; border: 1px solid var(--line-strong); border-radius: 50%; } .hv-ring.r1 { animation: ringSpin 60s linear infinite; } .hv-ring.r2 { inset: 12%; border-style: dashed; animation: ringSpin 90s linear infinite reverse; } .hv-ring.r3 { inset: 24%; } @keyframes ringSpin { to { transform: rotate(360deg); } } .hv-orbit { position: absolute; inset: 0; animation: ringSpin 30s linear infinite; } .hv-orbit .pip { position: absolute; left: 50%; top: -10px; transform: translateX(-50%); width: 20px; height: 20px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 30px var(--accent); } .hv-orbit.b { animation-duration: 45s; animation-direction: reverse; } .hv-orbit.b .pip { background: var(--accent-2); box-shadow: 0 0 30px var(--accent-2); top: auto; bottom: -10px; } .hv-core { position: absolute; inset: 30%; border-radius: 50%; background: #fff; box-shadow: 0 0 60px rgba(37,99,235,0.45), 0 12px 30px rgba(0,0,0,0.25); display: grid; place-items: center; overflow: hidden; } .hv-core img { width: 78%; height: 78%; object-fit: contain; animation: float 6s ease-in-out infinite; } @keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .hv-chip { position: absolute; padding: 8px 14px; border-radius: 999px; background: rgba(11,15,37,0.85); backdrop-filter: blur(10px); border: 1px solid var(--line-strong); font-family: var(--font-mono); font-size: 12px; display: flex; align-items: center; gap: 8px; white-space: nowrap; } .hv-chip .ic { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-size: 11px; background: var(--grad-1); } .hv-chip.t1 { top: 8%; left: -10%; animation: floatA 5s ease-in-out infinite; } .hv-chip.t2 { top: 30%; right: -8%; animation: floatA 5s ease-in-out infinite -1.5s; } .hv-chip.t3 { bottom: 18%; left: -14%; animation: floatA 5s ease-in-out infinite -3s; } .hv-chip.t4 { bottom: 6%; right: -4%; animation: floatA 5s ease-in-out infinite -2s; } @keyframes floatA { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* ============== ticker ============== */ .ticker { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255,255,255,0.02); overflow: hidden; padding: 22px 0; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } .ticker-track { display: flex; gap: 60px; width: max-content; animation: tickerSlide 30s linear infinite; } .ticker-item { display: flex; align-items: center; gap: 18px; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 2.4vw, 2.2rem); color: var(--ink-3); } .ticker-item .star { width: 24px; height: 24px; color: var(--accent); } @keyframes tickerSlide { to { transform: translateX(-50%); } } /* ============== products ============== */ .products-tabs { margin-top: 50px; display: grid; grid-template-columns: 320px 1fr; gap: 32px; } @media (max-width: 980px) { .products-tabs { grid-template-columns: 1fr; } } .product-tablist { display: flex; flex-direction: column; gap: 8px; } @media (max-width: 980px) { .product-tablist { flex-direction: row; overflow-x: auto; gap: 12px; padding-bottom: 8px; } } .product-tab { text-align: left; padding: 18px 20px; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(255,255,255,0.02); display: flex; flex-direction: column; gap: 4px; position: relative; overflow: hidden; transition: all .25s; } @media (max-width: 980px) { .product-tab { min-width: 220px; } } .product-tab .tag { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); letter-spacing: 0.18em; } .product-tab .name { font-family: var(--font-display); font-size: 17px; font-weight: 600; } .product-tab:hover { border-color: var(--line-strong); background: rgba(255,255,255,0.04); } .product-tab.active { background: var(--grad-card); border-color: rgba(37,99,235,0.5); box-shadow: 0 0 0 1px rgba(37,99,235,0.3), 0 12px 30px rgba(37,99,235,0.15); } .product-tab.active .tag { color: var(--accent); } .product-tab.active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--grad-1); } .product-panel { position: relative; border-radius: var(--radius-lg); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(11,15,37,0.6), rgba(11,15,37,0.95)); padding: 40px; min-height: 500px; overflow: hidden; } .product-panel::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 100% 0%, rgba(37,99,235,0.2), transparent 60%); pointer-events: none; } .product-panel-inner { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; } @media (max-width: 880px) { .product-panel-inner { grid-template-columns: 1fr; } } .product-tag { font-family: var(--font-mono); font-size: 11px; color: var(--accent); letter-spacing: 0.2em; } .product-name { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 700; margin-top: 8px; line-height: 1.1; } .product-desc { color: var(--ink-2); margin-top: 16px; font-size: 15px; line-height: 1.7; } .product-features { list-style: none; margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .product-features li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); } .product-features li::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--grad-1); flex-shrink: 0; display: grid; place-items: center; } .product-cta { margin-top: 28px; display: flex; gap: 10px; flex-wrap: wrap; } .product-mock { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); background: linear-gradient(135deg, rgba(37,99,235,0.15), rgba(139,92,246,0.1)); border: 1px solid var(--line-strong); overflow: hidden; display: grid; place-items: center; } .product-mock-window { position: absolute; inset: 12% 8%; border-radius: 12px; background: var(--bg-soft); border: 1px solid var(--line-strong); box-shadow: 0 30px 60px rgba(0,0,0,0.5); overflow: hidden; display: flex; flex-direction: column; } .pmw-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,0.02); } .pmw-bar .d { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-3); } .pmw-bar .d:nth-child(1) { background: #FF5F57; } .pmw-bar .d:nth-child(2) { background: #FEBC2E; } .pmw-bar .d:nth-child(3) { background: #28C840; } .pmw-bar .url { margin-left: 12px; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); } .pmw-body { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 8px; } .pmw-body .skel { height: 10px; border-radius: 6px; background: rgba(255,255,255,0.06); } .pmw-body .skel.w50 { width: 50%; } .pmw-body .skel.w70 { width: 70%; } .pmw-body .skel.w40 { width: 40%; } .pmw-body .skel.tall { height: 60px; background: linear-gradient(135deg, rgba(37,99,235,0.25), rgba(6,182,212,0.15)); margin-top: 6px; } /* product alt — card grid */ .product-cards { margin-top: 50px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 880px) { .product-cards { grid-template-columns: 1fr; } } .product-card { position: relative; padding: 32px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)); overflow: hidden; transition: transform .3s, border-color .3s; } .product-card:hover { transform: translateY(-6px); border-color: var(--line-strong); } .product-card .glow { position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0; background: linear-gradient(135deg, rgba(37,99,235,0.3), rgba(139,92,246,0.2)); transition: opacity .3s; } .product-card:hover .glow { opacity: 1; } /* ============== services ============== */ .service-grid { margin-top: 60px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } @media (max-width: 880px) { .service-grid { grid-template-columns: 1fr; } } .service-card { padding: 28px; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005)); transition: all .3s; position: relative; overflow: hidden; } .service-card:hover { transform: translateY(-4px); border-color: rgba(37,99,235,0.4); background: linear-gradient(180deg, rgba(37,99,235,0.08), rgba(11,15,37,0.4)); } .service-card .ic { width: 48px; height: 48px; border-radius: 12px; background: var(--grad-1); display: grid; place-items: center; font-size: 22px; margin-bottom: 18px; box-shadow: 0 8px 24px rgba(37,99,235,0.3); } .service-card h3 { font-family: var(--font-display); font-size: 18px; font-weight: 600; } .service-card p { color: var(--ink-2); margin-top: 8px; font-size: 14px; } /* ============== about ============== */ .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } @media (max-width: 880px) { .about-grid { grid-template-columns: 1fr; gap: 40px; } } .about-paras p { color: var(--ink-2); font-size: 16px; line-height: 1.8; margin-top: 18px; } .tech-tags { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px; } .tech-tag { padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,0.04); border: 1px solid var(--line); font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); transition: all .2s; } .tech-tag:hover { background: rgba(37,99,235,0.15); border-color: var(--brand-3); color: var(--ink); } .about-visual { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); border: 1px solid var(--line-strong); background: linear-gradient(180deg, rgba(37,99,235,0.12), rgba(11,15,37,0.4)); padding: 28px; overflow: hidden; } .timeline-yr { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.15em; } .timeline-bar { position: relative; height: 80px; margin: 18px 0; border-radius: 12px; background: linear-gradient(90deg, rgba(37,99,235,0.05), rgba(37,99,235,0.0)); overflow: hidden; } .timeline-bar .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--grad-1); border-radius: inherit; display: flex; align-items: center; padding-left: 16px; font-family: var(--font-display); font-weight: 600; box-shadow: 0 0 30px rgba(37,99,235,0.4); } /* ============== works ============== */ .work-list { margin-top: 60px; } .work-row { display: grid; grid-template-columns: 80px 100px 1fr auto; gap: 24px; align-items: center; padding: 28px 0; border-top: 1px solid var(--line); cursor: pointer; transition: padding .3s; } .work-row:hover { padding: 28px 12px; } .work-row:last-child { border-bottom: 1px solid var(--line); } .work-num { font-family: var(--font-mono); color: var(--ink-3); font-size: 13px; letter-spacing: 0.15em; } .work-type { font-family: var(--font-mono); font-size: 11px; color: var(--accent); letter-spacing: 0.2em; } .work-name { font-family: var(--font-display); font-size: clamp(1.1rem, 1.8vw, 1.5rem); font-weight: 600; } .work-desc { color: var(--ink-3); font-size: 13px; margin-top: 4px; max-width: 600px; } .work-arrow { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; transition: all .25s; } .work-row:hover .work-arrow { background: var(--brand); border-color: var(--brand); transform: rotate(-45deg); } @media (max-width: 768px) { .work-row { grid-template-columns: 60px 1fr auto; } .work-type { display: none; } } /* ============== process ============== */ .process-grid { margin-top: 60px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } @media (max-width: 880px) { .process-grid { grid-template-columns: 1fr; } } .process-card { padding: 28px; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(255,255,255,0.02); transition: all .3s; } .process-card:hover { border-color: var(--line-strong); transform: translateY(-3px); } .process-card .n { font-family: var(--font-mono); font-size: 13px; background: var(--grad-2); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: 0.15em; } .process-card h3 { font-family: var(--font-display); font-size: 20px; font-weight: 600; margin-top: 10px; } .process-card p { color: var(--ink-2); margin-top: 8px; font-size: 14px; } /* ============== testimonials ============== */ .tm-row { margin-top: 60px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } @media (max-width: 880px) { .tm-row { grid-template-columns: 1fr; } } .tm-card { padding: 28px; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)); position: relative; } .tm-card .qmark { font-family: var(--font-display); font-size: 60px; color: var(--brand); line-height: 1; margin-bottom: 8px; opacity: 0.5; } .tm-card .quote { font-size: 15px; color: var(--ink); line-height: 1.7; } .tm-card .who { margin-top: 18px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); letter-spacing: 0.05em; } /* ============== faq ============== */ .faq-list { margin-top: 50px; max-width: 860px; } .faq-item { border-bottom: 1px solid var(--line); } .faq-q { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 24px 0; font-family: var(--font-display); font-size: 18px; font-weight: 500; text-align: left; transition: color .2s; } .faq-q:hover { color: var(--brand-3); } .faq-q .pm { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; flex-shrink: 0; transition: transform .3s, background .3s; } .faq-item.open .faq-q .pm { transform: rotate(45deg); background: var(--brand); border-color: var(--brand); } .faq-a { max-height: 0; overflow: hidden; color: var(--ink-2); font-size: 15px; line-height: 1.7; transition: max-height .35s ease, padding .35s ease; } .faq-item.open .faq-a { max-height: 400px; padding-bottom: 24px; } /* ============== contact ============== */ .contact-grid { margin-top: 60px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; } @media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } } .contact-form { padding: 36px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(11,15,37,0.6), rgba(11,15,37,0.95)); } .contact-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 600px) { .contact-form .row { grid-template-columns: 1fr; } } .field { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; } .field label { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.15em; text-transform: uppercase; } .field input, .field select, .field textarea { background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font-size: 14px; transition: border-color .2s, background .2s; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand-3); background: rgba(37,99,235,0.06); } .field textarea { min-height: 110px; resize: vertical; font-family: inherit; } .field select option { background: var(--bg-soft); } .contact-form button[type="submit"] { margin-top: 22px; width: 100%; justify-content: center; } .success-msg { margin-top: 16px; padding: 14px; background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.3); border-radius: 10px; color: #6EE7B7; font-size: 14px; text-align: center; } .contact-direct { display: flex; flex-direction: column; gap: 14px; } .contact-card { padding: 24px; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(255,255,255,0.02); display: flex; gap: 16px; align-items: center; transition: all .25s; } .contact-card:hover { border-color: var(--brand-3); background: rgba(37,99,235,0.06); transform: translateX(4px); } .contact-card .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--grad-1); display: grid; place-items: center; font-size: 18px; flex-shrink: 0; } .contact-card .l { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.15em; text-transform: uppercase; } .contact-card .v { font-family: var(--font-display); font-size: 16px; font-weight: 500; margin-top: 2px; } /* ============== footer ============== */ .footer { border-top: 1px solid var(--line); padding: 60px 0 40px; position: relative; } .footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; } @media (max-width: 880px) { .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; } } .footer-brand .tag { color: var(--ink-2); margin-top: 16px; max-width: 320px; font-size: 14px; } .footer-col h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); } .footer-col ul { list-style: none; margin-top: 16px; display: flex; flex-direction: column; gap: 10px; } .footer-col a { color: var(--ink-2); font-size: 14px; transition: color .2s; } .footer-col a:hover { color: var(--brand-3); } .footer-bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); } /* ============== hero variants ============== */ [data-hero="split"] .hero-grid { grid-template-columns: 1.1fr 0.9fr; } [data-hero="centered"] .hero-grid { grid-template-columns: 1fr; text-align: center; } [data-hero="centered"] .hero-sub { margin-left: auto; margin-right: auto; } [data-hero="centered"] .hero-ctas { justify-content: center; } [data-hero="centered"] .hero-stats { max-width: 720px; margin-left: auto; margin-right: auto; } [data-hero="centered"] .hero-visual { display: none; } [data-hero="terminal"] .hero-visual .hv-ring, [data-hero="terminal"] .hero-visual .hv-orbit, [data-hero="terminal"] .hero-visual .hv-core, [data-hero="terminal"] .hero-visual .hv-chip { display: none; } [data-hero="terminal"] .hero-visual::before { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); border: 1px solid var(--line-strong); background: linear-gradient(180deg, rgba(11,15,37,0.95), rgba(6,8,20,0.98)); box-shadow: 0 30px 60px rgba(0,0,0,0.4); } .terminal { position: absolute; inset: 0; display: none; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden; } [data-hero="terminal"] .terminal { display: flex; } .terminal-bar { display: flex; gap: 6px; padding: 14px; border-bottom: 1px solid var(--line); } .terminal-bar .d { width: 11px; height: 11px; border-radius: 50%; } .terminal-bar .d:nth-child(1) { background: #FF5F57; } .terminal-bar .d:nth-child(2) { background: #FEBC2E; } .terminal-bar .d:nth-child(3) { background: #28C840; } .terminal-bar .ttl { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); } .terminal-body { flex: 1; padding: 22px; font-family: var(--font-mono); font-size: 13px; line-height: 1.8; color: var(--ink-2); } .terminal-body .ln { display: block; } .terminal-body .pr { color: var(--accent); } .terminal-body .kw { color: var(--brand-3); } .terminal-body .st { color: #FCD34D; } .terminal-body .cm { color: var(--ink-3); } .cursor-blink::after { content: "▊"; color: var(--accent); animation: blink 1s steps(1) infinite; margin-left: 2px; } @keyframes blink { 50% { opacity: 0; } } /* product variants */ [data-product="cards"] .products-tabs { display: none; } [data-product="cards"] .products-cards-wrap { display: block; } [data-product="tabs"] .products-cards-wrap { display: none; } .products-cards-wrap { display: none; } /* ============== reveal-on-scroll ============== */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; } .reveal.in { opacity: 1; transform: none; } .reveal-stagger > * { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; } .reveal-stagger.in > *:nth-child(1) { transition-delay: 0.05s; } .reveal-stagger.in > *:nth-child(2) { transition-delay: 0.10s; } .reveal-stagger.in > *:nth-child(3) { transition-delay: 0.15s; } .reveal-stagger.in > *:nth-child(4) { transition-delay: 0.20s; } .reveal-stagger.in > *:nth-child(5) { transition-delay: 0.25s; } .reveal-stagger.in > *:nth-child(6) { transition-delay: 0.30s; } .reveal-stagger.in > * { opacity: 1; transform: none; } /* utility */ .spacer-sm { height: 12px; } .divider { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong), transparent); }