:root{
--gold:#c9a227;
--gold2:#f1d37a;
--ink:#121212;
--muted:#6b7280;
--paper:#f6f3ee;
--line: rgba(18,18,18,.10);
--shadow: 0 18px 60px rgba(0,0,0,.12);
--radius: 18px;
}
/* Base */
html{ scroll-behavior:smooth; overflow-x: hidden; }
body{
font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
color: var(--ink);
background: #fff;
overflow-x: hidden;
}
/* Header (kao na slici) */
.navbar{
background: var(--paper) !important;
border-bottom: 1px solid rgba(0,0,0,.06);
}
.navbar-brand{
font-weight: 800;
letter-spacing: .3px;
}
.nav-link{
color: #111 !important;
font-weight: 600;
padding: .9rem 1rem !important;
}
.nav-link:hover{ color: var(--gold) !important; }
.nav-link.active{
color: var(--gold) !important;
}
/* RESERVATION u headeru (bez plave) */
.btn-gold{
background: linear-gradient(180deg, var(--gold2), var(--gold));
border: 0;
color:#1a1406 !important;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
border-radius: 999px;
padding: .72rem 1.05rem;
box-shadow: 0 12px 28px rgba(201,162,39,.20);
}
.btn-gold:hover{ filter: brightness(1.03); transform: translateY(-1px); }
.btn-gold:focus{ box-shadow: 0 0 0 .25rem rgba(201,162,39,.25); }
.btn-outline-gold{
border: 1px solid rgba(201,162,39,.55);
color: #111 !important;
font-weight: 700;
border-radius: 999px;
padding: .72rem 1.05rem;
background: transparent;
}
.btn-outline-gold:hover{
background: rgba(201,162,39,.10);
border-color: rgba(201,162,39,.85);
}
.btn-outline-gold:focus{ box-shadow: 0 0 0 .25rem rgba(201,162,39,.22); }
/* Dropdown menu */
.dropdown-menu{
border-radius: 14px;
border: 1px solid rgba(0,0,0,.08);
box-shadow: 0 16px 50px rgba(0,0,0,.12);
}
.dropdown-item{
font-weight: 600;
}
.dropdown-item:active{
background: rgba(201,162,39,.18);
color: #111;
}
/* Hero / Sections */
.hero{
position: relative;
min-height: 56vh;
display:flex;
align-items:center;
background:
linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.72) 45%, rgba(255,255,255,.55) 70%, rgba(255,255,255,.35) 100%),
url("https://images.unsplash.com/photo-1529692236671-f1f6cf9683ba?auto=format&fit=crop&w=2200&q=80") center/cover no-repeat;
}
.hero h1{
font-weight: 900;
letter-spacing: .2px;
font-size: clamp(2rem, 4vw, 3.1rem);
line-height: 1.05;
}
.kicker{
color: var(--gold);
font-weight: 800;
letter-spacing: .18em;
text-transform: uppercase;
font-size: .78rem;
}
/* Cards */
.cardx{
border-radius: var(--radius);
border: 1px solid rgba(0,0,0,.06);
box-shadow: var(--shadow);
overflow:hidden;
background:#fff;
}
.cardx .img{
aspect-ratio: 16/10;
background-size: cover;
background-position: center;
}
/* Forms: bez plavog focusa */
.form-control, .form-select{
border-radius: 14px;
border-color: rgba(0,0,0,.14);
}
.form-control:focus, .form-select:focus{
border-color: rgba(201,162,39,.85);
box-shadow: 0 0 0 .25rem rgba(201,162,39,.18);
}
/* Floating labels (placeholder “nevidljiv”) */
.form-floating > .form-control::placeholder { color: transparent; }
.form-floating > .form-control:focus::placeholder { color: transparent; }
.section{
padding: 70px 0;
}
.section-title{
font-weight: 900;
font-size: clamp(1.5rem, 2.3vw, 2.1rem);
}
/* Footer */
footer{
background: var(--paper);
border-top: 1px solid rgba(0,0,0,.06);
padding: 36px 0;
}
/* Desktop hover dropdown */
@media (min-width: 992px){
.dropdown:hover .dropdown-menu{ display:block; margin-top: .25rem; }
}
/* =========================
THEME: Light (default)
========================= */
:root{
color-scheme: light;
}
/* =========================
THEME: Dark
(aktivira se kad )
========================= */
html[data-theme="dark"]{
color-scheme: dark;
}
html[data-theme="dark"] body{
background: #0b0c0f;
color: #eef2f7;
}
/* Navbar u dark modu */
html[data-theme="dark"] .navbar{
background: rgba(15,16,20,.88) !important;
border-bottom: 1px solid rgba(255,255,255,.10);
backdrop-filter: blur(10px);
}
html[data-theme="dark"] .nav-link{
color: rgba(238,242,247,.92) !important;
}
html[data-theme="dark"] .nav-link:hover{ color: var(--gold2) !important; }
/* Dropdown u dark */
html[data-theme="dark"] .dropdown-menu{
background: rgba(17,18,22,.96);
border: 1px solid rgba(255,255,255,.10);
box-shadow: 0 18px 60px rgba(0,0,0,.55);
}
html[data-theme="dark"] .dropdown-item{
color: rgba(238,242,247,.90);
}
html[data-theme="dark"] .dropdown-item:hover{
background: rgba(201,162,39,.14);
color:#fff;
}
/* Hero: drugačiji overlay u dark */
html[data-theme="dark"] .hero{
background:
linear-gradient(90deg, rgba(11,12,15,.92) 0%, rgba(11,12,15,.72) 45%, rgba(11,12,15,.55) 70%, rgba(11,12,15,.35) 100%),
url("https://images.unsplash.com/photo-1529692236671-f1f6cf9683ba?auto=format&fit=crop&w=2200&q=80") center/cover no-repeat;
}
html[data-theme="dark"] .text-secondary{
color: rgba(238,242,247,.72) !important;
}
/* Card u dark */
html[data-theme="dark"] .cardx{
background: rgba(16,17,22,.92);
border: 1px solid rgba(255,255,255,.10);
box-shadow: 0 22px 70px rgba(0,0,0,.55);
}
/* Sekcije sa "paper" pozadinom u dark */
html[data-theme="dark"] .section.bg-paper,
html[data-theme="dark"] header.bg-paper,
html[data-theme="dark"] footer{
background: rgba(15,16,20,.92) !important;
border-color: rgba(255,255,255,.10) !important;
}
/* Forms u dark */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select{
background: rgba(18,19,24,.92);
color: #eef2f7;
border-color: rgba(255,255,255,.14);
}
html[data-theme="dark"] .form-control::placeholder{ color: rgba(238,242,247,.45); }
html[data-theme="dark"] label{ color: rgba(238,242,247,.78); }
/* Toggle dugme (ikonica) */
.theme-toggle{
width: 44px;
height: 44px;
border-radius: 999px;
display: inline-grid;
place-items: center;
border: 1px solid rgba(0,0,0,.10);
background: transparent;
}
.theme-toggle:hover{
background: rgba(201,162,39,.10);
border-color: rgba(201,162,39,.45);
}
html[data-theme="dark"] .theme-toggle{
border-color: rgba(255,255,255,.14);
}
/* =========================
RESERVATION PAGE (no inline CSS)
========================= */
/* Hero for reservation page */
.page-hero{
background:
linear-gradient(90deg, rgba(246,243,238,.94) 0%, rgba(246,243,238,.78) 45%, rgba(246,243,238,.62) 70%, rgba(246,243,238,.35) 100%),
url("https://images.unsplash.com/photo-1525268323446-0505b6fe7778?auto=format&fit=crop&w=2200&q=80") center/cover no-repeat;
border-bottom: 1px solid rgba(0,0,0,.06);
}
html[data-theme="dark"] .page-hero{
background:
linear-gradient(90deg, rgba(11,12,15,.92) 0%, rgba(11,12,15,.76) 45%, rgba(11,12,15,.58) 70%, rgba(11,12,15,.35) 100%),
url("https://images.unsplash.com/photo-1525268323446-0505b6fe7778?auto=format&fit=crop&w=2200&q=80") center/cover no-repeat;
border-bottom: 1px solid rgba(255,255,255,.10);
}
/* Small premium badge */
.badge-soft{
background: rgba(201,162,39,.12);
border: 1px solid rgba(201,162,39,.22);
color: #5a4708;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
font-size: .72rem;
border-radius: 999px;
padding: .35rem .7rem;
}
html[data-theme="dark"] .badge-soft{
color: rgba(241,211,122,.95);
}
/* Stepper */
.stepper{
display:flex; gap:.75rem; flex-wrap:wrap;
align-items:center;
color: var(--muted);
font-weight: 700;
font-size: .92rem;
}
.step{
display:flex; align-items:center; gap:.5rem;
padding:.5rem .75rem;
border-radius: 999px;
border: 1px solid rgba(0,0,0,.08);
background: rgba(255,255,255,.70);
}
.step .dot{
width: 10px; height: 10px; border-radius: 999px;
background: rgba(0,0,0,.20);
}
.step.active{
border-color: rgba(201,162,39,.45);
background: rgba(201,162,39,.10);
color: #111;
}
.step.active .dot{ background: var(--gold); }
html[data-theme="dark"] .step{
border-color: rgba(255,255,255,.12);
background: rgba(16,17,22,.75);
color: rgba(238,242,247,.70);
}
html[data-theme="dark"] .step.active{
color: rgba(238,242,247,.92);
}
/* Summary rows */
.summary-row{
display:flex; justify-content:space-between; gap:1rem;
padding: .65rem 0;
border-bottom: 1px solid rgba(0,0,0,.06);
}
html[data-theme="dark"] .summary-row{
border-bottom: 1px solid rgba(255,255,255,.10);
}
.summary-key{ color: var(--muted); font-weight: 700; }
html[data-theme="dark"] .summary-key{ color: rgba(238,242,247,.62); }
.summary-val{ font-weight: 900; }
/* ===== Fix: Buttons text visibility in DARK ===== */
/* (u tvojoj osnovnoj temi btn-outline-gold ima color #111, to u dark ne valja) */
html[data-theme="dark"] .btn-outline-gold{
color: rgba(238,242,247,.92) !important;
}
html[data-theme="dark"] .btn-outline-gold:hover{
color: rgba(238,242,247,.98) !important;
}
/* Ensure btn-gold text is always readable */
.btn-gold{
color: #1a1406 !important;
}
/* ===== Fix: Form background in DARK + native date/time ===== */
html[data-theme="dark"] .form-label{
color: rgba(238,242,247,.78);
}
/* Make sure native pickers look dark and inputs aren't white */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
color-scheme: dark;
}
html[data-theme="light"] input[type="date"],
html[data-theme="light"] input[type="time"]{
color-scheme: light;
}
/* Bootstrap modal header/footer border remove looks cleaner (optional) */
.modal-content.cardx{
border-radius: var(--radius);
}
/* =========================
SPEISEKARTE PAGE
========================= */
.menu-hero{
background:
linear-gradient(90deg, rgba(246,243,238,.94) 0%, rgba(246,243,238,.80) 45%, rgba(246,243,238,.62) 70%, rgba(246,243,238,.35) 100%),
url("https://images.unsplash.com/photo-1551183053-bf91a1d81141?auto=format&fit=crop&w=2200&q=80") center/cover no-repeat;
border-bottom: 1px solid rgba(0,0,0,.06);
}
html[data-theme="dark"] .menu-hero{
background:
linear-gradient(90deg, rgba(11,12,15,.92) 0%, rgba(11,12,15,.78) 45%, rgba(11,12,15,.58) 70%, rgba(11,12,15,.35) 100%),
url("https://images.unsplash.com/photo-1551183053-bf91a1d81141?auto=format&fit=crop&w=2200&q=80") center/cover no-repeat;
border-bottom: 1px solid rgba(255,255,255,.10);
}
.menu-toolbar{
position: sticky;
top: 72px;
z-index: 20;
background: rgba(255,255,255,.86);
border: 1px solid rgba(0,0,0,.06);
box-shadow: 0 18px 50px rgba(0,0,0,.08);
backdrop-filter: blur(10px);
border-radius: 18px;
padding: 12px;
}
html[data-theme="dark"] .menu-toolbar{
background: rgba(16,17,22,.82);
border: 1px solid rgba(255,255,255,.10);
box-shadow: 0 22px 70px rgba(0,0,0,.55);
}
.category-pills{
display:flex;
gap: 8px;
flex-wrap: wrap;
}
.category-pill{
display:inline-flex;
align-items:center;
gap: 8px;
padding: .6rem .9rem;
border-radius: 999px;
border: 1px solid rgba(0,0,0,.10);
background: rgba(255,255,255,.65);
font-weight: 800;
color: #111;
text-decoration: none;
white-space: nowrap;
}
.category-pill:hover{
border-color: rgba(201,162,39,.55);
background: rgba(201,162,39,.10);
color:#111;
}
.category-pill.active{
border-color: rgba(201,162,39,.75);
background: linear-gradient(180deg, rgba(241,211,122,.35), rgba(201,162,39,.18));
color:#111;
}
html[data-theme="dark"] .category-pill{
border-color: rgba(255,255,255,.12);
background: rgba(18,19,24,.65);
color: rgba(238,242,247,.92);
}
html[data-theme="dark"] .category-pill:hover{
border-color: rgba(201,162,39,.55);
background: rgba(201,162,39,.12);
}
html[data-theme="dark"] .category-pill.active{
color: rgba(238,242,247,.95);
}
.menu-filters{
display:flex;
gap: 10px;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
}
.filter-chip{
display:inline-flex;
align-items:center;
gap: 8px;
padding: .55rem .8rem;
border-radius: 999px;
border: 1px solid rgba(0,0,0,.10);
background: rgba(255,255,255,.55);
font-weight: 800;
color: #111;
}
html[data-theme="dark"] .filter-chip{
border-color: rgba(255,255,255,.12);
background: rgba(18,19,24,.55);
color: rgba(238,242,247,.92);
}
.menu-search .form-control{
height: 46px;
border-radius: 999px;
padding-left: 44px;
}
.menu-search{
position: relative;
}
.menu-search-icon{
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
opacity: .65;
}
html[data-theme="dark"] .menu-search-icon{ opacity: .75; }
.menu-section-title{
display:flex;
align-items:flex-end;
justify-content: space-between;
gap: 16px;
margin-bottom: 14px;
}
.menu-section-title h2{
font-weight: 900;
letter-spacing: .2px;
margin: 0;
}
.menu-section-title .sub{
color: var(--muted);
font-weight: 700;
}
html[data-theme="dark"] .menu-section-title .sub{
color: rgba(238,242,247,.62);
}
.menu-card{
height: 100%;
}
.menu-img{
width: 100%;
aspect-ratio: 16/10;
object-fit: cover;
display:block;
}
.menu-card-body{
padding: 16px 18px;
}
.menu-item-title{
font-weight: 900;
letter-spacing: .1px;
margin: 0 0 6px 0;
}
.menu-item-desc{
margin: 0;
color: var(--muted);
font-weight: 600;
}
html[data-theme="dark"] .menu-item-desc{
color: rgba(238,242,247,.62);
}
.menu-meta{
display:flex;
align-items:center;
justify-content: space-between;
gap: 10px;
margin-top: 12px;
}
.menu-price{
font-weight: 900;
color: var(--gold);
letter-spacing: .04em;
}
.tag-row{
display:flex;
gap: 6px;
flex-wrap: wrap;
}
.tag{
display:inline-flex;
align-items:center;
gap: 6px;
padding: .28rem .55rem;
border-radius: 999px;
border: 1px solid rgba(0,0,0,.10);
background: rgba(0,0,0,.03);
font-weight: 800;
font-size: .78rem;
}
html[data-theme="dark"] .tag{
border-color: rgba(255,255,255,.12);
background: rgba(255,255,255,.06);
color: rgba(238,242,247,.92);
}
.tag.gold{
border-color: rgba(201,162,39,.28);
background: rgba(201,162,39,.12);
}
.menu-divider{
height: 1px;
background: linear-gradient(90deg, transparent, rgba(201,162,39,.40), transparent);
margin: 22px 0;
}
html[data-theme="dark"] .menu-toolbar{
top: 72px;
}
/* Slightly bigger section spacing for menu */
.menu-section{
padding: 54px 0;
}
/* Hide/show sections when filtering by category (no scroll) */
.menu-hidden{
display: none !important;
}
/* =========================
KONTAKT PAGE
========================= */
.contact-hero{
background:
linear-gradient(90deg, rgba(246,243,238,.94) 0%, rgba(246,243,238,.80) 45%, rgba(246,243,238,.62) 70%, rgba(246,243,238,.35) 100%),
url("https://images.unsplash.com/photo-1555396273-367ea4eb4db5?auto=format&fit=crop&w=2200&q=80") center/cover no-repeat;
border-bottom: 1px solid rgba(0,0,0,.06);
}
html[data-theme="dark"] .contact-hero{
background:
linear-gradient(90deg, rgba(11,12,15,.92) 0%, rgba(11,12,15,.78) 45%, rgba(11,12,15,.58) 70%, rgba(11,12,15,.35) 100%),
url("https://images.unsplash.com/photo-1555396273-367ea4eb4db5?auto=format&fit=crop&w=2200&q=80") center/cover no-repeat;
border-bottom: 1px solid rgba(255,255,255,.10);
}
.info-tile{
display:flex;
gap: 14px;
align-items:flex-start;
padding: 16px 18px;
border-radius: var(--radius);
border: 1px solid rgba(0,0,0,.06);
background: rgba(255,255,255,.75);
}
html[data-theme="dark"] .info-tile{
border-color: rgba(255,255,255,.10);
background: rgba(16,17,22,.80);
}
.info-icon{
width: 44px;
height: 44px;
border-radius: 14px;
display:grid;
place-items:center;
background: rgba(201,162,39,.12);
border: 1px solid rgba(201,162,39,.22);
flex: 0 0 auto;
}
.info-icon i{
color: var(--gold);
font-size: 1.25rem;
}
.map-frame{
width: 100%;
min-height: 420px;
border: 0;
display:block;
}
.contact-form-card{
overflow:hidden;
}
.form-hint{
color: var(--muted);
font-weight: 600;
}
html[data-theme="dark"] .form-hint{
color: rgba(238,242,247,.62);
}
/* =========================
PREMIUM UPGRADE (Modern / Exclusive)
========================= */
/* Better font (Google Font) - optional:
Add in HTML of all pages:
*/
body{
font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
letter-spacing: .1px;
}
/* Typography scale */
h1, .h1{ letter-spacing: .2px; }
h2, .h2{ letter-spacing: .2px; }
h3, .h3{ letter-spacing: .15px; }
.section-title{
line-height: 1.12;
}
.text-secondary{
line-height: 1.55;
}
/* Navbar: glass + cleaner spacing */
.navbar{
background: rgba(246,243,238,.80) !important;
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(0,0,0,.06);
}
html[data-theme="dark"] .navbar{
background: rgba(15,16,20,.70) !important;
border-bottom: 1px solid rgba(255,255,255,.10);
}
.navbar .nav-link{
position: relative;
opacity: .92;
}
.navbar .nav-link::after{
content:"";
position:absolute;
left: 12px;
right: 12px;
bottom: 8px;
height: 2px;
border-radius: 99px;
background: linear-gradient(90deg, transparent, rgba(201,162,39,.65), transparent);
transform: scaleX(0);
transform-origin: center;
transition: transform .22s ease;
}
.navbar .nav-link:hover::after,
.navbar .nav-link.active::after{
transform: scaleX(1);
}
/* Buttons: more premium micro-interactions */
.btn-gold, .btn-outline-gold{
transition: transform .18s ease, filter .18s ease, background-color .18s ease, border-color .18s ease;
}
.btn-gold:hover, .btn-outline-gold:hover{
transform: translateY(-1px);
}
.btn-gold:active, .btn-outline-gold:active{
transform: translateY(0);
}
/* Fix outline in dark */
html[data-theme="dark"] .btn-outline-gold{
color: rgba(238,242,247,.94) !important;
}
/* Cards: modern depth + hover */
.cardx{
box-shadow: 0 18px 60px rgba(0,0,0,.10);
transform: translateZ(0);
}
html[data-theme="dark"] .cardx{
box-shadow: 0 24px 80px rgba(0,0,0,.60);
}
.cardx:hover{
transform: translateY(-2px);
transition: transform .22s ease, box-shadow .22s ease;
box-shadow: 0 26px 80px rgba(0,0,0,.14);
}
html[data-theme="dark"] .cardx:hover{
box-shadow: 0 34px 110px rgba(0,0,0,.72);
}
/* Image polish */
.cardx .img, .menu-img{
filter: saturate(1.02) contrast(1.02);
}
/* Sections spacing: more premium rhythm */
.section{
padding: 84px 0;
}
@media (max-width: 768px){
.section{ padding: 64px 0; }
}
/* Hero: better readability + subtle vignette */
.hero::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background: radial-gradient(1200px 500px at 20% 20%, rgba(201,162,39,.08), transparent 60%);
}
html[data-theme="dark"] .hero::after{
background: radial-gradient(1200px 500px at 20% 20%, rgba(201,162,39,.10), transparent 60%);
}
/* Menu toolbar: more refined */
.menu-toolbar{
border-radius: 22px;
padding: 14px;
}
.category-pill{
border-width: 1px;
box-shadow: 0 10px 26px rgba(0,0,0,.06);
}
html[data-theme="dark"] .category-pill{
box-shadow: 0 14px 40px rgba(0,0,0,.45);
}
/* Form: premium feel */
.form-control, .form-select{
min-height: 48px;
}
.form-label{
letter-spacing: .08px;
}
/* Footer: cleaner */
footer{
background: rgba(246,243,238,.85);
}
html[data-theme="dark"] footer{
background: rgba(15,16,20,.85);
}
/* FIX: Logo/brand u dark modu da bude svijetao */
html[data-theme="dark"] .navbar-brand,
html[data-theme="dark"] .navbar-brand:visited{
color: rgba(238,242,247,.95) !important;
}
html[data-theme="dark"] .navbar-brand:hover{
color: rgba(238,242,247,.98) !important;
}
/* FIX: Burger (hamburger) icon u dark modu na mobilnom */
html[data-theme="dark"] .navbar-toggler{
border-color: rgba(255,255,255,.18) !important;
}
html[data-theme="dark"] .navbar-toggler-icon{
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(238,242,247,0.95)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}