/* hemmersbach.tools — gemeinsames Stylesheet für index, impressum und datenschutz. Farben und Typo abgeleitet vom Design auf hemmersbach.com. Seitentypen werden über eine Klasse am unterschieden: body.home → Startseite mit Toolliste body.legal → Rechtstexte (Impressum, Datenschutz) Die seitentyp-spezifischen Element-Regeln stehen in :where(...), damit ihre Spezifität bei 0 bleibt und Klassen wie .eyebrow sie weiterhin überschreiben. */ /* ---------- Tokens ---------- */ :root{ --brand: hsl(17 89% 58%); --ink: hsl(0 0% 100%); --ink-soft: hsl(0 0% 66%); --ink-faint: hsl(0 0% 45%); --bg: hsl(240 2% 12%); --line: hsl(0 0% 24%); --font: "Archivo","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif; } /* ---------- Grundgerüst ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; min-height:100vh; display:flex;flex-direction:column; padding:clamp(2rem,6vw,4.5rem) clamp(1.25rem,5vw,3rem); font-family:var(--font); font-size:1rem;line-height:1.6; color:var(--ink);background:var(--bg); -webkit-font-smoothing:antialiased; } main{width:100%;max-width:720px;margin-inline:auto;flex:1} /* ---------- Brandmark ---------- */ .brandmark{ font-stretch:80%;font-weight:700; letter-spacing:-.01em;line-height:1; text-decoration:none;color:inherit; } .brandmark .dot{color:var(--brand)} .brandmark .sub{font-weight:400;color:var(--ink-soft)} /* Startseite: Brandmark ist die Seitenüberschrift, verlinkt auf die Startseite selbst */ .home .brandmark{margin:0;font-size:clamp(1.75rem,5vw,2.5rem)} .home .brandmark a{color:inherit;text-decoration:none} .home .brandmark a:focus-visible{ outline:2px solid var(--brand);outline-offset:.25rem;border-radius:2px; } /* Rechtstexte: Brandmark ist der Rücklink über dem Inhalt */ .legal .brandmark{ display:inline-flex;align-items:baseline;gap:.05rem; font-size:1.25rem; } /* ---------- Eyebrow ---------- */ .eyebrow{ font-size:.6875rem;font-weight:700; letter-spacing:.18em;text-transform:uppercase; color:var(--brand); } .home .eyebrow{margin:clamp(2.75rem,7vw,4rem) 0 1rem} .legal .eyebrow{margin:2.5rem 0 .6rem} .legal .eyebrow:first-of-type{margin-top:3rem} /* ---------- Startseite ---------- */ .intro{ margin:1.25rem 0 0;max-width:52ch; font-weight:300;color:var(--ink-soft); font-size:clamp(1rem,.95rem + .3vw,1.125rem); } /* Toolliste: eine Zeile pro Projekt, klickbar über die volle Breite */ .tools{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)} .tools a, .tools .tool-disabled{ display:flex;align-items:baseline;gap:1rem; padding:1.05rem .25rem; border-bottom:1px solid var(--line); text-decoration:none;color:inherit; } .tools a{ transition:padding-left .15s ease,background-color .15s ease; } .tools a:hover,.tools a:focus-visible{ background:hsl(0 0% 100% / .04); padding-left:.9rem; outline:none; } .tools a:focus-visible{box-shadow:inset 3px 0 0 var(--brand)} .tools a:hover .name{color:var(--brand)} .tools .tool-disabled{cursor:not-allowed} .tools .tool-disabled .name{color:var(--ink-soft)} .name{ font-stretch:82%;font-weight:700;text-transform:uppercase; font-size:1.0625rem;letter-spacing:.01em; transition:color .15s ease; } /* Zweiter Teil des Toolnamens in Signalorange — wie der Titel in der App selbst (.page-title-accent in partsurferreloaded/style.css). */ .name .accent{color:var(--brand)} .desc{ margin-left:auto;text-align:right; font-size:.875rem;font-weight:300;color:var(--ink-faint); } .coming-soon{ color:var(--brand);font-size:.6875rem;font-weight:700; letter-spacing:.08em;text-transform:uppercase;white-space:nowrap; } .highlight{color:var(--brand)} @media (max-width:560px){ .tools a,.tools .tool-disabled{flex-direction:column;gap:.2rem} .desc{margin-left:0;text-align:left} } /* ---------- Rechtstexte ---------- */ :where(.legal) h1{ font-stretch:80%;font-weight:700;text-transform:uppercase; letter-spacing:.01em;line-height:1.06; font-size:clamp(1.6rem,1.2rem + 1.6vw,2.35rem); margin:0 0 2rem; } :where(.legal) h2{ font-stretch:82%;font-weight:700;font-size:1rem; text-transform:uppercase;letter-spacing:.03em; margin:0 0 .9rem; } :where(.legal) section + section{ margin-top:2.25rem;padding-top:2.25rem; border-top:1px solid var(--line); } :where(.legal) p{margin:0 0 .9rem;color:var(--ink-soft);font-weight:300} :where(.legal) p:last-child{margin-bottom:0} :where(.legal) a{color:var(--brand);text-underline-offset:.15em} :where(.legal) a:hover{color:var(--ink)} .placeholder{color:hsl(38 95% 58%)} /* ---------- Footer ---------- */ footer{ width:100%;max-width:720px;margin:clamp(3rem,8vw,5rem) auto 0; padding-top:1.25rem;border-top:1px solid var(--line); font-size:.8125rem;font-weight:300;line-height:1.5; color:var(--ink-faint); } footer p{margin:0;color:inherit} footer p + p{margin-top:.5rem} footer strong{font-weight:700;color:var(--ink-soft)} footer .dot{color:var(--brand)} footer a{color:var(--ink-soft)} footer a:hover{color:var(--brand)} /* Kein prefers-reduced-motion-Block: Die Übergänge laufen absichtlich auch dann, wenn im Betriebssystem "Animationen anzeigen" aus steht — vgl. den Kopf von partsurferreloaded/style.css. */