/* ============================================ rogerhotz.ch — Master Stylesheet Painter portfolio (Roger Hotz, St. Gallen) ============================================ */ /* --- Utilities --- */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* --- Language switching --- Show/hide nodes based on the document language. The attribute is the single source of truth; JS only flips that attribute (and persists choice). */ html[lang|="de"] [data-lang="en"] { display: none !important; } html[lang|="en"] [data-lang="de"] { display: none !important; } /* --- Reset --- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* --- Design Tokens --- */ :root { /* Spacing (8px base) */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 2rem; --space-lg: 4rem; --space-xl: 8rem; --space-2xl: 10rem; /* Colours — warm monochrome */ --bg-primary: #FFFFFF; --bg-warm: #F7F6F3; --bg-soft: #F4F4F4; /* light neutral grey for the angled hero slab */ --bg-dark: #0a0a0a; --text-primary: #111111; --text-secondary: #666666; --text-muted: #999999; --border: #EAEAEA; --border-subtle: rgba(0, 0, 0, 0.06); /* Typography — Courier Prime: clean modernised typewriter, matches Roger's PDF */ --font-typewriter: 'Courier Prime', 'Courier New', 'Courier', monospace; --font-sans: 'Inter', 'SF Pro Text', 'Helvetica Neue', system-ui, -apple-system, sans-serif; --font-serif: 'Courier Prime', 'Courier New', Georgia, serif; --font-mono: 'Courier Prime', 'SF Mono', 'JetBrains Mono', monospace; /* Motion */ --ease-premium: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.32, 0.72, 0, 1); --duration-fast: 200ms; --duration-normal: 400ms; --duration-slow: 700ms; --duration-reveal: 800ms; /* Layout */ --max-width: 1200px; --max-width-text: 65ch; --nav-height: 4rem; } /* --- Typography --- */ html { font-family: var(--font-sans); font-size: 16px; line-height: 1.6; color: var(--text-primary); background: var(--bg-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { min-height: 100dvh; overflow-x: hidden; } h1, h2, h3 { font-family: var(--font-typewriter); letter-spacing: 0; line-height: 1.15; color: var(--text-primary); font-weight: 400; } h1 { font-size: clamp(2.25rem, 5.5vw, 4.25rem); } h2 { font-size: clamp(1.75rem, 3.5vw, 2.75rem); } h3 { font-size: clamp(1.125rem, 2vw, 1.5rem); } p { max-width: var(--max-width-text); color: var(--text-secondary); line-height: 1.7; } a { color: var(--text-primary); text-decoration: none; } img { display: block; max-width: 100%; height: auto; } /* --- Layout --- */ .container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-md); } .section { padding: var(--space-xl) 0; } .section--large { padding: var(--space-2xl) 0; } /* --- Navigation --- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-height); display: flex; align-items: center; transition: background var(--duration-normal) var(--ease-premium), backdrop-filter var(--duration-normal) var(--ease-premium); } .nav--scrolled { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-subtle); } .nav__inner { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-md); display: flex; align-items: center; justify-content: space-between; } .nav__logo { font-family: var(--font-sans); font-size: 0.875rem; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 500; color: var(--text-primary); transition: opacity var(--duration-fast) var(--ease-premium); } .nav__logo:hover { opacity: 0.7; } .nav__links { display: flex; gap: var(--space-md); list-style: none; align-items: center; } /* Language switcher (DE/EN) */ .lang-switch { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: var(--space-md); font-family: var(--font-sans); font-size: 0.75rem; letter-spacing: 0.1em; color: var(--text-muted); } .lang-switch__btn { background: none; border: none; padding: 2px 0; color: var(--text-muted); font: inherit; letter-spacing: inherit; cursor: pointer; text-transform: uppercase; transition: color var(--duration-fast) var(--ease-premium); } .lang-switch__btn:hover { color: var(--text-primary); } html[lang|="de"] .lang-switch__btn[data-set-lang="de"], html[lang|="en"] .lang-switch__btn[data-set-lang="en"] { color: var(--text-primary); border-bottom: 1px solid var(--text-primary); } .lang-switch__sep { color: var(--border); } .lang-switch--overlay { margin-left: 0; font-size: 1.125rem; letter-spacing: 0.15em; } .nav__link { font-family: var(--font-sans); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); position: relative; transition: color var(--duration-fast) var(--ease-premium); } .nav__link:hover { color: var(--text-primary); } .nav__link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1px; background: var(--text-primary); transition: width var(--duration-normal) var(--ease-premium); } .nav__link:hover::after { width: 100%; } .nav__link--active { color: var(--text-primary); } /* Hamburger */ .nav__hamburger { display: none; flex-direction: column; justify-content: center; gap: 6px; width: 24px; height: 24px; background: none; border: none; cursor: pointer; padding: 0; } .nav__hamburger span { display: block; width: 100%; height: 1.5px; background: var(--text-primary); transition: transform var(--duration-normal) var(--ease-premium), opacity var(--duration-fast) var(--ease-premium); transform-origin: center; } .nav__hamburger--open span:first-child { transform: translateY(3.75px) rotate(45deg); } .nav__hamburger--open span:last-child { transform: translateY(-3.75px) rotate(-45deg); } /* Mobile overlay */ .nav__overlay { position: fixed; inset: 0; z-index: 99; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity var(--duration-slow) var(--ease-premium); } .nav__overlay--open { opacity: 1; pointer-events: all; } .nav__overlay-links { list-style: none; text-align: center; display: flex; flex-direction: column; gap: var(--space-lg); } .nav__overlay-link { font-family: var(--font-serif); font-size: 2.5rem; letter-spacing: -0.02em; color: var(--text-primary); opacity: 0; transform: translateY(20px); transition: opacity var(--duration-reveal) var(--ease-premium), transform var(--duration-reveal) var(--ease-premium); } .nav__overlay--open .nav__overlay-link:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 100ms; } .nav__overlay--open .nav__overlay-link:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 180ms; } .nav__overlay--open .nav__overlay-link:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 260ms; } .nav__overlay--open .nav__overlay-link:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 340ms; } /* --- Home Entrée (Roger's about-me text from his PDF) --- Hero pull-quote on top, supporting bio + signature below. The whole block is vertically centred in the viewport so the hero line lands as the reader's first impression. */ .entree { min-height: 100vh; display: flex; align-items: center; padding: calc(var(--nav-height) + var(--space-md)) 0 var(--space-lg); } .entree__inner { max-width: 900px; } .entree__hero { font-family: var(--font-typewriter); font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.12; letter-spacing: -0.01em; font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-md); max-width: 22ch; } .entree__body { font-family: var(--font-typewriter); font-size: clamp(1rem, 1.4vw, 1.1875rem); line-height: 1.7; color: var(--text-secondary); font-weight: 400; margin-bottom: var(--space-md); max-width: 60ch; } .entree__signature { font-family: var(--font-typewriter); font-size: clamp(0.9375rem, 1.1vw, 1.0625rem); color: var(--text-primary); margin-top: var(--space-md); margin-bottom: 0; } /* Word-fall animation — only words tagged .word--animate take part. JS picks the top N visible words (by Y) and tags them; the rest render as plain visible text. This locks in the "top of the entrée flies in, the body is already settled" feel. IMPORTANT: transitions live on the --play rule, NOT the off-state rule. That way the off-state lands instantly (no fade-out animation), and the transition only fires once when --play is added → off-to-on animation runs cleanly for every animated word, including those with long delays. */ .entree__animated .word { display: inline-block; } .entree__animated .word--animate { opacity: 0; transform: translate3d(var(--word-x, 0), var(--word-y, -40px), 0) scale(var(--word-scale, 1.2)) rotate(var(--word-rot, 0deg)); filter: blur(var(--word-blur, 10px)); will-change: opacity, transform, filter; } .entree__animated.entree__animated--play .word--animate { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(0deg); filter: blur(0); transition: opacity 1100ms cubic-bezier(0.22, 1, 0.36, 1), transform 1400ms cubic-bezier(0.22, 1, 0.36, 1), filter 1100ms cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--word-delay, 0ms); } @media (prefers-reduced-motion: reduce) { .entree__animated .word--animate { opacity: 1; transform: none; filter: none; } .entree__animated.entree__animated--play .word--animate { transition: none; } } @media (max-width: 767px) { .entree { min-height: calc(100vh - var(--nav-height)); } .entree__hero { font-size: clamp(1.75rem, 8vw, 2.5rem); max-width: none; } .entree__body { font-size: 0.9375rem; } } /* --- Home Hero (Into the Abstract title block) --- Sits inside an angled light-grey slab. The slab is a ::before pseudo so the section content (heading, lede, CTA) stays unrotated. Adjust --slab-angle to tune the tilt — the user-suggested 12° creates a ~250px height differential across a wide screen, which reads as dramatic; 3° is a more "slight" angle. Set higher if you want more drama. */ .home-hero { --slab-angle: 3deg; position: relative; z-index: 0; padding: var(--space-xl) 0; margin: 3vw 0; /* breathing room so the angled corners can extend into white space */ } .home-hero::before { content: ''; position: absolute; inset: -3vw 0; /* a little extra so the tilted edges feel anchored */ background: var(--bg-soft); transform: skewY(calc(-1 * var(--slab-angle))); transform-origin: center; z-index: -1; pointer-events: none; } .home-hero__inner { max-width: 720px; } .home-hero__eyebrow { font-family: var(--font-sans); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-md); } .home-hero__title { font-family: var(--font-typewriter); margin-bottom: var(--space-md); } .home-hero__lede { font-family: var(--font-sans); font-size: 1.0625rem; line-height: 1.7; color: var(--text-secondary); margin-bottom: var(--space-md); max-width: 52ch; } .home-hero__cta { display: inline-block; font-family: var(--font-sans); font-size: 0.875rem; letter-spacing: 0.05em; color: var(--text-primary); border-bottom: 1px solid var(--text-primary); padding-bottom: 2px; transition: opacity var(--duration-fast) var(--ease-premium); } .home-hero__cta:hover { opacity: 0.6; } /* --- Featured Section (Home) --- */ .featured { padding: var(--space-xl) 0 var(--space-2xl); } .featured__header { margin-bottom: var(--space-lg); display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); } .featured__label { font-family: var(--font-typewriter); font-size: 0.875rem; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: var(--space-sm); } .featured__view-all { font-family: var(--font-sans); font-size: 0.8125rem; color: var(--text-muted); letter-spacing: 0.05em; border-bottom: 1px solid var(--border); padding-bottom: 2px; transition: color var(--duration-fast) var(--ease-premium), border-color var(--duration-fast) var(--ease-premium); white-space: nowrap; } .featured__view-all:hover { color: var(--text-primary); border-color: var(--text-primary); } /* --- Painting Grid --- */ .painting-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-md) var(--space-md); padding: var(--space-sm) 0 0; } .painting-grid--featured { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-lg) var(--space-md); padding: 0; } /* --- Abstract Index (Into the Abstract listing page) --- */ .abstract-index { padding: calc(var(--nav-height) + var(--space-md)) 0 var(--space-lg); } /* --- Category Blocks (Into the Abstract index) --- */ .category-block { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--border); } .category-block:first-of-type { margin-top: 0; border-top: none; padding-top: 0; } .category-block__header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-xs); } .category-block__title { font-family: var(--font-typewriter); font-size: clamp(1.25rem, 2.4vw, 1.75rem); } .category-block__link { font-family: var(--font-sans); font-size: 0.8125rem; color: var(--text-muted); border-bottom: 1px solid var(--border); padding-bottom: 2px; transition: color var(--duration-fast) var(--ease-premium), border-color var(--duration-fast) var(--ease-premium); white-space: nowrap; } .category-block__link:hover { color: var(--text-primary); border-color: var(--text-primary); } .category-block__empty { font-family: var(--font-typewriter); color: var(--text-muted); padding: var(--space-md) 0; } .category-back-link { color: var(--text-muted); border-bottom: 1px dashed var(--border); padding-bottom: 1px; transition: color var(--duration-fast) var(--ease-premium); } .category-back-link:hover { color: var(--text-primary); } /* --- Painting Card --- Layout: white background page, image inside a frame whose backdrop is a blurred + upscaled copy of the same image (Instagram-story style). */ .painting-card { display: block; position: relative; cursor: pointer; text-decoration: none; color: inherit; } .painting-card__frame { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-warm); isolation: isolate; /* keep the underlay visually contained */ } .painting-card__underlay { position: absolute; inset: -8%; /* over-bleed so blur edges don't reveal background */ width: 116%; height: 116%; object-fit: cover; filter: blur(28px) saturate(1.15) brightness(1.05); transform: scale(1.1); opacity: 0.85; z-index: 0; pointer-events: none; transition: opacity var(--duration-slow) var(--ease-premium), filter var(--duration-slow) var(--ease-premium); } .painting-card__image-wrap { position: relative; z-index: 1; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: clamp(0.75rem, 3%, 1.5rem); } .painting-card__image-wrap--empty { background: var(--bg-warm); } .painting-card__image { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.12); transition: transform var(--duration-slow) var(--ease-premium); } .painting-card:hover .painting-card__image { transform: scale(1.02); } .painting-card:hover .painting-card__underlay { opacity: 0.95; } .painting-card__caption { padding: 0.75rem 0 0; } .painting-card__title { font-family: var(--font-typewriter); font-size: 0.9375rem; letter-spacing: 0; color: var(--text-primary); margin-bottom: 0.25rem; } .painting-card__meta { font-family: var(--font-sans); font-size: 0.75rem; color: var(--text-secondary); line-height: 1.5; margin-bottom: 0.4rem; } /* Status dot — subtle linear green/red gradient backing */ .painting-card__status { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-sans); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); padding: 0.25rem 0.625rem; border-radius: 999px; } .painting-card__status--available { background: linear-gradient(90deg, rgba(120, 180, 130, 0.15) 0%, rgba(120, 180, 130, 0) 100%); color: #2f6a3a; } .painting-card__status--sold { background: linear-gradient(90deg, rgba(200, 90, 90, 0.18) 0%, rgba(200, 90, 90, 0) 100%); color: #8a2f2f; } .painting-card__status-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; } .painting-card__status--available .painting-card__status-dot { background: #4caf6a; box-shadow: 0 0 0 2px rgba(76, 175, 106, 0.18); } .painting-card__status--sold .painting-card__status-dot { background: #c14b4b; box-shadow: 0 0 0 2px rgba(193, 75, 75, 0.18); } /* --- Painting Lightbox (replaces the old detail layout) --- Full-viewport backdrop with three modes (data-bg = black | white | blur). All colours read from CSS custom properties so each mode swaps cleanly. */ body.lightbox-open { overflow: hidden; background: #000; } .lightbox { /* Default theme tokens — overridden per [data-bg] below */ --lb-bg-solid: #000; --lb-text: #fff; --lb-text-muted: rgba(255, 255, 255, 0.65); --lb-text-soft: rgba(255, 255, 255, 0.45); --lb-divider: rgba(255, 255, 255, 0.25); --lb-cta-bg: #fff; --lb-cta-text: #000; --lb-status-available-bg: linear-gradient(90deg, rgba(120, 200, 140, 0.22), rgba(120, 200, 140, 0)); --lb-status-available-color: rgb(170, 220, 180); --lb-status-available-dot: #6fcf85; --lb-status-sold-bg: linear-gradient(90deg, rgba(220, 110, 110, 0.28), rgba(220, 110, 110, 0)); --lb-status-sold-color: rgb(240, 175, 175); --lb-status-sold-dot: #e07070; position: fixed; inset: 0; background: var(--lb-bg-solid); color: var(--lb-text); display: flex; flex-direction: column; z-index: 50; transition: background 300ms var(--ease-premium), color 300ms var(--ease-premium); } /* WHITE mode — flip text colours, dark CTA */ .lightbox[data-bg="white"] { --lb-bg-solid: #ffffff; --lb-text: #111111; --lb-text-muted: rgba(0, 0, 0, 0.6); --lb-text-soft: rgba(0, 0, 0, 0.4); --lb-divider: rgba(0, 0, 0, 0.18); --lb-cta-bg: #111; --lb-cta-text: #fff; --lb-status-available-bg: linear-gradient(90deg, rgba(76, 175, 106, 0.18), rgba(76, 175, 106, 0)); --lb-status-available-color: #2f6a3a; --lb-status-available-dot: #4caf6a; --lb-status-sold-bg: linear-gradient(90deg, rgba(193, 75, 75, 0.18), rgba(193, 75, 75, 0)); --lb-status-sold-color: #8a2f2f; --lb-status-sold-dot: #c14b4b; } /* BLUR mode — keep light text, the blurred image becomes the background */ .lightbox[data-bg="blur"] { --lb-bg-solid: #1a1a1a; /* visible only briefly while blur layer fades in */ --lb-text-muted: rgba(255, 255, 255, 0.78); --lb-text-soft: rgba(255, 255, 255, 0.6); } /* Blurred backdrop layer — visible only when data-bg="blur". JS sets background-image to the active slide's src. */ .lightbox__bg { position: absolute; inset: -6%; width: 112%; height: 112%; z-index: 0; background-size: cover; background-position: center; filter: blur(50px) saturate(1.2); opacity: 0; transform: scale(1.05); transition: opacity 500ms var(--ease-premium); pointer-events: none; } .lightbox__bg-tint { position: absolute; inset: 0; z-index: 0; opacity: 0; background: rgba(0, 0, 0, 0.18); transition: opacity 500ms var(--ease-premium); pointer-events: none; } .lightbox[data-bg="blur"] .lightbox__bg, .lightbox[data-bg="blur"] .lightbox__bg-tint { opacity: 1; } .lightbox__chrome { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-sm) var(--space-md); font-family: var(--font-typewriter); font-size: 0.875rem; color: var(--lb-text-muted); } .lightbox__chrome--bottom { align-items: flex-end; } .lightbox__close { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; margin-left: -0.5rem; color: var(--lb-text); font-size: 1.75rem; line-height: 1; text-decoration: none; transition: opacity var(--duration-fast) var(--ease-premium); } .lightbox__close:hover { opacity: 0.6; } /* Top-right cluster: bg switcher + image counter */ .lightbox__top-right { display: flex; align-items: center; gap: var(--space-md); } /* Background mode switcher (Black / White / Blur) — pill of three text buttons */ .lightbox__bg-switch { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-sans); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lb-text-soft); } .lightbox__bg-btn { background: none; border: none; padding: 2px 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; transition: color var(--duration-fast) var(--ease-premium), border-color var(--duration-fast) var(--ease-premium); border-bottom: 1px solid transparent; } .lightbox__bg-btn:hover { color: var(--lb-text); } .lightbox[data-bg="black"] [data-set-lightbox-bg="black"], .lightbox[data-bg="white"] [data-set-lightbox-bg="white"], .lightbox[data-bg="blur"] [data-set-lightbox-bg="blur"] { color: var(--lb-text); border-bottom-color: var(--lb-text); } .lightbox__bg-sep { color: var(--lb-divider); } .lightbox__counter { font-family: var(--font-typewriter); letter-spacing: 0.08em; font-size: 0.8125rem; color: var(--lb-text-soft); } .lightbox__counter-sep { margin: 0 0.4rem; color: var(--lb-divider); } .lightbox__stage { position: relative; flex: 1; min-height: 0; z-index: 1; } .lightbox__slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: var(--space-md) clamp(var(--space-md), 8vw, 5rem); opacity: 0; pointer-events: none; transition: opacity 350ms var(--ease-premium); } .lightbox__slide--active { opacity: 1; pointer-events: auto; } .lightbox__image { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; user-select: none; -webkit-user-drag: none; } .lightbox__empty { font-family: var(--font-typewriter); color: var(--lb-text-soft); font-size: 0.9375rem; letter-spacing: 0.05em; } .lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 3rem; height: 4rem; background: none; border: none; color: var(--lb-text-soft); font-size: 2.5rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: serif; transition: color var(--duration-fast) var(--ease-premium), transform var(--duration-fast) var(--ease-premium); } .lightbox__nav:hover { color: var(--lb-text); } .lightbox__nav--prev { left: 0; } .lightbox__nav--next { right: 0; } .lightbox__nav--prev:hover { transform: translate(-2px, -50%); } .lightbox__nav--next:hover { transform: translate(2px, -50%); } .lightbox__meta { font-family: var(--font-typewriter); display: flex; flex-direction: column; gap: 0.25rem; } .lightbox__title { font-size: 1rem; color: var(--lb-text); } .lightbox__sub { font-size: 0.8125rem; color: var(--lb-text-muted); } .lightbox__status { margin-top: 0.4rem; display: inline-flex; align-items: center; gap: 0.5rem; align-self: flex-start; font-family: var(--font-sans); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.25rem 0.625rem; border-radius: 999px; } .lightbox__status--available { background: var(--lb-status-available-bg); color: var(--lb-status-available-color); } .lightbox__status--sold { background: var(--lb-status-sold-bg); color: var(--lb-status-sold-color); } .lightbox__status-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; } .lightbox__status--available .lightbox__status-dot { background: var(--lb-status-available-dot); box-shadow: 0 0 0 2px rgba(111, 207, 133, 0.18); } .lightbox__status--sold .lightbox__status-dot { background: var(--lb-status-sold-dot); box-shadow: 0 0 0 2px rgba(224, 112, 112, 0.18); } .lightbox__cta { display: inline-block; font-family: var(--font-sans); font-size: 0.8125rem; letter-spacing: 0.05em; color: var(--lb-cta-text); background: var(--lb-cta-bg); padding: 0.75rem 1.5rem; text-decoration: none; transition: opacity var(--duration-fast) var(--ease-premium), background var(--duration-normal) var(--ease-premium), color var(--duration-normal) var(--ease-premium); } .lightbox__cta:hover { opacity: 0.85; } @media (max-width: 600px) { .lightbox__top-right { gap: var(--space-sm); } .lightbox__bg-switch { font-size: 0.6875rem; letter-spacing: 0.06em; } .lightbox__chrome--bottom { flex-direction: column; align-items: flex-start; gap: var(--space-sm); } .lightbox__nav { font-size: 2rem; width: 2.5rem; } .lightbox__slide { padding: var(--space-md); } } /* --- Painting Detail Page (legacy classes — kept in case anything still references them) --- */ .painting-detail { padding-top: 0; } .painting-detail__header { padding: calc(var(--nav-height) + var(--space-xl)) 0 var(--space-md); } .painting-detail__title { font-family: var(--font-typewriter); margin-bottom: var(--space-sm); } .painting-detail__meta { font-family: var(--font-sans); font-size: 1rem; color: var(--text-secondary); margin-bottom: var(--space-sm); } .painting-detail__status { margin-top: var(--space-xs); } .painting-detail__frame { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-warm); isolation: isolate; margin-bottom: var(--space-lg); } .painting-detail__image-wrap { position: relative; z-index: 1; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: clamp(1.5rem, 5%, 3.5rem); } .painting-detail__image { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 16px 40px rgba(0, 0, 0, 0.16); } .painting-detail__description { max-width: 60ch; font-family: var(--font-sans); color: var(--text-secondary); margin-bottom: var(--space-md); line-height: 1.7; } .painting-detail__cta { margin: var(--space-md) 0 var(--space-lg); } .painting-detail__cta-link { display: inline-block; font-family: var(--font-sans); font-size: 0.875rem; letter-spacing: 0.05em; color: var(--bg-primary); background: var(--text-primary); padding: 0.875rem 2rem; transition: opacity var(--duration-fast) var(--ease-premium); } .painting-detail__cta-link:hover { opacity: 0.85; } .painting-nav { display: flex; justify-content: space-between; gap: var(--space-md); padding: var(--space-lg) 0 var(--space-xl); border-top: 1px solid var(--border); } .painting-nav__link { font-family: var(--font-sans); font-size: 0.875rem; color: var(--text-secondary); transition: color var(--duration-fast) var(--ease-premium); } .painting-nav__link:hover { color: var(--text-primary); } /* --- About Page --- */ .about { padding-top: calc(var(--nav-height) + var(--space-xl)); } .about__layout { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); align-items: start; } @media (min-width: 768px) { .about__layout { grid-template-columns: 5fr 7fr; gap: var(--space-xl); } } .about__portrait img { width: 100%; max-width: 480px; } .about__name { margin-bottom: var(--space-md); } .about__bio { margin-bottom: var(--space-md); } .about__cta { display: inline-block; font-family: var(--font-sans); font-size: 0.875rem; letter-spacing: 0.05em; color: var(--text-primary); border-bottom: 1px solid var(--text-primary); padding-bottom: 2px; transition: opacity var(--duration-fast) var(--ease-premium); } .about__cta:hover { opacity: 0.6; } /* --- Contact Page --- */ .contact { padding-top: calc(var(--nav-height) + var(--space-xl)); } .contact__layout { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); } @media (min-width: 768px) { .contact__layout { grid-template-columns: 1fr 1fr; align-items: start; } /* Pin the intro/disclaimer/email column while the form scrolls */ .contact__layout > .contact__intro { position: sticky; top: calc(var(--nav-height) + var(--space-md)); } } .contact__email-link { font-family: var(--font-serif); font-size: clamp(1.25rem, 2.5vw, 2rem); color: var(--text-primary); border-bottom: 1px solid var(--border); padding-bottom: 4px; transition: border-color var(--duration-fast) var(--ease-premium); } .contact__email-link:hover { border-color: var(--text-primary); } .contact__detail { font-size: 0.9375rem; color: var(--text-secondary); margin-top: var(--space-sm); } /* Contact notice block */ .contact__notice { margin: var(--space-md) 0 var(--space-lg); padding: var(--space-md); border-left: 2px solid var(--border); background: var(--bg-warm); } .contact__notice p { font-family: var(--font-sans); font-size: 0.9375rem; color: var(--text-secondary); margin-bottom: var(--space-xs); max-width: none; } .contact__notice p:last-child { margin-bottom: 0; } .contact__notice strong { color: var(--text-primary); font-weight: 500; } .contact__notice-ref { color: var(--text-primary); text-decoration: none; border-bottom: 1px dashed var(--text-muted); padding-bottom: 1px; transition: border-color var(--duration-fast) var(--ease-premium); } .contact__notice-ref:hover { border-bottom-color: var(--text-primary); } .contact__notice-ref sup { font-size: 0.7em; margin-left: 1px; vertical-align: super; line-height: 0; } /* Form */ .form__group { margin-bottom: var(--space-md); } .form__label { display: block; font-family: var(--font-sans); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-xs); } .form__input, .form__textarea { width: 100%; padding: 0.75rem 0; font-family: var(--font-sans); font-size: 1rem; color: var(--text-primary); background: transparent; border: none; border-bottom: 1px solid var(--border); outline: none; transition: border-color var(--duration-fast) var(--ease-premium); } .form__input:focus, .form__textarea:focus { border-color: var(--text-primary); } .form__textarea { resize: vertical; min-height: 120px; } .form__submit { font-family: var(--font-sans); font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bg-primary); background: var(--text-primary); border: none; padding: 0.875rem 2.5rem; cursor: pointer; transition: transform var(--duration-fast) var(--ease-premium), opacity var(--duration-fast) var(--ease-premium); } .form__submit:hover { opacity: 0.85; } .form__submit:active { transform: scale(0.98); } /* --- Footer --- */ .footer { padding: var(--space-lg) 0; border-top: 1px solid var(--border); } .footer__inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-sm); } .footer__copyright { font-family: var(--font-sans); font-size: 0.75rem; color: var(--text-muted); } .footer__links { display: flex; gap: var(--space-md); list-style: none; } .footer__link { font-family: var(--font-sans); font-size: 0.75rem; color: var(--text-muted); transition: color var(--duration-fast) var(--ease-premium); } .footer__link:hover { color: var(--text-primary); } /* --- Default page (AGB, Privacy, etc.) --- */ .default-page__body { max-width: 65ch; } /* Anchor jumps from /agb#section land cleanly below the fixed nav */ .default-page__body section, .default-page__body [id] { scroll-margin-top: calc(var(--nav-height) + var(--space-sm)); } .default-page__body section + section { margin-top: var(--space-md); } .default-page__body h1 { margin-bottom: var(--space-md); } .default-page__body h2 { margin-top: var(--space-lg); margin-bottom: var(--space-sm); font-size: clamp(1.25rem, 2.2vw, 1.625rem); } .default-page__body h3 { margin-top: var(--space-md); margin-bottom: var(--space-xs); font-size: 1.125rem; } .default-page__body p { margin-bottom: var(--space-sm); } .default-page__body ul, .default-page__body ol { margin: 0 0 var(--space-sm) 1.25rem; color: var(--text-secondary); } .default-page__body li { margin-bottom: 0.25rem; } .default-page__body strong { color: var(--text-primary); font-weight: 500; } .default-page__body a { color: var(--text-primary); border-bottom: 1px solid var(--border); transition: border-color var(--duration-fast) var(--ease-premium); } .default-page__body a:hover { border-color: var(--text-primary); } /* --- Error Page --- */ .error-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: var(--space-xl) 0; text-align: center; } .error-page__inner { max-width: 480px; margin: 0 auto; } .error-page__code { font-family: var(--font-sans); font-size: clamp(5rem, 15vw, 10rem); font-weight: 300; letter-spacing: -0.04em; color: var(--border); line-height: 1; display: block; margin-bottom: var(--space-sm); } .error-page__title { font-family: var(--font-serif); font-size: clamp(1.75rem, 4vw, 3rem); margin-bottom: var(--space-sm); } .error-page__text { color: var(--text-secondary); margin: 0 auto var(--space-md); } .error-page__link { display: inline-block; font-family: var(--font-sans); font-size: 0.875rem; letter-spacing: 0.05em; color: var(--text-primary); border-bottom: 1px solid var(--text-primary); padding-bottom: 2px; transition: opacity var(--duration-fast) var(--ease-premium); } .error-page__link:hover { opacity: 0.6; } /* --- Form Success Message --- */ .form__success { padding: var(--space-md); border: 1px solid var(--border); background: var(--bg-warm); } .form__success p { font-family: var(--font-sans); font-size: 1rem; color: var(--text-primary); } /* --- Grav Form Overrides --- */ .form-field { margin-bottom: var(--space-md); } .form-field label { display: block; font-family: var(--font-sans); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-xs); } .form-field input[type="text"], .form-field input[type="email"], .form-field textarea { width: 100%; padding: 0.75rem 0; font-family: var(--font-sans); font-size: 1rem; color: var(--text-primary); background: transparent; border: none; border-bottom: 1px solid var(--border); outline: none; transition: border-color var(--duration-fast) var(--ease-premium); } .form-field input[type="text"]:focus, .form-field input[type="email"]:focus, .form-field textarea:focus { border-color: var(--text-primary); } .form-field textarea { resize: vertical; min-height: 120px; } .form-data .form-input-wrapper + .form-input-wrapper { margin-top: var(--space-md); } button.form__submit, .form-btn { font-family: var(--font-sans); font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bg-primary); background: var(--text-primary); border: none; padding: 0.875rem 2.5rem; cursor: pointer; transition: transform var(--duration-fast) var(--ease-premium), opacity var(--duration-fast) var(--ease-premium); } button.form__submit:hover, .form-btn:hover { opacity: 0.85; } button.form__submit:active, .form-btn:active { transform: scale(0.98); } /* --- Scroll Reveal Animations --- */ [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity var(--duration-reveal) var(--ease-premium), transform var(--duration-reveal) var(--ease-premium); } [data-reveal].revealed { opacity: 1; transform: translateY(0); } [data-reveal-stagger] > * { opacity: 0; transform: translateY(16px); transition: opacity var(--duration-reveal) var(--ease-premium), transform var(--duration-reveal) var(--ease-premium); } [data-reveal-stagger].revealed > * { opacity: 1; transform: translateY(0); } [data-reveal-stagger].revealed > *:nth-child(1) { transition-delay: 0ms; } [data-reveal-stagger].revealed > *:nth-child(2) { transition-delay: 80ms; } [data-reveal-stagger].revealed > *:nth-child(3) { transition-delay: 160ms; } [data-reveal-stagger].revealed > *:nth-child(4) { transition-delay: 240ms; } [data-reveal-stagger].revealed > *:nth-child(5) { transition-delay: 320ms; } [data-reveal-stagger].revealed > *:nth-child(6) { transition-delay: 400ms; } /* --- Mobile --- */ @media (max-width: 767px) { :root { --space-xl: 4rem; --space-2xl: 6rem; } .nav__links { display: none; } .nav__hamburger { display: flex; } .container { padding: 0 var(--space-sm); } .featured__header, .category-block__header { flex-direction: column; align-items: flex-start; } .painting-grid--featured { grid-template-columns: 1fr; } .home-hero { padding-top: calc(var(--nav-height) + var(--space-lg)); } } /* --- Visitenkarte (digital business card) -------------------------------- On-screen: card sits centred on a soft warm backdrop with a Drucken button. On-print: @page rule sets paper to 85 × 55 mm, the card fills that exactly, and the on-screen chrome (button, hint) is hidden. The card prints edge-to-edge — most printers will add a small margin, hence "Tatsächliche Grösse" in the print dialog hint. */ .page-visitenkarte { background: #efeae3; } .card-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem; gap: 1.5rem; } .card-page__chrome { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; } .card-page__print { font-family: var(--font-typewriter); font-size: 0.875rem; letter-spacing: 0.04em; text-transform: uppercase; background: var(--text-primary); color: #fff; border: none; padding: 0.65rem 1.25rem; cursor: pointer; transition: opacity var(--duration-base) var(--ease-premium); } .card-page__print:hover { opacity: 0.85; } .card-page__hint { font-family: var(--font-typewriter); font-size: 0.75rem; color: var(--text-secondary); margin: 0; max-width: 32ch; line-height: 1.5; } .vcard { width: 85mm; height: 55mm; background: #fdfaf4; display: grid; grid-template-columns: 30mm 1fr; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 28px rgba(0, 0, 0, 0.14); overflow: hidden; font-family: var(--font-typewriter); color: var(--text-primary); } .vcard__art { background-size: cover; background-repeat: no-repeat; background-color: #2a2a2a; } .vcard__body { padding: 5mm 5mm 5mm 5mm; display: flex; flex-direction: column; justify-content: center; } .vcard__name { font-size: 11pt; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; } .vcard__role { font-size: 7.5pt; color: var(--text-secondary); margin-top: 0.5mm; letter-spacing: 0.04em; text-transform: uppercase; } .vcard__divider { width: 8mm; height: 1px; background: currentColor; opacity: 0.4; margin: 2.5mm 0; } .vcard__lines { display: flex; flex-direction: column; gap: 1.2mm; font-size: 7.5pt; line-height: 1.35; } .vcard__line a { color: inherit; text-decoration: none; } .vcard__line a:hover { text-decoration: underline; } .vcard__line--soft { color: var(--text-secondary); font-size: 6.75pt; margin-top: 1mm; } .vcard__sep { margin: 0 0.6em; opacity: 0.5; } @page visitenkarte { size: 85mm 55mm; margin: 0; } @media print { html, body { background: #fff; margin: 0; padding: 0; } .page-visitenkarte .card-page { min-height: auto; padding: 0; gap: 0; display: block; } .page-visitenkarte .card-page__chrome { display: none; } .page-visitenkarte .vcard { box-shadow: none; page: visitenkarte; page-break-after: avoid; } }