/* =========================================

SARAJEVO — A CITY BETWEEN WORLDS

Premium Travel Design System

PART 1
FOUNDATION • HEADER • HERO

========================================= */


/* =========================
VARIABLES
========================= */

:root{

--night:#101820;
--forest:#263C35;
--gold:#C8A96B;

--sand:#F5EFE5;
--stone:#D8D1C5;

--white:#ffffff;
--text:#333333;

--shadow:
0 20px 60px rgba(0,0,0,.14);

--shadow-hover:
0 30px 80px rgba(0,0,0,.22);

--transition:.4s ease;

}



/* =========================
RESET
========================= */


*,
*::before,
*::after{

margin:0;
padding:0;
box-sizing:border-box;

}


html{

scroll-behavior:smooth;

}


body{

font-family:"Inter",sans-serif;

background:var(--sand);

color:var(--text);

line-height:1.7;

overflow-x:hidden;

}


img{

max-width:100%;
display:block;

}


a{

text-decoration:none;
color:inherit;

}


button{

font-family:inherit;

}


section[id]{

scroll-margin-top:100px;

}




/* =========================
HEADER
========================= */


.header{

position:fixed;

top:0;
left:0;

width:100%;

height:90px;

padding:0 6%;

display:flex;

align-items:center;

gap:30px;

z-index:1000;

background:
rgba(16,24,32,.35);

backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);

border-bottom:
1px solid rgba(255,255,255,.15);

transition:var(--transition);

}



.header.scrolled{

background:
rgba(16,24,32,.94);

}



/* LOGO */


.logo{

font-family:"Cormorant Garamond",serif;

font-size:2.1rem;

font-weight:700;

letter-spacing:3px;

color:white;

line-height:1;

}



.logo span{

display:block;

margin-top:8px;

font-family:"Inter",sans-serif;

font-size:.45rem;

font-weight:400;

letter-spacing:3px;

color:var(--gold);

}



/* NAVIGATION */


nav{

display:flex;

align-items:center;

justify-content:center;

gap:32px;

flex:1;

}



nav a{

position:relative;

font-size:.8rem;

letter-spacing:2px;

text-transform:uppercase;

color:white;

}



nav a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:1px;

background:var(--gold);

transition:.3s;

}



nav a:hover::after,
nav a.active::after{

width:100%;

}



nav a.active{

color:var(--gold);

}



/* MOBILE BUTTON */


.menu-toggle{

display:none;

background:none;

border:0;

padding:5px;

color:white;

font-size:2rem;

cursor:pointer;

}





/* =========================
HERO
========================= */


.hero{

height:100vh;

min-height:750px;

position:relative;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

color:white;


background:

linear-gradient(
rgba(10,15,20,.45),
rgba(10,15,20,.80)
),

url(images/hero.jpg);


background-size:cover;

background-position:center;

background-attachment:fixed;

}



.hero-overlay{

position:absolute;

inset:0;

background:

linear-gradient(
transparent,
rgba(0,0,0,.35)
);

}




.hero-content{

position:relative;

z-index:2;

max-width:900px;

padding:20px;

}




.eyebrow{

margin-bottom:35px;

color:var(--gold);

font-size:.8rem;

letter-spacing:5px;

font-weight:400;

}




.hero h1{

font-family:"Cormorant Garamond",serif;

font-size:

clamp(4rem,8vw,7rem);

font-weight:600;

line-height:.9;

letter-spacing:4px;

}



.hero h1 span{

display:inline-block;

font-size:.55em;

font-weight:400;

letter-spacing:3px;

}





.hero-text{

max-width:620px;

margin:40px auto;

font-size:1.2rem;

font-weight:300;

line-height:1.8;

}





.button{

display:inline-block;

padding:15px 42px;

border:1px solid var(--gold);

font-size:.8rem;

letter-spacing:3px;

text-transform:uppercase;

color:white;

transition:.3s;

}



.button:hover{

background:var(--gold);

color:var(--night);

}




/* HERO INFO */


.hero-info{

position:absolute;

bottom:40px;

left:50%;

transform:translateX(-50%);

display:flex;

gap:20px;

z-index:3;

}



.hero-info div{

min-width:160px;

padding:20px 30px;

background:

rgba(255,255,255,.12);

backdrop-filter:blur(15px);

-webkit-backdrop-filter:blur(15px);

border:1px solid rgba(255,255,255,.2);

color:white;

}



.hero-info strong{

font-family:"Cormorant Garamond",serif;

font-size:2rem;

color:var(--gold);

}



#weather-icon{

font-size:2rem;

display:inline-block;

transition:.4s ease;

}



.weather-sunny{

animation:sunPulse 3s infinite;

}



@keyframes sunPulse{

0%,100%{

transform:scale(1);

}

50%{

transform:scale(1.15);

}

}




/* HERO MOBILE */


@media(max-width:900px){

.hero{

background-attachment:scroll;

min-height:850px;

}

}




/* =========================================

PART 2

CONTENT SECTIONS • CARDS • MAP • FOOD • STAY

========================================= */


/* =========================
GENERAL SECTIONS
========================= */


.section{

padding:120px 8%;

}



.section-title{

max-width:850px;

margin-bottom:70px;

}



.section-title p{

font-size:.75rem;

letter-spacing:5px;

text-transform:uppercase;

color:var(--gold);

margin-bottom:20px;

}



.section-title h2{

font-family:"Cormorant Garamond",serif;

font-size:

clamp(2.8rem,5vw,4.5rem);

font-weight:600;

line-height:1.1;

color:var(--forest);

}



.dark{

background:var(--night);

color:white;

}




.light h2{

color:white;

}




/* =========================
INTRO
========================= */


.intro-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

}



.text p{

font-size:1.1rem;

margin-bottom:25px;

}





/* =========================
FACTS
========================= */


.facts{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:25px;

}



.facts div{

background:white;

padding:40px 25px;

text-align:center;

box-shadow:var(--shadow);

transition:var(--transition);

}



.facts div:hover{

transform:translateY(-8px);

box-shadow:var(--shadow-hover);

}



.facts h3{

font-family:"Cormorant Garamond",serif;

font-size:3.5rem;

color:var(--gold);

line-height:1;

}





/* =========================
TIMELINE
========================= */


.timeline{

display:grid;

grid-template-columns:

repeat(4,1fr);

gap:30px;

}



.timeline article{

padding:35px;

border-top:1px solid var(--gold);

}



.timeline span{

font-family:"Cormorant Garamond",serif;

font-size:1.5rem;

color:var(--gold);

}



.timeline h3{

font-family:"Cormorant Garamond",serif;

font-size:2rem;

margin:15px 0;

}





/* =========================
GENERIC CARDS
========================= */


.cards{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:35px;

}



.cards article{

background:white;

padding:45px 35px;

box-shadow:var(--shadow);

transition:var(--transition);

}



.cards article:hover{

transform:translateY(-10px);

box-shadow:var(--shadow-hover);

}



.cards h3{

font-family:"Cormorant Garamond",serif;

font-size:2.4rem;

color:var(--forest);

margin-bottom:15px;

}





/* =========================
PLACE CARDS
========================= */


.place-grid{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:35px;

}



.place-card{

background:white;

overflow:hidden;

box-shadow:var(--shadow);

transition:var(--transition);

}



.place-card:hover{

transform:translateY(-12px);

box-shadow:var(--shadow-hover);

}



.place-image{

height:320px;

background-size:cover;

background-position:center;

transition:1s ease;

}



.place-card:hover .place-image{

transform:scale(1.05);

}



.place-content{

padding:35px;

}



.place-content h3{

font-family:"Cormorant Garamond",serif;

font-size:2.6rem;

color:var(--forest);

}



.place-content span,
.taste-content span,
.stay-content span,
.transport-card span{

display:block;

margin-top:20px;

font-size:.7rem;

letter-spacing:3px;

color:var(--gold);

}





/* =========================
MAP EXPERIENCE
========================= */


.map-layout{

display:grid;

grid-template-columns:

1.2fr .8fr;

gap:60px;

align-items:center;

}



.map-box{

height:500px;

position:relative;

overflow:hidden;

background:

linear-gradient(

135deg,

var(--forest),

var(--night)

);

box-shadow:var(--shadow);

}



.map-glow{

position:absolute;

width:320px;

height:320px;

border-radius:50%;

background:

rgba(200,169,107,.18);

filter:blur(70px);

top:50%;

left:50%;

transform:translate(-50%,-50%);

}



.location-pin{

position:absolute;

background:white;

padding:15px 20px;

box-shadow:var(--shadow);

}



.location-pin span{

color:var(--gold);

font-size:.8rem;

}



.location-pin h3{

font-family:"Cormorant Garamond",serif;

font-size:1.5rem;

color:var(--forest);

}



.location-pin p{

font-size:.8rem;

}



.pin-1{

top:35%;

left:30%;

}



.pin-2{

top:20%;

right:20%;

}



.pin-3{

bottom:35%;

left:45%;

}



.pin-4{

bottom:15%;

right:30%;

}



.map-info h3{

font-family:"Cormorant Garamond",serif;

font-size:3rem;

color:var(--forest);

}



.distance{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:20px;

margin-top:40px;

}



.distance div{

background:white;

padding:25px;

box-shadow:var(--shadow);

}



.distance strong{

font-family:"Cormorant Garamond",serif;

font-size:2rem;

color:var(--gold);

}





/* =========================
TRANSPORT
========================= */


.transport-grid{

display:grid;

grid-template-columns:

repeat(4,1fr);

gap:25px;

}



.transport-card{

background:white;

padding:35px;

box-shadow:var(--shadow);

transition:var(--transition);

}



.transport-card:hover{

transform:translateY(-10px);

box-shadow:var(--shadow-hover);

}



.transport-icon{

font-size:2.5rem;

margin-bottom:20px;

}



.transport-card h3{

font-family:"Cormorant Garamond",serif;

font-size:2.2rem;

color:var(--forest);

}





/* =========================
TIP BOXES
========================= */


.transport-tip,
.food-tip,
.stay-tip{

margin-top:60px;

padding:40px;

background:

rgba(200,169,107,.12);

border-left:

3px solid var(--gold);

}



.transport-tip h3,
.food-tip h3,
.stay-tip h3{

font-family:"Cormorant Garamond",serif;

font-size:2.2rem;

color:var(--forest);

}





/* =========================
TASTE
========================= */


.taste-grid{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:35px;

}



.taste-card{

background:white;

overflow:hidden;

box-shadow:var(--shadow);

transition:var(--transition);

}



.taste-card:hover{

transform:translateY(-10px);

}



.taste-image{

height:300px;

background-size:cover;

background-position:center;

}



.taste-content{

padding:35px;

}



.taste-content h3{

font-family:"Cormorant Garamond",serif;

font-size:2.6rem;

color:var(--forest);

}





/* =========================
FOOD LIST
========================= */


.food-list{

margin-top:70px;

}



.food-list h3{

font-family:"Cormorant Garamond",serif;

font-size:2.5rem;

color:var(--forest);

}



.food-items{

display:grid;

grid-template-columns:

repeat(4,1fr);

gap:20px;

margin-top:30px;

}



.food-items div{

background:white;

padding:25px;

box-shadow:var(--shadow);

font-family:"Cormorant Garamond",serif;

font-size:1.5rem;

}



.food-items span{

display:block;

margin-top:8px;

font-family:"Inter",sans-serif;

font-size:.8rem;

color:var(--gold);

}





/* =========================
COFFEE EXPERIENCE
========================= */


.coffee{

min-height:550px;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

color:white;

background:

linear-gradient(

rgba(10,15,20,.75),

rgba(10,15,20,.90)

),

url(images/coffee.jpg);

background-size:cover;

background-position:center;

}



.coffee-content{

max-width:800px;

padding:40px;

}



.coffee-line{

width:70px;

height:1px;

background:var(--gold);

margin:0 auto 35px;

}



.coffee-content p:first-of-type{

color:var(--gold);

letter-spacing:5px;

font-size:.8rem;

}



.coffee-content h2{

font-family:"Cormorant Garamond",serif;

font-size:

clamp(3rem,6vw,5rem);

line-height:1.1;

font-weight:500;

margin:30px 0;

}



.coffee-content p:last-child{

font-size:1.2rem;

font-weight:300;

color:

rgba(255,255,255,.85);

}





/* =========================
STAY
========================= */


.stay-grid{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:35px;

}



.stay-card{

background:white;

overflow:hidden;

box-shadow:var(--shadow);

transition:var(--transition);

}



.stay-card:hover{

transform:translateY(-10px);

box-shadow:var(--shadow-hover);

}



.stay-image{

height:300px;

background-size:cover;

background-position:center;

}



.stay-content{

padding:35px;

}



.stay-content h3{

font-family:"Cormorant Garamond",serif;

font-size:2.6rem;

color:var(--forest);

}






/* =========================================
ANIMATIONS
========================================= */


.hidden{

opacity:0;

transform:translateY(50px);

transition:
opacity .8s ease,
transform .8s ease;

}


.visible{

opacity:1;

transform:none;

}



/* =========================================
GOLD PARTICLES
========================================= */


.gold-particles{

position:absolute;

inset:0;

overflow:hidden;

pointer-events:none;

}



.gold-particles::before,
.gold-particles::after{

content:"";

position:absolute;

width:4px;

height:4px;

background:var(--gold);

border-radius:50%;

box-shadow:
80px 120px var(--gold),
180px 300px var(--gold),
320px 150px var(--gold),
520px 400px var(--gold),
700px 200px var(--gold),
900px 350px var(--gold),
1100px 120px var(--gold);

opacity:.35;

animation:

floatingDust 18s linear infinite;

}



@keyframes floatingDust{


0%{

transform:translateY(40px);

opacity:0;

}


20%{

opacity:.5;

}


80%{

opacity:.35;

}


100%{

transform:translateY(-120px);

opacity:0;

}


}





/* =========================================
SCROLL INDICATOR
========================================= */


.scroll-indicator{

position:absolute;

bottom:35px;

left:50%;

transform:translateX(-50%);

z-index:5;

text-align:center;

color:white;

}



.scroll-indicator span{

display:block;

width:1px;

height:60px;

background:var(--gold);

margin:auto;

animation:

scrollLine 2s infinite;

}



.scroll-indicator p{

font-size:.65rem;

letter-spacing:4px;

margin-top:15px;

color:var(--gold);

}



@keyframes scrollLine{


0%{

transform:scaleY(0);

transform-origin:top;

}


50%{

transform:scaleY(1);

}


100%{

transform:scaleY(0);

transform-origin:bottom;

}


}





/* =========================================
LANGUAGE SWITCHER
========================================= */


.language-switcher{

display:flex;

gap:12px;

margin-left:30px;

}



.language-switcher a{

font-size:.7rem;

letter-spacing:2px;

color:white;

cursor:pointer;

}



.language-switcher a.active{

color:var(--gold);

}





/* =========================================
PDF BUTTON
========================================= */


.pdf-button{

display:inline-block;

margin-left:20px;

padding:15px 35px;

border:

1px solid rgba(255,255,255,.4);


font-size:.85rem;

letter-spacing:2px;

text-transform:uppercase;

transition:.3s;

}



.pdf-button:hover{

border-color:var(--gold);

color:var(--gold);

}





/* =========================================
BACK TO TOP
========================================= */


#backToTop{

position:fixed;

right:35px;

bottom:35px;

width:55px;

height:55px;

border-radius:50%;


border:

1px solid var(--gold);


background:

rgba(16,24,32,.85);


color:var(--gold);

font-size:1.5rem;

display:flex;

align-items:center;

justify-content:center;


cursor:pointer;


opacity:0;

visibility:hidden;


transform:

translateY(20px);


transition:.4s ease;


z-index:999;


backdrop-filter:blur(10px);

-webkit-backdrop-filter:blur(10px);

}



#backToTop.show{

opacity:1;

visibility:visible;

transform:none;

}



#backToTop:hover{

background:var(--gold);

color:var(--night);


box-shadow:

0 0 30px rgba(200,169,107,.5);

}





/* =========================================
FOOTER
========================================= */


footer{

background:#080d12;

color:white;

text-align:center;

padding:80px 20px;

}



footer h2{

font-family:

"Cormorant Garamond",
serif;


font-size:4rem;

color:var(--gold);

}



footer p{

letter-spacing:4px;

font-size:.8rem;

}





/* =========================================
TABLET
========================================= */


@media(max-width:1100px){


.cards,
.place-grid,
.taste-grid,
.stay-grid,
.timeline,
.transport-grid,
.food-items{


grid-template-columns:

repeat(2,1fr);

}



.map-layout{

grid-template-columns:1fr;

}



}





/* =========================================
MOBILE
========================================= */


@media(max-width:900px){



.header{

height:75px;

padding:0 6%;

}



.logo{

font-size:1.7rem;

}



nav{

position:absolute;

top:75px;

left:0;

width:100%;

background:

rgba(16,24,32,.97);


display:none;

flex-direction:column;

align-items:center;

padding:40px 20px;

gap:25px;

}



nav.active{

display:flex;

}



.menu-toggle{

display:block;

}



.hero{

background-attachment:scroll;

min-height:850px;

}



.hero h1{

font-size:

clamp(3rem,14vw,5rem);

}



.hero-text{

font-size:1rem;

}



.hero-info{

bottom:20px;

width:90%;

flex-direction:column;

gap:10px;

}



.hero-info div{

min-width:auto;

padding:15px;

}



.section{

padding:

80px 6%;

}



.section-title{

margin-bottom:45px;

}



.section-title h2{

font-size:2.8rem;

}



.intro-grid,
.cards,
.place-grid,
.taste-grid,
.stay-grid,
.transport-grid,
.timeline,
.facts,
.food-items,
.distance{


grid-template-columns:

1fr;

}



.place-image,
.taste-image,
.stay-image{

height:250px;

}



.map-box{

height:400px;

}



.coffee{

min-height:500px;

}



.coffee-content{

padding:25px;

}



.language-switcher,
.scroll-indicator{

display:none;

}



.pdf-button{

display:block;

margin:20px auto 0;

width:max-content;

}



footer h2{

font-size:3rem;

}



#backToTop{

right:20px;

bottom:20px;

width:48px;

height:48px;

}



}





/* =========================================
SMALL MOBILE
========================================= */


@media(max-width:480px){



.hero{

min-height:900px;

}



.hero h1 span{

display:block;

margin-top:15px;

}



.section-title h2{

font-size:2.4rem;

}



.location-pin{

transform:scale(.85);

}



}





/* =========================================
REDUCED MOTION
========================================= */


@media(prefers-reduced-motion:reduce){


*,
*::before,
*::after{


animation-duration:.01ms!important;

animation-iteration-count:1!important;

transition-duration:.01ms!important;

scroll-behavior:auto!important;


}



}