/* ========================================================================== VOKLON — Design System Stylesheet AI Automation Company | Premium Metallic / Glassmorphic UI ========================================================================== */ /* ========================================================================== 1. FONTS ========================================================================== */ /* Fonts loaded via tags in index.html — not @import here — so they fetch in parallel with this stylesheet rather than after it. */ /* ========================================================================== 2. DESIGN TOKENS ========================================================================== */ :root { /* Color — Backgrounds */ --black-primary: #000000; --black-secondary: #090909; --black-elevated: #101010; --graphite: #1A1A1C; /* Color — Metallic */ --silver-bright: #E8E9EB; --silver-core: #B8BABD; --gunmetal: #5B5E64; --titanium: #8A8D93; --chrome-gradient: linear-gradient(115deg, #4A4C50 0%, #E8E9EB 45%, #4A4C50 100%); /* Color — Functional */ --success-muted: #7A8C7E; --error-muted: #8C6E6E; /* Overlay opacities */ --overlay-08: rgba(255, 255, 255, 0.08); --overlay-12: rgba(255, 255, 255, 0.12); --overlay-06: rgba(255, 255, 255, 0.06); --bg-elevated-60: rgba(16, 16, 16, 0.6); /* Typography */ --font-display: 'General Sans', 'Neue Montreal', 'Inter', sans-serif; --font-body: 'Inter', sans-serif; --font-data: 'Space Grotesk', sans-serif; /* Spacing scale */ --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 32px; --space-6: 48px; --space-7: 64px; --space-8: 96px; --space-9: 160px; /* Radius */ --radius-none: 0px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 12px; --radius-xl: 16px; /* Shadows */ --shadow-card: 0 20px 60px rgba(0, 0, 0, 0.5); --shadow-hover: 0 30px 80px rgba(0, 0, 0, 0.6); --shadow-modal: 0 40px 100px rgba(0, 0, 0, 0.7); --glow-metallic: 0 0 24px rgba(232, 233, 235, 0.15); --glow-subtle: 0 0 40px rgba(232, 233, 235, 0.06); /* Motion */ --ease-standard: cubic-bezier(0.16, 1, 0.3, 1); --duration-fast: 200ms; --duration-standard: 400ms; --duration-slow: 600ms; /* Glass */ --glass-blur: 20px; --glass-blur-sm: 16px; --glass-blur-lg: 24px; /* Layout */ --content-max: 1440px; --margin-desktop: 120px; --margin-tablet: 48px; --margin-mobile: 20px; } /* ========================================================================== 3. RESET & BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background-color: var(--black-primary); color: var(--titanium); font-family: var(--font-body); font-size: 16px; line-height: 1.6; overflow-x: hidden; position: relative; } /* Global noise texture overlay — sits above black backgrounds, beneath content. Source file already carries very low built-in alpha (near-invisible by design). background-image is intentionally NOT set here — see .noise-ready below. The 2MB texture is non-critical and decorative, so its fetch is deferred until after window load (via JS) rather than competing with fonts/CSS/JS for bandwidth during the critical rendering path. */ body::before { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.6; mix-blend-mode: overlay; background-size: cover; background-repeat: no-repeat; background-position: center; } body.noise-ready::before { background-image: url("../assets/textures/glass-noise.png"); } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; } input, textarea, select { font-family: inherit; color: inherit; } /* Accessibility utilities */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -100px; left: var(--space-3); z-index: 1000; background: var(--silver-bright); color: var(--black-primary); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); transition: top var(--duration-fast) var(--ease-standard); } .skip-link:focus { top: var(--space-3); } /* Visible focus state — doubles as the system's only focus indicator */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--black-primary), 0 0 0 4px var(--silver-core); border-radius: var(--radius-sm); } /* ========================================================================== 4. TYPOGRAPHY ========================================================================== */ h1, h2, h3 { font-family: var(--font-display); font-weight: 500; color: var(--silver-bright); } .eyebrow { font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gunmetal); margin-bottom: var(--space-3); } .text-chrome { background: var(--chrome-gradient); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } /* ========================================================================== 4d. SVG METALLIC MATERIAL SYSTEM Uploaded SVGs are flat vectors (some pre-colored near-black). We recolor them entirely via CSS by using each file as a mask source and painting a brushed-metal gradient through it — the source files are never edited. ========================================================================== */ .svg-metal { display: inline-block; background: var(--chrome-gradient); background-size: 220% auto; background-position: 0% center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; transition: background-position var(--duration-slow) var(--ease-standard), filter var(--duration-standard) var(--ease-standard), transform var(--duration-standard) var(--ease-standard); } /* Logo variants */ .svg-metal--logo-lockup { -webkit-mask-image: url("../assets/logo/voklon-lockup.svg"); mask-image: url("../assets/logo/voklon-lockup.svg"); width: 132px; height: 82px; } .svg-metal--logo-icon { -webkit-mask-image: url("../assets/logo/voklon-icon.svg"); mask-image: url("../assets/logo/voklon-icon.svg"); width: 44px; height: 28px; } .svg-metal--logo-word { -webkit-mask-image: url("../assets/logo/voklon-wordmark.svg"); mask-image: url("../assets/logo/voklon-wordmark.svg"); width: 140px; height: 12px; } /* Nav / footer logo — brighten and sweep the gradient gently on hover */ .nav__logo .svg-metal, .footer-brand .svg-metal { filter: drop-shadow(0 0 0 rgba(0,0,0,0)); } .nav__logo:hover .svg-metal, .footer-brand a:hover .svg-metal { background-position: 100% center; filter: brightness(1.25) drop-shadow(0 0 10px rgba(232, 233, 235, 0.25)); } /* Loader mark + word */ .loader__mark .svg-metal--logo-icon { width: 100px; height: 64px; margin: 0 auto; } .loader__word .svg-metal--logo-word { width: 130px; height: 11px; } /* Service card icons */ .svg-metal--service-icon { width: 32px; height: 32px; margin-bottom: var(--space-3); filter: brightness(1); transform: translateY(0); } .card--service:hover .svg-metal--service-icon { background-position: 100% center; filter: brightness(1.3); transform: translateY(-3px); } /* Individual service icon sources — files used exactly as uploaded, unmodified. Recolored entirely via the .svg-metal mask system above. */ .icon-ai-agents { -webkit-mask-image: url("../assets/icons/AI_Agents.svg"); mask-image: url("../assets/icons/AI_Agents.svg"); /* Deliberately larger than the standard 32px service-icon box — this icon's crop was already at maximum (zero padding), so the container itself was sized up instead. */ width: 46px; height: 46px; } .icon-workflow-automation { -webkit-mask-image: url("../assets/icons/Workflow_Automation.svg"); mask-image: url("../assets/icons/Workflow_Automation.svg"); } .icon-ai-chatbots { -webkit-mask-image: url("../assets/icons/AI_Chatbots.svg"); mask-image: url("../assets/icons/AI_Chatbots.svg"); } .icon-voice-ai { -webkit-mask-image: url("../assets/icons/Voice_AI.svg"); mask-image: url("../assets/icons/Voice_AI.svg"); } .icon-llm-integrations { -webkit-mask-image: url("../assets/icons/LLM_Intergrations.svg"); mask-image: url("../assets/icons/LLM_Intergrations.svg"); } .icon-data-intelligence { -webkit-mask-image: url("../assets/icons/Data_Intelligence.svg"); mask-image: url("../assets/icons/Data_Intelligence.svg"); } /* Remaining catalog icons — not placed in the curated 6-card grid (layout preserved as-is), reserved here for the future "View All Services" page. */ .icon-ai-consulting { -webkit-mask-image: url("../assets/icons/AI_Consulting.svg"); mask-image: url("../assets/icons/AI_Consulting.svg"); } .icon-business-process-automation { -webkit-mask-image: url("../assets/icons/Business_Process_Automation.svg"); mask-image: url("../assets/icons/Business_Process_Automation.svg"); } .icon-custom-ai-systems { -webkit-mask-image: url("../assets/icons/Custom_AI_Systems.svg"); mask-image: url("../assets/icons/Custom_AI_Systems.svg"); } .icon-enterprise-ai-solutions { -webkit-mask-image: url("../assets/icons/Enterprise_AI_Solutions.svg"); mask-image: url("../assets/icons/Enterprise_AI_Solutions.svg"); } .scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0%; background: var(--chrome-gradient); background-size: 200% auto; z-index: 1000; box-shadow: var(--glow-metallic); transition: width 80ms linear; } /* ========================================================================== 4c. (custom cursor system removed — native browser cursor is used; see section 9 in script.js for the independent card-glow effect that remains, which was never coupled to the cursor element) ========================================================================== */ .link-arrow { position: relative; display: inline-block; font-size: 15px; font-weight: 500; color: var(--titanium); padding-bottom: 2px; transition: color var(--duration-fast) var(--ease-standard); } .link-arrow::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--chrome-gradient); transform: scaleX(0); transform-origin: left; transition: transform var(--duration-fast) var(--ease-standard); } .link-arrow:hover { color: var(--silver-bright); } .link-arrow:hover::after { transform: scaleX(1); } .link-arrow--large { font-size: 16px; } /* ========================================================================== 5. LAYOUT PRIMITIVES ========================================================================== */ section { position: relative; z-index: 2; padding: var(--space-9) var(--margin-desktop); } .section-intro { max-width: 640px; margin: 0 auto var(--space-7); text-align: center; } .section-intro h2 { font-size: 40px; line-height: 1.15; } /* ========================================================================== 5b. SCROLL REVEAL UTILITIES (JS-driven) ========================================================================== */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--duration-slow) var(--ease-standard), transform var(--duration-slow) var(--ease-standard); transition-delay: var(--reveal-delay, 0ms); } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* Cursor-follow glow for glass surfaces (position set via JS custom properties) */ .card--service, .contact-form, .glass-frame { --mx: 50%; --my: 50%; } .card--service::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(320px circle at var(--mx) var(--my), rgba(232, 233, 235, 0.06), transparent 60%); opacity: 0; transition: opacity var(--duration-standard) var(--ease-standard); pointer-events: none; } .card--service:hover::before { opacity: 1; } /* ========================================================================== 6. LOADER ========================================================================== */ .loader { position: fixed; inset: 0; z-index: 9999; background: var(--black-primary); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); transition: opacity var(--duration-slow) var(--ease-standard), visibility var(--duration-slow) var(--ease-standard); } .loader.is-hidden { opacity: 0; visibility: hidden; } .loader__mark { width: 120px; animation: markReveal 900ms var(--ease-standard) forwards; position: relative; display: flex; justify-content: center; } .loader__mark::after { content: ""; position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(232, 233, 235, 0.12) 0%, transparent 70%); z-index: -1; animation: glowPulse 2.4s ease-in-out infinite; } .loader__word { font-family: var(--font-display); font-size: 14px; letter-spacing: 0.3em; color: var(--titanium); opacity: 0; text-align: center; animation: wordFadeIn var(--duration-slow) var(--ease-standard) forwards; animation-delay: 500ms; } @keyframes wordFadeIn { from { opacity: 0; letter-spacing: 0.5em; } to { opacity: 1; letter-spacing: 0.3em; } } @keyframes glowPulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } .loader__progress { width: 160px; height: 1px; background: var(--graphite); position: relative; overflow: hidden; } .loader__progress::after { content: ""; position: absolute; inset: 0; background: var(--chrome-gradient); transform: translateX(-100%); animation: progressFill 1200ms var(--ease-standard) forwards; animation-delay: 300ms; } @keyframes markReveal { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } } @keyframes progressFill { to { transform: translateX(0); } } /* ========================================================================== 7. NAVIGATION ========================================================================== */ .site-header { position: fixed; top: var(--space-4); left: 0; right: 0; z-index: 100; display: flex; justify-content: center; padding: 0 var(--margin-mobile); transition: opacity var(--duration-standard) var(--ease-standard), transform var(--duration-standard) var(--ease-standard); } /* Receded state — scrolling down past the hero */ .site-header.is-receded { opacity: 0.85; } /* Fully hidden state — fast scroll down, restores instantly on scroll up */ .site-header.is-hidden { transform: translateY(-140%); } .nav { width: 100%; max-width: 1200px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-3) var(--space-5); background: var(--bg-elevated-60); backdrop-filter: blur(var(--glass-blur-sm)); -webkit-backdrop-filter: blur(var(--glass-blur-sm)); border: 1px solid var(--overlay-08); border-radius: var(--radius-xl); box-shadow: inset 0 1px 0 var(--overlay-08); transition: background var(--duration-standard) var(--ease-standard), box-shadow var(--duration-standard) var(--ease-standard); } .site-header.is-scrolled .nav { background: rgba(9, 9, 9, 0.75); box-shadow: var(--shadow-card), inset 0 1px 0 var(--overlay-08); } .nav__logo .svg-metal--logo-lockup { width: 45px; height: 28px; } .nav__logo img { height: 28px; width: auto; } .nav__menu { display: flex; align-items: center; gap: var(--space-5); } .nav__menu a { position: relative; font-size: 15px; font-weight: 500; letter-spacing: 0.01em; color: var(--titanium); padding-bottom: 4px; transition: color var(--duration-fast) var(--ease-standard); } .nav__menu a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--chrome-gradient); transform: scaleX(0); transform-origin: left; transition: transform var(--duration-fast) var(--ease-standard); } .nav__menu a:hover { color: var(--silver-bright); } .nav__menu a:hover::after { transform: scaleX(1); } .nav__toggle { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; } .nav__toggle-icon, .nav__toggle-icon::before, .nav__toggle-icon::after { display: block; width: 20px; height: 1.5px; background: var(--titanium); position: relative; transition: background var(--duration-fast) var(--ease-standard); } .nav__toggle-icon::before, .nav__toggle-icon::after { content: ""; position: absolute; left: 0; } .nav__toggle-icon::before { top: -6px; } .nav__toggle-icon::after { top: 6px; } .nav__toggle-icon::before, .nav__toggle-icon::after { transition: transform var(--duration-fast) var(--ease-standard), top var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard); } .nav__toggle[aria-expanded="true"] .nav__toggle-icon { background: transparent; } .nav__toggle[aria-expanded="true"] .nav__toggle-icon::before { top: 0; transform: rotate(45deg); } .nav__toggle[aria-expanded="true"] .nav__toggle-icon::after { top: 0; transform: rotate(-45deg); } @media (max-width: 767px) { .nav__menu { position: fixed; inset: 0; z-index: 99; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-5); background: rgba(9, 9, 9, 0.92); backdrop-filter: blur(var(--glass-blur-lg)); -webkit-backdrop-filter: blur(var(--glass-blur-lg)); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity var(--duration-standard) var(--ease-standard), visibility var(--duration-standard) var(--ease-standard), transform var(--duration-standard) var(--ease-standard); } .nav__menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); } .nav__menu a { font-size: 22px; } } /* ========================================================================== 8. BUTTONS ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; position: relative; overflow: hidden; font-size: 15px; font-weight: 500; letter-spacing: 0.02em; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); transition: transform var(--duration-standard) var(--ease-standard), box-shadow var(--duration-standard) var(--ease-standard), background-position var(--duration-standard) var(--ease-standard), border-color var(--duration-standard) var(--ease-standard), color var(--duration-standard) var(--ease-standard); } .btn--primary { background: var(--chrome-gradient); background-size: 200% auto; background-position: 0% center; color: var(--black-primary); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4); } /* Diagonal glass sheen — sweeps across on hover, like light catching a beveled edge */ .btn--primary::before { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.5), transparent); transform: skewX(-20deg); transition: left var(--duration-slow) var(--ease-standard); pointer-events: none; } .btn--primary:hover::before { left: 130%; } .btn--primary:hover { background-position: 100% center; transform: scale(1.02); box-shadow: var(--glow-metallic), inset 0 1px 0 rgba(255, 255, 255, 0.4); } .btn--primary:active { transform: scale(0.98); } .btn--secondary { background: transparent; border: 1px solid var(--graphite); color: var(--titanium); } /* Animated gradient border ring for secondary buttons (border-image cannot transition) */ .btn--secondary::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--chrome-gradient); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity var(--duration-standard) var(--ease-standard); pointer-events: none; } .btn--secondary:hover { border-color: transparent; color: var(--silver-bright); } .btn--secondary:hover::after { opacity: 1; } .btn--secondary:active { transform: scale(0.98); } .btn--full { width: 100%; } .btn--nav { padding: var(--space-2) var(--space-4); font-size: 14px; } /* ========================================================================== 9. HERO ========================================================================== */ .hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--space-9) var(--margin-desktop); overflow: hidden; } .hero__background { position: absolute; inset: 0; z-index: 0; } .hero__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(184, 186, 189, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(184, 186, 189, 0.05) 1px, transparent 1px); background-size: 80px 80px; mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 0%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 0%, transparent 75%); opacity: 0.5; } .hero__ambient { position: absolute; top: 50%; left: 50%; width: 900px; height: 900px; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(184, 186, 189, 0.05) 0%, transparent 70%); animation: ambientDrift 18s ease-in-out infinite alternate; } .hero__ambient--secondary { width: 500px; height: 500px; top: 65%; left: 35%; background: radial-gradient(circle, rgba(232, 233, 235, 0.04) 0%, transparent 70%); animation: ambientDrift 24s ease-in-out infinite alternate-reverse; } @keyframes ambientDrift { from { transform: translate(-52%, -50%) scale(1); } to { transform: translate(-48%, -52%) scale(1.08); } } .hero__content { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; } .hero__content .eyebrow { text-align: center; } .hero__headline { font-size: 96px; line-height: 1.05; letter-spacing: -0.02em; margin-bottom: var(--space-5); } .hero__subhead { font-size: 20px; color: var(--titanium); max-width: 480px; margin: 0 auto var(--space-6); } .hero__actions { display: flex; align-items: center; justify-content: center; gap: var(--space-3); } .hero__scroll-cue { position: absolute; bottom: var(--space-5); left: 50%; transform: translateX(-50%); z-index: 2; } .scroll-cue__icon { display: block; width: 14px; height: 14px; border-right: 1.5px solid var(--titanium); border-bottom: 1.5px solid var(--titanium); transform: rotate(45deg); animation: scrollBounce 1.8s ease-in-out infinite; } @keyframes scrollBounce { 0%, 100% { transform: rotate(45deg) translate(0, 0); } 50% { transform: rotate(45deg) translate(4px, 4px); } } /* ========================================================================== 10. TRUST BAR ========================================================================== */ .trust-bar { padding: var(--space-7) var(--margin-desktop); border-top: 1px solid var(--overlay-06); border-bottom: 1px solid var(--overlay-06); overflow: hidden; } .trust-bar__caption { text-align: center; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gunmetal); margin-bottom: var(--space-5); } .trust-bar__marquee { display: flex; gap: var(--space-7); width: max-content; animation: marqueeScroll 32s linear infinite; } .trust-bar__marquee:hover { animation-play-state: paused; } .trust-bar__marquee li { font-family: var(--font-data); font-size: 15px; color: var(--titanium); white-space: nowrap; } @keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ========================================================================== 10b. SECTION DIVIDER ========================================================================== */ .section-divider { height: 1px; max-width: 1200px; margin: 0 auto; background: linear-gradient(90deg, transparent 0%, var(--gunmetal) 20%, var(--silver-core) 50%, var(--gunmetal) 80%, transparent 100%); opacity: 0.5; } /* ========================================================================== 11. CARDS (SERVICES) ========================================================================== */ .services { background: var(--black-secondary); } .services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); max-width: var(--content-max); margin: 0 auto; } .card--service { position: relative; overflow: hidden; background: var(--bg-elevated-60); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--overlay-08); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-card), inset 0 1px 0 var(--overlay-08); transition: transform var(--duration-standard) var(--ease-standard), box-shadow var(--duration-standard) var(--ease-standard), border-color var(--duration-standard) var(--ease-standard); } /* Animated gradient border ring — sits just outside the card, fades in on hover. (border-image cannot be transitioned, so this pseudo-element stands in for it.) */ .card--service::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--chrome-gradient); background-size: 200% auto; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity var(--duration-standard) var(--ease-standard); pointer-events: none; } .card--service:hover::after { opacity: 1; animation: borderSweep 2.4s linear infinite; } @keyframes borderSweep { from { background-position: 0% center; } to { background-position: 200% center; } } .card--service:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover), inset 0 1px 0 var(--overlay-12); border-color: transparent; } .card--service h3 { font-size: 24px; margin-bottom: var(--space-2); } .card--service p { font-size: 16px; margin-bottom: var(--space-4); } /* ========================================================================== 12. WHY CHOOSE VOKLON ========================================================================== */ .why-voklon { max-width: 820px; margin: 0 auto; } .why-voklon__narrative { font-size: 18px; margin: var(--space-4) 0 var(--space-6); max-width: 560px; } .stat-row { display: flex; gap: var(--space-6); } .stat-block { position: relative; padding-right: var(--space-6); } .stat-block:not(:last-child)::after { content: ""; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background: var(--graphite); } .stat-block__number { display: block; font-family: var(--font-data); font-size: 56px; font-weight: 500; letter-spacing: -0.02em; color: var(--silver-core); text-shadow: none; transition: text-shadow var(--duration-standard) var(--ease-standard); } .stat-block__number.is-complete { animation: statGlow 900ms var(--ease-standard); } @keyframes statGlow { 0% { text-shadow: none; } 50% { text-shadow: 0 0 20px rgba(232, 233, 235, 0.5); color: var(--silver-bright); } 100% { text-shadow: none; color: var(--silver-core); } } .stat-block__label { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--titanium); margin-top: var(--space-1); } .glass-frame { position: relative; background: var(--bg-elevated-60); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--overlay-08); border-radius: var(--radius-lg); padding: var(--space-2); box-shadow: var(--glow-subtle), var(--shadow-card); } .glass-frame img { border-radius: calc(var(--radius-lg) - 4px); } /* Process section variant — modest, natural scale matching the visual weight of other dashboard/visual assets elsewhere in the design. (Was oversized at 1000px, corrected to 640px, then nudged up slightly to 760px after feeling a touch too small at 640px.) */ .glass-frame--process { max-width: 760px; margin: 0 auto var(--space-8); } .glass-frame--process img { width: 100%; height: auto; display: block; } /* ========================================================================== 13. PROCESS ========================================================================== */ .process { background: var(--black-secondary); } .process__timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); max-width: var(--content-max); margin: 0 auto; position: relative; padding-top: var(--space-6); --progress: 0; } .process__timeline::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--graphite); } .process__timeline::after { content: ""; position: absolute; top: 0; left: 0; width: calc(var(--progress) * 1%); height: 1px; background: var(--chrome-gradient); transition: width var(--duration-fast) linear; } .process__number.is-active { animation: numberPulse var(--duration-standard) var(--ease-standard); } @keyframes numberPulse { 0% { transform: scale(1); } 50% { transform: scale(1.15); color: var(--silver-bright); } 100% { transform: scale(1); } } .process__stage { position: relative; padding-top: var(--space-5); } .process__number { position: absolute; top: -14px; left: 0; font-family: var(--font-data); font-size: 14px; color: var(--silver-core); background: var(--black-secondary); padding-right: var(--space-2); } .process__stage h3 { font-size: 22px; margin-bottom: var(--space-2); } .process__stage p { font-size: 15px; } /* ========================================================================== 14. CASE STUDIES ========================================================================== */ .case-study { display: grid; grid-template-columns: 55fr 45fr; gap: var(--space-6); align-items: center; max-width: var(--content-max); margin: 0 auto var(--space-7); } .case-study:last-child { margin-bottom: 0; } .case-study--image-right { grid-template-columns: 45fr 55fr; } .case-study--image-right .case-study__media { order: 2; } .case-study--image-right .case-study__content { order: 1; } .case-study__media { position: relative; overflow: hidden; border-radius: var(--radius-lg); } .case-study__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-standard); } .case-study:hover .case-study__media img { transform: scale(1.03); } .case-study__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, transparent 45%); pointer-events: none; } .case-study__index { position: absolute; top: var(--space-3); right: var(--space-3); z-index: 2; font-family: var(--font-data); font-size: 14px; letter-spacing: 0.05em; color: var(--silver-bright); background: var(--bg-elevated-60); backdrop-filter: blur(var(--glass-blur-sm)); -webkit-backdrop-filter: blur(var(--glass-blur-sm)); border: 1px solid var(--overlay-08); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2); } .case-study__content h3 { font-size: 28px; margin: var(--space-2) 0 var(--space-3); } .case-study__content p { margin-bottom: var(--space-4); } /* ========================================================================== 14b. RENDER-COST OPTIMIZATION — BELOW-THE-FOLD SECTIONS content-visibility: auto tells the browser to skip layout/paint work for these sections entirely until they're about to enter the viewport — a direct, high-impact reduction in initial render cost on a page this long, with no visual difference. contain-intrinsic-size gives the browser a placeholder height so scrollbar/scroll-position math stays stable before each section has been measured for real (prevents jump-scroll on fast scrolling, not a CLS concern since it's an estimate for unrendered content). ========================================================================== */ .case-studies, .testimonials, .faq, .contact { content-visibility: auto; } .case-studies { contain-intrinsic-size: auto 1400px; } .testimonials { contain-intrinsic-size: auto 500px; } .faq { contain-intrinsic-size: auto 600px; } .contact { contain-intrinsic-size: auto 700px; } /* ========================================================================== 15. TESTIMONIALS ========================================================================== */ .testimonials { display: flex; justify-content: center; } .testimonial-carousel { max-width: 800px; text-align: center; position: relative; } .testimonial { display: none; position: relative; background: var(--bg-elevated-60); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--overlay-08); border-radius: var(--radius-lg); padding: var(--space-6); } .testimonial__mark { display: block; width: 28px; height: 14px; margin: 0 auto var(--space-4); position: relative; } .testimonial__mark::before, .testimonial__mark::after { content: ""; position: absolute; top: 0; width: 10px; height: 14px; border-left: 1.5px solid var(--silver-core); border-bottom: 1.5px solid var(--silver-core); transform: skewX(-15deg); } .testimonial__mark::before { left: 2px; } .testimonial__mark::after { right: 2px; } .testimonial--active { display: block; } .testimonial p { font-size: 28px; line-height: 1.4; color: var(--silver-bright); font-family: var(--font-display); font-weight: 500; margin-bottom: 0; } /* ========================================================================== 16. FAQ ========================================================================== */ .faq { display: grid; grid-template-columns: 38fr 62fr; gap: var(--space-7); background: var(--black-secondary); } .faq__intro p { margin: var(--space-4) 0 var(--space-5); max-width: 400px; } .faq__list { display: flex; flex-direction: column; gap: var(--space-3); } .faq__item { border-bottom: 1px solid var(--graphite); padding-bottom: var(--space-3); } .faq__item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; font-size: 18px; color: var(--silver-bright); cursor: pointer; padding: var(--space-2) 0; } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary::after { content: ""; flex-shrink: 0; width: 8px; height: 8px; border-right: 1.5px solid var(--titanium); border-bottom: 1.5px solid var(--titanium); transform: rotate(45deg); transition: transform var(--duration-fast) var(--ease-standard); margin-left: var(--space-3); } .faq__item[open] summary::after { transform: rotate(225deg); } .faq__item[open] { background: var(--bg-elevated-60); backdrop-filter: blur(var(--glass-blur-sm)); -webkit-backdrop-filter: blur(var(--glass-blur-sm)); border-radius: var(--radius-md); padding: var(--space-3); } .faq__item p { font-size: 15px; padding-top: var(--space-2); } /* ========================================================================== 17. CONTACT ========================================================================== */ .contact { display: grid; grid-template-columns: 45fr 55fr; gap: var(--space-7); } .contact__intro p { margin: var(--space-4) 0 var(--space-5); max-width: 420px; } .trust-signals { display: flex; flex-direction: column; gap: var(--space-3); } .trust-signals li { position: relative; padding-left: var(--space-5); font-size: 15px; color: var(--titanium); } .trust-signals li::before { content: ""; position: absolute; left: 0; top: 4px; width: 10px; height: 6px; border-left: 1.5px solid var(--silver-core); border-bottom: 1.5px solid var(--silver-core); transform: rotate(-45deg); } .contact-form { background: var(--bg-elevated-60); backdrop-filter: blur(var(--glass-blur-lg)); -webkit-backdrop-filter: blur(var(--glass-blur-lg)); border: 1px solid var(--overlay-08); border-radius: var(--radius-xl); padding: var(--space-6); box-shadow: var(--shadow-card); } .form-field { margin-bottom: var(--space-4); } .form-field label { display: block; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--titanium); margin-bottom: var(--space-2); } .form-field input, .form-field textarea { width: 100%; background: transparent; border: 1px solid var(--graphite); border-radius: var(--radius-sm); padding: var(--space-3); font-size: 16px; transition: border-color var(--duration-standard) var(--ease-standard), box-shadow var(--duration-standard) var(--ease-standard); } .form-field input:focus, .form-field textarea:focus { outline: none; border-color: var(--silver-core); box-shadow: var(--glow-metallic); } .form-field textarea { resize: vertical; } .form-note { text-align: center; font-size: 13px; color: var(--gunmetal); margin-top: var(--space-3); } /* Field validation states */ .form-field input.is-invalid, .form-field textarea.is-invalid { border-color: var(--error-muted); } .form-field input.is-valid, .form-field textarea.is-valid { border-color: var(--success-muted); } .field-error { font-size: 13px; color: var(--error-muted); margin-top: var(--space-1); } /* Submit loading state */ .contact-form.is-submitting .btn--primary { position: relative; overflow: hidden; color: transparent; } .contact-form.is-submitting .btn--primary::after { content: ""; position: absolute; inset: 0; background: var(--chrome-gradient); background-size: 200% auto; animation: submitSweep 1.1s linear infinite; } @keyframes submitSweep { from { background-position: 0% center; } to { background-position: 200% center; } } .contact-form.is-submitting .btn--primary { opacity: 0.9; pointer-events: none; } /* Success confirmation panel — replaces the form in place */ .form-success { background: var(--bg-elevated-60); backdrop-filter: blur(var(--glass-blur-lg)); -webkit-backdrop-filter: blur(var(--glass-blur-lg)); border: 1px solid var(--overlay-08); border-radius: var(--radius-xl); padding: var(--space-8) var(--space-6); box-shadow: var(--shadow-card); text-align: center; } .form-success__title { font-family: var(--font-display); font-size: 24px; color: var(--silver-bright); margin-bottom: var(--space-2); } .form-success__body { font-size: 15px; color: var(--titanium); } /* ========================================================================== 18. FOOTER ========================================================================== */ .site-footer { position: relative; padding: var(--space-8) var(--margin-desktop) var(--space-6); border-top: 1px solid var(--overlay-06); } .site-footer__watermark { position: absolute; bottom: -40px; left: 50%; transform: translateX(-50%); width: 820px; height: auto; aspect-ratio: 946 / 79; background-color: var(--silver-bright); -webkit-mask-image: url("../assets/logo/voklon-wordmark.svg"); mask-image: url("../assets/logo/voklon-wordmark.svg"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; opacity: 0.04; pointer-events: none; } .site-footer__content { position: relative; z-index: 2; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-6); padding-bottom: var(--space-6); } .footer-brand a { display: inline-flex; } .footer-brand .svg-metal--logo-lockup { width: 39px; height: 24px; margin-bottom: var(--space-3); } .footer-brand img { height: 24px; margin-bottom: var(--space-3); } .footer-brand p { font-size: 14px; max-width: 240px; } .footer-nav h3, .footer-social h3 { font-family: var(--font-body); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gunmetal); margin-bottom: var(--space-3); font-weight: 500; } .footer-nav ul, .social-links { display: flex; flex-direction: column; gap: var(--space-2); } .footer-nav a, .social-links a { font-size: 14px; color: var(--titanium); transition: color var(--duration-fast) var(--ease-standard); } .footer-nav a:hover, .social-links a:hover { color: var(--silver-bright); } .site-footer__bottom { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-5); border-top: 1px solid var(--overlay-06); font-size: 13px; letter-spacing: 0.04em; color: var(--gunmetal); } .legal-links { display: flex; gap: var(--space-4); } .legal-links a { color: var(--gunmetal); transition: color var(--duration-fast) var(--ease-standard); } .legal-links a:hover { color: var(--titanium); } /* ========================================================================== 19. RESPONSIVE — LAPTOP (1024–1439px) ========================================================================== */ @media (max-width: 1439px) { :root { --margin-desktop: 64px; } .hero__headline { font-size: 76px; } .site-footer__watermark { width: 600px; } } /* ========================================================================== 20. RESPONSIVE — TABLET (768–1023px) ========================================================================== */ @media (max-width: 1023px) { :root { --margin-desktop: var(--margin-tablet); } section { padding: var(--space-8) var(--margin-tablet); } .hero__headline { font-size: 56px; } .services__grid { grid-template-columns: repeat(2, 1fr); } .stat-row { flex-wrap: wrap; row-gap: var(--space-5); } .stat-block { width: 50%; padding-right: 0; } .stat-block:nth-child(odd)::after { display: none; } .process__timeline { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-6); } .case-study, .case-study--image-right { grid-template-columns: 1fr; } .case-study__media, .case-study--image-right .case-study__media { order: 1; } .case-study__content, .case-study--image-right .case-study__content { order: 2; } .faq { grid-template-columns: 1fr; } .contact { grid-template-columns: 1fr; } .site-footer__content { grid-template-columns: 1fr 1fr; } } /* ========================================================================== 21. RESPONSIVE — MOBILE (≤767px) ========================================================================== */ @media (max-width: 767px) { :root { --margin-desktop: var(--margin-mobile); } section { padding: var(--space-8) var(--margin-mobile); } .btn--nav { display: none; } .nav__toggle { display: flex; } .hero { padding: var(--space-8) var(--margin-mobile); } .hero__headline { font-size: 40px; } .hero__subhead { font-size: 17px; } .hero__actions { flex-direction: column; width: 100%; } .hero__actions .btn { width: 100%; } .services__grid { grid-template-columns: 1fr; } .stat-block { width: 100%; } .stat-block::after { display: none; } .process__timeline { grid-template-columns: 1fr; } .site-footer__content { grid-template-columns: 1fr; text-align: center; } .footer-nav ul, .social-links { align-items: center; } .site-footer__bottom { flex-direction: column; gap: var(--space-3); } .site-footer__watermark { width: 340px; } .testimonial p { font-size: 22px; } } /* ========================================================================== 22. REDUCED MOTION ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }