/* ========================================================================= Ergin Engineering — stylesheet ------------------------------------------------------------------------- Structure of this file: 1. Tokens -> colour/size "variables" for light and dark themes 2. Base -> resets and defaults for the whole page 3. Header / nav 4. Buttons 5. Hero 6. Sections (About, Services, Contact) 7. Footer 8. Responsive -> tweaks for tablets and phones THEME: the whole colour scheme is controlled by the `data-theme` attribute on (set to "light" or "dark" by main.js). Each block below just redefines the CSS variables; everything else reads those variables. ========================================================================= */ /* ---------- 1. Tokens (light theme = default) ---------- */ :root, [data-theme="light"] { --ink: #161c1f; /* main text colour */ --ink-soft: #41494d; /* secondary text */ --ink-mute: #6b7378; /* muted / labels */ --line: #e7e9eb; /* borders */ --line-soft: #f1f2f3; --bg: #ffffff; /* page background */ --bg-alt: #f7f8f9; /* alternating section background */ --surface: #ffffff; /* cards */ --header-bg: rgba(255, 255, 255, 0.85); --header-bg-scrolled: rgba(255, 255, 255, 0.92); --accent: #274496; /* brand blue */ --accent-hover: #1f3679; --accent-soft: #eaeefb; --logo-ink: #161c1f; /* logo follows the theme via these two */ --logo-accent: #274496; --shadow-card: 0 1px 2px rgba(22, 28, 31, 0.04), 0 8px 24px rgba(22, 28, 31, 0.06); --radius: 12px; --radius-lg: 20px; --container: 1180px; --header-h: 76px; --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif; color-scheme: light; } /* ---------- 1b. Dark theme overrides ---------- */ [data-theme="dark"] { --ink: #f1f3f5; --ink-soft: #c2c8cd; --ink-mute: #8a9197; --line: #2a3034; --line-soft: #1f2427; --bg: #0f1316; --bg-alt: #151a1e; --surface: #181d21; --header-bg: rgba(15, 19, 22, 0.78); --header-bg-scrolled: rgba(15, 19, 22, 0.92); --accent: #6e89e6; --accent-hover: #8aa2f2; --accent-soft: rgba(110, 137, 230, 0.14); --logo-ink: #f1f3f5; --logo-accent: #6e89e6; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.45); color-scheme: dark; } /* ---------- 2. Base ---------- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); } body { font-family: var(--font-sans); color: var(--ink); background: var(--bg); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } /* Centres content and caps its width */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; } /* ---------- 3. Header ---------- */ .site-header { position: sticky; /* stays at the top while scrolling */ top: 0; z-index: 50; background: var(--header-bg); backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid transparent; transition: border-color 0.2s ease, background 0.2s ease; } /* main.js adds .is-scrolled once the page is scrolled a little */ .site-header.is-scrolled { border-bottom-color: var(--line); background: var(--header-bg-scrolled); } .header-inner { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 16px; transition: height 0.3s cubic-bezier(0.22, 1, 0.36, 1); } /* Header slims down a little once scrolling starts (Apple-style) */ .site-header.is-scrolled .header-inner { height: 60px; } .brand svg, .brand .logo { transition: transform 0.3s ease; transform-origin: left center; } .site-header.is-scrolled .brand svg, .site-header.is-scrolled .brand .logo { transform: scale(0.88); } /* Scrollspy: main.js marks the nav link of the section in view */ .site-nav > a.active { color: var(--ink); } .site-nav > a.active::after { transform: scaleX(1); } /* Thin reading-progress line under the header (width set by main.js) */ .scroll-progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-hover)); z-index: 51; } .brand { display: inline-flex; align-items: center; /* Pull the inline SVG flush — its viewBox includes some inherent padding */ margin-left: -4px; } /* The logo's height; width scales automatically */ .logo { height: 44px; width: auto; display: block; } .site-nav { display: flex; align-items: center; gap: 28px; } .header-controls { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; } /* Theme toggle button */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background: transparent; border: 1px solid transparent; color: var(--ink-soft); transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease; } .theme-toggle:hover { color: var(--ink); background: var(--line-soft); } .theme-toggle:focus-visible { outline: none; border-color: var(--accent); } /* Show the right icon for the current theme: light theme -> show moon (click to go dark) dark theme -> show sun (click to go light) */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* Nav links with the sliding underline on hover */ .site-nav > a { color: var(--ink-soft); font-weight: 500; font-size: 0.95rem; position: relative; padding: 6px 0; transition: color 0.15s ease; } .site-nav > a:hover { color: var(--ink); } .site-nav > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.2s ease; } .site-nav > a:hover::after { transform: scaleX(1); } /* DE / EN language switch */ .lang-switch { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding-left: 14px; border-left: 1px solid var(--line); color: var(--ink-mute); font-size: 0.85rem; } .lang-switch button { background: transparent; border: 0; padding: 4px 6px; color: var(--ink-mute); font-weight: 600; letter-spacing: 0.02em; border-radius: 6px; transition: color 0.15s ease, background 0.15s ease; } .lang-switch button:hover { color: var(--ink); } /* main.js adds .active to the currently selected language */ .lang-switch button.active { color: var(--accent); } /* Hamburger button (hidden on desktop, shown on phones) */ .nav-toggle { display: none; background: transparent; border: 0; padding: 10px; gap: 5px; flex-direction: column; } .nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; } /* ---------- 4. Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 22px; border-radius: 10px; font-weight: 600; font-size: 0.95rem; border: 1px solid transparent; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.2s ease, box-shadow 0.2s ease; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 35%, transparent); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); } /* ---------- 5. Hero ---------- */ .hero { position: relative; display: flex; align-items: center; /* Fill the first screen (minus the sticky header) for a big opening. */ min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); padding: 72px 0 96px; background: linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%); overflow: hidden; } .hero-inner { position: relative; max-width: 880px; width: 100%; } /* Layer 1: slow-drifting blurred colour blobs ("aurora"). GPU-friendly: only transform is animated, the blur is static. */ .hero-aurora { position: absolute; inset: 0; pointer-events: none; } .aurora-blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.55; will-change: transform; } .aurora-a { width: 620px; height: 620px; right: -140px; top: -220px; background: radial-gradient(circle at 35% 35%, var(--accent) 0%, transparent 70%); opacity: 0.28; animation: aurora-drift-a 18s ease-in-out infinite alternate; } .aurora-b { width: 460px; height: 460px; left: -160px; bottom: -180px; background: radial-gradient(circle at 60% 40%, var(--accent-hover) 0%, transparent 70%); opacity: 0.18; animation: aurora-drift-b 22s ease-in-out infinite alternate; } @keyframes aurora-drift-a { from { transform: translate(0, 0) scale(1); } to { transform: translate(-90px, 70px) scale(1.15); } } @keyframes aurora-drift-b { from { transform: translate(0, 0) scale(1); } to { transform: translate(70px, -50px) scale(1.1); } } /* Layer 2: faint PCB traces that draw themselves in once on load. */ .hero-traces { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.5; } .hero-traces .trace { stroke: var(--accent); stroke-width: 1.5; opacity: 0.22; stroke-dasharray: 1600; stroke-dashoffset: 1600; animation: trace-draw 2.6s ease-out forwards; } .hero-traces .trace-2 { animation-delay: 0.35s; } .hero-traces .trace-3 { animation-delay: 0.7s; } .hero-traces .trace-pad { fill: var(--accent); opacity: 0; animation: pad-in 0.6s ease-out 2.2s forwards; } @keyframes trace-draw { to { stroke-dashoffset: 0; } } @keyframes pad-in { to { opacity: 0.3; } } /* Gradient accent inside the headline — with a slow shimmer sweep */ .hero-title .grad { background: linear-gradient(100deg, var(--accent) 0%, var(--accent-hover) 30%, var(--accent) 60%, var(--accent-hover) 100%); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: grad-sweep 7s ease-in-out infinite alternate; } @keyframes grad-sweep { from { background-position: 0% center; } to { background-position: 100% center; } } /* Staggered entrance: elements start invisible and float up one by one. */ .hero-fade { opacity: 0; transform: translateY(22px); animation: hero-rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .hf-1 { animation-delay: 0.05s; } .hf-2 { animation-delay: 0.15s; } .hf-3 { animation-delay: 0.3s; } .hf-4 { animation-delay: 0.45s; } .hf-5 { animation-delay: 0.6s; } .hf-6 { animation-delay: 1.1s; } @keyframes hero-rise { to { opacity: 1; transform: translateY(0); } } /* Competence chips under the CTAs */ .hero-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 34px 0 0; } .hero-chips li { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-soft); border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 7px 16px; } /* Scroll cue: a little mouse outline with a falling dot */ .scroll-cue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); width: 26px; height: 42px; border: 2px solid var(--ink-mute); border-radius: 14px; opacity: 0.6; transition: opacity 0.2s ease; } .scroll-cue:hover { opacity: 1; } .scroll-cue-dot { position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--ink-mute); animation: cue-fall 1.8s ease-in-out infinite; } @keyframes cue-fall { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } } /* ---------- 5b. Tech strip (infinite marquee) ---------- */ .tech-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-alt); overflow: hidden; padding: 14px 0; /* Fade the edges out so items appear/disappear softly */ -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .tech-track { display: flex; align-items: center; gap: 56px; width: max-content; animation: marquee 32s linear infinite; } /* Pause so people can actually read it */ .tech-strip:hover .tech-track { animation-play-state: paused; } .tech-track span { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); white-space: nowrap; position: relative; } /* Little accent dot between items */ .tech-track span::after { content: ""; position: absolute; right: -32px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: var(--accent); opacity: 0.5; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } /* content is duplicated once */ } .eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.78rem; color: var(--accent); font-weight: 700; margin: 0 0 18px; } .hero-title { font-size: clamp(2.25rem, 4.6vw, 3.6rem); line-height: 1.08; margin: 0 0 20px; letter-spacing: -0.02em; font-weight: 700; } .hero-subtitle { font-size: 1.125rem; color: var(--ink-soft); margin: 0 0 36px; max-width: 640px; } .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; } /* Decorative bar mark bottom-right of the hero — now breathing gently */ .pulse-mark { position: absolute; right: -20px; bottom: -80px; display: flex; align-items: flex-end; gap: 12px; opacity: 0.5; pointer-events: none; } .pulse-mark .bar { width: 14px; background: var(--ink); border-radius: 3px; display: block; opacity: 0.92; transform-origin: bottom; animation: bar-breathe 3.2s ease-in-out infinite; } .pulse-mark .bar-1 { height: 60px; } .pulse-mark .bar-2 { height: 110px; animation-delay: 0.25s; } .pulse-mark .bar-3 { height: 170px; animation-delay: 0.5s; } .pulse-mark .bar-center { height: 230px; background: var(--accent); animation-delay: 0.75s; } @keyframes bar-breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.82); } } /* ---------- 6. Sections ---------- */ .section { padding: 96px 0; } .section-about { background: var(--bg); } .section-services { background: var(--bg-alt); } .section-contact { background: var(--bg); } .section-head h2 { font-size: clamp(1.75rem, 2.6vw, 2.25rem); margin: 0 0 12px; letter-spacing: -0.01em; position: relative; padding-bottom: 14px; } /* Accent underline that grows once the section is revealed */ .section-head h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-hover)); transform: scaleX(0); transform-origin: left; transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.25s; } .section-head.centered h2::after { left: 50%; margin-left: -28px; transform-origin: center; } [data-reveal].is-visible h2::after { transform: scaleX(1); } .section-head .lead { font-size: 1.1rem; color: var(--ink-soft); margin: 0; max-width: 640px; } .section-head.centered { text-align: center; margin: 0 auto 56px; } .section-head.centered .lead { margin-left: auto; margin-right: auto; } /* About */ .about-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start; } .about-body p { font-size: 1.05rem; color: var(--ink-soft); margin: 0 0 24px; } .check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; } .check-list li { padding-left: 28px; position: relative; color: var(--ink); } /* The little checkmark drawn with two borders rotated 45° */ .check-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 14px; height: 8px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); } /* Services */ .services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .service-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px 24px; overflow: hidden; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease; } /* Spotlight that follows the cursor (JS sets --mx/--my; desktop only) */ .service-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), var(--accent-soft) 0%, transparent 65%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .service-card:hover::before { opacity: 1; } .service-card > * { position: relative; } /* content above the spotlight */ .service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: var(--accent); } .service-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease; } .service-card:hover .service-icon { transform: scale(1.12) rotate(-4deg); } .service-icon svg { width: 26px; height: 26px; } .service-card h3 { font-size: 1.05rem; margin: 0 0 8px; letter-spacing: -0.01em; } .service-card p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; } /* Work / insights gallery — asymmetric grid, captions overlaid on a scrim */ .section-work { background: var(--bg); } .work-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 300px; /* taller rows so the wide board renders show big */ gap: 20px; } .work-card { margin: 0; position: relative; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; /* clips the image to the rounded corners */ transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease; } /* First card gets the showcase spot: 2 columns × 2 rows */ .work-featured { grid-column: span 2; grid-row: span 2; } /* Wide card: 2 columns × 1 row — for panoramic shots */ .work-wide { grid-column: span 2; } .work-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: var(--accent); } /* The whole image area is one button (keyboard-reachable zoom). */ .work-zoom { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; } .work-zoom img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .work-card:hover .work-zoom img { transform: scale(1.05); } /* Caption on a dark gradient scrim at the bottom of the image. On hover the caption lifts slightly and the scrim deepens. */ .work-card figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 44px 18px 14px; font-size: 0.88rem; font-weight: 500; color: #fff; background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.62) 100%); pointer-events: none; /* clicks fall through to the zoom button */ transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.35s ease; } .work-card:hover figcaption { transform: translateY(-4px); background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.78) 100%); } .work-featured figcaption { font-size: 1rem; padding-bottom: 18px; } /* ---------- 3D showcase (scroll-driven digital twin) ---------- The section provides the scroll distance (280vh); the sticky inner box stays pinned while main.js rotates the camera with scroll progress. */ .showcase3d { position: relative; height: 240vh; /* scroll distance for the choreography */ background: #0c1015; } .showcase3d-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; align-items: center; justify-content: center; background: radial-gradient(900px 480px at 50% 42%, rgba(110, 137, 230, 0.14) 0%, transparent 65%), linear-gradient(180deg, #11161d 0%, #0c1015 100%); } .showcase3d-sticky model-viewer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; /* scroll drives the camera — no free orbiting */ --poster-color: transparent; } .showcase3d-copy { position: absolute; left: 24px; right: 24px; bottom: 6vh; /* low enough to clear the lifted board at the end */ text-align: center; z-index: 2; pointer-events: none; transition: opacity 0.3s ease; } .showcase3d-copy .eyebrow { color: #8aa2f2; margin-bottom: 12px; } .showcase3d-copy h2 { color: #f1f3f5; font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -0.01em; margin: 0 0 10px; } .showcase3d-copy p:last-child { color: #aeb6bf; font-size: 1.02rem; margin: 0 auto; max-width: 560px; } /* Lightbox (full-size image dialog) — opens with a soft zoom-in */ .lightbox-dialog { border: 0; border-radius: var(--radius); background: transparent; padding: 0; max-width: min(1100px, calc(100vw - 32px)); max-height: calc(100vh - 64px); } .lightbox-dialog[open] { animation: lightbox-in 0.35s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes lightbox-in { from { opacity: 0; transform: scale(0.94) translateY(12px); } to { opacity: 1; transform: scale(1) translateY(0); } } .lightbox-dialog::backdrop { background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(3px); } .lightbox-dialog[open]::backdrop { animation: backdrop-in 0.3s ease; } @keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } } .lightbox-dialog img { max-width: 100%; max-height: calc(100vh - 64px); border-radius: var(--radius); display: block; margin: 0 auto; } .lightbox-dialog .legal-close { position: fixed; top: 10px; right: 12px; color: #fff; background: rgba(0, 0, 0, 0.35); } .lightbox-dialog .legal-close:hover { color: #fff; background: rgba(0, 0, 0, 0.55); } /* Process ("So läuft Ihr Projekt") */ .section-process { background: var(--bg-alt); } .process-grid { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; position: relative; } /* Connector line behind the steps — draws itself when the group reveals. Visible only in the gaps between the cards (they sit on top). */ @media (min-width: 901px) { .process-grid::before { content: ""; position: absolute; left: 4%; right: 4%; top: 46px; /* runs through the number badges */ height: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-hover)); opacity: 0.35; transform: scaleX(0); transform-origin: left; transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.2s; } .process-grid.is-visible::before { transform: scaleX(1); } } .process-step { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px 22px; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .process-step:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: var(--accent); } .process-num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.04em; margin-bottom: 16px; } .process-step h3 { margin: 0 0 8px; font-size: 1rem; letter-spacing: -0.01em; } .process-step p { margin: 0; color: var(--ink-soft); font-size: 0.92rem; } /* Contact */ .contact-inner { max-width: 880px; margin: 0 auto; } .contact-card { margin-top: 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: 44px 40px 32px; display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; box-shadow: var(--shadow-card); } .contact-ways { display: grid; grid-template-columns: 1fr auto 1fr; gap: 32px; align-items: stretch; width: 100%; } .contact-way { display: flex; flex-direction: column; align-items: center; gap: 12px; } .contact-divider { width: 1px; background: var(--line); } .contact-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-mute); font-weight: 600; } .contact-big { font-size: clamp(1.15rem, 2.2vw, 1.45rem); font-weight: 600; color: var(--ink); letter-spacing: -0.01em; word-break: break-word; } .contact-big:hover { color: var(--accent); } .contact-note { margin: 0; font-size: 0.88rem; color: var(--ink-mute); } /* ---------- 7. Footer ---------- */ .site-footer { border-top: 1px solid var(--line); padding: 28px 0; color: var(--ink-mute); font-size: 0.9rem; } .footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } /* Impressum / Datenschutz buttons in the footer */ .footer-legal { display: inline-flex; align-items: center; gap: 18px; } .footer-link { background: transparent; border: 0; padding: 0; color: var(--ink-mute); font-size: 0.9rem; transition: color 0.15s ease; } .footer-link:hover { color: var(--accent); } /* ---------- Legal dialogs (Impressum / Datenschutz) ---------- */ .legal-dialog { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); padding: 0; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 64px); box-shadow: var(--shadow-card); } /* The dimmed area behind an open dialog */ .legal-dialog::backdrop { background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(2px); } .legal-dialog-inner { position: relative; padding: 32px 32px 28px; overflow-y: auto; } .legal-dialog h2 { margin: 0 0 18px; font-size: 1.35rem; letter-spacing: -0.01em; } .legal-dialog h3 { margin: 20px 0 6px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-mute); } .legal-dialog p { margin: 0 0 14px; color: var(--ink-soft); font-size: 0.95rem; } .legal-dialog a { color: var(--accent); } .legal-address { font-style: normal; /*
is italic by default — undo it */ line-height: 1.7; color: var(--ink); margin-bottom: 8px; } .legal-line { color: var(--ink-soft); font-size: 0.95rem; } /* Close (×) button, top-right of the dialog */ .legal-close { position: absolute; top: 14px; right: 16px; width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-mute); font-size: 1.5rem; line-height: 1; transition: color 0.15s ease, background 0.15s ease; } .legal-close:hover { color: var(--ink); background: var(--line-soft); } /* ---------- 7b. Scroll-reveal system ---------- Elements with data-reveal (single) or children of data-reveal-group (staggered) start slightly shifted + transparent. main.js adds .is-visible via IntersectionObserver when they scroll into view. */ [data-reveal], [data-reveal-group] > * { opacity: 0; transform: translateY(34px); transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } /* Gallery tiles additionally scale in slightly — feels more cinematic */ .work-grid > * { transform: translateY(34px) scale(0.96); } [data-reveal].is-visible, [data-reveal-group].is-visible > * { opacity: 1; transform: translateY(0); } /* Stagger inside groups */ [data-reveal-group].is-visible > *:nth-child(2) { transition-delay: 0.1s; } [data-reveal-group].is-visible > *:nth-child(3) { transition-delay: 0.2s; } [data-reveal-group].is-visible > *:nth-child(4) { transition-delay: 0.3s; } [data-reveal-group].is-visible > *:nth-child(5) { transition-delay: 0.4s; } [data-reveal-group].is-visible > *:nth-child(6) { transition-delay: 0.5s; } /* ---------- 7c. Header CTA + phone button ---------- */ /* The CTA is an inside .site-nav, so the generic `.site-nav > a` rule (padding: 6px 0, muted colour, hover underline) also matches it — and wins on specificity (0,1,1) against `.btn`/`.nav-cta` (0,1,0). One consolidated selector at (0,2,1) overrides all of that explicitly. */ .site-nav > a.nav-cta { display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; font-size: 0.88rem; font-weight: 600; line-height: 1; /* keeps the pill compact inside the header */ color: #fff; border-radius: 999px; } .site-nav > a.nav-cta:hover { color: #fff; } .site-nav > a.nav-cta::after { display: none; } .btn-phone { display: inline-flex; align-items: center; gap: 8px; } .btn-phone svg { flex: 0 0 auto; } /* ---------- 7c2. Theme cross-fade ---------- main.js adds .theme-fade to for ~400ms around a theme toggle so colours blend instead of snapping. Scoped to colour properties only. */ .theme-fade, .theme-fade *, .theme-fade *::before, .theme-fade *::after { transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, fill 0.4s ease, stroke 0.4s ease !important; } /* ---------- 7d. Reduced motion ---------- Continuous/large movement is switched off, but gentle opacity fades stay, so the page still feels alive without motion. */ @media (prefers-reduced-motion: reduce) { .hero-fade { animation: none !important; opacity: 1; transform: none; } [data-reveal], [data-reveal-group] > *, .work-grid > * { transform: none !important; transition: opacity 0.4s ease !important; } .aurora-blob, .pulse-mark .bar, .scroll-cue-dot, .tech-track, .hero-title .grad, .hero-traces .trace, .hero-traces .trace-pad { animation: none !important; } .hero-traces .trace { stroke-dashoffset: 0; } .hero-traces .trace-pad { opacity: 0.3; } .section-head h2::after { transition: none; } .process-grid::before { transition: none; } .lightbox-dialog[open], .lightbox-dialog[open]::backdrop { animation: none; } .work-card figcaption { transition: none; } /* 3D showcase: no scroll choreography, just one static full-height view */ .showcase3d { height: auto; } .showcase3d-sticky { position: relative; height: 90vh; } html { scroll-behavior: auto; } } /* ---------- 8. Responsive ---------- */ /* Tablets: stack the about grid, 2 service columns */ @media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; gap: 32px; } .services-grid { grid-template-columns: repeat(2, 1fr); } .work-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 230px; } .work-wide { grid-column: auto; } /* wide tiles become normal so the 2-col grid fills */ .process-grid { grid-template-columns: repeat(2, 1fr); } .section { padding: 72px 0; } .hero { padding: 72px 0 64px; } .pulse-mark { opacity: 0.3; } .site-nav > a.nav-cta { display: none; } /* keep the desktop nav lean on tablets */ } /* Phones: show hamburger, turn nav into a dropdown, single column */ @media (max-width: 720px) { .nav-toggle { display: flex; } .site-nav { position: absolute; top: var(--header-h); left: 0; right: 0; background: var(--surface); flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0; border-bottom: 1px solid var(--line); display: none; /* hidden until opened */ } /* main.js toggles .is-open on the nav */ .site-nav.is-open { display: flex; } .site-nav > a { padding: 14px 24px; } .site-nav > a::after { display: none; } .header-controls { margin: 8px 24px; padding: 12px 0 4px; border-top: 1px solid var(--line); justify-content: space-between; } .lang-switch { margin-left: 0; padding-left: 0; border-left: 0; } .nav-toggle span { background: var(--ink); } .services-grid { grid-template-columns: 1fr; } .work-grid { grid-template-columns: 1fr; grid-auto-rows: 230px; } .work-featured { grid-column: auto; grid-row: auto; } /* featured tile becomes normal */ .work-wide { grid-column: auto; } .process-grid { grid-template-columns: 1fr; } .contact-card { padding: 32px 22px; } .contact-ways { grid-template-columns: 1fr; gap: 24px; } .contact-divider { width: auto; height: 1px; } .hero { min-height: 0; } /* let content define the height on phones */ .scroll-cue { display: none; } .hero-traces { opacity: 0.3; } /* keep the trace animation, just subtler */ .tech-track { gap: 40px; } .tech-track span::after { right: -24px; } /* Show the CTA inside the mobile dropdown menu */ .site-nav > a.nav-cta { display: inline-flex; margin: 10px 24px 14px; padding: 12px 16px; /* comfortable tap target on phones */ } }