/*! * © 2026 Codice Vinci. Všechna práva vyhrazena. * Tento kód je duševním vlastnictvím společnosti Codice Vinci. * Neoprávněné kopírování tohoto souboru jakýmkoli médiem je přísně zakázáno. * Vlastní a důvěrné. */ /* ================================================ EKOZINK Praha s.r.o. – Design System Industrial Premium Dark Theme ================================================ */ /* ── Google Fonts: načítané přes v (viz build-pages.cjs) ── */ /* ── CSS Custom Properties ── */ :root { /* Zinc palette (dark mode base) */ --zinc-950: #18181b; --zinc-900: #27272a; --zinc-850: #1f1f23; --zinc-800: #3f3f46; --zinc-700: #52525b; --zinc-600: #71717a; --zinc-500: #8b8b94; --zinc-400: #a1a1aa; --zinc-300: #d4d4d8; --zinc-200: #e4e4e7; --zinc-100: #f4f4f5; --zinc-50: #fafafa; /* Teal accent (primary) */ --teal-700: #0f766e; --teal-600: #0d9488; --teal-500: #14b8a6; --teal-400: #2dd4bf; --teal-300: #5eead4; /* Emerald (eco secondary) */ --emerald-600: #059669; --emerald-500: #10b981; --emerald-400: #34d399; /* Functional */ --bg-primary: var(--zinc-950); --bg-secondary: var(--zinc-900); --bg-card: rgba(39, 39, 42, 0.6); --bg-card-hover: rgba(39, 39, 42, 0.85); --text-primary: var(--zinc-100); --text-secondary: var(--zinc-400); --text-muted: var(--zinc-500); --accent: var(--teal-500); --accent-hover: var(--teal-400); --accent-dark: var(--teal-600); --border-subtle: rgba(161, 161, 170, 0.1); --border-accent: rgba(20, 184, 166, 0.3); /* Gradients */ --gradient-hero: linear-gradient(135deg, var(--zinc-950) 0%, rgba(13, 148, 136, 0.15) 100%); --gradient-cta: linear-gradient(135deg, var(--teal-600) 0%, var(--emerald-600) 100%); --gradient-card: linear-gradient(145deg, rgba(39, 39, 42, 0.7) 0%, rgba(24, 24, 27, 0.9) 100%); /* Typography */ --font-display: 'Outfit', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; /* Spacing */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; --space-4xl: 6rem; --space-5xl: 8rem; /* Sizing */ --max-width: 1200px; --nav-height: 72px; --border-radius: 16px; --border-radius-sm: 10px; --border-radius-xs: 6px; /* Shadows */ --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.3); --shadow-hover: 0 16px 48px rgba(0, 0, 0, 0.4); --shadow-glow: 0 0 40px rgba(20, 184, 166, 0.15); /* Transitions */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-fast: 200ms; --duration-normal: 350ms; --duration-slow: 600ms; } /* ── Reset & Base ── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: var(--nav-height); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ::selection { background: rgba(20, 184, 166, 0.3); color: var(--zinc-50); } ::-moz-selection { background: rgba(20, 184, 166, 0.3); color: var(--zinc-50); } body { font-family: var(--font-body); font-size: 1rem; line-height: 1.7; color: var(--text-primary); background-color: var(--bg-primary); overflow-x: hidden; min-height: 100vh; } img { max-width: 100%; height: auto; display: block; } a { color: var(--accent); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); } a:hover { color: var(--accent-hover); } /* ── Typography ── */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; line-height: 1.2; color: var(--text-primary); } h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 800; letter-spacing: -0.02em; } h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 700; letter-spacing: -0.01em; } h3 { font-size: 1.25rem; font-weight: 600; } h4 { font-size: 1.125rem; font-weight: 600; } .text-gradient { background: linear-gradient(135deg, var(--teal-400), var(--emerald-400)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .subtitle { font-size: 1.125rem; color: var(--text-secondary); max-width: 600px; line-height: 1.8; } .section-label { font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; color: var(--accent); margin-bottom: var(--space-md); display: flex; align-items: center; gap: var(--space-sm); } .section-label::before { content: ''; display: inline-block; width: 24px; height: 2px; background: var(--accent); border-radius: 1px; } /* ── Layout ── */ .container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-xl); } .section { padding: var(--space-5xl) 0; position: relative; } .section--compact { padding: var(--space-3xl) 0; } /* ── Navigation ── */ .nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-height); z-index: 1000; transition: all var(--duration-normal) var(--ease-out); } .nav::before { content: ''; position: absolute; inset: 0; background: rgba(24, 24, 27, 0.72); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border-bottom: 1px solid rgba(20, 184, 166, 0.06); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2); opacity: 0; transition: opacity var(--duration-normal) var(--ease-out); } .nav.scrolled::before { opacity: 1; } .nav__inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; height: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-xl); } .nav__logo { display: flex; align-items: center; gap: var(--space-sm); text-decoration: none; color: var(--text-primary); } .nav__logo-icon { width: 40px; height: 40px; background: var(--gradient-cta); border-radius: var(--border-radius-xs); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1rem; font-family: var(--font-display); color: white; letter-spacing: -0.03em; } .nav__logo-text { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--accent); } .nav__logo-sub { font-size: 0.65rem; font-weight: 400; color: #ffffff; text-transform: uppercase; letter-spacing: 0.12em; display: block; margin-top: -2px; } .nav__links { display: flex; align-items: center; gap: var(--space-xs); list-style: none; } .nav__link { position: relative; padding: var(--space-sm) var(--space-md); color: var(--text-secondary); font-size: 0.9rem; font-weight: 500; border-radius: var(--border-radius-xs); transition: all var(--duration-fast) var(--ease-out); cursor: pointer; -webkit-tap-highlight-color: transparent; } .nav__link.active { color: var(--accent); background: rgba(255, 255, 255, 0.05); } /* Hover only on devices that truly hover — prevents the highlight from "sticking" on the Úvod/home item after a tap on touchscreens */ @media (hover: hover) { .nav__link:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.05); } } /* Dropdown */ .nav__dropdown { position: relative; } .nav__dropdown-toggle { display: flex; align-items: center; gap: 4px; } .nav__dropdown-toggle::after { content: ''; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid currentColor; transition: transform var(--duration-fast) var(--ease-out); } .nav__dropdown:hover .nav__dropdown-toggle::after { transform: rotate(180deg); } .nav__dropdown-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px); min-width: 260px; background: rgba(31, 31, 35, 0.95); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid var(--border-subtle); border-radius: var(--border-radius-sm); padding: var(--space-sm); opacity: 0; visibility: hidden; transition: all var(--duration-normal) var(--ease-out); box-shadow: var(--shadow-card); list-style: none; } .nav__dropdown:hover .nav__dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .nav__dropdown-item a { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-sm) var(--space-md); color: var(--text-secondary); font-size: 0.875rem; font-weight: 500; border-radius: var(--border-radius-xs); transition: all var(--duration-fast) var(--ease-out); text-decoration: none; } @media (hover: hover) { .nav__dropdown-item a:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.05); } } .nav__dropdown-item .icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--border-radius-xs); background: rgba(20, 184, 166, 0.1); color: var(--accent); font-size: 1rem; flex-shrink: 0; } .nav__cta { padding: var(--space-sm) var(--space-lg) !important; background: var(--gradient-cta) !important; color: white !important; border-radius: var(--border-radius-xs) !important; font-weight: 600 !important; transition: all var(--duration-fast) var(--ease-out) !important; } .nav__cta:hover { box-shadow: 0 4px 20px rgba(20, 184, 166, 0.3) !important; transform: translateY(-1px) !important; } /* Mobile hamburger */ .nav__hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: var(--space-sm); z-index: 100; background: none; border: none; } .nav__hamburger span { width: 24px; height: 2px; background: var(--text-primary); border-radius: 2px; transition: all var(--duration-normal) var(--ease-out); } .nav__hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .nav__hamburger.active span:nth-child(2) { opacity: 0; } .nav__hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* ── Hero Section ── */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; background: var(--gradient-hero); padding-top: calc(var(--nav-height) + 2rem); } /* Ambient glow orbs */ .hero::after { content: ''; position: absolute; top: 15%; left: -5%; width: 450px; height: 450px; background: radial-gradient(circle, rgba(20, 184, 166, 0.08) 0%, transparent 70%); filter: blur(60px); pointer-events: none; z-index: 0; animation: glowPulse 8s ease-in-out infinite alternate; } .hero__canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.5; z-index: 0; } .hero__content { position: relative; z-index: 2; max-width: 750px; } .hero__badge { display: inline-flex; align-items: center; gap: var(--space-sm); padding: 6px 16px; background: rgba(20, 184, 166, 0.1); border: 1px solid var(--border-accent); border-radius: 100px; font-size: 0.8rem; font-weight: 600; color: var(--accent); margin-bottom: var(--space-xl); animation: fadeInUp 0.8s var(--ease-out) 0.2s both; } .hero__badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse 2s ease-in-out infinite; } .hero__title { margin-bottom: var(--space-lg); animation: fadeInUp 0.8s var(--ease-out) 0.4s both; } .hero__subtitle { font-size: 1.2rem; color: var(--text-secondary); line-height: 1.8; margin-bottom: var(--space-2xl); max-width: 560px; animation: fadeInUp 0.8s var(--ease-out) 0.6s both; } .hero__actions { display: flex; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-3xl); animation: fadeInUp 0.8s var(--ease-out) 0.8s both; } .hero__stats { display: flex; gap: var(--space-3xl); animation: fadeInUp 0.8s var(--ease-out) 1s both; } .hero__stat { text-align: left; } .hero__stat-value { font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: var(--text-primary); letter-spacing: -0.02em; } .hero__stat-label { font-size: 0.8rem; color: var(--text-secondary); font-weight: 500; } /* Hero Dynamic Reactor */ .hero__reactor { position: absolute; right: 5%; top: 50%; transform: translateY(-50%); width: 480px; height: 480px; z-index: 1; pointer-events: none; perspective: 1200px; transform-style: preserve-3d; } /* Central Core */ .hero__reactor-core { position: absolute; top: 50%; left: 50%; width: 240px; height: 240px; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; z-index: 10; } .hero__reactor-core-glow { position: absolute; inset: -20px; border-radius: 50%; background: radial-gradient(circle, rgba(20, 184, 166, 0.4) 0%, transparent 70%); filter: blur(15px); animation: corePulse 4s ease-in-out infinite alternate; } .hero__reactor-core-inner { position: relative; width: 180px; height: 180px; background: rgba(9, 9, 11, 0.8); border: 2px solid rgba(20, 184, 166, 0.5); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 0 30px rgba(20, 184, 166, 0.3), inset 0 0 20px rgba(20, 184, 166, 0.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .hero__reactor-core-symbol { font-family: var(--font-display); font-size: 5.5rem; font-weight: 800; color: #fff; line-height: 1; text-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 0 0 20px var(--teal-400); animation: textGlowPulse 2s ease-in-out infinite alternate; } .hero__reactor-core-label { font-family: var(--font-body); font-size: 0.9rem; color: var(--teal-400); letter-spacing: 0.15em; margin-top: 4px; font-weight: 600; } @keyframes corePulse { 0% { transform: scale(0.9); opacity: 0.6; } 100% { transform: scale(1.1); opacity: 1; } } @keyframes textGlowPulse { 0% { text-shadow: 0 0 10px rgba(255, 255, 255, 0.3), 0 0 20px var(--teal-600); transform: scale(0.95); } 100% { text-shadow: 0 0 15px rgba(255, 255, 255, 0.8), 0 0 30px var(--teal-300), 0 0 40px var(--teal-400); transform: scale(1.05); } } /* Rotating Energy Rings */ .hero__reactor-ring { position: absolute; top: 50%; left: 50%; border-radius: 50%; transform-style: preserve-3d; border: 1px solid rgba(20, 184, 166, 0.1); } /* Comet tails using pseudo elements and conic gradients */ .hero__reactor-ring::before { content: ''; position: absolute; inset: -2px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 70%, rgba(20, 184, 166, 0.8) 100%); mask: radial-gradient(transparent 48%, black 50%); -webkit-mask: radial-gradient(transparent 48%, black 50%); z-index: 1; } /* The comet head */ .hero__reactor-comet { position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; background: #fff; border-radius: 50%; box-shadow: 0 0 15px 4px var(--teal-400), 0 0 30px 8px var(--teal-500); transform: translateX(-50%); z-index: 2; } .hero__reactor-ring--1 { width: 280px; height: 280px; margin: -140px 0 0 -140px; animation: ringSpin 15s linear infinite; } .hero__reactor-ring--2 { width: 360px; height: 360px; margin: -180px 0 0 -180px; animation: ringSpin 25s linear infinite reverse; } .hero__reactor-ring--2::before { background: conic-gradient(from 0deg, transparent 70%, rgba(16, 185, 129, 0.6) 100%); } .hero__reactor-ring--2 .hero__reactor-comet { box-shadow: 0 0 15px 4px var(--emerald-400), 0 0 30px 8px var(--emerald-500); } .hero__reactor-ring--3 { width: 440px; height: 440px; margin: -220px 0 0 -220px; animation: ringSpin 40s linear infinite; border-style: dashed; } @keyframes ringSpin { 100% { transform: rotate(360deg); } } /* Floating Stage Nodes */ .hero__reactor-node { position: absolute; width: 80px; height: 80px; background: rgba(20, 184, 166, 0.05); border: 1px solid rgba(20, 184, 166, 0.2); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 10px 30px -10px rgba(20, 184, 166, 0.3), inset 0 1px 0 rgba(20, 184, 166, 0.4); z-index: 20; animation: nodeFloat 6s ease-in-out infinite; } .hero__reactor-node::before { content: ''; position: absolute; inset: -1px; border-radius: 50%; padding: 1px; background: linear-gradient(180deg, rgba(20, 184, 166, 0.5), transparent); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; opacity: 0.5; } .hero__reactor-node-icon { font-size: 1.5rem; filter: drop-shadow(0 0 8px rgba(20, 184, 166, 0.6)); margin-bottom: 4px; } .hero__reactor-node-text { font-family: var(--font-body); font-size: 0.5rem; font-weight: 600; color: var(--zinc-300); letter-spacing: 0.1em; text-transform: uppercase; } /* Positioning the nodes - Flow layout */ .hero__reactor-node--1 { top: 35%; left: 0; animation-delay: 0s; } .hero__reactor-node--2 { top: 80%; left: 50%; margin-left: -40px; animation-delay: -1.3s; } .hero__reactor-node--3 { top: 25%; right: 0; animation-delay: -2.6s; } @keyframes nodeFloat { 0%, 100% { transform: translateY(0) scale(1) rotate(0deg); box-shadow: 0 10px 30px -10px rgba(20, 184, 166, 0.3), inset 0 1px 0 rgba(20, 184, 166, 0.4); } 33% { transform: translateY(-12px) scale(1.05) rotate(3deg); box-shadow: 0 15px 40px -5px rgba(20, 184, 166, 0.5), inset 0 2px 5px rgba(20, 184, 166, 0.6); } 66% { transform: translateY(-5px) scale(0.97) rotate(-2deg); box-shadow: 0 8px 20px -8px rgba(20, 184, 166, 0.2), inset 0 1px 2px rgba(20, 184, 166, 0.3); } } /* ── Page Hero (Subpages) ── */ .page-hero { padding: calc(var(--nav-height) + var(--space-4xl)) 0 var(--space-3xl); background: var(--gradient-hero); position: relative; overflow: hidden; } .page-hero::before { content: ''; position: absolute; top: 0; right: -200px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(20, 184, 166, 0.08) 0%, transparent 70%); pointer-events: none; } .breadcrumb { display: flex; align-items: center; gap: var(--space-sm); font-size: 0.85rem; color: var(--text-secondary); margin-bottom: var(--space-lg); } .breadcrumb a { color: var(--text-secondary); transition: color var(--duration-fast) var(--ease-out); } .breadcrumb a:hover { color: var(--accent); } .breadcrumb .separator { color: var(--zinc-700); } .page-hero__title { margin-bottom: var(--space-md); } .page-hero__subtitle { font-size: 1.125rem; color: var(--text-secondary); max-width: 600px; line-height: 1.8; } /* ── Buttons ── */ .btn { display: inline-flex; align-items: center; gap: var(--space-sm); padding: 14px 28px; font-family: var(--font-body); font-size: 0.9rem; font-weight: 600; border-radius: var(--border-radius-sm); border: none; cursor: pointer; transition: all var(--duration-normal) var(--ease-out); text-decoration: none; white-space: nowrap; } .btn--primary { background: var(--gradient-cta); color: white; box-shadow: 0 4px 16px rgba(20, 184, 166, 0.25); position: relative; overflow: hidden; z-index: 1; } .btn--primary::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.15) 50%, transparent 70%); transform: translateX(-100%); transition: transform 0.6s ease; z-index: -1; } .btn--primary:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(20, 184, 166, 0.4), 0 0 20px rgba(20, 184, 166, 0.1); color: white; } .btn--primary:hover::after { transform: translateX(100%); } .btn--secondary { background: rgba(255, 255, 255, 0.06); color: var(--text-primary); border: 1px solid var(--border-subtle); } .btn--secondary:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--border-accent); color: var(--text-primary); transform: translateY(-2px); } .btn--ghost { background: transparent; color: var(--accent); padding: 14px 0; } .btn--ghost:hover { color: var(--accent-hover); } .btn .arrow { transition: transform var(--duration-fast) var(--ease-out); } .btn:hover .arrow { transform: translateX(4px); } .btn svg { width: 18px; height: 18px; flex-shrink: 0; } /* ── Cards ── */ .card { background: var(--gradient-card); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border-subtle); border-radius: var(--border-radius); padding: var(--space-2xl); transition: all var(--duration-normal) var(--ease-out); position: relative; overflow: hidden; } .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--border-accent), transparent); opacity: 0; transition: opacity var(--duration-normal) var(--ease-out); } .card:hover { border-color: rgba(20, 184, 166, 0.25); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 40px rgba(20, 184, 166, 0.08), inset 0 1px 0 rgba(20, 184, 166, 0.1); transform: translateY(-8px); } .card:hover::before { opacity: 1; } .card__icon { width: 56px; height: 56px; border-radius: var(--border-radius-sm); background: rgba(20, 184, 166, 0.1); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-lg); color: var(--accent); font-size: 1.5rem; transition: all var(--duration-normal) var(--ease-out); } .card:hover .card__icon { background: rgba(20, 184, 166, 0.2); transform: scale(1.05); } .card__title { font-size: 1.2rem; font-weight: 600; margin-bottom: var(--space-md); } .card__text { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.7; margin-bottom: var(--space-lg); } .card__link { display: inline-flex; align-items: center; gap: var(--space-sm); font-size: 0.875rem; font-weight: 600; color: var(--accent); } .card__link:hover { color: var(--accent-hover); } .card__link .arrow { transition: transform var(--duration-fast) var(--ease-out); } .card__link:hover .arrow { transform: translateX(4px); } /* ── Bento Grid ── */ .bento-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); } .bento-grid--3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); } .bento-grid--4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); } /* ── Divider ── */ .divider { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--border-subtle), var(--border-accent), var(--border-subtle), transparent); margin: var(--space-3xl) 0; } /* ── Services Grid ── */ .services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); } /* ── Timeline ── */ .timeline { position: relative; padding-left: var(--space-3xl); } .timeline::before { content: ''; position: absolute; left: 11px; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, var(--accent), var(--emerald-500), var(--zinc-800)); } .timeline__item { position: relative; padding-bottom: var(--space-2xl); } .timeline__item:last-child { padding-bottom: 0; } .timeline__dot { position: absolute; left: calc(-1 * var(--space-3xl) + 4px); top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg-primary); box-shadow: 0 0 20px rgba(20, 184, 166, 0.5), 0 0 60px rgba(20, 184, 166, 0.15); } .timeline__year { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--accent); margin-bottom: var(--space-xs); } .timeline__text { color: var(--text-secondary); font-size: 0.95rem; } /* ── Spec Table ── */ .spec-table { width: 100%; border-collapse: collapse; margin: var(--space-lg) 0; } .spec-table th, .spec-table td { padding: var(--space-md) var(--space-lg); text-align: left; border-bottom: 1px solid var(--border-subtle); font-size: 0.9rem; } .spec-table th { color: var(--accent); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; background: rgba(20, 184, 166, 0.05); } .spec-table td { color: var(--text-secondary); } .spec-table tbody tr { transition: background var(--duration-fast) var(--ease-out); } .spec-table tbody tr:hover { background: rgba(255, 255, 255, 0.02); } /* ── Process Steps ── */ .process-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); position: relative; } .process-steps::before { content: ''; position: absolute; top: 40px; left: 15%; right: 15%; height: 2px; background: linear-gradient(90deg, var(--accent), var(--emerald-500)); opacity: 0.3; } .process-step { text-align: center; position: relative; } .process-step__number { width: 56px; height: 56px; border-radius: 50%; background: rgba(20, 184, 166, 0.1); border: 2px solid var(--accent); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-lg); font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--accent); position: relative; z-index: 1; } .process-step__title { font-weight: 600; margin-bottom: var(--space-sm); } .process-step__text { font-size: 0.9rem; color: var(--text-secondary); } /* ── CTA Band ── */ .cta-band { background: var(--gradient-cta); padding: var(--space-4xl) 0; text-align: center; position: relative; overflow: hidden; } .cta-band::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); opacity: 0.5; } .cta-band__content { position: relative; z-index: 1; } .cta-band h2 { color: white; margin-bottom: var(--space-md); } .cta-band p { color: rgba(255, 255, 255, 0.85); font-size: 1.125rem; margin-bottom: var(--space-2xl); } .cta-band .btn--primary { background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.3); } .cta-band .btn--primary:hover { background: rgba(255, 255, 255, 0.3); } .cta-band__actions { display: flex; gap: var(--space-lg); justify-content: center; flex-wrap: wrap; } /* ── Contact Form ── */ .contact-form { display: flex; flex-direction: column; gap: var(--space-lg); } .form-group { display: flex; flex-direction: column; gap: var(--space-sm); } .form-group label { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; } .form-input, .form-textarea, .form-select { padding: 14px 18px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-subtle); border-radius: var(--border-radius-xs); color: var(--text-primary); font-family: var(--font-body); font-size: 0.95rem; transition: all var(--duration-fast) var(--ease-out); outline: none; } .form-input:focus, .form-textarea:focus, .form-select:focus { border-color: var(--accent); background: rgba(20, 184, 166, 0.05); box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.1); } .form-textarea { resize: vertical; min-height: 150px; } .form-select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23a1a1aa' d='M6 8L0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; } .form-select option { background: var(--zinc-900); color: var(--text-primary); } /* ── Contact Info ── */ .contact-info-card { background: var(--gradient-card); backdrop-filter: blur(20px); border: 1px solid var(--border-subtle); border-radius: var(--border-radius); padding: var(--space-2xl); } .contact-item { display: flex; gap: var(--space-lg); padding: var(--space-lg) 0; border-bottom: 1px solid var(--border-subtle); } .contact-item:last-child { border-bottom: none; } .contact-item__icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--border-radius-xs); background: rgba(20, 184, 166, 0.1); display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: 1.2rem; } .contact-item__label { font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px; } .contact-item__value { font-size: 1rem; font-weight: 500; color: var(--text-primary); } .contact-item__value a { color: var(--text-primary); } .contact-item__value a:hover { color: var(--accent); } /* ── Map ── */ .map-container { border-radius: var(--border-radius); overflow: hidden; border: 1px solid var(--border-subtle); height: 400px; } .map-container iframe { width: 100%; height: 100%; border: 0; filter: grayscale(0.5) brightness(0.8) contrast(1.1); transition: filter var(--duration-normal) var(--ease-out); } .map-container:hover iframe { filter: grayscale(0) brightness(1) contrast(1); } /* ── Footer ── */ .footer { background: linear-gradient(180deg, var(--zinc-900) 0%, #111114 100%); border-top: 1px solid rgba(20, 184, 166, 0.08); padding: var(--space-4xl) 0 var(--space-xl); position: relative; } .footer::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 60%; height: 1px; background: linear-gradient(90deg, transparent, rgba(20, 184, 166, 0.3), transparent); } .footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-3xl); margin-bottom: var(--space-3xl); } .footer__brand p { color: var(--text-secondary); font-size: 0.9rem; margin-top: var(--space-md); max-width: 300px; } .footer__heading { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-primary); margin-bottom: var(--space-lg); } .footer__links { list-style: none; display: flex; flex-direction: column; gap: var(--space-sm); } .footer__links a { color: var(--text-secondary); font-size: 0.9rem; transition: color var(--duration-fast) var(--ease-out); } .footer__links a:hover { color: var(--accent); } .footer__bottom { padding-top: var(--space-xl); border-top: 1px solid var(--border-subtle); display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; color: var(--text-muted); } .footer__bottom a { color: var(--text-secondary); } .footer__bottom a:hover { color: var(--accent); } /* ── Animations ── */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } @keyframes slowRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes glowPulse { 0% { opacity: 0.5; transform: scale(1); } 100% { opacity: 1; transform: scale(1.15); } } /* Scroll reveal */ .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s var(--ease-out); } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 0.1s; } .reveal-delay-2 { transition-delay: 0.2s; } .reveal-delay-3 { transition-delay: 0.3s; } .reveal-delay-4 { transition-delay: 0.4s; } /* ── Split Layout ── */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3xl); align-items: start; } /* ── Feature List ── */ .feature-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-md); } .feature-list li { display: flex; align-items: flex-start; gap: var(--space-md); color: var(--text-secondary); font-size: 0.95rem; } .feature-list .check { color: var(--accent); font-size: 1.1rem; flex-shrink: 0; margin-top: 2px; } /* ── Divider ── */ .divider { width: 100%; height: 1px; background: var(--border-subtle); margin: var(--space-3xl) 0; } /* ── Chip tags ── */ .chip { display: inline-flex; align-items: center; gap: var(--space-xs); padding: 4px 12px; background: rgba(20, 184, 166, 0.1); border: 1px solid var(--border-accent); border-radius: 100px; font-size: 0.75rem; font-weight: 600; color: var(--accent); } /* ── Responsive ── */ @media (max-width: 1024px) { .bento-grid--3, .bento-grid--4 { grid-template-columns: repeat(2, 1fr); } .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); } .hero__reactor { right: -3%; transform: translateY(-50%) scale(0.65); } } @media (max-width: 768px) { :root { --nav-height: 64px; } .container { padding: 0 var(--space-lg); } .section { padding: var(--space-3xl) 0; } .nav__links { position: fixed; top: 0; right: 0; bottom: 0; width: 300px; background: rgba(24, 24, 27, 0.98); backdrop-filter: blur(24px); flex-direction: column; align-items: flex-start; padding: calc(var(--nav-height) + var(--space-xl)) var(--space-xl) var(--space-xl); transform: translateX(100%); transition: transform var(--duration-normal) var(--ease-out); border-left: 1px solid var(--border-subtle); gap: var(--space-xs); } .nav__links.open { transform: translateX(0); } .nav__hamburger { display: flex; } .nav__dropdown-menu { position: static; transform: none; background: rgba(255, 255, 255, 0.03); border: none; box-shadow: none; padding: 0 0 0 var(--space-md); opacity: 1; visibility: visible; max-height: 0; overflow: hidden; transition: max-height var(--duration-normal) var(--ease-out); } .nav__dropdown.open .nav__dropdown-menu { max-height: 500px; } .bento-grid, .bento-grid--3, .bento-grid--4, .services-grid { grid-template-columns: 1fr; } .split { grid-template-columns: 1fr; } .process-steps { grid-template-columns: 1fr; gap: var(--space-2xl); } .process-steps::before { display: none; } .hero__stats { gap: var(--space-xl); } .hero__reactor { display: none; } .hero__actions { flex-direction: column; } .hero__actions .btn { text-align: center; justify-content: center; } .footer__grid { grid-template-columns: 1fr; gap: var(--space-2xl); } .footer__bottom { flex-direction: column; gap: var(--space-md); text-align: center; } .cta-band__actions { flex-direction: column; align-items: center; } .bento-grid--3 { grid-template-columns: 1fr; } .bento-grid--4 { grid-template-columns: repeat(2, 1fr); } .contact-form [style*="grid-template-columns"] { grid-template-columns: 1fr !important; } } @media (max-width: 480px) { .hero__stats { flex-direction: column; gap: var(--space-lg); } .hero__stat-value { font-size: 1.5rem; } } /* ── Language Switcher ── */ .lang-switcher { position: relative; display: flex; align-items: center; gap: 2px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 3px; margin-left: var(--space-md); } .lang-switcher__btn { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 5px 10px; border: none; background: transparent; color: var(--text-muted); font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; border-radius: 6px; transition: all var(--duration-fast) var(--ease-out); white-space: nowrap; line-height: 1; } .lang-switcher__btn:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.06); } .lang-switcher__btn.active { color: var(--text-primary); background: rgba(20, 184, 166, 0.15); box-shadow: 0 0 12px rgba(20, 184, 166, 0.1); } .lang-switcher__flag { display: inline-flex; align-items: center; line-height: 1; } .lang-switcher__flag svg { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15); border-radius: 2px; } .lang-switcher__code { font-size: 0.7rem; } /* Mobile language switcher */ @media (max-width: 768px) { .nav__links > li:last-child { width: 100%; } .lang-switcher { margin-left: 0; margin-top: var(--space-lg); width: 100%; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 4px; } .lang-switcher__btn { flex: 1 1 calc(50% - 6px); justify-content: center; padding: 9px 10px; font-size: 0.8rem; } .lang-switcher__flag { line-height: 1; } } /* ── Film grain overlay (adds tactile depth, hides gradient banding) ── */ body::after { content: ''; position: fixed; inset: 0; z-index: 9998; pointer-events: none; opacity: 0.04; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } @media print { body::after { display: none; } } /* ── Trust badges ── */ .trust-badges { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); } .trust-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--border-subtle); border-radius: var(--border-radius-xs); background: rgba(255, 255, 255, 0.02); font-size: 0.82rem; color: var(--text-secondary); transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out); } .trust-badge:hover { border-color: var(--border-accent); background: rgba(20, 184, 166, 0.05); } .trust-badge svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; } .trust-badge strong { color: var(--text-primary); font-weight: 600; }