/* ============================================================================= DESIGN TOKENS All global variables. Edit here to retheme the entire site. ============================================================================= */ :root { /* — Brand palette (Dark mode defaults) — */ --bg: #050505; /* Near-abyss black — richer than pure #000 */ --bg2: #0a0a0a; --surface: #0f0f0f; --surface2: #141414; --glass: rgba(255,255,255,0.02); /* Glassmorphism fill */ --glass-border: rgba(255,255,255,0.08); /* Hairline border */ /* — Text — */ --text: #FAFAFA; /* Broken white — no harsh glare */ --text-muted: rgba(255,255,255,0.65); /* Body copy: elegant translucent grey */ --text-heading: #FAFAFA; --text-body: rgba(255,255,255,0.65); /* — WITI Red Accent — used surgically: CTA button, hover states, light effects — */ --color-accent: #FF3333; --accent: #FF3333; --accent2: #FF6666; /* Lighter tint for eyebrows / secondary */ --accent-glow: rgba(255,51,51,0.18); --accent2-glow: rgba(255,102,102,0.12); --gradient: linear-gradient(135deg, #FF3333 0%, #FF6666 100%); /* — Typography — */ --font: 'Inter', system-ui, -apple-system, sans-serif; /* — Spacing scale — */ --radius: 6px; /* Sharp-ish corners — professional, not pill-shaped */ --radius-sm: 6px; --radius-lg: 12px; --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px; --space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px; --space-16:64px;--space-20:80px;--space-24:96px; --section-py: 120px; --nav-h: 72px; --trans: 0.3s cubic-bezier(0.4,0,0.2,1); --shadow: 0 8px 32px rgba(0,0,0,0.6); --shadow-accent: 0 8px 20px rgba(255,51,51,0.2); /* — Compatibility aliases — */ --color-bg: var(--bg); --color-text: var(--text); } /* ============================================================================= LIGHT THEME OVERRIDES Applied when . ============================================================================= */ [data-theme="light"] { --bg: #F8F9FA; /* Clean off-white — not harsh pure white */ --bg2: #F0F1F3; --surface: #FFFFFF; --surface2: #EBEBED; --glass: rgba(0,0,0,0.02); --glass-border: rgba(0,0,0,0.08); --text: #111111; --text-muted: rgba(0,0,0,0.6); --text-heading: #111111; --text-body: rgba(0,0,0,0.6); --accent: #FF3333; /* Red stays consistent across themes */ --accent2: #CC2222; --accent-glow: rgba(255,51,51,0.12); --accent2-glow: rgba(204,34,34,0.08); --shadow: 0 4px 24px rgba(0,0,0,0.06); --color-bg: var(--bg); --color-text: var(--text); --color-accent: var(--accent); } /* Dark theme via class — mirrors [data-theme="dark"] */ body.dark { --bg: #050505; --bg2: #0a0a0a; --surface: #0f0f0f; --surface2: #141414; --glass: rgba(255,255,255,0.02); --glass-border: rgba(255,255,255,0.08); --text: #FAFAFA; --text-muted: rgba(255,255,255,0.65); --accent: #FF3333; --accent2: #FF6666; --color-bg: var(--bg); --color-text: var(--text); --color-accent: var(--accent); } /* ============================================================================= BASE RESET & GLOBAL STYLES ============================================================================= */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;font-size:16px} body{ font-family: var(--font); /* Fixed radial gradient — background-attachment:fixed ensures it stays visible even when sections scroll over it. !important prevents section bg overrides. */ background: radial-gradient(circle at top center, #121212 0%, #050505 100%) !important; background-attachment: fixed !important; color: var(--color-text); line-height: 1.6; min-height: 100vh; overflow-x: hidden; transition: color var(--trans); } [data-theme="light"] body{ background: radial-gradient(circle at top center, #FFFFFF 0%, #F5F5F7 100%) !important; background-attachment: fixed !important; } body.dark{ background: radial-gradient(circle at top center, #121212 0%, #050505 100%) !important; background-attachment: fixed !important; } /* Swiss Typographic Precision */ h1, h2 { letter-spacing: -0.03em; line-height: 1.1; font-weight: 800; color: var(--text-heading, var(--text)); } h3, h4 { letter-spacing: -0.01em; line-height: 1.2; } p { line-height: 1.6; font-weight: 400; color: var(--text-body, var(--text-muted)); } img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none;transition:color var(--trans)} ul{list-style:none} button{cursor:pointer;border:none;background:none;font:inherit} /* ============================================================================= UTILITIES ============================================================================= */ .container{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--space-6)} .gradient-text{background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .glass-card{ background: var(--glass); border: 1px solid var(--glass-border); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: var(--radius); padding: var(--space-8); transition: border-color var(--trans); } .glass-card:hover{ border-color: rgba(255,51,51,0.25); } /* ============================================================================= ANIMATIONS & KEYFRAMES ============================================================================= */ /* Hero entrance — text floats in from below on page load */ @keyframes fadeUp{ from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Tech card entrance — icons emerge from scale(0) when scrolled into view */ @keyframes scaleIn{ from { opacity: 0; transform: scale(0.6) translateY(16px); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.6;transform:scale(0.85)}} @keyframes orbFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-40px) scale(1.05)}} @keyframes slideInLeft{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}} @keyframes toastIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}} /* Staggered fade-up — applied to hero elements with .delay-N classes */ .animate-fade-up{ opacity: 0; transform: translateY(20px); animation: fadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards; } /* Mask Slide-up Reveal */ .mask-line { overflow: hidden; display: block; } .animate-slide-up { display: block; transform: translateY(110%); animation: slideUpMask 1s cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes slideUpMask { 0% { transform: translateY(110%); } 100% { transform: translateY(0%); } } .delay-1{ animation-delay: 0.12s; } .delay-2{ animation-delay: 0.24s; } .delay-3{ animation-delay: 0.38s; } .delay-4{ animation-delay: 0.52s; } .delay-5{ animation-delay: 0.68s; } /* Tech card scroll reveal — scale(0) → scale(1) with spring easing. JS sets --stagger CSS variable per card to create sequential entrance. */ .tech-card-reveal{ opacity: 0; transform: scale(0.6) translateY(16px); transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); transition-delay: var(--stagger, 0ms); } .tech-card-reveal.visible{ opacity: 1; transform: scale(1) translateY(0); } /* Generic scroll reveal for service and project cards */ .reveal{ opacity: 0; transform: translateY(24px); transition: opacity 0.65s ease, transform 0.65s ease; transition-delay: var(--stagger, 0ms); } .reveal.visible{ opacity: 1; transform: translateY(0); } /* ============================================================================= BENTO SPOTLIGHT (FLASHLIGHT EFFECT) ============================================================================= */ .spotlight-card { position: relative; overflow: hidden; } .spotlight-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; background: radial-gradient( 800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 51, 51, 0.04), transparent 40% ); z-index: 1; opacity: 0; transition: opacity 0.3s ease; } .spotlight-card:hover::before { opacity: 1; } .spotlight-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: radial-gradient( 400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 51, 51, 0.3), transparent 40% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; z-index: 2; } .spotlight-card:hover::after { opacity: 1; } /* ============================================================================= NAVIGATION Glassmorphism sticky header. Increases blur and density on scroll. ============================================================================= */ #site-header{ position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; height: var(--nav-h); background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid transparent; transition: background var(--trans), box-shadow var(--trans), border-color var(--trans), backdrop-filter var(--trans); } #site-header.scrolled{ background: rgba(5,5,5,0.75); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-bottom: 1px solid rgba(255,255,255,0.05); /* Ultra fine border */ box-shadow: 0 8px 32px rgba(0,0,0,0.5); } [data-theme="light"] #site-header{ background: transparent; border-bottom-color: transparent; } [data-theme="light"] #site-header.scrolled{ background: rgba(248,249,250,0.92); } #main-nav{ height:100%;max-width:1200px;margin:0 auto; padding:0 var(--space-6); display:grid;grid-template-columns: 1fr auto 1fr;align-items:center; } .nav-logo{justify-self:start;display:flex;align-items:center;gap:var(--space-2);font-size:1.25rem;font-weight:700;flex-shrink:0} /* Main Navigation Logo */ .witi-logo-main { height: 40px; /* Strong, highly visible size that still fits perfectly in the nav bar */ width: auto; display: block; } .witi-logo-main .logo-shape { fill: var(--text-heading); transition: fill var(--trans); } .witi-logo-main .logo-dot-red { fill: #FF3333 !important; transition: fill var(--trans); } .nav-links{justify-self:center;display:flex;align-items:center;gap:var(--space-1);margin:0;max-width:700px} .nav-link{ padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: 0.9rem; font-weight: 500; color: var(--text-muted); transition: color 0.3s ease, background 0.3s ease, transform 0.2s ease; outline: none; } .nav-link:hover{ color: var(--text); background: var(--glass); transform: translateY(-1px); } .nav-link.active{ color: var(--text); background: var(--glass); } .nav-link:focus-visible{ color: var(--accent2); outline: 2px solid var(--accent2); outline-offset: 2px; } .products-nav-item{position:relative} .products-menu-toggle{display:flex;align-items:center;gap:6px} .products-menu-chevron{font-size:1rem;line-height:1;transition:transform var(--trans)} .products-menu-toggle[aria-expanded="true"] .products-menu-chevron{transform:rotate(180deg)} .products-menu{ position:absolute;top:calc(100% + 14px);left:50%; width:min(680px,calc(100vw - 32px));padding:var(--space-4); background:rgba(10,10,10,0.96);border:1px solid var(--glass-border); border-radius:var(--radius-lg);box-shadow:0 24px 70px rgba(0,0,0,0.45); backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px); opacity:0;visibility:hidden;pointer-events:none; transform:translate(-50%,-8px);transition:opacity var(--trans),transform var(--trans),visibility var(--trans); } .products-menu.open{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)} .products-menu-header{padding:var(--space-2) var(--space-2) var(--space-4)} .products-menu-eyebrow{ display:block;margin-bottom:6px;color:var(--accent);font-size:0.7rem; font-weight:700;letter-spacing:0.14em;text-transform:uppercase; } .products-menu-header p,.products-menu-footer{color:var(--text-muted);font-size:0.82rem} .products-menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2)} .products-menu-card{ display:flex;min-width:0;flex-direction:column;gap:8px;padding:var(--space-4); border:1px solid var(--glass-border);border-radius:var(--radius); background:rgba(255,255,255,0.025); transition:border-color var(--trans),background var(--trans),transform var(--trans); } .products-menu-card:hover,.products-menu-card:focus-visible{ border-color:var(--product-accent);background:rgba(255,255,255,0.055);transform:translateY(-2px); } .products-menu-card:focus-visible{outline:2px solid var(--product-accent);outline-offset:2px} .products-menu-card-topline{display:flex;align-items:center;justify-content:space-between;gap:8px} .products-menu-card-topline strong{font-size:0.95rem} .products-menu-status{ border:1px solid var(--product-accent);border-radius:100px;padding:2px 7px; color:var(--product-accent);font-size:0.6rem;font-weight:700;letter-spacing:0.05em;text-transform:uppercase; } .products-menu-category{color:var(--product-accent);font-size:0.7rem;font-weight:700} .products-menu-summary{color:var(--text-muted);font-size:0.76rem;line-height:1.55} .products-menu-footer{margin-top:var(--space-3);padding:var(--space-3) var(--space-2) 0;border-top:1px solid var(--glass-border)} .products-menu-footer a{color:var(--text-muted);transition:color var(--trans)} .products-menu-footer a:hover,.products-menu-footer a:focus-visible{color:var(--accent)} [data-theme="light"] .products-menu{background:rgba(248,249,250,0.97);box-shadow:0 24px 70px rgba(0,0,0,0.16)} [data-theme="light"] .products-menu-card{background:rgba(255,255,255,0.66)} .nav-actions{justify-self:end;display:flex;align-items:center;gap:var(--space-3)} .theme-btn{ width:40px;height:40px;border-radius:50%; background:var(--glass);border:1px solid var(--glass-border); display:flex;align-items:center;justify-content:center; font-size:1.1rem;transition:all var(--trans); } .theme-btn:hover{background:var(--surface2);transform:scale(1.1)} [data-theme="dark"] .theme-icon.sun,[data-theme="light"] .theme-icon.moon{display:none} [data-theme="dark"] .theme-icon.moon,[data-theme="light"] .theme-icon.sun{display:block} .hamburger{display:none;flex-direction:column;gap:5px;padding:var(--space-2);width:40px;height:40px;justify-content:center;align-items:center} .hamburger span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:all var(--trans)} .hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)} .hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* ============================================================================= COMPONENTS — BUTTONS Primary: Solid red CTA. Secondary: Ghost with hairline border. Both use border-radius: 6px (sharp, professional — not pill-shaped). ============================================================================= */ .btn{ display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-6); border-radius: 6px; /* Sharp corners — not pill */ font-weight: 600; font-size: 0.95rem; transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease; white-space: nowrap; outline: none; cursor: pointer; } /* Primary: Solid WITI Red — only used for the main CTA */ .btn-primary{ background: var(--color-accent); color: #ffffff; border: none; box-shadow: none; } .btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255,51,51,0.2); } .btn-primary:focus-visible{ outline: 2px solid var(--color-accent); outline-offset: 3px; } /* Secondary: Ghost — contemplative, minimal */ .btn-ghost{ background: transparent; border: 1px solid rgba(255,255,255,0.2); color: var(--text); } .btn-ghost:hover{ border-color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.05); transform: translateY(-2px); } .btn-ghost:focus-visible{ outline: 2px solid var(--text); outline-offset: 3px; } [data-theme="light"] .btn-ghost{ border-color: rgba(0,0,0,0.18); color: var(--text); } [data-theme="light"] .btn-ghost:hover{ border-color: rgba(0,0,0,0.6); background: rgba(0,0,0,0.04); } .btn-full{ width: 100%; justify-content: center; } /* ============================================================================= LAYOUT — SECTIONS Transparent background so the body radial-gradient shows through every section. ============================================================================= */ .page-section{ padding: calc(var(--nav-h) + var(--section-py)) 0 var(--section-py); background: transparent; /* CRITICAL: lets the body gradient bleed through */ } .page-section + .page-section{ padding-top: var(--section-py); } /* ============================================================================= COMPONENTS — SECTION HEADERS ============================================================================= */ /* ============================================================================= COMPONENTS — SECTION HEADERS Eyebrow labels: uppercase, 12px, 0.1em tracking (Swiss typographic system). ============================================================================= */ .section-header{text-align:center;margin-bottom:var(--space-12)} .section-eyebrow{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 0.75rem; /* 12px — precise label scale */ font-weight: 600; letter-spacing: 0.1em; /* Swiss tracking */ text-transform: uppercase; color: var(--accent2); margin-bottom: var(--space-3); } /* Brand motif: red square dot from the WITI logo “i” as a visual system element */ .section-eyebrow::before{ content: ''; display: block; width: 6px; height: 6px; background: var(--color-accent); border-radius: 1.5px; } .section-title{ font-size: clamp(1.8rem,4vw,3rem); font-weight: 800; line-height: 1.1; /* Compact and massive — Swiss style */ letter-spacing: -0.03em; margin-bottom: var(--space-4); } .section-subtitle{ font-size:1.05rem; color:var(--text-muted); max-width:580px; margin:0 auto; } /* ============================================================================= COMPONENTS — HERO SECTION Three explicit stacking layers: z-index 1 → .hero-bg (grid + orbs — decorative) z-index 2 → .hero-atmosphere (ambient logo blur) z-index 10 → .hero-content (text + buttons — always on top) ============================================================================= */ .hero-section{ min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; position: relative; /* establishes stacking context */ overflow: hidden; padding-bottom: var(--space-16); background: transparent; /* must be transparent — gradient lives on body */ } /* LAYER 1 — Decorative grid + orbs */ .hero-bg{ position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; } /* LAYER 2 — Ambient WITI logo: Top-right asymmetrical placement */ .hero-atmosphere { position: absolute; top: -20px; right: -5vw; transform: rotate(8deg); width: 45vw; max-width: 600px; aspect-ratio: 320 / 120; z-index: 2; pointer-events: none; filter: blur(40px); /* Softer blur — more ambient, less distracting */ opacity: 0.08; /* Nearly invisible — just a whisper of brand */ } .hero-atmosphere svg { display: block; width: 100%; height: 100%; } /* Subtle red radial glow — EMI-style: softer, higher, wider fade */ .hero-section::before { content: ''; position: absolute; inset: 0; z-index: 3; background: radial-gradient(circle at 50% 30%, rgba(255,51,51,0.06), transparent 65%); pointer-events: none; } /* Subtle 1px grid pattern — reduced to 2% for cleaner EMI feel */ .hero-grid{ position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px); background-size: 60px 60px; } /* Orbs — reduced opacity for a subtler, more focused backdrop */ .hero-orb{position:absolute;border-radius:50%;filter:blur(100px);animation:orbFloat 10s ease-in-out infinite} .orb-1{width:450px;height:450px;background:radial-gradient(circle,rgba(255,51,51,0.07) 0%,transparent 70%);top:-150px;right:-100px;animation-delay:0s} .orb-2{width:350px;height:350px;background:radial-gradient(circle,rgba(255,51,51,0.04) 0%,transparent 70%);bottom:-100px;left:-100px;animation-delay:3s} .orb-3{width:250px;height:250px;background:radial-gradient(circle,rgba(255,51,51,0.05) 0%,transparent 70%);bottom:200px;right:200px;animation-delay:6s} /* LAYER 3 — Text + buttons: always above everything */ .hero-content{ position: relative; z-index: 10; /* highest layer — text always clickable and visible */ text-align: center; } /* ===== UNIFIED DNA: Tags & Filters ===== */ .hero-badge, .filter-btn { display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2); padding:var(--space-2) var(--space-4); background:transparent; border:1px solid rgba(255,255,255,0.1); border-radius:100px; font-size:0.82rem; font-weight:500; color:rgba(255,255,255,0.65); transition:all var(--trans); } .hero-badge { margin-bottom:var(--space-6); cursor:default; } [data-theme="light"] .hero-badge, [data-theme="light"] .filter-btn { border-color: rgba(0,0,0,0.1); color: rgba(0,0,0,0.6); } .badge-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;flex-shrink:0} .badge-dot.pulse{animation:pulse 2s ease-in-out infinite} .hero-title{ font-size:clamp(2.5rem,7vw,5.5rem); font-weight:900;line-height:1.08; letter-spacing:-0.02em;margin-bottom:var(--space-6); } .hero-subtitle{font-size:clamp(1rem,2vw,1.25rem);color:var(--text-muted);max-width:560px;margin:0 auto var(--space-8)} .hero-actions{display:flex;gap:var(--space-4);justify-content:center;flex-wrap:wrap;margin-bottom:var(--space-12)} .hero-stats{display:flex;align-items:center;gap:var(--space-8);justify-content:center} .stat-item{text-align:center} .stat-number{font-size:2.2rem;font-weight:800;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .stat-plus{font-size:1.5rem;font-weight:700;color:var(--accent)} .stat-label{display:block;font-size:0.8rem;color:var(--text-muted);font-weight:500;margin-top:2px} .stat-divider{width:1px;height:40px;background:var(--glass-border)} .scroll-indicator{position:absolute;bottom:var(--space-8);left:50%;transform:translateX(-50%);z-index:1} .scroll-dot{ width:28px;height:44px;border:2px solid var(--glass-border); border-radius:100px;margin:0 auto;position:relative; } .scroll-dot::after{ content:'';position:absolute;top:6px;left:50%;transform:translateX(-50%); width:4px;height:8px;background:var(--accent);border-radius:2px; animation:orbFloat 1.6s ease-in-out infinite; } /* ===== METRICS STRIP (EMI ERP inspired) ===== */ .metrics-strip { padding: 60px 0; background: var(--surface); border-top: 1px solid var(--glass-border); border-bottom: 1px solid var(--glass-border); } .metrics-strip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); } .metric-strip-card { text-align: center; padding: var(--space-6) var(--space-4); transition: transform 0.3s ease, border-color 0.3s ease; border-radius: var(--radius-lg); border: 1px solid transparent; } .metric-strip-card:hover { transform: translateY(-2px); border-color: var(--glass-border); background: var(--glass); } .metric-strip-number { font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 900; letter-spacing: -0.04em; background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; } .metric-strip-plus { font-size: 1.8rem; font-weight: 700; color: var(--accent); margin-left: 2px; } .metric-strip-label { display: block; font-size: 0.82rem; color: var(--text-muted); font-weight: 500; margin-top: var(--space-2); } @media(max-width: 900px) { .metrics-strip-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } } @media(max-width: 480px) { .metrics-strip-grid { grid-template-columns: 1fr; } } /* ===== TECH SECTION ===== */ .tech-section{background:var(--bg2)} .tech-filters,.project-filters{ display:flex;gap:var(--space-2);flex-wrap:wrap; justify-content:center;margin-bottom:var(--space-10); } .filter-btn { cursor:pointer; } .filter-btn:hover{color:var(--text-heading);border-color:rgba(255,255,255,0.2)} [data-theme="light"] .filter-btn:hover { color:#000; border-color:rgba(0,0,0,0.2); } .filter-btn.active{ background:var(--text-heading);color:var(--bg);border-color:var(--text-heading); box-shadow:0 4px 16px rgba(255,255,255,0.1); } [data-theme="light"] .filter-btn.active{ background:#050505;color:#fff;border-color:#050505; box-shadow:0 4px 16px rgba(0,0,0,0.1); } .tech-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--space-4)} /* ===== TECH CARDS — Prompt 8 ===== */ .tech-card{ background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: var(--space-6); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .tech-card:hover{ transform: translateY(-5px); border-color: var(--accent); box-shadow: 0 4px 12px rgba(0,0,0,0.1), var(--shadow-accent); } .tech-card:focus-within{ border-color: var(--accent2); box-shadow: 0 0 0 2px var(--accent2); } .tech-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4)} .tech-name{font-weight:600;font-size:0.95rem} .tech-categoria{font-size:0.72rem;padding:2px 10px;border-radius:100px;background:var(--surface2);color:var(--text-muted)} .tech-bar-wrap{background:var(--surface2);border-radius:100px;height:6px;overflow:hidden;margin-bottom:var(--space-2)} .tech-bar{height:100%;border-radius:100px;width:0;transition:width 1.2s cubic-bezier(0.4,0,0.2,1)} .tech-level{font-size:0.78rem;color:var(--text-muted);text-align:right} /* ===== SERVICES GRID — EMI-style bento aesthetic ===== */ .services-grid{ display: grid; grid-template-columns: 1fr 1fr; /* 2 columns on large screens */ gap: var(--space-4); /* tighter gap like bento cards */ } .service-card{ /* Solid elevated surface — same as bento-card in EMI ERP */ background: var(--surface); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); /* matches bento-card radius */ padding: var(--space-8); transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; position: relative; overflow: hidden; } .service-card::before{ content:'';position:absolute;inset:0; background:var(--gradient);opacity:0;transition:opacity 0.3s ease; } /* Refined EMI-style hover: gentle lift + accent border + red glow */ .service-card:hover{ border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 12px 40px rgba(255,51,51,0.12); } .service-card:hover::before{opacity:0.03} /* Service icon box — matches .bento-card-icon from EMI ERP */ .service-icon-box{ width: 48px; height: 48px; border-radius: 12px; background: rgba(255,51,51,0.08); border: 1px solid rgba(255,51,51,0.18); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: var(--space-6); flex-shrink: 0; } /* Legacy .service-icon fallback (if still rendered) */ .service-icon{font-size:2.5rem;margin-bottom:var(--space-4);display:block} .service-title{font-size:1.1rem;font-weight:700;margin-bottom:var(--space-3)} .service-desc{font-size:0.88rem;color:var(--text-muted);line-height:1.7} /* ── Featured service card: full-width bento with code decoration ── */ .service-card-featured { grid-column: 1 / -1; border: 1px solid rgba(255,51,51,0.25); background: linear-gradient(145deg, var(--surface) 0%, rgba(255,51,51,0.03) 100%); } @media(min-width: 700px) { .service-card-featured { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: center; } } .service-featured-content { padding: var(--space-2); } .service-featured-decoration { display: flex; align-items: center; justify-content: center; padding: var(--space-4); } /* Code editor visual (like EMI ERP bento) */ .service-bento-visual { background: rgba(0,0,0,0.4); border: 1px solid var(--glass-border); border-radius: var(--radius); overflow: hidden; width: 100%; max-width: 360px; } [data-theme="light"] .service-bento-visual { background: rgba(30,30,40,0.95); } .bento-code-header { display: flex; gap: 6px; padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,0.06); } .bento-code-header .dot { width: 10px; height: 10px; border-radius: 50%; } .dot-red { background: #ff5f57; } .dot-yellow{ background: #febc2e; } .dot-green { background: #28c840; } .bento-code-content { padding: 14px 16px; margin: 0; font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 0.78rem; line-height: 1.65; color: rgba(255,255,255,0.7); overflow-x: auto; } .bento-code-content code { white-space: pre; } .code-keyword { color: #c792ea; } .code-class { color: #82aaff; } .code-string { color: #c3e88d; } .code-comment { color: rgba(255,255,255,0.3); font-style: italic; } /* ── Tech category tags: EMI accent style ── */ .tech-categoria { font-size: 0.72rem; padding: 2px 10px; border-radius: 100px; background: rgba(255,51,51,0.05); border: 1px solid rgba(255,51,51,0.18); color: var(--accent2); } /* ===== PROJECTS ===== */ .projects-section{background:var(--bg)} .projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:var(--space-6)} /* ===== PROJECT CARDS — Prompt 8: smooth lift + accessible focus ===== */ .project-card{ background: var(--surface); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .project-card:hover{ transform: translateY(-5px); box-shadow: 0 12px 40px rgba(0,0,0,0.25), 0 0 0 1px var(--accent); border-color: var(--accent); } .project-card:focus-within{ transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,0.2), 0 0 0 2px var(--accent2); border-color: var(--accent2); } .project-img{ aspect-ratio: 16/9; overflow: hidden; position: relative; } .project-img img{ width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .project-card:hover .project-img img{ transform: scale(1.06); } .project-img-overlay{ position:absolute;inset:0; background:linear-gradient(to top,rgba(10,10,15,0.7) 0%,transparent 60%); } .project-cat-badge{ position:absolute;top:var(--space-4);left:var(--space-4); padding:3px 12px;border-radius:100px; font-size:0.72rem;font-weight:600; background:rgba(124,58,237,0.7);color:#fff;backdrop-filter:blur(8px); } .project-body{padding:var(--space-6)} .project-header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-3);margin-bottom:var(--space-3)} .project-title{font-size:1.1rem;font-weight:700} .project-year{font-size:0.78rem;color:var(--text-muted);white-space:nowrap} .project-desc{font-size:0.87rem;color:var(--text-muted);line-height:1.65;margin-bottom:var(--space-4)} .project-tags{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-4)} .project-tag{ font-size:0.7rem; font-weight:700; padding:3px 10px; border-radius:100px; /* EMI-style accent tint: subtle red border + faint red bg */ background: rgba(255,51,51,0.05); border: 1px solid rgba(255,51,51,0.2); color: var(--accent2); transition: background var(--trans), border-color var(--trans); } .project-tag:hover{ background: rgba(255,51,51,0.1); border-color: rgba(255,51,51,0.35); } [data-theme="light"] .project-tag{ background: rgba(255,51,51,0.06); border-color: rgba(204,34,34,0.25); color: var(--accent2); } .project-footer{display:flex;align-items:center;justify-content:space-between} .project-status{font-size:0.78rem;font-weight:500;display:flex;align-items:center;gap:var(--space-2)} .status-dot{width:7px;height:7px;border-radius:50%} .status-dot.done{background:#22c55e} .status-dot.wip{background:#f59e0b} .project-link{ font-size:0.85rem;font-weight:600;color:var(--accent2); display:flex;align-items:center;gap:4px;transition:gap var(--trans),color var(--trans); } .project-link:hover{gap:8px;color:var(--accent)} /* ===== FEATURED PROJECT ===== */ .project-card-featured { border: 1px solid rgba(255,51,51,0.3); background: linear-gradient(145deg, var(--surface) 0%, rgba(255,51,51,0.03) 100%); } @media(min-width: 850px) { .project-card-featured { grid-column: 1 / -1; display: grid; grid-template-columns: 1.5fr 1fr; } .project-card-featured .project-img { height: 100%; } .project-card-featured .project-body { display: flex; flex-direction: column; justify-content: center; padding: var(--space-8); } .project-card-featured .project-desc { font-size: 1rem; margin-bottom: var(--space-6); } .project-card-featured .project-title { font-size: 1.5rem; } } /* ===== MOCKUP PLACEHOLDER ===== */ .mockup-placeholder { width: 100%; height: 100%; min-height: 240px; display: flex; align-items: center; justify-content: center; background: var(--surface2); color: var(--text-muted); font-weight: 700; font-size: 1rem; letter-spacing: 0.05em; text-align: center; padding: var(--space-6); transition: transform 0.4s ease, color var(--trans), background var(--trans); } .project-card:hover .mockup-placeholder { transform: scale(1.04); color: var(--text); background: rgba(255,255,255,0.03); } [data-theme="light"] .project-card:hover .mockup-placeholder { background: rgba(0,0,0,0.03); } /* ===== CONTACT ===== */ .contact-section{ background:transparent; padding-bottom: 160px; /* Massive pre-footer breathing room */ } .contact-layout{display:grid;grid-template-columns:1fr 1.8fr;gap:var(--space-10);align-items:start;margin-top:var(--space-12)} .contact-card{display:flex;flex-direction:column;gap:var(--space-6)} .contact-item{display:flex;align-items:flex-start;gap:var(--space-4)} .contact-icon{font-size:1.4rem;flex-shrink:0;margin-top:2px} .contact-item strong{display:block;font-weight:600;margin-bottom:2px} .contact-item a,.contact-item span{font-size:0.88rem;color:var(--text-muted)} .contact-item a:hover{color:var(--accent2)} .availability-badge{ display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-6) !important; margin-top:var(--space-4); } .availability-badge strong{display:block;font-weight:600;font-size:0.9rem} .availability-badge span{font-size:0.8rem;color:var(--text-muted)} .contact-form{display:flex;flex-direction:column;gap:var(--space-4)} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)} .form-group{display:flex;flex-direction:column;gap:var(--space-2)} .form-group label{font-size:0.85rem;font-weight:600;color:var(--text)} .form-group input,.form-group textarea{ background:var(--surface2);border:1px solid var(--glass-border); border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4); font:inherit;font-size:0.9rem;color:var(--text); transition:border-color var(--trans),box-shadow var(--trans); resize:none;outline:none; } .form-group input:focus,.form-group textarea:focus{ border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow); } .form-group input.error,.form-group textarea.error{border-color:#ef4444} .field-error{font-size:0.78rem;color:#ef4444;min-height:1.2em} .form-success{ text-align:center;padding:var(--space-12); background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius); } .success-icon{font-size:3rem;margin-bottom:var(--space-4)} .form-success h3{font-size:1.4rem;margin-bottom:var(--space-3)} .form-success p{color:var(--text-muted);margin-bottom:var(--space-6)} /* ===== FOOTER ===== */ #site-footer{position:relative;overflow:hidden;border-top:1px solid rgba(255,255,255,0.05);background:var(--surface);padding:var(--space-12) 0 0} [data-theme="light"] #site-footer { border-top:1px solid rgba(0,0,0,0.05); } .footer-watermark{ position:absolute;inset:0; background:url('images/logo.svg') center/80% no-repeat; opacity:0.02; pointer-events:none; } [data-theme="light"] .footer-watermark{ opacity:0.03; filter:brightness(0); } .footer-inner{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--space-8);padding-bottom:var(--space-10)} .footer-brand p{font-size:0.88rem;color:rgba(255,255,255,0.4);margin-top:var(--space-4);line-height:1.7} [data-theme="light"] .footer-brand p { color:rgba(0,0,0,0.4); } .footer-brand .nav-logo{margin-bottom:var(--space-2)} .footer-nav ul{display:flex;flex-direction:column;gap:var(--space-3)} .footer-nav a{font-size:0.88rem;color:rgba(255,255,255,0.4);transition:color var(--trans)} [data-theme="light"] .footer-nav a { color:rgba(0,0,0,0.4); } .footer-nav a:hover{color:var(--text-heading)} .footer-bottom{ border-top:1px solid rgba(255,255,255,0.05); padding:var(--space-4) 0;text-align:center; font-size:0.82rem;color:rgba(255,255,255,0.3); } [data-theme="light"] .footer-bottom { border-top:1px solid rgba(0,0,0,0.05); color:rgba(0,0,0,0.3); } /* ===== TOAST ===== */ .toast{ position:fixed;bottom:var(--space-6);right:var(--space-6);z-index:9999; background:var(--surface2);border:1px solid var(--glass-border); border-radius:var(--radius-sm);padding:var(--space-3) var(--space-6); font-size:0.9rem;font-weight:500; opacity:0;pointer-events:none; transition:opacity 0.3s ease,transform 0.3s ease; transform:translateY(10px); } .toast.show{opacity:1;pointer-events:auto;transform:translateY(0)} /* ===== INTERSECTION OBSERVER REVEAL ===== */ .reveal{opacity:0;transform:translateY(28px);transition:opacity 0.7s ease,transform 0.7s ease} .reveal.visible{opacity:1;transform:translateY(0)} /* ============================================================================= RESPONSIVE — MOBILE BREAKPOINTS Mobile-first. Layout collapses to single column below 768px. ============================================================================= */ @media(max-width:768px){ /* Fix nav layout for mobile */ #main-nav{ display:flex; justify-content:space-between; width:100%; } /* Mobile nav — hamburger shows, links hidden by default */ .nav-links{ position:fixed;inset:0;top:var(--nav-h); background:var(--bg);flex-direction:column; gap:var(--space-2);padding:var(--space-8); transform:translateX(100%);transition:transform var(--trans); align-items:flex-start; max-width:none;width:100%;margin:0;z-index:900; } .nav-links.open{transform:translateX(0)} .nav-link{font-size:1.2rem;padding:var(--space-3) var(--space-4);width:100%} .products-nav-item{width:100%} .products-menu{ position:static;width:100%;max-height:0;padding:0 var(--space-3); border:0;border-radius:0;box-shadow:none;overflow:hidden; background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none; opacity:1;visibility:visible;pointer-events:none; transform:none;transition:max-height var(--trans),padding var(--trans); } .products-menu.open{max-height:620px;padding:var(--space-2) var(--space-3) var(--space-4);pointer-events:auto;transform:none} .products-menu-header{padding:var(--space-2) 0 var(--space-3)} .products-menu-grid{grid-template-columns:1fr} .products-menu-card{padding:var(--space-3)} .products-menu-footer{padding-left:0;padding-right:0} .hamburger{display:flex} /* Hero: always centred, smaller section padding */ .hero-section{ padding-bottom: var(--space-10); } .hero-stats{gap:var(--space-4)} .stat-number{font-size:1.6rem} /* Services: 1 column on mobile (Prompt 4) */ .services-grid{ grid-template-columns: 1fr; } /* Other grid overrides */ .contact-layout{grid-template-columns:1fr} .form-row{grid-template-columns:1fr} .footer-inner{grid-template-columns:1fr;gap:var(--space-6)} .projects-grid{grid-template-columns:1fr} .tech-grid{grid-template-columns:1fr} } @media(max-width:480px){ .hero-title{font-size:2.2rem} .hero-actions{flex-direction:column;align-items:center} .hero-stats{gap:var(--space-3)} .stat-divider{display:none} } /* ============================================================================= COMPONENTS — LOGO SVG logo is white on transparent background. In light mode, brightness(0) inverts it to black — no background square ever. ============================================================================= */ .logo-img{ height: 38px; width: auto; object-fit: contain; display: block; background: none !important; padding: 0 !important; border-radius: 0 !important; border: none !important; box-shadow: none !important; transition: filter var(--trans), opacity var(--trans); } [data-theme="light"] .logo-img{ opacity: 0.8; } .logo-img--sm{ height: 30px; } /* ===== LANGUAGE TOGGLE ===== */ .lang-btn{ height:36px;padding:0 var(--space-3); border-radius:var(--radius-sm); background:var(--glass);border:1px solid var(--glass-border); color:var(--text);font-size:0.78rem;font-weight:700; letter-spacing:0.05em;cursor:pointer; transition:all var(--trans);display:flex;align-items:center; } .lang-btn:hover{border-color:var(--accent);color:var(--accent)} /* ===== TECH BAR — JS-driven width ===== */ .tech-bar{ height:100%; border-radius:100px; width:0; /* Width set by JS: bar.style.width = bar.style.getPropertyValue('--w') */ transition:width 1.2s cubic-bezier(0.4,0,0.2,1); } /* ===== HERO BG IMAGE fallback ===== */ .hero-section::after{ content:'';position:absolute;inset:0;z-index:0; background:url('images/hero_bg.png') center/cover no-repeat; opacity:0.07;pointer-events:none; } [data-theme="light"] .hero-section::after{opacity:0.04} /* ===== PROJECT CARD — no image fallback ===== */ .project-img img{background:var(--surface2)} /* ===== CONTACT — question mark after titleAccent ===== */ .contact-section .section-title span:last-child{color:var(--text)} /* ============================================================================= COMPONENTS — PROCESS / METHODOLOGY SECTION 2×2 glassmorphism cards with thin SVG icons and micro-interaction lift. ============================================================================= */ .process-section { background: var(--bg2); } .process-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); margin-top: var(--space-12); } /* Glass card base */ .process-card { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: var(--space-10); position: relative; cursor: default; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease; } /* Micro-interaction: subtle lift on hover */ .process-card:hover { transform: translateY(-4px); border-color: rgba(124, 58, 237, 0.25); box-shadow: 0 16px 48px rgba(0,0,0,0.18), 0 0 0 1px var(--glass-border); } /* Step number — e.g. "01" */ .process-step-num { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; color: var(--accent); margin-bottom: var(--space-6); font-variant-numeric: tabular-nums; } /* SVG icon container — muted by default, accent on hover */ .process-icon { color: var(--text-muted); margin-bottom: var(--space-6); transition: color 0.3s ease, transform 0.3s ease; } .process-card:hover .process-icon { color: var(--accent); transform: scale(1.08); } .process-card-title { font-size: 1.1rem; font-weight: 700; margin-bottom: var(--space-3); color: var(--text); } .process-card-desc { font-size: 0.9rem; color: var(--text-muted); line-height: 1.75; } /* Light mode: slightly deeper card shadow */ [data-theme="light"] .process-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.05); } /* Staggered reveal delays for the 4 cards */ .process-grid .process-card:nth-child(1){ --stagger: 0ms; } .process-grid .process-card:nth-child(2){ --stagger: 100ms; } .process-grid .process-card:nth-child(3){ --stagger: 200ms; } .process-grid .process-card:nth-child(4){ --stagger: 300ms; } /* Mobile: single column */ @media(max-width: 768px){ .process-grid { grid-template-columns: 1fr; } } /* ============================================================================= LOGO ANIMATIONS (Applied to main nav logo) 1. logoDotPulse — breathing pulse on the red dot 2. logoShimmer — silver light sweep across the shapes ============================================================================= */ /* Base styling for the main logo is handled in the NAVIGATION section. */ /* 1 — Red dot: opacity breathes slightly, scale nudges, and a red glow appears */ @keyframes logoDotPulse { 0%, 100% { opacity: 0.85; transform: scale(1.0); filter: drop-shadow(0 0 0px transparent); } 50% { opacity: 1.0; transform: scale(1.1); filter: drop-shadow(0 0 6px rgba(255,51,51,0.6)); } } /* 2 — White/Dark shapes: a subtle 100% opacity shine over an 85% opacity base. It sweeps across quickly, then pauses for a long time to avoid distraction. */ @keyframes logoShimmer { 0% { mask-position: -200px 0; -webkit-mask-position: -200px 0; } 15% { mask-position: 300px 0; -webkit-mask-position: 300px 0; } 100% { mask-position: 300px 0; -webkit-mask-position: 300px 0; } } /* Apply pulse to the red dot */ .witi-logo-main .logo-dot-red { transform-origin: center; animation: logoDotPulse 4s ease-in-out infinite; } /* Apply shimmer to all text shapes */ .witi-logo-main .logo-shape { mask-image: linear-gradient( 90deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.85) 45%, rgba(255,255,255,1.0) 50%, rgba(255,255,255,0.85) 55%, rgba(255,255,255,0.85) 100% ); mask-size: 200px 100%; -webkit-mask-image: linear-gradient( 90deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.85) 45%, rgba(255,255,255,1.0) 50%, rgba(255,255,255,0.85) 55%, rgba(255,255,255,0.85) 100% ); -webkit-mask-size: 200px 100%; animation: logoShimmer 15s infinite; } /* ============================================================================= CARD CONTRAST — Dark surfaces one step lighter than the background Ensures cards feel elevated, not flat. ============================================================================= */ /* Dark mode: service-card and process-card use solid surface (EMI-style) */ .glass-card, .process-card { background: rgba(255,255,255,0.03); } /* service-card already has background: var(--surface) — no override needed in dark */ /* Light mode: cards are pure white with a soft diffused shadow */ [data-theme="light"] .glass-card, [data-theme="light"] .process-card, [data-theme="light"] .service-card, [data-theme="light"] .project-card { background: #FFFFFF; box-shadow: 0 2px 24px rgba(0,0,0,0.05), 0 0 0 1px rgba(0,0,0,0.04); } /* ── Process cards: EMI-style hover (was only translateY(-6px) before) ── */ .process-card:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 12px 40px rgba(255,51,51,0.12); } /* ============================================================================= PHASE 4 — WITI TECHNOLOGY HOME Product-led home with one visual protagonist per section. ============================================================================= */ #site-header::after{ content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px; background:linear-gradient(90deg,transparent,var(--accent),transparent); opacity:var(--header-glow-opacity,0);pointer-events:none; } /* Logo loops from the original template are replaced by one session intro. */ .witi-logo-main .logo-shape, .witi-logo-main .logo-dot-red{animation:none} @keyframes logoBarReveal{from{opacity:0;clip-path:inset(100% 0 0)}to{opacity:1;clip-path:inset(0)}} @keyframes logoDotIntro{0%{opacity:0;transform:scale(.55)}60%{opacity:1;transform:scale(1.22);filter:drop-shadow(0 0 8px rgba(255,51,51,.8))}100%{transform:scale(1);filter:none}} .logo-intro #site-header .witi-logo-main .logo-shape{ animation:logoBarReveal .32s cubic-bezier(.2,.8,.2,1) both; } .logo-intro #site-header .witi-logo-main rect:nth-child(2){animation-delay:60ms} .logo-intro #site-header .witi-logo-main rect:nth-child(3){animation-delay:120ms} .logo-intro #site-header .witi-logo-main rect:nth-child(5){animation-delay:180ms} .logo-intro #site-header .witi-logo-main rect:nth-child(6){animation-delay:240ms} .logo-intro #site-header .witi-logo-main rect:nth-child(7){animation-delay:300ms} .logo-intro #site-header .witi-logo-main rect:nth-child(8){animation-delay:360ms} .logo-intro #site-header .witi-logo-main .logo-dot-red{ animation:logoDotIntro .5s cubic-bezier(.16,1,.3,1) .42s both; } .footer-contact{display:flex;flex-direction:column;gap:var(--space-3)} .footer-contact span{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted)} .footer-contact a{font-size:.92rem;color:var(--text-heading);transition:color var(--trans)} .footer-contact a:hover{color:var(--accent)} .hero-technology{min-height:100vh;text-align:left} .hero-technology-layout{ position:relative;z-index:10;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr); gap:var(--space-12);align-items:center;padding-top:var(--nav-h); } .hero-technology-copy{max-width:680px} .hero-technology .hero-badge{margin-bottom:var(--space-6)} .hero-technology-title{font-size:clamp(3.4rem,6vw,6.6rem);margin-bottom:var(--space-6);text-align:left} .hero-technology .hero-subtitle{max-width:620px;margin:0 0 var(--space-8);font-size:clamp(1rem,1.6vw,1.2rem)} .hero-technology .hero-actions{justify-content:flex-start;margin-bottom:0} .hero-tech-stage{ position:relative;display:flex;align-items:center;justify-content:center; min-height:500px;isolation:isolate; } .hero-tech-glow{ position:absolute;width:68%;height:48%;border-radius:50%; background:radial-gradient(ellipse,rgba(255,51,51,.22),transparent 68%); filter:blur(34px);animation:techGlowBreath 3.8s ease-in-out infinite; } .hero-tech-svg{position:relative;width:100%;overflow:visible;filter:drop-shadow(0 18px 28px rgba(0,0,0,.3))} .hero-tech-rail,.hero-tech-flow{fill:none;stroke-linecap:round} .hero-tech-rail{stroke:rgba(255,255,255,.11);stroke-width:1} .hero-tech-flow{ stroke:var(--accent);stroke-width:1.8;stroke-dasharray:4 22; filter:drop-shadow(0 0 5px rgba(255,51,51,.65)); } .hero-tech-flow.flow-a{animation:techDashForward 2.4s linear infinite} .hero-tech-flow.flow-b{animation:techDashReverse 2.8s linear infinite} .hero-tech-core rect{fill:rgba(16,16,16,.94);stroke:var(--accent);stroke-width:1.3} .hero-tech-core text{fill:var(--accent);font:700 20px ui-monospace,monospace;letter-spacing:.2em} .hero-tech-core .hero-tech-core-label{fill:var(--text-muted);font-size:8px;letter-spacing:.28em} .hero-tech-core circle{fill:var(--accent);filter:drop-shadow(0 0 6px var(--accent));animation:techLedPulse 1.8s ease-in-out infinite} .hero-tech-node{animation:techNodeBreath 4.8s ease-in-out infinite} .hero-tech-node.node-b{animation-delay:-1.2s}.hero-tech-node.node-c{animation-delay:-2.4s}.hero-tech-node.node-d{animation-delay:-3.6s} .hero-tech-node rect{fill:rgba(16,16,16,.76);stroke:rgba(255,255,255,.15);stroke-width:1} .hero-tech-node text{fill:var(--text);font:700 10px ui-monospace,monospace;letter-spacing:.08em} .hero-tech-node .hero-tech-node-label{fill:var(--text-muted);font-size:7px;letter-spacing:.12em} @keyframes techDashForward{to{stroke-dashoffset:-260}} @keyframes techDashReverse{to{stroke-dashoffset:260}} @keyframes techGlowBreath{50%{opacity:.58;transform:scale(.88)}} @keyframes techLedPulse{50%{opacity:.35;transform:scale(.72)}} @keyframes techNodeBreath{50%{opacity:.72}} [data-theme="light"] .hero-tech-rail{stroke:rgba(0,0,0,.14)} [data-theme="light"] .hero-tech-core rect,[data-theme="light"] .hero-tech-node rect{fill:rgba(255,255,255,.9);stroke:rgba(0,0,0,.12)} .proof-strip{position:relative;background:rgba(255,255,255,.018);border-top:1px solid var(--glass-border);border-bottom:1px solid var(--glass-border)} .proof-strip-grid{display:grid;grid-template-columns:repeat(4,1fr)} .proof-strip-item{ display:flex;align-items:center;justify-content:center;gap:10px;padding:20px var(--space-4); border-right:1px solid var(--glass-border);color:var(--text-muted);font-size:.78rem;font-weight:700; letter-spacing:.09em;text-transform:uppercase;text-align:center; } .proof-strip-item:last-child{border-right:0} .proof-strip-dot{width:6px;height:6px;border-radius:2px;background:var(--accent);box-shadow:0 0 10px rgba(255,51,51,.75)} .product-showcase-section{background:transparent} .product-showcase-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6)} .product-showcase-card{ --tilt-x:0deg;--tilt-y:0deg;position:relative;overflow:hidden; min-height:520px;display:flex;flex-direction:column; border:1px solid var(--glass-border);border-radius:20px; background:linear-gradient(145deg,var(--surface),rgba(255,255,255,.015)); transform:perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); transform-style:preserve-3d; transition:transform .22s cubic-bezier(.2,.8,.2,1),border-color .22s ease,box-shadow .22s ease,opacity .65s ease; } .product-showcase-card:hover{border-color:var(--product-accent);box-shadow:0 20px 55px rgba(0,0,0,.28),0 0 28px color-mix(in srgb,var(--product-accent) 18%,transparent)} .product-card-glare{ position:absolute;inset:-1px;z-index:3;pointer-events:none;opacity:0; background:radial-gradient(circle at var(--glare-x,50%) var(--glare-y,50%),rgba(255,255,255,.16),transparent 34%); transition:opacity .22s ease; } .product-showcase-card:hover .product-card-glare{opacity:.3} .product-showcase-visual{ position:relative;min-height:230px;overflow:hidden;display:flex;align-items:center;justify-content:center; border-bottom:1px solid var(--glass-border); background:radial-gradient(circle at center,color-mix(in srgb,var(--product-accent) 12%,transparent),transparent 68%); } .product-showcase-body{display:flex;flex:1;flex-direction:column;padding:var(--space-6);transform:translateZ(18px)} .product-showcase-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:var(--space-4)} .product-showcase-category{color:var(--product-accent);font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase} .product-showcase-status{ border:1px solid color-mix(in srgb,var(--product-accent) 78%,transparent);border-radius:999px;padding:3px 9px; color:var(--product-accent);font-size:.61rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase; } .product-showcase-body h3{font-size:1.65rem;margin-bottom:var(--space-3)} .product-showcase-body p{font-size:.9rem;line-height:1.7;color:var(--text-muted)} .product-showcase-actions{margin-top:auto;padding-top:var(--space-6);display:flex;align-items:center;flex-wrap:wrap;gap:.9rem} .product-showcase-link{ display:flex;align-items:center;gap:6px;width:max-content; color:var(--product-accent);font-size:.86rem;font-weight:700;transition:gap .18s ease; } .product-showcase-link:hover{gap:11px}.product-showcase-link:focus-visible{outline:2px solid var(--product-accent);outline-offset:4px} .product-showcase-link-live{color:var(--text-heading)} [data-theme="light"] .product-showcase-link-live{color:#111827} .product-mini{position:relative;width:88%;height:190px} .product-mini-witibill{display:flex;align-items:center;justify-content:center} .mini-machine,.mini-rack,.mini-gateway{position:relative;z-index:2;display:flex;border:1px solid rgba(255,255,255,.18);background:rgba(12,12,12,.86)} .mini-machine,.mini-rack{width:60px;height:104px;border-radius:7px;flex-direction:column;gap:7px;padding:10px 8px} .mini-machine i,.mini-rack i{display:block;height:14px;border:1px solid rgba(255,255,255,.1);border-radius:3px;background:rgba(255,255,255,.035)} .mini-machine i:nth-child(2){background:rgba(255,51,51,.18);border-color:rgba(255,51,51,.7)} .mini-rack i::before{content:'';display:block;width:5px;height:5px;margin:4px;border-radius:50%;background:#30d158;box-shadow:0 0 7px rgba(48,209,88,.8);animation:miniLed 2s ease-in-out infinite} .mini-gateway{width:78px;height:44px;align-items:center;justify-content:center;border-color:var(--product-accent);border-radius:7px;color:var(--product-accent);font:700 11px ui-monospace,monospace;letter-spacing:.18em;box-shadow:0 0 18px color-mix(in srgb,var(--product-accent) 34%,transparent)} .mini-gateway span{position:absolute;right:8px;top:8px;width:5px;height:5px;border-radius:50%;background:var(--product-accent);animation:miniLed 1.4s ease-in-out infinite} .mini-flow{position:relative;z-index:1;width:64px;height:2px;background:repeating-linear-gradient(90deg,var(--product-accent) 0 5px,transparent 5px 14px);filter:drop-shadow(0 0 5px var(--product-accent));animation:miniFlow 1.6s linear infinite} .product-mini-emi{display:flex;align-items:center;justify-content:center} .mini-company{position:absolute;left:10px;width:48px;height:36px;display:grid;place-items:center;border:1px solid rgba(14,165,164,.5);border-radius:6px;color:#0ea5a4;background:rgba(14,165,164,.06);font:700 11px ui-monospace,monospace} .company-a{top:16px}.company-b{top:76px}.company-c{top:136px} .mini-emi-line{position:absolute;left:58px;width:116px;height:1px;background:linear-gradient(90deg,rgba(14,165,164,.12),#0ea5a4);transform-origin:left;animation:emiConverge 2.4s ease-in-out infinite} .line-a{top:34px;transform:rotate(24deg)}.line-b{top:94px}.line-c{top:154px;transform:rotate(-24deg)} .mini-emi-hub{position:absolute;left:172px;width:82px;height:92px;display:grid;place-items:center;border:1px solid #0ea5a4;border-radius:9px;background:rgba(14,165,164,.08);color:#0ea5a4;box-shadow:0 0 24px rgba(14,165,164,.18)} .mini-emi-hub img{width:48px;height:48px;animation:emiLogoBreathe 2.4s ease-in-out infinite} .mini-emi-hub span{display:block;margin-top:-8px;color:var(--text-muted);font:700 7px ui-monospace,monospace;letter-spacing:.14em} .mini-dian{position:absolute;right:0;bottom:20px;padding:6px 9px;border:1px solid rgba(250,204,21,.55);border-radius:5px;color:#facc15;font:700 9px ui-monospace,monospace;animation:dianStamp 2.4s cubic-bezier(.16,1,.3,1) infinite} .mini-dian b{font-size:13px} .product-mini-kova{display:grid;place-items:center} .mini-kova-halo{position:absolute;width:144px;height:144px;border-radius:50%;background:radial-gradient(circle,rgba(0,109,119,.24),transparent 68%);animation:kovaHalo 2.8s ease-in-out infinite} .mini-kova-card{position:relative;width:172px;height:104px;border:1px solid rgba(0,109,119,.9);border-radius:14px;background:linear-gradient(135deg,rgba(0,109,119,.18),rgba(255,255,255,.035));box-shadow:0 0 30px rgba(0,109,119,.18);animation:kovaCard 2.8s cubic-bezier(.16,1,.3,1) infinite} .mini-kova-logo{position:absolute;left:14px;top:14px;width:42px;height:42px;border-radius:9px;opacity:.95;filter:drop-shadow(0 0 6px rgba(0,109,119,.45))} .mini-kova-face{display:none} .mini-kova-lines{position:absolute;left:72px;top:32px;width:62px;height:24px;background:repeating-linear-gradient(180deg,rgba(255,255,255,.4) 0 2px,transparent 2px 10px)} .mini-kova-qr{position:absolute;right:16px;bottom:14px;width:22px;height:22px;border:3px dotted rgba(208,168,79,.85);border-radius:3px} .mini-kova-check{position:absolute;right:24px;top:20px;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#006d77;color:#fff;font-size:22px;font-weight:800;box-shadow:0 0 20px rgba(0,109,119,.7);animation:kovaDecision 2.8s cubic-bezier(.16,1,.3,1) infinite} @keyframes miniFlow{to{background-position:28px 0}} @keyframes miniLed{50%{opacity:.3;transform:scale(.75)}} @keyframes emiConverge{0%,18%{opacity:.2;scale:.55 1}42%,100%{opacity:1;scale:1 1}} @keyframes emiLogoBreathe{50%{opacity:1;transform:scale(1.06)}} @keyframes dianStamp{0%,45%{opacity:0;transform:scale(.75)}62%,100%{opacity:1;transform:scale(1)}} @keyframes kovaHalo{50%{opacity:.48;transform:scale(.86)}} @keyframes kovaCard{0%,16%{opacity:.45;transform:scale(.92)}34%,100%{opacity:1;transform:scale(1)}} @keyframes kovaDecision{0%,46%{opacity:0;transform:scale(.45)}64%,100%{opacity:1;transform:scale(1)}} .capabilities-section{background:rgba(255,255,255,.012)} .capabilities-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4)} .capability-card{ min-height:230px;padding:var(--space-6);border:1px solid var(--glass-border);border-radius:14px;background:var(--surface); transition:transform .22s cubic-bezier(.2,.8,.2,1),border-color .22s ease,box-shadow .22s ease; } .capability-card:hover{transform:translateY(-5px);border-color:rgba(255,51,51,.65);box-shadow:0 12px 36px rgba(255,51,51,.08)} .capability-index{display:block;margin-bottom:var(--space-6);color:var(--accent);font:700 .68rem ui-monospace,monospace;letter-spacing:.16em} .capability-icon{display:grid;place-items:center;width:48px;height:48px;margin-bottom:var(--space-4);border:1px solid rgba(255,51,51,.26);border-radius:12px;background:rgba(255,51,51,.06);color:var(--accent);font-size:1.5rem;transition:transform .22s ease} .capability-card:hover .capability-icon{transform:rotate(-6deg) scale(1.08)} .capability-card h3{font-size:1.04rem;margin-bottom:var(--space-3)} .capability-card p{font-size:.86rem;line-height:1.65;color:var(--text-muted)} .process-section{background:transparent} .process-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4);position:relative} .process-card{padding:var(--space-6);min-height:264px} .process-card-desc{line-height:1.65} .contact-section{padding-bottom:140px} .contact-direct{max-width:820px;margin:var(--space-12) auto 0;text-align:center;padding:clamp(32px,6vw,64px)} .contact-direct-label{display:block;margin-bottom:var(--space-3);color:var(--accent);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase} .contact-direct-email{display:inline-block;margin-bottom:var(--space-3);color:var(--text);font-size:clamp(1.8rem,5vw,3.8rem);font-weight:900;letter-spacing:-.05em;transition:color .2s ease} .contact-direct-email:hover{color:var(--accent)} .contact-direct p{margin-bottom:var(--space-6)} .contact-direct .btn{margin:0 auto} @media(max-width:1050px){ .hero-technology-layout{grid-template-columns:1fr;gap:0;padding-top:calc(var(--nav-h) + var(--space-12))} .hero-technology-copy{max-width:760px;margin:0 auto;text-align:center} .hero-technology-title{text-align:center} .hero-technology .hero-subtitle{margin-left:auto;margin-right:auto} .hero-technology .hero-actions{justify-content:center} .hero-tech-stage{min-height:360px;max-width:680px;width:100%;margin:0 auto} .product-showcase-grid{gap:var(--space-4)} .capabilities-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .process-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:768px){ .hero-technology{padding-top:calc(var(--nav-h) + var(--space-12));min-height:auto} .hero-technology-layout{display:block;padding-top:0} .hero-technology-title{font-size:clamp(2.8rem,13vw,4.5rem)} .hero-tech-stage{min-height:290px;margin-top:var(--space-6)} .proof-strip-grid{grid-template-columns:repeat(2,1fr)} .proof-strip-item:nth-child(2){border-right:0} .proof-strip-item:nth-child(-n+2){border-bottom:1px solid var(--glass-border)} .product-showcase-grid{grid-template-columns:1fr} .product-showcase-card{min-height:450px;transform:none} .product-showcase-card:hover{transform:none} .product-showcase-visual{min-height:205px} .capabilities-grid{grid-template-columns:1fr} .capability-card{min-height:unset} } @media(max-width:480px){ .hero-tech-stage{min-height:230px} .hero-tech-svg{width:118%;max-width:none} .proof-strip-item{padding:16px 10px;font-size:.66rem;letter-spacing:.06em} .product-showcase-body h3{font-size:1.45rem} .product-showcase-meta{align-items:flex-start;flex-direction:column} .contact-direct-email{font-size:clamp(1.42rem,7.2vw,2.2rem)} } /* ============================================================================= LIGHT MODE — Atenuación de glows fluorescentes y recuperación de fondo Resuelve: "en modo claro se ve muy brillante, blanco enseguesedor, no se ve fondo". Aplica overrides puntuales en lugar de tocar la base oscura. ============================================================================= */ [data-theme="light"] body{ background: radial-gradient(ellipse at 50% -10%, #EAEDF2 0%, #F4F5F7 38%, #EEF0F4 100%) !important; background-attachment: fixed !important; } /* Hero: el grid y los orbes en light deben dibujarse en tinta, no en blanco */ [data-theme="light"] .hero-grid{ background-image: linear-gradient(rgba(0,0,0,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.045) 1px, transparent 1px); } [data-theme="light"] .orb-1{background:radial-gradient(circle,rgba(255,51,51,0.16) 0%,transparent 70%)} [data-theme="light"] .orb-2{background:radial-gradient(circle,rgba(15,15,35,0.10) 0%,transparent 70%)} [data-theme="light"] .orb-3{background:radial-gradient(circle,rgba(255,51,51,0.10) 0%,transparent 70%)} [data-theme="light"] .hero-section::before{ background: radial-gradient(circle at 50% 30%, rgba(255,51,51,0.10), transparent 65%); } /* Hero technology SVG: trazos y rect más oscuros en light para que se vean */ [data-theme="light"] .hero-tech-rail{stroke:rgba(0,0,0,0.18)} [data-theme="light"] .hero-tech-glow{opacity:0.25} [data-theme="light"] .hero-tech-core rect{fill:#FFFFFF;stroke:rgba(0,0,0,0.18);filter:drop-shadow(0 6px 18px rgba(255,51,51,0.12))} [data-theme="light"] .hero-tech-node rect{fill:#FFFFFF;stroke:rgba(0,0,0,0.14);filter:drop-shadow(0 4px 12px rgba(0,0,0,0.05))} /* Proof-strip y bordes: subir contraste de las hairlines en light */ [data-theme="light"] .proof-strip{border-top:1px solid rgba(0,0,0,0.08);border-bottom:1px solid rgba(0,0,0,0.08)} [data-theme="light"] .proof-strip-item{border-right:1px solid rgba(0,0,0,0.06)} /* Cards principales: reforzar borde y sombra suave en lugar de glow rojo */ [data-theme="light"] .glass-card, [data-theme="light"] .product-showcase-card, [data-theme="light"] .capability-card, [data-theme="light"] .process-card{ background:#FFFFFF; border-color:rgba(15,15,30,0.10); box-shadow:0 1px 0 rgba(15,15,30,0.04),0 14px 32px rgba(15,15,30,0.06); } [data-theme="light"] .product-showcase-card:hover, [data-theme="light"] .capability-card:hover{ box-shadow:0 1px 0 rgba(15,15,30,0.04),0 18px 40px rgba(15,15,30,0.10); border-color:rgba(15,15,30,0.16); } [data-theme="light"] .product-showcase-visual{ background:linear-gradient(180deg,#F7F8FA,#EEF0F4); border:1px solid rgba(15,15,30,0.06); } /* Botones primarios: atenuar la sombra fluorescente roja */ [data-theme="light"] .btn-primary{ box-shadow:0 8px 22px rgba(255,51,51,0.18); } [data-theme="light"] .btn-primary:hover{ box-shadow:0 12px 28px rgba(255,51,51,0.26); } /* Mini animaciones de productos: bajar glows en light */ [data-theme="light"] .mini-machine, [data-theme="light"] .mini-rack{background:rgba(15,15,30,0.04);border-color:rgba(15,15,30,0.14)} [data-theme="light"] .mini-machine i, [data-theme="light"] .mini-rack i{background:rgba(15,15,30,0.05);border-color:rgba(15,15,30,0.10)} [data-theme="light"] .mini-gateway{background:rgba(255,255,255,0.92);box-shadow:0 0 12px rgba(255,51,51,0.18)} [data-theme="light"] .mini-emi-hub{background:rgba(255,255,255,0.92);box-shadow:0 0 18px rgba(14,165,164,0.18)} [data-theme="light"] .mini-emi-line{background:linear-gradient(90deg,rgba(14,165,164,0.18),#0ea5a4)} [data-theme="light"] .mini-kova-halo{background:radial-gradient(circle,rgba(0,109,119,0.18),transparent 68%)} [data-theme="light"] .mini-kova-card{background:linear-gradient(135deg,rgba(0,109,119,0.10),rgba(255,255,255,0.85));border-color:rgba(0,109,119,0.6);box-shadow:0 0 22px rgba(0,109,119,0.14)} [data-theme="light"] .mini-kova-lines{background:repeating-linear-gradient(180deg,rgba(0,109,119,0.35) 0 2px,transparent 2px 10px)} [data-theme="light"] .mini-kova-check{box-shadow:0 0 14px rgba(0,109,119,0.34)} [data-theme="light"] .mini-kova-logo{filter:drop-shadow(0 0 4px rgba(0,109,119,0.35))} [data-theme="light"] .mini-dian{background:rgba(255,255,255,0.92);border-color:rgba(202,138,4,0.55);color:#A16207} /* Páginas de producto WitiBill / EMI / KOVA: atenuar el aura roja del hero para que no parezca neón sobre blanco. */ [data-theme="light"] .wb-hero::before{ background: radial-gradient(circle at 50% 40%, rgba(255,51,51,0.08), transparent 44%), linear-gradient(rgba(0,0,0,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.045) 1px, transparent 1px) !important; } [data-theme="light"] .wb-story-sticky{background:radial-gradient(circle at center,rgba(255,51,51,0.05),transparent 60%)} [data-theme="light"] .wb-preview-node{background:#FFFFFF;border-color:rgba(15,15,30,0.10);box-shadow:0 8px 22px rgba(15,15,30,0.06)} [data-theme="light"] .wb-preview-node.is-hot{box-shadow:0 8px 22px rgba(255,51,51,0.12)} [data-theme="light"] .wb-proof-card, [data-theme="light"] .wb-architecture, [data-theme="light"] .wb-audience-chips span{background:#FFFFFF;border-color:rgba(15,15,30,0.10)} [data-theme="light"] .wb-architecture-grid article{background:#FFFFFF} [data-theme="light"] .wb-final-cta{background:radial-gradient(circle at center,rgba(255,51,51,0.08),transparent 52%)} [data-theme="light"] .wb-next-product{background:#F7F8FA} [data-theme="light"] .wb-next-product:hover{background:#EEF0F4} [data-theme="light"] .wb-dashboard{background:#FFFFFF;border-color:rgba(255,51,51,0.18);box-shadow:0 18px 40px rgba(15,15,30,0.08)} [data-theme="light"] .wb-dashboard-row{background:#F7F8FA;border-color:rgba(15,15,30,0.08)} [data-theme="light"] .emi-hero::before{ background:radial-gradient(circle at 40% 30%,rgba(14,165,164,0.10),transparent 55%) !important; } [data-theme="light"] .emi-story-sticky{background:radial-gradient(circle at center,rgba(14,165,164,0.06),transparent 60%)} [data-theme="light"] .emi-proof-card, [data-theme="light"] .emi-architecture, [data-theme="light"] .emi-modules-grid > article, [data-theme="light"] .emi-audience-chips span{background:#FFFFFF;border-color:rgba(15,15,30,0.10)} [data-theme="light"] .emi-architecture-grid article{background:#FFFFFF} [data-theme="light"] .emi-final-cta{background:radial-gradient(circle at center,rgba(14,165,164,0.10),transparent 52%)} [data-theme="light"] .emi-next-product{background:#F7F8FA} [data-theme="light"] .kova-hero::before{ background: radial-gradient(circle at 60% 40%, rgba(0,109,119,0.14), transparent 46%), radial-gradient(circle at 18% 75%, rgba(208,168,79,0.06), transparent 38%) !important; } [data-theme="light"] .kova-story-sticky{background:radial-gradient(circle at 50% 60%,rgba(0,109,119,0.05),transparent 60%)} [data-theme="light"] .kova-proof-card, [data-theme="light"] .kova-face-card, [data-theme="light"] .kova-architecture, [data-theme="light"] .kova-architecture-grid article{background:#FFFFFF;border-color:rgba(15,15,30,0.10)} [data-theme="light"] .kova-final-cta{background:radial-gradient(circle at center,rgba(0,109,119,0.10),transparent 52%)} [data-theme="light"] .kova-next-product{background:#F7F8FA} [data-theme="light"] .kova-primary{box-shadow:0 0 0 1px rgba(255,51,51,0.4) inset,0 12px 28px rgba(0,76,84,0.22)} [data-theme="light"] .kova-hero-card{background:rgba(255,255,255,0.96);border-color:rgba(0,109,119,0.18);box-shadow:0 24px 60px rgba(15,15,30,0.10)} [data-theme="light"] .kova-hero-preview span{background:rgba(255,255,255,0.92);border-color:rgba(15,15,30,0.10)} [data-theme="light"] .k-card{background:rgba(255,255,255,0.96);border-color:rgba(0,109,119,0.20);box-shadow:0 22px 56px rgba(15,15,30,0.10)} [data-theme="light"] .k-document, [data-theme="light"] .k-gate, [data-theme="light"] .k-audit{background:#FFFFFF;border-color:rgba(15,15,30,0.10);box-shadow:0 18px 40px rgba(15,15,30,0.08)} [data-theme="light"] .k-ticket{background:rgba(0,109,119,0.06);border-color:rgba(0,109,119,0.45)} /* Logo theme swap — usado por hero, mini home y catálogo */ .product-mark--dark{display:none} [data-theme="dark"] .product-mark--light{display:none} [data-theme="dark"] .product-mark--dark{display:block} /* ============================================================================= FASE 9 — Pulido premium (microinteracciones útiles) - Mask reveal de títulos de sección al entrar en viewport. - Hairline conector debajo del proceso, traza con scroll. - Spotlight reactivo en capability cards (desktop only). ============================================================================= */ .section-header.reveal .section-title{ clip-path:inset(0 100% 0 0); transition:clip-path 1.05s cubic-bezier(.16,1,.3,1) .15s, opacity .6s ease; } .section-header.reveal.visible .section-title{clip-path:inset(0)} .process-grid{position:relative} .process-grid::before{ content:"";position:absolute;left:6%;right:6%;top:42px;height:1px; background:linear-gradient(90deg,transparent,var(--accent),transparent); opacity:.35;transform:scaleX(0);transform-origin:left center; transition:transform 1.4s cubic-bezier(.4,0,.2,1) .2s; pointer-events:none;z-index:0; } .process-grid.is-traced::before{transform:scaleX(1)} .process-card{position:relative;z-index:1} .capability-card{position:relative;overflow:hidden} .capability-card::after{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(255,51,51,.10),transparent 60%); opacity:0;transition:opacity .25s ease; } .capability-card:hover::after{opacity:1} @media(prefers-reduced-motion:reduce){ *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} .animate-fade-up,.animate-slide-up,.reveal,.tech-card-reveal{opacity:1!important;transform:none!important} .product-showcase-card{transform:none!important} }