/* ═══════════════════════════════════════════════════════════════════════════ COIFORA — Design-System ─────────────────────────────────────────────────────────────────────────── Chassis: "Porzellan & Stahl". Die Neutraltöne kommen aus dem echten Subjekt — Porzellanbecken, gebürsteter Stahl, Spiegellicht, Tinte. Bewusst NICHT Creme/Serif/Terracotta: das ist der Standard-Reflex jeder Friseur-Vorlage. Bewegungssprache: "Der Schnitt". Nichts faded ein. Alles wird von einer Kante freigelegt (clip-path), der eine Haarlinie vorausläuft. Das ist die eine Bewegung, die nur dieses Produkt macht. THEMING — das ist der Punkt, warum das System bestehen bleibt: Layout, Typografie, Rhythmus und Bewegung gehören Coifora und bleiben bei jedem Salon gleich. Pro Salon anpassbar sind nur zwei Dinge: Barbe wird dunkel + Messing, ein Damensalon hell + was auch immer. ═════════════════════════════════════════════════════════════════════════ */ /* ── Schriften: selbst gehostet ──────────────────────────────────────────── Kein Google-CDN. Beim CDN-Einbinden geht die Besucher-IP an Google — dazu gibt es in der DACH-Region einschlägige DSGVO-Urteile. Latin-Subset, variable Achsen, woff2. */ @font-face { font-family: "Bricolage Grotesque"; src: url("./fonts/bricolage-grotesque.woff2") format("woff2-variations"); font-weight: 400 800; font-display: swap; } @font-face { font-family: "Instrument Sans"; src: url("./fonts/instrument-sans.woff2") format("woff2-variations"); font-weight: 400 700; font-display: swap; } :root { /* ── Akzent: das Einzige, was der Salon wirklich besitzt ── */ --co-accent: #B0793A; --co-accent-fg: #FFFFFF; /* ── Chassis hell (Default) ── */ --co-bg: #F1F3F1; --co-bg-rgb: 241 243 241; /* für Verläufe mit echtem Alpha, siehe Hero */ --co-surface: #FFFFFF; --co-surface-2: #E7EAE7; --co-fg: #14171A; --co-fg-2: #5C646B; --co-fg-3: #99A1A7; --co-line: rgba(20, 23, 26, 0.13); --co-line-soft: rgba(20, 23, 26, 0.07); --co-shadow: 0 1px 2px rgba(20, 23, 26, .05), 0 12px 28px -12px rgba(20, 23, 26, .18); --co-shadow-lift: 0 2px 4px rgba(20, 23, 26, .06), 0 28px 56px -20px rgba(20, 23, 26, .28); --co-ok: #2F7D5C; --co-err: #A6402F; /* ── Typografie ── */ --co-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif; --co-text: "Instrument Sans", ui-sans-serif, system-ui, sans-serif; /* ── Bewegung ── */ --co-cut: cubic-bezier(.16, 1, .3, 1); /* entschieden, wie ein Schnitt */ --co-spring: cubic-bezier(.34, 1.56, .64, 1); /* Overshoot — nur für den Stempel */ --co-t1: 200ms; --co-t2: 420ms; --co-t3: 720ms; /* Radien bewusst klein: Porzellan und Stahl haben präzise Kanten. Überall 12px Rundung ist die Handschrift jeder Vorlage. */ --co-r: 3px; --co-r-lg: 5px; } [data-theme="dark"] { --co-bg: #101315; --co-bg-rgb: 16 19 21; --co-surface: #181C1F; --co-surface-2: #212629; --co-fg: #ECEFEC; --co-fg-2: #99A2A8; --co-fg-3: #6B747A; --co-line: rgba(236, 239, 236, 0.14); --co-line-soft: rgba(236, 239, 236, 0.07); --co-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 16px 34px -14px rgba(0, 0, 0, .7); --co-shadow-lift: 0 2px 6px rgba(0, 0, 0, .55), 0 34px 64px -22px rgba(0, 0, 0, .8); --co-ok: #57B98B; --co-err: #E08975; } /* ═══ Basis ═══════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; } body { background: var(--co-bg); color: var(--co-fg); font-family: var(--co-text); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; } /* Zahlen sind hier Fahrplan-Daten — Uhrzeiten und Preise müssen untereinander stehen, sonst zappelt die Spalte. */ .co-num { font-variant-numeric: tabular-nums; letter-spacing: .01em; } :focus-visible { outline: 2px solid var(--co-accent); outline-offset: 3px; border-radius: 1px; } /* ═══ Der Schnitt — die Signaturbewegung ══════════════════════════════════ Ein Element wird von links freigelegt, statt zu faden. Die Haarlinie (::after) läuft der Kante voraus und verlässt das Element wieder. */ @keyframes co-cut-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes co-cut-line { 0% { transform: scaleY(0); opacity: 0; left: 0; } 12% { transform: scaleY(1); opacity: 1; } 88% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(0); opacity: 0; left: 100%; } } .co-cut { position: relative; animation: co-cut-reveal var(--co-t2) var(--co-cut) both; } .co-cut::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--co-accent); transform-origin: center; animation: co-cut-line var(--co-t2) var(--co-cut) both; pointer-events: none; } /* Gestaffelt — nie alles gleichzeitig. 70ms trägt den Blick von oben nach unten, ohne dass man aufs Warten kommt. */ .co-stagger > * { animation: co-cut-reveal var(--co-t2) var(--co-cut) both; } .co-stagger > *:nth-child(1) { animation-delay: 0ms; } .co-stagger > *:nth-child(2) { animation-delay: 70ms; } .co-stagger > *:nth-child(3) { animation-delay: 140ms; } .co-stagger > *:nth-child(4) { animation-delay: 210ms; } .co-stagger > *:nth-child(5) { animation-delay: 280ms; } .co-stagger > *:nth-child(6) { animation-delay: 350ms; } .co-stagger > *:nth-child(7) { animation-delay: 420ms; } .co-stagger > *:nth-child(8) { animation-delay: 490ms; } .co-stagger > *:nth-child(n+9) { animation-delay: 560ms; } /* ═══ Hero ════════════════════════════════════════════════════════════════ Der Salon zuerst, nicht die Preisliste. Ein Haarschnitt wird mit den Augen gekauft — wer den Raum sieht, entscheidet sich schneller. Der Hero funktioniert BEIDE Wege: mit Foto wird er cineastisch, ohne Foto trägt ihn die Typografie allein. Wichtig für eine Plattform — längst nicht jeder Salon lädt ein Bild hoch, und keiner darf deswegen billig aussehen. */ .co-hero { position: relative; min-height: clamp(380px, 64vh, 660px); display: flex; align-items: flex-end; overflow: hidden; background: var(--co-surface-2); isolation: isolate; } /* Ohne Foto: eine ruhige Fläche mit einem Hauch Akzent statt eines Lochs. */ .co-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 12% 0%, color-mix(in oklab, var(--co-accent) 18%, transparent), transparent 62%), var(--co-surface-2); z-index: -2; } .co-hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; /* Der Schnitt legt das Bild frei — jetzt hat die Signaturgeste endlich etwas, das sich zu enthüllen lohnt. */ animation: co-cut-reveal 900ms var(--co-cut) both; } /* ── Bildwechsel je Leistung ────────────────────────────────────────────── Zwei gestapelte Ebenen: die alte bleibt stehen, die neue wird mit demselben Schnitt von links freigelegt. Ein Kreuzblenden würde matschig aussehen — der Wipe ist die Geste, die zur Marke gehört, und er wirkt entschiedener. */ .co-hero__layer { position: absolute; inset: 0; overflow: hidden; } .co-hero__layer img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Die eingehende Ebene liegt oben und wird aufgeschnitten. */ .co-hero__layer--in { clip-path: inset(0 100% 0 0); transition: clip-path 900ms var(--co-cut); } .co-hero__layer--in.is-revealed { clip-path: inset(0 0 0 0); } /* Die Klinge, die dem Schnitt vorausläuft */ .co-hero__blade { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--co-accent); opacity: 0; pointer-events: none; box-shadow: 0 0 22px 3px color-mix(in oklab, var(--co-accent) 55%, transparent); } .co-hero__blade.is-cutting { animation: co-blade-sweep 900ms var(--co-cut) both; } @keyframes co-blade-sweep { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: 100%; opacity: 0; } } @media (prefers-reduced-motion: reduce) { .co-hero__layer--in { transition: none; clip-path: inset(0 0 0 0); } .co-hero__blade { display: none; } } /* ── Die Kamera ─────────────────────────────────────────────────────────── Ein einziges Salonfoto, aber der Bildausschnitt fährt mit der Auswahl mit: Haarschnitt → ran an den Stuhl, Waschen → zum Becken, Bestätigung → wieder auf den ganzen Raum. Kein Video, kein zweites Bild — nur object-position und scale, beide GPU-freundlich und weich überblendet. Die Brennpunkte kommen aus den Daten (service.focus), nicht aus dem Code: jeder Salon hat einen anderen Raum. Ohne Angabe verteilt die Seite sie deterministisch, damit die Fahrt nie ins Leere geht. */ .co-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; /* Startwerte. object-position und scale setzt camera() per JS direkt auf dem Element — beide sind hier als Übergang deklariert, die Fahrt entsteht also allein aus dem Wertwechsel. */ object-position: 50% 44%; transform: scale(1.04); transform-origin: center; transition: object-position 1500ms var(--co-cut), transform 1500ms var(--co-cut); will-change: transform, object-position; } @media (prefers-reduced-motion: reduce) { .co-hero__media img { transition: none; transform: none; } } /* Verlauf nach unten, damit die Schrift auf jedem Foto lesbar bleibt — ohne das Bild flach zu waschen. */ /* Verlauf mit expliziten Alpha-Werten (rgb(… / …)) statt color-mix: berechenbar und in jedem Theme gleich. Der Schwerpunkt liegt im unteren Drittel, weil dort die Schrift steht — ein Salonfoto hat oft genau da helle Flächen (Spiegel, Fenster), und weiße Schrift darauf ist unlesbar. */ .co-hero__grade { position: absolute; inset: 0; z-index: -1; background: linear-gradient( to top, rgb(var(--co-bg-rgb) / .96) 0%, rgb(var(--co-bg-rgb) / .72) 22%, rgb(var(--co-bg-rgb) / .28) 52%, rgb(var(--co-bg-rgb) / 0) 88% ); } .co-hero__inner { position: relative; width: 100%; max-width: 620px; margin: 0 auto; padding: 0 18px 34px; } .co-hero__name { font-family: var(--co-display); font-weight: 800; font-size: clamp(40px, 9.5vw, 84px); line-height: .94; letter-spacing: -.045em; margin: 10px 0 0; text-wrap: balance; } /* Die Kante als durchgehendes Gestaltungsmittel, nicht als Effekt. */ .co-blade { display: inline-block; width: 34px; height: 2px; background: var(--co-accent); vertical-align: middle; transform-origin: left; animation: co-blade-draw 620ms var(--co-cut) both; } @keyframes co-blade-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* ═══ Karte — die Terminkarte ist EIN Objekt, das seinen Zustand wechselt ══ */ .co-card { background: var(--co-surface); border: 1px solid var(--co-line); border-radius: var(--co-r-lg); box-shadow: var(--co-shadow); transition: box-shadow var(--co-t2) var(--co-cut); } .co-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 20px 22px 16px; border-bottom: 1px solid var(--co-line-soft); } .co-card__title { font-family: var(--co-display); font-weight: 600; font-size: 20px; letter-spacing: -.015em; margin: 0; } .co-card__hint { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--co-fg-3); white-space: nowrap; } /* ═══ Typo-Rollen ═════════════════════════════════════════════════════════ */ .co-wordmark { font-family: var(--co-display); font-weight: 700; font-size: clamp(30px, 7vw, 46px); line-height: 1.03; letter-spacing: -.035em; margin: 0; text-wrap: balance; } .co-kicker { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--co-accent); margin: 0; } .co-meta { font-size: 13.5px; color: var(--co-fg-2); margin: 0; } /* ═══ Buttons ═════════════════════════════════════════════════════════════ */ .co-btn { appearance: none; border: 1px solid transparent; border-radius: var(--co-r); background: var(--co-accent); color: var(--co-accent-fg); font-family: var(--co-text); font-size: 15px; font-weight: 600; padding: 14px 20px; width: 100%; cursor: pointer; position: relative; overflow: hidden; transition: transform var(--co-t1) var(--co-cut), filter var(--co-t1) var(--co-cut); } /* Eine Klinge fährt einmal quer durch — kein Aufhellen, kein Vergrößern. Der Lichtstreifen läuft nur bei Berührung, nicht als Dauerschleife. */ .co-btn::after { content: ""; position: absolute; top: -60%; bottom: -60%; left: -30%; width: 22%; background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--co-accent-fg) 34%, transparent), transparent); transform: translateX(-140%) rotate(14deg); transition: transform 620ms var(--co-cut); pointer-events: none; } .co-btn:hover::after { transform: translateX(620%) rotate(14deg); } .co-btn:active { transform: translateY(1px) scale(.995); } .co-btn[disabled] { opacity: .55; cursor: not-allowed; } .co-btn[disabled]::after { display: none; } @media (prefers-reduced-motion: reduce) { .co-btn::after { display: none; } } .co-btn--ghost { background: transparent; color: var(--co-fg-2); border-color: var(--co-line); font-weight: 500; } .co-btn--ghost:hover { color: var(--co-fg); border-color: var(--co-fg-3); filter: none; } /* ═══ Auswahl-Zeile (Leistungen) ══════════════════════════════════════════ Kein scale(1.05) beim Hover. Stattdessen zieht eine Kante von links durch die Zeile — dieselbe Geste wie der Schnitt, nur klein. */ .co-row { display: flex; align-items: baseline; gap: 14px; width: 100%; padding: 16px 22px; background: none; border: 0; border-bottom: 1px solid var(--co-line-soft); color: inherit; font: inherit; text-align: left; cursor: pointer; position: relative; } .co-row:last-child { border-bottom: 0; } .co-row__name { font-weight: 600; font-size: 15.5px; transition: color var(--co-t1) var(--co-cut); } .co-row__dur { font-size: 12.5px; color: var(--co-fg-3); margin-left: 8px; } /* Die Punktlinie zieht sich bei Berührung als durchgehende Akzentlinie von links zum Preis — die Zeile verbindet Leistung und Preis, statt dass ein Balken am Rand aufpoppt. Der Preis rückt dem Namen ein Stück entgegen. */ .co-row__fill { flex: 1; position: relative; border-bottom: 1px dotted var(--co-line); transform: translateY(-4px); } .co-row__fill::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--co-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--co-t2) var(--co-cut); } .co-row:hover .co-row__fill::after, .co-row:focus-visible .co-row__fill::after { transform: scaleX(1); } .co-row__price { font-weight: 600; font-size: 15.5px; white-space: nowrap; transition: transform var(--co-t2) var(--co-cut), color var(--co-t1) var(--co-cut); } .co-row:hover .co-row__price, .co-row:focus-visible .co-row__price { transform: translateX(-5px); color: var(--co-accent); } /* ═══ Tagesleiste ═════════════════════════════════════════════════════════ */ .co-days { display: flex; gap: 8px; overflow-x: auto; padding: 18px 22px; scroll-snap-type: x mandatory; scrollbar-width: none; } .co-days::-webkit-scrollbar { display: none; } .co-day { flex: 0 0 auto; scroll-snap-align: start; width: 62px; padding: 10px 0; background: var(--co-surface-2); border: 1px solid transparent; border-radius: var(--co-r); color: var(--co-fg-2); font: inherit; cursor: pointer; text-align: center; transition: background var(--co-t1) var(--co-cut), color var(--co-t1) var(--co-cut), border-color var(--co-t1) var(--co-cut); } .co-day:hover { color: var(--co-fg); } .co-day__dow { font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; } .co-day__num { font-family: var(--co-display); font-weight: 700; font-size: 21px; line-height: 1.15; color: var(--co-fg); } .co-day__mon { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; } .co-day.is-on { background: var(--co-accent); border-color: var(--co-accent); color: var(--co-accent-fg); } .co-day.is-on .co-day__num { color: var(--co-accent-fg); } /* ═══ Zeit-Raster ═════════════════════════════════════════════════════════ */ .co-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; padding: 18px 22px 22px; } .co-slot { padding: 12px 6px; background: none; border: 0; color: var(--co-fg); font: inherit; font-variant-numeric: tabular-nums; font-size: 15px; cursor: pointer; position: relative; } /* Der Schnitt sitzt auf der FORM, nicht auf der Schrift: bei Berührung werden zwei gegenüberliegende Ecken angefast, als wäre die Kachel schräg angeschnitten. Auf 15-px-Text las sich ein versetzter Schnitt als Doppelbild — die Kachel ist groß genug, um ihn zu tragen. Die Fläche liegt auf ::before, NICHT auf dem Button selbst: die Stagger-Animation (co-cut-reveal, fill-mode both) friert clip-path auf dem Button ein, und eine Animation schlägt jede normale Deklaration. Beide Zustände brauchen gleich viele Punkte, sonst animiert clip-path nicht. */ .co-slot::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--co-surface-2); border: 1px solid transparent; clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 0); transition: background var(--co-t1) var(--co-cut), border-color var(--co-t1) var(--co-cut), clip-path var(--co-t2) var(--co-cut); } .co-slot:hover::before, .co-slot.is-on::before { clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); } .co-slot:hover::before { border-color: var(--co-accent); } .co-slot.is-on::before { background: var(--co-accent); } .co-slot__t { position: relative; z-index: 1; display: inline-block; } .co-slot.is-on .co-slot__t { color: var(--co-accent-fg); } /* ═══ Formularfelder ══════════════════════════════════════════════════════ */ .co-field { display: grid; gap: 6px; padding: 0 22px 16px; } .co-field label { font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--co-fg-3); } .co-field input { padding: 13px 14px; background: var(--co-surface-2); border: 1px solid var(--co-line); border-radius: var(--co-r); color: var(--co-fg); font: inherit; transition: border-color var(--co-t1) var(--co-cut); } .co-field input:focus { border-color: var(--co-accent); outline: none; } .co-field input::placeholder { color: var(--co-fg-3); } /* ═══ Ticket + Stempel ════════════════════════════════════════════════════ Der Abschluss ist ein physisches Objekt: Perforation, echter Schatten, und ein Stempel, der mit Overshoot landet. Der eine Moment, den sich der Besucher merkt. */ .co-ticket { background: var(--co-surface); border: 1px solid var(--co-line); border-radius: var(--co-r-lg); box-shadow: var(--co-shadow-lift); overflow: hidden; position: relative; } .co-ticket__top { padding: 30px 24px 24px; text-align: center; position: relative; } /* Perforation zwischen Kopf und Beleg — mit den seitlichen Einkerbungen, die eine abgerissene Karte hat. */ .co-ticket__perf { position: relative; height: 1px; background-image: linear-gradient(90deg, var(--co-line) 0 6px, transparent 6px 12px); background-size: 12px 1px; } .co-ticket__perf::before, .co-ticket__perf::after { content: ""; position: absolute; top: 50%; width: 18px; height: 18px; border-radius: 50%; background: var(--co-bg); border: 1px solid var(--co-line); transform: translateY(-50%); } .co-ticket__perf::before { left: -10px; } .co-ticket__perf::after { right: -10px; } .co-ticket__body { padding: 20px 24px 26px; } .co-ticket__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--co-line-soft); } .co-ticket__row:last-of-type { border-bottom: 0; } .co-ticket__k { font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--co-fg-3); } .co-ticket__v { font-weight: 600; text-align: right; } .co-ticket__v--big { font-family: var(--co-display); font-size: 18px; letter-spacing: -.01em; } @keyframes co-stamp { 0% { transform: scale(1.9) rotate(-14deg); opacity: 0; } 55% { opacity: 1; } 100% { transform: scale(1) rotate(-5deg); opacity: 1; } } .co-stamp { width: 62px; height: 62px; margin: 0 auto 16px; border: 2px solid var(--co-ok); border-radius: 50%; display: grid; place-items: center; color: var(--co-ok); font-size: 27px; animation: co-stamp 620ms var(--co-spring) both; } /* ═══ Ladezustand ═════════════════════════════════════════════════════════ Kein Spinner. Eine Kante, die hin und her fährt — dieselbe Sprache. */ @keyframes co-scan { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .co-loading { position: relative; overflow: hidden; color: var(--co-fg-3); font-size: 13.5px; padding: 26px 22px; text-align: center; } .co-loading::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--co-accent), transparent); animation: co-scan 1.1s var(--co-cut) infinite; } .co-empty { padding: 26px 22px; text-align: center; color: var(--co-fg-3); font-size: 13.5px; } .co-msg { padding: 0 22px 14px; font-size: 13.5px; color: var(--co-err); min-height: 1em; } /* ═══ Schrittanzeige ══════════════════════════════════════════════════════ */ .co-steps { display: flex; align-items: center; justify-content: center; gap: 10px; } .co-step { display: flex; align-items: center; gap: 7px; font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--co-fg-3); transition: color var(--co-t2) var(--co-cut); } .co-step__dot { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--co-line); display: grid; place-items: center; font-size: 10px; transition: background var(--co-t2) var(--co-cut), border-color var(--co-t2) var(--co-cut), color var(--co-t2) var(--co-cut); } .co-step.is-on { color: var(--co-fg); } .co-step.is-on .co-step__dot { background: var(--co-accent); border-color: var(--co-accent); color: var(--co-accent-fg); } .co-step.is-done .co-step__dot { border-color: var(--co-accent); color: var(--co-accent); } .co-step__bar { width: 22px; height: 1px; background: var(--co-line); } /* ═══ Barrierefreiheit ════════════════════════════════════════════════════ Wer reduzierte Bewegung eingestellt hat, bekommt den Inhalt sofort und vollständig — nie einen leeren clip-path als Endzustand. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .co-cut, .co-stagger > * { clip-path: none !important; } .co-cut::after { display: none; } }