/* ============================================================ IC — Base + Layout ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { background: var(--bg); color: var(--fg); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: var(--t-body); line-height: 1.6; color: var(--fg); background: var(--bg); font-feature-settings: "cv11", "ss01", "ss03"; overflow-x: hidden; min-height: 100vh; } /* ---------- Logo theme-swap ---------- `content: url()` on an replaces what the browser renders, keeping the underlying src/alt as fallback. This lets us flip logo art purely via the data-theme attribute — no JS swap needed, no flicker on initial paint (the pre-paint shim sets data-theme before first paint). */ .nav__logo-img { content: url('/assets/logo/ic-header.png'); } .hero__logo { content: url('/assets/logo/ic-stacked-dark.png'); } [data-theme="light"] .nav__logo-img { content: url('/assets/logo/ic-horizontal-light.png'); } [data-theme="light"] .hero__logo { content: url('/assets/logo/ic-stacked-light.png'); } /* ---------- Theme-flip transition ---------- theme.js toggles .theme-transitioning on for ~300ms when the user clicks the toggle, so background/foreground glide instead of snapping. Kept off the rest of the time so card hover, button hover, etc. stay snappy. */ html.theme-transitioning, html.theme-transitioning body, html.theme-transitioning .section, html.theme-transitioning .section--dark, html.theme-transitioning .section--darker, html.theme-transitioning .section--light, html.theme-transitioning .glass-card, html.theme-transitioning .light-card, html.theme-transitioning .nav, html.theme-transitioning .footer, html.theme-transitioning .chip, html.theme-transitioning .badge, html.theme-transitioning .btn--secondary, html.theme-transitioning .nav__logo-img, html.theme-transitioning .hero__logo { transition: background-color 280ms cubic-bezier(0.2, 0, 0, 1), background 280ms cubic-bezier(0.2, 0, 0, 1), color 280ms cubic-bezier(0.2, 0, 0, 1), border-color 280ms cubic-bezier(0.2, 0, 0, 1), box-shadow 280ms cubic-bezier(0.2, 0, 0, 1), opacity 200ms cubic-bezier(0.2, 0, 0, 1) !important; } img, svg, video, canvas { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; } ::selection { background: rgba(46, 168, 255, 0.3); color: #fff; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* ---------- Containers ---------- */ .container { max-width: var(--container); margin: 0 auto; padding-inline: var(--pad-inline); width: 100%; } .section { position: relative; padding-block: clamp(72px, 12vw, 192px); } .section--tight { padding-block: clamp(64px, 9vw, 128px); } .section--dark { background: var(--bg); color: var(--fg); } .section--darker { background: var(--bg-deep); color: var(--fg); } .section--light { background: var(--section-light-bg); color: var(--section-light-fg); } .section--light .muted { color: var(--section-light-fg-muted); } .section--light a:not(.btn) { color: var(--accent-strong); } /* ---------- Typography ---------- */ .display-2xl { font-family: var(--font-display); font-weight: 700; font-size: var(--t-display-2xl); line-height: 1.02; letter-spacing: -0.035em; margin: 0; } .display-xl { font-family: var(--font-display); font-weight: 700; font-size: var(--t-display-xl); line-height: 1.05; letter-spacing: -0.03em; margin: 0; } .display-l { font-family: var(--font-display); font-weight: 700; font-size: var(--t-display-l); line-height: 1.08; letter-spacing: -0.025em; margin: 0; } .display-m { font-family: var(--font-display); font-weight: 600; font-size: var(--t-display-m); line-height: 1.12; letter-spacing: -0.02em; margin: 0; } .h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--t-h2); line-height: 1.25; letter-spacing: -0.015em; margin: 0; } .h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--t-h3); line-height: 1.35; letter-spacing: -0.01em; margin: 0; } .body-l { font-size: var(--t-body-l); line-height: 1.65; margin: 0; } .body { font-size: var(--t-body); line-height: 1.6; margin: 0; } .body-s { font-size: var(--t-body-s); line-height: 1.55; margin: 0; } .caption { font-size: var(--t-caption); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; font-feature-settings: "tnum"; } .muted { color: var(--fg-muted); } .subtle { color: var(--fg-subtle); } .mono { font-family: var(--font-mono); } .gradient-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .measure { max-width: 60ch; } .measure-lg { max-width: 72ch; } /* ---------- Section header ---------- */ .section-header { margin-bottom: var(--space-7); } .badge { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--accent-subtle); color: var(--accent); font-family: var(--font-body); font-size: var(--t-caption); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 14px; border-radius: var(--radius-full); border: 1px solid rgba(46, 168, 255, 0.16); margin-bottom: var(--space-5); } .badge--ai { background: var(--accent-ai-subtle); color: var(--accent-ai); border-color: rgba(124, 92, 255, 0.20); } .badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 24px; border-radius: var(--radius-md); font-family: var(--font-body); font-size: 16px; font-weight: 500; letter-spacing: -0.005em; cursor: pointer; border: 1px solid transparent; transition: transform var(--d-base) var(--ease-standard), box-shadow var(--d-base) var(--ease-standard), border-color var(--d-fast) var(--ease-standard), background var(--d-fast) var(--ease-standard); white-space: nowrap; position: relative; isolation: isolate; } .btn--md { height: 44px; padding: 0 18px; font-size: 15px; } .btn--sm { height: 36px; padding: 0 14px; font-size: 14px; } .btn--primary { background: var(--grad-primary); color: #fff; box-shadow: 0 8px 30px rgba(46, 168, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18); } .btn--primary:hover { transform: translateY(-1px); box-shadow: 0 14px 38px rgba(46, 168, 255, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.22); } .btn--primary svg { transition: transform var(--d-fast) var(--ease-standard); } .btn--primary:hover svg { transform: translateX(4px); } .btn--secondary { background: transparent; color: var(--fg); border: 1px solid var(--border-strong); } .btn--secondary:hover { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.24); } .section--light .btn--secondary { color: #0B1220; border-color: #C2CCD9; } .section--light .btn--secondary:hover { background: rgba(11, 18, 32, 0.04); border-color: #94A3B8; } .btn--ghost { color: var(--fg-muted); } .btn--ghost:hover { background: var(--bg-subtle); color: var(--fg); } .btn--link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 500; height: auto; padding: 0; border-bottom: 1px dotted rgba(46, 168, 255, 0.5); border-radius: 0; background: none; } .btn--link:hover { border-bottom-style: solid; } .btn--link svg { transition: transform var(--d-fast) var(--ease-standard); } .btn--link:hover svg { transform: translateX(3px); } /* ---------- Chip / tag ---------- */ .chip { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; background: var(--bg-subtle); color: var(--fg-muted); border: 1px solid var(--border); border-radius: var(--radius-full); font-size: 12px; font-weight: 500; letter-spacing: 0.04em; font-family: var(--font-mono); transition: border-color var(--d-fast) var(--ease-standard), color var(--d-fast) var(--ease-standard); } .chip:hover { border-color: rgba(46, 168, 255, 0.4); color: var(--fg); } .section--light .chip { background: rgba(11, 18, 32, 0.03); border-color: #DCE3EC; color: #475569; } .chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); } /* ---------- Glass card ---------- */ .glass-card { background: rgba(13, 27, 42, 0.72); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); border: 1px solid var(--border); border-radius: var(--radius-2xl); padding: clamp(24px, 3vw, 32px); transition: border-color var(--d-base) var(--ease-standard), transform var(--d-base) var(--ease-standard), box-shadow var(--d-base) var(--ease-standard); } .glass-card:hover { border-color: var(--border-strong); transform: translateY(-3px); box-shadow: var(--el-glow); } /* ---------- Light card ---------- */ .light-card { background: #fff; border: 1px solid #DCE3EC; border-radius: var(--radius-2xl); padding: clamp(24px, 3vw, 32px); box-shadow: 0 1px 2px rgba(11, 18, 32, 0.04), 0 8px 24px rgba(11, 18, 32, 0.06); transition: border-color var(--d-base) var(--ease-standard), transform var(--d-base) var(--ease-standard), box-shadow var(--d-base) var(--ease-standard); color: #0B1220; } .light-card:hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgba(11, 18, 32, 0.05), 0 18px 48px rgba(11, 18, 32, 0.10); border-color: #C2CCD9; } /* ---------- Decorative bg grid ---------- */ .bg-grid { position: absolute; inset: 0; pointer-events: none; opacity: 0.04; background-image: linear-gradient(rgba(255, 255, 255, 1) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 1) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent 75%); -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent 75%); } .bg-glow-top { position: absolute; inset: 0; pointer-events: none; background: var(--grad-hero-glow); } /* ---------- Lucide icon size ---------- */ .icon-16 { width: 16px; height: 16px; } .icon-20 { width: 20px; height: 20px; } .icon-24 { width: 24px; height: 24px; } .icon-28 { width: 28px; height: 28px; } /* ---------- Reveal (GSAP target classes; default state) ---------- */ .reveal { opacity: 0; transform: translateY(16px); will-change: opacity, transform; } .reveal--fade { transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }