/* =================================================================== Julian Rolfes — Fotografie Minimalistisches Galerie-Theme im CD – hell und dunkel. Fonts self-hosted (identisch zu rolfes.sh); Farben CD-basiert. Hell = Sand/Ink des CD, Dunkel = auf dunklen Grund übersetzt; die Wahl folgt der Browser-/System-Einstellung. Fotos stehen im Vordergrund. =================================================================== */ /* ---- Web Fonts (self-hosted, wie rolfes.sh) ---- */ @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap; src:url(fonts/inter-latin-ext-400.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap; src:url(fonts/inter-latin-400.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap; src:url(fonts/inter-latin-ext-400.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap; src:url(fonts/inter-latin-400.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Fraunces';font-style:normal;font-weight:400 600;font-display:swap; src:url(fonts/fraunces-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Fraunces';font-style:normal;font-weight:400 600;font-display:swap; src:url(fonts/fraunces-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} /* ---- Tokens (CD) ---- Ein Wert je Rolle: light-dark(hell, dunkel). Welche Hälfte greift, entscheidet `color-scheme` – ohne Zutun die Browser-/System-Einstellung, sonst die manuelle Wahl über den Schalter im Kopf (data-theme am , siehe js/theme.js). Farben also nur hier ändern, beide Modi ziehen mit. */ :root{ color-scheme: light dark; --bg: light-dark(#faf7f2, #121815); /* Sand-50 / Near-Black mit grünem Unterton */ --bg-elev: light-dark(#f3ede3, #1a231f); /* leicht abgesetzte Fläche */ --line: light-dark(#e8dfd1, rgba(233,227,214,.12)); --fg: light-dark(#1f2723, #ece6da); /* Ink / warmes Sand-Licht */ --fg-soft: light-dark(#4a544e, #98a09a); /* gedämpft */ --accent: light-dark(#c98a5e, #cf9168); /* Terrakotta, dunkel leicht angehoben */ --on-accent: light-dark(#1f2723, #1a120c); /* Text auf Terrakotta-Fläche */ --green-700: #2f5d50; /* CD-Grün für die Wortmarke */ --lb-bg: light-dark(rgba(250,247,242,.96), rgba(9,12,11,.94)); --lb-shadow: light-dark(rgba(31,39,35,.22), rgba(0,0,0,.5)); /* Schrift auf dem Bild-Verlauf bleibt in beiden Modi hell */ --on-photo: #f2ece2; --on-photo-soft: rgba(242,236,226,.78); --g: 6px; /* Galerie-Fuge – schmal, Fotos zusammenrücken */ --rowh: 320px; /* Ziel-Zeilenhöhe der Justified-Galerie */ --maxw: 1600px; --pad: clamp(1.1rem, 3.5vw, 2.6rem); --font-head: "Fraunces", Georgia, "Times New Roman", serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* Manuelle Wahl schlägt die Systemeinstellung. */ :root[data-theme="light"]{color-scheme:light;} :root[data-theme="dark"] {color-scheme:dark;} *,*::before,*::after{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;background:var(--bg);} @media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;}} body{ margin:0; background:var(--bg); color:var(--fg); font-family:var(--font-body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{max-width:100%;display:block;} /* Verhindert nur das versehentliche Ziehen aufs Desktop – kein Schutz vor Speichern, aber auch ohne Nachteil. Rechtsklick bleibt bewusst nutzbar. */ img{-webkit-user-drag:none;user-select:none;} a{color:inherit;text-decoration:none;} .skip-link{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--on-accent); padding:.6rem 1rem;border-radius:0 0 6px 0;z-index:1000;} .skip-link:focus{left:0;} ::selection{background:var(--accent);color:var(--on-accent);} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;} /* ---- Header ---- */ .site-header{ display:flex;align-items:center;justify-content:space-between;gap:1.5rem; padding:1.1rem var(--pad); position:sticky;top:0;z-index:50; background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:saturate(120%) blur(8px); border-bottom:1px solid var(--line); } .brand{display:inline-flex;align-items:center;gap:.7rem;} .brand__mark{ width:2rem;height:2rem;border-radius:50%; display:grid;place-items:center; background:var(--green-700);color:#fff; font-family:var(--font-head);font-size:1.05rem;line-height:1; } .brand__text{font-weight:600;letter-spacing:.01em;font-size:.95rem;} .site-nav{display:flex;align-items:center;gap:clamp(.9rem,2.4vw,1.8rem); font-size:.82rem;letter-spacing:.04em;} .site-nav a{color:var(--fg-soft);padding:.2rem 0;position:relative;transition:color .2s ease;} .site-nav a:hover{color:var(--fg);} .site-nav a[aria-current="page"]{color:var(--fg);} .site-nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-.35rem; height:2px;background:var(--accent);} /* ---- Design-Schalter ---- */ .site-header__end{display:flex;align-items:center;gap:clamp(.9rem,2.4vw,1.8rem);} /* Ohne JavaScript bleibt der Knopf unsichtbar – dann zählt allein die Systemwahl. Das data-theme-Attribut setzt das Inline-Snippet in head.html. */ .theme-toggle{display:none;} :root[data-mode] .theme-toggle{ display:inline-grid;place-items:center; width:2rem;height:2rem;padding:0; background:none;border:0;border-radius:50%; color:var(--fg-soft);cursor:pointer; transition:color .2s ease,background-color .2s ease; } .theme-toggle:hover{color:var(--fg);background:var(--bg-elev);} /* Gezeigt wird der aktuelle Zustand: Auto (halb gefüllt) · Sonne · Mond. Bewusst ohne Animation – der Tausch ist hart, nur die Farben blenden über. */ .theme-toggle svg{display:none;} :root[data-mode="auto"] .theme-toggle .ico--auto{display:block;} :root[data-mode="light"] .theme-toggle .ico--sun {display:block;} :root[data-mode="dark"] .theme-toggle .ico--moon{display:block;} /* ---- Masthead (Startseite) ---- */ .masthead{padding:clamp(2.6rem,7vw,5.5rem) var(--pad) clamp(1.6rem,4vw,3rem);} .masthead__title{font-family:var(--font-head);font-weight:500; font-size:clamp(2.6rem,7vw,4.6rem);line-height:1.02;margin:0;letter-spacing:-.01em;} .masthead__title::after{content:"";display:block;width:2.6rem;height:2px; background:var(--accent);margin-top:1.1rem;} .masthead__lead{margin:1.1rem 0 0;color:var(--fg-soft);max-width:46ch; font-size:1.02rem;letter-spacing:.01em;} /* ---- Album-Übersicht ---- */ .albums{ display:grid;gap:var(--g); grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr)); padding:0 var(--pad) var(--pad);max-width:var(--maxw);margin:0 auto; } .album{position:relative;overflow:hidden;background:var(--bg-elev);aspect-ratio:3/2;} .album__img{width:100%;height:100%;object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .4s ease;filter:saturate(.96);} .album::after{content:"";position:absolute;inset:0; background:linear-gradient(to top,rgba(10,14,12,.72) 0%,rgba(10,14,12,.12) 42%,transparent 70%);} .album:hover .album__img{transform:scale(1.035);filter:saturate(1.05);} .album__meta{position:absolute;left:0;right:0;bottom:0;z-index:2;color:var(--on-photo); display:flex;align-items:baseline;justify-content:space-between;gap:1rem; padding:1rem 1.15rem;} .album__name{font-family:var(--font-head);font-size:1.35rem;font-weight:500;} .album__name::before{content:"";display:inline-block;width:1.4rem;height:2px;vertical-align:middle; background:var(--accent);margin-right:.6rem;transition:width .4s cubic-bezier(.2,.7,.2,1);} .album:hover .album__name::before{width:2.4rem;} .album__count{color:var(--on-photo-soft);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;} /* ---- Album-Kopf ---- */ .album-head{padding:clamp(2rem,5vw,3.4rem) var(--pad) clamp(1.2rem,3vw,2rem); max-width:var(--maxw);margin:0 auto;} .album-head__title{font-family:var(--font-head);font-weight:500; font-size:clamp(2rem,5vw,3.2rem);margin:0;line-height:1.05;} .album-head__title::after{content:"";display:block;width:2.2rem;height:2px;background:var(--accent);margin-top:.9rem;} .album-head__lead{margin:1rem 0 0;color:var(--fg-soft);max-width:52ch;} .album-head__count{margin:.5rem 0 0;color:var(--fg-soft);font-size:.72rem; letter-spacing:.18em;text-transform:uppercase;} /* ---- Justified-Galerie ---- */ .gallery{display:flex;flex-wrap:wrap;gap:var(--g); padding:0 var(--pad) var(--pad);max-width:var(--maxw);margin:0 auto;} .tile{position:relative;height:var(--rowh);overflow:hidden;background:var(--bg-elev);cursor:zoom-in;} .tile__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .4s ease;} .tile::after{content:"";position:absolute;inset:0;background:rgba(10,14,12,0);transition:background .3s ease;} .tile:hover .tile__img{transform:scale(1.04);} .tile:hover::after{background:rgba(10,14,12,.12);} /* ---- Lightbox ---- */ .lightbox{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center; background:var(--lb-bg);opacity:0;transition:opacity .28s ease;} .lightbox[hidden]{display:none;} .lightbox.is-open{opacity:1;} .lightbox__stage{margin:0;max-width:92vw;max-height:88vh;display:flex;flex-direction:column;align-items:center;gap:.9rem;} .lightbox__img{max-width:92vw;max-height:82vh;width:auto;height:auto;object-fit:contain; box-shadow:0 30px 80px var(--lb-shadow);opacity:0;transition:opacity .25s ease;} .lightbox__img.is-loaded{opacity:1;} .lightbox__cap{display:flex;flex-direction:column;align-items:center;gap:.4rem;text-align:center;} .lightbox__caption{color:var(--fg-soft);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;} .lightbox__exif{color:var(--fg-soft);opacity:.72;font-size:.7rem;letter-spacing:.06em; font-variant-numeric:tabular-nums;max-width:90vw;} .lightbox__exif:empty{display:none;} .lightbox__btn{position:absolute;background:none;border:0;color:var(--fg);cursor:pointer; font-size:2.4rem;line-height:1;padding:.4rem .7rem;opacity:.72;transition:opacity .2s ease,color .2s ease; font-family:var(--font-body);} .lightbox__btn:hover{opacity:1;color:var(--accent);} .lightbox__close{top:.6rem;right:1rem;font-size:2.6rem;} .lightbox__prev{left:.4rem;top:50%;transform:translateY(-50%);} .lightbox__next{right:.4rem;top:50%;transform:translateY(-50%);} /* ---- Footer ---- */ .site-footer{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;justify-content:center; padding:2.4rem var(--pad) 3rem;border-top:1px solid var(--line);margin-top:1.5rem; color:var(--fg-soft);font-size:.8rem;letter-spacing:.02em;} .site-footer a{color:var(--fg-soft);transition:color .2s ease;} .site-footer a:hover{color:var(--accent);} .site-footer__sep{opacity:.5;} /* ---- Responsive Zeilenhöhen ---- */ @media (max-width:900px){:root{--rowh:240px;}} @media (max-width:560px){ :root{--rowh:180px;--g:4px;} .site-header{flex-wrap:wrap;gap:.7rem;} .lightbox__prev{left:0;}.lightbox__next{right:0;} } /* ---- Überblendung beim Design-Wechsel ---- Gilt nur, solange js/theme.js die Klasse setzt (~1/3 Sekunde). Dauerhaft auf alles gelegt würde sonst jede Farbänderung im Alltag mitziehen. Das selbst bleibt bewusst außen vor: dort liest theme.js die Zielfarbe für die Browserleiste ab und bekäme sonst einen Zwischenwert. */ @media (prefers-reduced-motion:no-preference){ :root.theme-switching *, :root.theme-switching *::before, :root.theme-switching *::after{ transition:background-color .4s ease,color .4s ease,border-color .4s ease, box-shadow .4s ease,fill .4s ease,stroke .4s ease!important; } }