/* ========================================================================== business.css — scoped styles for business.stefan-strich.de landing page Loaded ONLY on the business home (via HeadExtra). Everything is namespaced under `.biz` / `biz-*` so it never collides with main.css. Design: dark editorial one-pager — Space Grotesk + IBM Plex. Theme reuses the site's html.dark / html.light class mechanism. ========================================================================== */ /* ---------- Self-hosted fonts (GDPR — no Google Fonts CDN) ---------- */ @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/space-grotesk/latin-400-normal.woff2') format('woff2')} @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('/static/fonts/space-grotesk/latin-500-normal.woff2') format('woff2')} @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('/static/fonts/space-grotesk/latin-600-normal.woff2') format('woff2')} @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('/static/fonts/space-grotesk/latin-700-normal.woff2') format('woff2')} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/ibm-plex-sans/latin-400-normal.woff2') format('woff2')} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/static/fonts/ibm-plex-sans/latin-500-normal.woff2') format('woff2')} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/static/fonts/ibm-plex-sans/latin-600-normal.woff2') format('woff2')} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/ibm-plex-mono/latin-400-normal.woff2') format('woff2')} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/static/fonts/ibm-plex-mono/latin-500-normal.woff2') format('woff2')} /* ---------- Theme tokens (page-scoped; reuse html.dark / html.light) ---------- */ :root{ --font-display:'Space Grotesk', system-ui, sans-serif; --font-body:'IBM Plex Sans', system-ui, sans-serif; --font-mono:'IBM Plex Mono', ui-monospace, monospace; --accent:#5b9dff; --maxw:1120px; } .dark{ --bg:#0a0f1a; --bg-grad:#0c1320; --surface:#0f1727; --card:#111c2f; --card-2:#0d1626; --border:rgba(148,163,184,.14); --border-strong:rgba(148,163,184,.26); --text:#e8edf6; --muted:#9aa8bf; --faint:#5f6e85; --accent-soft:color-mix(in oklab, var(--accent) 16%, transparent); --accent-line:color-mix(in oklab, var(--accent) 40%, transparent); --shadow:0 24px 60px -30px rgba(0,0,0,.7); } .light{ --bg:#f4f6f9; --bg-grad:#eef1f6; --surface:#ffffff; --card:#ffffff; --card-2:#f7f9fc; --border:rgba(15,23,42,.10); --border-strong:rgba(15,23,42,.18); --text:#0f1828; --muted:#4b5872; --faint:#8a97ab; --accent-soft:color-mix(in oklab, var(--accent) 12%, transparent); --accent-line:color-mix(in oklab, var(--accent) 45%, transparent); --shadow:0 24px 50px -32px rgba(15,23,42,.30); } /* ---------- Page background (overrides main.css body) ---------- */ body{ font-family:var(--font-body); background:var(--bg); background-image:none; background-attachment:initial; color:var(--text); display:block; min-height:100dvh; line-height:1.55; /* clip (not hidden): hidden would force overflow-y:auto, making the scroll container and breaking the window scroll listener used for reveal-on-scroll. */ overflow-x:clip; } body::before{ content:"";position:fixed;inset:0;z-index:-2;pointer-events:none; background: radial-gradient(1100px 620px at 78% -8%, var(--accent-soft), transparent 60%), linear-gradient(180deg, var(--bg-grad), var(--bg) 38%); } body::after{ content:"";position:fixed;inset:0;z-index:-1;opacity:.5;pointer-events:none; background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size:64px 64px; -webkit-mask-image:radial-gradient(circle at 50% 0%, #000 0%, transparent 72%); mask-image:radial-gradient(circle at 50% 0%, #000 0%, transparent 72%); } /* ---------- Primitives ---------- */ .biz a{color:inherit;text-decoration:none} .biz-wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px} .biz-accent{color:var(--accent)} .biz-eyebrow{ font-family:var(--font-mono);font-size:12.5px;font-weight:500; letter-spacing:.18em;text-transform:uppercase;color:var(--accent); display:inline-flex;align-items:center;gap:10px; } .biz-eyebrow::before{content:"";width:22px;height:1px;background:var(--accent);opacity:.7} .biz-marker{display:block;margin-bottom:18px;font-family:var(--font-mono);font-size:13px;font-weight:500;letter-spacing:.04em;color:var(--faint)} /* ---------- Top bar ---------- */ .biz-bar{ position:sticky;top:0;z-index:50; -webkit-backdrop-filter:saturate(140%) blur(14px); backdrop-filter:saturate(140%) blur(14px); background:color-mix(in oklab, var(--bg) 72%, transparent); border-bottom:1px solid var(--border); } .biz-bar-inner{display:flex;align-items:center;justify-content:space-between;height:66px} .biz-brand{display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-weight:600} .biz-monogram{ width:38px;height:38px;border-radius:10px;display:grid;place-items:center; border:1px solid var(--border-strong); background:linear-gradient(160deg, var(--card), var(--card-2)); font-family:var(--font-mono);font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--accent); } .biz-brand b{font-weight:600;font-size:15.5px;letter-spacing:-.01em} .biz-bar-nav{display:flex;align-items:center;gap:8px} .biz-ghost{ display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:9px; font-size:13.5px;font-weight:500;color:var(--muted);border:1px solid transparent; background:transparent;cursor:pointer;transition:.18s; } .biz-ghost:hover{color:var(--text);border-color:var(--border);background:var(--card-2)} .biz-ghost svg{width:16px;height:16px} .biz-theme{padding:0 11px} .biz-btn{ display:inline-flex;align-items:center;gap:9px;height:38px;padding:0 16px;border-radius:9px; font-size:13.5px;font-weight:600;color:#06101f; background:var(--accent);border:1px solid color-mix(in oklab,var(--accent) 70%, #000); transition:.18s;box-shadow:0 8px 22px -10px var(--accent); } .biz-btn:hover{transform:translateY(-1px);filter:brightness(1.06)} .biz-btn svg{width:16px;height:16px} .light .biz-btn{color:#fff} /* theme-toggle icon swap (show sun in dark = "switch to light") */ .biz-ic-sun{display:none} .biz-ic-moon{display:block} .dark .biz-ic-sun{display:block} .dark .biz-ic-moon{display:none} /* ---------- Hero ---------- */ .biz-hero{padding:56px 0 44px} .biz-hero-grid{display:grid;grid-template-columns:1.35fr .9fr;gap:56px;align-items:center} .biz-hero h1{ font-family:var(--font-display);font-weight:600;letter-spacing:-.03em;line-height:1.02; font-size:clamp(40px,4.8vw,68px);margin:18px 0 0;color:var(--text); } .biz-hero h1 .biz-arrow{color:var(--muted);font-weight:400;font-size:.72em;vertical-align:.09em} .biz-lead{margin-top:20px;max-width:48ch;color:var(--muted);font-size:17px} .biz-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px} .biz-chip{ display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 13px;border-radius:8px; font-family:var(--font-mono);font-size:12.5px;color:var(--muted); border:1px solid var(--border);background:var(--card-2); } .biz-chip .biz-dot{width:7px;height:7px;border-radius:50%;background:var(--accent)} .biz-hero-cta{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap} .biz-hero-cta .biz-btn{height:44px;padding:0 20px;border-radius:10px;font-size:14.5px} .biz-hero-cta .biz-ghost{height:44px;padding:0 20px;border-radius:10px;font-size:14.5px;border-color:var(--border)} /* portrait */ .biz-portrait-wrap{position:relative;justify-self:end} .biz-portrait-frame{ position:relative;padding:9px;border-radius:22px; background:linear-gradient(150deg, var(--card), var(--card-2)); border:1px solid var(--border);box-shadow:var(--shadow); } .biz-portrait-frame::before{ content:"";position:absolute;inset:-1px;border-radius:22px;padding:1px; background:linear-gradient(150deg, var(--accent-line), transparent 55%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none; } .biz-portrait{display:block;width:300px;height:372px;border-radius:15px;object-fit:cover;object-position:center top} .biz-portrait-tag{ position:absolute;left:-14px;bottom:24px;z-index:3; display:flex;align-items:center;gap:9px;padding:9px 13px;border-radius:10px; background:color-mix(in oklab,var(--surface) 86%, transparent); border:1px solid var(--border-strong);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:var(--shadow); font-family:var(--font-mono);font-size:12px;color:var(--muted);white-space:nowrap; } .biz-pulse{width:8px;height:8px;border-radius:50%;background:#34d399;box-shadow:0 0 0 0 rgba(52,211,153,.6);animation:biz-pulse 2.4s infinite} @keyframes biz-pulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.55)}70%{box-shadow:0 0 0 9px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}} /* ---------- Section frame (marker only, no headings) ---------- */ .biz-block{padding:40px 0;border-top:1px solid var(--border)} /* proof cards */ .biz-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} .biz-card{ padding:22px;border-radius:16px;background:var(--card);border:1px solid var(--border); display:flex;flex-direction:column;gap:12px;transition:.22s; } .biz-card:hover{border-color:var(--border-strong);transform:translateY(-3px);box-shadow:var(--shadow)} .biz-card-ic{ width:40px;height:40px;border-radius:10px;display:grid;place-items:center;flex:none; background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent); } .biz-card-ic svg{width:20px;height:20px} .biz-card h3{font-family:var(--font-display);font-weight:600;font-size:18px;letter-spacing:-.01em;color:var(--text)} .biz-card p{margin:0;color:var(--muted);font-size:14.5px} .biz-card-meta{margin-top:auto;font-family:var(--font-mono);font-size:11.5px;color:var(--faint)} /* career strip — 25 Jahre in einer Zeile */ .biz-strip{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0; border-top:2px solid var(--accent-line);padding-top:16px; } .biz-phase{display:flex;flex-direction:column;gap:4px;padding-right:20px} .biz-phase-when{font-family:var(--font-mono);font-size:12.5px;color:var(--accent)} .biz-phase-title{font-size:14px;font-weight:500;color:var(--text)} .biz-phase-org{font-family:var(--font-mono);font-size:11.5px;color:var(--faint)} .biz-badge{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;color:var(--accent); border:1px solid var(--accent-line);background:var(--accent-soft);padding:2px 7px;border-radius:20px;margin-left:6px} .biz-strip-more{margin:18px 0 0;font-size:14px;color:var(--muted)} .biz-strip-more a{color:var(--accent);font-weight:500;transition:.18s} .biz-strip-more a:hover{filter:brightness(1.15)} /* contact */ .biz-contact{padding-bottom:24px} .biz-contact-card{ border-radius:22px;border:1px solid var(--border);background:linear-gradient(160deg,var(--card),var(--card-2)); padding:34px 36px;display:grid;grid-template-columns:1fr auto;gap:36px;align-items:center;box-shadow:var(--shadow); } .biz-contact-pitch{display:flex;flex-direction:column;align-items:flex-start;gap:14px} .biz-contact-pitch p{margin:0;color:var(--muted);max-width:42ch;font-size:15px} .biz-contact-actions{display:flex;flex-direction:column;gap:10px;min-width:280px} .biz-crow{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:12px; border:1px solid var(--border);background:var(--surface);transition:.18s} .biz-crow:hover{border-color:var(--accent-line);transform:translateX(3px)} .biz-crow .biz-ci{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;flex:none; background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent)} .biz-crow .biz-ci svg{width:18px;height:18px} .biz-crow .biz-cl{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)} .biz-crow .biz-cv{font-size:14px;color:var(--text);font-weight:500} /* footer */ .biz-foot{padding:24px 0 36px;border-top:1px solid var(--border);margin-top:12px} .biz-foot-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap} .biz-fl{font-family:var(--font-mono);font-size:12.5px;color:var(--faint)} .biz-fr{display:flex;gap:16px;flex-wrap:wrap} .biz-fr a{font-family:var(--font-mono);font-size:12.5px;color:var(--muted);transition:.18s} .biz-fr a:hover{color:var(--accent)} /* ---------- reveal ---------- */ .biz-rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)} .biz-rv.is-in{opacity:1;transform:none} .biz-rv[data-d="1"]{transition-delay:.06s}.biz-rv[data-d="2"]{transition-delay:.12s} .biz-rv[data-d="3"]{transition-delay:.18s}.biz-rv[data-d="4"]{transition-delay:.24s} @media (prefers-reduced-motion:reduce){ .biz-rv{opacity:1;transform:none;transition:none} .biz-pulse{animation:none} } /* ---------- responsive ---------- */ @media (max-width:920px){ .biz-hero-grid{grid-template-columns:1fr;gap:40px} .biz-portrait-wrap{justify-self:start;order:-1} .biz-cards{grid-template-columns:1fr} .biz-strip{grid-template-columns:1fr;gap:14px;border-top:0;padding-top:0; border-left:2px solid var(--accent-line);padding-left:16px} .biz-phase{padding-right:0} .biz-contact-card{grid-template-columns:1fr;padding:22px 20px;gap:16px;align-items:start} .biz-contact-actions{min-width:0} } @media (max-width:560px){ .biz-wrap{padding:0 20px} .biz-label-hide{display:none} .biz-hero{padding:28px 0 36px} .biz-portrait{width:180px;height:216px;border-radius:12px} .biz-portrait-frame{padding:7px;border-radius:18px} .biz-portrait-frame::before{border-radius:18px} .biz-portrait-tag{left:-10px;bottom:14px} .biz-hero-cta{flex-direction:column;align-items:stretch} .biz-hero-cta .biz-btn,.biz-hero-cta .biz-ghost{justify-content:center;height:46px} } /* ---------- print ---------- */ @media print{ body::before,body::after{display:none} .biz-bar,.biz-theme,.biz-hero-cta,.biz-foot{display:none !important} body{background:#fff;color:#000} .biz-card,.biz-contact-card{break-inside:avoid} }