/*============================================= = VDOTX — Engineered Precision (copper system) = Tokens come from colors_and_type.css; this = file rebinds the legacy site vars onto them. =============================================*/ @import url('colors_and_type.css'); :root { /* Default light — Day Mode. Dark mode is :root.dark-theme below. */ --bg-primary: var(--vx-pure-white); --bg-secondary: var(--vx-pure-white); --accent-primary: var(--vx-copper-700); --accent-secondary: var(--vx-copper-700); --accent-tertiary: #8892A6; --text-primary: var(--vx-silicon-900); --text-secondary: #4A5468; /* Typography — VDOTX trio */ --font-heading: var(--vx-font-display); /* Chakra Petch */ --font-body: var(--vx-font-body); /* IBM Plex Sans */ --font-mono: var(--vx-font-mono); /* IBM Plex Mono */ /* Hairlines, shadows, radii — restrained, engineered */ --litho-border: 1px solid rgba(10,14,26,0.10); --litho-shadow-base: 0 4px 12px rgba(10,14,26,0.06), 0 0 0 1px rgba(10,14,26,0.04); --litho-shadow-hover: 0 12px 32px rgba(10,14,26,0.10), 0 0 0 1px rgba(168,88,32,0.24); --litho-radius: 2px; } /* Dark theme — opt-in via .dark-theme on . */ :root.dark-theme { --bg-primary: var(--vx-silicon-900); --bg-secondary: var(--vx-silicon-800); --accent-primary: var(--vx-copper-bright); --accent-secondary: var(--vx-copper-500); --accent-tertiary: var(--vx-graphite-300); --text-primary: var(--vx-signal-white); --text-secondary: var(--vx-graphite-200); --litho-border: 1px solid var(--vx-border-2); --litho-shadow-base: 0 4px 12px rgba(0,0,0,0.45), 0 0 0 1px rgba(245,247,250,0.05); --litho-shadow-hover: 0 12px 32px rgba(0,0,0,0.55), 0 0 0 1px var(--vx-accent-hairline); } /* Back-compat: dark-mode is opt-in via .dark-theme on . color-scheme: dark ensures native browser chrome (scrollbars, inputs) matches. */ :root.dark-theme { color-scheme: dark; } .theme-toggle { background: transparent; border: 1px solid var(--vx-border-2); color: var(--text-primary); width: 36px; height: 36px; display: flex; justify-content: center; align-items: center; cursor: pointer; font-size: 1.05rem; transition: border-color 0.3s ease, color 0.3s ease; border-radius: var(--vx-radius-3); margin-left: 15px; } .theme-toggle:hover { border-color: var(--accent-primary); color: var(--accent-primary); } /*============================================= = GLOBAL STYLES = =============================================*/ * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: var(--bg-primary); color: var(--text-primary); font-family: var(--font-body); line-height: var(--vx-lh-relaxed); overflow-x: hidden; cursor: crosshair; /* Technical cursor — restored on interactive widgets below. */ } /* Keep native cursors on widgets where crosshair would feel hostile. */ input, textarea, select { cursor: text; } button, a, .btn, .theme-toggle, .brand-lockup, [role="button"], [type="submit"], [type="button"] { cursor: pointer; } .btn[disabled], button[disabled] { cursor: not-allowed; } /* Die-layout grid background — 1px hairlines on a 64px cell, low opacity. */ body::before { content: ''; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-image: linear-gradient(to right, rgba(10,14,26,0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(10,14,26,0.04) 1px, transparent 1px); background-size: 64px 64px; z-index: -2; } :root.dark-theme body::before { background-image: linear-gradient(to right, rgba(245,247,250,0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(245,247,250,0.04) 1px, transparent 1px); } /* Subtle copper radial glow behind hero on dark — the closest the brand gets to spectacle. */ body::after { display: none; } :root.dark-theme body::after { content: ''; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(800px 500px at 50% 18%, rgba(232,152,96,0.10), transparent 70%); z-index: -1; display: block; } a { color: var(--text-primary); text-decoration: none; transition: all 0.3s ease; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); letter-spacing: var(--vx-tracking-tight); line-height: var(--vx-lh-snug); font-weight: 600; color: var(--text-primary); } .telemetry { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--vx-tracking-eyebrow); color: var(--accent-primary); text-transform: uppercase; display: block; margin-bottom: 0.5rem; } .container { max-width: 1200px; margin: 0 auto; padding: 0 5%; } .section { padding: 90px 0; position: relative; z-index: 2; } /* Inner pages have tighter layouts for better information density and clearance */ .inner-page .section { padding: 60px 0; } /* Utilities */ .text-center { text-align: center; } .text-left { text-align: left; } .text-primary { color: var(--text-primary); } .text-secondary { color: var(--text-secondary); } .align-center { align-items: center; } .d-block { display: block; } .d-inline-block { display: inline-block; } .w-100 { width: 100%; } .m-0 { margin: 0; } .mb-2 { margin-bottom: 0.5rem; } .mb-3 { margin-bottom: 1rem; } .mb-4 { margin-bottom: 1.5rem; } .mb-5 { margin-bottom: 3rem; } .mt-2 { margin-top: 0.5rem; } .mt-3 { margin-top: 1rem; } .mt-4 { margin-top: 1.5rem; } .mt-5 { margin-top: 3rem; } .ml-4 { margin-left: 2rem; } .pl-4 { padding-left: 2rem; } .p-0 { padding: 0; } .p-4 { padding: 2rem; } .pt-30 { padding-top: 130px !important; } .clean-list { list-style: none; padding-left: 0; } .clean-list li { position: relative; padding-left: 1.5rem; margin-bottom: 0.5rem; color: var(--text-secondary); } .clean-list li::before { content: "■"; font-size: 8px; position: absolute; left: 0; top: 6px; color: var(--accent-primary); } /*============================================= = Brand wordmark + copper logo lockup =============================================*/ .brand-lockup { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text-primary); } .brand-lockup .brand-mark { width: 32px; height: 32px; display: block; filter: drop-shadow(0 0 10px rgba(232,152,96,0.25)); } .brand-lockup .brand-wordmark { font-family: var(--vx-font-display); font-weight: 700; font-size: 18px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-primary); line-height: 1; } .brand-lockup:hover .brand-mark { filter: drop-shadow(0 0 14px rgba(232,152,96,0.45)); } .brand-lockup-lg .brand-mark { width: 56px; height: 56px; } .brand-lockup-lg .brand-wordmark { font-size: 26px; } /*============================================= = CUSTOM CURSOR TRACE = =============================================*/ #cursor-glow { position: fixed; top: -10px; left: -10px; width: 20px; height: 20px; border: 1px solid var(--accent-primary); border-radius: 0; pointer-events: none; z-index: 9998; background: transparent; transform: translate(-50%, -50%); transition: width 0.2s, height 0.2s, border-color 0.2s; } #cursor-glow::after { content: ''; position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; background: var(--accent-primary); transform: translate(-50%, -50%); } /*============================================= = PRELOADER = =============================================*/ #boot-sequence { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: var(--bg-primary); z-index: 9999; display: flex; flex-direction: column; justify-content: center; align-items: center; font-family: var(--font-mono); transition: opacity 0.5s ease-in-out; } .boot-text { color: var(--text-secondary); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 20px; } .boot-progress-bar { width: 200px; height: 1px; background: var(--vx-border-2); position: relative; } .boot-progress { position: absolute; top: 0; left: 0; height: 100%; width: 0%; background: linear-gradient(90deg, var(--vx-copper-700), var(--vx-copper-bright), var(--vx-copper-peak)); transition: width 1s linear; } /*============================================= = NAVBAR = =============================================*/ .navbar { position: fixed; top: 0; width: 100%; height: 80px; display: flex; justify-content: space-between; align-items: center; padding: 0 5%; background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--vx-border-1); z-index: 1000; transition: background 0.3s ease, border-color 0.3s ease; } :root.dark-theme .navbar { background: rgba(10, 14, 26, 0.78); } .scrolled-nav { background: rgba(255, 255, 255, 0.95) !important; border-bottom: 1px solid var(--vx-border-2) !important; } :root.dark-theme .scrolled-nav { background: rgba(10, 14, 26, 0.92) !important; } /* Inner pages: navbar is always solid (no hero scroll needed). */ .solid-nav { background: rgba(255, 255, 255, 0.98) !important; border-bottom: 1px solid var(--vx-border-2) !important; } :root.dark-theme .solid-nav { background: rgba(10, 14, 26, 0.97) !important; } .logo a { font-family: var(--font-heading); font-weight: 700; font-size: 22px; letter-spacing: 0.14em; color: var(--text-primary); } .nav-links { display: flex; align-items: center; } .nav-links a { margin-left: 2rem; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; font-family: var(--font-mono); color: var(--text-secondary); } .nav-links a:hover { color: var(--accent-primary); } /* Active page indicator — 1px copper underline under current nav link. */ .nav-links a.nav-active { color: var(--accent-primary); border-bottom: 1px solid var(--accent-primary); padding-bottom: 2px; } .nav-links a.nav-active.btn-nav { border: 1px solid var(--accent-primary); padding-bottom: 10px; background: var(--vx-accent-soft); color: var(--accent-primary); } /* Hamburger menu button — hidden on desktop, visible at mobile breakpoint. */ .hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; background: transparent; border: 1px solid var(--vx-border-2); border-radius: var(--vx-radius-3); cursor: pointer; padding: 8px; flex-shrink: 0; transition: border-color 0.2s ease; } .hamburger span { display: block; height: 1px; background: var(--text-primary); transition: transform 0.3s ease, opacity 0.3s ease; pointer-events: none; } .hamburger:hover { border-color: var(--accent-primary); } .hamburger.nav-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .hamburger.nav-open span:nth-child(2) { opacity: 0; } .hamburger.nav-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /*============================================= = BUTTONS & CTAs = =============================================*/ .btn { display: inline-block; padding: 14px 32px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; border-radius: var(--vx-radius-3); cursor: pointer; transition: transform var(--vx-dur-base) var(--vx-ease-standard), box-shadow var(--vx-dur-base) var(--vx-ease-standard), background var(--vx-dur-base) var(--vx-ease-standard), border-color var(--vx-dur-base) var(--vx-ease-standard); position: relative; } /* Primary — copper lustre. The everyday CTA wears the brand metal. */ .btn-primary { background: linear-gradient(180deg, var(--vx-copper-500) 0%, var(--vx-copper-700) 100%); color: #FFE9CC; border: 1px solid var(--vx-copper-bright); box-shadow: inset 0 1px 0 rgba(255,232,200,0.20), inset 0 -1px 0 rgba(0,0,0,0.30), 0 0 0 1px rgba(232,152,96,0.18), 0 6px 18px rgba(122,57,20,0.30); } .btn-primary:hover { background: linear-gradient(180deg, var(--vx-copper-bright) 0%, var(--vx-copper-500) 100%); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,232,200,0.28), 0 0 0 1px rgba(232,152,96,0.36), 0 10px 24px rgba(122,57,20,0.40); color: #FFE9CC; } .btn-primary:active { transform: translateY(1px); } /* Secondary — copper outline. Quiet, structural. */ .btn-secondary { background: transparent; color: var(--text-primary); border: 1px solid var(--vx-accent-hairline); } .btn-secondary:hover { border-color: var(--accent-primary); color: var(--accent-primary); background: var(--vx-accent-soft); } .btn-secondary:active { transform: translateY(1px); } /* Nav — compact ghost button. */ .btn-nav { padding: 10px 20px; border: 1px solid var(--vx-border-2); color: var(--text-primary); } .btn-nav:hover { background: var(--vx-accent-soft); color: var(--accent-primary); border-color: var(--accent-primary); } /*============================================= = HERO SECTION = =============================================*/ .hero { height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; position: relative; } #particle-canvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none; opacity: 0.3; } .hero-content { position: relative; z-index: 3; max-width: 900px; padding: 0 20px; } .page-title, .hero h1 { font-family: var(--font-heading); font-size: clamp(2.5rem, 5vw, 4rem); margin-bottom: 1.5rem; font-weight: 600; letter-spacing: var(--vx-tracking-tight); line-height: var(--vx-lh-tight); color: var(--text-primary); } .hero h1 { font-size: clamp(2.75rem, 6vw, 4.25rem); letter-spacing: var(--vx-tracking-tight); } /* Copper gradient accent — defaults to legible deep copper on light backgrounds. */ .copper-accent { background: linear-gradient(180deg, var(--vx-copper-500) 0%, var(--vx-copper-700) 60%, var(--vx-copper-900) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Dark mode: brighter copper peak gradient for legibility on dark surfaces. */ :root.dark-theme .copper-accent { background: linear-gradient(180deg, var(--vx-copper-peak) 0%, var(--vx-copper-bright) 45%, var(--vx-copper-500) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .subtitle { font-family: var(--font-body); font-size: 1.05rem; color: var(--text-secondary); margin-bottom: 3rem; max-width: 620px; margin-left: auto; margin-right: auto; font-weight: 400; line-height: var(--vx-lh-relaxed); } .cta-group { display: flex; gap: 20px; justify-content: center; } /*============================================= = LITHO PANELS (NOT GLASS) = =============================================*/ .section-title { font-size: 2.5rem; margin-bottom: 3rem; } .litho-panel, .litho-card { background: var(--bg-secondary); border: 1px solid var(--vx-border-2); box-shadow: var(--litho-shadow-base); border-radius: var(--vx-radius-4); padding: 3rem; position: relative; transition: transform var(--vx-dur-base) var(--vx-ease-standard), box-shadow var(--vx-dur-base) var(--vx-ease-standard), border-color var(--vx-dur-base) var(--vx-ease-standard); } /* Copper rim glow on hover — replaces the prior prismatic blue sheen. */ .litho-panel::after, .litho-card::after { content: ''; position: absolute; inset: -1px; background: linear-gradient(135deg, transparent 40%, rgba(232,152,96,0.35) 70%, transparent 100%); z-index: -1; opacity: 0; transition: opacity var(--vx-dur-base) var(--vx-ease-standard); border-radius: var(--vx-radius-4); } .litho-card:hover { transform: translateY(-2px); box-shadow: var(--litho-shadow-hover); border-color: var(--vx-accent-hairline); } .litho-card:hover::after { opacity: 1; } .icon-glow { width: 40px; height: 40px; background: var(--vx-bg-raised); border: 1px solid var(--vx-accent-hairline); border-radius: var(--vx-radius-2); margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: center; position: relative; box-shadow: 0 0 12px rgba(232,152,96,0.18); } .icon-glow::before { content: ''; width: 8px; height: 8px; background: var(--accent-primary); border-radius: 50%; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } .tech-card h3, .use-case h4 { margin-bottom: 1rem; } .tech-card p, .use-case p { font-size: 0.95rem; } /* Images — cool, high-contrast, low-saturation. */ .art-image { width: 100%; height: auto; border-radius: var(--vx-radius-4); object-fit: cover; border: 1px solid var(--vx-border-2); box-shadow: var(--litho-shadow-base); filter: grayscale(25%) contrast(1.05); } .about-image { width: 100%; max-height: 360px; /* Restrict picture container size so it does not dwarf the right-side text column */ border-radius: var(--vx-radius-4); overflow: hidden; display: flex; } .about-image img { width: 100%; height: 100%; max-height: 360px; object-fit: cover !important; } @media (max-width: 992px) { .about-image { max-height: 320px; /* elegant, balanced height on tablet/mobile when stacked */ } } .home-tech-panel, .about-tech-panel { padding: 2rem 2rem !important; /* Perfectly balanced, even padding on all sides */ height: 360px !important; /* Matches the left-side image height exactly */ display: flex; flex-direction: column; justify-content: flex-start; /* Aligns all content cleanly to the top */ box-sizing: border-box; } .home-tech-panel .telemetry, .about-tech-panel .telemetry { margin-bottom: 0.35rem !important; } .home-tech-panel h2, .home-tech-panel h3, .about-tech-panel h2, .about-tech-panel h3 { margin-top: 0 !important; margin-bottom: 0.75rem !important; /* Clean, uniform vertical rhythm */ font-size: 1.65rem !important; /* Perfectly balanced, premium size */ line-height: 1.28 !important; color: var(--text-primary); } .home-tech-panel p, .about-tech-panel p { margin-top: 0 !important; margin-bottom: 0.75rem !important; /* Clean, uniform vertical rhythm */ line-height: 1.55 !important; font-size: 0.95rem !important; } .home-tech-panel p:last-of-type, .about-tech-panel p:last-of-type { margin-bottom: 0 !important; /* Prevents push at the bottom of the card */ } @media (max-width: 992px) { .home-tech-panel, .about-tech-panel { height: auto !important; /* Flow naturally when stacked */ padding: 2.25rem 2rem !important; } } .hero-image { max-width: 100%; width: 100%; height: auto; max-height: 520px; /* highly optimized maximum height constraint */ object-fit: contain; display: block; margin: 0 auto; } .card-image-wrap { margin: -3rem -3rem 2rem -3rem; overflow: hidden; border-bottom: 1px solid var(--vx-border-2); background: radial-gradient(circle, rgba(30, 41, 59, 0.4) 0%, rgba(15, 23, 42, 0.85) 100%); display: flex; justify-content: center; align-items: center; height: 220px; padding: 1rem 0; } .card-image { width: auto; height: 100%; aspect-ratio: 1 / 1; object-fit: contain; border-radius: var(--vx-radius-2); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); filter: grayscale(25%); transition: filter var(--vx-dur-base) var(--vx-ease-standard), transform 0.4s ease; } .litho-card:hover .card-image { filter: grayscale(0%); transform: scale(1.03); } /* Platform Layout */ .platform-layout { display: grid; grid-template-columns: repeat(3, 1fr); padding: 0; } .platform-column { padding: 3rem; } .platform-column.border-left { border-left: 1px solid var(--vx-border-2); } /* Timeline / Roadmap */ .timeline { border-left: 1px solid var(--vx-border-2); padding-left: 2rem; list-style: none; margin-left: 1rem; } .timeline li { position: relative; margin-bottom: 2rem; color: var(--text-secondary); } .timeline li::before { content: ''; position: absolute; left: -2.35rem; top: 0.5rem; width: 10px; height: 10px; background: var(--bg-primary); border: 2px solid var(--vx-copper-500); border-radius: 2px; transition: background var(--vx-dur-base) var(--vx-ease-standard), border-color var(--vx-dur-base) var(--vx-ease-standard), box-shadow var(--vx-dur-base) var(--vx-ease-standard); } .timeline li:hover::before { background: var(--vx-copper-bright); border-color: var(--vx-copper-bright); box-shadow: 0 0 8px rgba(232,152,96,0.6); } .timeline li strong { color: var(--text-primary); font-weight: 600; margin-right: 0.4rem; } .timeline-date { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-primary); margin-bottom: 0.35rem; } .timeline-note { margin-top: 1rem; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--text-secondary); opacity: 0.75; } .highlight-link { text-decoration: none; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; border-bottom: 1px solid transparent; transition: color var(--vx-dur-base) var(--vx-ease-standard), border-color var(--vx-dur-base) var(--vx-ease-standard); } .highlight-link:hover { color: var(--accent-primary); border-bottom-color: var(--accent-primary); } .home-tech-panel .highlight-link, .about-tech-panel .highlight-link { margin-top: auto !important; align-self: flex-start; } .highlight-text { margin-bottom: 1rem; color: var(--accent-primary); font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: var(--vx-tracking-eyebrow); text-transform: uppercase; } /* Forms */ .form-group { margin-bottom: 1.5rem; } .form-group label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--text-secondary); } .litho-input { width: 100%; padding: 14px 15px; border-radius: var(--vx-radius-2); border: 1px solid var(--vx-border-2); background: var(--vx-bg-raised); font-family: var(--font-body); font-size: 1rem; color: var(--text-primary); transition: border-color var(--vx-dur-base) var(--vx-ease-standard), box-shadow var(--vx-dur-base) var(--vx-ease-standard); } .litho-input::placeholder { color: var(--vx-graphite-300); } .litho-input:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 2px var(--vx-accent-soft); } .litho-input { background: var(--vx-pure-white); border-color: rgba(10,14,26,0.14); } :root.dark-theme .litho-input { background: var(--vx-bg-raised); border-color: var(--vx-border-2); } /* Footer */ .footer-nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.75rem; justify-content: center; margin-bottom: 1.5rem; } .footer-nav a { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--text-secondary); padding: 4px 0; } .footer-nav a:hover { color: var(--accent-primary); } .footer { border-top: 1px solid var(--vx-border-1); padding: 4rem 0; margin-top: 5rem; background: var(--bg-primary); position: relative; } .footer::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--vx-copper-bright) 50%, transparent 100%); opacity: 0.45; } .brand-tagline { font-family: var(--vx-font-display); font-style: italic; letter-spacing: 0; color: var(--text-secondary); font-size: 14px; margin-bottom: 1rem; } .copyright { color: var(--vx-graphite-300); font-size: 12px; font-family: var(--font-mono); letter-spacing: 0.04em; } /* Visitor counter — telemetry-styled readout. Inline on marketing footers; floats bottom-right on EDA/game pages where there's no footer chrome to dock into. */ .visitor-counter { margin-top: 1.25rem; display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px; border: 1px solid var(--vx-border-2); border-radius: 999px; background: rgba(245,247,250,0.03); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vx-graphite-200); } .visitor-counter .visitor-count-label { color: var(--vx-graphite-300); } .visitor-counter .visitor-count-value { color: var(--vx-copper-bright); font-weight: 600; letter-spacing: 0.06em; text-transform: none; } .visitor-counter .visitor-count-value::before { content: '·'; margin-right: 8px; color: var(--vx-graphite-300); } .visitor-counter--floating { position: fixed; right: 18px; bottom: 18px; margin: 0; z-index: 50; background: rgba(10,14,26,0.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 4px 12px rgba(0,0,0,0.35); } /* TapeOut · final-level completion overlay */ #eda-completion { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; background: rgba(7,10,20,0.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .eda-completion-card { max-width: 520px; width: calc(100% - 48px); padding: 36px 36px 32px; background: #10162A; border: 1px solid rgba(232,152,96,0.35); border-radius: 6px; box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(232,152,96,0.15); text-align: left; } .eda-completion-card .eyebrow { display: inline-block; font-family: var(--vx-font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--vx-copper-bright); margin-bottom: 14px; } .eda-completion-card h2 { font-family: var(--vx-font-display); color: var(--vx-signal-white); font-size: 1.6rem; margin: 0 0 12px; letter-spacing: -0.01em; } .eda-completion-card p { color: var(--vx-graphite-100); line-height: 1.6; font-size: 14px; margin: 0 0 22px; } .eda-completion-actions { display: flex; flex-wrap: wrap; gap: 10px; } .eda-completion-actions .play, .eda-completion-actions .ghost { display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; border-radius: 4px; font-family: var(--vx-font-mono); font-size: 12px; letter-spacing: 0.10em; text-transform: uppercase; text-decoration: none; cursor: pointer; } .eda-completion-actions .play { background: var(--vx-copper-bright); color: #10162A; border: 1px solid var(--vx-copper-bright); font-weight: 600; } .eda-completion-actions .ghost { background: transparent; color: var(--vx-graphite-100); border: 1px solid rgba(245,247,250,0.18); } .eda-completion-actions .ghost:hover { color: var(--vx-signal-white); border-color: var(--vx-copper-bright); } /* EDA pages: hide the theme toggle without flashing it before JS runs. */ body.eda-theme #theme-toggle { display: none !important; } /* Reveal Animation */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease, transform 0.8s ease; } .reveal.active { opacity: 1; transform: translateY(0); } /*============================================= = CONTACT PAGE — brand-forward, investor-first =============================================*/ /* Big brand stamp at the top of the contact page. */ .contact-hero { padding: 80px 0 24px; text-align: center; position: relative; z-index: 2; } .brand-lockup-xl .brand-mark { width: 64px; height: 64px; filter: drop-shadow(0 0 16px rgba(232,152,96,0.35)); } .brand-lockup-xl { margin-bottom: 1rem; display: inline-flex; justify-content: center; } .contact-brand-name { font-family: var(--font-heading); font-size: clamp(2rem, 5.5vw, 3.75rem); font-weight: 700; letter-spacing: 0.04em; line-height: 1; margin: 0 0 0.5rem; text-transform: uppercase; } .contact-brand-sub { font-family: var(--font-mono); color: var(--text-secondary); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 1.25rem; } .contact-brand-tagline { font-family: var(--vx-font-display); font-style: italic; color: var(--text-primary); font-size: clamp(0.95rem, 1.8vw, 1.15rem); margin-bottom: 1rem; } .contact-brand-meta { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent-primary); border-top: 1px solid var(--vx-border-2); border-bottom: 1px solid var(--vx-border-2); padding: 8px 18px; margin-top: 0.4rem; } .contact-brand-meta .dot { width: 4px; height: 4px; background: var(--accent-primary); border-radius: 50%; display: inline-block; opacity: 0.5; } /* INVESTOR STRIP — copper-rimmed, the loudest element on the page. */ .investor-strip { display: grid; grid-template-columns: 1.3fr 1fr; gap: 3rem; align-items: center; background: linear-gradient(135deg, rgba(232,152,96,0.08) 0%, rgba(122,57,20,0.04) 100%), var(--bg-secondary); border: 1px solid var(--vx-copper-bright); border-radius: var(--vx-radius-4); padding: 2.5rem 3rem; position: relative; box-shadow: 0 0 0 1px rgba(232,152,96,0.18), 0 18px 60px rgba(122,57,20,0.20), var(--litho-shadow-base); } .investor-strip::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--vx-copper-peak) 50%, transparent 100%); opacity: 0.7; } .investor-strip-text h2 { font-family: var(--font-heading); font-size: clamp(1.4rem, 2.4vw, 2rem); margin: 0.5rem 0 0.75rem; color: var(--text-primary); line-height: 1.2; } .investor-strip-text p { color: var(--text-secondary); line-height: 1.6; margin: 0; max-width: 480px; } .investor-strip-cta { text-align: right; } .btn-investor { display: inline-flex !important; flex-direction: column; align-items: center; justify-content: center; padding: 22px 36px !important; min-width: 280px; text-align: center; line-height: 1.3; } .btn-investor-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.85; margin-bottom: 6px; display: block; } .btn-investor-mail { font-family: var(--vx-font-display); font-size: 18px; font-weight: 700; letter-spacing: 0.04em; text-transform: none; display: block; } .investor-pill-note { margin-top: 0.85rem; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-primary); opacity: 0.85; } /* Investor stat highlights — replaces the CTA button. */ .investor-highlights { display: flex; gap: 1.5rem; align-items: stretch; } .investor-stat { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; padding: 1.5rem 1.25rem 1.25rem; border: 1px solid rgba(10, 14, 26, 0.08); border-radius: var(--vx-radius-3); min-width: 120px; flex: 1; background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.35s cubic-bezier(0.16, 1, 0.3, 1); position: relative; overflow: hidden; } :root.dark-theme .investor-stat { background: rgba(245, 247, 250, 0.03); border-color: rgba(245, 247, 250, 0.08); } .investor-stat:hover { transform: translateY(-5px); border-color: var(--vx-copper-700); background: rgba(255, 255, 255, 0.95); box-shadow: 0 12px 30px rgba(168, 88, 32, 0.15); } :root.dark-theme .investor-stat:hover { border-color: var(--vx-copper-bright); background: rgba(232, 152, 96, 0.05); box-shadow: 0 12px 30px rgba(122, 57, 20, 0.12), 0 0 0 1px rgba(232, 152, 96, 0.1); } .investor-stat-icon-wrapper { width: 42px; height: 42px; border-radius: 50%; background: rgba(168, 88, 32, 0.06); display: flex; align-items: center; justify-content: center; margin-bottom: 0.85rem; color: var(--vx-copper-700); transition: transform 0.35s ease, background-color 0.35s ease, color 0.35s ease; border: 1px solid rgba(168, 88, 32, 0.12); } :root.dark-theme .investor-stat-icon-wrapper { background: rgba(232, 152, 96, 0.08); color: var(--vx-copper-bright); border-color: rgba(232, 152, 96, 0.15); } .investor-stat:hover .investor-stat-icon-wrapper { transform: scale(1.1) rotate(5deg); background: var(--vx-copper-700); color: var(--vx-pure-white); border-color: transparent; } :root.dark-theme .investor-stat:hover .investor-stat-icon-wrapper { background: var(--vx-copper-bright); color: var(--vx-silicon-900); } .investor-stat-icon { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.5; } .investor-stat-value { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 700; color: var(--accent-primary); letter-spacing: 0.02em; line-height: 1; margin-bottom: 0.4rem; } .investor-stat-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-secondary); opacity: 0.8; } .investor-stat-action { font-family: var(--font-mono); font-size: 9px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vx-copper-bright); margin-top: auto; padding-top: 0.75rem; width: 100%; border-top: 1px dashed rgba(232, 152, 96, 0.15); opacity: 0.5; transform: translateY(2px); transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease; } .investor-stat-action { color: var(--vx-copper-700); border-top-color: rgba(168, 88, 32, 0.12); } :root.dark-theme .investor-stat-action { color: var(--vx-copper-bright); border-top-color: rgba(232, 152, 96, 0.15); } .investor-stat:hover .investor-stat-action { opacity: 1; transform: translateY(0); color: var(--vx-copper-700); } :root.dark-theme .investor-stat:hover .investor-stat-action { color: var(--vx-copper-bright); } /* Custom form flash glow effect */ @keyframes formGlowFlash { 0% { box-shadow: var(--litho-shadow-base); border-color: var(--vx-border-2); } 15% { box-shadow: 0 0 25px rgba(232, 152, 96, 0.4), var(--litho-shadow-base); border-color: var(--vx-copper-bright); } 70% { box-shadow: 0 0 25px rgba(232, 152, 96, 0.3), var(--litho-shadow-base); border-color: var(--vx-copper-bright); } 100% { box-shadow: var(--litho-shadow-base); border-color: var(--vx-border-2); } } .form-flash-glow { animation: formGlowFlash 1.6s cubic-bezier(0.25, 1, 0.5, 1) forwards; } /* Office card — big, brand-stamped. */ .contact-main-grid { gap: 2.5rem; align-items: start; } .align-start { align-items: start; } .office-card { border-left: 3px solid var(--accent-primary); padding: 2rem !important; } .contact-form { padding-top: 2rem !important; } .office-company-name { font-family: var(--font-heading); font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 700; letter-spacing: 0.02em; line-height: 1.15; color: var(--text-primary); margin: 0.4rem 0 1rem; } .office-address { font-family: var(--font-body); font-size: 1rem; color: var(--text-secondary); line-height: 1.55; margin-bottom: 0.75rem; } .office-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vx-graphite-300); margin: 0; } .contact-channel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .contact-channel { padding: 1.5rem !important; } .channel-link { font-family: var(--font-mono); font-size: 14px; color: var(--text-primary); border-bottom: 1px solid var(--accent-primary); padding-bottom: 2px; display: inline-block; margin-top: 4px; transition: color 0.2s ease, border-color 0.2s ease; } .channel-link:hover { color: var(--accent-primary); } .channel-sub { font-size: 12px; color: var(--text-secondary); margin-top: 10px; line-height: 1.5; } /* Responsive */ @media (max-width: 900px) { .grid-3, .grid-2, .platform-layout { grid-template-columns: 1fr; } .platform-column.border-left { border-left: none; border-top: var(--litho-border); } .hero h1, .page-title { font-size: 2.5rem; } #cursor-glow { display: none; } /* Mobile nav — hamburger-driven slide-down panel. */ .hamburger { display: flex; } .nav-links { display: none; position: fixed; top: 80px; left: 0; right: 0; background: rgba(255,255,255,0.98); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); flex-direction: column; padding: 1rem 5%; border-bottom: 1px solid var(--vx-border-2); z-index: 999; gap: 0; } :root.dark-theme .nav-links { background: rgba(10,14,26,0.97); } .nav-links.nav-open { display: flex; } .nav-links a { margin-left: 0; padding: 0.9rem 0; border-bottom: 1px solid var(--vx-border-1); font-size: 13px; width: 100%; } /* Reset btn-nav links so they look like plain nav links in the drawer */ .nav-links a.btn-nav { background: none; border: none; border-bottom: 1px solid var(--vx-border-1); border-radius: 0; padding: 0.9rem 0; color: var(--text-secondary); font-size: 13px; width: 100%; box-shadow: none; } .nav-links a.btn-nav:hover { color: var(--accent-primary); background: none; } .nav-links a.nav-active { border-bottom: 1px solid var(--accent-primary) !important; padding-bottom: 0.9rem !important; } .nav-links a.nav-active.btn-nav { background: none !important; border: none !important; border-bottom: 1px solid var(--accent-primary) !important; padding: 0.9rem 0 !important; border-radius: 0 !important; } /* Last link in drawer — remove the hairline border */ .nav-links a:last-of-type { border-bottom: none; } /* nav-right: on mobile the drawer is gone, only theme+hamburger sit in the bar */ .nav-right { gap: 6px; } .contact-hero { padding: 100px 0 24px; } .pt-30 { padding-top: 100px !important; } .contact-brand-name { font-size: clamp(2rem, 10vw, 3.5rem); letter-spacing: 0.02em; } .investor-strip { grid-template-columns: 1fr; padding: 2rem 1.5rem; gap: 1.5rem; text-align: left; } .investor-strip-cta { text-align: left; } .btn-investor { width: 100%; min-width: 0; } .contact-channel-grid { grid-template-columns: 1fr; } .footer-nav { gap: 0.25rem 1.25rem; } /* Contact main grid collapses to single column */ .contact-main-grid { grid-template-columns: 1fr !important; } } /* Accessibility skip-to-content link */ .skip-link { position: absolute; top: -100px; left: 20px; background: #c86f37; /* Copper fallback */ background: var(--vx-copper-500, #c86f37); color: #ffffff; color: var(--vx-signal-white, #ffffff); padding: 10px 20px; font-family: var(--font-mono, monospace); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--vx-copper-bright, #e89860); border-radius: 4px; z-index: 100000; transition: top 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 4px 20px rgba(0,0,0,0.5); } .skip-link:focus { top: 20px; outline: 2px solid var(--vx-copper-bright, #e89860); outline-offset: 2px; } /*========================================================================= USE CASE HORIZONTAL CARDS — Ultra-Premium Redesign Utilizes all horizontal space, reduces height to fit in one viewport frame ========================================================================= */ .horizontal-grid { gap: 1.5rem !important; grid-template-columns: 1fr 1fr; } .litho-card.horizontal-card { display: flex; gap: 1.5rem; align-items: center; padding: 1.5rem; min-height: 160px; height: 100%; position: relative; overflow: hidden; background: var(--bg-secondary); border: 1px solid var(--vx-border-2); border-radius: var(--vx-radius-4); box-shadow: var(--litho-shadow-base); transition: transform var(--vx-dur-base) var(--vx-ease-standard), box-shadow var(--vx-dur-base) var(--vx-ease-standard), border-color var(--vx-dur-base) var(--vx-ease-standard); } /* Hover outline to match other card systems */ .litho-card.horizontal-card:hover { transform: translateY(-2px); box-shadow: var(--litho-shadow-hover); border-color: var(--vx-accent-hairline); } /* Left side square image layout */ .horizontal-card .card-left { position: relative; width: 130px; height: 130px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .horizontal-card .card-image-container { width: 120px; height: 120px; border-radius: var(--vx-radius-2); overflow: hidden; background: var(--vx-silicon-900); border: 1px solid var(--vx-border-2); display: flex; align-items: center; justify-content: center; z-index: 2; transition: transform var(--vx-dur-base) var(--vx-ease-standard); } .horizontal-card .card-image-horizontal { width: 100%; height: 100%; object-fit: cover; filter: grayscale(25%); transition: filter var(--vx-dur-base) var(--vx-ease-standard), transform 0.4s var(--vx-ease-standard); } /* Subtle glowing copper halo behind image on hover */ .horizontal-card .halo-effect { position: absolute; width: 150px; height: 150px; background: radial-gradient(circle, rgba(232, 152, 96, 0.15) 0%, transparent 70%); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.85); opacity: 0.4; z-index: 1; pointer-events: none; transition: transform var(--vx-dur-base) var(--vx-ease-standard), opacity var(--vx-dur-base) var(--vx-ease-standard); } /* Right side header + description */ .horizontal-card .card-right { flex-grow: 1; min-width: 0; z-index: 2; text-align: left; } .horizontal-card h4 { margin-bottom: 0.5rem; font-family: var(--font-heading); font-size: var(--vx-fs-h5); font-weight: 600; color: var(--text-primary); } .horizontal-card p { font-family: var(--font-body); font-size: 0.95rem; line-height: var(--vx-lh-relaxed); color: var(--text-secondary); margin: 0; } /* Minimal corner crosshair stamp */ .horizontal-card .crosshair { position: absolute; top: 1.25rem; right: 1.25rem; font-family: var(--font-mono); font-size: 14px; color: var(--vx-graphite-400); opacity: 0.5; line-height: 1; font-weight: 300; pointer-events: none; transition: color var(--vx-dur-base) var(--vx-ease-standard), opacity var(--vx-dur-base) var(--vx-ease-standard); } /* Hover transitions */ .litho-card.horizontal-card:hover .card-image-container { transform: scale(1.02); } .litho-card.horizontal-card:hover .card-image-horizontal { filter: grayscale(0%); transform: scale(1.04); } .litho-card.horizontal-card:hover .halo-effect { transform: translate(-50%, -50%) scale(1.15); opacity: 1; } .litho-card.horizontal-card:hover .crosshair { color: var(--accent-primary); opacity: 1; } /* Responsive Overrides */ @media (max-width: 992px) { .horizontal-grid { grid-template-columns: 1fr !important; gap: 1.25rem !important; } } @media (max-width: 480px) { .litho-card.horizontal-card { flex-direction: column; align-items: flex-start; gap: 1.25rem; padding: 1.5rem; } .horizontal-card .card-left { width: 100%; height: 140px; } } /* Dynamic Contact Form transitions */ #contact-form-title, #contact-form-subtitle, #contact-form-telemetry { transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1); } .form-context-fade { opacity: 0; transform: translateY(-4px); }