/* ========================================================================== Simple by Default — "Noise vs. Focus" Two worlds, one page, switched by data-state on : - "noise": dark, grainy, filling up with notifications. The problem. - "sharp": light, quiet, almost no effects. The product. ========================================================================== */ :root { /* Sharp world: paper and ink. */ --paper: #FCFCFA; --ink: #1A1A18; --muted: #6E6E68; --line: #E5E5E0; --line-soft: #EFEFEA; --accent: #1C5A3C; --accent-dark: #133F2A; /* Noise world: black and grey. */ --dark-bg: #000000; --dark-text: #FFFFFF; --dark-muted: #8C8C8C; --dark-line: rgba(255, 255, 255, 0.14); --sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace; --wrap: 1080px; --measure: 36em; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--dark-bg); color: var(--dark-text); font-family: var(--sans); font-size: 1.0625rem; line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background-color 0.3s ease, color 0.3s ease; } html[data-state="sharp"] body { background: var(--paper); color: var(--ink); } h1, h2, h3, p, figure, ul { margin: 0; } ul { padding: 0; list-style: none; } a { color: inherit; } ::selection { background: var(--ink); color: var(--paper); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } html[data-state="noise"] :focus-visible { outline-color: #FFFFFF; } .wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; } .mono { font-family: var(--mono); letter-spacing: 0.16em; text-transform: uppercase; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -100%; left: 1rem; z-index: 300; padding: 0.7rem 1.1rem; background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 0.75rem; text-decoration: none; } .skip-link:focus { top: 0.75rem; } /* State visibility -------------------------------------------------------- */ .only-sharp { display: none; } html[data-state="sharp"] .only-noise { display: none; } html[data-state="sharp"] .only-sharp { display: revert; } /* ========================================================================== NOISE STATE ========================================================================== */ .backdrop-grain { position: fixed; inset: 0; z-index: -2; width: 100%; height: 100%; opacity: 0.9; transition: opacity 0.35s ease; pointer-events: none; } html[data-state="sharp"] .backdrop-grain { opacity: 0; } .hero-noise { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-content: center; text-align: center; padding: 6rem 1.25rem; } .hero-noise > div { position: relative; z-index: 1; } .hero-noise .eyebrow { color: var(--dark-muted); font-size: 0.75rem; margin-bottom: 1.75rem; } .hero-noise .eyebrow .live { color: #FFFFFF; } .hero-noise h1 { /* Etwas weiter als die längste Zeile: die Box schrumpft ohnehin auf den Inhalt, die Reserve fängt nur breiter bauende System-Schriften ab. */ max-width: 22ch; margin-inline: auto; /* Der Umbruch zwischen den beiden Sätzen steht im Markup. Damit die längere zweite Zeile auch auf schmalen Geräten am Stück bleibt, darf der clamp-Boden nicht zu früh greifen: ab 548px aufwärts ändert sich nichts, darunter skaliert die Headline weiter mit. */ font-size: clamp(1.45rem, 7vw, 5rem); font-weight: 680; letter-spacing: -0.035em; line-height: 1.02; text-wrap: balance; } .hero-noise .sub { max-width: 46ch; margin: 1.75rem auto 0; color: #D2D2D2; font-size: clamp(1.05rem, 2.6vw, 1.3rem); } /* Only the words are hazy. The tool that sharpens them is itself sharp. */ .haze { filter: blur(3px) opacity(0.85); transition: filter 0.3s ease; will-change: filter; } html.sharpening .haze { filter: blur(0) opacity(1); } .sharpen-wrap { margin-top: 3rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; } .sharpen { position: relative; display: inline-flex; align-items: center; gap: 0.7rem; padding: 1.15rem 2.25rem; border: 1px solid #FFFFFF; border-radius: 10px; background: rgba(255, 255, 255, 0.06); color: #FFFFFF; font-family: var(--mono); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; } .sharpen .dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 12px rgba(255, 255, 255, 0.9); } .sharpen:hover, .sharpen:focus-visible { background: #FFFFFF; color: #000000; box-shadow: 0 0 34px rgba(255, 255, 255, 0.3); } .sharpen:hover .dot, .sharpen:focus-visible .dot { background: #000000; box-shadow: none; } .sharpen:active { transform: translateY(1px); } .hero-noise .hint { color: var(--dark-muted); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; } /* ---- Background clutter : everything that fills the brain -------------- */ .noise-clutter { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; filter: blur(1.5px); transition: opacity 0.4s ease; } html[data-state="sharp"] .noise-clutter { opacity: 0; } /* Each notification waits offstage until JS pops it in, one after another, so the screen visibly fills up. */ .pop { position: absolute; left: var(--x); top: var(--y); width: var(--w, 12rem); display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.7rem 0.8rem; border: 1px solid var(--dark-line); border-radius: 12px; background: rgba(18, 18, 18, 0.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55); opacity: 0; transform: rotate(var(--r, 0deg)) scale(0.9); visibility: hidden; } .pop.in { visibility: visible; opacity: var(--o, 0.5); transform: rotate(var(--r, 0deg)) scale(1); } .pop-dot { flex: 0 0 auto; margin-top: 0.15rem; width: 0.6rem; height: 0.6rem; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.85); } .pop-dot.filled { background: #FFFFFF; } .pop b { display: block; font-size: 0.82rem; font-weight: 650; color: #FFFFFF; line-height: 1.3; } .pop span { display: block; font-size: 0.75rem; color: var(--dark-muted); line-height: 1.35; } .pop .badge { margin-left: auto; align-self: center; padding: 0.05rem 0.35rem; border-radius: 6px; background: #FFFFFF; color: #000000; font-family: var(--mono); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.04em; } /* ========================================================================== SHARP STATE · light, quiet, almost no effects ========================================================================== */ .topbar { position: sticky; top: 0; z-index: 30; background: var(--paper); border-bottom: 1px solid var(--line); } .topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; } .brand { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; color: var(--ink); } .brand .mark { width: 1.25rem; height: 1.25rem; } .ghost-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.9rem; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--muted); font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; cursor: pointer; } .ghost-btn:hover { border-color: var(--ink); color: var(--ink); } .ghost-btn .swatch { width: 0.5rem; height: 0.5rem; border-radius: 2px; background: var(--muted); } /* Plain paper. No grid, no texture: the calm is the point. */ .hero-sharp { padding-top: clamp(4rem, 10vw, 7rem); padding-bottom: clamp(4rem, 10vw, 7rem); } .eyebrow-line { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--muted); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; } .eyebrow-line::before { content: ""; width: 1.75rem; height: 1px; background: var(--accent); } .hero-sharp h1 { margin-top: 1.5rem; /* The break between the two sentences sits in the markup, so the box only has to be wide enough for the longer of them. */ max-width: 17ch; font-size: clamp(2.6rem, 7.5vw, 5rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; } .hero-sharp .sub { margin-top: 1.75rem; max-width: var(--measure); color: var(--muted); font-size: clamp(1.1rem, 2.6vw, 1.3rem); } .section { padding-block: clamp(4.5rem, 11vw, 7.5rem); } .section-head { margin-bottom: clamp(2rem, 5vw, 3rem); } /* Services as quiet rows. No cards, no shadows, one hairline each. */ .rows { border-top: 1px solid var(--line); } .row { display: grid; gap: 0.5rem; padding-block: clamp(1.75rem, 4vw, 2.5rem); border-bottom: 1px solid var(--line); } .row .idx { color: var(--muted); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em; } .row h3 { font-size: 1.15rem; font-weight: 640; letter-spacing: -0.015em; line-height: 1.3; } .row p { max-width: var(--measure); color: var(--muted); font-size: 1rem; } /* Philosophy */ .philosophy { border-top: 1px solid var(--line); } .philosophy .line { margin-top: 1.75rem; max-width: 18ch; font-size: clamp(1.9rem, 5vw, 3rem); font-weight: 680; letter-spacing: -0.03em; line-height: 1.05; } .philosophy .foot { margin-top: 1.75rem; max-width: var(--measure); color: var(--muted); font-size: 1.05rem; } /* Contact, last thing before the footer */ .section-contact { border-top: 1px solid var(--line); } .contact-line { margin-top: 1.75rem; max-width: 18ch; font-size: clamp(1.9rem, 5vw, 3rem); font-weight: 680; letter-spacing: -0.03em; line-height: 1.05; } .widget { margin-top: 2.5rem; max-width: 34rem; } .field-row { display: flex; gap: 0.5rem; padding: 0.35rem; border: 1px solid var(--line); border-radius: 12px; background: #FFFFFF; } .field-row:focus-within { border-color: var(--accent); } .field-row input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font-family: var(--sans); font-size: 1rem; padding: 0.7rem 0.85rem; } .field-row input::placeholder { color: var(--muted); } .field-row input:focus { outline: none; } .submit { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.25rem; border: 0; border-radius: 9px; background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; cursor: pointer; } .submit:hover { background: var(--accent); } .widget-note { margin-top: 1rem; color: var(--muted); font-size: 0.9375rem; } .widget-note a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; } .widget-note a:hover { color: var(--accent-dark); } /* Legal pages. Same paper, same type, nothing else. ----------------------- They carry data-state="sharp" from the markup, so no JS is involved. */ .legal { padding-block: clamp(3.5rem, 9vw, 6rem) clamp(5rem, 12vw, 8rem); } .legal h1 { margin-top: 1.5rem; font-size: clamp(2.2rem, 6vw, 3.5rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; } .legal .note { margin-top: 1.75rem; max-width: var(--measure); color: var(--muted); font-size: 1.05rem; } .legal dl { margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; border-top: 1px solid var(--line); } .legal dt { padding-top: 1.5rem; color: var(--muted); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; } .legal dd { margin: 0.5rem 0 0; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); max-width: var(--measure); } .legal .todo { color: var(--muted); } .back-link { display: inline-block; margin-top: clamp(2.5rem, 5vw, 3.5rem); color: var(--ink); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 5px; } .back-link:hover { color: var(--accent-dark); } /* Footer */ .footer { padding-block: 2.5rem 3rem; border-top: 1px solid var(--line); } .footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; color: var(--muted); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; } .footer-inner a { color: var(--muted); text-decoration: none; } .footer-inner a:hover { color: var(--accent); } .footer-links { display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; } /* Layout up --------------------------------------------------------------- */ @media (min-width: 700px) { .row { grid-template-columns: 4rem 16rem 1fr; gap: 0.5rem 2.5rem; align-items: baseline; } } /* Motion. The noise breathes; the sharp side stays still. ---------------- */ @media (prefers-reduced-motion: no-preference) { html[data-state="noise"] .sharpen { animation: pulse 2.1s ease-in-out infinite; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 rgba(255, 255, 255, 0); } 50% { box-shadow: 0 0 30px rgba(255, 255, 255, 0.28); } } /* Pop in with a small overshoot, then drift. */ .pop { transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.2, 1.25, 0.4, 1), visibility 0s linear 0.28s; } .pop.in { transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.2, 1.25, 0.4, 1), visibility 0s; animation: drift var(--d, 7s) ease-in-out 0.4s infinite alternate; } @keyframes drift { from { transform: rotate(var(--r, 0deg)) translateY(0); } to { transform: rotate(var(--r, 0deg)) translateY(-9px); } } } /* Thin the clutter on small screens so the message stays legible. */ @media (max-width: 640px) { .pop:nth-child(2n) { display: none; } }