/* ============================================================ VALJDAKOSTA — shared site stylesheet Used by the generated category + detail pages (photography.html, video.html, models.html, and per-asset pages). Carries the SAME aesthetic as index.html — theme system, roaming atmosphere, fonts, panels/cards — minus the splash intro animation. Generated by the build script; keep visual values in sync with index.html. ============================================================ */ /* ---- FONTS (local first, Google web fonts as fallback in the HTML) ---- */ @font-face { font-family: "Inter Local"; src: url("./Inter/Inter_28pt-Black.ttf") format("truetype"); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: "Playfair Local"; src: url("./Playfair Display/PlayfairDisplay-Variable.ttf") format("truetype"); font-weight: 400 900; font-style: normal; font-display: swap; } /* ============================================================ PALETTE — main theme (Blue Moon Safari), baked into :root. Mirrors index.html. The roaming glows live in --glow-1/2; the static vignette in --atmo. ============================================================ */ :root { --bg: #050a14; --fg: #e8eef6; --accent: #ff5a3c; --tint: #9fc2e8; --bg-grad: none; --shadow-card: 0 26px 60px rgba(2,8,20,0.62); --shadow-frame: 0 12px 34px rgba(2,8,20,0.5); --atmo: /* static vignette frame */ radial-gradient(140% 120% at 50% 102%, transparent 52%, rgba(2,4,10,0.92)); --glow-1: rgba(74,125,189,0.30); /* roaming glow A — blue */ --glow-2: rgba(159,194,232,0.14); /* roaming glow B — powder blue */ --maxw: 72rem; /* content column max width */ } /* ---- THEMES (cycled via [data-theme] on ; same as index.html) ---- */ html[data-theme="signal"] { --bg: #0b0b0f; --fg: #ffffff; --tint: var(--fg); --accent: #ff4d2e; --shadow-card: 0 26px 60px rgba(0,0,0,0.5); --shadow-frame: 0 12px 34px rgba(0,0,0,0.45); --atmo: radial-gradient(140% 120% at 50% 100%, transparent 55%, color-mix(in srgb, var(--bg) 100%, #000 35%)); --glow-1: color-mix(in srgb, var(--accent) 7%, transparent); --glow-2: color-mix(in srgb, var(--accent) 7%, transparent); } html[data-theme="swiss"] { --bg: #f2ede4; --fg: #141210; --tint: #4a7dbd; --accent: #e63312; --shadow-card: 0 16px 38px rgba(92,70,48,0.16); --shadow-frame: 0 10px 26px rgba(92,70,48,0.16); --atmo: radial-gradient(150% 120% at 50% 102%, transparent 60%, rgba(150,135,112,0.40)); --glow-1: rgba(230,51,18,0.06); --glow-2: rgba(230,51,18,0.06); } html[data-theme="phosphor"] { --bg: #0a0c08; --fg: #b8e986; --tint: #d9ffb0; --accent: #ffb000; --shadow-card: 0 26px 60px rgba(0,0,0,0.62); --shadow-frame: 0 12px 34px rgba(0,0,0,0.5); --atmo: radial-gradient(140% 120% at 50% 102%, transparent 48%, rgba(2,3,1,0.95)); --glow-1: rgba(184,233,134,0.10); --glow-2: rgba(184,233,134,0.10); } html[data-theme="pastel"] { --bg: #e3dbe8; --fg: #2a2a35; --tint: #7a9fe0; --accent: #7a9fe0; --bg-grad: linear-gradient(160deg, #d8d4e8 0%, #e8d6e4 55%, #f0d8e0 100%); --shadow-card: 0 22px 50px rgba(90,80,130,0.22); --shadow-frame: 0 12px 30px rgba(90,80,130,0.20); --atmo: none; --glow-1: rgba(255,255,255,0.75); --glow-2: rgba(122,159,224,0.34); } /* ============================================================ BASE ============================================================ */ * { margin: 0; padding: 0; box-sizing: border-box; } html { overflow-y: scroll; } /* keep the scrollbar present at all times */ body { background-color: var(--bg); background-image: var(--bg-grad); background-attachment: fixed; color: var(--fg); transition: background-color 0.5s ease, color 0.5s ease; font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; min-height: 100vh; overflow-x: hidden; position: relative; -webkit-font-smoothing: antialiased; } /* ---- atmosphere: static vignette + two roaming glow blobs + grain ---- */ body::before { /* vignette frame (ABOVE the blobs) */ content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; background: var(--atmo); } .atmo { /* roaming-glow layer (UNDER the vignette) */ position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .blob { position: absolute; top: 50%; left: 50%; width: 75vmax; height: 75vmax; margin: -37.5vmax 0 0 -37.5vmax; border-radius: 50%; will-change: transform; } .blob-a { background: radial-gradient(circle, var(--glow-1) 0%, transparent 60%); animation: atmo-roam-a 60s ease-in-out infinite; } .blob-b { background: radial-gradient(circle, var(--glow-2) 0%, transparent 60%); animation: atmo-roam-b 78s ease-in-out infinite; } @keyframes atmo-roam-a { 0% { transform: translate(-28vw, -22vh); } 25% { transform: translate( 26vw, -12vh); } 50% { transform: translate( 16vw, 24vh); } 75% { transform: translate(-22vw, 14vh); } 100% { transform: translate(-28vw, -22vh); } } @keyframes atmo-roam-b { 0% { transform: translate( 26vw, 20vh); } 25% { transform: translate(-24vw, 24vh); } 50% { transform: translate(-28vw, -18vh); } 75% { transform: translate( 20vw, -24vh); } 100% { transform: translate( 26vw, 20vh); } } body::after { /* faint film grain */ content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.04; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* page content sits above the atmosphere */ .page { position: relative; z-index: 2; } /* ============================================================ COMPACT HEADER — small logo (links home) + back link + palette. The lighter inner-page header (no splash intro). ============================================================ */ .site-header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 1rem; padding: clamp(0.9rem, 2.4vw, 1.4rem) clamp(1rem, 4vw, 2.5rem); -webkit-backdrop-filter: blur(8px) saturate(120%); backdrop-filter: blur(8px) saturate(120%); background: color-mix(in srgb, var(--bg) 55%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--fg) 8%, transparent); } /* small VALJDAKOSTA wordmark; Inter Black, condensed like the launched logo */ .brand { font-family: "Inter Local", "Inter", sans-serif; font-weight: 900; font-size: clamp(0.95rem, 2.2vw, 1.3rem); letter-spacing: -0.04em; transform: scaleX(0.82); transform-origin: left center; color: var(--fg); text-decoration: none; white-space: nowrap; transition: color 0.5s ease, opacity 0.2s ease; } .brand:hover { opacity: 0.78; } .header-spacer { flex: 1; } /* back link + nav links */ .nav-link { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in srgb, var(--fg) 64%, transparent); text-decoration: none; transition: color 0.3s ease; } .nav-link:hover { color: var(--accent); } .nav-link::before { content: ""; } .nav-link.back::before { content: "\2190\00a0\00a0"; } /* ← */ /* palette-cycle button (same as index.html) */ .palette-btn { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.5rem 0.95rem 0.5rem 0.65rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--fg) 22%, transparent); background: color-mix(in srgb, var(--fg) 5%, transparent); color: var(--fg); font: inherit; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.12s ease; } .palette-btn:hover { border-color: color-mix(in srgb, var(--accent) 70%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); } .palette-btn:active { transform: translateY(1px) scale(0.985); } .palette-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .palette-dot { width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent), 0 0 12px color-mix(in srgb, var(--accent) 55%, transparent); transition: background-color 0.3s ease, box-shadow 0.3s ease; } .palette-name { line-height: 1; } @media (max-width: 560px) { .palette-name { display: none; } } /* ============================================================ PAGE SHELL + TITLES ============================================================ */ .wrap { width: min(100%, var(--maxw)); margin-inline: auto; padding: clamp(2rem, 5vh, 4rem) clamp(1rem, 4vw, 2.5rem) clamp(4rem, 10vh, 7rem); } .page-head { text-align: center; margin-bottom: clamp(2rem, 5vh, 3.5rem); } .eyebrow { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: color-mix(in srgb, var(--tint) 80%, transparent); } .page-title { font-family: "Playfair Local", "Playfair Display", serif; font-weight: 500; font-size: clamp(2.2rem, 7vw, 5rem); line-height: 1.04; letter-spacing: -0.01em; margin-top: 0.6rem; } .page-sub { margin: 1.2rem auto 0; max-width: 52ch; font-size: clamp(0.95rem, 1.4vw, 1.15rem); line-height: 1.7; color: color-mix(in srgb, var(--fg) 68%, transparent); } /* ============================================================ PANELS / CARDS (matches index.html .panel) ============================================================ */ .panel { position: relative; width: min(100%, 60rem); margin-inline: auto; padding: clamp(2rem, 5vw, 4rem) clamp(1.6rem, 5vw, 4rem); border-radius: 22px; border: 1px solid color-mix(in srgb, var(--fg) 10%, transparent); background: color-mix(in srgb, var(--bg) 94%, #fff 6%); box-shadow: var(--shadow-card); transition: background-color 0.5s ease, border-color 0.5s ease, color 0.5s ease, box-shadow 0.5s ease; } /* ============================================================ GALLERY GRID ============================================================ */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: clamp(1rem, 2.4vw, 2rem); } .card { display: flex; flex-direction: column; gap: 0.85rem; text-decoration: none; color: inherit; } .card-media { position: relative; overflow: hidden; border-radius: 4px; aspect-ratio: 4 / 5; background: linear-gradient(135deg, color-mix(in srgb, var(--fg) 9%, var(--bg)), color-mix(in srgb, var(--bg) 100%, #000 25%)); box-shadow: var(--shadow-frame); } .card-media img, .card-media video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.16,1,0.3,1); } .card:hover .card-media img, .card:hover .card-media video { transform: scale(1.04); } /* video play badge */ .play-badge { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; } .play-badge span { width: clamp(44px, 8vw, 62px); height: clamp(44px, 8vw, 62px); border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 40%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border: 1px solid color-mix(in srgb, var(--fg) 30%, transparent); box-shadow: var(--shadow-frame); } .play-badge span::after { content: ""; margin-left: 3px; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent var(--fg); } /* 3D badge */ .kind-badge { position: absolute; top: 0.7rem; left: 0.7rem; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.3rem 0.6rem; border-radius: 999px; color: var(--fg); background: color-mix(in srgb, var(--bg) 50%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border: 1px solid color-mix(in srgb, var(--fg) 22%, transparent); } .card-title { font-size: 0.98rem; font-weight: 600; line-height: 1.3; } .card-meta { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--fg) 55%, transparent); } .empty-note { text-align: center; padding: 4rem 1rem; color: color-mix(in srgb, var(--fg) 55%, transparent); font-size: 0.95rem; } /* ============================================================ DETAIL PAGE — single asset ============================================================ */ .detail { display: flex; flex-direction: column; gap: clamp(1.6rem, 4vh, 2.6rem); } .stage { position: relative; border-radius: 14px; overflow: hidden; background: color-mix(in srgb, var(--bg) 100%, #000 18%); box-shadow: var(--shadow-card); border: 1px solid color-mix(in srgb, var(--fg) 8%, transparent); } .stage img, .stage video { display: block; width: 100%; height: auto; max-height: 82vh; object-fit: contain; margin-inline: auto; } /* 3D viewer canvas host */ .viewer { width: 100%; height: min(70vh, 620px); display: block; background: radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--fg) 6%, transparent), transparent 60%), color-mix(in srgb, var(--bg) 100%, #000 18%); } .viewer model-viewer { width: 100%; height: 100%; --poster-color: transparent; } .detail-body { max-width: 60ch; margin-inline: auto; text-align: center; } .detail-title { font-family: "Playfair Local", "Playfair Display", serif; font-weight: 500; font-size: clamp(1.6rem, 4.5vw, 2.8rem); line-height: 1.1; letter-spacing: -0.01em; } .detail-date { margin-top: 0.5rem; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: color-mix(in srgb, var(--tint) 80%, transparent); } .detail-desc { margin-top: 1.3rem; font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.75; color: color-mix(in srgb, var(--fg) 74%, transparent); } .tags { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; } .tag { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.35rem 0.7rem; border-radius: 999px; color: color-mix(in srgb, var(--fg) 75%, transparent); border: 1px solid color-mix(in srgb, var(--fg) 16%, transparent); background: color-mix(in srgb, var(--fg) 4%, transparent); } .download { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.6rem; padding: 0.7rem 1.2rem; border-radius: 999px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg); text-decoration: none; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); transition: background-color 0.3s ease, transform 0.12s ease; } .download:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); } .download:active { transform: translateY(1px); } /* prev / next within a category */ .detail-nav { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid color-mix(in srgb, var(--fg) 10%, transparent); padding-top: 1.6rem; margin-top: 0.5rem; } .detail-nav a { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in srgb, var(--fg) 64%, transparent); text-decoration: none; transition: color 0.3s ease; max-width: 45%; } .detail-nav a:hover { color: var(--accent); } .detail-nav .disabled { opacity: 0.3; pointer-events: none; } /* ============================================================ FOOTER ============================================================ */ .site-footer { position: relative; z-index: 2; text-align: center; padding: 2.5rem 1rem 3.5rem; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in srgb, var(--fg) 45%, transparent); } /* ============================================================ REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .blob { animation: none; } .card-media img, .card-media video { transition: none; } }