Ihor_Zhekov/Websites
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2

Browse Source
This commit is contained in:
Ihor_Zhekov
2026-02-06 13:15:10 +01:00
parent aa30e33805
commit 73968dfbd6
11 changed files with 354 additions and 260 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
Dockerfile
View File

@@ -1,9 +1,9 @@
FROM nginx:alpine FROM webdevops/php-nginx:8.2-alpine
RUN rm -rf /usr/share/nginx/html/* ENV WEB_DOCUMENT_ROOT=/app
COPY ["Profice WebSite/", "/usr/share/nginx/html/"] COPY ["Profice WebSite/", "/app/"]
RUN chmod -R 755 /usr/share/nginx/html/ RUN chown -R application:application /app
EXPOSE 80 EXPOSE 80

109
Profice WebSite/index.html
View File

@@ -33,12 +33,8 @@
<link rel="dns-prefetch" href="//www.google-analytics.com"> <link rel="dns-prefetch" href="//www.google-analytics.com">
</head> </head>
<body> <body>
<!-- Tech Background --> <!-- Hexagonal Background Canvas -->
<div class="tech-background"> <canvas id="hexCanvas"></canvas>
<div class="grid-overlay"></div>
<div class="dot-pattern"></div>
<div class="gradient-overlay"></div>
</div>
<!-- Top Banner --> <!-- Top Banner -->
<header class="top-banner dark-theme"> <header class="top-banner dark-theme">
@@ -520,111 +516,12 @@
</div> </div>
</footer> </footer>
<!-- Debug Section (remove for production) -->
<div id="debug-panel" style="position: fixed; bottom: 20px; right: 20px; background: rgba(0,0,0,0.9); color: white; padding: 15px; border-radius: 8px; font-family: monospace; font-size: 12px; z-index: 9999; max-width: 300px; display: none;">
<h4 style="margin: 0 0 10px 0;">Debug Panel</h4>
<button onclick="testPHP()" style="background: #007bff; color: white; border: none; padding: 5px 10px; margin: 2px; cursor: pointer;">Test PHP</button>
<button onclick="testForm()" style="background: #28a745; color: white; border: none; padding: 5px 10px; margin: 2px; cursor: pointer;">Test Form</button>
<button onclick="toggleDebug()" style="background: #dc3545; color: white; border: none; padding: 5px 10px; margin: 2px; cursor: pointer;">Hide</button>
<div id="debug-output" style="margin-top: 10px; max-height: 200px; overflow-y: auto;"></div>
</div>
<!-- Debug Toggle Button -->
<button id="debug-toggle" onclick="toggleDebug()" style="position: fixed; bottom: 20px; right: 20px; background: #007bff; color: white; border: none; padding: 10px; border-radius: 50%; cursor: pointer; z-index: 9998; width: 40px; height: 40px; font-weight: bold;">?</button>
<!-- Optimized script loading --> <!-- Optimized script loading -->
<script src="scripts/hex-background.js" defer></script>
<script src="scripts/script.js" defer></script> <script src="scripts/script.js" defer></script>
<script src="scripts/tech-onepager.js" defer></script> <script src="scripts/tech-onepager.js" defer></script>
<script src="scripts/cursor.js" defer></script> <script src="scripts/cursor.js" defer></script>
<script src="scripts/scroll-header.min.js" defer></script> <script src="scripts/scroll-header.min.js" defer></script>
<script src="scripts/chat.js" defer></script> <script src="scripts/chat.js" defer></script>
<!-- Debug Script -->
<script>
function toggleDebug() {
const panel = document.getElementById('debug-panel');
const toggle = document.getElementById('debug-toggle');
if (panel.style.display === 'none') {
panel.style.display = 'block';
toggle.style.display = 'none';
} else {
panel.style.display = 'none';
toggle.style.display = 'block';
}
}
function logDebug(message, isError = false) {
const output = document.getElementById('debug-output');
const timestamp = new Date().toLocaleTimeString();
const color = isError ? '#ff6b6b' : '#51cf66';
output.innerHTML += `<div style="color: ${color};">[${timestamp}] ${message}</div>`;
output.scrollTop = output.scrollHeight;
}
async function testPHP() {
logDebug('Testing PHP & Webhook...');
try {
const response = await fetch('/scripts/add/test.php');
if (response.ok) {
const result = await response.json();
logDebug(`PHP: ${result.tests?.php?.version || 'OK'}`);
logDebug(`cURL: ${result.tests?.curl?.status || 'unknown'}`);
if (result.tests?.webhook) {
const wh = result.tests.webhook;
if (wh.status === 'ok') {
logDebug(`✓ Webhook: HTTP ${wh.http_code}`);
} else {
logDebug(`✗ Webhook: ${wh.error || 'HTTP ' + wh.http_code}`, true);
}
}
} else {
logDebug(`✗ PHP Error: HTTP ${response.status}`, true);
}
} catch (error) {
logDebug(`✗ PHP Failed: ${error.message}`, true);
}
}
async function testForm() {
logDebug('Testing contact form...');
try {
const response = await fetch('/scripts/add/send.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
type: 'contact',
name: 'Debug Test',
contact: 'test@example.com',
service: 'website',
description: 'Debug test submission'
})
});
if (response.ok) {
const result = await response.json();
if (result.success) {
logDebug('✓ Form submission successful');
logDebug(`Webhook: ${result.data?.webhook_result?.success ? 'OK' : 'Failed'}`);
} else {
logDebug(`✗ Form failed: ${result.message}`, true);
}
} else {
logDebug(`✗ Form Error: HTTP ${response.status}`, true);
}
} catch (error) {
logDebug(`✗ Form Failed: ${error.message}`, true);
}
}
// Auto-test on load
window.addEventListener('load', () => {
setTimeout(() => {
logDebug('Debug panel ready - Click ? button to show');
testPHP();
}, 1000);
});
</script>
</body> </body>
</html> </html>

5
Profice WebSite/scripts/add/send.php
View File

@@ -53,6 +53,11 @@ define('WEBHOOK_TEST', 'https://n8n.profice.de/webhook-test/d94ef798-3f43-46dd-8
define('WEBHOOK_PROD', 'https://n8n.profice.de/webhook/d94ef798-3f43-46dd-8207-1e335e64518f'); define('WEBHOOK_PROD', 'https://n8n.profice.de/webhook/d94ef798-3f43-46dd-8207-1e335e64518f');
define('WEBHOOK_URL', USE_PRODUCTION ? WEBHOOK_PROD : WEBHOOK_TEST); define('WEBHOOK_URL', USE_PRODUCTION ? WEBHOOK_PROD : WEBHOOK_TEST);
// KI Chat Webhook
define('KI_CHAT_WEBHOOK_TEST', 'https://n8n.profice.de/webhook-test/8a25bce2-ff83-4676-a3a2-a0e1174fcffe');
define('KI_CHAT_WEBHOOK_PROD', 'https://n8n.profice.de/webhook/8a25bce2-ff83-4676-a3a2-a0e1174fcffe');
define('KI_CHAT_WEBHOOK_URL', USE_PRODUCTION ? KI_CHAT_WEBHOOK_PROD : KI_CHAT_WEBHOOK_TEST);
// Google Analytics // Google Analytics
define('GA_MEASUREMENT_ID', 'G-XXXXXXXXXX'); // Replace with your actual ID define('GA_MEASUREMENT_ID', 'G-XXXXXXXXXX'); // Replace with your actual ID
define('GA_API_SECRET', ''); // For server-side tracking define('GA_API_SECRET', ''); // For server-side tracking

277
Profice WebSite/scripts/hex-background.js Normal file
View File

@@ -0,0 +1,277 @@
/**
* Hexagonal Magnetism Background
* Rigid hexagon grid with mouse-based magnetism effect
* Hexagons move as whole units - no vertex deformation
*/
(function() {
'use strict';
// Configuration
const CONFIG = {
hexSize: 30,
lineWidth: 1,
maxLineWidth: 2.5,
baseOpacity: 0.2,
maxOpacity: 0.7,
magnetRadius: 180,
maxDisplacement: 12,
returnSpeed: 0.1,
// Colors (teal to orange gradient based on proximity)
tealR: 38, tealG: 166, tealB: 154,
orangeR: 245, orangeG: 124, orangeB: 0
};
// State
let canvas, ctx;
let hexagons = [];
let mouse = { x: -1000, y: -1000 };
let animationId;
let isInitialized = false;
// Hexagon class - rigid shape, no vertex warping
class Hexagon {
constructor(originX, originY, size) {
this.originX = originX;
this.originY = originY;
this.currentX = originX;
this.currentY = originY;
this.size = size;
this.opacity = CONFIG.baseOpacity;
this.lineWidth = CONFIG.lineWidth;
this.colorInfluence = 0;
}
// Calculate vertices relative to current center position
getVertices() {
const vertices = [];
for (let i = 0; i < 6; i++) {
// Pointy-top hexagon: first vertex at top
const angle = (Math.PI / 3) * i - Math.PI / 2;
vertices.push({
x: this.currentX + this.size * Math.cos(angle),
y: this.currentY + this.size * Math.sin(angle)
});
}
return vertices;
}
update(mouseX, mouseY) {
const dx = mouseX - this.originX;
const dy = mouseY - this.originY;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < CONFIG.magnetRadius && distance > 0) {
// Calculate influence (stronger when closer)
const influence = 1 - (distance / CONFIG.magnetRadius);
const easedInfluence = easeOutCubic(influence);
// Calculate displacement toward mouse (limited)
const angle = Math.atan2(dy, dx);
const displacement = CONFIG.maxDisplacement * easedInfluence;
// Target position (pulled toward mouse)
const targetX = this.originX + Math.cos(angle) * displacement;
const targetY = this.originY + Math.sin(angle) * displacement;
// Smooth interpolation to target
this.currentX += (targetX - this.currentX) * 0.15;
this.currentY += (targetY - this.currentY) * 0.15;
// Update visual properties
this.opacity = CONFIG.baseOpacity + (CONFIG.maxOpacity - CONFIG.baseOpacity) * easedInfluence;
this.lineWidth = CONFIG.lineWidth + (CONFIG.maxLineWidth - CONFIG.lineWidth) * easedInfluence;
this.colorInfluence = easedInfluence;
} else {
// Return to origin with spring effect
this.currentX += (this.originX - this.currentX) * CONFIG.returnSpeed;
this.currentY += (this.originY - this.currentY) * CONFIG.returnSpeed;
// Fade back to default
this.opacity += (CONFIG.baseOpacity - this.opacity) * CONFIG.returnSpeed;
this.lineWidth += (CONFIG.lineWidth - this.lineWidth) * CONFIG.returnSpeed;
this.colorInfluence += (0 - this.colorInfluence) * CONFIG.returnSpeed;
}
}
draw(ctx) {
const vertices = this.getVertices();
ctx.beginPath();
ctx.moveTo(vertices[0].x, vertices[0].y);
for (let i = 1; i < vertices.length; i++) {
ctx.lineTo(vertices[i].x, vertices[i].y);
}
ctx.closePath();
// Interpolate color: base gray -> teal -> orange
if (this.colorInfluence > 0.01) {
let r, g, b;
if (this.colorInfluence < 0.5) {
// Gray to teal
const t = this.colorInfluence * 2;
r = Math.round(119 + (CONFIG.tealR - 119) * t);
g = Math.round(119 + (CONFIG.tealG - 119) * t);
b = Math.round(100 + (CONFIG.tealB - 100) * t);
} else {
// Teal to orange
const t = (this.colorInfluence - 0.5) * 2;
r = Math.round(CONFIG.tealR + (CONFIG.orangeR - CONFIG.tealR) * t);
g = Math.round(CONFIG.tealG + (CONFIG.orangeG - CONFIG.tealG) * t);
b = Math.round(CONFIG.tealB + (CONFIG.orangeB - CONFIG.tealB) * t);
}
ctx.strokeStyle = `rgba(${r}, ${g}, ${b}, ${this.opacity})`;
} else {
ctx.strokeStyle = `rgba(119, 119, 100, ${this.opacity})`;
}
ctx.lineWidth = this.lineWidth;
ctx.stroke();
}
}
// Easing function for smooth animations
function easeOutCubic(t) {
return 1 - Math.pow(1 - t, 3);
}
// Initialize canvas
function init() {
canvas = document.getElementById('hexCanvas');
if (!canvas) {
console.warn('hexCanvas element not found');
return;
}
ctx = canvas.getContext('2d');
resize();
generateHexagons();
// Event listeners
window.addEventListener('resize', debounce(handleResize, 150));
document.addEventListener('mousemove', handleMouseMove);
document.addEventListener('mouseleave', handleMouseLeave);
isInitialized = true;
animate();
}
// Generate hexagon grid with proper pointy-top tessellation
function generateHexagons() {
hexagons = [];
// Pointy-top hexagon math:
// horizontal spacing = size * sqrt(3)
// vertical spacing = size * 1.5
// every odd row offset by horizontal_spacing / 2
const horizSpacing = CONFIG.hexSize * Math.sqrt(3);
const vertSpacing = CONFIG.hexSize * 1.5;
const cols = Math.ceil(window.innerWidth / horizSpacing) + 3;
const rows = Math.ceil(window.innerHeight / vertSpacing) + 3;
for (let row = -1; row < rows; row++) {
for (let col = -1; col < cols; col++) {
// Offset every odd row by half horizontal spacing
const xOffset = (row % 2 === 1) ? horizSpacing / 2 : 0;
const x = col * horizSpacing + xOffset;
const y = row * vertSpacing;
hexagons.push(new Hexagon(x, y, CONFIG.hexSize));
}
}
}
// Resize handler
function handleResize() {
resize();
generateHexagons();
}
function resize() {
const dpr = window.devicePixelRatio || 1;
canvas.width = window.innerWidth * dpr;
canvas.height = window.innerHeight * dpr;
canvas.style.width = window.innerWidth + 'px';
canvas.style.height = window.innerHeight + 'px';
ctx.scale(dpr, dpr);
}
// Mouse handlers
function handleMouseMove(e) {
mouse.x = e.clientX;
mouse.y = e.clientY;
}
function handleMouseLeave() {
mouse.x = -1000;
mouse.y = -1000;
}
// Animation loop
function animate() {
if (!isInitialized) return;
ctx.clearRect(0, 0, canvas.width, canvas.height);
const updateRadius = CONFIG.magnetRadius + CONFIG.hexSize * 2;
for (let i = 0; i < hexagons.length; i++) {
const hex = hexagons[i];
// Check if hexagon needs updating (near mouse or returning to origin)
const dx = mouse.x - hex.originX;
const dy = mouse.y - hex.originY;
const distance = Math.sqrt(dx * dx + dy * dy);
const isReturning = Math.abs(hex.currentX - hex.originX) > 0.1 ||
Math.abs(hex.currentY - hex.originY) > 0.1;
if (distance < updateRadius || isReturning) {
hex.update(mouse.x, mouse.y);
}
hex.draw(ctx);
}
animationId = requestAnimationFrame(animate);
}
// Debounce utility
function debounce(func, wait) {
let timeout;
return function executedFunction(...args) {
const later = () => {
clearTimeout(timeout);
func(...args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
}
// Cleanup
function destroy() {
if (animationId) {
cancelAnimationFrame(animationId);
}
window.removeEventListener('resize', handleResize);
document.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener('mouseleave', handleMouseLeave);
isInitialized = false;
}
// Initialize on DOM ready
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
// Expose for potential external control
window.HexBackground = {
init,
destroy,
config: CONFIG
};
})();

6
Profice WebSite/sites/automatisation.html
View File

@@ -22,6 +22,9 @@
<link rel="stylesheet" href="../style/cursor.css"> <link rel="stylesheet" href="../style/cursor.css">
</head> </head>
<body> <body>
<!-- Hexagonal Background Canvas -->
<canvas id="hexCanvas"></canvas>
<!-- Top Banner --> <!-- Top Banner -->
<header class="top-banner dark-theme"> <header class="top-banner dark-theme">
<div class="top-banner-left"> <div class="top-banner-left">
@@ -288,9 +291,8 @@
</div> </div>
</footer> </footer>
<script src="../scripts/script.js"></script>
<script src="../scripts/cursor.js"></script>
<!-- Optimized script loading --> <!-- Optimized script loading -->
<script src="../scripts/hex-background.js" defer></script>
<script src="../scripts/script.js" defer></script> <script src="../scripts/script.js" defer></script>
<script src="../scripts/cursor.js" defer></script> <script src="../scripts/cursor.js" defer></script>
<script src="../scripts/scroll-header.min.js" defer></script> <script src="../scripts/scroll-header.min.js" defer></script>

6
Profice WebSite/sites/ki-integration.html
View File

@@ -22,6 +22,9 @@
<link rel="stylesheet" href="../style/cursor.css"> <link rel="stylesheet" href="../style/cursor.css">
</head> </head>
<body> <body>
<!-- Hexagonal Background Canvas -->
<canvas id="hexCanvas"></canvas>
<!-- Top Banner --> <!-- Top Banner -->
<header class="top-banner dark-theme"> <header class="top-banner dark-theme">
<div class="top-banner-left"> <div class="top-banner-left">
@@ -300,9 +303,8 @@
</div> </div>
</footer> </footer>
<script src="../scripts/script.js"></script>
<script src="../scripts/cursor.js"></script>
<!-- Optimized script loading --> <!-- Optimized script loading -->
<script src="../scripts/hex-background.js" defer></script>
<script src="../scripts/script.js" defer></script> <script src="../scripts/script.js" defer></script>
<script src="../scripts/cursor.js" defer></script> <script src="../scripts/cursor.js" defer></script>
<script src="../scripts/scroll-header.min.js" defer></script> <script src="../scripts/scroll-header.min.js" defer></script>

4
Profice WebSite/sites/leads.html
View File

@@ -23,6 +23,9 @@
<link rel="stylesheet" href="../style/cursor.css"> <link rel="stylesheet" href="../style/cursor.css">
</head> </head>
<body> <body>
<!-- Hexagonal Background Canvas -->
<canvas id="hexCanvas"></canvas>
<!-- Top Banner --> <!-- Top Banner -->
<header class="top-banner dark-theme"> <header class="top-banner dark-theme">
<div class="top-banner-left"> <div class="top-banner-left">
@@ -194,6 +197,7 @@
</footer> </footer>
<!-- Optimized script loading --> <!-- Optimized script loading -->
<script src="../scripts/hex-background.js" defer></script>
<script src="../scripts/script.js" defer></script> <script src="../scripts/script.js" defer></script>
<script src="../scripts/leads.min.js" defer></script> <script src="../scripts/leads.min.js" defer></script>
<script src="../scripts/cursor.js" defer></script> <script src="../scripts/cursor.js" defer></script>

4
Profice WebSite/sites/offers.html
View File

@@ -22,6 +22,9 @@
<link rel="stylesheet" href="../style/cursor.css"> <link rel="stylesheet" href="../style/cursor.css">
</head> </head>
<body> <body>
<!-- Hexagonal Background Canvas -->
<canvas id="hexCanvas"></canvas>
<!-- Top Banner --> <!-- Top Banner -->
<header class="top-banner dark-theme"> <header class="top-banner dark-theme">
<div class="top-banner-left"> <div class="top-banner-left">
@@ -191,6 +194,7 @@
</footer> </footer>
<!-- Optimized script loading --> <!-- Optimized script loading -->
<script src="../scripts/hex-background.js" defer></script>
<script src="../scripts/script.js" defer></script> <script src="../scripts/script.js" defer></script>
<script src="../scripts/cursor.js" defer></script> <script src="../scripts/cursor.js" defer></script>
<script src="../scripts/scroll-header.min.js" defer></script> <script src="../scripts/scroll-header.min.js" defer></script>

6
Profice WebSite/sites/website.html
View File

@@ -22,6 +22,9 @@
<link rel="stylesheet" href="../style/cursor.css"> <link rel="stylesheet" href="../style/cursor.css">
</head> </head>
<body> <body>
<!-- Hexagonal Background Canvas -->
<canvas id="hexCanvas"></canvas>
<!-- Top Banner --> <!-- Top Banner -->
<header class="top-banner dark-theme"> <header class="top-banner dark-theme">
<div class="top-banner-left"> <div class="top-banner-left">
@@ -274,9 +277,8 @@
</div> </div>
</footer> </footer>
<script src="../scripts/script.js"></script>
<script src="../scripts/cursor.js"></script>
<!-- Optimized script loading --> <!-- Optimized script loading -->
<script src="../scripts/hex-background.js" defer></script>
<script src="../scripts/script.js" defer></script> <script src="../scripts/script.js" defer></script>
<script src="../scripts/cursor.js" defer></script> <script src="../scripts/cursor.js" defer></script>
<script src="../scripts/scroll-header.min.js" defer></script> <script src="../scripts/scroll-header.min.js" defer></script>

66
Profice WebSite/style/design.css
View File

@@ -20,9 +20,20 @@ body {
min-height: 100vh; min-height: 100vh;
} }
/* Hexagonal Canvas Background */
#hexCanvas {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: -1;
pointer-events: none;
}
/* Top Banner - Ultra Smooth Performance */ /* Top Banner - Ultra Smooth Performance */
.top-banner { .top-banner {
background-color: var(--primary-light); background-color: rgba(235, 235, 222, 0.85);
color: var(--primary-dark); color: var(--primary-dark);
padding: 5px 40px; padding: 5px 40px;
height: 90px; height: 90px;
@@ -36,6 +47,8 @@ body {
z-index: 1001; z-index: 1001;
border-bottom: 3px solid var(--accent-orange); border-bottom: 3px solid var(--accent-orange);
overflow: hidden; overflow: hidden;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
/* Ultra-smooth transitions with hardware acceleration */ /* Ultra-smooth transitions with hardware acceleration */
transition: height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), transition: height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
@@ -69,37 +82,6 @@ body {
transition-duration: 0.2s; transition-duration: 0.2s;
} }
/* Light blink effect for top banner */
.top-banner::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: var(--accent-orange);
animation: lightBlink 3s ease-in-out infinite;
z-index: 1;
pointer-events: none;
}
@keyframes lightBlink {
0% {
left: -100%;
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
left: 100%;
opacity: 0;
}
}
.top-banner-left { .top-banner-left {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -1160,7 +1142,7 @@ body {
/* Footer Banner Styles */ /* Footer Banner Styles */
.footer-banner { .footer-banner {
background: #2a2a2a !important; background: rgba(42, 42, 42, 0.85) !important;
color: var(--primary-light) !important; color: var(--primary-light) !important;
padding: 60px 0 30px; padding: 60px 0 30px;
margin: 80px 0 0 0; margin: 80px 0 0 0;
@@ -1168,22 +1150,8 @@ body {
width: 100%; width: 100%;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
.footer-banner::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent-orange), transparent);
animation: shimmer 3s infinite;
}
@keyframes shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
} }
.footer-container { .footer-container {

123
Profice WebSite/style/tech-onepager.css
View File

@@ -3,52 +3,15 @@
* System being built aesthetic - not marketing campaign * System being built aesthetic - not marketing campaign
*/ */
/* ===== TECH BACKGROUND ===== */ /* ===== TECH BACKGROUND (disabled - replaced by hexCanvas) ===== */
.tech-background { .tech-background {
position: fixed; display: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
overflow: hidden;
}
.grid-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
linear-gradient(rgba(79, 71, 71, 0.12) 1px, transparent 1px),
linear-gradient(90deg, rgba(79, 71, 71, 0.12) 1px, transparent 1px);
background-size: 50px 50px;
pointer-events: none;
}
.dot-pattern {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: radial-gradient(circle, rgba(79, 71, 71, 0.12) 1px, transparent 1px);
background-size: 20px 20px;
pointer-events: none;
} }
.grid-overlay,
.dot-pattern,
.gradient-overlay { .gradient-overlay {
position: absolute; display: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg,
rgba(235, 235, 222, 0.8) 0%,
rgba(235, 235, 222, 0.6) 50%,
rgba(235, 235, 222, 0.4) 100%);
pointer-events: none;
} }
/* ===== HERO SECTION ===== */ /* ===== HERO SECTION ===== */
@@ -71,6 +34,7 @@
.hero-left { .hero-left {
max-width: 600px; max-width: 600px;
width: 100%;
} }
.hero-headline { .hero-headline {
@@ -85,18 +49,32 @@
.hero-subline { .hero-subline {
font-size: 1.25rem; font-size: 1.25rem;
line-height: 1.6; line-height: 1.6;
color: var(--primary-mid); color: var(--primary-dark);
margin-bottom: 20px; margin-bottom: 20px;
font-weight: 400; font-weight: 400;
background: rgba(102, 187, 106, 0.35);
padding: 16px 20px;
padding-left: 20px;
border-left: 3px solid var(--accent-teal);
background: rgba(102, 187, 106, 0.35);
border-radius: 0 8px 8px 0;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: inline-block;
} }
.hero-proof { .hero-proof {
font-size: 1.1rem; font-size: 1.1rem;
color: var(--accent-teal); color: var(--primary-dark);
font-weight: 500; font-weight: 500;
margin-bottom: 40px; margin-bottom: 40px;
padding-left: 20px; padding: 12px 20px;
border-left: 3px solid var(--accent-teal); border-left: 3px solid var(--accent-teal);
background: rgba(102, 187, 106, 0.35);
border-radius: 0 8px 8px 0;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: inline-block;
} }
.hero-buttons { .hero-buttons {
@@ -379,8 +357,7 @@
/* ===== SYSTEME SECTION ===== */ /* ===== SYSTEME SECTION ===== */
.systeme-section { .systeme-section {
padding: 100px 40px; padding: 100px 40px;
background: rgba(255, 255, 255, 0.3); background: transparent;
backdrop-filter: blur(10px);
} }
.container { .container {
@@ -1247,8 +1224,7 @@
/* ===== QUALIFICATION SECTION ===== */ /* ===== QUALIFICATION SECTION ===== */
.qualification-section { .qualification-section {
padding: 100px 40px; padding: 100px 40px;
background: rgba(255, 255, 255, 0.2); background: transparent;
backdrop-filter: blur(10px);
} }
.qualification-grid { .qualification-grid {
@@ -1406,26 +1382,11 @@
/* ===== PROCESS SECTION ===== */ /* ===== PROCESS SECTION ===== */
.process-section { .process-section {
padding: 100px 40px; padding: 100px 40px;
background: rgba(255, 255, 255, 0.3); background: transparent;
backdrop-filter: blur(10px);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.process-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent 0%,
rgba(38, 166, 154, 0.05) 50%,
transparent 100%);
pointer-events: none;
}
.process-line { .process-line {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -1624,24 +1585,11 @@
/* ===== ERGEBNISSE SECTION ===== */ /* ===== ERGEBNISSE SECTION ===== */
.results-section { .results-section {
padding: 100px 40px; padding: 100px 40px;
background: rgba(255, 255, 255, 0.15); background: transparent;
backdrop-filter: blur(15px);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.results-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 30% 50%, rgba(38, 166, 154, 0.1) 0%, transparent 50%),
radial-gradient(circle at 70% 50%, rgba(102, 187, 106, 0.1) 0%, transparent 50%);
pointer-events: none;
}
.results-grid { .results-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
@@ -1760,26 +1708,11 @@
/* ===== INTERACTION SECTION ===== */ /* ===== INTERACTION SECTION ===== */
.interaction-section { .interaction-section {
padding: 100px 40px; padding: 100px 40px;
background: rgba(255, 255, 255, 0.3); background: transparent;
backdrop-filter: blur(10px);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.interaction-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg,
transparent 30%,
rgba(38, 166, 154, 0.05) 50%,
transparent 70%);
pointer-events: none;
}
.interaction-cards { .interaction-cards {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));