Galerie – Harijs Vītoliņš Hockey Camp
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--navy: rgb(21,33,69);
--navy-deep: rgb(18,28,60);
--gold: rgb(246,195,70);
--white: #ffffff;
--text-light: rgba(220,230,250,0.65);
}
body {
font-family: 'Barlow', sans-serif;
background: var(--navy);
color: var(--white);
min-height: 100vh;
position: relative;
overflow-x: hidden;
}
/* faint hall watermark */
body::before {
content: 'KURBADS';
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'Barlow Condensed', sans-serif;
font-weight: 900;
font-size: clamp(150px, 22vw, 300px);
color: rgba(255,255,255,0.025);
letter-spacing: 25px;
text-transform: uppercase;
white-space: nowrap;
pointer-events: none;
z-index: 0;
user-select: none;
}
/* faint diagonal hatch */
body::after {
content: '';
position: fixed;
inset: 0;
background: repeating-linear-gradient(
-55deg,
transparent,
transparent 38px,
rgba(80,120,200,0.05) 38px,
rgba(80,120,200,0.05) 39px
);
pointer-events: none;
z-index: 0;
}
/* ── YEAR LINK BUTTONS ── */
.year-links {
position: relative;
z-index: 2;
display: flex;
justify-content: center;
gap: 16px;
padding: 60px 24px 20px;
flex-wrap: wrap;
}
.year-link-btn {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 900;
font-size: 19px;
letter-spacing: 1.5px;
padding: 12px 36px;
background: var(--gold);
color: var(--navy);
text-decoration: none;
border: none;
cursor: pointer;
transition: transform 0.2s, opacity 0.2s;
display: inline-block;
}
.year-link-btn:hover {
transform: translateY(-3px);
opacity: 0.9;
}
/* ── PAGE TITLE ── */
.page-title-wrap {
position: relative;
z-index: 2;
text-align: center;
padding: 56px 24px 12px;
}
.page-title {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 900;
font-size: clamp(36px, 6vw, 56px);
text-transform: uppercase;
letter-spacing: 3px;
color: var(--white);
}
.page-title span { color: var(--gold); }
.page-subtitle {
font-family: 'Barlow Condensed', sans-serif;
font-size: 13px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--text-light);
margin-top: 8px;
}
/* ── PREVIEW GRID ── */
.preview-section {
position: relative;
z-index: 2;
max-width: 1280px;
margin: 0 auto;
padding: 60px 32px 80px;
}
.preview-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 50px 36px;
}
@media (max-width: 900px) { .preview-grid { grid-template-columns: repeat(2,1fr); gap: 60px 28px; } }
@media (max-width: 560px) { .preview-grid { grid-template-columns: 1fr; gap: 60px 0; } }
/* ── PREVIEW CARD (year card) ── */
.preview-card {
position: relative;
cursor: pointer;
padding: 30px 32px 36px;
border: 2px solid var(--gold);
transition: transform 0.3s, box-shadow 0.3s;
/* leave room at top for image to overflow */
padding-top: 180px;
margin-top: 60px;
background: transparent;
}
.preview-card:hover {
transform: translateY(-6px);
box-shadow: 0 10px 40px rgba(246,195,70,0.18);
}
/* image floats above the card */
.preview-image {
position: absolute;
top: -60px;
left: 32px;
right: 32px;
height: 230px;
overflow: hidden;
background: rgba(15,25,60,0.8);
box-shadow: 0 8px 24px rgba(0,0,0,0.35);
z-index: 2;
}
.preview-image img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s;
}
.preview-card:hover .preview-image img { transform: scale(1.05); }
.img-placeholder {
width: 100%; height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: rgba(246,195,70,0.25);
font-family: 'Barlow Condensed', sans-serif;
font-size: 14px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
background: rgba(15,25,60,0.7);
}
.preview-date {
font-size: 14px;
color: var(--text-light);
font-weight: 700;
letter-spacing: 0.5px;
margin-bottom: 14px;
display: block;
}
.preview-title {
font-family: 'Barlow', sans-serif;
font-size: 22px;
font-weight: 700;
color: var(--white);
line-height: 1.3;
letter-spacing: 0;
margin-bottom: 8px;
}
.preview-images-count {
margin-top: 16px;
font-size: 12px;
color: var(--gold);
letter-spacing: 1.5px;
text-transform: uppercase;
font-weight: 700;
display: flex;
align-items: center;
gap: 8px;
}
.preview-images-count .arrow {
font-size: 16px;
transition: transform 0.3s;
}
.preview-card:hover .preview-images-count .arrow { transform: translateX(5px); }
/* ───────────────────────────────── */
/* ── FULL GALLERY OVERLAY ── */
/* ───────────────────────────────── */
.gallery-overlay {
display: none;
position: fixed;
inset: 0;
background: var(--navy);
z-index: 500;
overflow-y: auto;
}
.gallery-overlay.open { display: block; }
.gallery-overlay::before {
content: '';
position: fixed;
inset: 0;
background: repeating-linear-gradient(
-55deg,
transparent,
transparent 38px,
rgba(80,120,200,0.05) 38px,
rgba(80,120,200,0.05) 39px
);
pointer-events: none;
z-index: 0;
}
.gallery-header {
position: relative;
z-index: 2;
padding: 32px 40px 0;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
}
.gallery-back {
display: inline-flex;
align-items: center;
gap: 8px;
background: none;
border: none;
color: var(--gold);
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: 14px;
letter-spacing: 2px;
text-transform: uppercase;
cursor: pointer;
transition: gap 0.3s;
}
.gallery-back:hover { gap: 13px; }
.gallery-year-title {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 900;
font-size: clamp(28px, 4.5vw, 48px);
text-transform: uppercase;
letter-spacing: 2px;
color: var(--white);
}
.gallery-year-title span { color: var(--gold); }
.gallery-spacer { width: 80px; }
.full-gallery-section {
position: relative;
z-index: 2;
max-width: 1280px;
margin: 0 auto;
padding: 40px 32px 80px;
}
.photo-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
@media (max-width: 900px) { .photo-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .photo-grid { grid-template-columns: 1fr; } }
.photo-card {
position: relative;
cursor: pointer;
overflow: hidden;
aspect-ratio: 4/3;
border: 1px solid rgba(246,195,70,0.3);
transition: border-color 0.3s, transform 0.3s;
background: rgba(15,25,60,0.6);
}
.photo-card:hover {
border-color: var(--gold);
transform: translateY(-3px);
}
.photo-card img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s;
}
.photo-card:hover img { transform: scale(1.07); }
/* ── LIGHTBOX ── */
.lightbox {
display: none;
position: fixed;
inset: 0;
background: rgba(10,16,40,0.96);
z-index: 1000;
align-items: center;
justify-content: center;
}
.lightbox.open { display: flex; }
.lightbox-inner { position: relative; max-width: 90vw; max-height: 90vh; }
.lightbox-inner img {
max-width: 90vw; max-height: 85vh;
display: block;
border: 1px solid rgba(246,195,70,0.4);
}
.lightbox-close {
position: absolute; top: -44px; right: 0;
background: none; border: none;
color: var(--gold);
font-size: 30px; cursor: pointer; line-height: 1;
}
.lightbox-prev, .lightbox-next {
position: fixed; top: 50%; transform: translateY(-50%);
background: rgba(246,195,70,0.12);
border: none;
color: var(--gold);
font-size: 32px;
padding: 14px 20px;
cursor: pointer;
z-index: 1001;
transition: background 0.2s;
}
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }
.lightbox-prev:hover, .lightbox-next:hover { background: rgba(246,195,70,0.25); }
.gold-bar-bottom {
position: fixed;
bottom: 0; left: 0; right: 0;
height: 4px;
background: var(--gold);
z-index: 10;
}
VORSCHAU-2019
Camp 2019
Eindrücke vom Camp 2019
10 Bilder ansehen ›
VORSCHAU-2021
Camp 2021
Eindrücke vom Camp 2021
10 Bilder ansehen ›
VORSCHAU-2022
Camp 2022
Eindrücke vom Camp 2022
10 Bilder ansehen ›
VORSCHAU-2023
Camp 2023
Eindrücke vom Camp 2023
10 Bilder ansehen ›
VORSCHAU-2024
Camp 2024
Eindrücke vom Camp 2024
10 Bilder ansehen ›
VORSCHAU-2025
Camp 2025
Eindrücke vom Camp 2025
10 Bilder ansehen ›
BILD-2019-1
BILD-2019-2
BILD-2019-3
BILD-2019-4
BILD-2019-5
BILD-2019-6
BILD-2019-7
BILD-2019-8
BILD-2019-9
BILD-2019-10
BILD-2021-1
BILD-2021-2
BILD-2021-3
BILD-2021-4
BILD-2021-5
BILD-2021-6
BILD-2021-7
BILD-2021-8
BILD-2021-9
BILD-2021-10
BILD-2022-1
BILD-2022-2
BILD-2022-3
BILD-2022-4
BILD-2022-5
BILD-2022-6
BILD-2022-7
BILD-2022-8
BILD-2022-9
BILD-2022-10
BILD-2023-1
BILD-2023-2
BILD-2023-3
BILD-2023-4
BILD-2023-5
BILD-2023-6
BILD-2023-7
BILD-2023-8
BILD-2023-9
BILD-2023-10
BILD-2024-1
BILD-2024-2
BILD-2024-3
BILD-2024-4
BILD-2024-5
BILD-2024-6
BILD-2024-7
BILD-2024-8
BILD-2024-9
BILD-2024-10
BILD-2025-1
BILD-2025-2
BILD-2025-3
BILD-2025-4
BILD-2025-5
BILD-2025-6
BILD-2025-7
BILD-2025-8
BILD-2025-9
BILD-2025-10
![]()
let currentYear = '';
let currentIndex = 0;
function openYear(year) {
document.getElementById('overlay-' + year).classList.add('open');
document.body.style.overflow = 'hidden';
currentYear = year;
window.scrollTo({ top: 0 });
}
function closeYear() {
document.querySelectorAll('.gallery-overlay').forEach(o => o.classList.remove('open'));
document.body.style.overflow = '';
}
function getImages(year) {
return Array.from(document.querySelectorAll('#overlay-' + year + ' .photo-card img'));
}
function openLightbox(year, index) {
currentYear = year;
currentIndex = index;
document.getElementById('lightbox-img').src = getImages(year)[index].src;
document.getElementById('lightbox').classList.add('open');
}
function closeLightbox() {
document.getElementById('lightbox').classList.remove('open');
}
function closeLightboxOnBg(e) {
if (e.target === document.getElementById('lightbox')) closeLightbox();
}
function prevImg(e) {
if (e) e.stopPropagation();
const imgs = getImages(currentYear);
currentIndex = (currentIndex - 1 + imgs.length) % imgs.length;
document.getElementById('lightbox-img').src = imgs[currentIndex].src;
}
function nextImg(e) {
if (e) e.stopPropagation();
const imgs = getImages(currentYear);
currentIndex = (currentIndex + 1) % imgs.length;
document.getElementById('lightbox-img').src = imgs[currentIndex].src;
}
document.addEventListener('keydown', e => {
if (document.getElementById('lightbox').classList.contains('open')) {
if (e.key === 'ArrowLeft') prevImg();
if (e.key === 'ArrowRight') nextImg();
if (e.key === 'Escape') closeLightbox();
} else if (document.querySelector('.gallery-overlay.open')) {
if (e.key === 'Escape') closeYear();
}
});