/* ==========================================================
Baćoniii Cuts — crno-zlatna tema
========================================================== */
:root {
/* Boje */
--bg: #0b0b0a;
--bg-alt: #111110;
--surface: #171715;
--surface-2: #1e1d1a;
--border: #2a2925;
--text: #f3efe6;
--text-muted: #a8a296;
--gold: #e2b04a;
--gold-hover: #f0c262;
--gold-soft: rgba(226, 176, 74, 0.12);
--on-gold: #14110a;
/* Tipografija */
--font-display: "Oswald", "Arial Narrow", sans-serif;
--font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
/* Razmaci i oblici */
--radius: 6px;
--radius-lg: 12px;
--container: 1200px;
--gutter: clamp(16px, 4vw, 32px);
--section-y: clamp(72px, 10vw, 128px);
--header-h: 72px;
/* Pokret */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--dur-fast: 160ms;
--dur: 280ms;
--dur-slow: 700ms;
}
*,
*::before,
*::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
scroll-padding-top: var(--header-h);
scrollbar-gutter: stable; /* da se sadržaj ne pomjeri kad loader otključa skrolovanje */
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px;
border-radius: 2px;
}
.skip-link {
position: absolute;
left: 16px;
top: -60px;
z-index: 1000;
padding: 10px 16px;
background: var(--gold);
color: var(--on-gold);
font-weight: 700;
border-radius: var(--radius);
text-decoration: none;
}
.skip-link:focus { top: 12px; }
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
.icon {
width: 18px;
height: 18px;
flex-shrink: 0;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.gold { color: var(--gold); }
.muted { color: var(--text-muted); }
/* ---------- Tipografija ---------- */
.eyebrow {
font-family: var(--font-display);
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 14px;
}
.section__title {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(2rem, 4.5vw, 3.25rem);
line-height: 1.05;
letter-spacing: 0.01em;
text-transform: uppercase;
text-wrap: balance;
}
.section__lead {
margin-top: 16px;
color: var(--text-muted);
font-size: 1.0625rem;
max-width: 58ch;
}
/* ---------- Dugmad ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
padding: 12px 22px;
border: 1px solid transparent;
border-radius: var(--radius);
font-family: var(--font-display);
font-size: 0.9375rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease,
border-color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.btn:active { transform: scale(0.97); }
.btn .icon { transition: transform var(--dur) var(--ease-out); }
.btn:hover .icon { transform: translateX(3px); }
.btn--gold { background: var(--gold); color: var(--on-gold); }
.btn--gold:hover { background: var(--gold-hover); }
.btn--outline { border-color: var(--gold); color: var(--gold); background: transparent; }
.btn--outline:hover { background: var(--gold-soft); }
/* ---------- Pritisak — diskretan i trenutan ---------- */
.btn,
.menu-toggle { -webkit-tap-highlight-color: transparent; }
.btn--gold:active { background: #cf9f3f; }
.btn--outline:active { background: rgba(226, 176, 74, 0.2); }
.review,
.gallery__item,
.barber {
transition: transform 160ms var(--ease-out), border-color var(--dur-fast) ease, background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.gallery__item:active { transform: scale(0.985); }
.btn--sm { min-height: 40px; padding: 8px 16px; font-size: 0.8125rem; }
.btn--lg { min-height: 56px; padding: 16px 28px; font-size: 1rem; }
/* ---------- Header ---------- */
.header {
position: fixed;
inset: 0 0 auto 0;
z-index: 100;
height: var(--header-h);
transition: background-color var(--dur) ease, border-color var(--dur) ease, backdrop-filter var(--dur) ease;
border-bottom: 1px solid transparent;
}
.header.is-scrolled,
.header.is-open {
background: rgba(11, 11, 10, 0.9);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom-color: var(--border);
}
.header__inner {
height: 100%;
display: flex;
align-items: center;
gap: 24px;
}
/* Logo je u "em" jedinicama, pa je veliki logo u loaderu tačno uvećana kopija ovog u meniju */
.logo {
display: inline-flex;
align-items: center;
gap: 0.4em;
line-height: 1.65;
text-decoration: none;
font-family: var(--font-display);
font-weight: 700;
font-size: 1.25rem;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
}
.logo__mark {
width: 1.1em;
height: 1.1em;
flex-shrink: 0;
overflow: visible;
fill: none;
stroke: var(--gold);
stroke-width: 5.5;
stroke-linecap: round;
}
.nav { margin-left: auto; display: flex; align-items: center; gap: 28px; }
.nav__list { display: flex; align-items: center; gap: 28px; }
.nav__sep { width: 1px; height: 16px; background: var(--border); }
.nav__list a {
position: relative;
display: inline-block;
padding: 8px 0;
font-family: var(--font-display);
font-size: 0.875rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: none;
color: var(--text-muted);
transition: color var(--dur-fast) ease;
}
.nav__list a::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 2px;
height: 1px;
background: var(--gold);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--dur) var(--ease-out);
}
.nav__list a:hover,
.nav__list a.is-active { color: var(--text); }
.nav__list a:hover::after,
.nav__list a.is-active::after { transform: scaleX(1); }
.nav__cta { display: none; }
.header__cta { margin-left: 4px; }
.menu-toggle {
display: none;
width: 44px;
height: 44px;
margin-left: auto;
padding: 0;
background: none;
border: 1px solid var(--border);
border-radius: var(--radius);
cursor: pointer;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
}
.menu-toggle span {
display: block;
width: 18px;
height: 2px;
background: var(--text);
transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast) ease;
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ---------- Hero ---------- */
.hero {
position: relative;
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
overflow: hidden;
isolation: isolate;
--mx: 0;
--my: 0;
}
.hero__media {
position: absolute;
inset: -3%;
z-index: -3;
transform: translate3d(calc(var(--mx) * -16px), calc(var(--my) * -10px), 0);
transition: transform 1200ms var(--ease-out);
}
.hero__img {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.85) brightness(0.8);
}
.hero__shade {
position: absolute;
inset: 0;
z-index: -2;
background:
linear-gradient(90deg, rgba(11, 11, 10, 0.94) 0%, rgba(11, 11, 10, 0.72) 50%, rgba(11, 11, 10, 0.45) 100%),
linear-gradient(0deg, var(--bg) 0%, transparent 35%),
linear-gradient(180deg, rgba(11, 11, 10, 0.6) 0%, transparent 25%);
}
/* Toplo svjetlo koje lagano "diše" iza neona */
.hero__glow {
position: absolute;
inset: 0;
z-index: -1;
background: radial-gradient(ellipse 45% 55% at 76% 42%, rgba(226, 176, 74, 0.18), transparent 70%);
animation: breathe 7s ease-in-out infinite;
pointer-events: none;
}
@keyframes breathe {
0%, 100% { opacity: 0.7; }
50% { opacity: 1; }
}
/* Jedan prolaz svjetla preko kadra pri otvaranju */
.hero__glare {
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(105deg, transparent 35%, rgba(255, 226, 160, 0.13) 48%, rgba(255, 240, 210, 0.2) 50%, transparent 62%);
transform: translateX(-100%);
pointer-events: none;
mix-blend-mode: screen;
}
.hero__inner {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
padding-top: calc(var(--header-h) + 48px);
padding-bottom: 48px;
}
.hero__rule {
display: block;
width: 96px;
height: 2px;
margin-top: 28px;
background: linear-gradient(90deg, var(--gold), transparent);
transform-origin: left;
}
/* Dno hero sekcije: Lokacija · Skroluj · Kontakt — sve u istoj ravni */
.hero__bottom {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 16px;
padding-bottom: 26px;
}
.hero__link {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 44px;
font-family: var(--font-display);
font-size: 0.875rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
text-decoration: none;
color: var(--text);
transition: color var(--dur-fast) ease;
}
.hero__link--left { justify-self: start; }
.hero__link--right { justify-self: end; }
.hero__link .icon { color: var(--gold); transition: transform var(--dur) var(--ease-out); }
.hero__link:hover { color: var(--gold); }
.hero__link--right:hover .icon { transform: translateX(4px); }
.hero__link--left:hover .icon { transform: translateY(-3px); }
/* Status radnog vremena (na mapi) */
.open-pill {
display: inline-flex;
align-items: center;
gap: 9px;
min-height: 38px;
padding: 0 15px;
background: rgba(11, 11, 10, 0.6);
border: 1px solid rgba(243, 239, 230, 0.12);
border-radius: 999px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
font-size: 0.8125rem;
font-weight: 500;
color: var(--text);
white-space: nowrap;
}
.open-pill__dot { width: 8px; height: 8px; border-radius: 50%; background: #8a847a; flex-shrink: 0; }
.open-pill.is-open .open-pill__dot { background: #5fd38a; animation: live 2s ease-out infinite; }
@keyframes live {
0% { box-shadow: 0 0 0 0 rgba(95, 211, 138, 0.6); }
100% { box-shadow: 0 0 0 9px rgba(95, 211, 138, 0); }
}
/* "Skroluj" — zlatna tačka putuje odozdo nagore kroz tanku kapsulu */
.scroll-cue {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 4px 10px;
text-decoration: none;
color: var(--text-muted);
transition: color var(--dur-fast) ease;
}
.scroll-cue__text {
font-family: var(--font-display);
font-size: 0.6875rem;
letter-spacing: 0.34em;
margin-right: -0.34em;
text-transform: uppercase;
}
.scroll-cue__track {
position: relative;
width: 18px;
height: 46px;
border: 1px solid rgba(226, 176, 74, 0.45);
border-radius: 12px;
overflow: hidden;
transition: border-color var(--dur) ease, box-shadow var(--dur) ease;
}
.scroll-cue__track span {
position: absolute;
left: 50%;
bottom: 6px;
width: 4px;
height: 10px;
margin-left: -2px;
border-radius: 3px;
background: var(--gold);
box-shadow: 0 0 8px rgba(226, 176, 74, 0.8), 0 10px 12px -2px rgba(226, 176, 74, 0.35);
animation: cueUp 1.9s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes cueUp {
0% { transform: translateY(0); opacity: 0; }
15% { opacity: 1; }
70% { transform: translateY(-24px); opacity: 1; }
100% { transform: translateY(-24px); opacity: 0; }
}
.scroll-cue:hover { color: var(--gold); }
.scroll-cue:hover .scroll-cue__track { border-color: var(--gold); box-shadow: 0 0 14px rgba(226, 176, 74, 0.35); }
.hero__content { max-width: 620px; }
.hero__title {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(3.75rem, 11.5vw, 8.5rem);
line-height: 0.95;
text-transform: uppercase;
letter-spacing: 0.005em;
}
/* Ocjena + broj klijenata */
/* Ocjena + broj klijenata — u jednom redu ispod dugmeta, bez okvira */
.proof {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px 32px;
margin-top: 32px;
}
/* Veliki broj lijevo, zvjezdice / opis desno */
.proof__item {
display: grid;
grid-template-columns: auto auto;
column-gap: 14px;
row-gap: 4px;
align-items: center;
}
.proof__num {
grid-row: 1 / span 2;
font-family: var(--font-display);
font-weight: 700;
font-size: 2.75rem;
line-height: 1;
color: var(--text);
font-variant-numeric: tabular-nums;
}
.proof__item:last-child .proof__num { color: var(--gold); }
.proof__item > .proof__label:nth-child(2) { grid-row: 1 / span 2; }
.proof__stars { display: flex; gap: 3px; }
.proof__stars svg { width: 18px; height: 18px; fill: var(--gold); }
.proof__label {
font-family: var(--font-display);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-muted);
line-height: 1.3;
max-width: 11ch;
}
.proof__sep { width: 1px; height: 48px; background: linear-gradient(transparent, rgba(226, 176, 74, 0.5), transparent); }
/* Zvjezdice "iskoče" jedna za drugom kad se hero otvori */
html.js .proof__stars svg { transform: scale(0) rotate(-60deg); }
html.is-loaded .proof__stars svg {
transform: none;
transition: transform 550ms cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--s) * 90ms + 1500ms);
}
.hero__buttons {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 36px;
}
.neon {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(2.5rem, 5vw, 4.25rem);
line-height: 1.05;
letter-spacing: 0.04em;
text-align: center;
text-transform: uppercase;
color: #fff6dc;
transform: translate3d(calc(var(--mx) * 10px), calc(var(--my) * 6px), 0);
transition: transform 1200ms var(--ease-out);
text-shadow:
0 0 4px rgba(255, 240, 200, 0.9),
0 0 14px rgba(226, 176, 74, 0.8),
0 0 36px rgba(226, 176, 74, 0.55),
0 0 72px rgba(226, 176, 74, 0.35);
opacity: 0.92;
user-select: none;
animation: flicker 6s infinite;
}
@keyframes flicker {
0%, 92%, 100% { opacity: 0.92; }
93% { opacity: 0.55; }
94% { opacity: 0.92; }
96% { opacity: 0.7; }
97% { opacity: 0.92; }
}
/* ---------- Sekcije ---------- */
.section { padding-block: var(--section-y); }
.section--alt { background: var(--bg-alt); border-block: 1px solid var(--border); }
.section__head {
margin-bottom: clamp(40px, 6vw, 64px);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
/* ---------- O nama ---------- */
/* ---------- Usluge i cijene — cjenovnik ---------- */
.services-sec {
position: relative;
background:
radial-gradient(ellipse 50% 50% at 50% 0%, rgba(226, 176, 74, 0.06), transparent 70%),
var(--bg);
}
/* Tabla cjenovnika: dvostruki tanki zlatni okvir, zlatni uglovi, bez oblih ivica */
.board {
position: relative;
max-width: 920px;
margin: 0 auto;
padding: clamp(36px, 5vw, 64px) clamp(20px, 5.5vw, 72px) clamp(32px, 4.5vw, 56px);
background:
radial-gradient(ellipse 70% 45% at 50% 0%, rgba(226, 176, 74, 0.09), transparent 70%),
var(--surface);
border: 1px solid rgba(226, 176, 74, 0.3);
box-shadow:
inset 0 0 0 7px var(--surface),
inset 0 0 0 8px rgba(226, 176, 74, 0.14),
0 50px 100px -60px rgba(0, 0, 0, 0.95);
}
.board__corner { position: absolute; width: 30px; height: 30px; border: 2px solid var(--gold); pointer-events: none; }
.board__corner--tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.board__corner--tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.board__corner--bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.board__corner--br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.board__head { text-align: center; }
.board__orn { display: inline-flex; align-items: center; gap: 14px; }
.board__orn i { width: clamp(40px, 8vw, 80px); height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.board__orn i:last-child { background: linear-gradient(90deg, var(--gold), transparent); }
.board__orn svg { width: 26px; height: 26px; fill: none; stroke: var(--gold); stroke-width: 5; stroke-linecap: round; }
.board__title {
margin: 14px 0 clamp(26px, 4vw, 40px);
font-family: var(--font-display);
font-size: clamp(2.25rem, 5vw, 3.5rem);
font-weight: 700;
line-height: 1;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.board__foot {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px 24px;
margin-top: 30px;
}
/* Fotografija sa zlatnim okvirom i oznakom cijene */
.mn {
display: grid;
grid-template-columns: minmax(0, 1fr);
border-top: 1px solid var(--border);
}
.mn__item { position: relative; }
/* donja linija se "iscrta" kad se red pojavi */
.mn__item::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: var(--border);
}
.mn__row {
position: relative;
display: grid;
grid-template-columns: 52px minmax(0, auto) minmax(18px, 1fr) auto;
align-items: center;
gap: 18px;
padding: 26px 8px 24px 4px;
text-decoration: none;
color: var(--text);
}
/* zlatna linija koja prođe ispod reda na hover */
.mn__row::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
height: 1px;
background: var(--gold);
transform: scaleX(0);
transform-origin: left;
transition: transform 500ms var(--ease-out);
}
.mn__row:hover::after, .mn__row:focus-visible::after { transform: scaleX(1); }
.mn__idx {
font-family: var(--font-display);
font-size: 1.75rem;
font-weight: 600;
line-height: 1;
color: rgba(226, 176, 74, 0.35);
font-variant-numeric: tabular-nums;
transition: color var(--dur) ease;
}
.mn__row:hover .mn__idx { color: var(--gold); }
.mn__row::before { /* zlatno svjetlo prođe preko reda */
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(226, 176, 74, 0.09), transparent 70%);
opacity: 0;
transition: opacity 400ms ease;
pointer-events: none;
}
.mn__row:hover::before { opacity: 1; }
.mn__main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mn__name {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 12px;
font-family: var(--font-display);
font-size: clamp(1.25rem, 2vw, 1.5rem);
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
transition: color var(--dur) ease, transform 500ms var(--ease-out);
}
.mn__tag {
font-family: var(--font-display);
font-size: 0.6875rem;
font-style: normal;
font-weight: 500;
letter-spacing: 0.2em;
color: var(--gold);
}
.mn__desc { font-size: 0.875rem; color: var(--text-muted); }
.mn__lead {
align-self: baseline;
height: 1px;
border-bottom: 1px dotted rgba(243, 239, 230, 0.25);
transform: translateY(-6px);
}
.mn__price {
font-family: var(--font-display);
font-size: clamp(1.75rem, 3vw, 2.25rem);
font-weight: 700;
line-height: 1;
color: var(--gold);
font-variant-numeric: tabular-nums;
}
.mn__price small { margin-left: 3px; font-size: 0.5em; vertical-align: top; }
.mn__cta {
position: absolute;
right: 0;
bottom: 8px;
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-display);
font-size: 0.6875rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--gold);
opacity: 0;
transform: translateX(-8px);
transition: opacity var(--dur) ease, transform var(--dur) var(--ease-out);
}
.mn__cta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mn__row:hover .mn__name { color: var(--gold); transform: translateX(6px); }
.mn__row:hover .mn__cta, .mn__row:focus-visible .mn__cta { opacity: 1; transform: none; }
.mn__row:active .mn__name { transform: translateX(6px) scale(0.99); }
.mn__note { font-size: 0.875rem; color: var(--text-muted); }
/* Pojavljivanje: tekst izroni, a linija ispod reda se iscrta slijeva */
.mn__item.reveal { transform: translateY(18px); }
.mn__item.reveal::after { transform: scaleX(0); transform-origin: left; transition: transform 900ms var(--ease-out) 150ms; }
.mn__item.reveal.is-visible::after { transform: scaleX(1); }
/* ---------- Portfolio ---------- */
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.gallery__item {
position: relative;
overflow: hidden;
border-radius: var(--radius);
background: var(--surface);
aspect-ratio: 1;
}
.gallery__item img {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.9);
transition: transform var(--dur-slow) var(--ease-out), filter var(--dur) ease;
}
.gallery__item::after {
content: "";
position: absolute;
inset: 0;
border: 1px solid transparent;
border-radius: inherit;
transition: border-color var(--dur) ease;
pointer-events: none;
}
.gallery__item:hover img { transform: scale(1.05); filter: saturate(1.05); }
.gallery__item:hover::after { border-color: rgba(226, 176, 74, 0.6); }
.link-arrow {
display: flex;
width: fit-content;
align-items: center;
gap: 10px;
margin: 32px auto 0;
padding: 10px 4px;
font-family: var(--font-display);
font-size: 0.875rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
text-decoration: none;
color: var(--gold);
}
.link-arrow .icon { transition: transform var(--dur) var(--ease-out); }
.link-arrow:hover .icon { transform: translateX(4px); }
/* ---------- Berberi ---------- */
.barber {
display: grid;
grid-template-columns: 0.85fr 1fr;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
}
/* ---------- Utisci ---------- */
.reviews {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.review {
display: flex;
flex-direction: column;
padding: 28px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
}
.stars { display: flex; gap: 3px; }
.stars svg { width: 18px; height: 18px; fill: var(--gold); }
.review blockquote {
margin-top: 18px;
flex-grow: 1;
font-size: 1.0625rem;
line-height: 1.6;
}
.review figcaption {
margin-top: 20px;
font-family: var(--font-display);
font-size: 0.875rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-muted);
}
/* ---------- Zakazivanje (ekran preko cijele stranice) ---------- */
.bk-body { padding-block: clamp(28px, 4vw, 56px) clamp(48px, 6vw, 80px); }
.bk {
display: grid;
grid-template-columns: 300px minmax(0, 1fr);
gap: clamp(28px, 4vw, 56px);
align-items: start;
}
/* Lijevo: naslov, koraci (sa izabranim vrijednostima) i ukupno */
.bk__side { position: sticky; top: calc(var(--header-h) + 28px); }
.bk__heading {
font-family: var(--font-display);
font-size: clamp(2rem, 3.4vw, 2.75rem);
font-weight: 700;
line-height: 1;
text-transform: uppercase;
}
.bk__heading:focus { outline: none; }
.bk__sub { margin-top: 12px; color: var(--text-muted); font-size: 0.9375rem; }
.bk__steps { margin-top: 32px; }
.bk__steps li { position: relative; }
.bk__steps li + li::before { /* spojnica između brojeva */
content: "";
position: absolute;
left: 16px;
top: -14px;
width: 1px;
height: 28px;
background: var(--border);
}
.bk__step {
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
align-items: center;
gap: 14px;
width: 100%;
padding: 14px 0;
background: none;
border: 0;
color: var(--text-muted);
text-align: left;
font: inherit;
cursor: pointer;
}
.bk__step:disabled { cursor: default; }
.bk__num {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border: 1px solid var(--border);
border-radius: 50%;
background: var(--bg);
font-family: var(--font-display);
font-size: 0.875rem;
transition: background-color var(--dur) ease, border-color var(--dur) ease, color var(--dur) ease;
}
.bk__lbl {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
font-family: var(--font-display);
font-size: 0.8125rem;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.bk__lbl small {
font-family: var(--font-body);
font-size: 0.9375rem;
letter-spacing: 0;
text-transform: none;
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bk__step.is-done { color: var(--text); }
.bk__step.is-done .bk__num { border-color: var(--gold); color: var(--gold); }
.bk__step.is-done .bk__lbl small { color: var(--text); }
.bk__step.is-current { color: var(--gold); }
.bk__step.is-current .bk__num { background: var(--gold); border-color: var(--gold); color: var(--on-gold); box-shadow: 0 0 0 5px rgba(226, 176, 74, 0.15); }
.bk__step:not(:disabled):not(.is-current):hover .bk__lbl { color: var(--gold); }
.bk__total {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid var(--border);
}
.bk__total span { font-family: var(--font-display); font-size: 0.8125rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); }
.bk__total strong { font-family: var(--font-display); font-size: 2.5rem; line-height: 1; color: var(--gold); font-variant-numeric: tabular-nums; }
/* Desno: panel sa trenutnim korakom */
.bk__main {
position: relative;
min-height: 560px;
padding: clamp(24px, 3.6vw, 44px);
background: var(--surface);
border: 1px solid var(--border);
border-radius: 20px;
overflow: hidden;
}
.bk__progress { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--border); }
.bk__progress span {
position: absolute;
inset: 0;
background: linear-gradient(90deg, #b88a2f, var(--gold));
transform-origin: left;
transform: scaleX(0.25);
transition: transform 700ms var(--ease-out);
}
.bk__mini, .bk__navtotal { display: none; }
.bk__nav.is-empty { display: none; }
.bk__count { margin-bottom: 10px; font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.bk__panel { margin: 0; padding: 0; border: 0; min-width: 0; animation: stepIn 480ms var(--ease-out); }
.bk__panel.from-left { animation-name: stepInBack; }
@keyframes stepIn { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes stepInBack { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
.bk__title {
padding: 0;
margin-bottom: 6px;
font-family: var(--font-display);
font-size: clamp(1.75rem, 3vw, 2.5rem);
font-weight: 700;
line-height: 1.05;
text-transform: uppercase;
}
.bk__title:focus { outline: none; }
.bk__hint { margin: 4px 0 24px; color: var(--text-muted); font-size: 0.9375rem; }
.bk__panel[data-step="1"] .bk__title { margin-bottom: 26px; }
.bk__error { display: flex; align-items: center; gap: 8px; margin-top: 18px; color: #f0907c; font-size: 0.9375rem; }
.bk__error::before { content: "!"; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #f0907c; color: #1a0d0a; font-weight: 700; font-size: 0.75rem; flex-shrink: 0; }
/* Korak 1: dva velika portreta */
.bk__barbers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.barber-pick { position: relative; display: block; cursor: pointer; }
.barber-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.barber-pick__card {
position: relative;
display: block;
aspect-ratio: 4 / 5;
overflow: hidden;
border-radius: 16px;
background: var(--bg);
box-shadow: 0 0 0 1px var(--border);
transition: box-shadow var(--dur) ease, transform var(--dur) var(--ease-out);
}
.barber-pick__photo { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85); transition: transform 900ms var(--ease-out), filter var(--dur) ease; }
.barber-pick__shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(11, 11, 10, 0.92) 100%); }
.barber-pick__info { position: absolute; left: 22px; right: 22px; bottom: 20px; display: flex; flex-direction: column; gap: 4px; }
.barber-pick__name { font-family: var(--font-display); font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 700; line-height: 1; text-transform: uppercase; }
.barber-pick__check {
position: absolute;
top: 16px;
right: 16px;
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(11, 11, 10, 0.6);
border: 1px solid rgba(243, 239, 230, 0.3);
transition: background-color var(--dur) ease, border-color var(--dur) ease, transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.barber-pick__check svg { width: 18px; height: 18px; fill: none; stroke: var(--on-gold); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.barber-pick:hover .barber-pick__photo { transform: scale(1.05); filter: saturate(1); }
.barber-pick:hover .barber-pick__card { box-shadow: 0 0 0 1px rgba(226, 176, 74, 0.6); }
.barber-pick:active .barber-pick__card { transform: scale(0.985); }
.barber-pick input:checked + .barber-pick__card { box-shadow: 0 0 0 2px var(--gold), 0 24px 60px -24px rgba(226, 176, 74, 0.55); }
.barber-pick input:checked + .barber-pick__card .barber-pick__check { background: var(--gold); border-color: var(--gold); transform: scale(1.1); }
.barber-pick input:checked + .barber-pick__card .barber-pick__check svg { opacity: 1; }
.barber-pick input:focus-visible + .barber-pick__card { outline: 2px solid var(--gold); outline-offset: 4px; }
/* Korak 2: usluge kao cjenovnik, kvadratne kvačice */
.bk__services { border-top: 1px solid var(--border); }
.svc-pick { position: relative; display: block; cursor: pointer; }
.svc-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.svc-pick__row {
display: grid;
grid-template-columns: 24px minmax(0, 1fr) auto;
align-items: center;
gap: 18px;
padding: 20px 4px;
border-bottom: 1px solid var(--border);
transition: background-color var(--dur-fast) ease;
}
.svc-pick__box {
display: grid;
place-items: center;
width: 24px;
height: 24px;
border: 1.5px solid #4a4740;
border-radius: 5px;
transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.svc-pick__box svg { width: 16px; height: 16px; fill: none; stroke: var(--on-gold); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(0.5); transition: opacity 160ms ease, transform 220ms var(--ease-out); }
.svc-pick__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.svc-pick__name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; transition: color var(--dur-fast) ease; }
.svc-pick__desc { font-size: 0.875rem; color: var(--text-muted); }
.svc-pick__price { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; line-height: 1; color: var(--gold); font-variant-numeric: tabular-nums; }
.svc-pick__price small { margin-left: 2px; font-size: 0.55em; vertical-align: top; }
.svc-pick:hover .svc-pick__name { color: var(--gold); }
.svc-pick:hover .svc-pick__box { border-color: var(--gold); }
.svc-pick input:checked + .svc-pick__row { background: rgba(226, 176, 74, 0.06); }
.svc-pick input:checked + .svc-pick__row .svc-pick__box { background: var(--gold); border-color: var(--gold); }
.svc-pick input:checked + .svc-pick__row .svc-pick__box svg { opacity: 1; transform: none; }
.svc-pick input:focus-visible + .svc-pick__row { outline: 2px solid var(--gold); outline-offset: -2px; }
/* Korak 3: kalendar + termini */
.bk__when { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 22px; }
.cal { padding: 18px; background: var(--bg); border: 1px solid var(--border); border-radius: 14px; }
.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cal__month { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.cal__nav { display: grid; place-items: center; width: 40px; height: 40px; background: none; border: 1px solid var(--border); border-radius: 10px; color: var(--text); cursor: pointer; transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease; }
.cal__nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cal__nav:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.cal__nav:disabled { opacity: 0.3; cursor: default; }
.cal__week, .cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal__week { margin-bottom: 6px; }
.cal__week span { text-align: center; font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.cal__day {
position: relative;
aspect-ratio: 1;
min-height: 36px;
background: none;
border: 1px solid transparent;
border-radius: 10px;
color: var(--text);
font: inherit;
font-size: 0.9375rem;
font-variant-numeric: tabular-nums;
cursor: pointer;
transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.cal__day:hover:not(:disabled):not(.is-selected) { border-color: rgba(226, 176, 74, 0.5); }
.cal__day:disabled { color: #4c4942; cursor: default; }
.cal__day.is-today::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--gold); }
.cal__day.is-selected { background: var(--gold); color: var(--on-gold); font-weight: 700; }
.cal__day.is-selected::after { background: var(--on-gold); }
.cal__day--empty { pointer-events: none; }
.slots__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; min-height: 40px; }
.slots__date { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; letter-spacing: 0.02em; }
.slots__legend { display: flex; gap: 14px; font-size: 0.8125rem; color: var(--text-muted); }
.slots__legend li { display: inline-flex; align-items: center; gap: 6px; }
.dot { width: 10px; height: 10px; border-radius: 3px; border: 1px solid var(--border); }
.dot--free { background: var(--bg); border-color: rgba(226, 176, 74, 0.6); }
.dot--taken { background: repeating-linear-gradient(135deg, #2a2925 0 3px, #1a1a18 3px 6px); }
.slots__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 6px; }
.slot {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
min-height: 44px;
padding: 6px 4px;
background: var(--bg);
border: 1px solid rgba(226, 176, 74, 0.35);
border-radius: 8px;
color: var(--text);
font: inherit;
cursor: pointer;
transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease, transform 140ms var(--ease-out);
}
.slot__time { font-family: var(--font-display); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.slot__note { font-size: 0.5625rem; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; }
.slot:hover:not(:disabled):not(.is-selected) { border-color: var(--gold); background: rgba(226, 176, 74, 0.08); }
.slot:active:not(:disabled) { transform: scale(0.97); }
.slot.is-selected { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.slot.is-taken { background: repeating-linear-gradient(135deg, #22211e 0 6px, #181816 6px 12px); border-color: var(--border); color: #77726a; cursor: not-allowed; }
.slot.is-taken .slot__time { text-decoration: line-through; }
.slot.is-taken .slot__note { color: #c9806f; }
.slot.is-past { opacity: 0.35; border-color: var(--border); cursor: not-allowed; }
.slot--skeleton { min-height: 44px; border-radius: 8px; background: linear-gradient(90deg, #171715 25%, #22211e 50%, #171715 75%); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.slots__msg { grid-column: 1 / -1; padding: 16px; color: var(--text-muted); background: var(--bg); border: 1px dashed var(--border); border-radius: 10px; text-align: center; }
.slots__msg--full { color: var(--gold); border-color: rgba(226, 176, 74, 0.4); }
.link-btn { background: none; border: 0; padding: 0; color: var(--gold); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* Korak 4: polja */
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 0.875rem; font-weight: 500; color: var(--text); }
.req { color: var(--gold); }
.opt { color: var(--text-muted); font-weight: 400; }
.field input,
.field textarea {
width: 100%;
min-height: 52px;
padding: 12px 14px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 10px;
color: var(--text);
font: inherit;
font-size: 1rem;
transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.field textarea { resize: vertical; min-height: 96px; }
.field input::placeholder, .field textarea::placeholder { color: #5f5b53; }
.field input:hover, .field textarea:hover { border-color: #3a3833; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(226, 176, 74, 0.18); }
.field input[aria-invalid="true"] { border-color: #f0907c; box-shadow: 0 0 0 3px rgba(240, 144, 124, 0.15); }
.field__error { color: #f0907c; font-size: 0.875rem; }
.field__help { color: var(--text-muted); font-size: 0.8125rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Navigacija */
.bk__nav { display: flex; align-items: center; gap: 12px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border); }
.bk__nav #bk-next, .bk__nav #bk-submit { margin-left: auto; }
.icon--back { order: -1; }
.btn:hover .icon--back { transform: translateX(-3px); }
#bk-submit { min-width: 230px; }
.spinner { display: none; width: 20px; height: 20px; border: 2px solid rgba(20, 17, 10, 0.25); border-top-color: var(--on-gold); border-radius: 50%; animation: spin 700ms linear infinite; }
#bk-submit.is-loading .btn__label { opacity: 0.6; }
#bk-submit.is-loading .spinner { display: inline-block; }
#bk-submit:disabled { cursor: wait; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Potvrda — "karta" termina */
.bk__done { max-width: 480px; margin: 0 auto; padding: 12px 0; text-align: center; animation: stepIn 520ms var(--ease-out); }
.bk__done:focus { outline: none; }
.bk__check svg { width: 84px; height: 84px; fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.bk__check circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: drawCheck 700ms var(--ease-out) forwards; }
.bk__check path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: drawCheck 450ms var(--ease-out) 550ms forwards; }
@keyframes drawCheck { to { stroke-dashoffset: 0; } }
.bk__done-title { margin-top: 18px; font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1; text-transform: uppercase; }
.bk__done-text { margin-top: 12px; color: #cfc9bc; }
.ticket {
position: relative;
margin-top: 28px;
padding: 22px 24px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 14px;
text-align: left;
}
.ticket::before, .ticket::after { /* "perforacija" karte */
content: "";
position: absolute;
top: calc(100% - 64px);
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--surface);
border: 1px solid var(--border);
}
.ticket::before { left: -10px; clip-path: inset(0 0 0 50%); }
.ticket::after { right: -10px; clip-path: inset(0 50% 0 0); }
.ticket__row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 0.9375rem; }
.ticket__row span { color: var(--text-muted); flex-shrink: 0; }
.ticket__row strong { text-align: right; font-weight: 600; }
.ticket__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 16px; border-top: 1px dashed rgba(226, 176, 74, 0.4); margin-top: 6px; }
.ticket__total span { font-family: var(--font-display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); font-size: 0.8125rem; }
.ticket__total strong { font-family: var(--font-display); font-size: 2rem; color: var(--gold); }
.ticket__id { margin-top: 8px; font-size: 0.75rem; color: var(--text-muted); }
.bk__done-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.bk__again { margin-top: 18px; font-size: 0.875rem; }
.bk__offline { padding: 40px 12px; text-align: center; color: #cfc9bc; }
/* ---------- Lokacija (3D mapa) ---------- */
.loc__map {
position: relative;
height: clamp(480px, 72vh, 700px);
overflow: hidden;
background: #0e0e0d;
border: 1px solid rgba(226, 176, 74, 0.28);
border-radius: 18px;
box-shadow: 0 40px 90px -40px rgba(226, 176, 74, 0.3);
}
/* jače od MapLibre-ovog ".maplibregl-map { position: relative }", da mapa popuni cijeli okvir */
.loc .loc__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.loc__fallback { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) invert(0.92) contrast(0.9); }
.loc__map::after { /* blaga vinjeta preko ivica */
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
border-radius: inherit;
box-shadow: inset 0 0 90px 10px rgba(11, 11, 10, 0.7);
}
.loc__status { position: absolute; z-index: 3; top: 16px; left: 16px; }
.loc__tools { position: absolute; z-index: 3; top: 16px; right: 16px; display: flex; gap: 8px; }
.map-btn {
display: grid;
place-items: center;
width: 44px;
height: 44px;
background: rgba(11, 11, 10, 0.82);
border: 1px solid var(--border);
border-radius: 12px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: var(--text);
cursor: pointer;
transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease, transform 140ms var(--ease-out);
}
.map-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.map-btn:hover { border-color: var(--gold); color: var(--gold); }
.map-btn:active { transform: scale(0.94); }
.map-btn .i-collapse { display: none; }
.map-btn[aria-pressed="true"] .i-expand { display: none; }
.map-btn[aria-pressed="true"] .i-collapse { display: block; }
/* Kartica sa adresom i uputama — lebdi preko mape */
.loc__card {
position: absolute;
z-index: 3;
left: 16px;
bottom: 16px;
width: min(340px, calc(100% - 32px));
padding: 18px 20px;
background: rgba(11, 11, 10, 0.86);
border: 1px solid var(--border);
border-radius: 14px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.loc__name { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); }
.loc__addr { margin-top: 4px; font-size: 0.9375rem; line-height: 1.5; }
.loc__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
/* Uvećana mapa — preko cijelog ekrana */
html.map-expanded { overflow: hidden; }
.loc__map.is-expanded {
position: fixed;
inset: 0;
z-index: 1600;
height: auto;
border: 0;
border-radius: 0;
animation: mapExpand 450ms var(--ease-out);
}
@keyframes mapExpand {
from { opacity: 0.4; transform: scale(0.97); }
to { opacity: 1; transform: none; }
}
.loc__map.is-expanded .loc__status { top: 20px; left: 20px; }
.loc__map.is-expanded .loc__tools { top: 20px; right: 20px; }
.loc__map.is-expanded .loc__card { left: 20px; bottom: 20px; }
/* ---------- Kontakt ---------- */
.contact-sec {
background:
radial-gradient(ellipse 45% 60% at 100% 100%, rgba(226, 176, 74, 0.07), transparent 70%),
var(--bg);
}
.ct3 {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
gap: clamp(32px, 6vw, 80px);
align-items: start;
}
/* Berberi u redovima — bez kutija, odvojeni tankim linijama */
.people { border-top: 1px solid var(--border); }
.person {
display: grid;
grid-template-columns: 72px minmax(0, 1fr) auto;
align-items: center;
gap: 20px;
padding: 26px 0;
border-bottom: 1px solid var(--border);
}
.person__photo {
width: 72px;
height: 72px;
border-radius: 50%;
object-fit: cover;
box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px rgba(226, 176, 74, 0.55);
transition: transform 500ms var(--ease-out);
}
.person:hover .person__photo { transform: scale(1.06) rotate(-3deg); }
.person__info { display: flex; flex-direction: column; min-width: 0; }
.person__name { margin-top: 2px; font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; line-height: 1.05; text-transform: uppercase; }
.person__phone {
margin-top: 6px;
width: fit-content;
font-family: var(--font-display);
font-size: 1.375rem;
font-weight: 500;
letter-spacing: 0.06em;
text-decoration: none;
font-variant-numeric: tabular-nums;
background: linear-gradient(var(--gold), var(--gold)) left bottom / 0 1px no-repeat;
transition: color var(--dur-fast) ease, background-size 400ms var(--ease-out);
}
.person__phone:hover { color: var(--gold); background-size: 100% 1px; }
.person__ig { margin-top: 4px; width: fit-content; font-size: 0.875rem; color: var(--text-muted); text-decoration: none; transition: color var(--dur-fast) ease; }
.person__ig:hover { color: var(--gold); }
.person__acts { display: flex; gap: 8px; }
.ico-btn {
display: grid;
place-items: center;
width: 46px;
height: 46px;
border: 1px solid var(--border);
border-radius: 50%;
color: var(--text);
transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease, color var(--dur-fast) ease, transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ico-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ico-btn:hover { background: var(--gold); border-color: var(--gold); color: var(--on-gold); transform: translateY(-3px); }
.ico-btn:active { transform: scale(0.94); }
/* Kratke informacije ispod */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }
.fact dt { font-family: var(--font-display); font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted); }
.fact dd { margin-top: 6px; font-size: 0.9375rem; font-weight: 500; overflow-wrap: anywhere; }
.fact a { text-decoration: none; transition: color var(--dur-fast) ease; }
.fact a:hover { color: var(--gold); }
/* Forma — zlatni akcenat gore, polja samo sa linijom */
.ct3__form {
position: relative;
padding: clamp(26px, 3.4vw, 40px);
background: var(--surface);
border: 1px solid var(--border);
border-radius: 18px;
overflow: hidden;
}
.ct3__form::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #a87d2a, var(--gold), #ffe3a3);
}
.ct3__form-title { font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 700; text-transform: uppercase; }
.ct3__form-sub { margin-top: 6px; color: var(--text-muted); font-size: 0.9375rem; }
.line-fields { display: flex; flex-direction: column; gap: 6px; margin: 22px 0 8px; }
.lf { position: relative; padding-top: 18px; }
.lf input, .lf textarea {
width: 100%;
min-height: 48px;
padding: 10px 0;
background: transparent;
border: 0;
border-bottom: 1px solid #3a3833;
border-radius: 0;
color: var(--text);
font: inherit;
font-size: 1rem;
resize: vertical;
}
.lf textarea { min-height: 96px; }
.lf input:focus, .lf textarea:focus { outline: none; }
/* natpis lebdi iznad kad je polje aktivno ili popunjeno */
.lf label {
position: absolute;
left: 0;
top: 30px;
color: var(--text-muted);
font-size: 1rem;
pointer-events: none;
transform-origin: left;
transition: transform 250ms var(--ease-out), color 200ms ease;
}
.lf input:focus + label, .lf input:not(:placeholder-shown) + label,
.lf textarea:focus + label, .lf textarea:not(:placeholder-shown) + label {
transform: translateY(-26px) scale(0.78);
color: var(--gold);
}
/* zlatna linija se izvuče ispod aktivnog polja */
.lf::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
background: var(--gold);
transform: scaleX(0);
transform-origin: left;
transition: transform 450ms var(--ease-out);
}
.lf:focus-within::after { transform: scaleX(1); }
.lf--area::after { bottom: 6px; }
.ct3__form .btn { width: 100%; margin-top: 18px; }
.ct3__form .btn .icon { transition: transform var(--dur) var(--ease-out); }
.ct3__form .btn:hover .icon { transform: translate(3px, -3px); }
.msg__status { margin-top: 14px; font-size: 0.9375rem; }
.msg__status.is-ok { color: #7fdca0; }
.msg__status.is-err { color: #f0907c; }
#msg-send.is-loading .btn__label { opacity: 0.6; }
#msg-send.is-loading .spinner { display: inline-block; }
.hours { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; font-variant-numeric: tabular-nums; }
.hours dt, .hours dd { padding: 2px 0; }
.hours dd { text-align: right; }
.hours .is-today { color: var(--gold); font-weight: 700; }
/* ---------- Posebni ekrani (berberi, utisci, o nama, zakazivanje) ---------- */
html.view-open { overflow: hidden; }
html.view-open .mobile-cta { display: none; }
.view {
position: fixed;
inset: 0;
z-index: 1500;
display: flex;
flex-direction: column;
overflow-y: auto;
overscroll-behavior: contain;
background:
radial-gradient(ellipse 60% 40% at 50% 0%, rgba(226, 176, 74, 0.07), transparent 70%),
var(--bg);
--ox: 50%;
--oy: 50%;
}
.view[hidden] { display: none; }
/* ---------- Filmski "X" rez makazama ----------
Otvaranje: 4 tamna trougla uklize i zatvore ekran → dvoje makaze presijeku ekran unakrst
(bljesak + podrhtavanje) → komadi se razlete → nova stranica "uleti" iz zuma. */
.xfx { position: fixed; inset: 0; z-index: 1550; display: none; pointer-events: none; overflow: hidden; }
.xfx.is-open, .xfx.is-close { display: block; pointer-events: auto; }
.xfx__shake { position: absolute; inset: 0; }
.xfx__shard {
position: absolute;
inset: -2px;
background:
radial-gradient(ellipse at 50% 50%, rgba(226, 176, 74, 0.1), transparent 60%),
#0b0b0a;
will-change: transform, opacity;
}
.xfx__shard--t { clip-path: polygon(0 0, 100% 0, 50% 50%); }
.xfx__shard--r { clip-path: polygon(100% 0, 100% 100%, 50% 50%); background-color: #0d0d0b; }
.xfx__shard--b { clip-path: polygon(0 100%, 100% 100%, 50% 50%); }
.xfx__shard--l { clip-path: polygon(0 0, 0 100%, 50% 50%); background-color: #0d0d0b; }
/* zlatni rezovi po dijagonalama */
.xfx__slash {
position: absolute;
left: 50%;
top: 50%;
z-index: 2;
width: var(--diag);
height: 3px;
margin: -1.5px 0 0 calc(var(--diag) / -2);
background: linear-gradient(90deg, transparent, var(--gold) 12%, #fff4d8 50%, var(--gold) 88%, transparent);
box-shadow: 0 0 18px rgba(255, 220, 150, 0.95), 0 0 50px rgba(226, 176, 74, 0.6);
transform-origin: 50% 50%;
opacity: 0;
}
.xfx__slash--a { transform: rotate(var(--ang)) scaleX(0); }
.xfx__slash--b { transform: rotate(calc(180deg - var(--ang))) scaleX(0); }
.xfx__blade {
position: absolute;
left: 50%;
top: 50%;
z-index: 3;
width: 58px;
height: 58px;
margin: -29px 0 0 -29px;
opacity: 0;
}
.xfx__blade svg {
width: 100%;
height: 100%;
overflow: visible;
transform: rotate(90deg);
fill: none;
stroke: var(--gold);
stroke-width: 5;
stroke-linecap: round;
filter: drop-shadow(0 0 14px rgba(255, 220, 150, 0.9));
}
.xfx__blade .snip--a { animation: snipA 160ms ease-in-out infinite; }
.xfx__blade .snip--b { animation: snipB 160ms ease-in-out infinite; }
.xfx__flash {
position: absolute;
inset: 0;
z-index: 4;
background: radial-gradient(circle at 50% 50%, rgba(255, 244, 216, 0.55), rgba(226, 176, 74, 0.15) 40%, transparent 70%);
opacity: 0;
}
/* --- Otvaranje --- */
.xfx.is-open .xfx__shard--t { animation: shardInT 380ms cubic-bezier(0.7, 0, 0.2, 1) both, shardOutT 700ms cubic-bezier(0.7, 0, 0.2, 1) 900ms forwards; }
.xfx.is-open .xfx__shard--r { animation: shardInR 380ms cubic-bezier(0.7, 0, 0.2, 1) 40ms both, shardOutR 700ms cubic-bezier(0.7, 0, 0.2, 1) 900ms forwards; }
.xfx.is-open .xfx__shard--b { animation: shardInB 380ms cubic-bezier(0.7, 0, 0.2, 1) 80ms both, shardOutB 700ms cubic-bezier(0.7, 0, 0.2, 1) 900ms forwards; }
.xfx.is-open .xfx__shard--l { animation: shardInL 380ms cubic-bezier(0.7, 0, 0.2, 1) 120ms both, shardOutL 700ms cubic-bezier(0.7, 0, 0.2, 1) 900ms forwards; }
.xfx.is-open .xfx__slash--a { animation: slashA 300ms cubic-bezier(0.65, 0, 0.35, 1) 420ms forwards, slashFade 300ms ease 950ms forwards; }
.xfx.is-open .xfx__slash--b { animation: slashB 300ms cubic-bezier(0.65, 0, 0.35, 1) 640ms forwards, slashFade 300ms ease 950ms forwards; }
.xfx.is-open .xfx__blade--a { animation: bladeA 300ms cubic-bezier(0.65, 0, 0.35, 1) 420ms both; }
.xfx.is-open .xfx__blade--b { animation: bladeB 300ms cubic-bezier(0.65, 0, 0.35, 1) 640ms both; }
.xfx.is-open .xfx__flash { animation: xFlash 900ms ease 600ms both; }
.xfx.is-open .xfx__shake { animation: xShake 420ms linear 600ms both; }
/* --- Zatvaranje --- */
.xfx.is-close .xfx__shard--t { animation: shardBackT 420ms cubic-bezier(0.7, 0, 0.2, 1) both, xFade 380ms ease 560ms forwards; }
.xfx.is-close .xfx__shard--r { animation: shardBackR 420ms cubic-bezier(0.7, 0, 0.2, 1) 30ms both, xFade 380ms ease 560ms forwards; }
.xfx.is-close .xfx__shard--b { animation: shardBackB 420ms cubic-bezier(0.7, 0, 0.2, 1) 60ms both, xFade 380ms ease 560ms forwards; }
.xfx.is-close .xfx__shard--l { animation: shardBackL 420ms cubic-bezier(0.7, 0, 0.2, 1) 90ms both, xFade 380ms ease 560ms forwards; }
.xfx.is-close .xfx__slash--a { transform: rotate(var(--ang)) scaleX(1); animation: xBlink 520ms ease 420ms both; }
.xfx.is-close .xfx__slash--b { transform: rotate(calc(180deg - var(--ang))) scaleX(1); animation: xBlink 520ms ease 420ms both; }
.xfx.is-close .xfx__flash { animation: xFlash 700ms ease 430ms both; }
.xfx.is-close .xfx__shake { animation: xShake 300ms linear 440ms both; }
@keyframes shardInT { from { transform: translateY(-100%); } to { transform: none; } }
@keyframes shardInR { from { transform: translateX(100%); } to { transform: none; } }
@keyframes shardInB { from { transform: translateY(100%); } to { transform: none; } }
@keyframes shardInL { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes shardOutT { to { transform: translate(-4%, -115%) rotate(-9deg) scale(1.08); opacity: 0.6; } }
@keyframes shardOutR { to { transform: translate(115%, -4%) rotate(9deg) scale(1.08); opacity: 0.6; } }
@keyframes shardOutB { to { transform: translate(4%, 115%) rotate(-7deg) scale(1.08); opacity: 0.6; } }
@keyframes shardOutL { to { transform: translate(-115%, 4%) rotate(7deg) scale(1.08); opacity: 0.6; } }
@keyframes shardBackT { from { transform: translate(-4%, -115%) rotate(-9deg); } to { transform: none; } }
@keyframes shardBackR { from { transform: translate(115%, -4%) rotate(9deg); } to { transform: none; } }
@keyframes shardBackB { from { transform: translate(4%, 115%) rotate(-7deg); } to { transform: none; } }
@keyframes shardBackL { from { transform: translate(-115%, 4%) rotate(7deg); } to { transform: none; } }
@keyframes slashA { from { transform: rotate(var(--ang)) scaleX(0); opacity: 1; } to { transform: rotate(var(--ang)) scaleX(1); opacity: 1; } }
@keyframes slashB { from { transform: rotate(calc(180deg - var(--ang))) scaleX(0); opacity: 1; } to { transform: rotate(calc(180deg - var(--ang))) scaleX(1); opacity: 1; } }
@keyframes slashFade { to { opacity: 0; } }
@keyframes bladeA {
0% { opacity: 1; transform: rotate(var(--ang)) translateX(calc(var(--diag) / -2 - 40px)); }
100% { opacity: 1; transform: rotate(var(--ang)) translateX(calc(var(--diag) / 2 + 40px)); }
}
@keyframes bladeB {
0% { opacity: 1; transform: rotate(calc(180deg - var(--ang))) translateX(calc(var(--diag) / -2 - 40px)); }
100% { opacity: 1; transform: rotate(calc(180deg - var(--ang))) translateX(calc(var(--diag) / 2 + 40px)); }
}
@keyframes xFlash {
0% { opacity: 0; }
10% { opacity: 1; }
30% { opacity: 0.3; }
42% { opacity: 0.9; }
100% { opacity: 0; }
}
@keyframes xShake {
0%, 100% { transform: none; }
15% { transform: translate(-7px, 4px); }
30% { transform: translate(6px, -5px); }
45% { transform: translate(-4px, -3px); }
60% { transform: translate(5px, 3px); }
80% { transform: translate(-2px, 1px); }
}
@keyframes xBlink { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
@keyframes xFade { to { opacity: 0; } }
/* stranica iza se odmakne dok traje prelaz */
#main, .header { transition: transform 750ms cubic-bezier(0.16, 1, 0.3, 1); }
html.cine #main { transform: scale(0.94); }
/* nova stranica "uleti" iz zuma i zamućenja dok se komadi razlijeću */
.view.is-opening { animation: viewBurst 1000ms cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes viewBurst {
from { transform: scale(1.28); filter: blur(14px) brightness(1.6); opacity: 0.5; }
to { transform: none; filter: none; opacity: 1; }
}
.view__bar {
position: sticky;
top: 0;
z-index: 5;
flex-shrink: 0;
height: var(--header-h);
background: rgba(11, 11, 10, 0.9);
border-bottom: 1px solid var(--border);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.view__bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 100%; }
.view__crumb { font-family: var(--font-display); font-size: 0.8125rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); }
.view__close {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 0 16px;
background: none;
border: 1px solid var(--border);
border-radius: 999px;
color: var(--text);
font: inherit;
font-size: 0.875rem;
cursor: pointer;
transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.view__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: transform var(--dur) var(--ease-out); }
.view__close:hover { border-color: var(--gold); color: var(--gold); }
.view__close:hover svg { transform: rotate(90deg); }
.view__body { flex: 1; padding-block: clamp(40px, 6vw, 80px) clamp(56px, 8vw, 96px); }
/* Sadržaj ekrana izranja u nizu kad se ekran otvori */
.view-in { opacity: 0; transform: translateY(26px); }
.view.is-open .view-in {
opacity: 1;
transform: none;
transition: opacity 700ms ease calc(var(--i, 0) * 80ms + 350ms), transform 900ms var(--ease-out) calc(var(--i, 0) * 80ms + 350ms);
}
.view .section__head { margin-bottom: clamp(32px, 5vw, 56px); }
/* Pin salona na mapi */
.pin { display: flex; flex-direction: column; align-items: center; color: inherit; text-decoration: none; cursor: pointer; }
.pin__dot {
position: relative;
z-index: 1;
display: grid;
place-items: center;
width: 46px;
height: 46px;
border-radius: 50% 50% 50% 0;
transform: rotate(-45deg);
background: var(--gold);
box-shadow: 0 0 0 4px rgba(11, 11, 10, 0.85), 0 10px 30px rgba(226, 176, 74, 0.55);
}
.pin__dot svg { width: 22px; height: 22px; transform: rotate(45deg); fill: none; stroke: var(--on-gold); stroke-width: 6; stroke-linecap: round; }
.pin__pulse {
position: absolute;
bottom: -14px;
width: 30px;
height: 12px;
border-radius: 50%;
background: rgba(226, 176, 74, 0.55);
animation: pinPulse 2s ease-out infinite;
}
@keyframes pinPulse {
0% { transform: scale(0.6); opacity: 0.9; }
100% { transform: scale(3.2); opacity: 0; }
}
.pin__card {
position: relative;
display: flex;
flex-direction: column;
margin-bottom: 14px;
padding: 10px 14px;
background: rgba(11, 11, 10, 0.92);
border: 1px solid rgba(226, 176, 74, 0.6);
border-radius: 10px;
white-space: nowrap;
text-align: center;
opacity: 0;
transform: translateY(8px) scale(0.96);
transition: opacity 500ms ease, transform 600ms var(--ease-out);
}
.pin__card::after {
content: "";
position: absolute;
left: 50%;
bottom: -6px;
width: 10px;
height: 10px;
margin-left: -5px;
background: rgba(11, 11, 10, 0.92);
border-right: 1px solid rgba(226, 176, 74, 0.6);
border-bottom: 1px solid rgba(226, 176, 74, 0.6);
transform: rotate(45deg);
}
.pin__card strong { font-family: var(--font-display); font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.pin__card span { font-size: 0.75rem; color: var(--text-muted); }
.pin.is-visible .pin__card { opacity: 1; transform: none; }
/* Oznake usput na mapi: Stara pošta i nazivi ulica (iskaču tokom preleta) */
.map-label {
display: flex;
flex-direction: column;
align-items: center;
pointer-events: none;
opacity: 0;
transform: translateY(8px) scale(0.9);
transition: opacity 500ms ease, transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.map-label > span:last-child,
.map-label > span:only-child {
padding: 6px 11px;
background: rgba(11, 11, 10, 0.9);
border: 1px solid rgba(226, 176, 74, 0.55);
border-radius: 8px;
font-family: var(--font-display);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
white-space: nowrap;
color: #f3efe6;
}
.map-label::after { /* tačka na tlu ispod oznake */
content: "";
width: 7px;
height: 7px;
margin-top: 6px;
border-radius: 50%;
background: var(--gold);
box-shadow: 0 0 0 3px rgba(226, 176, 74, 0.25);
}
.map-label--place { flex-direction: column; }
.map-label--place > span:last-child { display: inline-flex; align-items: center; gap: 8px; color: var(--gold); }
.map-label__icon {
position: relative;
top: 10px;
z-index: 1;
display: grid;
place-items: center;
width: 26px;
height: 26px;
margin-bottom: -4px;
border-radius: 50%;
background: var(--gold);
}
.map-label__icon svg { width: 14px; height: 14px; fill: none; stroke: var(--on-gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.map-label--place { gap: 0; }
.map-label--place .map-label__icon { order: -1; top: 0; margin-bottom: 6px; }
.map-label.is-visible { opacity: 1; transform: none; }
/* MapLibre kontrole u stilu sajta */
.loc .maplibregl-ctrl-group { background: rgba(11, 11, 10, 0.85); border: 1px solid var(--border); border-radius: 10px; box-shadow: none; }
.loc .maplibregl-ctrl-group button + button { border-top-color: var(--border); }
.loc .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1) brightness(0.85); }
.loc .maplibregl-ctrl-group button:not(:disabled):hover { background-color: rgba(226, 176, 74, 0.12); }
.loc .maplibregl-ctrl-bottom-right { z-index: 2; margin: 0 6px 6px 0; }
.loc .maplibregl-ctrl-attrib { background: rgba(11, 11, 10, 0.75) !important; color: var(--text-muted); }
.loc .maplibregl-ctrl-attrib a { color: var(--text-muted); }
.loc .maplibregl-ctrl-attrib-button { filter: invert(1); }
.loc .maplibregl-cooperative-gesture-screen { font-family: var(--font-body); background: rgba(11, 11, 10, 0.6); }
/* ---------- Footer ---------- */
.footer {
padding-block: clamp(56px, 7vw, 88px) 28px;
border-top: 1px solid var(--border);
background: radial-gradient(ellipse 60% 80% at 0% 100%, rgba(226, 176, 74, 0.06), transparent 70%), #090908;
}
.footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1.2fr 1.1fr; gap: 36px clamp(24px, 4vw, 56px); }
.footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.footer__slogan { font-family: var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 0.9375rem; color: #cfc9bc; }
.footer__col a { text-decoration: none; transition: color var(--dur-fast) ease, transform var(--dur) var(--ease-out); }
.footer__col a:hover { color: var(--gold); transform: translateX(3px); }
.footer__title { margin-bottom: 4px; font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted); }
.footer__title--gap { margin-top: 14px; }
.footer__bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: clamp(40px, 5vw, 64px);
padding-top: 22px;
border-top: 1px solid var(--border);
font-size: 0.8125rem;
color: var(--text-muted);
}
.footer__top { text-decoration: none; font-family: var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; transition: color var(--dur-fast) ease; }
.footer__top:hover { color: var(--gold); }
/* ---------- Mobilni CTA ---------- */
.mobile-cta {
position: fixed;
left: 16px;
right: 16px;
bottom: calc(16px + env(safe-area-inset-bottom));
z-index: 90;
display: none;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
transform: translateY(150%);
transition: transform var(--dur) var(--ease-out);
}
.mobile-cta.is-visible { transform: translateY(0); }
/* ---------- Animacija pojavljivanja ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }
/* ==========================================================
Loading screen — jedan neprekidan kadar do hero sekcije
• veliki logo = isti logo kao u meniju (makaze se iscrtaju, riječi izađu iz njih)
• traka napretka postane rez, ekran se raspolovi i polovine uklize pod filmske trake
• logo se smanji i sleti tačno na svoje mjesto u meniju
• gornja traka se pretopi u meni, donja u info traku
(rez, otvaranje i prelet vodi JS preko Web Animations API)
========================================================== */
html.is-loading { overflow: hidden; }
.loader {
position: fixed;
inset: 0;
z-index: 2200; /* iznad filmskih traka, da logo može da preleti preko gornje */
display: grid;
place-items: center;
overflow: hidden;
pointer-events: none;
--lb: var(--header-h); /* visina filmskih traka */
--cut: 50vh; /* visina reza — JS je postavi tačno na traku napretka */
}
html.is-loading .loader { pointer-events: auto; } /* dok traje učitavanje, klikovi ne prolaze do sajta */
html:not(.js) .loader,
html:not(.js) .letterbox,
html.loader-failed .loader,
html.loader-failed .letterbox { display: none; }
/* Okvir između filmskih traka — polovine se pri otvaranju "sakriju" pod trake */
.loader__frame {
position: absolute;
left: 0;
right: 0;
top: var(--lb);
bottom: var(--lb);
overflow: hidden;
}
.loader__half {
position: absolute;
left: 0;
right: 0;
background: var(--bg);
will-change: transform;
}
.loader__half--top { top: 0; height: calc(var(--cut) - var(--lb) + 1px); }
.loader__half--bottom { top: calc(var(--cut) - var(--lb)); bottom: 0; }
/* Tanke zlatne ivice reza */
.loader__half::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold) 25%, var(--gold) 75%, transparent);
opacity: 0;
}
.loader__half--top::after { bottom: 0; }
.loader__half--bottom::after { top: 0; }
.loader.is-open .loader__half::after { opacity: 0.9; }
/* Blaga vinjeta */
.loader__vignette {
position: absolute;
inset: 0;
z-index: 1;
background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, 0.5) 100%);
}
.loader.is-open .loader__vignette { opacity: 0; transition: opacity 600ms ease; }
/* Scena */
.loader__stage {
position: relative;
z-index: 4;
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
}
/* ---------- Veliki logo (isti kao u meniju, samo uvećan) ---------- */
.loader__logo {
position: relative;
font-size: clamp(2.25rem, 7.5vw, 4.75rem);
color: var(--text);
transform-origin: 0 0;
will-change: transform;
}
/* Makaze "izrežu" logo slijeva nadesno: iza njih se logo otkriva, ispred je još prazno */
.loader__brand { position: relative; display: inline-block; }
.loader__logo {
clip-path: inset(-30% 100% -30% 0);
animation: logoCut 1400ms cubic-bezier(0.65, 0, 0.35, 1) 450ms both;
}
@keyframes logoCut { to { clip-path: inset(-30% 0 -30% 0); } }
.loader__logo.is-flying { clip-path: none; animation: none; }
/* Zlatna prašina */
.loader__dust { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.loader__dust span {
position: absolute;
left: var(--x);
bottom: -10px;
width: var(--s);
height: var(--s);
border-radius: 50%;
background: #ffe3a3;
box-shadow: 0 0 6px rgba(226, 176, 74, 0.9);
opacity: 0;
animation: dust var(--d) linear var(--w) infinite;
}
@keyframes dust {
0% { transform: translate(0, 0); opacity: 0; }
15% { opacity: 0.7; }
85% { opacity: 0.5; }
100% { transform: translate(40px, -105vh); opacity: 0; }
}
.loader.is-open .loader__dust { opacity: 0; transition: opacity 500ms ease; }
/* Odsjaj svjetla prođe preko loga kad se otkrije (preko tamne pozadine se ne vidi) */
.loader__logo::after {
content: "";
position: absolute;
inset: -20% -10%;
background: linear-gradient(105deg, transparent 35%, rgba(255, 248, 225, 0.95) 50%, transparent 65%);
mix-blend-mode: overlay;
transform: translateX(-120%);
display: none; /* odsjaj je sada na samim slovima (vidi ispod) */
pointer-events: none;
}
.loader__logo.is-flying::after { display: none; }
/* Topli sjaj iza loga koji lagano "diše" */
.loader__brand::before {
content: "";
position: absolute;
left: -30%;
right: -30%;
top: -120%;
bottom: -120%;
z-index: -1;
background: radial-gradient(ellipse at center, rgba(226, 176, 74, 0.16), transparent 62%);
opacity: 0;
animation: brandGlow 2.6s ease-in-out 900ms infinite alternate;
pointer-events: none;
}
@keyframes brandGlow { from { opacity: 0.35; transform: scale(0.95); } to { opacity: 1; transform: scale(1.05); } }
/* kad se logo otkrije, slova dobiju blag zlatni sjaj */
.loader__logo .logo__word {
background: linear-gradient(105deg, var(--text) 42%, #fff3cf 48%, #e2b04a 50%, #fff3cf 52%, var(--text) 58%);
background-size: 320% 100%;
background-position: 100% 0;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: wordGlow 1600ms ease-out 1700ms both, wordSheen 1200ms cubic-bezier(0.65, 0, 0.35, 1) 1900ms forwards;
}
@keyframes wordSheen { to { background-position: 0 0; } }
@keyframes wordGlow {
0% { filter: drop-shadow(0 0 0 rgba(226, 176, 74, 0)); }
40% { filter: drop-shadow(0 0 16px rgba(226, 176, 74, 0.6)); }
100% { filter: drop-shadow(0 0 8px rgba(226, 176, 74, 0.2)); }
}
.loader__logo.is-flying .logo__word { animation: none; filter: none; background: none; color: var(--text); }
/* Zlatna ivica reza koja putuje sa makazama */
/* Makaze u samom logu jednom škljocnu kad je logo izrezan */.blade, .snip {
transform-box: view-box;
transform-origin: 32px 34.9px;
}
.blade--a { animation: snipA 460ms ease-in-out 1900ms 1 both; }
.blade--b { animation: snipB 460ms ease-in-out 1900ms 1 both; }
@keyframes snipA {
0%, 100% { transform: rotate(0deg); }
45% { transform: rotate(-28deg); }
}
@keyframes snipB {
0%, 100% { transform: rotate(0deg); }
45% { transform: rotate(28deg); }
}
/* Završni, odlučni rez — i makaze se vrate u položaj kao u meniju */
.loader.is-cut .blade--a { animation: snapA 320ms cubic-bezier(0.5, 0, 0.2, 1) 1 both; }
.loader.is-cut .blade--b { animation: snapB 320ms cubic-bezier(0.5, 0, 0.2, 1) 1 both; }
@keyframes snapA { 50% { transform: rotate(-34deg); } }
@keyframes snapB { 50% { transform: rotate(34deg); } }
/* Linija učitavanja — makaze je sijeku dok napredak raste (na kraju postane rez) */
.snip--a { animation: snipA 340ms ease-in-out infinite; }
.snip--b { animation: snipB 340ms ease-in-out infinite; }
.loader__pct {
margin-top: -12px;
font-family: var(--font-display);
font-size: 1.125rem;
font-weight: 500;
letter-spacing: 0.2em;
color: var(--gold);
font-variant-numeric: tabular-nums;
animation: fadeUp 700ms var(--ease-out) 1150ms both;
}
.loader.is-cut .loader__pct { animation: none; opacity: 0; transition: opacity 200ms ease; }
@keyframes fadeUp {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: none; }
}
/* Linija reza (pokreće je JS) — čista, bez odsjaja */
.loader__cut {
position: absolute;
z-index: 3;
left: 0;
right: 0;
top: var(--cut);
height: 1px;
background: var(--gold);
box-shadow: 0 0 10px rgba(226, 176, 74, 0.55);
opacity: 0;
}
.loader.is-cut .loader__cut { opacity: 1; }
.loader.is-open .loader__cut { opacity: 0; transition: opacity 300ms ease; }
/* =========================================================
3D mašinica u loading ekranu
ulazak iz dubine → LED se puni → klik prekidača, zujanje →
legne vodoravno i "obrije" ekran → ekran se raspolovi (opening)
========================================================= */
.clip3d {
--cs: 1;
position: absolute;
z-index: 5;
left: 50%;
top: 50%;
width: 140px;
height: 340px;
margin: -170px 0 0 -70px;
will-change: transform;
animation: clipFade 900ms ease both;
}
@keyframes clipFade { from { opacity: 0; } to { opacity: 1; } }
.clip3d__scale {
position: absolute;
inset: 0;
transform: scale(var(--cs));
perspective: 900px;
}
.clip3d__rig {
position: absolute;
inset: 0;
transform-style: preserve-3d;
animation:
clipEnter 1800ms cubic-bezier(0.16, 1, 0.3, 1) both,
clipIdle 3600ms ease-in-out 1800ms infinite alternate;
}
@keyframes clipEnter {
0% { transform: translate3d(0, 160px, -700px) rotateX(78deg) rotateY(-80deg) rotateZ(-30deg); }
65% { transform: translate3d(0, -6px, 30px) rotateX(-6deg) rotateY(14deg) rotateZ(4deg); }
100% { transform: translate3d(0, 0, 0) rotateX(8deg) rotateY(-26deg) rotateZ(-5deg); }
}
@keyframes clipIdle {
from { transform: translate3d(0, 0, 0) rotateX(8deg) rotateY(-26deg) rotateZ(-5deg); }
to { transform: translate3d(0, -10px, 0) rotateX(2deg) rotateY(30deg) rotateZ(4deg); }
}
.clip3d__buzz { position: absolute; inset: 0; transform-style: preserve-3d; }
/* zapremina: 14 slojeva siluete jedan iza drugog */
.clip3d__sides, .clip3d__back, .clip3d__shine {
position: absolute;
inset: 0;
clip-path: path("M22 52C22 40 30 34 42 34H98C110 34 118 40 118 52L114 214C113 256 110 292 104 314C100 328 88 336 70 336C52 336 40 328 36 314C30 292 27 256 26 214ZM12 4H128V37H12Z");
}
.clip3d__sides { clip-path: none; transform-style: preserve-3d; }
.clip3d__sides i {
position: absolute;
inset: 0;
clip-path: path("M22 52C22 40 30 34 42 34H98C110 34 118 40 118 52L114 214C113 256 110 292 104 314C100 328 88 336 70 336C52 336 40 328 36 314C30 292 27 256 26 214ZM12 4H128V37H12Z");
background: linear-gradient(90deg, #0b0b0a, #2a2824 30%, #1a1917 60%, #0b0b0a);
transform: translateZ(calc(var(--z) * -1.25px - 1px));
}
/* zlatni pojas i kapa se vide i sa strane */
.clip3d__sides i::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, transparent 10%, #8a6224 10%, #c99a3e 13.4%, transparent 13.5%),
linear-gradient(180deg, transparent 91.7%, #8a6224 91.7%, #b98a35 100%);
}
.clip3d__back {
background: linear-gradient(90deg, #050505, #1c1b19 40%, #0a0a09);
transform: translateZ(-19px) rotateY(180deg);
}
.clip3d__face { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: translateZ(0.5px); }
.cb-brand { font: 600 9px/1 "Oswald", sans-serif; letter-spacing: 2.4px; fill: #e2b04a; opacity: 0.9; }
.cb-brand--sm { font-size: 5.5px; letter-spacing: 2px; fill: #a8a296; }
/* odsjaj svjetla klizi preko metala */
.clip3d__shine {
transform: translateZ(1px);
background: linear-gradient(100deg, transparent 38%, rgba(255, 250, 235, 0.32) 48%, rgba(255, 250, 235, 0.06) 54%, transparent 62%);
background-size: 320% 100%;
mix-blend-mode: screen;
animation: clipShine 3200ms cubic-bezier(0.65, 0, 0.35, 1) 900ms infinite;
pointer-events: none;
}
@keyframes clipShine { 0% { background-position: 100% 0; } 55%, 100% { background-position: 0 0; } }
/* topli sjaj iza mašinice */
.clip3d__halo {
position: absolute;
left: -70%;
right: -70%;
top: -20%;
bottom: -20%;
background: radial-gradient(closest-side, rgba(226, 176, 74, 0.22), rgba(226, 176, 74, 0.05) 60%, transparent);
opacity: 0.5;
animation: brandGlow 2.6s ease-in-out infinite alternate;
}
/* sjenka na "podu" */
.clip3d__shadow {
position: absolute;
left: 10%;
right: 10%;
bottom: -46px;
height: 26px;
border-radius: 50%;
background: radial-gradient(closest-side, rgba(0, 0, 0, 0.75), transparent);
filter: blur(4px);
animation: clipFade 1600ms ease 600ms both;
}
/* LED baterija: pali se kako učitavanje napreduje */
.cb-leds .led { fill: #2a2622; transition: fill 250ms ease, filter 250ms ease; }
.cb-leds .led.is-on { fill: #ffcf6a; filter: drop-shadow(0 0 3px #ffb43c); }
/* procenat dolje */
.loader .loader__pct {
position: absolute;
z-index: 6;
left: 0;
right: 0;
bottom: calc(var(--lb) + 6vh);
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
animation: fadeUp 700ms var(--ease-out) 900ms both;
}
.loader__pct small {
font-size: 0.625rem;
letter-spacing: 0.42em;
color: var(--text-muted);
text-transform: uppercase;
}
/* ---------- Paljenje ---------- */
.loader.is-on .cb-leds .led { fill: #fff1c4; filter: drop-shadow(0 0 4px #ffcf6a) drop-shadow(0 0 8px #e2b04a); }
.loader.is-on .clip3d__buzz { animation: buzz 70ms linear 180ms infinite; }
.loader.is-on .clip3d__halo { animation: haloOn 700ms ease 150ms both, brandGlow 900ms ease-in-out 850ms infinite alternate; }
.loader.is-on .clip3d__scale { animation: kick 520ms cubic-bezier(0.34, 1.56, 0.64, 1) 140ms both; }
.loader.is-on .loader__pct { animation: none; opacity: 0; transform: translateY(8px); transition: opacity 400ms ease 300ms, transform 400ms ease 300ms; }
@keyframes buzz {
0% { transform: translate3d(0.7px, 0, 0) rotateZ(0.3deg); }
25% { transform: translate3d(-0.6px, 0.5px, 0) rotateZ(-0.35deg); }
50% { transform: translate3d(0.5px, -0.6px, 0) rotateZ(0.25deg); }
75% { transform: translate3d(-0.7px, 0.3px, 0) rotateZ(-0.2deg); }
100% { transform: translate3d(0.7px, 0, 0) rotateZ(0.3deg); }
}
@keyframes mover { from { transform: translateX(-2.2px); } to { transform: translateX(2.2px); } }
@keyframes haloOn { 0% { opacity: 0.5; transform: scale(1); } 30% { opacity: 1; transform: scale(1.35); } 100% { opacity: 0.85; transform: scale(1.1); } }
@keyframes kick { 0% { transform: scale(var(--cs)); } 35% { transform: scale(calc(var(--cs) * 1.06)); } 100% { transform: scale(var(--cs)); } }
/* zvučni talasi oko sječiva */
.clip3d__waves { position: absolute; left: 50%; top: 18px; transform: translateZ(2px); }
.clip3d__waves span {
position: absolute;
left: -80px;
top: -40px;
width: 160px;
height: 80px;
border: 1px solid rgba(255, 214, 140, 0.7);
border-radius: 50%;
opacity: 0;
}
.loader.is-on .clip3d__waves span { animation: wave 900ms cubic-bezier(0.16, 1, 0.3, 1) infinite; }
.loader.is-on .clip3d__waves span:nth-child(2) { animation-delay: 300ms; }
.loader.is-on .clip3d__waves span:nth-child(3) { animation-delay: 600ms; }
@keyframes wave { from { opacity: 0.9; transform: scale(0.4); } to { opacity: 0; transform: scale(1.6); } }
/* dlačice odlijeću sa sječiva */
.clip3d__hair { position: absolute; left: 0; top: 4px; transform: translateZ(3px); }
.clip3d__hair span {
position: absolute;
left: var(--x);
top: 0;
width: 1.4px;
height: var(--l);
border-radius: 1px;
background: linear-gradient(#e9d6a8, #6b5a3e);
opacity: 0;
}
.loader.is-on .clip3d__hair span { animation: hair 700ms cubic-bezier(0.2, 0.7, 0.4, 1) calc(var(--w) + 250ms) infinite; }
@keyframes hair {
0% { opacity: 0; transform: rotate(var(--a)) translateY(0); }
15% { opacity: 1; }
100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--d) * -1)) rotate(140deg); }
}
/* bljesak kad se upali */
.loader__flash {
position: absolute;
z-index: 4;
inset: 0;
background: radial-gradient(circle at 50% 45%, rgba(255, 232, 180, 0.35), rgba(226, 176, 74, 0.08) 35%, transparent 65%);
opacity: 0;
pointer-events: none;
}
.loader.is-on .loader__flash { animation: xFlash 900ms ease 160ms both; }
.loader.is-on .loader__beam { animation: beamFlicker 260ms steps(2) 160ms 3; }
/* ---------- Brijanje ekrana ---------- */
/* zlatni trag iza mašinice dok juri preko ekrana */
.clip3d__trail {
position: absolute;
left: 50%;
top: 100%;
width: 92px;
height: 120vw;
margin-left: -46px;
background: linear-gradient(180deg, rgba(255, 228, 160, 0.55), rgba(226, 176, 74, 0.18) 25%, transparent 70%);
clip-path: polygon(8% 0, 92% 0, 50% 100%);
filter: blur(5px);
transform-origin: top;
transform: scaleY(0);
opacity: 0;
pointer-events: none;
}
.loader.is-dash .clip3d__trail { opacity: 1; transform: scaleY(1); transition: transform 300ms ease, opacity 200ms ease; }
.loader.is-dash .clip3d__waves, .loader.is-dash .clip3d__shadow { opacity: 0; transition: opacity 200ms ease; }
.loader.is-aim .clip3d__shadow { opacity: 0; transition: opacity 300ms ease; }
/* logo čeka mašinicu (otkriva ga js/main.js tačno iza sječiva) */
.loader .loader__logo { clip-path: inset(-30% 100% -30% 0); animation: none; }
.loader .loader__logo.is-flying { clip-path: none; }
.loader__logo .logo__word { animation: none; }
.loader.is-dash .loader__logo .logo__word { animation: wordGlow 1400ms ease-out 200ms both, wordSheen 1000ms cubic-bezier(0.65, 0, 0.35, 1) 450ms forwards; }
.loader .blade--a, .loader .blade--b { animation: none; }
.loader.is-dash .blade--a { animation: snipA 420ms ease-in-out 380ms 1 both; }
.loader.is-dash .blade--b { animation: snipB 420ms ease-in-out 380ms 1 both; }
.loader .loader__flare { animation: none; }
.loader.is-open.is-cut .loader__flare { display: block; animation: flare 1100ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.loader.is-open .clip3d { opacity: 0; transition: opacity 200ms ease; }
.loader .loader__stage { animation: none; }
@media (prefers-reduced-motion: reduce) {
.clip3d__rig, .clip3d__buzz, .clip3d__shine { animation: none !important; }
}
/* ---------- Filmske trake: iste visine kao meni ---------- */
.letterbox {
position: fixed;
left: 0;
right: 0;
z-index: 2100;
height: var(--header-h);
display: flex;
align-items: center;
background: #000;
pointer-events: none;
transition: background-color 1000ms ease;
}
.letterbox--top { top: 0; }
.letterbox--bottom { bottom: 0; }
/* Zlatna ivica — preuzme sjaj ivica reza kad polovine uklize pod trake */
.letterbox::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold) 20%, #fff1cc 50%, var(--gold) 80%, transparent);
box-shadow: 0 0 12px rgba(226, 176, 74, 0.9), 0 0 32px rgba(226, 176, 74, 0.45);
opacity: 0;
}
.letterbox--top::after { bottom: 0; }
.letterbox--bottom::after { top: 0; }
html.is-loading .letterbox::after { opacity: 0.22; transition: opacity 800ms ease 600ms; }
html.is-docked .letterbox::after { animation: edgeFade 1400ms ease forwards; }
@keyframes edgeFade {
0% { opacity: 1; }
100% { opacity: 0; }
}
.letterbox__inner {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
font-family: var(--font-display);
font-size: 0.6875rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: rgba(243, 239, 230, 0.45);
animation: fadeUp 800ms var(--ease-out) 600ms both;
}
/* Pretapanje: trake nestanu, a na istom mjestu se pojave meni i info traka */
html.bars-out .letterbox { background-color: transparent; }
html.bars-out .letterbox__inner {
animation: none;
opacity: 0;
transform: translateY(-6px);
transition: opacity 500ms ease, transform 700ms var(--ease-out);
}
html.bars-out .letterbox--bottom .letterbox__inner { transform: translateY(6px); }
/* ==========================================================
Otvaranje hero sekcije
========================================================== */
/* Redovi naslova izranjaju odozdo; maska ne siječe kvačicu na "Ć" */
.hero__title .line {
display: block;
white-space: nowrap;
padding-bottom: 0.04em;
clip-path: inset(-0.6em -0.1em 0 -0.1em);
}
.hero__title .line > span { display: block; }
html.js .hero-in { opacity: 0; transform: translateY(28px); }
/* 140% — dovoljno duboko da ni kvačica sa "Ć" ne viri prije ulaska */
html.js .hero__title .hero-in { opacity: 1; transform: translateY(140%); }
html.js .hero__rule { transform: scaleX(0); }
html.js .hero__img { transform: scale(1.22); filter: blur(16px) brightness(0.3) saturate(0.5); }
html.js .neon { opacity: 0; animation: none; }
html.js .header,
html.js .hero__bottom { opacity: 0; }
/* Kroz rascjep se vidi kadar koji se izoštrava i smiruje */
html.is-loaded .hero__img {
transform: none;
filter: saturate(0.85) brightness(0.8) blur(0);
transition: transform 3200ms cubic-bezier(0.16, 1, 0.3, 1), filter 1800ms ease 150ms;
}
html.is-loaded .hero__glare { animation: glare 1900ms cubic-bezier(0.65, 0, 0.35, 1) 700ms forwards; }
@keyframes glare {
from { transform: translateX(-100%); }
to { transform: translateX(100%); }
}
/* Sadržaj hero sekcije izranja dok se rascjep otvara */
html.is-loaded .hero-in,
html.is-loaded .hero__title .hero-in {
opacity: 1;
transform: none;
transition:
transform 1100ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--d) * 110ms + 550ms),
opacity 900ms ease calc(var(--d) * 110ms + 550ms);
}
html.is-loaded .hero__rule {
transform: none;
transition: transform 1100ms cubic-bezier(0.65, 0, 0.35, 1) 1000ms;
}
/* Meni i info traka preuzmu mjesto filmskih traka */
html.bars-out .header,
html.bars-out .hero__bottom {
opacity: 1;
transition: opacity 900ms ease 100ms, transform 450ms var(--ease-out), background-color var(--dur) ease, border-color var(--dur) ease;
}
/* Neon se upali kad se kadar smiri */
.neon.is-lit { animation: neonIgnite 700ms linear forwards, flicker 6s 2500ms infinite; }
html.loader-failed .neon { opacity: 0.92; animation: flicker 6s infinite; }
@keyframes neonIgnite {
0% { opacity: 0.5; }
10% { opacity: 1; }
18% { opacity: 0.3; }
30% { opacity: 0.95; }
38% { opacity: 0.55; }
55%, 100% { opacity: 0.92; }
}
@media (prefers-reduced-motion: reduce) {
.letterbox, .loader__grain, .loader__flare { display: none; }
html.js .hero__img { transform: none; filter: saturate(0.85) brightness(0.8); }
.hero__media, .neon { transform: none !important; }
}
/* ---------- Berberi (samo ime + zakazivanje) ---------- */
/* ---------- Sertifikat (diploma) ---------- */
.view--cert .view__body { display: flex; align-items: center; }
.diploma { max-width: 860px; margin: 0 auto; perspective: 1200px; }
.diploma__paper {
position: relative;
padding: clamp(36px, 6vw, 72px) clamp(24px, 6vw, 80px) clamp(32px, 5vw, 56px);
text-align: center;
color: #2b2214;
font-family: "Cormorant Garamond", Georgia, serif;
background:
radial-gradient(ellipse at 20% 0%, rgba(255, 255, 255, 0.55), transparent 55%),
radial-gradient(ellipse at 100% 100%, rgba(166, 128, 60, 0.18), transparent 60%),
linear-gradient(135deg, #f7f0dd, #efe3c4 55%, #f4ead2);
border-radius: 6px;
box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.2);
}
/* dvostruki zlatni okvir */
.diploma__paper::before,
.diploma__paper::after {
content: "";
position: absolute;
pointer-events: none;
}
.diploma__paper::before { inset: 14px; border: 2px solid #b8913f; }
.diploma__paper::after { inset: 22px; border: 1px solid rgba(184, 145, 63, 0.6); }
.diploma__corner {
position: absolute;
width: 46px;
height: 46px;
border: 2px solid #b8913f;
border-radius: 50%;
background: radial-gradient(circle, transparent 52%, rgba(184, 145, 63, 0.18) 54%, transparent 70%);
}
.diploma__corner::after { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: #b8913f; }
.diploma__corner--tl { top: 2px; left: 2px; }
.diploma__corner--tr { top: 2px; right: 2px; }
.diploma__corner--bl { bottom: 2px; left: 2px; }
.diploma__corner--br { bottom: 2px; right: 2px; }
.diploma__top { font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.4em; text-transform: uppercase; color: #8a6a2c; }
.diploma__title {
margin-top: 12px;
font-size: clamp(3rem, 8vw, 5.25rem);
font-weight: 700;
line-height: 1;
letter-spacing: 0.08em;
text-transform: uppercase;
background: linear-gradient(180deg, #c99a3e, #8a6224);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.diploma__kind { margin-top: 8px; font-size: clamp(1.125rem, 2.4vw, 1.5rem); font-style: italic; color: #5a4520; }
.diploma__rule { display: block; width: 140px; height: 1px; margin: 20px auto; background: linear-gradient(90deg, transparent, #b8913f, transparent); }
.diploma__lead { font-size: 1.125rem; color: #5a4a33; }
.diploma__names {
margin: 6px 0 10px;
font-family: "Great Vibes", cursive;
font-size: clamp(2.75rem, 7vw, 4.5rem);
line-height: 1.15;
color: #2b2214;
}
.diploma__text { max-width: 56ch; margin: 0 auto; font-size: clamp(1rem, 1.8vw, 1.1875rem); line-height: 1.6; color: #4a3c28; }
.diploma__foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 16px; margin-top: clamp(28px, 4vw, 44px); }
.diploma__sign { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.diploma__script { font-family: "Great Vibes", cursive; font-size: clamp(1.75rem, 3.5vw, 2.25rem); line-height: 1; color: #2b2214; }
.diploma__sign i { width: 80%; max-width: 180px; height: 1px; background: #8a6a2c; }
.diploma__sign small { font-family: var(--font-display); font-size: 0.6875rem; letter-spacing: 0.24em; text-transform: uppercase; color: #8a6a2c; }
.diploma__seal { width: clamp(92px, 14vw, 120px); animation: sealIn 900ms cubic-bezier(0.34, 1.56, 0.64, 1) 1100ms both; }
@keyframes sealIn {
from { transform: scale(0.4) rotate(-60deg); opacity: 0; }
to { transform: none; opacity: 1; }
}
.diploma__seal svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 6px 10px rgba(90, 60, 10, 0.35)); }
.seal__rim { fill: #c99a3e; stroke: #8a6224; stroke-width: 2; }
.seal__inner { fill: #b58630; stroke: #f3e2b5; stroke-width: 1.5; stroke-dasharray: 3 3; }
.seal__text { font-family: var(--font-display); font-size: 9.5px; letter-spacing: 2.2px; fill: #3a2a0c; }
.seal__mark { fill: none; stroke: #f7ecd0; stroke-width: 5; stroke-linecap: round; }
.diploma__date { margin-top: 18px; font-size: 1rem; font-style: italic; color: #6a5530; }
/* ---------- Animacija sertifikata: brza, u 3D (pokreće se svaki put kad se ekran otvori) ---------- */
.diploma { perspective: 1400px; }
/* lagano lebdenje u prostoru dok se ne dira */
.view--cert.is-open .diploma__tilt { animation: certFloat 7s ease-in-out 2.6s infinite; }
@keyframes certFloat {
0%, 100% { transform: rotateX(2deg) rotateY(-3deg); }
50% { transform: rotateX(-2deg) rotateY(3deg); }
}
.diploma__tilt { transform-style: preserve-3d; }
.diploma__tilt.is-tilting { animation: none !important; }
/* nagib za mišem / prstom (vrijednosti postavlja js/main.js) */
.diploma__paper {
transform-style: preserve-3d;
transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.diploma__tilt.is-tilting .diploma__paper { transition-duration: 120ms; }
/* ulazak: diploma se okrene u prostoru i doleti */
.view--cert .diploma__paper { transform-origin: 50% 60%; opacity: 0; }
/* "backwards": poslije ulaska transform se vraća na nagib (--rx/--ry) */
.view--cert.is-open .diploma__paper { opacity: 1; animation: certFlip 850ms cubic-bezier(0.16, 1, 0.3, 1) 150ms backwards, paperThud 320ms ease-out 2200ms; }
@keyframes certFlip {
from { transform: perspective(1200px) rotateY(-80deg) rotateX(20deg) translateZ(-320px) scale(0.8); opacity: 0; }
60% { opacity: 1; }
to { transform: none; opacity: 1; }
}
@keyframes paperThud {
0%, 100% { transform: none; }
35% { transform: translateY(3px) scale(0.993); }
70% { transform: translateY(-1px); }
}
/* odsjaj svjetla prati nagib */
.diploma__glare {
position: absolute;
inset: 0;
z-index: 3;
border-radius: inherit;
background: radial-gradient(circle at var(--gx, 30%) var(--gy, 20%), rgba(255, 255, 255, 0.55), transparent 45%);
mix-blend-mode: soft-light;
opacity: 0.7;
pointer-events: none;
transition: opacity 300ms ease;
}
/* dubina: pečat i imena "iskaču" iznad papira */
.diploma__seal { transform: translateZ(60px); }
.diploma__names { transform: translateZ(30px); }
.diploma__title { transform: translateZ(20px); }
.diploma__corner { transform: translateZ(12px); }
/* okviri se iscrtaju od sredine ka ivicama */
.view--cert .diploma__paper::before,
.view--cert .diploma__paper::after { clip-path: inset(50% 50% 50% 50%); }
.view--cert.is-open .diploma__paper::before { animation: frameDraw 600ms cubic-bezier(0.65, 0, 0.35, 1) 450ms forwards; }
.view--cert.is-open .diploma__paper::after { animation: frameDraw 600ms cubic-bezier(0.65, 0, 0.35, 1) 540ms forwards; }
@keyframes frameDraw { to { clip-path: inset(0 0 0 0); } }
/* uglovi iskoče */
.view--cert .diploma__corner { scale: 0; }
.view--cert.is-open .diploma__corner { animation: cornerPop 420ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.view--cert.is-open .diploma__corner--tl { animation-delay: 700ms; }
.view--cert.is-open .diploma__corner--tr { animation-delay: 760ms; }
.view--cert.is-open .diploma__corner--br { animation-delay: 820ms; }
.view--cert.is-open .diploma__corner--bl { animation-delay: 880ms; }
@keyframes cornerPop { from { scale: 0; rotate: -90deg; } to { scale: 1; rotate: 0deg; } }
/* tekst izranja brzo, red po red */
.view--cert :is(.diploma__top, .diploma__kind, .diploma__rule, .diploma__lead, .diploma__text, .diploma__sign small, .diploma__sign i, .diploma__date) { opacity: 0; }
.view--cert .diploma__title { opacity: 0; }
.view--cert.is-open :is(.diploma__top, .diploma__kind, .diploma__rule, .diploma__lead, .diploma__text, .diploma__sign small, .diploma__sign i, .diploma__date) { animation: certUp 600ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.view--cert.is-open .diploma__top { animation-delay: 500ms; }
.view--cert.is-open .diploma__title { animation: titleIn 700ms cubic-bezier(0.16, 1, 0.3, 1) 600ms both, titleShine 1400ms ease 900ms both; background-size: 250% 100%; }
.view--cert.is-open .diploma__kind { animation-delay: 700ms; }
.view--cert.is-open .diploma__rule { animation-delay: 780ms; }
.view--cert.is-open .diploma__lead { animation-delay: 850ms; }
.view--cert.is-open .diploma__text { animation-delay: 1300ms; }
.view--cert.is-open .diploma__sign i { animation-delay: 1420ms; }
.view--cert.is-open .diploma__sign small { animation-delay: 1480ms; }
.view--cert.is-open .diploma__date { animation-delay: 2050ms; }
@keyframes certUp { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@keyframes titleIn { from { opacity: 0; letter-spacing: 0.3em; } to { opacity: 1; letter-spacing: 0.08em; } }
.diploma__title { background-image: linear-gradient(100deg, #8a6224 0%, #c99a3e 35%, #fff1c9 50%, #c99a3e 65%, #8a6224 100%); }
@keyframes titleShine { from { background-position: 100% 0; } to { background-position: 0 0; } }
/* imena i potpisi se "ispišu" rukom */
.view--cert :is(.diploma__names, .diploma__script) { clip-path: inset(-20% 100% -20% 0); }
.view--cert.is-open .diploma__names { animation: handwrite 900ms cubic-bezier(0.45, 0, 0.3, 1) 950ms forwards; }
.view--cert.is-open .diploma__sign:first-child .diploma__script { animation: handwrite 600ms cubic-bezier(0.45, 0, 0.3, 1) 1550ms forwards; }
.view--cert.is-open .diploma__sign:last-child .diploma__script { animation: handwrite 600ms cubic-bezier(0.45, 0, 0.3, 1) 1700ms forwards; }
@keyframes handwrite { to { clip-path: inset(-20% -5% -20% 0); } }
/* pečat "lupi" o papir */
.view--cert .diploma__seal { opacity: 0; animation: none; }
.view--cert.is-open .diploma__seal { animation: sealStamp 450ms cubic-bezier(0.5, 0, 0.75, 0) 1850ms forwards; }
@keyframes sealStamp {
0% { opacity: 0; scale: 2.6; rotate: -35deg; filter: blur(4px); }
70% { opacity: 1; scale: 0.9; rotate: 4deg; filter: blur(0); }
85% { scale: 1.05; rotate: -1deg; }
100% { opacity: 1; scale: 1; rotate: 0deg; }
}
@media (max-width: 640px) {
.diploma__corner { width: 30px; height: 30px; }
.diploma__corner::after { inset: 9px; }
.diploma__foot { grid-template-columns: 1fr 1fr; }
.diploma__seal { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
}
/* ---------- Veći prikaz na računaru (sve je u rem, pa se lijepo skalira) ---------- */
@media (min-width: 1200px) {
html { font-size: 106.25%; }
:root { --container: 1280px; --header-h: 80px; }
}
@media (min-width: 1500px) {
html { font-size: 112.5%; }
:root { --container: 1400px; }
}
::selection { background: rgba(226, 176, 74, 0.85); color: #14110a; }
/* ---------- Još animacija po sajtu ---------- */
/* galerija: slika se otkrije kao zavjesa odozdo, uz blag zum */
.gallery__item.reveal { opacity: 1; transform: none; clip-path: inset(100% 0 0 0); transition: clip-path 650ms cubic-bezier(0.65, 0, 0.35, 1); }
.gallery__item.reveal.is-visible { clip-path: inset(0 0 0 0); }
.gallery__item.reveal img { transform: scale(1.18); transition: transform 900ms var(--ease-out); }
.gallery__item.reveal.is-visible img { transform: none; }
/* kontakt: redovi uklize, okrugla dugmad iskoče jedno za drugim */
.person.reveal { transform: translateX(-34px); }
.person.reveal.is-visible .ico-btn { animation: icoPop 520ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.person.reveal.is-visible .ico-btn:nth-child(1) { animation-delay: 250ms; }
.person.reveal.is-visible .ico-btn:nth-child(2) { animation-delay: 320ms; }
.person.reveal.is-visible .ico-btn:nth-child(3) { animation-delay: 390ms; }
.person.reveal.is-visible .ico-btn:nth-child(4) { animation-delay: 460ms; }
@keyframes icoPop { from { opacity: 0; scale: 0.4; } to { opacity: 1; scale: 1; } }
/* cijene "iskoče" kad se red pojavi */
.mn__item.reveal.is-visible .mn__price { animation: pricePop 650ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both; }
@keyframes pricePop { from { opacity: 0; scale: 0.5; translate: 0 10px; } to { opacity: 1; scale: 1; translate: 0 0; } }
/* magnetna dugmad */
.is-magnetic { transition: translate 280ms var(--ease-out), background-color var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease, transform var(--dur-fast) ease !important; }
/* ==========================================================
Sitnice: traka napretka, "nazad na vrh", meni koji se skloni,
naslovi koji izranjaju, galerija na klik
========================================================== */
.header.is-hidden { transform: translateY(-100%); }
.scroll-progress {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 120;
height: 2px;
background: linear-gradient(90deg, #a87d2a, var(--gold), #ffe3a3);
transform: scaleX(0);
transform-origin: left;
pointer-events: none;
}
.to-top {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 95;
display: grid;
place-items: center;
width: 50px;
height: 50px;
border: 1px solid rgba(226, 176, 74, 0.5);
border-radius: 50%;
background: rgba(11, 11, 10, 0.85);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: var(--gold);
cursor: pointer;
opacity: 0;
transform: translateY(16px) scale(0.9);
pointer-events: none;
transition: opacity var(--dur) ease, transform var(--dur) var(--ease-out), background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.to-top svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur) var(--ease-out); }
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--gold); color: var(--on-gold); }
.to-top:hover svg { transform: translateY(-3px); }
html.view-open .to-top { opacity: 0; pointer-events: none; }
/* Naslovi sekcija izranjaju iz maske */
.section__head.reveal { opacity: 1; transform: none; }
.section__head.reveal .section__title {
clip-path: inset(-10% 0 100% 0);
transform: translateY(32px);
transition: clip-path 1000ms var(--ease-out), transform 1000ms var(--ease-out);
}
.section__head.reveal .eyebrow { opacity: 0; letter-spacing: 0.5em; transition: opacity 800ms ease 200ms, letter-spacing 1000ms var(--ease-out) 200ms; }
.section__head.reveal.is-visible .section__title { clip-path: inset(-10% 0 -10% 0); transform: none; }
.section__head.reveal.is-visible .eyebrow { opacity: 1; letter-spacing: 0.22em; }
/* Galerija: uvećanje na klik */
.gallery__item { cursor: zoom-in; }
.gallery__item::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, transparent 55%, rgba(11, 11, 10, 0.6));
opacity: 0;
transition: opacity var(--dur) ease;
}
.gallery__item:hover::before { opacity: 1; }
.lightbox {
position: fixed;
inset: 0;
z-index: 1700;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
padding: 64px 16px 56px;
background: rgba(8, 8, 7, 0.94);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
opacity: 0;
transition: opacity 300ms ease;
}
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }
.lightbox__fig { display: flex; flex-direction: column; align-items: center; gap: 14px; max-height: 100%; }
.lightbox__fig img {
max-width: 100%;
max-height: calc(100dvh - 170px);
border-radius: 12px;
object-fit: contain;
opacity: 0;
transform: scale(0.96);
transition: opacity 400ms ease, transform 500ms var(--ease-out);
}
.lightbox__fig img.is-in { opacity: 1; transform: none; }
.lightbox__fig figcaption { color: var(--text-muted); font-size: 0.875rem; text-align: center; }
.lightbox__close, .lightbox__nav {
display: grid;
place-items: center;
width: 48px;
height: 48px;
border: 1px solid var(--border);
border-radius: 50%;
background: rgba(11, 11, 10, 0.8);
color: var(--text);
cursor: pointer;
transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.lightbox__close svg, .lightbox__nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lightbox__close:hover, .lightbox__nav:hover { border-color: var(--gold); color: var(--gold); }
.lightbox__close { position: absolute; top: 14px; right: 14px; }
.lightbox__count { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; font-family: var(--font-display); letter-spacing: 0.2em; color: var(--gold); font-size: 0.8125rem; }
@media (max-width: 960px) {
.to-top { display: none; } /* na telefonu je dolje dugme "Zakaži termin" */
}
@media (max-width: 640px) {
.lightbox { grid-template-columns: 1fr; padding: 64px 12px 72px; }
.lightbox__nav { position: absolute; bottom: 12px; }
.lightbox__nav--prev { left: 16px; }
.lightbox__nav--next { right: 16px; }
}
/* ==========================================================
Responsive
========================================================== */
@media (max-width: 1180px) {
.nav__list { gap: 18px; }
.nav__list a { font-size: 0.8125rem; letter-spacing: 0.1em; }
}
@media (max-width: 1080px) {
.nav__list { gap: 14px; }
.neon { display: none; }
}
@media (max-width: 960px) {
.menu-toggle { display: inline-flex; }
.header__cta { display: none; }
.nav {
position: fixed;
top: var(--header-h);
left: 0;
right: 0;
height: calc(100dvh - var(--header-h));
flex-direction: column;
align-items: stretch;
gap: 24px;
padding: 24px var(--gutter) 40px;
background: var(--bg);
overflow-y: auto;
visibility: hidden;
opacity: 0;
transform: translateY(-8px);
transition: opacity var(--dur) ease, transform var(--dur) var(--ease-out), visibility 0s linear var(--dur);
}
.nav.is-open {
visibility: visible;
opacity: 1;
transform: none;
transition: opacity var(--dur) ease, transform var(--dur) var(--ease-out);
}
.nav__list { flex-direction: column; gap: 0; }
.nav__list a {
display: block;
padding: 16px 0;
font-size: 1.375rem;
color: var(--text);
border-bottom: 1px solid var(--border);
}
.nav__list a::after { display: none; }
.nav__cta { display: inline-flex; }
.services, .reviews { grid-template-columns: 1fr 1fr; }
/* Zakazivanje na telefonu/tabletu: bez bočne liste, kratak red sa izborom + ljepljiva donja traka */
.bk { grid-template-columns: 1fr; gap: 0; }
.bk__side { display: none; }
.bk__main { overflow: visible; }
.bk__mini { display: block; margin: -2px 0 16px; font-size: 0.875rem; color: #cfc9bc; min-height: 1.3em; }
.bk__when { grid-template-columns: 1fr; gap: 18px; }
.bk__nav {
position: sticky;
bottom: 0;
z-index: 3;
margin: 28px calc(-1 * clamp(24px, 3.6vw, 44px)) calc(-1 * clamp(24px, 3.6vw, 44px));
padding: 12px clamp(24px, 3.6vw, 44px) calc(12px + env(safe-area-inset-bottom));
background: rgba(17, 17, 16, 0.96);
border-top: 1px solid var(--border);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.bk__nav.is-empty { display: flex; }
.bk__navtotal { display: block; margin-right: auto; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); line-height: 1.2; }
.bk__navtotal strong { display: block; font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 0; color: var(--gold); }
.bk__nav #bk-next, .bk__nav #bk-submit { margin-left: 0; }
.ct3 { grid-template-columns: 1fr; }
.nav__sep { height: 1px; margin: 10px 0; background: var(--border); }
.mobile-cta { display: inline-flex; }
.footer { padding-bottom: 104px; }
.footer__grid { grid-template-columns: 1fr 1fr; }
.footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
.services, .reviews { grid-template-columns: 1fr; }
.bk-body { padding-top: 14px; }
.bk__main { display: flex; flex-direction: column; min-height: calc(100dvh - var(--header-h) - 14px); padding: 4px 0 0; background: none; border: 0; border-radius: 0; }
.bk__form { flex: 1; display: flex; flex-direction: column; }
.bk__nav { margin-top: auto !important; } /* traka uvijek na dnu ekrana, i na kratkim koracima */
.bk__progress { position: relative; margin-bottom: 14px; border-radius: 2px; }
.bk__title { font-size: 1.625rem; }
.bk__hint { margin-bottom: 16px; font-size: 0.875rem; }
.bk__nav { margin: 24px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
.bk__nav .btn { flex: 0 0 auto; min-height: 48px; padding: 0 18px; }
.barber-pick__card { aspect-ratio: 3 / 4; border-radius: 14px; }
.cal { padding: 12px; }
.cal__day { min-height: 0; font-size: 0.875rem; border-radius: 8px; }
.slots__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.slots__head { min-height: 0; }
.slots__date { font-size: 1rem; }
.bk__barbers { gap: 10px; }
.barber-pick__info { left: 14px; right: 14px; bottom: 14px; }
.barber-pick__name { font-size: 1.5rem; }
.fields { grid-template-columns: 1fr; }
.svc-pick__row { gap: 14px; padding: 18px 2px; }
.svc-pick__name { font-size: 1.0625rem; }
.svc-pick__price { font-size: 1.5rem; }
#bk-submit { min-width: 0; }
/* telefon: kartica sa adresom ide ispod mape, da ne prekriva kružni tok i ulice */
.loc__map { height: auto; }
.loc .loc__canvas { position: relative; height: 440px; }
.loc__map::after { bottom: auto; height: 440px; }
.loc__card {
position: static;
width: auto;
padding: 18px 16px;
border: 0;
border-top: 1px solid var(--border);
border-radius: 0;
background: var(--surface);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.loc__map.is-expanded { height: auto; }
.loc__map.is-expanded .loc__canvas { position: absolute; inset: 0; height: 100%; }
.loc__map.is-expanded::after { height: auto; bottom: 0; }
.loc__map.is-expanded .loc__card { position: absolute; left: 12px; right: 12px; bottom: 12px; border: 1px solid var(--border); border-radius: 14px; background: rgba(11, 11, 10, 0.88); }
.loc__btns .btn { flex: 1 1 auto; }
.mn__row { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; padding: 20px 4px 18px 0; }
.mn__idx { font-size: 1.375rem; }
.board__foot { justify-content: center; text-align: center; }
.board__foot .btn { width: 100%; }
.board__corner { width: 20px; height: 20px; }
.mn__lead, .mn__cta { display: none; }
.person { grid-template-columns: 60px minmax(0, 1fr); gap: 14px 16px; }
.person__photo { width: 60px; height: 60px; }
.person__acts { grid-column: 1 / -1; }
.ico-btn { width: 48px; height: 48px; }
.facts { grid-template-columns: 1fr 1fr; }
.view__crumb { display: none; }
.proof { gap: 16px 24px; }
.proof__num { font-size: 2.25rem; }
.gallery { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.barber { grid-template-columns: 1fr; }
.hero__buttons .btn { flex: 1 1 100%; }
.hero__bottom { gap: 8px; padding-bottom: 22px; }
.hero__link { font-size: 0.75rem; letter-spacing: 0.14em; gap: 7px; }
.proof__sep { display: none; } /* na telefonu su ocjena i klijenti u dva reda */
.footer__grid { grid-template-columns: 1fr 1fr; }
.footer__brand { grid-column: 1 / -1; }
}
/* ---------- Loader: filmski kadar ---------- */
/* kamera se polako primiče sceni (završi prije reza, pa let loga ostaje tačan) */
.loader__stage { animation: stageDolly 2100ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes stageDolly { from { transform: scale(0.9); } to { transform: none; } }
.loader.is-cut .loader__stage { animation: none; }
/* snop svjetla odozgo, kao reflektor na sceni */
.loader__beam {
position: absolute;
z-index: 1;
left: 50%;
top: -10%;
width: min(900px, 160vw);
height: 90%;
transform: translateX(-50%);
background: conic-gradient(from 180deg at 50% 0%, transparent 160deg, rgba(255, 226, 160, 0.11) 175deg, rgba(255, 236, 190, 0.16) 180deg, rgba(255, 226, 160, 0.11) 185deg, transparent 200deg);
filter: blur(12px);
opacity: 0;
animation: beamOn 1600ms ease 250ms both, beamFlicker 5s ease-in-out 1900ms infinite;
pointer-events: none;
}
@keyframes beamOn { 0% { opacity: 0; } 30% { opacity: 0.6; } 38% { opacity: 0.2; } 55%, 100% { opacity: 1; } }
@keyframes beamFlicker { 0%, 100% { opacity: 1; } 47% { opacity: 0.85; } 50% { opacity: 1; } 52% { opacity: 0.9; } }
/* topli "light leak" koji klizi preko kadra */
.loader__leak {
position: absolute;
z-index: 1;
inset: -20%;
background:
radial-gradient(40% 30% at 15% 70%, rgba(226, 140, 50, 0.13), transparent 70%),
radial-gradient(30% 25% at 85% 25%, rgba(255, 200, 120, 0.09), transparent 70%);
animation: leakDrift 6s ease-in-out infinite alternate;
pointer-events: none;
}
@keyframes leakDrift { from { transform: translate(-4%, 2%) rotate(-2deg); } to { transform: translate(4%, -2%) rotate(2deg); } }
/* zrno filma */
.loader__grain {
position: absolute;
z-index: 5;
inset: -50%;
opacity: 0.09;
background-image: url("data:image/svg+xml;utf8,");
animation: grain 600ms steps(6) infinite;
pointer-events: none;
}
@keyframes grain {
0% { transform: translate(0, 0); }
20% { transform: translate(-6%, 4%); }
40% { transform: translate(5%, -7%); }
60% { transform: translate(-3%, 8%); }
80% { transform: translate(7%, 3%); }
100% { transform: translate(-5%, -4%); }
}
.loader.is-open :is(.loader__beam, .loader__leak, .loader__grain) { opacity: 0; transition: opacity 500ms ease; animation-play-state: paused; }
/* anamorfni odsjaj: tanka vodoravna zraka kroz logo kad se otkrije */
.loader__flare {
position: absolute;
z-index: 2;
left: -60%;
right: -60%;
top: 50%;
height: 2px;
margin-top: -1px;
background: linear-gradient(90deg, transparent, rgba(255, 214, 140, 0.15) 20%, rgba(255, 246, 220, 0.95) 50%, rgba(255, 214, 140, 0.15) 80%, transparent);
box-shadow: 0 0 18px 2px rgba(255, 210, 130, 0.45);
transform: scaleX(0);
opacity: 0;
animation: flare 1300ms cubic-bezier(0.16, 1, 0.3, 1) 1800ms both;
pointer-events: none;
}
.loader__flare::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 90px;
height: 90px;
margin: -45px 0 0 -45px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 244, 214, 0.55), rgba(226, 176, 74, 0.15) 40%, transparent 70%);
}
@keyframes flare {
0% { transform: scaleX(0); opacity: 0; }
25% { transform: scaleX(1); opacity: 1; }
100% { transform: scaleX(1.15); opacity: 0; }
}
.loader.is-cut .loader__flare { display: none; }
/* natpis kao špica filma: slova se "zbiju" na mjesto */
/* ---------- Radovi: izbor berbera ---------- */
.work-tabs {
position: relative;
display: flex;
width: fit-content;
gap: 4px;
margin: -16px auto 28px;
padding: 5px;
border: 1px solid rgba(226, 176, 74, 0.28);
border-radius: 999px;
background: rgba(20, 19, 17, 0.7);
backdrop-filter: blur(6px);
}
.work-tabs__glider {
position: absolute;
top: 5px;
bottom: 5px;
left: 0;
border-radius: 999px;
background: linear-gradient(135deg, #f0c76a, var(--gold) 55%, #b9862f);
box-shadow: 0 6px 22px rgba(226, 176, 74, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
transition: transform 560ms cubic-bezier(0.65, 0, 0.2, 1), width 560ms cubic-bezier(0.65, 0, 0.2, 1);
}
.work-tab {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 48px;
padding: 5px 22px 5px 5px;
border: 0;
border-radius: 999px;
background: none;
color: var(--text-muted, #b8b2a5);
font: 600 0.9375rem/1 "Oswald", sans-serif;
letter-spacing: 0.12em;
text-transform: uppercase;
cursor: pointer;
transition: color 400ms ease;
}
.work-tab img {
width: 38px;
height: 38px;
border-radius: 50%;
object-fit: cover;
border: 1px solid rgba(226, 176, 74, 0.5);
filter: grayscale(1) brightness(0.8);
transition: filter 400ms ease, transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1), border-color 400ms ease;
}
.work-tab:hover { color: var(--text, #f3efe6); }
.work-tab.is-active { color: #14110b; }
.work-tab.is-active img { filter: none; transform: scale(1.06) rotate(-4deg); border-color: #14110b; }
.work-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.work-panels { position: relative; }
.gallery[hidden] { display: none; }
.gallery__item { aspect-ratio: 4 / 5; }
@media (min-width: 641px) {
.gallery { grid-template-columns: repeat(4, 1fr); gap: 14px; }
}
/* natpis na slici */
.gallery__cap {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
display: flex;
align-items: baseline;
gap: 10px;
padding: 36px 14px 12px;
background: linear-gradient(transparent, rgba(8, 8, 7, 0.85));
color: var(--text, #f3efe6);
font: 600 0.8125rem/1 "Oswald", sans-serif;
letter-spacing: 0.16em;
text-transform: uppercase;
transform: translateY(8px);
opacity: 0;
transition: opacity 400ms ease, transform 500ms var(--ease-out);
pointer-events: none;
}
.gallery__cap span { color: var(--gold); font-size: 0.75rem; }
.gallery__item:hover .gallery__cap,
.gallery__item:focus-visible .gallery__cap { opacity: 1; transform: none; }
@media (hover: none) { .gallery__cap { opacity: 1; transform: none; } }
/* prebacivanje: stare slike se "isijeku" koso i padnu, nove se otkriju rezom odozdo */
.gallery.is-leaving .gallery__item {
animation: workOut 260ms cubic-bezier(0.7, 0, 0.84, 0) both;
animation-delay: calc(min(var(--i, 0), 4) * 20ms);
}
@keyframes workOut {
to { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); transform: translateY(-14px) rotate(-1.5deg); opacity: 0.4; }
}
.gallery.is-entering .gallery__item {
animation: workIn 600ms cubic-bezier(0.16, 1, 0.3, 1) both;
animation-delay: calc(min(var(--i, 0), 7) * 45ms);
}
.gallery.is-entering .gallery__item img {
animation: workImg 800ms cubic-bezier(0.16, 1, 0.3, 1) both;
animation-delay: calc(min(var(--i, 0), 7) * 45ms);
}
.gallery.is-entering .gallery__item::before {
content: "";
position: absolute;
inset: 0;
z-index: 3;
opacity: 1;
background: linear-gradient(180deg, transparent 45%, rgba(255, 228, 160, 0.9) 50%, transparent 55%);
background-size: 100% 260%;
animation: workSheen 600ms ease both;
animation-delay: calc(min(var(--i, 0), 7) * 45ms);
pointer-events: none;
}
@keyframes workIn {
from { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); transform: translateY(26px); }
to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transform: none; }
}
@keyframes workImg { from { transform: scale(1.35); filter: brightness(1.5) saturate(0); } to { transform: none; filter: saturate(0.9); } }
@keyframes workSheen { from { background-position: 0 100%; } to { background-position: 0 0; opacity: 0; } }
/* ---------- Još pokreta ---------- */
/* hero: slika polako "diše" (Ken Burns), a pri skrolu tone u dubinu dok tekst odlazi naprijed */
html.is-loaded .hero__media { animation: kenBurns 18s ease-in-out 3.5s infinite alternate; }
@keyframes kenBurns { from { scale: 1; } to { scale: 1.07; } }
/* zlatna traka koja klizi; nagne se kad se brzo skroluje */
.ticker {
--skew: 0deg;
position: relative;
overflow: hidden;
padding: 18px 0;
border-block: 1px solid rgba(226, 176, 74, 0.25);
background: linear-gradient(180deg, rgba(226, 176, 74, 0.06), rgba(226, 176, 74, 0.02));
transform: skewY(-1.5deg);
margin: 10px 0;
}
.ticker::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, var(--bg), transparent 14%, transparent 86%, var(--bg));
pointer-events: none;
}
.ticker__track {
display: flex;
align-items: center;
gap: 34px;
width: max-content;
will-change: transform;
}
.ticker__track > * { transform: skewX(var(--skew)); transition: transform 300ms ease; }
.ticker span {
font-family: var(--font-display);
font-size: clamp(1.5rem, 4vw, 2.75rem);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
color: transparent;
-webkit-text-stroke: 1px rgba(226, 176, 74, 0.75);
}
.ticker span:nth-of-type(odd) { color: var(--text); -webkit-text-stroke: 0; }
.ticker svg {
flex: none;
width: clamp(22px, 3vw, 32px);
height: clamp(22px, 3vw, 32px);
fill: none;
stroke: var(--gold);
stroke-width: 5;
stroke-linecap: round;
rotate: 90deg;
}
/* zlatno svjetlo koje prati miš preko menija usluga i forme */
@property --so { syntax: ""; inherits: false; initial-value: 0; }
.has-spot { transition: --so 400ms ease; }
.has-spot:hover { --so: 1; }
.board.has-spot {
background:
radial-gradient(circle 300px at var(--sx, 50%) var(--sy, 0), rgba(226, 176, 74, calc(var(--so) * 0.1)), transparent 70%),
radial-gradient(ellipse 70% 45% at 50% 0%, rgba(226, 176, 74, 0.09), transparent 70%),
var(--surface);
}
.ct3__form.has-spot {
background:
radial-gradient(circle 260px at var(--sx, 50%) var(--sy, 0), rgba(226, 176, 74, calc(var(--so) * 0.09)), transparent 70%),
var(--surface);
}
/* naslovi sekcija: ispod se "isiječe" zlatna linija od sredine ka krajevima */
.section__head::after {
content: "";
width: 72px;
height: 2px;
margin-top: 20px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.section__head.reveal::after { transform: scaleX(0); transition: transform 650ms cubic-bezier(0.65, 0, 0.35, 1) 150ms; }
.section__head.reveal.is-visible::after { transform: none; }
@media (prefers-reduced-motion: reduce) {
html.is-loaded .hero__media { animation: none; }
.hero__img, .hero__content, .neon { translate: none; }
}
/* ---------- Font za meni na telefonu ---------- */
:root { --font-logo: "Cinzel", "Times New Roman", serif; }
/* ---------- Meni na telefonu (tri crtice) ---------- */
@media (max-width: 960px) {
.nav {
background:
radial-gradient(110% 55% at 100% 0%, rgba(226, 176, 74, 0.09), transparent 60%),
radial-gradient(80% 40% at 0% 100%, rgba(226, 176, 74, 0.06), transparent 60%),
var(--bg);
}
.nav__list { counter-reset: nav; align-items: stretch; }
.nav__sep { width: auto; height: 22px; margin: 0; background: none; }
.nav__list li:not(.nav__sep) { counter-increment: nav; }
.nav__list a {
display: flex;
align-items: baseline;
gap: 18px;
padding: 17px 2px;
font-family: var(--font-logo);
font-size: 1.75rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: none;
color: var(--text);
transition: color 300ms ease, padding 400ms var(--ease-out);
}
.nav__list a::before {
content: counter(nav, decimal-leading-zero);
min-width: 22px;
font-family: var(--font-display);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.2em;
color: var(--gold);
}
/* strelica desno */
.nav__list a::after {
display: block;
position: static;
width: 9px;
height: 9px;
margin: 0 4px 0 auto;
align-self: center;
background: none;
border-top: 1.5px solid rgba(226, 176, 74, 0.7);
border-right: 1.5px solid rgba(226, 176, 74, 0.7);
transform: rotate(45deg);
transition: transform 400ms var(--ease-out);
}
.nav__list a:active,
.nav__list a.is-active { color: var(--gold); padding-left: 10px; }
.nav__list a.is-active::after { transform: translateX(4px) rotate(45deg); }
/* stavke uklize jedna za drugom kad se meni otvori */
.nav.is-open .nav__list li,
.nav.is-open .nav__cta { animation: navIn 700ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.nav.is-open .nav__list li:nth-child(1) { animation-delay: 60ms; }
.nav.is-open .nav__list li:nth-child(2) { animation-delay: 110ms; }
.nav.is-open .nav__list li:nth-child(3) { animation-delay: 160ms; }
.nav.is-open .nav__list li:nth-child(4) { animation-delay: 210ms; }
.nav.is-open .nav__list li:nth-child(5) { animation-delay: 260ms; }
.nav.is-open .nav__list li:nth-child(6) { animation-delay: 300ms; }
.nav.is-open .nav__list li:nth-child(7) { animation-delay: 340ms; }
.nav.is-open .nav__list li:nth-child(8) { animation-delay: 380ms; }
.nav.is-open .nav__cta { animation-delay: 440ms; }
}
@keyframes navIn {
from { opacity: 0; transform: translateX(-28px); filter: blur(4px); }
to { opacity: 1; transform: none; filter: none; }
}
/* =========================================================
Performanse loadera i otvaranja
Sve što se pomjera tokom animacije koristi samo transform/opacity (radi grafička kartica),
bez filtera i blend modova koji bi se precrtavali u svakom kadru.
========================================================= */
/* snop svjetla: mekan sam od sebe, bez blur filtera */
.loader__beam {
filter: none;
background: conic-gradient(from 180deg at 50% 0%,
transparent 156deg, rgba(255, 226, 160, 0.03) 165deg, rgba(255, 226, 160, 0.08) 172deg,
rgba(255, 236, 190, 0.14) 180deg, rgba(255, 226, 160, 0.08) 188deg, rgba(255, 226, 160, 0.03) 195deg, transparent 204deg);
will-change: opacity;
}
/* manji slojevi = manje memorije na telefonu */
.loader__leak { inset: -8%; will-change: transform; }
.loader__grain { inset: -6%; will-change: transform; }
@keyframes grain {
0% { transform: translate3d(0, 0, 0); }
20% { transform: translate3d(-3%, 2%, 0); }
40% { transform: translate3d(2%, -3%, 0); }
60% { transform: translate3d(-2%, 3%, 0); }
80% { transform: translate3d(3%, 1%, 0); }
100% { transform: translate3d(-2%, -2%, 0); }
}
.loader__dust span { will-change: transform, opacity; }
.loader__half, .clip3d__rig, .clip3d__buzz, .loader__logo { will-change: transform; }
/* odsjaj preko metala: traka koja klizi (transform), umjesto pomjeranja pozadine sa blend modom */
.clip3d__shine { background: none; mix-blend-mode: normal; animation: none; overflow: hidden; }
.clip3d__shine i {
position: absolute;
top: 0;
bottom: 0;
left: -60%;
width: 60%;
background: linear-gradient(100deg, transparent, rgba(255, 250, 235, 0.26) 45%, rgba(255, 250, 235, 0.06) 62%, transparent);
animation: clipShine2 3200ms cubic-bezier(0.65, 0, 0.35, 1) 900ms infinite;
will-change: transform;
}
@keyframes clipShine2 { 0% { transform: translate3d(0, 0, 0); } 55%, 100% { transform: translate3d(270%, 0, 0); } }
/* pokretni zubi — poseban mali sloj iza čeličnog češlja */
.clip3d__mover {
position: absolute;
left: 22px;
top: 2px;
width: 96px;
height: 18px;
transform: translateZ(0.25px);
background:
linear-gradient(#a77a2a, #a77a2a) 0 8px / 100% 10px no-repeat,
repeating-linear-gradient(90deg, #d9a84a 0 2.6px, transparent 2.6px 4px) 0 0 / 100% 12px no-repeat;
}
.loader.is-on .clip3d__mover { animation: mover2 46ms linear 180ms infinite alternate; }
@keyframes mover2 {
from { transform: translateZ(0.25px) translateX(-2.2px); }
to { transform: translateZ(0.25px) translateX(2.2px); }
}
.loader.is-on .clip3d__hair span { will-change: transform, opacity; }
/* logo tokom brijanja: samo odsjaj po slovima, bez animiranog filtera */
.loader.is-dash .loader__logo .logo__word { animation: wordSheen 1000ms cubic-bezier(0.65, 0, 0.35, 1) 450ms forwards; }
/* otvaranje hero-a: umjesto skupog zamućenja, slika se smiruje iz zuma, a tama se pretopi */
html.js .hero__img { transform: scale(1.22); filter: saturate(0.85) brightness(0.8); }
html.is-loaded .hero__img {
transform: none;
filter: saturate(0.85) brightness(0.8);
transition: transform 3200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.hero__media::after {
content: "";
position: absolute;
inset: 0;
background: #000;
opacity: 0;
pointer-events: none;
}
html.js .hero__media::after { opacity: 0.7; }
html.is-loaded .hero__media::after { opacity: 0; transition: opacity 1800ms ease 150ms; }
html.is-loading .hero__img { will-change: transform; }
/* ---------- Loader, 2. krug optimizacije ---------- */
/* 8 slojeva umjesto 14 (ista debljina) — upola manje 3D površina za grafičku */
.clip3d__sides i { transform: translateZ(calc(var(--z) * -2.25px - 1px)); }
.clip3d__back { transform: translateZ(-18px) rotateY(180deg); }
/* prekidač: poseban sloj, klizi transformacijom (ne precrtava SVG) */
.clip3d__thumb {
position: absolute;
left: 62px;
top: 170px;
width: 16px;
height: 23px;
border-radius: 8px;
background:
linear-gradient(transparent 7.5px, #5a3d12 7.5px 8.5px, transparent 8.5px 11.5px, #5a3d12 11.5px 12.5px, transparent 12.5px 15.5px, #5a3d12 15.5px 16.5px, transparent 16.5px) 3px 0 / 10px 100% no-repeat,
linear-gradient(90deg, #6b4a17, #e2b04a 30%, #fff0c4 42%, #c99a3e 60%, #5a3d12);
transform: translateZ(0.75px);
transition: transform 300ms cubic-bezier(0.34, 1.8, 0.64, 1);
}
.loader.is-on .clip3d__thumb { transform: translateZ(0.75px) translateY(-24px); }
/* trag i sjenka: mekani su sami od sebe, bez blur filtera */
.clip3d__trail {
filter: none;
background: linear-gradient(180deg, rgba(255, 228, 160, 0.42), rgba(226, 176, 74, 0.16) 22%, rgba(226, 176, 74, 0.05) 45%, transparent 70%);
}
.clip3d__shadow { filter: none; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.35) 55%, transparent); }
/* logo se otkriva kroz "prozor": prozor ide nadesno, sadržaj suprotno — samo transformacije */
.loader .loader__logo { clip-path: none; }
.loader__reveal {
position: relative;
overflow: hidden;
padding: 40px 20px;
margin: -40px -20px;
opacity: 0;
will-change: transform;
}
.loader__reveal-in { will-change: transform; }
.loader.is-dash .loader__reveal { opacity: 1; }
.loader__reveal.is-free { overflow: visible; }
/* zlatni rez: raste od lijeve ivice (scaleX), umjesto clip-path animacije */
.loader__cut { transform-origin: 0 50%; will-change: transform; }
/* sekcija van ekrana: animacije koje se ponavljaju stanu (štedi grafičku i bateriju) */
.is-offscreen,
.is-offscreen *,
.is-offscreen *::before,
.is-offscreen *::after { animation-play-state: paused !important; }
/* ---------- Video radovi ---------- */
.gallery__item video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 62%; /* glava je obično u donjoj polovini kadra */
background: var(--surface);
}
/* mala oznaka da je video */
.gallery__play {
position: absolute;
z-index: 2;
top: 10px;
right: 10px;
display: grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: rgba(11, 11, 10, 0.6);
border: 1px solid rgba(226, 176, 74, 0.6);
pointer-events: none;
}
.gallery__play::before {
content: "";
margin-left: 2px;
border-left: 9px solid var(--gold);
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
}
.lightbox__fig [hidden] { display: none !important; }
.lightbox__video {
max-width: 100%;
max-height: calc(100dvh - 170px);
border-radius: 12px;
background: #000;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.reveal { opacity: 1; transform: none; }
}