/* ============================================================ THEMES — CSS custom properties per theme Default is dark (Option C). JS sets data-theme on . ============================================================ */ :root, [data-theme="dark"] { --bg: #4f4b4b; --surface: #5c5858; --text: #d4ea1a; --text-muted: #a8b814; --ui-text: #a09c9c; /* neutral gray for inactive UI controls */ --accent: #d4ea1a; --accent-hover: #e2f530; --on-accent: #1a1818; --border: #6b6767; --shadow: rgba(0, 0, 0, 0.4); --overlay: rgba(0, 0, 0, 0.85); } [data-theme="light"] { --bg: #f2eeea; --surface: #e6e2de; --text: #2c2929; --text-muted: #5a5656; --ui-text: #7a7676; /* neutral gray for inactive UI controls */ --accent: #5a6200; --accent-hover: #6e7800; --on-accent: #f5f2ee; --border: #d0ccc8; --shadow: rgba(0, 0, 0, 0.15); --overlay: rgba(0, 0, 0, 0.75); } [data-theme="contrast"] { --bg: #000000; --surface: #1a1a1a; --text: #ffffff; --text-muted: #cccccc; --ui-text: #999999; /* neutral gray for inactive UI controls */ --accent: #d4ea1a; --accent-hover: #e8ff20; --on-accent: #000000; --border: #ffffff; --shadow: rgba(255, 255, 255, 0.1); --overlay: rgba(0, 0, 0, 0.95); } /* ============================================================ RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; } body { background-color: var(--bg); color: var(--text); font-family: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 1rem; line-height: 1.65; min-height: 100dvh; display: flex; flex-direction: column; transition: background-color 0.2s, color 0.2s; } main { flex: 1; } img { display: block; max-width: 100%; height: auto; } a { color: var(--accent); text-decoration: none; } a:hover, a:focus-visible { color: var(--accent-hover); text-decoration: underline; } ul { list-style: none; } /* ============================================================ FOCUS — visible focus ring for keyboard navigation ============================================================ */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } /* ============================================================ SKIP LINK — visually hidden until focused ============================================================ */ .skip-link { position: absolute; top: -100%; left: 1rem; background: var(--accent); color: var(--bg); padding: 0.5rem 1rem; font-weight: 600; z-index: 1000; border-radius: 0 0 4px 4px; transition: top 0.15s; } .skip-link:focus { top: 0; } /* ============================================================ HEADER ============================================================ */ .site-header { border-bottom: 1px solid var(--border); padding: 1rem 0; position: sticky; top: 0; background-color: var(--bg); z-index: 100; } .header-inner { max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; } .site-name { font-size: 1.6rem; font-weight: 400; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text); text-decoration: none; flex-shrink: 0; } .site-name:hover { color: var(--accent-hover); text-decoration: none; } .main-nav { flex: 1; } .main-nav ul { display: flex; gap: 1.5rem; flex-wrap: wrap; } .main-nav a { color: var(--text-muted); font-size: 0.95rem; letter-spacing: 0.02em; text-transform: none; } .main-nav a:hover, .main-nav a:focus-visible, .main-nav a[aria-current="page"] { color: var(--accent-hover); text-decoration: none; } .main-nav a[aria-current="page"] { color: var(--text); } /* ============================================================ HEADER CONTROLS (language + theme) ============================================================ */ .header-controls { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; } .lang-switch { font-size: 0.8rem; color: var(--ui-text); text-transform: none; letter-spacing: 0.02em; border: 1px solid var(--border); padding: 0.2rem 0.5rem; border-radius: 2px; } .lang-switch:hover { color: var(--text); border-color: var(--ui-text); text-decoration: none; } .theme-switcher { display: flex; gap: 0.3rem; } .theme-switcher button { background: none; border: 1px solid var(--border); color: var(--ui-text); font-size: 0.8rem; padding: 0.2rem 0.5rem; border-radius: 2px; cursor: pointer; font-family: inherit; letter-spacing: 0.02em; transition: color 0.15s, border-color 0.15s, background-color 0.15s; } .theme-switcher button:hover { color: var(--text); border-color: var(--ui-text); } .theme-switcher button[aria-pressed="true"] { background-color: var(--accent); color: var(--on-accent); border-color: var(--accent); } /* ============================================================ PAGE WRAPPER — shared inner width for all content pages ============================================================ */ .page-content { max-width: 72rem; margin: 0 auto; padding: 3rem 1.5rem; } .page-heading { font-size: 0.95rem; font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 2.5rem; color: var(--text-muted); } /* ============================================================ HOME / LANDING ============================================================ */ .home { display: flex; align-items: center; justify-content: center; min-height: calc(100dvh - 6rem); text-align: center; padding: 2rem 1.5rem; } .home-inner h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 300; letter-spacing: 0.06em; line-height: 1.2; margin-bottom: 1.5rem; } .home-inner p { font-size: 1.05rem; color: var(--text-muted); margin-bottom: 2rem; max-width: 36rem; margin-left: auto; margin-right: auto; } .home-cta { display: inline-block; border: 1px solid var(--accent); color: var(--accent); padding: 0.65rem 1.8rem; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.9rem; } .home-cta:hover { background-color: var(--accent); color: var(--bg); text-decoration: none; } /* ============================================================ GALLERY — category filter + grid ============================================================ */ .gallery-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2.5rem; } .gallery-filter button { background: none; border: 1px solid var(--border); color: var(--text-muted); font-size: 0.85rem; padding: 0.3rem 0.9rem; border-radius: 2px; cursor: pointer; font-family: inherit; letter-spacing: 0.03em; transition: color 0.15s, border-color 0.15s; } .gallery-filter button:hover, .gallery-filter .filter-link:hover { color: var(--text); border-color: var(--text); } .gallery-filter .filter-link { background: none; border: 1px solid var(--border); color: var(--text-muted); font-size: 0.8rem; padding: 0.3rem 0.75rem; border-radius: 2px; cursor: pointer; text-decoration: none; transition: color 0.15s, border-color 0.15s; display: inline-flex; align-items: center; } .gallery-filter button.active, .gallery-filter button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); } .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.5rem; } /* ============================================================ ARTWORK CARD ============================================================ */ .artwork-card { background-color: var(--surface); border: 1px solid var(--border); overflow: hidden; } .artwork-card__image-wrap { position: relative; overflow: hidden; aspect-ratio: 4 / 3; cursor: zoom-in; } .artwork-card__image-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .artwork-card__image-wrap:hover img, .artwork-card__image-wrap:focus-within img { transform: scale(1.03); } .artwork-card__zoom-btn { position: absolute; inset: 0; background: none; border: none; cursor: zoom-in; width: 100%; height: 100%; } .artwork-card__link-btn, .artwork-card__play-btn { cursor: pointer; display: flex; align-items: center; justify-content: center; } .artwork-card__play-btn::after { content: "▶"; font-size: 2.5rem; color: #fff; text-shadow: 0 0 12px rgba(0,0,0,0.7); opacity: 0.75; pointer-events: none; transition: opacity 0.15s; } .artwork-card__play-btn:hover::after { opacity: 1; } .artwork-card__info { padding: 0.85rem 1rem; } .artwork-card__title { font-size: 0.67rem; font-weight: 500; margin-bottom: 0.2rem; } .artwork-card__meta { font-size: 0.55rem; color: var(--text-muted); line-height: 1.4; } .artwork-card__description { font-size: 0.59rem; color: var(--text-muted); line-height: 1.55; margin-top: 0.6rem; border-top: 1px solid var(--border); padding-top: 0.6rem; } /* ============================================================ LIGHTBOX — full-screen image zoom ============================================================ */ .lightbox { display: none; position: fixed; inset: 0; background: var(--overlay); z-index: 500; align-items: center; justify-content: center; padding: 2rem; } .lightbox.is-open { display: flex; } .lightbox__img { max-width: 100%; max-height: 90dvh; object-fit: contain; box-shadow: 0 0 4rem var(--shadow); } .lightbox__close { position: absolute; top: 1rem; right: 1.5rem; background: none; border: 1px solid var(--border); color: var(--text); font-size: 1.5rem; line-height: 1; padding: 0.3rem 0.7rem; cursor: pointer; border-radius: 2px; z-index: 1; } .lightbox__prev, .lightbox__next { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: 1px solid var(--border); color: var(--text); font-size: 2rem; line-height: 1; padding: 0.4rem 0.7rem; cursor: pointer; border-radius: 2px; z-index: 1; } .lightbox__prev { left: 1.5rem; } .lightbox__next { right: 1.5rem; } .lightbox__prev:hover, .lightbox__next:hover, .lightbox__close:hover { border-color: var(--text); } .lightbox__counter { position: absolute; top: 1rem; left: 50%; transform: translateX(-50%); color: var(--text-muted); font-size: 0.82rem; white-space: nowrap; } .lightbox__caption { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); color: var(--text-muted); font-size: 0.85rem; text-align: center; max-width: 40rem; white-space: nowrap; } .lightbox__iframe { width: min(90vw, 1100px); aspect-ratio: 16 / 9; border: none; box-shadow: 0 0 4rem var(--shadow); } /* ============================================================ VITA / CONTACT / LEGAL PAGES — simple prose ============================================================ */ .prose { max-width: 42rem; } .vita-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; } .vita-layout .prose { max-width: none; } .vita-portrait { margin: 0; } .vita-portrait img { width: 100%; height: auto; display: block; } @media (max-width: 700px) { .vita-layout { grid-template-columns: 1fr; } } .prose h2 { font-size: 1.1rem; font-weight: 500; margin-top: 2rem; margin-bottom: 0.5rem; color: var(--text-muted); letter-spacing: 0.03em; text-transform: uppercase; } .prose p { margin-bottom: 1rem; } .prose a { color: var(--accent); } /* ============================================================ PURCHASE PAGE ============================================================ */ .purchase-links { list-style: none; margin-top: 2rem; display: flex; flex-direction: column; gap: 0.75rem; max-width: 24rem; } .purchase-link { display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--accent); color: var(--accent); padding: 0.85rem 1.2rem; font-size: 0.95rem; letter-spacing: 0.04em; text-decoration: none; transition: background-color 0.15s, color 0.15s; } .purchase-link:hover { background-color: var(--accent); color: var(--on-accent); text-decoration: none; } /* ============================================================ FOOTER ============================================================ */ .site-footer { border-top: 1px solid var(--border); padding: 1.25rem 1.5rem; margin-top: auto; } .site-footer nav { max-width: 72rem; margin: 0 auto; display: flex; gap: 1.5rem; flex-wrap: wrap; } .site-footer a { font-size: 0.82rem; color: var(--text-muted); letter-spacing: 0.02em; } .site-footer a:hover { color: var(--text); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 600px) { .header-inner { gap: 1rem; } .main-nav ul { gap: 1rem; } .theme-switcher button { font-size: 0.75rem; padding: 0.2rem 0.4rem; } .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; } } /* ============================================================ REDUCED MOTION — respect user OS preference ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } html { scroll-behavior: auto; } }