/* ═══════════════════════════════════════════════════════════════ BACKGROUND IDLE When the tab/window loses focus, freeze every CSS animation and transition so decorative motion (drifting blobs, scanlines, glitch, holo-drift, blinking cursors…) stops burning the GPU in the background. The JS canvases already pause via raf-loop.js; this covers the purely-CSS motion that visibilitychange can't reach. The class is toggled on by raf-loop.js. ═══════════════════════════════════════════════════════════════ */ html.ft-idle *, html.ft-idle *::before, html.ft-idle *::after { animation-play-state: paused !important; transition: none !important; } /* ═══════════════════════════════════════════════════════════════ DESIGN TOKENS ═══════════════════════════════════════════════════════════════ */ :root { /* ── COLOR PALETTE ──────────────────────────────────────────── */ --color-green: #00ff88; --color-cyan: #00e5ff; --color-pink: #ff2d6b; --color-yellow: #f5ff00; --color-purple: #bf5fff; /* Semantic surface layers (darkest → lightest) */ --bg-void: #030509; --bg-surface: #060c14; --bg-elevated: #0a1422; /* Subtle grid overlay */ --grid-line: rgba(0, 229, 255, 0.05); /* Text opacity tiers on green */ --text-dim: rgba(0, 255, 136, 0.55); --text-mid: rgba(0, 255, 136, 0.70); --text-bright: #00ff88; /* ── TYPOGRAPHY ─────────────────────────────────────────────── */ --font-mono: 'Share Tech Mono', monospace; /* body / UI labels */ --font-display: 'VT323', monospace; /* large headings / icons */ --font-pixel: 'Silkscreen', monospace; /* buttons / service names */ /* ── SPACING SCALE ──────────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* ── ANIMATION TIMINGS ──────────────────────────────────────── */ --ease-out: cubic-bezier(0.4, 0, 0.2, 1); /* standard decelerate */ --ease-spring: cubic-bezier(0.16, 1, 0.3, 1); /* overshoot spring */ --duration-fast: 0.15s; --duration-base: 0.25s; --duration-slow: 0.4s; --duration-reveal: 0.7s; /* ── Z-INDEX LAYERS ─────────────────────────────────────────── */ --z-bg: 0; --z-noise: 1; --z-content: 10; --z-nav: 100; --z-cursor: 9997; --z-crt-vignette: 9998; --z-crt-scan: 9999; /* ── LEGACY ALIASES (kept so existing selectors still resolve) ─ */ --neon-green: var(--color-green); --neon-cyan: var(--color-cyan); --neon-pink: var(--color-pink); --neon-yellow: var(--color-yellow); --neon-purple: var(--color-purple); } /* ═══════════════════════════════════════════════════════════════ RESET + BASE ═══════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg-void); color: var(--color-green); font-family: var(--font-mono); font-size: 14px; line-height: 1.7; overflow-x: hidden; cursor: crosshair; } /* scrollbar */ ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: var(--bg-void); } ::-webkit-scrollbar-thumb { background: rgba(0,255,136,0.3); } ::-webkit-scrollbar-thumb:hover { background: rgba(0,255,136,0.6); } /* selection */ ::selection { background: rgba(0,255,136,0.2); color: var(--color-green); } /* ═══════════════════════════════════════════════════════════════ ATMOSPHERE (CRT, grid, blobs, noise) ═══════════════════════════════════════════════════════════════ */ /* CRT scan lines */ body::before { content: ''; position: fixed; inset: 0; background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0,0,0,0.12) 2px, rgba(0,0,0,0.12) 4px ); pointer-events: none; z-index: var(--z-crt-scan); animation: scanroll 8s linear infinite; } /* CRT vignette + flicker */ body::after { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.6) 100% ); pointer-events: none; z-index: var(--z-crt-vignette); animation: flicker 0.15s infinite; } @keyframes scanroll { 0% { background-position: 0 0; } 100% { background-position: 0 200px; } } @keyframes flicker { 0% { opacity: 1; } 92% { opacity: 1; } 93% { opacity: 0.97; } 94% { opacity: 1; } 96% { opacity: 0.98; } 100% { opacity: 1; } } /* Grid */ .grid-bg { position: fixed; inset: 0; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; z-index: var(--z-bg); } /* Noise texture */ .noise { position: fixed; inset: 0; opacity: 0.03; pointer-events: none; z-index: var(--z-noise); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 200px 200px; } /* Ambient glow blobs */ .blob { position: fixed; border-radius: 50%; filter: blur(120px); pointer-events: none; z-index: var(--z-bg); opacity: 0.12; } .blob-1 { width: 600px; height: 600px; background: var(--color-cyan); top: -200px; left: -200px; animation: drift1 20s ease-in-out infinite; } .blob-2 { width: 500px; height: 500px; background: var(--color-pink); bottom: -100px; right: -100px; animation: drift2 25s ease-in-out infinite; } .blob-3 { width: 400px; height: 400px; background: var(--color-green); top: 40%; left: 40%; animation: drift3 18s ease-in-out infinite; } @keyframes drift1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(80px,60px); } } @keyframes drift2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-60px,-80px); } } @keyframes drift3 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(40px,-40px); } } /* ═══════════════════════════════════════════════════════════════ LAYOUT ═══════════════════════════════════════════════════════════════ */ .container { position: relative; z-index: var(--z-content); max-width: 900px; margin: 0 auto; padding: 0 var(--space-6); } /* ═══════════════════════════════════════════════════════════════ UTILITY CLASSES ═══════════════════════════════════════════════════════════════ */ /* Small-caps label — shared by nav links, section labels, status bar, hero tag, contact label, caption labels */ .label-caps { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); } /* Pulsing online indicator dot */ .status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-green); box-shadow: 0 0 6px var(--color-green), 0 0 12px var(--color-green); animation: pulse-dot 2s ease-in-out infinite; display: inline-block; } @keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } } /* Scroll-reveal entrance */ .reveal { opacity: 0; transform: translateY(30px); transition: opacity var(--duration-reveal) ease, transform var(--duration-reveal) var(--ease-out); } .reveal.visible { opacity: 1; transform: none; } /* Scan-line sweep (portrait + any future overlay) */ .scan-sweep { position: absolute; top: -100%; left: 0; right: 0; height: 60px; background: linear-gradient(to bottom, transparent, rgba(0,255,136,0.04) 50%, transparent ); animation: sweep 4s linear infinite; pointer-events: none; } @keyframes sweep { 0% { top: -10%; } 100% { top: 110%; } } /* Glitch hover effect (applied to hero name) */ .glitch { position: relative; } .glitch::before, .glitch::after { content: attr(data-text); position: absolute; inset: 0; opacity: 0; } .glitch:hover::before { animation: glitch-1 0.3s steps(2) forwards; color: var(--color-cyan); clip-path: inset(0 0 50% 0); opacity: 1; } .glitch:hover::after { animation: glitch-2 0.3s steps(2) 0.05s forwards; color: var(--color-pink); clip-path: inset(50% 0 0 0); opacity: 1; } @keyframes glitch-1 { 0% { transform: translate(-2px, -1px); } 33% { transform: translate(2px, 1px); } 66% { transform: translate(-1px, 2px); } 100% { transform: none; opacity: 0; } } @keyframes glitch-2 { 0% { transform: translate(2px, 1px); } 33% { transform: translate(-2px, -1px); } 66% { transform: translate(1px, -2px); } 100% { transform: none; opacity: 0; } } /* Typewriter wrapper */ .typewriter { display: inline-block; } /* ═══════════════════════════════════════════════════════════════ NAV ═══════════════════════════════════════════════════════════════ */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav); padding: var(--space-4) var(--space-6); background: rgba(3,5,9,0.85); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(0,255,136,0.15); } .nav-inner { max-width: 900px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; } .nav-logo { font-family: var(--font-display); font-size: 22px; color: var(--color-green); letter-spacing: 0.1em; text-shadow: 0 0 10px var(--color-green), 0 0 20px rgba(0,255,136,0.4); text-decoration: none; } .nav-logo .nav-tld { color: var(--color-cyan); } .nav-wordmark { display: inline-block; color: var(--color-green); } .nav-tld { color: var(--color-cyan); font-size: inherit; letter-spacing: inherit; } .hero-tld { color: var(--color-cyan); } .nav-logo { display: flex; align-items: center; gap: 8px; white-space: nowrap; } .nav-anvil { width: 26px; height: auto; image-rendering: pixelated; filter: brightness(0) invert(1) sepia(1) saturate(10) hue-rotate(155deg) brightness(1.1) drop-shadow(0 0 4px #00e5ff) drop-shadow(0 0 8px rgba(0,229,255,0.4)); flex-shrink: 0; } .hero-name-wrap { display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); margin-bottom: var(--space-2); white-space: nowrap; } .hero-name-wrap .hero-name { margin-bottom: 0; } .hero-anvil { width: clamp(80px, 10vw, 140px); height: auto; image-rendering: pixelated; filter: brightness(0) invert(1) sepia(1) saturate(10) hue-rotate(155deg) brightness(1.1) drop-shadow(0 0 6px #00e5ff) drop-shadow(0 0 16px rgba(0,229,255,0.6)) drop-shadow(0 0 32px rgba(0,229,255,0.3)); flex-shrink: 0; opacity: 0; animation: fade-up 0.7s 0.2s ease forwards; align-self: center; margin-bottom: 0.25em; } .nav-links { display: flex; gap: var(--space-8); } .nav-links a { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); text-decoration: none; position: relative; padding: 5px 7px; transition: color 0.18s var(--ease-out), text-shadow 0.18s var(--ease-out); } /* Corner bracket spans — shared geometry */ .nav-links a .nav-tl, .nav-links a .nav-tr, .nav-links a .nav-bl, .nav-links a .nav-br { position: absolute; width: 8px; height: 8px; opacity: 0.25; transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out), border-color 0.2s var(--ease-out); } /* Individual corner positions and borders — green-dim at rest */ .nav-links a .nav-tl { top: 0; left: 0; border-top: 1px solid var(--color-green); border-left: 1px solid var(--color-green); } .nav-links a .nav-tr { top: 0; right: 0; border-top: 1px solid var(--color-green); border-right: 1px solid var(--color-green); } .nav-links a .nav-bl { bottom: 0; left: 0; border-bottom: 1px solid var(--color-green); border-left: 1px solid var(--color-green); } .nav-links a .nav-br { bottom: 0; right: 0; border-bottom: 1px solid var(--color-green); border-right: 1px solid var(--color-green); } /* Hover: corners brighten to cyan, text lights up */ .nav-links a:hover { color: var(--color-cyan); text-shadow: 0 0 8px rgba(0,229,255,0.7); } .nav-links a:active { transform: translateY(2px); transition: transform 0.06s; } .nav-links a:hover .nav-tl, .nav-links a:hover .nav-tr, .nav-links a:hover .nav-bl, .nav-links a:hover .nav-br { opacity: 1; border-color: var(--color-cyan); } @media (prefers-reduced-motion: reduce) { .nav-links a .nav-tl, .nav-links a .nav-tr, .nav-links a .nav-bl, .nav-links a .nav-br { transition: opacity 0.1s; } } /* Status bar */ .status-bar { /* extends .label-caps */ font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.15em; color: var(--text-dim); display: flex; gap: var(--space-5); align-items: center; } /* Language switcher */ .lang-switcher { display: flex; align-items: center; gap: 6px; } .lang-btn { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; background: none; border: none; padding: 0; cursor: pointer; color: var(--text-dim); transition: color 0.15s, text-shadow 0.15s; } .lang-btn:hover { color: var(--color-cyan); text-shadow: 0 0 8px rgba(0,229,255,0.6); } .lang-btn:active { transform: translateY(2px); transition: transform 0.06s; } .lang-sep { font-family: var(--font-mono); font-size: 14px; color: rgba(0,255,136,0.4); line-height: 1; } .lang-active { color: var(--color-green); text-shadow: 0 0 8px rgba(0,255,136,0.5); } .lang-active:hover { color: var(--color-green); text-shadow: 0 0 14px rgba(0,255,136,0.9); } /* Flash on click for inactive langs — "coming soon" pulse */ .lang-btn.lang-soon { animation: lang-soon-flash 0.5s steps(2) forwards; } @keyframes lang-soon-flash { 0% { color: var(--color-yellow); text-shadow: 0 0 10px rgba(245,255,0,0.8); } 40% { color: var(--text-dim); text-shadow: none; } 70% { color: var(--color-yellow); text-shadow: 0 0 6px rgba(245,255,0,0.5); } 100% { color: var(--text-dim); text-shadow: none; } } /* ═══════════════════════════════════════════════════════════════ HERO ═══════════════════════════════════════════════════════════════ */ .hero { min-height: 100vh; display: flex; align-items: center; padding-top: 80px; position: relative; } .hero-inner { width: 100%; } .hero-hud-desktop { position: absolute; bottom: 32px; right: 0; font-family: 'Share Tech Mono', monospace; font-size: 10px; color: rgba(0,229,255,0.45); letter-spacing: 0.2em; line-height: 1.8; text-align: right; pointer-events: none; z-index: 2; } .hero-hud-mobile { display: none; font-family: 'Share Tech Mono', monospace; font-size: 10px; color: rgba(0,229,255,0.45); letter-spacing: 0.15em; line-height: 1.8; margin-top: var(--space-6); } @media (max-width: 768px) { .hero-hud-desktop { display: none; } .hero-hud-mobile { display: block; } .hero-tag { font-size: 9px; letter-spacing: 0.12em; } } @keyframes fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .hero-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(0,229,255,0.45); margin-bottom: var(--space-5); opacity: 0; animation: fade-up 0.6s 0.2s ease forwards; } .hero-tag::before { content: '> '; color: rgba(0,255,136,0.45); } .hero-name { font-family: var(--font-display); font-size: clamp(72px, 12vw, 140px); line-height: 0.9; letter-spacing: -0.02em; color: var(--color-green); text-shadow: 0 0 20px rgba(0,255,136,0.8), 0 0 40px rgba(0,255,136,0.4), 0 0 80px rgba(0,255,136,0.2); margin-bottom: var(--space-2); opacity: 0; position: relative; animation: fade-up 0.7s 0.4s ease forwards, glitch-idle-blink 8s 2s ease-in-out infinite; will-change: clip-path; } .hero-name::before { content: attr(data-text); position: absolute; inset: 0; color: var(--color-green); text-shadow: inherit; pointer-events: none; animation: glitch-idle-slice 8s 2s ease-in-out infinite; opacity: 0; } @keyframes glitch-idle-slice { 0%, 95%, 100% { opacity: 0; transform: none; clip-path: none; } 96% { opacity: 1; transform: translate(-3px, 0); clip-path: inset(20% 0 55% 0); } 96.4% { opacity: 1; transform: translate(3px, 0); clip-path: inset(55% 0 15% 0); } 96.8% { opacity: 0; transform: none; clip-path: none; } } @keyframes glitch-idle-blink { 0%, 95%, 100% { clip-path: none; } 96% { clip-path: inset(20% 0 55% 0); } 96.4% { clip-path: inset(55% 0 15% 0); } 96.8% { clip-path: none; } } .hero-role { font-family: var(--font-pixel); font-size: clamp(14px, 2vw, 18px); color: var(--color-cyan); letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: var(--space-8); text-shadow: 0 0 10px var(--color-cyan), 0 0 20px rgba(0,229,255,0.4); opacity: 0; animation: fade-up 0.6s 0.6s ease forwards; display: block; min-height: 2lh; word-break: break-word; overflow-wrap: break-word; } .hero-role::before { content: ''; } .hero-credo { max-width: 560px; font-size: 16px; line-height: 1.8; color: var(--text-mid); margin-bottom: var(--space-12); opacity: 0; animation: fade-up 0.6s 0.8s ease forwards; border-left: 2px solid var(--color-pink); padding-left: var(--space-5); } .hero-credo em { color: var(--color-pink); font-style: normal; text-shadow: 0 0 8px rgba(255,45,107,0.6); } .hero-cta { display: flex; gap: var(--space-4); flex-wrap: wrap; opacity: 0; animation: fade-up 0.6s 1s ease forwards; } /* ═══════════════════════════════════════════════════════════════ BUTTONS ═══════════════════════════════════════════════════════════════ */ .btn { font-family: var(--font-pixel); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; padding: 12px 28px 14px; margin-bottom: -2px; border: 1px solid; cursor: pointer; position: relative; overflow: hidden; transition: transform var(--duration-fast), box-shadow var(--duration-fast); display: inline-block; } .btn::before { content: ''; position: absolute; inset: 0; transform: translateX(-100%); transition: transform var(--duration-slow) var(--ease-out); } .btn:hover::before { transform: translateX(0); } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(2px); transition: transform 0.06s; } .btn-primary { border-color: var(--color-green); color: var(--bg-void); background: var(--color-green); box-shadow: 0 0 20px rgba(0,255,136,0.4); } .btn-primary::before { background: rgba(0,0,0,0.15); } .btn-primary:hover { box-shadow: 0 0 30px rgba(0,255,136,0.7), 0 8px 20px rgba(0,255,136,0.2); } .btn-outline { border-color: var(--color-cyan); color: var(--color-cyan); background: transparent; box-shadow: 0 0 10px rgba(0,229,255,0.2); } .btn-outline::before { background: rgba(0,229,255,0.08); } .btn-outline:hover { box-shadow: 0 0 20px rgba(0,229,255,0.4), 0 8px 20px rgba(0,229,255,0.1); } /* ═══════════════════════════════════════════════════════════════ SECTIONS (shared) ═══════════════════════════════════════════════════════════════ */ section { padding: 96px 0; } section + section { padding-top: 80px; } #contact { padding-top: 112px; } .section-header { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-12); } .section-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--color-pink); } .section-label::before { content: '// '; } .section-line { flex: 1; height: 1px; background: linear-gradient(to right, rgba(255,45,107,0.4), transparent); } .section-title { font-family: var(--font-display); font-size: clamp(36px, 6vw, 64px); line-height: 1; color: var(--color-green); text-shadow: 0 0 20px rgba(0,255,136,0.4); margin-bottom: var(--space-2); } /* ═══════════════════════════════════════════════════════════════ SERVICES ═══════════════════════════════════════════════════════════════ */ .services-grid { display: grid; grid-template-columns: 1fr; gap: 2px; /* transparent so the page bg shows through gaps (incl. the shelf's inset side strips); the green hairlines between cards are drawn by each card's own outline instead of a grid-wide green fill/border */ background: transparent; } /* green hairline between/around the service cards (was the grid bg) */ .services-grid > .service-card { outline: 1px solid rgba(0,255,136,0.12); } .services-cta { margin-top: 32px; } .service-card--lead { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; align-items: stretch; } .service-card--lead .service-lead-left { display: flex; flex-direction: column; justify-content: center; } .service-card--lead .service-lead-right { display: flex; flex-direction: column; justify-content: flex-end; padding-top: var(--space-2); min-height: 260px; } @media (max-width: 640px) { .hero-name { font-size: clamp(36px, 11vw, 72px); } .hero-role { width: 100% !important; } .services-grid { grid-template-columns: 1fr; } .service-card--lead { grid-template-columns: 1fr; gap: 24px; } .service-card--lead .service-lead-right { padding-top: 0; } .as-right { height: 320px; } } .service-card { background: var(--bg-surface); padding: 36px var(--space-8); position: relative; overflow: hidden; cursor: default; } .service-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--card-accent, var(--color-green)); box-shadow: 0 0 10px var(--card-accent, var(--color-green)); } /* Per-card accent color via local custom property. Keyed off marker classes (not :nth-child) so non-card siblings like the automation shelf don't shift the accent assignment. */ .service-card--automation { --card-accent: var(--color-green); } .service-card:not(.service-card--automation):not(.service-card--knowledge) { --card-accent: var(--color-cyan); } .service-card--knowledge { --card-accent: var(--color-pink); } .service-icon { font-family: var(--font-display); font-size: 48px; line-height: 1; margin-bottom: var(--space-5); color: var(--card-accent, var(--color-green)); text-shadow: 0 0 20px var(--card-accent, var(--color-green)); display: block; transition: transform var(--duration-slow) var(--ease-spring); } .service-card--lead .service-icon { font-size: 72px; margin-bottom: var(--space-6); } .service-icon { display: flex; align-items: center; gap: 4px; } .service-icon svg { width: 48px; height: 48px; stroke: currentColor; } .service-card--lead .service-icon svg { width: 64px; height: 64px; } .service-icon-img { width: 64px; height: 64px; object-fit: contain; } .service-icon-img--green { filter: brightness(0) invert(78%) sepia(48%) saturate(600%) hue-rotate(95deg) drop-shadow(0 0 4px #00ff88) drop-shadow(0 0 10px #00ff88); } .service-icon-img--cyan { filter: brightness(0) invert(83%) sepia(63%) saturate(632%) hue-rotate(151deg) brightness(104%) drop-shadow(0 0 4px #00e5ff) drop-shadow(0 0 10px #00e5ff); } .service-icon-img--pink { filter: brightness(0) invert(29%) sepia(89%) saturate(1200%) hue-rotate(314deg) brightness(110%) drop-shadow(0 0 8px #ff2d6b) drop-shadow(0 0 20px #ff2d6b); } .service-name { font-family: var(--font-pixel); font-size: 13px; letter-spacing: 0.1em; color: var(--color-green); margin-bottom: var(--space-3); text-transform: uppercase; } .service-card--lead .service-name { font-size: 15px; color: var(--card-accent, var(--color-green)); } .service-desc { font-size: 13px; color: var(--text-mid); line-height: 1.7; margin-bottom: var(--space-5); } .service-card--lead .service-desc { font-size: 14px; line-height: 1.8; } .service-outcome { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.15em; color: var(--text-mid); text-transform: uppercase; margin-top: auto; padding-top: var(--space-6); border-top: 1px solid rgba(0,255,136,0.12); } .service-outcome::before { content: '> '; } /* Business Automation — canvas fills the right column of the lead card */ .ba-right { position: relative; align-self: stretch; min-height: 260px; background: rgba(0,255,136,0.02); border: 1px solid rgba(0,255,136,0.08); overflow: hidden; padding: 0; justify-content: stretch; } .ba-canvas { display: block; width: 100%; height: 100%; position: absolute; inset: 0; } .ba-hint { position: absolute; bottom: 10px; right: 14px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; color: rgba(0,255,136,0.4); text-transform: uppercase; pointer-events: none; } /* ── AUTOMATION DRAWER SHELF ──────────────────────────────────── */ /* Full-width tab bar inside the bottom of the Automation card, divided from the card content by a top border. Spans both grid columns. */ /* Shelf accent: one variable drives the trigger and its drawer. Defaults to green (Automation); the --cyan / --pink modifiers retint Agentic and Knowledge. All tints derive from --shelf-accent via color-mix so a single token recolors the whole component. */ .shelf-trigger { --shelf-accent: var(--color-green); } .shelf-trigger--cyan { --shelf-accent: var(--color-cyan); } .shelf-trigger--pink { --shelf-accent: var(--color-pink); } .shelf-trigger { grid-column: 1 / -1; margin-top: var(--space-6); /* break out of the card's left/right padding so the bar is truly full-width to the card edges, with its own top divider */ margin-inline: calc(-1 * var(--space-8)); margin-bottom: -36px; /* cancel the card's bottom padding */ display: flex; align-items: center; justify-content: center; gap: var(--space-3); padding: 9px var(--space-8); border: none; border-top: 1px solid color-mix(in srgb, var(--shelf-accent) 30%, transparent); color: var(--shelf-accent); background: color-mix(in srgb, var(--shelf-accent) 4%, transparent); font-family: var(--font-pixel); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; text-shadow: 0 0 8px color-mix(in srgb, var(--shelf-accent) 50%, transparent); transition: background var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out); } .shelf-trigger:hover, .shelf-trigger:focus-visible { background: color-mix(in srgb, var(--shelf-accent) 10%, transparent); border-top-color: var(--shelf-accent); outline: none; } .shelf-trigger-chevron { /* SVG triangle whose footprint is centered in its viewBox, so rotating around the element centre flips orientation with zero positional shift */ display: block; width: 14px; height: 14px; color: var(--shelf-accent); filter: drop-shadow(0 0 5px var(--shelf-accent)) drop-shadow(0 0 9px color-mix(in srgb, var(--shelf-accent) 60%, transparent)); transform-origin: center center; transition: transform var(--duration-base) var(--ease-spring); } .shelf-trigger[aria-expanded="true"] .shelf-trigger-chevron { transform: rotate(180deg); } /* The shelf: opens in the gap BETWEEN the Automation card and the next card, narrower than the cards and inset so it reads as a pulled-out drawer shelf seated between the two categories. */ .ba-shelf { --shelf-accent: var(--color-green); display: grid; grid-template-rows: 0fr; /* (accent override lives below so it doesn't get reset by this block) */ /* full grid width, transparent: the inset box stays where it was (via padding), and the side strips show the page background through. */ width: 100%; padding-inline: var(--space-12); background: transparent; /* A single non-overshoot decelerate. The whole reveal is ONE animation — the grid row growing — so there is nothing to desync against. An overshoot/spring curve on a clipped height makes the drawer appear to race ahead of the cards it pushes; ease-out keeps the gap and the cards locked to the same position curve. */ transition: grid-template-rows var(--duration-slow) var(--ease-out); /* connected directly to the card bottom — no gap above */ margin-block: 0; } .ba-shelf[hidden] { display: none; } .ba-shelf.is-open { grid-template-rows: 1fr; } /* Category accent for the whole drawer subtree (body, cell borders, titles). */ .ba-shelf--cyan { --shelf-accent: var(--color-cyan); } .ba-shelf--pink { --shelf-accent: var(--color-pink); } /* The clipping wrapper — overflow clip reveals the drawer top-to-bottom as the grid row grows. The body is BOTTOM-pinned to the clip window so the most recently revealed edge is the bottom of the card stack above it, reading as a drawer pulled straight down out of the tab. */ .ba-shelf-inner { overflow: hidden; min-height: 0; position: relative; } /* The drawer body is static: no transform of its own. The single grid-row height growth is the entire animation, so the drawer is fully drawn at every frame (never sliced) and moves in exact lockstep with the cards the growing gap pushes below it. */ .ba-shelf-body { /* subtle green border that ties to the tab; no top line so the box flows directly out of the trigger above it */ border: 1px solid rgba(0,255,136,0.18); border-top: none; background: var(--bg-void); position: relative; overflow: hidden; } /* Drifting holographic gradient, GPU-offloaded. An over-wide layer (200% of the body) carrying the color band; animating transform: translateX shifts it on the compositor with no repaint. The colors are inherited per-category from the rules below. */ .ba-shelf-glow { content: ''; position: absolute; top: 0; bottom: 0; left: 0; /* Keep the layer small (200% = body width over-drawn once) so the GPU only rasterizes a modest area. "Wider colors" comes from fewer hues per cycle, not a bigger layer. */ width: 200%; pointer-events: none; z-index: 0; will-change: transform; backface-visibility: hidden; transform: translateX(0); /* Palindrome hue band: the 50% mark and both ends share the same color, so a translateX(0 -> -50%) drift reads as a seamless slow sweep. Hues are widely spaced (one every ~12.5%) so each occupies a generous band; low opacity keeps the whole thing in the background rather than a vivid rainbow. */ background: linear-gradient(115deg, rgba(0,255,136,0.07) 0%, rgba(0,229,255,0.07) 12.5%, rgba(191,95,255,0.09) 25%, rgba(255,45,107,0.07) 37.5%, rgba(245,255,0,0.06) 50%, rgba(255,45,107,0.07) 62.5%, rgba(191,95,255,0.09) 75%, rgba(0,229,255,0.07) 87.5%, rgba(0,255,136,0.07) 100%); } .ba-shelf-body.is-animating .ba-shelf-glow { animation: holo-drift 16s linear infinite; } /* GPU-offloaded shimmer. The diagonal sheen lives on its own over-wide layer and animates `transform: translateX` only, so the compositor shifts an existing texture instead of repainting every frame. JS toggles .is-animating (open + on-screen + tab visible) to pause it. */ .ba-shelf-body::before { content: ''; position: absolute; top: 0; bottom: 0; left: -100%; width: 300%; pointer-events: none; z-index: 0; will-change: transform; backface-visibility: hidden; transform: translateX(0); background: linear-gradient(105deg, transparent 44%, rgba(255,255,255,0.06) 48%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.06) 52%, transparent 56%); mix-blend-mode: screen; } .ba-shelf-body.is-animating::before { animation: holo-sheen 6s ease-in-out infinite; } /* Static scanline texture — no animation, plain paint once. */ .ba-shelf-body::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: repeating-linear-gradient( 0deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 3px); mix-blend-mode: screen; } /* Single-hue drawer for the cyan (Agentic) and pink (Knowledge) shelves: the same drifting gradient mechanic, but one accent across the band so the drawer clearly reads as its category color rather than the rainbow. The band is doubled (0–50% / 50–100%) so the -50% drift loops seamlessly. */ .ba-shelf--cyan .ba-shelf-body, .ba-shelf--pink .ba-shelf-body { border-color: color-mix(in srgb, var(--shelf-accent) 18%, transparent); } .ba-shelf--cyan .ba-shelf-glow, .ba-shelf--pink .ba-shelf-glow { /* Same seamless mechanic: intensity ebbs and returns to its start value at 50% and 100% with no coincident stop, so the -50% drift has no seam. */ background: linear-gradient(115deg, color-mix(in srgb, var(--shelf-accent) 16%, transparent) 0%, color-mix(in srgb, var(--shelf-accent) 8%, transparent) 25%, color-mix(in srgb, var(--shelf-accent) 16%, transparent) 50%, color-mix(in srgb, var(--shelf-accent) 8%, transparent) 75%, color-mix(in srgb, var(--shelf-accent) 16%, transparent) 100%); } /* Transform-based: the compositor translates the layer, no per-frame repaint. ::before is 300% wide at left:-100%; sweeping translateX by ~one body width moves the sheen band fully across the visible area. */ @keyframes holo-sheen { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(33.333%); } } @keyframes holo-drift { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .ba-shelf-grid { list-style: none; margin: 0; padding: var(--space-5); display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; position: relative; z-index: 1; } .ba-cell { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); background: rgba(3,5,9,0.45); border: 1px solid color-mix(in srgb, var(--shelf-accent) 16%, transparent); /* contents ride along with the shelf as it extends — no separate fade-in */ } /* The single, leading title: short underscore form, read first. Tinted to the shelf accent so each category's cells read as its color. */ .ba-cell-title { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.12em; line-height: 1.3; color: var(--shelf-accent); text-shadow: 0 0 10px color-mix(in srgb, var(--shelf-accent) 55%, transparent); word-break: break-word; } .ba-cell-body { font-family: var(--font-mono); font-size: 12px; line-height: 1.65; color: rgba(207,233,255,0.78); margin: 0; } @media (max-width: 640px) { .ba-shelf { width: 100%; padding-inline: 0; } .ba-shelf-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .ba-shelf-body { animation: none; transition: none; } .ba-shelf-body::before { animation: none; } .ba-shelf { transition: none; } } /* Knowledge Systems — canvas fills the right column of the lead card */ .ks-right { position: relative; align-self: stretch; min-height: 260px; background: rgba(255,45,107,0.03); border: 1px solid rgba(255,45,107,0.08); overflow: hidden; padding: 0; justify-content: stretch; } .ks-canvas { display: block; width: 100%; height: 100%; position: absolute; inset: 0; } /* ── AGENTIC SYSTEMS CHAT ─────────────────────────────────────── */ .as-right { position: relative; overflow: visible !important; padding: 0 !important; } .as-chat { position: absolute; inset: 0; font-family: var(--font-mono); font-size: 12px; } .as-history { position: absolute; top: 10px; left: 14px; right: 14px; bottom: 68px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; scrollbar-width: thin; scrollbar-color: rgba(0,229,255,0.2) transparent; } .as-history::before { content: ''; flex: 1; } .as-input-row { position: absolute; bottom: 24px; left: 14px; right: 14px; } .as-hint { position: absolute; bottom: -4px; left: 14px; right: 14px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; color: rgba(0,229,255,0.4); text-transform: uppercase; text-align: right; transition: opacity 0.3s; } .as-bubble { padding: 8px 10px; border-radius: 4px; line-height: 1.6; font-size: 12px; } .as-bubble--user { background: rgba(0,229,255,0.07); border: 1px solid rgba(0,229,255,0.2); color: rgba(0,229,255,0.9); align-self: flex-end; max-width: 90%; } .as-bubble--report { background: rgba(0,255,136,0.05); border: 1px solid rgba(0,255,136,0.15); color: rgba(0,255,136,0.85); font-size: 12px; line-height: 1.7; } .as-agent-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; color: rgba(0,229,255,0.6); font-size: 11px; letter-spacing: 0.04em; } .as-agent-name { color: rgba(0,229,255,0.9); font-weight: bold; letter-spacing: 0.1em; font-size: 11px; } .as-agent-role { color: rgba(0,229,255,0.45); font-size: 10px; } .as-agent-spinner { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid rgba(0,229,255,0.3); border-top-color: #00e5ff; animation: as-spin 0.7s linear infinite; flex-shrink: 0; } .as-agent-spinner--done { animation: none; border: none; background: #00e5ff; box-shadow: 0 0 6px #00e5ff; } @keyframes as-spin { to { transform: rotate(360deg); } } .as-input-row { display: flex; gap: 6px; align-items: center; } .as-input { flex: 1; background: rgba(0,229,255,0.05); border: 1px solid rgba(0,229,255,0.2); color: rgba(0,229,255,0.8); font-family: var(--font-mono); font-size: 11px; padding: 6px 8px; outline: none; cursor: pointer; border-radius: 2px; } .as-send { background: rgba(0,229,255,0.1); border: 1px solid rgba(0,229,255,0.3); color: #00e5ff; font-size: 14px; width: 28px; height: 28px; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 2px; transition: background 0.15s; } .as-send:hover { background: rgba(0,229,255,0.2); } .as-send--pulse { animation: as-pulse 1.4s ease-in-out infinite; } @keyframes as-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(0,229,255,0.5); } 50% { box-shadow: 0 0 0 6px rgba(0,229,255,0); } } /* ── KNOWLEDGE SYSTEMS HINT ───────────────────────────────────── */ .ks-hint { position: absolute; bottom: 10px; right: 14px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; color: rgba(0,229,255,0.6); text-transform: uppercase; pointer-events: none; } /* ═══════════════════════════════════════════════════════════════ ABOUT ═══════════════════════════════════════════════════════════════ */ .about-layout { display: grid; grid-template-columns: 3fr 2fr; gap: 72px; align-items: center; } @media (max-width: 640px) { .about-layout { grid-template-columns: 1fr; gap: var(--space-12); } .nav-links { display: none; } .status-bar .status-extra { display: none; } } .about-text p { font-size: 15px; color: var(--text-mid); line-height: 1.8; margin-bottom: var(--space-5); } .about-text strong { color: var(--color-green); font-weight: normal; } .about-visual { position: relative; width: 280px; margin: 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 0; } .about-portrait { position: relative; width: 280px; height: 320px; overflow: hidden; } .about-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; mix-blend-mode: screen; transition: filter 0.3s ease; } /* Cyan + pink ghost layers for the image glitch — mirrors .glitch::before/after */ .about-portrait::before, .about-portrait::after { content: ''; position: absolute; inset: 0; background-image: url('../assets/stylised_me.png'); background-size: cover; background-position: center top; mix-blend-mode: normal; opacity: 0; pointer-events: none; z-index: 2; } .about-portrait::before { clip-path: inset(0 0 50% 0); filter: sepia(1) hue-rotate(140deg) saturate(6) brightness(1.2); /* → cyan */ } .about-portrait::after { clip-path: inset(50% 0 0 0); filter: saturate(12) brightness(1.1); /* → oversaturated green */ } /* Hover: fire same steps(2) glitch as the hero title */ .about-portrait:hover::before { animation: portrait-glitch-1 0.3s steps(2) forwards; opacity: 1; } .about-portrait:hover::after { animation: portrait-glitch-2 0.3s steps(2) 0.05s forwards; opacity: 1; } @keyframes portrait-glitch-1 { 0% { transform: translate(-2px, -1px); } 33% { transform: translate(2px, 1px); } 66% { transform: translate(-1px, 2px); } 100% { transform: none; opacity: 0; } } @keyframes portrait-glitch-2 { 0% { transform: translate(2px, 1px); } 33% { transform: translate(-2px, -1px); } 66% { transform: translate(1px, -2px); } 100% { transform: none; opacity: 0; } } @media (prefers-reduced-motion: reduce) { .about-portrait:hover::before, .about-portrait:hover::after { animation: none; opacity: 0; } } .portrait-fade { position: absolute; bottom: 0; left: 0; right: 0; height: 60px; background: linear-gradient(to bottom, transparent, var(--bg-void)); pointer-events: none; z-index: 4; } /* Corner bracket targeting reticle */ .about-portrait-frame { position: absolute; inset: 0; pointer-events: none; z-index: 5; } .about-portrait-frame::before, .about-portrait-frame::after, .about-portrait-frame .corner-br, .about-portrait-frame .corner-bl { content: ''; position: absolute; width: 20px; height: 20px; } .about-portrait-frame::before { top: 0; left: 0; border-top: 1px solid var(--color-cyan); border-left: 1px solid var(--color-cyan); } .about-portrait-frame::after { top: 0; right: 0; border-top: 1px solid var(--color-cyan); border-right: 1px solid var(--color-cyan); } .about-portrait-frame .corner-br { bottom: 0; right: 0; border-bottom: 1px solid var(--color-cyan); border-right: 1px solid var(--color-cyan); } .about-portrait-frame .corner-bl { bottom: 0; left: 0; border-bottom: 1px solid var(--color-cyan); border-left: 1px solid var(--color-cyan); } /* Caption strip */ .about-caption { display: flex; justify-content: space-between; align-items: flex-start; padding: 10px 0 0; border-top: 1px solid rgba(0,229,255,0.15); gap: var(--space-3); } .about-caption-item { display: flex; flex-direction: column; gap: var(--space-1); } .about-caption-item:last-child { text-align: right; } .about-caption-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--text-dim); } .about-caption-value { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--color-cyan); } .about-caption-status { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); display: flex; align-items: center; gap: 6px; justify-content: center; padding: var(--space-2) 0 0; } .about-caption-status .status-dot { width: 5px; height: 5px; flex-shrink: 0; } /* ═══════════════════════════════════════════════════════════════ TERMINAL ═══════════════════════════════════════════════════════════════ */ .terminal { background: var(--bg-surface); border: 1px solid rgba(0,255,136,0.2); border-radius: 2px; overflow: hidden; box-shadow: 0 0 40px rgba(0,255,136,0.05), 0 20px 60px rgba(0,0,0,0.5); } .terminal-bar { background: var(--bg-elevated); padding: 10px var(--space-4); display: flex; align-items: center; gap: var(--space-2); border-bottom: 1px solid rgba(0,255,136,0.1); } .t-dot { width: 10px; height: 10px; border-radius: 50%; } .t-dot:nth-child(1) { background: #ff5f57; box-shadow: 0 0 6px #ff5f57; } .t-dot:nth-child(2) { background: #febc2e; box-shadow: 0 0 6px #febc2e; } .t-dot:nth-child(3) { background: #28c840; box-shadow: 0 0 6px #28c840; } .t-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--text-dim); margin-left: auto; margin-right: auto; } .terminal-body { padding: var(--space-6); font-family: var(--font-mono); font-size: 13px; line-height: 1.8; min-height: 200px; } /* Terminal token colors */ .t-line { display: block; } .t-prompt { color: var(--color-green); } .t-cmd { color: var(--color-cyan); } .t-comment { color: var(--text-dim); } .t-output { color: var(--text-mid); padding-left: var(--space-4); } .t-key { color: var(--color-pink); } .t-val { color: var(--color-yellow); } .t-url { color: var(--color-purple); text-decoration: underline; cursor: pointer; } .t-ok { color: var(--color-green); text-shadow: 0 0 8px rgba(0,255,136,0.4); } .cursor-blink { display: inline-block; width: 8px; height: 14px; background: var(--color-green); animation: blink 1s step-end infinite, cursor-pulse 4s ease-in-out infinite; vertical-align: text-bottom; margin-left: 2px; box-shadow: 0 0 6px var(--color-green); } @keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } } @keyframes cursor-pulse { 0%, 70%, 100% { box-shadow: 0 0 6px var(--color-green); } 75% { box-shadow: 0 0 18px rgba(0,255,136,0.9), 0 0 32px rgba(0,255,136,0.5); } 85% { box-shadow: 0 0 10px rgba(0,255,136,0.7); } } .terminal-click-hint { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.15em; color: var(--color-cyan); text-transform: uppercase; padding: 6px var(--space-6) 10px; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .terminal:hover .terminal-click-hint { opacity: 0.5; } .terminal--busy .terminal-click-hint { opacity: 0 !important; } @media (prefers-reduced-motion: reduce) { @keyframes cursor-pulse { 0%, 100% { box-shadow: 0 0 6px var(--color-green); } } } /* ═══════════════════════════════════════════════════════════════ CONTACT ═══════════════════════════════════════════════════════════════ */ /* ── Contact form ────────────────────────────────────────────── Reads as one "compose a message" unit: a mail-client To: header, the floating fields, then the send action tucked close. */ .contact-form { max-width: 720px; } /* Mail-header stack: To / From / Name as aligned key:value rows, anchored together by hairline separators like a real mail header. */ .mail-head { border: 1px solid rgba(0,255,136,0.14); margin-bottom: var(--space-5); } .mail-row { display: grid; grid-template-columns: 88px 1fr; align-items: center; border-bottom: 1px solid rgba(0,255,136,0.1); } .mail-row:last-child { border-bottom: none; } .mail-key { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); padding: 0 var(--space-4); align-self: stretch; display: flex; align-items: center; border-right: 1px solid rgba(0,255,136,0.1); background: rgba(0,255,136,0.025); } .mail-val { font-family: var(--font-mono); font-size: 14px; color: var(--color-green); text-shadow: 0 0 8px rgba(0,255,136,0.45); } /* Static To: value — fixed, not an input. */ .mail-val--static { padding: 12px 14px; } .mail-row--fixed .mail-key { color: var(--color-cyan); } .mail-val--static { color: var(--color-cyan); text-shadow: 0 0 8px rgba(0,229,255,0.4); } /* Inputs sitting inside a mail row: no own border, the row IS the frame. */ .mail-row .form-input { border: none; background: transparent; padding: 12px 14px; } .mail-row .form-input:focus { box-shadow: inset 0 0 0 1px rgba(0,229,255,0.45), 0 0 12px rgba(0,229,255,0.12); } /* "Type here" emphasis on the From field until the user first interacts. All cues (green label, pulse, bright placeholder) clear once .hint-done is set on first click/focus anywhere in the form. */ .contact-form:not(.hint-done) .mail-row--hint .mail-key { color: var(--color-green); } .contact-form:not(.hint-done) .mail-row--hint .form-input { animation: type-hint 2.2s ease-in-out infinite; } .contact-form:not(.hint-done) .mail-row--hint .form-input::placeholder { color: rgba(0,255,136,0.4); } .mail-row--hint .form-input:focus, .contact-form.hint-done .mail-row--hint .form-input { animation: none; } @keyframes type-hint { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(0,255,136,0.12); } 50% { box-shadow: inset 0 0 0 1px rgba(0,255,136,0.5), 0 0 14px rgba(0,255,136,0.18); } } @media (prefers-reduced-motion: reduce) { .mail-row--hint .form-input { animation: none; box-shadow: inset 0 0 0 1px rgba(0,255,136,0.3); } } .form-field { display: flex; flex-direction: column; gap: var(--space-2); } .form-field--message { margin-bottom: var(--space-4); } .form-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-mid); } .form-input { font-family: var(--font-mono); font-size: 14px; line-height: 1.6; color: var(--color-green); text-shadow: 0 0 8px rgba(0,255,136,0.45); caret-color: var(--color-green); background: transparent; border: 1px solid rgba(0,255,136,0.14); border-radius: 0; padding: 10px 12px; width: 100%; transition: border-color var(--duration-fast), box-shadow var(--duration-fast); } /* Placeholder must NOT glow — it should read as dim, inert hint text. */ .form-input::placeholder { color: var(--text-dim); text-shadow: none; } .form-input:hover { border-color: rgba(0,255,136,0.28); } .form-input:focus { outline: none; border-color: rgba(0,229,255,0.5); box-shadow: 0 0 12px rgba(0,229,255,0.18); } /* Auto-growing message field: no manual resize, JS sets height to content. */ .form-textarea { resize: none; overflow: hidden; min-height: 120px; } /* Honeypot — visually and a11y-hidden, off-screen so bots still fill it. */ .form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Turnstile takes NO space until the widget actually renders into it (with the placeholder site key it stays empty -> zero margin/height). */ .form-turnstile:empty { display: none; } .form-turnstile:not(:empty) { min-height: 65px; margin-bottom: var(--space-4); } .form-status { font-family: var(--font-mono); font-size: 13px; line-height: 1.6; margin-bottom: var(--space-4); padding: 10px 14px; border: 1px solid var(--color-pink); color: var(--color-pink); background: rgba(255,45,107,0.06); } /* Send action tucked close to the fields for a cohesive unit. */ .form-actions { display: flex; align-items: center; } .form-submit[disabled] { opacity: 0.6; cursor: progress; } /* The hidden attribute must win over the display rules below. */ .contact-success[hidden], #contact-form[hidden], .form-status[hidden] { display: none; } /* Success panel — inline status swap after a send. */ .contact-success { display: flex; align-items: flex-start; gap: var(--space-4); padding: 22px 24px; background: var(--bg-surface); border: 1px solid rgba(0,255,136,0.25); box-shadow: 0 0 40px rgba(0,255,136,0.06); max-width: 720px; } .cf-success-dot { flex-shrink: 0; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--color-green); box-shadow: 0 0 6px var(--color-green), 0 0 14px rgba(0,255,136,0.6); animation: blink 1.6s step-end infinite; } .cf-success-title { font-family: var(--font-pixel); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-green); text-shadow: 0 0 10px rgba(0,255,136,0.4); margin-bottom: var(--space-2); } .cf-success-body { font-family: var(--font-mono); font-size: 13px; line-height: 1.7; color: var(--text-mid); margin-bottom: var(--space-3); } .form-again { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-cyan); background: none; border: none; padding: 0; cursor: pointer; } .form-again:hover { text-shadow: 0 0 8px var(--color-cyan); } @media (prefers-reduced-motion: reduce) { .cf-success-dot { animation: none; } } /* ═══════════════════════════════════════════════════════════════ FOOTER ═══════════════════════════════════════════════════════════════ */ footer { padding: var(--space-10) 0; border-top: 1px solid rgba(0,255,136,0.1); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); } .footer-text { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.15em; color: var(--text-dim); } .footer-sig { font-family: var(--font-display); font-size: 20px; color: var(--color-green); text-shadow: 0 0 8px rgba(0,255,136,0.4); } .footer-legal { width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px; padding-top: var(--space-4); border-top: 1px solid rgba(0,255,136,0.06); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; } .footer-legal-link { color: var(--text-dim); text-decoration: none; transition: color 0.2s; } .footer-legal-link:hover { color: var(--neon-cyan); } .footer-legal-sep { color: rgba(0,229,255,0.3); } /* ═══════════════════════════════════════════════════════════════ REDUCED MOTION ═══════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .hero-tag, .hero-name, .hero-role, .hero-credo, .hero-cta, .reveal { opacity: 1; transform: none; } }