/* From about.html */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
:root { --sand:#f5ede0;--terracotta:#c06f3a;--deep:#1a1208;--accent:#e8b96a;--light:#fdf8f2; }
body { font-family:'Lato',sans-serif; background:var(--light); color:var(--deep); line-height:1.8; }
nav { background:rgba(26,18,8,0.97); display:flex; align-items:center; justify-content:space-between; padding:0 5%; height:64px; }
.hero-about {
background: linear-gradient(135deg, #1a1208, #3a2010);
padding: 6rem 5%; text-align:center; color:#fff;
}
.label { font-size:0.75rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--accent); margin-bottom:0.8rem; }
.hero-about h1 { font-family:'Playfair Display',serif; font-size:clamp(2rem,5vw,3.5rem); margin-bottom:1rem; }
.hero-about p { max-width:600px; margin:0 auto; color:rgba(255,255,255,0.7); font-size:1.1rem; }
.content { max-width:900px; margin:0 auto; padding:4rem 5%; }
h2 { font-family:'Playfair Display',serif; font-size:1.8rem; color:var(--deep); margin:2.5rem 0 1rem; }
p { margin-bottom:1rem; color:#444; }
.values-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1.5rem; margin:2rem 0; }
.value-card { background:#fff; border-radius:8px; padding:1.8rem; box-shadow:0 2px 12px rgba(0,0,0,0.07); border-top:3px solid var(--terracotta); }
.value-card .icon { font-size:2rem; margin-bottom:0.8rem; }
.value-card h3 { font-family:'Playfair Display',serif; color:var(--deep); margin-bottom:0.5rem; }
.value-card p { font-size:0.9rem; margin:0; }
.team-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1.5rem; margin:2rem 0; }
.team-card { text-align:center; background:#fff; border-radius:8px; padding:2rem 1.5rem; box-shadow:0 2px 12px rgba(0,0,0,0.07); }
.team-avatar { width:80px; height:80px; border-radius:50%; margin:0 auto 1rem; display:flex; align-items:center; justify-content:center; font-size:2rem; }
.team-card h3 { font-family:'Playfair Display',serif; font-size:1.1rem; margin-bottom:0.3rem; }
.team-card .role { font-size:0.8rem; color:var(--terracotta); letter-spacing:0.1em; text-transform:uppercase; margin-bottom:0.7rem; }
.team-card p { font-size:0.85rem; color:#666; }
.cta-box { background:var(--terracotta); color:#fff; border-radius:8px; padding:3rem; text-align:center; margin:3rem 0; }
.cta-box h2 { color:#fff; margin:0 0 1rem; }
.cta-box a { display:inline-block; background:#fff; color:var(--terracotta); padding:12px 28px; border-radius:4px; text-decoration:none; font-weight:700; margin-top:1rem; }
nav { position: sticky; top: 0; z-index: 100; background: rgba(26,18,8,0.97); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: space-between; padding: 0 5%; height: 64px; }
.nav-logo { font-family: 'Playfair Display', serif; font-size: 1.4rem; color: var(--accent); text-decoration: none; font-weight: 700; }
.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a { color: #ddd; text-decoration: none; font-size: 0.9rem; letter-spacing: 0.06em; text-transform: uppercase; transition: color 0.2s; }
.nav-links a:hover, .nav-links a.active { color: var(--accent); }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
.hamburger span { width: 24px; height: 2px; background: #ddd; display: block; transition: 0.3s; }
@media (max-width: 768px) {
.hamburger { display: flex; }
.nav-links { display: none; position: absolute; top: 64px; left: 0; right: 0; background: rgba(26,18,8,0.98); flex-direction: column; padding: 1.5rem 5%; gap: 1rem; z-index: 99; }
.nav-links.open { display: flex; }
}
footer { background: var(--deep); color: rgba(255,255,255,0.6); font-size: 0.88rem; margin-top: 4rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; padding: 3.5rem 5% 2.5rem; }
.footer-logo { font-family: 'Playfair Display', serif; font-size: 1.5rem; color: var(--accent); font-weight: 700; display: block; margin-bottom: 1rem; }
.footer-grid > div > p { line-height: 1.7; color: rgba(255,255,255,0.5); max-width: 280px; }
.footer-col h4 { color: #fff; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 1.2rem; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.footer-col ul a { color: rgba(255,255,255,0.55); text-decoration: none; transition: color 0.2s; }
.footer-col ul a:hover { color: var(--accent); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding: 1.2rem 5%; display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; }
.footer-bottom a { color: rgba(255,255,255,0.4); text-decoration: none; margin-left: 1.5rem; transition: color 0.2s; }
.footer-bottom a:hover { color: var(--accent); }
@media (max-width: 768px) {
.footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
.footer-bottom { flex-direction: column; gap: 0.8rem; text-align: center; }
}
@media (max-width: 480px) {
.footer-grid { grid-template-columns: 1fr; }
}
/* From checklista-prije-leta.html */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--terracotta: #c06f3a;
--deep: #1a1208;
--accent: #e8b96a;
--light: #fdf8f2;
--line: rgba(26,18,8,0.08);
}
body { font-family: 'Lato', sans-serif; background: var(--light); color: var(--deep); line-height: 1.8; }
nav { position: sticky; top: 0; z-index: 100; background: rgba(26,18,8,0.97); backdrop-filter: blur(8px); display:flex; align-items:center; justify-content:space-between; padding:0 5%; height:64px; }
.nav-logo { font-family:'Playfair Display',serif; font-size:1.4rem; color:var(--accent); text-decoration:none; font-weight:700; }
.nav-links { display:flex; gap:2rem; list-style:none; }
.nav-links a { color:#ddd; text-decoration:none; font-size:0.9rem; letter-spacing:0.06em; text-transform:uppercase; }
.hero { padding: 4.5rem 5% 3rem; background: linear-gradient(135deg, #133042, #3d2416); color:#fff; }
.hero-grid { max-width: 1120px; margin: 0 auto; display:grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; }
.hero img { width:100%; border-radius:16px; display:block; box-shadow:0 16px 42px rgba(0,0,0,0.2); }
.eyebrow { display:inline-block; font-size:0.75rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--accent); margin-bottom:1rem; }
h1 { font-family:'Playfair Display',serif; font-size:clamp(2.2rem,4.8vw,3.8rem); line-height:1.08; margin-bottom:1rem; }
.hero p { color:rgba(255,255,255,0.8); max-width:560px; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 2rem 5% 4rem; }
.layout { display:grid; grid-template-columns: 1fr 300px; gap: 2rem; }
.panel { background:#fff; border:1px solid var(--line); border-radius:16px; padding:1.6rem; box-shadow:0 10px 26px rgba(0,0,0,0.05); }
h2 { font-family:'Playfair Display',serif; font-size:1.65rem; margin: 1.6rem 0 0.8rem; }
h2:first-child { margin-top: 0; }
.checklist { list-style:none; display:grid; gap:0.8rem; margin-top:1rem; }
.checklist li { background:#faf5ee; border:1px solid rgba(192,111,58,0.12); border-radius:12px; padding:0.9rem 1rem; }
.tip { background:#fff8ee; border-left:4px solid var(--terracotta); border-radius:12px; padding:1rem 1.1rem; margin:1rem 0; }
.side-card { background:#fff; border:1px solid var(--line); border-radius:16px; padding:1.2rem; box-shadow:0 10px 24px rgba(0,0,0,0.05); margin-bottom:1rem; }
.side-card h3 { font-family:'Playfair Display',serif; margin-bottom:0.8rem; }
.side-card ul { list-style:none; display:flex; flex-direction:column; gap:0.7rem; }
.side-card a { color:var(--terracotta); text-decoration:none; font-weight:700; }
footer { background: var(--deep); color: rgba(255,255,255,0.58); padding: 3rem 5% 2rem; margin-top: 4rem; }
.footer-grid { max-width:1120px; margin:0 auto; display:grid; grid-template-columns: 2fr 1fr 1fr; gap:2rem; }
.footer-logo { font-family:'Playfair Display',serif; font-size:1.45rem; color:var(--accent); margin-bottom:1rem; display:block; }
.footer-col h4 { color:#fff; font-size:0.75rem; letter-spacing:0.12em; text-transform:uppercase; margin-bottom:1rem; }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:0.6rem; }
.footer-col a { color:rgba(255,255,255,0.55); text-decoration:none; }
.footer-bottom { max-width:1120px; margin:2rem auto 0; border-top:1px solid rgba(255,255,255,0.08); padding-top:1rem; font-size:0.82rem; }
@media (max-width: 900px) { .hero-grid, .layout, .footer-grid { grid-template-columns:1fr; } }
@media (max-width: 680px) { .nav-links { display:none; } }
/* From clanaci.html */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--terracotta: #c06f3a;
--deep: #1a1208;
--warm: #7a4f2b;
--accent: #e8b96a;
--light: #fdf8f2;
--panel: #fff;
--muted: #6f675f;
--line: rgba(26,18,8,0.08);
}
body {
font-family: 'Lato', sans-serif;
background: var(--light);
color: var(--deep);
line-height: 1.7;
}
nav {
position: sticky;
top: 0;
z-index: 100;
background: rgba(26,18,8,0.97);
backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 5%;
height: 64px;
}
.nav-logo {
font-family: 'Playfair Display', serif;
font-size: 1.4rem;
color: var(--accent);
text-decoration: none;
font-weight: 700;
}
.nav-links {
display: flex;
gap: 2rem;
list-style: none;
}
.nav-links a {
color: #ddd;
text-decoration: none;
font-size: 0.9rem;
letter-spacing: 0.06em;
text-transform: uppercase;
transition: color 0.2s;
}
.nav-links a:hover,
.nav-links a.active { color: var(--accent); }
.hamburger {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
padding: 4px;
}
.hamburger span {
width: 24px;
height: 2px;
background: #ddd;
display: block;
}
.hero {
background: linear-gradient(140deg, #12283a 0%, #24321f 45%, #442717 100%);
color: #fff;
padding: 5.5rem 5% 4rem;
position: relative;
overflow: hidden;
}
.hero::before {
content: "";
position: absolute;
inset: 0;
opacity: 0.08;
background-image: radial-gradient(circle, #fff 1px, transparent 1px);
background-size: 36px 36px;
}
.hero-inner {
position: relative;
z-index: 2;
max-width: 760px;
}
.eyebrow {
display: inline-block;
font-size: 0.75rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 1rem;
}
.hero h1 {
font-family: 'Playfair Display', serif;
font-size: clamp(2.4rem, 5vw, 4.1rem);
line-height: 1.08;
margin-bottom: 1rem;
}
.hero p {
max-width: 620px;
color: rgba(255,255,255,0.78);
font-size: 1.05rem;
}
.hero-actions {
margin-top: 2rem;
display: flex;
gap: 0.9rem;
flex-wrap: wrap;
}
.btn {
display: inline-block;
text-decoration: none;
border-radius: 4px;
padding: 13px 24px;
font-size: 0.88rem;
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 700;
}
.btn-primary {
background: var(--terracotta);
color: #fff;
}
.btn-outline {
color: #fff;
border: 1px solid rgba(255,255,255,0.38);
}
.strip {
background: var(--terracotta);
color: #fff;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
padding: 1.15rem 5%;
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.75rem;
}
section { padding: 4.5rem 5%; }
.section-head {
max-width: 760px;
margin-bottom: 2rem;
}
.section-label {
font-size: 0.75rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--terracotta);
margin-bottom: 0.6rem;
}
.section-title {
font-family: 'Playfair Display', serif;
font-size: clamp(1.7rem, 3.8vw, 2.7rem);
line-height: 1.15;
margin-bottom: 0.8rem;
}
.section-sub {
color: var(--muted);
max-width: 620px;
}
.cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.4rem;
}
.card {
text-decoration: none;
color: inherit;
background: var(--panel);
border-radius: 12px;
border: 1px solid var(--line);
box-shadow: 0 8px 26px rgba(0,0,0,0.05);
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 14px 34px rgba(0,0,0,0.1);
}
.card-top {
min-height: 132px;
padding: 1.2rem 1.2rem 1rem;
color: #fff;
display: flex;
align-items: flex-end;
background: linear-gradient(135deg, #1d4862 0%, #274124 100%);
}
.card-top.alt-1 { background: linear-gradient(135deg, #314f7a 0%, #1b2744 100%); }
.card-top.alt-2 { background: linear-gradient(135deg, #7a4f2b 0%, #3f2411 100%); }
.card-top.alt-3 { background: linear-gradient(135deg, #6b5f2a 0%, #303b18 100%); }
.card-kicker {
display: inline-block;
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
opacity: 0.84;
margin-bottom: 0.7rem;
}
.card-top h3 {
font-family: 'Playfair Display', serif;
font-size: 1.25rem;
line-height: 1.24;
}
.card-body {
padding: 1.2rem;
display: flex;
flex-direction: column;
gap: 0.9rem;
flex: 1;
}
.meta {
font-size: 0.78rem;
color: #8b8279;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.card-body p {
color: #5d554e;
font-size: 0.95rem;
flex: 1;
}
.more {
color: var(--terracotta);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.editorial-box {
background: #fff8ef;
border: 1px solid rgba(192,111,58,0.16);
border-left: 4px solid var(--terracotta);
border-radius: 10px;
padding: 1.5rem;
margin-top: 2rem;
max-width: 900px;
}
.editorial-box p { color: #5f5448; }
.editorial-box a {
color: var(--terracotta);
text-decoration: none;
font-weight: 700;
}
.cta-panel {
background: var(--deep);
color: #fff;
border-radius: 14px;
padding: 2rem;
display: grid;
grid-template-columns: 1.3fr 0.7fr;
gap: 1.5rem;
align-items: center;
}
.cta-panel h2 {
font-family: 'Playfair Display', serif;
font-size: clamp(1.6rem, 3.2vw, 2.3rem);
margin-bottom: 0.8rem;
}
.cta-panel p { color: rgba(255,255,255,0.7); }
.cta-actions {
display: flex;
justify-content: flex-end;
gap: 0.8rem;
flex-wrap: wrap;
}
footer {
background: var(--deep);
color: rgba(255,255,255,0.58);
padding: 3rem 5% 2rem;
margin-top: 4rem;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 2.2rem;
margin-bottom: 2rem;
}
.footer-logo {
font-family: 'Playfair Display', serif;
font-size: 1.4rem;
color: var(--accent);
display: block;
margin-bottom: 0.8rem;
}
.footer-col h4 {
color: #fff;
font-size: 0.78rem;
letter-spacing: 0.15em;
text-transform: uppercase;
margin-bottom: 0.9rem;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 0.45rem; }
.footer-col a,
.footer-bottom a {
color: rgba(255,255,255,0.58);
text-decoration: none;
}
.footer-col a:hover,
.footer-bottom a:hover { color: var(--accent); }
.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.08);
padding-top: 1.3rem;
display: flex;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
font-size: 0.82rem;
}
@media (max-width: 980px) {
.cards,
.cta-panel { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
.hamburger { display: flex; }
.nav-links {
display: none;
position: absolute;
top: 64px;
left: 0;
right: 0;
background: rgba(26,18,8,0.98);
flex-direction: column;
padding: 1.4rem 5%;
gap: 1rem;
}
.nav-links.open { display: flex; }
.strip,
.cards,
.cta-panel,
.footer-grid { grid-template-columns: 1fr; }
.cta-actions { justify-content: flex-start; }
}
/* From clanak-bali.html */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--terracotta:#c06f3a;--deep:#1a1208;--accent:#e8b96a;--light:#fdf8f2}
body{font-family:'Lato',sans-serif;background:var(--light);color:var(--deep);line-height:1.8}
.article-hero{height:52vh;min-height:360px;background:linear-gradient(135deg,#4a8f2a,#1a4a0a);display:flex;align-items:flex-end;padding:3rem 5%}
.cat-tag{display:inline-block;background:rgba(255,255,255,0.15);color:#fff;font-size:0.72rem;letter-spacing:0.15em;text-transform:uppercase;padding:4px 12px;border-radius:3px;margin-bottom:1rem}
.article-hero h1{font-family:'Playfair Display',serif;font-size:clamp(1.8rem,4vw,2.8rem);color:#fff;line-height:1.2;margin-bottom:1rem;max-width:800px}
.article-meta{font-size:0.82rem;color:rgba(255,255,255,0.65)}
.article-meta span{margin-right:1.5rem}
.layout{display:grid;grid-template-columns:1fr 280px;gap:3rem;max-width:1100px;margin:0 auto;padding:3rem 5%}
.article-body h2{font-family:'Playfair Display',serif;font-size:1.7rem;color:var(--deep);margin:2.5rem 0 1rem;border-top:2px solid var(--accent);padding-top:0.8rem}
.article-body h3{font-family:'Playfair Display',serif;font-size:1.2rem;color:var(--deep);margin:1.5rem 0 0.5rem}
.article-body p{color:#444;margin-bottom:1.2rem;font-size:1rem}
.article-body ul{margin:1rem 0 1.5rem 1.5rem;color:#444}
.article-body li{margin-bottom:0.5rem}
.article-body strong{color:var(--deep)}
.tip-box{background:#fff8ee;border-left:4px solid var(--accent);padding:1.2rem 1.5rem;border-radius:0 6px 6px 0;margin:1.5rem 0}
.tip-box strong{color:var(--terracotta)}
.info-table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:0.9rem}
.info-table th{background:var(--deep);color:#fff;text-align:left;padding:10px 14px;font-size:0.8rem;letter-spacing:0.08em;text-transform:uppercase}
.info-table td{padding:10px 14px;border-bottom:1px solid #eee}
.info-table tr:nth-child(even) td{background:#faf6f0}
.sidebar-widget{background:#fff;border-radius:8px;padding:1.5rem;box-shadow:0 2px 12px rgba(0,0,0,0.07);margin-bottom:1.5rem}
.sidebar-widget h3{font-family:'Playfair Display',serif;font-size:1.1rem;margin-bottom:1rem;padding-bottom:0.5rem;border-bottom:2px solid var(--accent)}
.related-item{display:flex;gap:0.8rem;margin-bottom:1rem;text-decoration:none;color:inherit;align-items:flex-start}
.related-thumb{width:60px;height:55px;border-radius:4px;flex-shrink:0}
.related-item h4{font-size:0.85rem;line-height:1.4;color:var(--deep)}
@media(max-width:768px){.layout{grid-template-columns:1fr}}
/* === HERO IMAGE === */
.article-hero {
position: relative !important;
overflow: hidden !important;
}
.hero-bg-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
filter: brightness(0.45);
}
.hero-content {
position: relative;
z-index: 2;
}
/* remove old background gradient when image loads */
.article-hero.has-img {
background: #111 !important;
}
/* === INLINE IMAGES === */
.story-img {
margin: 2.5rem 0;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}
.story-img img {
width: 100%;
height: 300px;
object-fit: cover;
display: block;
}
.story-img figcaption {
font-size: 0.8rem;
color: #888;
padding: 0.6rem 1rem;
background: #faf6f0;
font-style: italic;
border-left: 3px solid var(--accent, #e8b96a);
}
nav { position: sticky; top: 0; z-index: 100; background: rgba(26,18,8,0.97); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: space-between; padding: 0 5%; height: 64px; }
.nav-logo { font-family: 'Playfair Display', serif; font-size: 1.4rem; color: var(--accent); text-decoration: none; font-weight: 700; }
.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a { color: #ddd; text-decoration: none; font-size: 0.9rem; letter-spacing: 0.06em; text-transform: uppercase; transition: color 0.2s; }
.nav-links a:hover, .nav-links a.active { color: var(--accent); }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
.hamburger span { width: 24px; height: 2px; background: #ddd; display: block; transition: 0.3s; }
@media (max-width: 768px) {
.hamburger { display: flex; }
.nav-links { display: none; position: absolute; top: 64px; left: 0; right: 0; background: rgba(26,18,8,0.98); flex-direction: column; padding: 1.5rem 5%; gap: 1rem; z-index: 99; }
.nav-links.open { display: flex; }
}
footer { background: var(--deep); color: rgba(255,255,255,0.6); font-size: 0.88rem; margin-top: 4rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; padding: 3.5rem 5% 2.5rem; }
.footer-logo { font-family: 'Playfair Display', serif; font-size: 1.5rem; color: var(--accent); font-weight: 700; display: block; margin-bottom: 1rem; }
.footer-grid > div > p { line-height: 1.7; color: rgba(255,255,255,0.5); max-width: 280px; }
.footer-col h4 { color: #fff; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 1.2rem; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.footer-col ul a { color: rgba(255,255,255,0.55); text-decoration: none; transition: color 0.2s; }
.footer-col ul a:hover { color: var(--accent); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding: 1.2rem 5%; display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; }
.footer-bottom a { color: rgba(255,255,255,0.4); text-decoration: none; margin-left: 1.5rem; transition: color 0.2s; }
.footer-bottom a:hover { color: var(--accent); }
@media (max-width: 768px) {
.footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
.footer-bottom { flex-direction: column; gap: 0.8rem; text-align: center; }
}
@media (max-width: 480px) {
.footer-grid { grid-template-columns: 1fr; }
}
/* From clanak-bangkok.html */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--terracotta:#c06f3a;--deep:#1a1208;--accent:#e8b96a;--light:#fdf8f2}
body{font-family:'Lato',sans-serif;background:var(--light);color:var(--deep);line-height:1.8}
.article-hero{height:52vh;min-height:360px;display:flex;align-items:flex-end;padding:3rem 5%}
.cat-tag{display:inline-block;background:rgba(255,255,255,0.15);color:#fff;font-size:0.72rem;letter-spacing:0.15em;text-transform:uppercase;padding:4px 12px;border-radius:3px;margin-bottom:1rem}
.article-hero h1{font-family:'Playfair Display',serif;font-size:clamp(1.8rem,4vw,2.8rem);color:#fff;line-height:1.2;margin-bottom:1rem;max-width:800px}
.article-meta{font-size:0.82rem;color:rgba(255,255,255,0.65)}
.article-meta span{margin-right:1.5rem}
.layout{display:grid;grid-template-columns:1fr 280px;gap:3rem;max-width:1100px;margin:0 auto;padding:3rem 5%}
.article-body h2{font-family:'Playfair Display',serif;font-size:1.7rem;color:var(--deep);margin:2.5rem 0 1rem;border-top:2px solid var(--accent);padding-top:0.8rem}
.article-body h3{font-family:'Playfair Display',serif;font-size:1.2rem;color:var(--deep);margin:1.5rem 0 0.5rem}
.article-body p{color:#444;margin-bottom:1.2rem;font-size:1rem}
.article-body ul,.article-body ol{margin:1rem 0 1.5rem 1.5rem;color:#444}
.article-body li{margin-bottom:0.6rem}
.article-body strong{color:var(--deep)}
.tip-box{background:#fff8ee;border-left:4px solid var(--accent);padding:1.2rem 1.5rem;border-radius:0 6px 6px 0;margin:1.5rem 0}
.tip-box strong{color:var(--terracotta)}
.info-table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:0.9rem}
.info-table th{background:var(--deep);color:#fff;text-align:left;padding:10px 14px;font-size:0.8rem;letter-spacing:0.08em;text-transform:uppercase}
.info-table td{padding:10px 14px;border-bottom:1px solid #eee}
.info-table tr:nth-child(even) td{background:#faf6f0}
.sidebar-widget{background:#fff;border-radius:8px;padding:1.5rem;box-shadow:0 2px 12px rgba(0,0,0,0.07);margin-bottom:1.5rem}
.sidebar-widget h3{font-family:'Playfair Display',serif;font-size:1.1rem;margin-bottom:1rem;padding-bottom:0.5rem;border-bottom:2px solid var(--accent)}
.related-item{display:flex;gap:0.8rem;margin-bottom:1rem;text-decoration:none;color:inherit;align-items:flex-start}
.related-thumb{width:60px;height:55px;border-radius:4px;flex-shrink:0}
.related-item h4{font-size:0.85rem;line-height:1.4;color:var(--deep)}
@media(max-width:768px){.layout{grid-template-columns:1fr}}
.article-hero {
position: relative;
overflow: hidden;
}
.article-hero > div {
position: relative;
z-index: 2;
}
.inline-img-wrap img {
width: 100%;
height: 320px;
object-fit: cover;
display: block;
}
/* === HERO IMAGE === */
.article-hero {
position: relative !important;
overflow: hidden !important;
}
.hero-bg-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
filter: brightness(0.45);
}
.hero-content {
position: relative;
z-index: 2;
}
/* remove old background gradient when image loads */
.article-hero.has-img {
background: #111 !important;
}
/* === INLINE IMAGES === */
.story-img {
margin: 2.5rem 0;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}
.story-img img {
width: 100%;
height: 300px;
object-fit: cover;
display: block;
}
.story-img figcaption {
font-size: 0.8rem;
color: #888;
padding: 0.6rem 1rem;
background: #faf6f0;
font-style: italic;
border-left: 3px solid var(--accent, #e8b96a);
}
nav { position: sticky; top: 0; z-index: 100; background: rgba(26,18,8,0.97); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: space-between; padding: 0 5%; height: 64px; }
.nav-logo { font-family: 'Playfair Display', serif; font-size: 1.4rem; color: var(--accent); text-decoration: none; font-weight: 700; }
.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a { color: #ddd; text-decoration: none; font-size: 0.9rem; letter-spacing: 0.06em; text-transform: uppercase; transition: color 0.2s; }
.nav-links a:hover, .nav-links a.active { color: var(--accent); }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
.hamburger span { width: 24px; height: 2px; background: #ddd; display: block; transition: 0.3s; }
@media (max-width: 768px) {
.hamburger { display: flex; }
.nav-links { display: none; position: absolute; top: 64px; left: 0; right: 0; background: rgba(26,18,8,0.98); flex-direction: column; padding: 1.5rem 5%; gap: 1rem; z-index: 99; }
.nav-links.open { display: flex; }
}
footer { background: var(--deep); color: rgba(255,255,255,0.6); font-size: 0.88rem; margin-top: 4rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; padding: 3.5rem 5% 2.5rem; }
.footer-logo { font-family: 'Playfair Display', serif; font-size: 1.5rem; color: var(--accent); font-weight: 700; display: block; margin-bottom: 1rem; }
.footer-grid > div > p { line-height: 1.7; color: rgba(255,255,255,0.5); max-width: 280px; }
.footer-col h4 { color: #fff; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 1.2rem; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.footer-col ul a { color: rgba(255,255,255,0.55); text-decoration: none; transition: color 0.2s; }
.footer-col ul a:hover { color: var(--accent); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding: 1.2rem 5%; display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; }
.footer-bottom a { color: rgba(255,255,255,0.4); text-decoration: none; margin-left: 1.5rem; transition: color 0.2s; }
.footer-bottom a:hover { color: var(--accent); }
@media (max-width: 768px) {
.footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
.footer-bottom { flex-direction: column; gap: 0.8rem; text-align: center; }
}
@media (max-width: 480px) {
.footer-grid { grid-template-columns: 1fr; }
}
/* From clanak-bosna.html */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--terracotta:#c06f3a;--deep:#1a1208;--accent:#e8b96a;--light:#fdf8f2}
body{font-family:'Lato',sans-serif;background:var(--light);color:var(--deep);line-height:1.8}
.article-hero{height:52vh;min-height:360px;background:linear-gradient(135deg,#2a6e3a,#0d3a1a);display:flex;align-items:flex-end;padding:3rem 5%}
.cat-tag{display:inline-block;background:rgba(255,255,255,0.15);color:#fff;font-size:0.72rem;letter-spacing:0.15em;text-transform:uppercase;padding:4px 12px;border-radius:3px;margin-bottom:1rem}
.article-hero h1{font-family:'Playfair Display',serif;font-size:clamp(1.8rem,4vw,2.8rem);color:#fff;line-height:1.2;margin-bottom:1rem;max-width:800px}
.article-meta{font-size:0.82rem;color:rgba(255,255,255,0.65)}
.article-meta span{margin-right:1.5rem}
.layout{display:grid;grid-template-columns:1fr 280px;gap:3rem;max-width:1100px;margin:0 auto;padding:3rem 5%}
.article-body h2{font-family:'Playfair Display',serif;font-size:1.7rem;color:var(--deep);margin:2.5rem 0 1rem;border-top:2px solid var(--accent);padding-top:0.8rem}
.article-body h3{font-family:'Playfair Display',serif;font-size:1.2rem;color:var(--deep);margin:1.5rem 0 0.5rem}
.article-body p{color:#444;margin-bottom:1.2rem;font-size:1rem}
.article-body ul{margin:1rem 0 1.5rem 1.5rem;color:#444}
.article-body li{margin-bottom:0.6rem}
.article-body strong{color:var(--deep)}
.tip-box{background:#fff8ee;border-left:4px solid var(--accent);padding:1.2rem 1.5rem;border-radius:0 6px 6px 0;margin:1.5rem 0}
.tip-box strong{color:var(--terracotta)}
.reasons-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.2rem;margin:1.5rem 0}
.reason-card{background:#fff;border-radius:8px;padding:1.5rem;box-shadow:0 2px 10px rgba(0,0,0,0.07);border-left:4px solid var(--terracotta)}
.reason-num{font-family:'Playfair Display',serif;font-size:2rem;color:var(--accent);line-height:1;margin-bottom:0.4rem}
.reason-card h3{margin:0 0 0.5rem;font-family:'Playfair Display',serif;font-size:1.05rem;color:var(--deep)}
.reason-card p{margin:0;font-size:0.88rem;color:#555}
.info-table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:0.9rem}
.info-table th{background:var(--deep);color:#fff;text-align:left;padding:10px 14px;font-size:0.8rem;letter-spacing:0.08em;text-transform:uppercase}
.info-table td{padding:10px 14px;border-bottom:1px solid #eee}
.info-table tr:nth-child(even) td{background:#faf6f0}
.sidebar-widget{background:#fff;border-radius:8px;padding:1.5rem;box-shadow:0 2px 12px rgba(0,0,0,0.07);margin-bottom:1.5rem}
.sidebar-widget h3{font-family:'Playfair Display',serif;font-size:1.1rem;margin-bottom:1rem;padding-bottom:0.5rem;border-bottom:2px solid var(--accent)}
.related-item{display:flex;gap:0.8rem;margin-bottom:1rem;text-decoration:none;color:inherit;align-items:flex-start}
.related-thumb{width:60px;height:55px;border-radius:4px;flex-shrink:0}
.related-item h4{font-size:0.85rem;line-height:1.4;color:var(--deep)}
@media(max-width:768px){.layout{grid-template-columns:1fr}}
.article-hero {
position: relative;
overflow: hidden;
}
.article-hero > div {
position: relative;
z-index: 2;
}
.inline-img-wrap img {
width: 100%;
height: 320px;
object-fit: cover;
display: block;
}
/* === HERO IMAGE === */
.article-hero {
position: relative !important;
overflow: hidden !important;
}
.hero-bg-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
filter: brightness(0.45);
}
.hero-content {
position: relative;
z-index: 2;
}
/* remove old background gradient when image loads */
.article-hero.has-img {
background: #111 !important;
}
/* === INLINE IMAGES === */
.story-img {
margin: 2.5rem 0;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}
.story-img img {
width: 100%;
height: 300px;
object-fit: cover;
display: block;
}
.story-img figcaption {
font-size: 0.8rem;
color: #888;
padding: 0.6rem 1rem;
background: #faf6f0;
font-style: italic;
border-left: 3px solid var(--accent, #e8b96a);
}
nav { position: sticky; top: 0; z-index: 100; background: rgba(26,18,8,0.97); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: space-between; padding: 0 5%; height: 64px; }
.nav-logo { font-family: 'Playfair Display', serif; font-size: 1.4rem; color: var(--accent); text-decoration: none; font-weight: 700; }
.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a { color: #ddd; text-decoration: none; font-size: 0.9rem; letter-spacing: 0.06em; text-transform: uppercase; transition: color 0.2s; }
.nav-links a:hover, .nav-links a.active { color: var(--accent); }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
.hamburger span { width: 24px; height: 2px; background: #ddd; display: block; transition: 0.3s; }
@media (max-width: 768px) {
.hamburger { display: flex; }
.nav-links { display: none; position: absolute; top: 64px; left: 0; right: 0; background: rgba(26,18,8,0.98); flex-direction: column; padding: 1.5rem 5%; gap: 1rem; z-index: 99; }
.nav-links.open { display: flex; }
}
footer { background: var(--deep); color: rgba(255,255,255,0.6); font-size: 0.88rem; margin-top: 4rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; padding: 3.5rem 5% 2.5rem; }
.footer-logo { font-family: 'Playfair Display', serif; font-size: 1.5rem; color: var(--accent); font-weight: 700; display: block; margin-bottom: 1rem; }
.footer-grid > div > p { line-height: 1.7; color: rgba(255,255,255,0.5); max-width: 280px; }
.footer-col h4 { color: #fff; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 1.2rem; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.footer-col ul a { color: rgba(255,255,255,0.55); text-decoration: none; transition: color 0.2s; }
.footer-col ul a:hover { color: var(--accent); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding: 1.2rem 5%; display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; }
.footer-bottom a { color: rgba(255,255,255,0.4); text-decoration: none; margin-left: 1.5rem; transition: color 0.2s; }
.footer-bottom a:hover { color: var(--accent); }
@media (max-width: 768px) {
.footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
.footer-bottom { flex-direction: column; gap: 0.8rem; text-align: center; }
}
@media (max-width: 480px) {
.footer-grid { grid-template-columns: 1fr; }
}
/* From clanak-budzetno-putovanje.html */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--terracotta:#c06f3a;--deep:#1a1208;--accent:#e8b96a;--light:#fdf8f2}
body{font-family:'Lato',sans-serif;background:var(--light);color:var(--deep);line-height:1.8}
.article-hero{height:52vh;min-height:360px;background:linear-gradient(135deg,#1a4a6e 0%,#0d2a3a 60%,#071520 100%);display:flex;align-items:flex-end;padding:3rem 5%;position:relative;overflow:hidden}
.article-hero::before{content:'';position:absolute;inset:0;opacity:0.06;background-image:radial-gradient(circle,#fff 1px,transparent 1px);background-size:35px 35px}
.hero-content{position:relative;z-index:2;max-width:800px}
.cat-tag{display:inline-block;background:rgba(255,255,255,0.15);color:#fff;font-size:0.72rem;letter-spacing:0.15em;text-transform:uppercase;padding:4px 12px;border-radius:3px;margin-bottom:1rem}
.article-hero h1{font-family:'Playfair Display',serif;font-size:clamp(1.8rem,4vw,2.8rem);color:#fff;line-height:1.2;margin-bottom:1rem}
.article-meta{font-size:0.82rem;color:rgba(255,255,255,0.65)}
.article-meta span{margin-right:1.5rem}
.layout{display:grid;grid-template-columns:1fr 280px;gap:3rem;max-width:1100px;margin:0 auto;padding:3rem 5%}
.article-body h2{font-family:'Playfair Display',serif;font-size:1.7rem;color:var(--deep);margin:2.5rem 0 1rem;border-top:2px solid var(--accent);padding-top:0.8rem}
.article-body h3{font-family:'Playfair Display',serif;font-size:1.2rem;color:var(--deep);margin:1.5rem 0 0.5rem}
.article-body p{color:#444;margin-bottom:1.2rem;font-size:1rem}
.article-body ul,.article-body ol{margin:1rem 0 1.5rem 1.5rem;color:#444}
.article-body li{margin-bottom:0.5rem}
.article-body strong{color:var(--deep)}
.tip-box{background:#fff8ee;border-left:4px solid var(--accent);padding:1.2rem 1.5rem;border-radius:0 6px 6px 0;margin:1.5rem 0}
.tip-box strong{color:var(--terracotta)}
.info-table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:0.9rem}
.info-table th{background:var(--deep);color:#fff;text-align:left;padding:10px 14px;font-weight:400;font-size:0.8rem;letter-spacing:0.08em;text-transform:uppercase}
.info-table td{padding:10px 14px;border-bottom:1px solid #eee;vertical-align:top}
.info-table tr:nth-child(even) td{background:#faf6f0}
.breadcrumb{font-size:0.82rem;color:#999;padding:1rem 5%;max-width:1100px;margin:0 auto}
.breadcrumb a{color:var(--terracotta);text-decoration:none}
.sidebar-widget{background:#fff;border-radius:8px;padding:1.5rem;box-shadow:0 2px 12px rgba(0,0,0,0.07);margin-bottom:1.5rem}
.sidebar-widget h3{font-family:'Playfair Display',serif;font-size:1.1rem;color:var(--deep);margin-bottom:1rem;padding-bottom:0.5rem;border-bottom:2px solid var(--accent)}
.related-item{display:flex;gap:0.8rem;margin-bottom:1rem;text-decoration:none;color:inherit;align-items:flex-start}
.related-thumb{width:60px;height:55px;border-radius:4px;flex-shrink:0}
.related-item h4{font-size:0.85rem;line-height:1.4;color:var(--deep)}
.toc{background:#fff;border:1px solid #eee;border-radius:6px;padding:1.5rem;margin:2rem 0}
.toc h3{font-size:0.85rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--terracotta);margin-bottom:1rem}
.toc ol{margin-left:1.2rem}
.toc li{margin-bottom:0.4rem}
.toc a{color:var(--deep);text-decoration:none;font-size:0.9rem}
.toc a:hover{color:var(--terracotta)}
@media(max-width:768px){.layout{grid-template-columns:1fr}}
/* === HERO IMAGE === */
.article-hero {
position: relative !important;
overflow: hidden !important;
}
.hero-bg-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
filter: brightness(0.45);
}
.hero-content {
position: relative;
z-index: 2;
}
/* remove old background gradient when image loads */
.article-hero.has-img {
background: #111 !important;
}
/* === INLINE IMAGES === */
.story-img {
margin: 2.5rem 0;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}
.story-img img {
width: 100%;
height: 300px;
object-fit: cover;
display: block;
}
.story-img figcaption {
font-size: 0.8rem;
color: #888;
padding: 0.6rem 1rem;
background: #faf6f0;
font-style: italic;
border-left: 3px solid var(--accent, #e8b96a);
}
nav { position: sticky; top: 0; z-index: 100; background: rgba(26,18,8,0.97); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: space-between; padding: 0 5%; height: 64px; }
.nav-logo { font-family: 'Playfair Display', serif; font-size: 1.4rem; color: var(--accent); text-decoration: none; font-weight: 700; }
.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a { color: #ddd; text-decoration: none; font-size: 0.9rem; letter-spacing: 0.06em; text-transform: uppercase; transition: color 0.2s; }
.nav-links a:hover, .nav-links a.active { color: var(--accent); }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
.hamburger span { width: 24px; height: 2px; background: #ddd; display: block; transition: 0.3s; }
@media (max-width: 768px) {
.hamburger { display: flex; }
.nav-links { display: none; position: absolute; top: 64px; left: 0; right: 0; background: rgba(26,18,8,0.98); flex-direction: column; padding: 1.5rem 5%; gap: 1rem; z-index: 99; }
.nav-links.open { display: flex; }
}
footer { background: var(--deep); color: rgba(255,255,255,0.6); font-size: 0.88rem; margin-top: 4rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; padding: 3.5rem 5% 2.5rem; }
.footer-logo { font-family: 'Playfair Display', serif; font-size: 1.5rem; color: var(--accent); font-weight: 700; display: block; margin-bottom: 1rem; }
.footer-grid > div > p { line-height: 1.7; color: rgba(255,255,255,0.5); max-width: 280px; }
.footer-col h4 { color: #fff; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 1.2rem; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.footer-col ul a { color: rgba(255,255,255,0.55); text-decoration: none; transition: color 0.2s; }
.footer-col ul a:hover { color: var(--accent); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding: 1.2rem 5%; display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; }
.footer-bottom a { color: rgba(255,255,255,0.4); text-decoration: none; margin-left: 1.5rem; transition: color 0.2s; }
.footer-bottom a:hover { color: var(--accent); }
@media (max-width: 768px) {
.footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
.footer-bottom { flex-direction: column; gap: 0.8rem; text-align: center; }
}
@media (max-width: 480px) {
.footer-grid { grid-template-columns: 1fr; }
}
/* From clanak-japan.html */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
:root { --terracotta:#c06f3a;--deep:#1a1208;--accent:#e8b96a;--light:#fdf8f2; }
body { font-family:'Lato',sans-serif; background:var(--light); color:var(--deep); line-height:1.8; }
.article-hero {
height: 55vh; min-height: 380px;
background: linear-gradient(135deg, #c21a5e 0%, #4a0a2a 60%, #1a0a20 100%);
display: flex; align-items: flex-end; padding: 3rem 5%;
position: relative; overflow: hidden;
}
.article-hero::before {
content:''; position:absolute; inset:0; opacity:0.07;
background-image: radial-gradient(circle, #fff 1px, transparent 1px);
background-size:30px 30px;
}
.article-hero-content { position:relative; z-index:2; max-width:800px; }
.cat-tag {
display:inline-block; background:rgba(255,255,255,0.15);
color:#fff; font-size:0.72rem; letter-spacing:0.15em; text-transform:uppercase;
padding:4px 12px; border-radius:3px; margin-bottom:1rem;
}
.article-hero h1 { font-family:'Playfair Display',serif; font-size:clamp(1.8rem,4vw,3rem); color:#fff; line-height:1.2; margin-bottom:1rem; }
.article-meta { font-size:0.82rem; color:rgba(255,255,255,0.65); }
.article-meta span { margin-right:1.5rem; }
.layout { display:grid; grid-template-columns:1fr 300px; gap:3rem; max-width:1100px; margin:0 auto; padding:3rem 5%; }
.article-body h2 { font-family:'Playfair Display',serif; font-size:1.7rem; color:var(--deep); margin:2.5rem 0 1rem; padding-top:0.5rem; border-top:2px solid var(--accent); display:inline-block; }
.article-body h3 { font-family:'Playfair Display',serif; font-size:1.2rem; color:var(--deep); margin:1.5rem 0 0.5rem; }
.article-body p { color:#444; margin-bottom:1.2rem; font-size:1.0rem; }
.article-body ul { margin:1rem 0 1.5rem 1.5rem; color:#444; }
.article-body li { margin-bottom:0.5rem; }
.article-body strong { color:var(--deep); }
.tip-box { background:#fff8ee; border-left:4px solid var(--accent); padding:1.2rem 1.5rem; border-radius:0 6px 6px 0; margin:1.5rem 0; }
.tip-box strong { color:var(--terracotta); }
.info-table { width:100%; border-collapse:collapse; margin:1.5rem 0; font-size:0.9rem; }
.info-table th { background:var(--deep); color:#fff; text-align:left; padding:10px 14px; font-weight:400; font-size:0.8rem; letter-spacing:0.08em; text-transform:uppercase; }
.info-table td { padding:10px 14px; border-bottom:1px solid #eee; vertical-align:top; }
.info-table tr:nth-child(even) td { background:#faf6f0; }
/* SIDEBAR */
.sidebar {}
.sidebar-widget { background:#fff; border-radius:8px; padding:1.5rem; box-shadow:0 2px 12px rgba(0,0,0,0.07); margin-bottom:1.5rem; }
.sidebar-widget h3 { font-family:'Playfair Display',serif; font-size:1.1rem; color:var(--deep); margin-bottom:1rem; padding-bottom:0.5rem; border-bottom:2px solid var(--accent); }
.related-item { display:flex; gap:0.8rem; margin-bottom:1rem; text-decoration:none; color:inherit; }
.related-thumb { width:60px; height:55px; border-radius:4px; flex-shrink:0; }
.related-item h4 { font-size:0.85rem; line-height:1.4; color:var(--deep); }
/* TOC */
.toc { background:#fff; border:1px solid #eee; border-radius:6px; padding:1.5rem; margin:2rem 0; }
.toc h3 { font-size:0.85rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--terracotta); margin-bottom:1rem; }
.toc ol { margin-left:1.2rem; }
.toc li { margin-bottom:0.4rem; }
.toc a { color:var(--deep); text-decoration:none; font-size:0.9rem; }
.toc a:hover { color:var(--terracotta); }
@media (max-width:768px) { .layout { grid-template-columns:1fr; } }
/* === HERO IMAGE === */
.article-hero {
position: relative !important;
overflow: hidden !important;
}
.hero-bg-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
filter: brightness(0.45);
}
.hero-content {
position: relative;
z-index: 2;
}
/* remove old background gradient when image loads */
.article-hero.has-img {
background: #111 !important;
}
/* === INLINE IMAGES === */
.story-img {
margin: 2.5rem 0;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}
.story-img img {
width: 100%;
height: 300px;
object-fit: cover;
display: block;
}
.story-img figcaption {
font-size: 0.8rem;
color: #888;
padding: 0.6rem 1rem;
background: #faf6f0;
font-style: italic;
border-left: 3px solid var(--accent, #e8b96a);
}
nav { position: sticky; top: 0; z-index: 100; background: rgba(26,18,8,0.97); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: space-between; padding: 0 5%; height: 64px; }
.nav-logo { font-family: 'Playfair Display', serif; font-size: 1.4rem; color: var(--accent); text-decoration: none; font-weight: 700; }
.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a { color: #ddd; text-decoration: none; font-size: 0.9rem; letter-spacing: 0.06em; text-transform: uppercase; transition: color 0.2s; }
.nav-links a:hover, .nav-links a.active { color: var(--accent); }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
.hamburger span { width: 24px; height: 2px; background: #ddd; display: block; transition: 0.3s; }
@media (max-width: 768px) {
.hamburger { display: flex; }
.nav-links { display: none; position: absolute; top: 64px; left: 0; right: 0; background: rgba(26,18,8,0.98); flex-direction: column; padding: 1.5rem 5%; gap: 1rem; z-index: 99; }
.nav-links.open { display: flex; }
}
footer { background: var(--deep); color: rgba(255,255,255,0.6); font-size: 0.88rem; margin-top: 4rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; padding: 3.5rem 5% 2.5rem; }
.footer-logo { font-family: 'Playfair Display', serif; font-size: 1.5rem; color: var(--accent); font-weight: 700; display: block; margin-bottom: 1rem; }
.footer-grid > div > p { line-height: 1.7; color: rgba(255,255,255,0.5); max-width: 280px; }
.footer-col h4 { color: #fff; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 1.2rem; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.footer-col ul a { color: rgba(255,255,255,0.55); text-decoration: none; transition: color 0.2s; }
.footer-col ul a:hover { color: var(--accent); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding: 1.2rem 5%; display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; }
.footer-bottom a { color: rgba(255,255,255,0.4); text-decoration: none; margin-left: 1.5rem; transition: color 0.2s; }
.footer-bottom a:hover { color: var(--accent); }
@media (max-width: 768px) {
.footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
.footer-bottom { flex-direction: column; gap: 0.8rem; text-align: center; }
}
@media (max-width: 480px) {
.footer-grid { grid-template-columns: 1fr; }
}
/* From clanak-jet-lag.html */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--terracotta:#c06f3a;--deep:#1a1208;--accent:#e8b96a;--light:#fdf8f2}
body{font-family:'Lato',sans-serif;background:var(--light);color:var(--deep);line-height:1.8}
.article-hero{height:52vh;min-height:360px;display:flex;align-items:flex-end;padding:3rem 5%}
.cat-tag{display:inline-block;background:rgba(255,255,255,0.15);color:#fff;font-size:0.72rem;letter-spacing:0.15em;text-transform:uppercase;padding:4px 12px;border-radius:3px;margin-bottom:1rem}
.article-hero h1{font-family:'Playfair Display',serif;font-size:clamp(1.8rem,4vw,2.8rem);color:#fff;line-height:1.2;margin-bottom:1rem;max-width:800px}
.article-meta{font-size:0.82rem;color:rgba(255,255,255,0.72)}
.article-meta span{margin-right:1.5rem}
.layout{display:grid;grid-template-columns:1fr 280px;gap:3rem;max-width:1100px;margin:0 auto;padding:3rem 5%}
.article-body h2{font-family:'Playfair Display',serif;font-size:1.7rem;color:var(--deep);margin:2.5rem 0 1rem;border-top:2px solid var(--accent);padding-top:0.8rem}
.article-body h3{font-family:'Playfair Display',serif;font-size:1.2rem;color:var(--deep);margin:1.5rem 0 0.5rem}
.article-body p{color:#444;margin-bottom:1.2rem;font-size:1rem}
.article-body ul,.article-body ol{margin:1rem 0 1.5rem 1.5rem;color:#444}
.article-body li{margin-bottom:0.6rem}
.article-body strong{color:var(--deep)}
.tip-box{background:#fff8ee;border-left:4px solid var(--accent);padding:1.2rem 1.5rem;border-radius:0 6px 6px 0;margin:1.5rem 0}
.tip-box strong{color:var(--terracotta)}
.info-table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:0.9rem}
.info-table th{background:var(--deep);color:#fff;text-align:left;padding:10px 14px;font-size:0.8rem;letter-spacing:0.08em;text-transform:uppercase}
.info-table td{padding:10px 14px;border-bottom:1px solid #eee}
.info-table tr:nth-child(even) td{background:#faf6f0}
.sidebar-widget{background:#fff;border-radius:8px;padding:1.5rem;box-shadow:0 2px 12px rgba(0,0,0,0.07);margin-bottom:1.5rem}
.sidebar-widget h3{font-family:'Playfair Display',serif;font-size:1.1rem;margin-bottom:1rem;padding-bottom:0.5rem;border-bottom:2px solid var(--accent)}
.related-item{display:flex;gap:0.8rem;margin-bottom:1rem;text-decoration:none;color:inherit;align-items:flex-start}
.related-thumb{width:60px;height:55px;border-radius:4px;flex-shrink:0}
.related-item h4{font-size:0.85rem;line-height:1.4;color:var(--deep)}
@media(max-width:768px){.layout{grid-template-columns:1fr}}
.article-hero{position:relative;overflow:hidden}
.article-hero>div{position:relative;z-index:2}
.hero-bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;filter:brightness(0.42)}
.article-hero.has-img{background:#111 !important}
.story-img{margin:2.5rem 0;border-radius:10px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.12)}
.story-img img{width:100%;height:300px;object-fit:cover;display:block}
.story-img figcaption{font-size:0.8rem;color:#888;padding:0.6rem 1rem;background:#faf6f0;font-style:italic;border-left:3px solid var(--accent)}
nav{position:sticky;top:0;z-index:100;background:rgba(26,18,8,0.97);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:space-between;padding:0 5%;height:64px}
.nav-logo{font-family:'Playfair Display',serif;font-size:1.4rem;color:var(--accent);text-decoration:none;font-weight:700}
.nav-links{display:flex;gap:2rem;list-style:none}
.nav-links a{color:#ddd;text-decoration:none;font-size:0.9rem;letter-spacing:0.06em;text-transform:uppercase;transition:color 0.2s}
.nav-links a:hover,.nav-links a.active{color:var(--accent)}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px}
.hamburger span{width:24px;height:2px;background:#ddd;display:block;transition:0.3s}
@media (max-width: 768px) {
.hamburger { display: flex; }
.nav-links { display: none; position: absolute; top: 64px; left: 0; right: 0; background: rgba(26,18,8,0.98); flex-direction: column; padding: 1.5rem 5%; gap: 1rem; z-index: 99; }
.nav-links.open { display: flex; }
}
footer{background:var(--deep);color:rgba(255,255,255,0.6);font-size:0.88rem;margin-top:4rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;padding:3.5rem 5% 2.5rem}
.footer-logo{font-family:'Playfair Display',serif;font-size:1.5rem;color:var(--accent);font-weight:700;display:block;margin-bottom:1rem}
.footer-grid>div>p{line-height:1.7;color:rgba(255,255,255,0.5);max-width:280px}
.footer-col h4{color:#fff;font-size:0.75rem;letter-spacing:0.12em;text-transform:uppercase;margin-bottom:1.2rem}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:0.6rem}
.footer-col ul a{color:rgba(255,255,255,0.55);text-decoration:none;transition:color 0.2s}
.footer-col ul a:hover{color:var(--accent)}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.08);padding:1.2rem 5%;display:flex;justify-content:space-between;align-items:center;font-size:0.8rem}
.footer-bottom a{color:rgba(255,255,255,0.4);text-decoration:none;margin-left:1.5rem;transition:color 0.2s}
.footer-bottom a:hover{color:var(--accent)}
@media (max-width: 768px) {
.footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
.footer-bottom { flex-direction: column; gap: 0.8rem; text-align: center; }
}
@media (max-width: 480px) {
.footer-grid { grid-template-columns: 1fr; }
}
/* From clanak-kvart-za-smjestaj.html */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--terracotta:#c06f3a;--deep:#1a1208;--accent:#e8b96a;--light:#fdf8f2}
body{font-family:'Lato',sans-serif;background:var(--light);color:var(--deep);line-height:1.8}
.article-hero{height:52vh;min-height:360px;display:flex;align-items:flex-end;padding:3rem 5%;position:relative;overflow:hidden}
.article-hero>div{position:relative;z-index:2}.cat-tag{display:inline-block;background:rgba(255,255,255,0.15);color:#fff;font-size:0.72rem;letter-spacing:0.15em;text-transform:uppercase;padding:4px 12px;border-radius:3px;margin-bottom:1rem}.article-hero h1{font-family:'Playfair Display',serif;font-size:clamp(1.8rem,4vw,2.8rem);color:#fff;line-height:1.2;margin-bottom:1rem;max-width:800px}.article-meta{font-size:0.82rem;color:rgba(255,255,255,0.72)}.article-meta span{margin-right:1.5rem}.layout{display:grid;grid-template-columns:1fr 280px;gap:3rem;max-width:1100px;margin:0 auto;padding:3rem 5%}.article-body h2{font-family:'Playfair Display',serif;font-size:1.7rem;color:var(--deep);margin:2.5rem 0 1rem;border-top:2px solid var(--accent);padding-top:0.8rem}.article-body p{color:#444;margin-bottom:1.2rem;font-size:1rem}.article-body ul{margin:1rem 0 1.5rem 1.5rem;color:#444}.article-body li{margin-bottom:0.6rem}.tip-box{background:#fff8ee;border-left:4px solid var(--accent);padding:1.2rem 1.5rem;border-radius:0 6px 6px 0;margin:1.5rem 0}.tip-box strong{color:var(--terracotta)}.info-table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:0.9rem}.info-table th{background:var(--deep);color:#fff;text-align:left;padding:10px 14px;font-size:0.8rem;letter-spacing:0.08em;text-transform:uppercase}.info-table td{padding:10px 14px;border-bottom:1px solid #eee}.info-table tr:nth-child(even) td{background:#faf6f0}.sidebar-widget{background:#fff;border-radius:8px;padding:1.5rem;box-shadow:0 2px 12px rgba(0,0,0,0.07);margin-bottom:1.5rem}.sidebar-widget h3{font-family:'Playfair Display',serif;font-size:1.1rem;margin-bottom:1rem;padding-bottom:0.5rem;border-bottom:2px solid var(--accent)}.related-item{display:flex;gap:0.8rem;margin-bottom:1rem;text-decoration:none;color:inherit;align-items:flex-start}.related-thumb{width:60px;height:55px;border-radius:4px;flex-shrink:0}.related-item h4{font-size:0.85rem;line-height:1.4;color:var(--deep)}.hero-bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;filter:brightness(0.42)}.article-hero.has-img{background:#111 !important}.story-img{margin:2.5rem 0;border-radius:10px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.12)}.story-img img{width:100%;height:300px;object-fit:cover;display:block}.story-img figcaption{font-size:0.8rem;color:#888;padding:0.6rem 1rem;background:#faf6f0;font-style:italic;border-left:3px solid var(--accent)}nav{position:sticky;top:0;z-index:100;background:rgba(26,18,8,0.97);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:space-between;padding:0 5%;height:64px}.nav-logo{font-family:'Playfair Display',serif;font-size:1.4rem;color:var(--accent);text-decoration:none;font-weight:700}.nav-links{display:flex;gap:2rem;list-style:none}.nav-links a{color:#ddd;text-decoration:none;font-size:0.9rem;letter-spacing:0.06em;text-transform:uppercase;transition:color 0.2s}.nav-links a:hover,.nav-links a.active{color:var(--accent)}.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px}.hamburger span{width:24px;height:2px;background:#ddd;display:block;transition:0.3s}footer{background:var(--deep);color:rgba(255,255,255,0.6);font-size:0.88rem;margin-top:4rem}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;padding:3.5rem 5% 2.5rem}.footer-logo{font-family:'Playfair Display',serif;font-size:1.5rem;color:var(--accent);font-weight:700;display:block;margin-bottom:1rem}.footer-grid>div>p{line-height:1.7;color:rgba(255,255,255,0.5);max-width:280px}.footer-col h4{color:#fff;font-size:0.75rem;letter-spacing:0.12em;text-transform:uppercase;margin-bottom:1.2rem}.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:0.6rem}.footer-col ul a{color:rgba(255,255,255,0.55);text-decoration:none;transition:color 0.2s}.footer-col ul a:hover{color:var(--accent)}.footer-bottom{border-top:1px solid rgba(255,255,255,0.08);padding:1.2rem 5%;display:flex;justify-content:space-between;align-items:center;font-size:0.8rem}.footer-bottom a{color:rgba(255,255,255,0.4);text-decoration:none;margin-left:1.5rem;transition:color 0.2s}.footer-bottom a:hover{color:var(--accent)}@media (max-width:768px){.hamburger{display:flex}.nav-links{display:none;position:absolute;top:64px;left:0;right:0;background:rgba(26,18,8,0.98);flex-direction:column;padding:1.5rem 5%;gap:1rem;z-index:99}.nav-links.open{display:flex}.layout{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr;gap:2rem}.footer-bottom{flex-direction:column;gap:0.8rem;text-align:center}}@media (max-width:480px){.footer-grid{grid-template-columns:1fr}}
/* From clanak-marakes.html */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--terracotta: #c06f3a;
--deep: #1a1208;
--warm: #7a4f2b;
--accent: #e8b96a;
--light: #fdf8f2;
--line: rgba(26, 18, 8, 0.08);
}
body {
font-family: 'Lato', sans-serif;
background: var(--light);
color: var(--deep);
line-height: 1.8;
}
nav {
position: sticky;
top: 0;
z-index: 100;
background: rgba(26, 18, 8, 0.97);
backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 5%;
height: 64px;
}
.nav-logo {
font-family: 'Playfair Display', serif;
font-size: 1.4rem;
color: var(--accent);
text-decoration: none;
font-weight: 700;
}
.nav-links {
display: flex;
gap: 2rem;
list-style: none;
}
.nav-links a {
color: #ddd;
text-decoration: none;
font-size: 0.9rem;
letter-spacing: 0.06em;
text-transform: uppercase;
transition: color 0.2s;
}
.nav-links a:hover,
.nav-links a.active { color: var(--accent); }
.hero {
background: linear-gradient(135deg, #4d2712 0%, #c06f3a 48%, #2e1e15 100%);
color: #fff;
padding: 5rem 5% 4rem;
}
.hero-inner {
max-width: 860px;
}
.eyebrow {
display: inline-block;
font-size: 0.75rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 1rem;
}
.hero h1 {
font-family: 'Playfair Display', serif;
font-size: clamp(2.2rem, 5vw, 4rem);
line-height: 1.08;
margin-bottom: 1rem;
}
.hero p {
max-width: 620px;
color: rgba(255,255,255,0.82);
font-size: 1.05rem;
}
.hero-meta {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin-top: 1.5rem;
font-size: 0.85rem;
color: rgba(255,255,255,0.72);
}
.layout {
max-width: 1120px;
margin: 0 auto;
padding: 3rem 5% 4rem;
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: 2rem;
}
.article-body {
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
padding: 2rem;
box-shadow: 0 10px 28px rgba(0,0,0,0.05);
}
.article-body h2 {
font-family: 'Playfair Display', serif;
font-size: 1.7rem;
margin: 2.2rem 0 0.8rem;
}
.article-body h2:first-of-type { margin-top: 0; }
.article-body p,
.article-body li { color: #4d4640; }
.article-body ul { margin: 0.8rem 0 1.2rem 1.2rem; }
.tip-box,
.info-box {
border-radius: 12px;
padding: 1.1rem 1.2rem;
margin: 1.5rem 0;
}
.tip-box {
background: #fff6ed;
border-left: 4px solid var(--terracotta);
}
.info-box {
background: #f8f3ec;
border: 1px solid rgba(192,111,58,0.16);
}
.sidebar {
display: flex;
flex-direction: column;
gap: 1.2rem;
}
.side-card {
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
padding: 1.3rem;
box-shadow: 0 10px 26px rgba(0,0,0,0.05);
}
.side-card h3 {
font-family: 'Playfair Display', serif;
font-size: 1.1rem;
margin-bottom: 0.8rem;
}
.side-card a {
color: var(--terracotta);
text-decoration: none;
font-weight: 700;
}
.side-card ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.7rem;
}
.side-card li a {
font-weight: 600;
letter-spacing: 0.01em;
}
footer {
background: var(--deep);
color: rgba(255,255,255,0.58);
padding: 3rem 5% 2rem;
margin-top: 4rem;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 3rem;
}
.footer-logo {
display: block;
font-family: 'Playfair Display', serif;
font-size: 1.5rem;
color: var(--accent);
margin-bottom: 1rem;
}
.footer-col h4 {
color: #fff;
font-size: 0.75rem;
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 1rem;
}
.footer-col ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.footer-col a {
color: rgba(255,255,255,0.55);
text-decoration: none;
}
.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.08);
margin-top: 2rem;
padding-top: 1rem;
font-size: 0.82rem;
display: flex;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
@media (max-width: 900px) {
.layout { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
.nav-links { display: none; }
.article-body { padding: 1.4rem; }
.footer-grid { grid-template-columns: 1fr; }
}
/* From clanak-mediteran.html */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--terracotta:#c06f3a;--deep:#1a1208;--accent:#e8b96a;--light:#fdf8f2}
body{font-family:'Lato',sans-serif;background:var(--light);color:var(--deep);line-height:1.8}
.article-hero{height:52vh;min-height:360px;background:linear-gradient(135deg,#1a6fa0,#0d3a60);display:flex;align-items:flex-end;padding:3rem 5%}
.cat-tag{display:inline-block;background:rgba(255,255,255,0.15);color:#fff;font-size:0.72rem;letter-spacing:0.15em;text-transform:uppercase;padding:4px 12px;border-radius:3px;margin-bottom:1rem}
.article-hero h1{font-family:'Playfair Display',serif;font-size:clamp(1.8rem,4vw,2.8rem);color:#fff;line-height:1.2;margin-bottom:1rem;max-width:800px}
.article-meta{font-size:0.82rem;color:rgba(255,255,255,0.65)}
.article-meta span{margin-right:1.5rem}
.layout{display:grid;grid-template-columns:1fr 280px;gap:3rem;max-width:1100px;margin:0 auto;padding:3rem 5%}
.article-body h2{font-family:'Playfair Display',serif;font-size:1.7rem;color:var(--deep);margin:2.5rem 0 1rem;border-top:2px solid var(--accent);padding-top:0.8rem}
.article-body h3{font-family:'Playfair Display',serif;font-size:1.2rem;color:var(--deep);margin:1.5rem 0 0.5rem}
.article-body p{color:#444;margin-bottom:1.2rem;font-size:1rem}
.article-body ul,.article-body ol{margin:1rem 0 1.5rem 1.5rem;color:#444}
.article-body li{margin-bottom:0.6rem}
.article-body strong{color:var(--deep)}
.tip-box{background:#fff8ee;border-left:4px solid var(--accent);padding:1.2rem 1.5rem;border-radius:0 6px 6px 0;margin:1.5rem 0}
.tip-box strong{color:var(--terracotta)}
.day-card{background:#fff;border-radius:8px;padding:1.5rem;margin:1rem 0;box-shadow:0 2px 8px rgba(0,0,0,0.06);border-left:4px solid var(--terracotta)}
.day-card .day-num{font-size:0.75rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--terracotta);margin-bottom:0.3rem}
.day-card h3{margin:0 0 0.5rem;font-family:'Playfair Display',serif;font-size:1.1rem;color:var(--deep)}
.day-card p{margin:0;font-size:0.9rem;color:#555}
.sidebar-widget{background:#fff;border-radius:8px;padding:1.5rem;box-shadow:0 2px 12px rgba(0,0,0,0.07);margin-bottom:1.5rem}
.sidebar-widget h3{font-family:'Playfair Display',serif;font-size:1.1rem;margin-bottom:1rem;padding-bottom:0.5rem;border-bottom:2px solid var(--accent)}
.related-item{display:flex;gap:0.8rem;margin-bottom:1rem;text-decoration:none;color:inherit;align-items:flex-start}
.related-thumb{width:60px;height:55px;border-radius:4px;flex-shrink:0}
.related-item h4{font-size:0.85rem;line-height:1.4;color:var(--deep)}
@media(max-width:768px){.layout{grid-template-columns:1fr}}
/* === HERO IMAGE === */
.article-hero {
position: relative !important;
overflow: hidden !important;
}
.hero-bg-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
filter: brightness(0.45);
}
.hero-content {
position: relative;
z-index: 2;
}
/* remove old background gradient when image loads */
.article-hero.has-img {
background: #111 !important;
}
/* === INLINE IMAGES === */
.story-img {
margin: 2.5rem 0;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}
.story-img img {
width: 100%;
height: 300px;
object-fit: cover;
display: block;
}
.story-img figcaption {
font-size: 0.8rem;
color: #888;
padding: 0.6rem 1rem;
background: #faf6f0;
font-style: italic;
border-left: 3px solid var(--accent, #e8b96a);
}
nav { position: sticky; top: 0; z-index: 100; background: rgba(26,18,8,0.97); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: space-between; padding: 0 5%; height: 64px; }
.nav-logo { font-family: 'Playfair Display', serif; font-size: 1.4rem; color: var(--accent); text-decoration: none; font-weight: 700; }
.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a { color: #ddd; text-decoration: none; font-size: 0.9rem; letter-spacing: 0.06em; text-transform: uppercase; transition: color 0.2s; }
.nav-links a:hover, .nav-links a.active { color: var(--accent); }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
.hamburger span { width: 24px; height: 2px; background: #ddd; display: block; transition: 0.3s; }
@media (max-width: 768px) {
.hamburger { display: flex; }
.nav-links { display: none; position: absolute; top: 64px; left: 0; right: 0; background: rgba(26,18,8,0.98); flex-direction: column; padding: 1.5rem 5%; gap: 1rem; z-index: 99; }
.nav-links.open { display: flex; }
}
footer { background: var(--deep); color: rgba(255,255,255,0.6); font-size: 0.88rem; margin-top: 4rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; padding: 3.5rem 5% 2.5rem; }
.footer-logo { font-family: 'Playfair Display', serif; font-size: 1.5rem; color: var(--accent); font-weight: 700; display: block; margin-bottom: 1rem; }
.footer-grid > div > p { line-height: 1.7; color: rgba(255,255,255,0.5); max-width: 280px; }
.footer-col h4 { color: #fff; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 1.2rem; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.footer-col ul a { color: rgba(255,255,255,0.55); text-decoration: none; transition: color 0.2s; }
.footer-col ul a:hover { color: var(--accent); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding: 1.2rem 5%; display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; }
.footer-bottom a { color: rgba(255,255,255,0.4); text-decoration: none; margin-left: 1.5rem; transition: color 0.2s; }
.footer-bottom a:hover { color: var(--accent); }
@media (max-width: 768px) {
.footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
.footer-bottom { flex-direction: column; gap: 0.8rem; text-align: center; }
}
@media (max-width: 480px) {
.footer-grid { grid-template-columns: 1fr; }
}
/* From clanak-nocni-dolazak.html */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--terracotta:#c06f3a;--deep:#1a1208;--accent:#e8b96a;--light:#fdf8f2}
body{font-family:'Lato',sans-serif;background:var(--light);color:var(--deep);line-height:1.8}
.article-hero{height:52vh;min-height:360px;display:flex;align-items:flex-end;padding:3rem 5%;position:relative;overflow:hidden}
.article-hero>div{position:relative;z-index:2}.cat-tag{display:inline-block;background:rgba(255,255,255,0.15);color:#fff;font-size:0.72rem;letter-spacing:0.15em;text-transform:uppercase;padding:4px 12px;border-radius:3px;margin-bottom:1rem}.article-hero h1{font-family:'Playfair Display',serif;font-size:clamp(1.8rem,4vw,2.8rem);color:#fff;line-height:1.2;margin-bottom:1rem;max-width:820px}.article-meta{font-size:0.82rem;color:rgba(255,255,255,0.72)}.article-meta span{margin-right:1.5rem}.layout{display:grid;grid-template-columns:1fr 280px;gap:3rem;max-width:1100px;margin:0 auto;padding:3rem 5%}.article-body h2{font-family:'Playfair Display',serif;font-size:1.7rem;color:var(--deep);margin:2.5rem 0 1rem;border-top:2px solid var(--accent);padding-top:0.8rem}.article-body p{color:#444;margin-bottom:1.2rem;font-size:1rem}.article-body ul{margin:1rem 0 1.5rem 1.5rem;color:#444}.article-body li{margin-bottom:0.6rem}.tip-box{background:#fff8ee;border-left:4px solid var(--accent);padding:1.2rem 1.5rem;border-radius:0 6px 6px 0;margin:1.5rem 0}.tip-box strong{color:var(--terracotta)}.info-table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:0.9rem}.info-table th{background:var(--deep);color:#fff;text-align:left;padding:10px 14px;font-size:0.8rem;letter-spacing:0.08em;text-transform:uppercase}.info-table td{padding:10px 14px;border-bottom:1px solid #eee}.info-table tr:nth-child(even) td{background:#faf6f0}.sidebar-widget{background:#fff;border-radius:8px;padding:1.5rem;box-shadow:0 2px 12px rgba(0,0,0,0.07);margin-bottom:1.5rem}.sidebar-widget h3{font-family:'Playfair Display',serif;font-size:1.1rem;margin-bottom:1rem;padding-bottom:0.5rem;border-bottom:2px solid var(--accent)}.related-item{display:flex;gap:0.8rem;margin-bottom:1rem;text-decoration:none;color:inherit;align-items:flex-start}.related-thumb{width:60px;height:55px;border-radius:4px;flex-shrink:0}.related-item h4{font-size:0.85rem;line-height:1.4;color:var(--deep)}.hero-bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;filter:brightness(0.42)}.article-hero.has-img{background:#111 !important}.story-img{margin:2.5rem 0;border-radius:10px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.12)}.story-img img{width:100%;height:300px;object-fit:cover;display:block}.story-img figcaption{font-size:0.8rem;color:#888;padding:0.6rem 1rem;background:#faf6f0;font-style:italic;border-left:3px solid var(--accent)}nav{position:sticky;top:0;z-index:100;background:rgba(26,18,8,0.97);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:space-between;padding:0 5%;height:64px}.nav-logo{font-family:'Playfair Display',serif;font-size:1.4rem;color:var(--accent);text-decoration:none;font-weight:700}.nav-links{display:flex;gap:2rem;list-style:none}.nav-links a{color:#ddd;text-decoration:none;font-size:0.9rem;letter-spacing:0.06em;text-transform:uppercase;transition:color 0.2s}.nav-links a:hover,.nav-links a.active{color:var(--accent)}.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px}.hamburger span{width:24px;height:2px;background:#ddd;display:block;transition:0.3s}footer{background:var(--deep);color:rgba(255,255,255,0.6);font-size:0.88rem;margin-top:4rem}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;padding:3.5rem 5% 2.5rem}.footer-logo{font-family:'Playfair Display',serif;font-size:1.5rem;color:var(--accent);font-weight:700;display:block;margin-bottom:1rem}.footer-grid>div>p{line-height:1.7;color:rgba(255,255,255,0.5);max-width:280px}.footer-col h4{color:#fff;font-size:0.75rem;letter-spacing:0.12em;text-transform:uppercase;margin-bottom:1.2rem}.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:0.6rem}.footer-col ul a{color:rgba(255,255,255,0.55);text-decoration:none;transition:color 0.2s}.footer-col ul a:hover{color:var(--accent)}.footer-bottom{border-top:1px solid rgba(255,255,255,0.08);padding:1.2rem 5%;display:flex;justify-content:space-between;align-items:center;font-size:0.8rem}.footer-bottom a{color:rgba(255,255,255,0.4);text-decoration:none;margin-left:1.5rem;transition:color 0.2s}.footer-bottom a:hover{color:var(--accent)}@media (max-width:768px){.hamburger{display:flex}.nav-links{display:none;position:absolute;top:64px;left:0;right:0;background:rgba(26,18,8,0.98);flex-direction:column;padding:1.5rem 5%;gap:1rem;z-index:99}.nav-links.open{display:flex}.layout{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr;gap:2rem}.footer-bottom{flex-direction:column;gap:0.8rem;text-align:center}}@media (max-width:480px){.footer-grid{grid-template-columns:1fr}}
/* From clanak-pakovanje.html */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--terracotta:#c06f3a;--deep:#1a1208;--accent:#e8b96a;--light:#fdf8f2}
body{font-family:'Lato',sans-serif;background:var(--light);color:var(--deep);line-height:1.8}
.article-hero{height:52vh;min-height:360px;background:linear-gradient(135deg,#c06f3a,#6b2a00);display:flex;align-items:flex-end;padding:3rem 5%}
.cat-tag{display:inline-block;background:rgba(255,255,255,0.15);color:#fff;font-size:0.72rem;letter-spacing:0.15em;text-transform:uppercase;padding:4px 12px;border-radius:3px;margin-bottom:1rem}
.article-hero h1{font-family:'Playfair Display',serif;font-size:clamp(1.8rem,4vw,2.8rem);color:#fff;line-height:1.2;margin-bottom:1rem;max-width:800px}
.article-meta{font-size:0.82rem;color:rgba(255,255,255,0.65)}
.article-meta span{margin-right:1.5rem}
.layout{display:grid;grid-template-columns:1fr 280px;gap:3rem;max-width:1100px;margin:0 auto;padding:3rem 5%}
.article-body h2{font-family:'Playfair Display',serif;font-size:1.7rem;color:var(--deep);margin:2.5rem 0 1rem;border-top:2px solid var(--accent);padding-top:0.8rem}
.article-body h3{font-family:'Playfair Display',serif;font-size:1.2rem;color:var(--deep);margin:1.5rem 0 0.5rem}
.article-body p{color:#444;margin-bottom:1.2rem;font-size:1rem}
.article-body ul{margin:1rem 0 1.5rem 1.5rem;color:#444}
.article-body li{margin-bottom:0.6rem}
.article-body strong{color:var(--deep)}
.tip-box{background:#fff8ee;border-left:4px solid var(--accent);padding:1.2rem 1.5rem;border-radius:0 6px 6px 0;margin:1.5rem 0}
.tip-box strong{color:var(--terracotta)}
.checklist-box{background:#fff;border-radius:8px;padding:1.8rem;box-shadow:0 2px 12px rgba(0,0,0,0.07);margin:1.5rem 0}
.checklist-box h3{font-family:'Playfair Display',serif;font-size:1.1rem;color:var(--deep);margin-bottom:1rem;padding-bottom:0.6rem;border-bottom:2px solid var(--accent)}
.checklist-cols{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem 2rem}
.check-item{display:flex;align-items:flex-start;gap:0.6rem;font-size:0.9rem;color:#444;padding:0.25rem 0}
.check-item::before{content:"☐";color:var(--terracotta);font-size:1.1rem;flex-shrink:0;line-height:1.4}
.bag-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.2rem;margin:1.5rem 0}
.bag-card{background:#fff;border-radius:8px;padding:1.5rem;box-shadow:0 2px 10px rgba(0,0,0,0.06);text-align:center;border-top:3px solid var(--terracotta)}
.bag-card .icon{font-size:2.2rem;margin-bottom:0.7rem}
.bag-card h3{font-family:'Playfair Display',serif;font-size:1rem;color:var(--deep);margin-bottom:0.4rem}
.bag-card p{font-size:0.85rem;color:#666;margin:0}
.sidebar-widget{background:#fff;border-radius:8px;padding:1.5rem;box-shadow:0 2px 12px rgba(0,0,0,0.07);margin-bottom:1.5rem}
.sidebar-widget h3{font-family:'Playfair Display',serif;font-size:1.1rem;margin-bottom:1rem;padding-bottom:0.5rem;border-bottom:2px solid var(--accent)}
.related-item{display:flex;gap:0.8rem;margin-bottom:1rem;text-decoration:none;color:inherit;align-items:flex-start}
.related-thumb{width:60px;height:55px;border-radius:4px;flex-shrink:0}
.related-item h4{font-size:0.85rem;line-height:1.4;color:var(--deep)}
@media(max-width:768px){.layout{grid-template-columns:1fr}.checklist-cols{grid-template-columns:1fr}}
.article-hero {
position: relative;
overflow: hidden;
}
.article-hero > div {
position: relative;
z-index: 2;
}
.inline-img-wrap img {
width: 100%;
height: 320px;
object-fit: cover;
display: block;
}
/* === HERO IMAGE === */
.article-hero {
position: relative !important;
overflow: hidden !important;
}
.hero-bg-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
filter: brightness(0.45);
}
.hero-content {
position: relative;
z-index: 2;
}
/* remove old background gradient when image loads */
.article-hero.has-img {
background: #111 !important;
}
/* === INLINE IMAGES === */
.story-img {
margin: 2.5rem 0;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}
.story-img img {
width: 100%;
height: 300px;
object-fit: cover;
display: block;
}
.story-img figcaption {
font-size: 0.8rem;
color: #888;
padding: 0.6rem 1rem;
background: #faf6f0;
font-style: italic;
border-left: 3px solid var(--accent, #e8b96a);
}
nav { position: sticky; top: 0; z-index: 100; background: rgba(26,18,8,0.97); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: space-between; padding: 0 5%; height: 64px; }
.nav-logo { font-family: 'Playfair Display', serif; font-size: 1.4rem; color: var(--accent); text-decoration: none; font-weight: 700; }
.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a { color: #ddd; text-decoration: none; font-size: 0.9rem; letter-spacing: 0.06em; text-transform: uppercase; transition: color 0.2s; }
.nav-links a:hover, .nav-links a.active { color: var(--accent); }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
.hamburger span { width: 24px; height: 2px; background: #ddd; display: block; transition: 0.3s; }
@media (max-width: 768px) {
.hamburger { display: flex; }
.nav-links { display: none; position: absolute; top: 64px; left: 0; right: 0; background: rgba(26,18,8,0.98); flex-direction: column; padding: 1.5rem 5%; gap: 1rem; z-index: 99; }
.nav-links.open { display: flex; }
}
footer { background: var(--deep); color: rgba(255,255,255,0.6); font-size: 0.88rem; margin-top: 4rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; padding: 3.5rem 5% 2.5rem; }
.footer-logo { font-family: 'Playfair Display', serif; font-size: 1.5rem; color: var(--accent); font-weight: 700; display: block; margin-bottom: 1rem; }
.footer-grid > div > p { line-height: 1.7; color: rgba(255,255,255,0.5); max-width: 280px; }
.footer-col h4 { color: #fff; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 1.2rem; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.footer-col ul a { color: rgba(255,255,255,0.55); text-decoration: none; transition: color 0.2s; }
.footer-col ul a:hover { color: var(--accent); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding: 1.2rem 5%; display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; }
.footer-bottom a { color: rgba(255,255,255,0.4); text-decoration: none; margin-left: 1.5rem; transition: color 0.2s; }
.footer-bottom a:hover { color: var(--accent); }
@media (max-width: 768px) {
.footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
.footer-bottom { flex-direction: column; gap: 0.8rem; text-align: center; }
}
@media (max-width: 480px) {
.footer-grid { grid-template-columns: 1fr; }
}
/* From clanak-santorini.html */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--terracotta:#c06f3a;--deep:#1a1208;--accent:#e8b96a;--light:#fdf8f2}
body{font-family:'Lato',sans-serif;background:var(--light);color:var(--deep);line-height:1.8}
.article-hero{height:52vh;min-height:360px;background:linear-gradient(135deg,#1a6fa0,#0d4f73);display:flex;align-items:flex-end;padding:3rem 5%}
.cat-tag{display:inline-block;background:rgba(255,255,255,0.15);color:#fff;font-size:0.72rem;letter-spacing:0.15em;text-transform:uppercase;padding:4px 12px;border-radius:3px;margin-bottom:1rem}
.article-hero h1{font-family:'Playfair Display',serif;font-size:clamp(1.8rem,4vw,2.8rem);color:#fff;line-height:1.2;margin-bottom:1rem;max-width:800px}
.article-meta{font-size:0.82rem;color:rgba(255,255,255,0.65)}
.article-meta span{margin-right:1.5rem}
.layout{display:grid;grid-template-columns:1fr 280px;gap:3rem;max-width:1100px;margin:0 auto;padding:3rem 5%}
.article-body h2{font-family:'Playfair Display',serif;font-size:1.7rem;color:var(--deep);margin:2.5rem 0 1rem;border-top:2px solid var(--accent);padding-top:0.8rem}
.article-body h3{font-family:'Playfair Display',serif;font-size:1.2rem;color:var(--deep);margin:1.5rem 0 0.5rem}
.article-body p{color:#444;margin-bottom:1.2rem;font-size:1rem}
.article-body ul,.article-body ol{margin:1rem 0 1.5rem 1.5rem;color:#444}
.article-body li{margin-bottom:0.5rem}
.article-body strong{color:var(--deep)}
.tip-box{background:#fff8ee;border-left:4px solid var(--accent);padding:1.2rem 1.5rem;border-radius:0 6px 6px 0;margin:1.5rem 0}
.tip-box strong{color:var(--terracotta)}
.info-table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:0.9rem}
.info-table th{background:var(--deep);color:#fff;text-align:left;padding:10px 14px;font-size:0.8rem;letter-spacing:0.08em;text-transform:uppercase}
.info-table td{padding:10px 14px;border-bottom:1px solid #eee}
.info-table tr:nth-child(even) td{background:#faf6f0}
.sidebar-widget{background:#fff;border-radius:8px;padding:1.5rem;box-shadow:0 2px 12px rgba(0,0,0,0.07);margin-bottom:1.5rem}
.sidebar-widget h3{font-family:'Playfair Display',serif;font-size:1.1rem;margin-bottom:1rem;padding-bottom:0.5rem;border-bottom:2px solid var(--accent)}
.related-item{display:flex;gap:0.8rem;margin-bottom:1rem;text-decoration:none;color:inherit;align-items:flex-start}
.related-thumb{width:60px;height:55px;border-radius:4px;flex-shrink:0}
.related-item h4{font-size:0.85rem;line-height:1.4;color:var(--deep)}
@media(max-width:768px){.layout{grid-template-columns:1fr}}
/* === HERO IMAGE === */
.article-hero {
position: relative !important;
overflow: hidden !important;
}
.hero-bg-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
filter: brightness(0.45);
}
.hero-content {
position: relative;
z-index: 2;
}
/* remove old background gradient when image loads */
.article-hero.has-img {
background: #111 !important;
}
/* === INLINE IMAGES === */
.story-img {
margin: 2.5rem 0;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}
.story-img img {
width: 100%;
height: 300px;
object-fit: cover;
display: block;
}
.story-img figcaption {
font-size: 0.8rem;
color: #888;
padding: 0.6rem 1rem;
background: #faf6f0;
font-style: italic;
border-left: 3px solid var(--accent, #e8b96a);
}
nav { position: sticky; top: 0; z-index: 100; background: rgba(26,18,8,0.97); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: space-between; padding: 0 5%; height: 64px; }
.nav-logo { font-family: 'Playfair Display', serif; font-size: 1.4rem; color: var(--accent); text-decoration: none; font-weight: 700; }
.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a { color: #ddd; text-decoration: none; font-size: 0.9rem; letter-spacing: 0.06em; text-transform: uppercase; transition: color 0.2s; }
.nav-links a:hover, .nav-links a.active { color: var(--accent); }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
.hamburger span { width: 24px; height: 2px; background: #ddd; display: block; transition: 0.3s; }
@media (max-width: 768px) {
.hamburger { display: flex; }
.nav-links { display: none; position: absolute; top: 64px; left: 0; right: 0; background: rgba(26,18,8,0.98); flex-direction: column; padding: 1.5rem 5%; gap: 1rem; z-index: 99; }
.nav-links.open { display: flex; }
}
footer { background: var(--deep); color: rgba(255,255,255,0.6); font-size: 0.88rem; margin-top: 4rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; padding: 3.5rem 5% 2.5rem; }
.footer-logo { font-family: 'Playfair Display', serif; font-size: 1.5rem; color: var(--accent); font-weight: 700; display: block; margin-bottom: 1rem; }
.footer-grid > div > p { line-height: 1.7; color: rgba(255,255,255,0.5); max-width: 280px; }
.footer-col h4 { color: #fff; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 1.2rem; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.footer-col ul a { color: rgba(255,255,255,0.55); text-decoration: none; transition: color 0.2s; }
.footer-col ul a:hover { color: var(--accent); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding: 1.2rem 5%; display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; }
.footer-bottom a { color: rgba(255,255,255,0.4); text-decoration: none; margin-left: 1.5rem; transition: color 0.2s; }
.footer-bottom a:hover { color: var(--accent); }
@media (max-width: 768px) {
.footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
.footer-bottom { flex-direction: column; gap: 0.8rem; text-align: center; }
}
@media (max-width: 480px) {
.footer-grid { grid-template-columns: 1fr; }
}
/* From clanak-solo-putovanje.html */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--terracotta:#c06f3a;--deep:#1a1208;--accent:#e8b96a;--light:#fdf8f2}
body{font-family:'Lato',sans-serif;background:var(--light);color:var(--deep);line-height:1.8}
.article-hero{height:52vh;min-height:360px;background:linear-gradient(135deg,#8a4fa8,#3a1a60);display:flex;align-items:flex-end;padding:3rem 5%}
.cat-tag{display:inline-block;background:rgba(255,255,255,0.15);color:#fff;font-size:0.72rem;letter-spacing:0.15em;text-transform:uppercase;padding:4px 12px;border-radius:3px;margin-bottom:1rem}
.article-hero h1{font-family:'Playfair Display',serif;font-size:clamp(1.8rem,4vw,2.8rem);color:#fff;line-height:1.2;margin-bottom:1rem;max-width:800px}
.article-meta{font-size:0.82rem;color:rgba(255,255,255,0.65)}
.article-meta span{margin-right:1.5rem}
.layout{display:grid;grid-template-columns:1fr 280px;gap:3rem;max-width:1100px;margin:0 auto;padding:3rem 5%}
.article-body h2{font-family:'Playfair Display',serif;font-size:1.7rem;color:var(--deep);margin:2.5rem 0 1rem;border-top:2px solid var(--accent);padding-top:0.8rem}
.article-body h3{font-family:'Playfair Display',serif;font-size:1.2rem;color:var(--deep);margin:1.5rem 0 0.5rem}
.article-body p{color:#444;margin-bottom:1.2rem;font-size:1rem}
.article-body ul{margin:1rem 0 1.5rem 1.5rem;color:#444}
.article-body li{margin-bottom:0.6rem}
.article-body strong{color:var(--deep)}
.tip-box{background:#fff8ee;border-left:4px solid var(--accent);padding:1.2rem 1.5rem;border-radius:0 6px 6px 0;margin:1.5rem 0}
.tip-box strong{color:var(--terracotta)}
.dest-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;margin:1.5rem 0}
.dest-card{background:#fff;border-radius:8px;padding:1.2rem;box-shadow:0 2px 8px rgba(0,0,0,0.06);text-align:center}
.dest-card .flag{font-size:2rem;margin-bottom:0.5rem}
.dest-card h4{font-family:'Playfair Display',serif;font-size:0.95rem;color:var(--deep);margin-bottom:0.3rem}
.dest-card .safety{font-size:0.8rem;color:var(--terracotta);font-weight:700}
.sidebar-widget{background:#fff;border-radius:8px;padding:1.5rem;box-shadow:0 2px 12px rgba(0,0,0,0.07);margin-bottom:1.5rem}
.sidebar-widget h3{font-family:'Playfair Display',serif;font-size:1.1rem;margin-bottom:1rem;padding-bottom:0.5rem;border-bottom:2px solid var(--accent)}
.related-item{display:flex;gap:0.8rem;margin-bottom:1rem;text-decoration:none;color:inherit;align-items:flex-start}
.related-thumb{width:60px;height:55px;border-radius:4px;flex-shrink:0}
.related-item h4{font-size:0.85rem;line-height:1.4;color:var(--deep)}
@media(max-width:768px){.layout{grid-template-columns:1fr}}
/* === HERO IMAGE === */
.article-hero {
position: relative !important;
overflow: hidden !important;
}
.hero-bg-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
filter: brightness(0.45);
}
.hero-content {
position: relative;
z-index: 2;
}
/* remove old background gradient when image loads */
.article-hero.has-img {
background: #111 !important;
}
/* === INLINE IMAGES === */
.story-img {
margin: 2.5rem 0;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}
.story-img img {
width: 100%;
height: 300px;
object-fit: cover;
display: block;
}
.story-img figcaption {
font-size: 0.8rem;
color: #888;
padding: 0.6rem 1rem;
background: #faf6f0;
font-style: italic;
border-left: 3px solid var(--accent, #e8b96a);
}
nav { position: sticky; top: 0; z-index: 100; background: rgba(26,18,8,0.97); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: space-between; padding: 0 5%; height: 64px; }
.nav-logo { font-family: 'Playfair Display', serif; font-size: 1.4rem; color: var(--accent); text-decoration: none; font-weight: 700; }
.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a { color: #ddd; text-decoration: none; font-size: 0.9rem; letter-spacing: 0.06em; text-transform: uppercase; transition: color 0.2s; }
.nav-links a:hover, .nav-links a.active { color: var(--accent); }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
.hamburger span { width: 24px; height: 2px; background: #ddd; display: block; transition: 0.3s; }
@media (max-width: 768px) {
.hamburger { display: flex; }
.nav-links { display: none; position: absolute; top: 64px; left: 0; right: 0; background: rgba(26,18,8,0.98); flex-direction: column; padding: 1.5rem 5%; gap: 1rem; z-index: 99; }
.nav-links.open { display: flex; }
}
footer { background: var(--deep); color: rgba(255,255,255,0.6); font-size: 0.88rem; margin-top: 4rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; padding: 3.5rem 5% 2.5rem; }
.footer-logo { font-family: 'Playfair Display', serif; font-size: 1.5rem; color: var(--accent); font-weight: 700; display: block; margin-bottom: 1rem; }
.footer-grid > div > p { line-height: 1.7; color: rgba(255,255,255,0.5); max-width: 280px; }
.footer-col h4 { color: #fff; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 1.2rem; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.footer-col ul a { color: rgba(255,255,255,0.55); text-decoration: none; transition: color 0.2s; }
.footer-col ul a:hover { color: var(--accent); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding: 1.2rem 5%; display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; }
.footer-bottom a { color: rgba(255,255,255,0.4); text-decoration: none; margin-left: 1.5rem; transition: color 0.2s; }
.footer-bottom a:hover { color: var(--accent); }
@media (max-width: 768px) {
.footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
.footer-bottom { flex-direction: column; gap: 0.8rem; text-align: center; }
}
@media (max-width: 480px) {
.footer-grid { grid-template-columns: 1fr; }
}
/* From contact.html */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
:root { --terracotta:#c06f3a;--deep:#1a1208;--accent:#e8b96a;--light:#fdf8f2; }
body { font-family:'Lato',sans-serif; background:var(--light); color:var(--deep); line-height:1.8; }
nav { background:rgba(26,18,8,0.97); display:flex; align-items:center; justify-content:space-between; padding:0 5%; height:64px; }
.page-header { background:var(--deep); padding:4rem 5%; color:#fff; }
.label { font-size:0.75rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--accent); margin-bottom:0.5rem; }
.page-header h1 { font-family:'Playfair Display',serif; font-size:2.5rem; }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; max-width:1000px; margin:0 auto; padding:4rem 5%; }
h2 { font-family:'Playfair Display',serif; font-size:1.6rem; margin-bottom:1rem; }
p { color:#555; margin-bottom:1rem; }
.info-item { display:flex; gap:1rem; margin-bottom:1.5rem; align-items:flex-start; }
.info-icon { font-size:1.4rem; flex-shrink:0; margin-top:0.1rem; }
.info-item h3 { font-size:0.85rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--terracotta); margin-bottom:0.2rem; }
.info-item p { margin:0; font-size:0.95rem; }
.form-group { margin-bottom:1.2rem; }
label { display:block; font-size:0.85rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--deep); margin-bottom:0.4rem; }
input, textarea, select {
width:100%; padding:12px 16px; border:1.5px solid #ddd;
border-radius:4px; font-family:'Lato',sans-serif; font-size:0.95rem;
background:#fff; color:var(--deep); transition:border-color 0.2s;
outline:none;
}
input:focus, textarea:focus, select:focus { border-color:var(--terracotta); }
textarea { resize:vertical; min-height:140px; }
.submit-btn {
background:var(--terracotta); color:#fff; border:none;
padding:14px 32px; border-radius:4px; font-family:'Lato',sans-serif;
font-size:0.9rem; font-weight:700; letter-spacing:0.05em;
cursor:pointer; transition:background 0.2s;
}
.submit-btn:hover { background:#a05a2a; }
.faq-section { background:#fff; padding:4rem 5%; }
.faq-section .inner { max-width:700px; margin:0 auto; }
.faq-item { border-bottom:1px solid #eee; padding:1.5rem 0; }
.faq-item h3 { font-family:'Playfair Display',serif; font-size:1.1rem; margin-bottom:0.5rem; cursor:pointer; }
.faq-item p { font-size:0.9rem; color:#666; margin:0; }
@media (max-width:700px) { .contact-grid { grid-template-columns:1fr; gap:2rem; } }
nav { position: sticky; top: 0; z-index: 100; background: rgba(26,18,8,0.97); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: space-between; padding: 0 5%; height: 64px; }
.nav-logo { font-family: 'Playfair Display', serif; font-size: 1.4rem; color: var(--accent); text-decoration: none; font-weight: 700; }
.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a { color: #ddd; text-decoration: none; font-size: 0.9rem; letter-spacing: 0.06em; text-transform: uppercase; transition: color 0.2s; }
.nav-links a:hover, .nav-links a.active { color: var(--accent); }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
.hamburger span { width: 24px; height: 2px; background: #ddd; display: block; transition: 0.3s; }
@media (max-width: 768px) {
.hamburger { display: flex; }
.nav-links { display: none; position: absolute; top: 64px; left: 0; right: 0; background: rgba(26,18,8,0.98); flex-direction: column; padding: 1.5rem 5%; gap: 1rem; z-index: 99; }
.nav-links.open { display: flex; }
}
footer { background: var(--deep); color: rgba(255,255,255,0.6); font-size: 0.88rem; margin-top: 4rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; padding: 3.5rem 5% 2.5rem; }
.footer-logo { font-family: 'Playfair Display', serif; font-size: 1.5rem; color: var(--accent); font-weight: 700; display: block; margin-bottom: 1rem; }
.footer-grid > div > p { line-height: 1.7; color: rgba(255,255,255,0.5); max-width: 280px; }
.footer-col h4 { color: #fff; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 1.2rem; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.footer-col ul a { color: rgba(255,255,255,0.55); text-decoration: none; transition: color 0.2s; }
.footer-col ul a:hover { color: var(--accent); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding: 1.2rem 5%; display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; }
.footer-bottom a { color: rgba(255,255,255,0.4); text-decoration: none; margin-left: 1.5rem; transition: color 0.2s; }
.footer-bottom a:hover { color: var(--accent); }
@media (max-width: 768px) {
.footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
.footer-bottom { flex-direction: column; gap: 0.8rem; text-align: center; }
}
@media (max-width: 480px) {
.footer-grid { grid-template-columns: 1fr; }
}
/* From destinacija-bali.html */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--terracotta:#c06f3a;--deep:#1a1208;--accent:#e8b96a;--light:#fdf8f2}
body{font-family:'Lato',sans-serif;background:var(--light);color:var(--deep);line-height:1.8}
nav { position: sticky; top: 0; z-index: 100; background: rgba(26,18,8,0.97); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: space-between; padding: 0 5%; height: 64px; }
.nav-logo { font-family: 'Playfair Display', serif; font-size: 1.4rem; color: var(--accent); text-decoration: none; font-weight: 700; }
.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a { color: #ddd; text-decoration: none; font-size: 0.9rem; letter-spacing: 0.06em; text-transform: uppercase; transition: color 0.2s; }
.nav-links a:hover, .nav-links a.active { color: var(--accent); }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
.hamburger span { width: 24px; height: 2px; background: #ddd; display: block; transition: 0.3s; }
@media (max-width: 768px) {
.hamburger { display: flex; }
.nav-links { display: none; position: absolute; top: 64px; left: 0; right: 0; background: rgba(26,18,8,0.98); flex-direction: column; padding: 1.5rem 5%; gap: 1rem; z-index: 99; }
.nav-links.open { display: flex; }
}
footer { background: var(--deep); color: rgba(255,255,255,0.6); font-size: 0.88rem; margin-top: 4rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; padding: 3.5rem 5% 2.5rem; }
.footer-logo { font-family: 'Playfair Display', serif; font-size: 1.5rem; color: var(--accent); font-weight: 700; display: block; margin-bottom: 1rem; }
.footer-grid > div > p { line-height: 1.7; color: rgba(255,255,255,0.5); max-width: 280px; }
.footer-col h4 { color: #fff; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 1.2rem; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.footer-col ul a { color: rgba(255,255,255,0.55); text-decoration: none; transition: color 0.2s; }
.footer-col ul a:hover { color: var(--accent); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding: 1.2rem 5%; display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; }
.footer-bottom a { color: rgba(255,255,255,0.4); text-decoration: none; margin-left: 1.5rem; transition: color 0.2s; }
.footer-bottom a:hover { color: var(--accent); }
@media (max-width: 768px) {
.footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
.footer-bottom { flex-direction: column; gap: 0.8rem; text-align: center; }
}
@media (max-width: 480px) {
.footer-grid { grid-template-columns: 1fr; }
}
/* From destinacije.html */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--terracotta: #c06f3a;
--deep: #1a1208;
--warm: #7a4f2b;
--accent: #e8b96a;
--light: #fdf8f2;
--panel: #fff;
--line: rgba(26,18,8,0.08);
--muted: #665d55;
}
body {
font-family: 'Lato', sans-serif;
background: var(--light);
color: var(--deep);
line-height: 1.7;
}
nav {
position: sticky;
top: 0;
z-index: 100;
background: rgba(26,18,8,0.97);
backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 5%;
height: 64px;
}
.nav-logo {
font-family: 'Playfair Display', serif;
font-size: 1.4rem;
color: var(--accent);
text-decoration: none;
font-weight: 700;
}
.nav-links {
display: flex;
gap: 2rem;
list-style: none;
}
.nav-links a {
color: #ddd;
text-decoration: none;
font-size: 0.9rem;
letter-spacing: 0.06em;
text-transform: uppercase;
transition: color 0.2s;
}
.nav-links a:hover,
.nav-links a.active { color: var(--accent); }
.hamburger {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
padding: 4px;
}
.hamburger span {
width: 24px;
height: 2px;
background: #ddd;
display: block;
}
.hero {
background: linear-gradient(140deg, #1f160d 0%, #3e2716 42%, #13293e 100%);
color: #fff;
padding: 5.5rem 5% 4rem;
position: relative;
overflow: hidden;
}
.hero::before {
content: "";
position: absolute;
inset: 0;
opacity: 0.08;
background-image: radial-gradient(circle, #fff 1px, transparent 1px);
background-size: 36px 36px;
}
.hero-inner {
position: relative;
z-index: 2;
max-width: 760px;
}
.eyebrow {
display: inline-block;
font-size: 0.75rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 1rem;
}
.hero h1 {
font-family: 'Playfair Display', serif;
font-size: clamp(2.4rem, 5vw, 4.2rem);
line-height: 1.08;
margin-bottom: 1rem;
}
.hero p {
color: rgba(255,255,255,0.76);
max-width: 620px;
font-size: 1.05rem;
}
.region-nav {
background: #fff;
border-bottom: 1px solid #efe7df;
padding: 1rem 5%;
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
}
.region-nav a {
text-decoration: none;
color: var(--warm);
background: #f9f1e7;
padding: 0.65rem 1rem;
border-radius: 999px;
font-size: 0.82rem;
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 700;
}
section { padding: 4.25rem 5%; }
section:nth-of-type(even) { background: #fff; }
.section-head {
max-width: 780px;
margin-bottom: 2rem;
}
.section-label {
font-size: 0.75rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--terracotta);
margin-bottom: 0.55rem;
}
.section-title {
font-family: 'Playfair Display', serif;
font-size: clamp(1.7rem, 3.8vw, 2.7rem);
line-height: 1.15;
margin-bottom: 0.8rem;
}
.section-sub {
max-width: 620px;
color: var(--muted);
}
.cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.4rem;
}
.card {
text-decoration: none;
color: inherit;
background: var(--panel);
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 8px 26px rgba(0,0,0,0.05);
transition: transform 0.22s ease, box-shadow 0.22s ease;
display: flex;
flex-direction: column;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 14px 32px rgba(0,0,0,0.1);
}
.card-top {
min-height: 138px;
padding: 1.2rem;
color: #fff;
display: flex;
align-items: flex-end;
background: linear-gradient(135deg, #165171 0%, #223b1f 100%);
}
.card-top.alt-1 { background: linear-gradient(135deg, #6a4c2d 0%, #352013 100%); }
.card-top.alt-2 { background: linear-gradient(135deg, #2a3f7d 0%, #1d2546 100%); }
.card-top.alt-3 { background: linear-gradient(135deg, #365d2b 0%, #1a3013 100%); }
.card-top.alt-4 { background: linear-gradient(135deg, #7a5c22 0%, #43310f 100%); }
.kicker {
display: inline-block;
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
opacity: 0.84;
margin-bottom: 0.7rem;
}
.card-top h3 {
font-family: 'Playfair Display', serif;
font-size: 1.24rem;
line-height: 1.24;
}
.card-body {
padding: 1.2rem;
display: flex;
flex-direction: column;
gap: 0.9rem;
flex: 1;
}
.card-body p {
color: #5b544d;
font-size: 0.95rem;
flex: 1;
}
.more {
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--terracotta);
}
.note {
margin-top: 2rem;
max-width: 920px;
background: #fff8ef;
border-left: 4px solid var(--terracotta);
border-radius: 10px;
padding: 1.4rem 1.5rem;
border: 1px solid rgba(192,111,58,0.14);
color: #5f554a;
}
.note a {
color: var(--terracotta);
text-decoration: none;
font-weight: 700;
}
footer {
background: var(--deep);
color: rgba(255,255,255,0.58);
padding: 3rem 5% 2rem;
margin-top: 4rem;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 2.2rem;
margin-bottom: 2rem;
}
.footer-logo {
font-family: 'Playfair Display', serif;
font-size: 1.4rem;
color: var(--accent);
display: block;
margin-bottom: 0.8rem;
}
.footer-col h4 {
color: #fff;
font-size: 0.78rem;
letter-spacing: 0.15em;
text-transform: uppercase;
margin-bottom: 0.9rem;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 0.45rem; }
.footer-col a,
.footer-bottom a {
color: rgba(255,255,255,0.58);
text-decoration: none;
}
.footer-col a:hover,
.footer-bottom a:hover { color: var(--accent); }
.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.08);
padding-top: 1.3rem;
display: flex;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
font-size: 0.82rem;
}
@media (max-width: 900px) {
.cards,
.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
.hamburger { display: flex; }
.nav-links {
display: none;
position: absolute;
top: 64px;
left: 0;
right: 0;
background: rgba(26,18,8,0.98);
flex-direction: column;
padding: 1.4rem 5%;
gap: 1rem;
}
.nav-links.open { display: flex; }
.cards,
.footer-grid { grid-template-columns: 1fr; }
}
/* From disclaimer.html */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--terracotta:#c06f3a;--deep:#1a1208;--accent:#e8b96a;--light:#fdf8f2}
body{font-family:'Lato',sans-serif;background:var(--light);color:var(--deep);line-height:1.8}
.page-hero{background:linear-gradient(135deg,#1a1208,#2d1a0a);padding:5rem 5% 4rem;text-align:center;color:#fff}
.page-hero h1{font-family:'Playfair Display',serif;font-size:2.5rem;margin-bottom:1rem}
.content{max-width:900px;margin:0 auto;padding:4rem 5%}
h2{font-family:'Playfair Display',serif;font-size:1.5rem;color:var(--deep);margin:2rem 0 1rem}
p{color:#555;margin-bottom:1rem}
a{color:var(--terracotta)}
ul{margin:1rem 0 1.5rem 2rem;color:#555}
li{margin-bottom:0.5rem}
nav { position: sticky; top: 0; z-index: 100; background: rgba(26,18,8,0.97); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: space-between; padding: 0 5%; height: 64px; }
.nav-logo { font-family: 'Playfair Display', serif; font-size: 1.4rem; color: var(--accent); text-decoration: none; font-weight: 700; }
.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a { color: #ddd; text-decoration: none; font-size: 0.9rem; letter-spacing: 0.06em; text-transform: uppercase; transition: color 0.2s; }
.nav-links a:hover, .nav-links a.active { color: var(--accent); }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
.hamburger span { width: 24px; height: 2px; background: #ddd; display: block; transition: 0.3s; }
@media (max-width: 768px) {
.hamburger { display: flex; }
.nav-links { display: none; position: absolute; top: 64px; left: 0; right: 0; background: rgba(26,18,8,0.98); flex-direction: column; padding: 1.5rem 5%; gap: 1rem; z-index: 99; }
.nav-links.open { display: flex; }
}
footer { background: var(--deep); color: rgba(255,255,255,0.6); font-size: 0.88rem; margin-top: 4rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; padding: 3.5rem 5% 2.5rem; }
.footer-logo { font-family: 'Playfair Display', serif; font-size: 1.5rem; color: var(--accent); font-weight: 700; display: block; margin-bottom: 1rem; }
.footer-grid > div > p { line-height: 1.7; color: rgba(255,255,255,0.5); max-width: 280px; }
.footer-col h4 { color: #fff; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 1.2rem; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.footer-col ul a { color: rgba(255,255,255,0.55); text-decoration: none; transition: color 0.2s; }
.footer-col ul a:hover { color: var(--accent); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding: 1.2rem 5%; display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; }
.footer-bottom a { color: rgba(255,255,255,0.4); text-decoration: none; margin-left: 1.5rem; transition: color 0.2s; }
.footer-bottom a:hover { color: var(--accent); }
@media (max-width: 768px) {
.footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
.footer-bottom { flex-direction: column; gap: 0.8rem; text-align: center; }
}
@media (max-width: 480px) {
.footer-grid { grid-template-columns: 1fr; }
}
/* From index.html */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--sand: #f5ede0;
--terracotta: #c06f3a;
--deep: #1a1208;
--warm: #7a4f2b;
--sky: #4a8fa8;
--light: #fdf8f2;
--accent: #e8b96a;
}
html { scroll-behavior: smooth; }
body {
font-family: 'Lato', sans-serif;
background: var(--light);
color: var(--deep);
line-height: 1.7;
}
/* NAV */
/* HERO */
.hero {
position: relative; height: 92vh; min-height: 560px;
display: flex; align-items: center; justify-content: center;
overflow: hidden; text-align: center;
}
.hero-bg {
position: absolute; inset: 0;
background: linear-gradient(135deg, #0d2233 0%, #1a3a2a 40%, #2d1a0a 100%);
}
.hero-pattern {
position: absolute; inset: 0; opacity: 0.08;
background-image: radial-gradient(circle, #fff 1px, transparent 1px);
background-size: 40px 40px;
}
.hero-overlay {
position: absolute; inset: 0;
background: radial-gradient(ellipse at center, transparent 30%, rgba(10,6,2,0.7) 100%);
}
.hero-content { position: relative; z-index: 2; padding: 0 20px; max-width: 800px; }
.hero-tag {
display: inline-block;
font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase;
color: var(--accent); border: 1px solid var(--accent);
padding: 4px 16px; border-radius: 20px; margin-bottom: 1.5rem;
animation: fadeUp 0.8s ease both;
}
.hero h1 {
font-family: 'Playfair Display', serif;
font-size: clamp(2.8rem, 7vw, 5.5rem);
color: #fff; line-height: 1.1; margin-bottom: 1.5rem;
animation: fadeUp 0.8s 0.15s ease both;
}
.hero h1 em { color: var(--accent); font-style: italic; }
.hero p {
font-size: 1.15rem; color: rgba(255,255,255,0.75);
max-width: 500px; margin: 0 auto 2.5rem;
animation: fadeUp 0.8s 0.3s ease both;
}
.hero-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
animation: fadeUp 0.8s 0.45s ease both; }
.btn-primary {
background: var(--terracotta); color: #fff;
padding: 14px 32px; border-radius: 4px;
text-decoration: none; font-weight: 700;
letter-spacing: 0.05em; font-size: 0.9rem;
transition: background 0.2s, transform 0.2s;
}
.btn-primary:hover { background: var(--warm); transform: translateY(-2px); }
.btn-outline {
border: 1.5px solid rgba(255,255,255,0.5); color: #fff;
padding: 14px 32px; border-radius: 4px;
text-decoration: none; font-weight: 400;
font-size: 0.9rem; transition: border-color 0.2s, transform 0.2s;
}
.btn-outline:hover { border-color: var(--accent); transform: translateY(-2px); }
.scroll-hint {
position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
z-index: 2; animation: bounce 2s infinite;
}
.scroll-hint span {
display: block; width: 24px; height: 24px;
border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
transform: rotate(45deg); margin: -8px auto 0;
}
/* STATS BAR */
.stats-bar {
background: var(--terracotta); color: #fff;
display: flex; justify-content: space-around; flex-wrap: wrap;
padding: 1.2rem 5%; gap: 1rem;
}
.stat { text-align: center; }
.stat strong { display: block; font-family: 'Playfair Display', serif; font-size: 1.8rem; }
.stat span { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.85; }
/* SECTIONS */
section { padding: 5rem 5%; }
.section-label {
font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase;
color: var(--terracotta); margin-bottom: 0.5rem;
}
.section-title {
font-family: 'Playfair Display', serif;
font-size: clamp(1.8rem, 4vw, 2.8rem);
color: var(--deep); margin-bottom: 1rem; line-height: 1.2;
}
.section-sub { color: #666; max-width: 560px; margin-bottom: 3rem; }
/* FEATURED DESTINATIONS */
.dest-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 280px 280px;
gap: 12px;
}
.dest-card {
position: relative; overflow: hidden; border-radius: 6px;
cursor: pointer; text-decoration: none;
}
.dest-card:first-child { grid-row: 1 / 3; }
.dest-bg {
position: absolute; inset: 0;
background-size: cover; background-position: center;
transition: transform 0.5s ease;
}
.dest-card:hover .dest-bg { transform: scale(1.06); }
.dest-overlay {
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(10,6,2,0.85) 0%, transparent 60%);
}
.dest-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.5rem; }
.dest-continent {
font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase;
color: var(--accent); margin-bottom: 0.3rem;
}
.dest-name {
font-family: 'Playfair Display', serif;
font-size: 1.4rem; color: #fff; line-height: 1.2;
}
.dest-card:first-child .dest-name { font-size: 2rem; }
.dest-card:first-child .dest-continent { font-size: 0.8rem; }
/* ARTICLES */
.articles-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
@media (max-width: 1024px) { .articles-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .articles-grid { grid-template-columns: 1fr; } }
.article-card {
background: #fff; border-radius: 8px; overflow: hidden;
box-shadow: 0 2px 12px rgba(0,0,0,0.07);
transition: transform 0.25s, box-shadow 0.25s;
text-decoration: none; color: inherit;
display: flex; flex-direction: column;
}
.article-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.article-img {
height: 200px; background-size: cover; background-position: center;
position: relative;
}
.article-cat {
position: absolute; top: 1rem; left: 1rem;
background: var(--terracotta); color: #fff;
font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
padding: 3px 10px; border-radius: 3px;
}
.article-body { padding: 1.4rem; flex: 1; display: flex; flex-direction: column; }
.article-meta { font-size: 0.78rem; color: #999; margin-bottom: 0.6rem; }
.article-body h3 {
font-family: 'Playfair Display', serif;
font-size: 1.15rem; color: var(--deep);
margin-bottom: 0.7rem; line-height: 1.35;
}
.article-body p { font-size: 0.9rem; color: #666; flex: 1; }
.read-more {
display: inline-block; margin-top: 1rem;
font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--terracotta);
text-decoration: none;
}
/* AD PLACEHOLDER */
/* TIPS SECTION */
.tips-bg { background: var(--deep); }
.tips-bg .section-title { color: #fff; }
.tips-bg .section-label { color: var(--accent); }
.tips-bg .section-sub { color: rgba(255,255,255,0.6); }
.tips-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
max-width: 1100px;
margin: 0 auto;
}
@media (max-width: 900px) { .tips-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .tips-grid { grid-template-columns: 1fr; } }
.tip-card {
background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
border-radius: 8px; padding: 1.8rem;
transition: background 0.2s;
}
.tip-card:hover { background: rgba(255,255,255,0.09); }
.tip-icon { font-size: 2rem; margin-bottom: 1rem; }
.tip-card h3 { font-family: 'Playfair Display', serif; color: var(--accent); margin-bottom: 0.6rem; }
.tip-card p { color: rgba(255,255,255,0.65); font-size: 0.9rem; }
/* NEWSLETTER */
.newsletter {
background: linear-gradient(135deg, var(--terracotta), var(--warm));
color: #fff; text-align: center; padding: 5rem 5%;
}
.newsletter h2 { font-family: 'Playfair Display', serif; font-size: 2.2rem; margin-bottom: 0.8rem; }
.newsletter p { opacity: 0.85; margin-bottom: 2rem; }
.nl-form { display: flex; gap: 0.5rem; max-width: 480px; margin: 0 auto; flex-wrap: wrap; justify-content: center; }
.nl-form input {
flex: 1; min-width: 220px; padding: 12px 18px;
border: none; border-radius: 4px; font-size: 0.95rem;
outline: none;
}
.nl-form button {
background: var(--deep); color: var(--accent);
padding: 12px 24px; border: none; border-radius: 4px;
font-weight: 700; font-size: 0.9rem; cursor: pointer;
transition: opacity 0.2s;
}
.nl-form button:hover { opacity: 0.85; }
/* FOOTER */
footer {
background: var(--deep); color: rgba(255,255,255,0.6);
padding: 4rem 5% 2rem;
}
.footer-grid {
display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 3rem; margin-bottom: 3rem;
}
.footer-logo {
font-family: 'Playfair Display', serif;
font-size: 1.5rem; color: var(--accent);
margin-bottom: 1rem; display: block;
}
footer p { font-size: 0.88rem; line-height: 1.7; }
.footer-col h4 {
color: #fff; font-size: 0.8rem; letter-spacing: 0.15em;
text-transform: uppercase; margin-bottom: 1rem;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 0.5rem; }
.footer-col a { color: rgba(255,255,255,0.55); text-decoration: none; font-size: 0.88rem; transition: color 0.2s; }
.footer-col a:hover { color: var(--accent); }
.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.08);
padding-top: 2rem; display: flex; justify-content: space-between;
flex-wrap: wrap; gap: 1rem; font-size: 0.82rem;
}
.footer-bottom a { color: rgba(255,255,255,0.5); text-decoration: none; margin-left: 1.2rem; }
.footer-bottom a:hover { color: var(--accent); }
/* ANIMATIONS */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes bounce {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(-10px); }
}
/* RESPONSIVE */
@media (max-width: 768px) {
.dest-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
.dest-card:first-child { grid-column: 1 / 3; grid-row: auto; }
.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
.dest-grid { grid-template-columns: 1fr; }
.dest-card:first-child { grid-column: auto; }
.footer-grid { grid-template-columns: 1fr; }
.stats-bar { flex-direction: column; align-items: center; }
}
.dest-thumb, .art-thumb, .dest-feat-card, .art-card .art-thumb { position: relative; overflow: hidden; }
.thumb-photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform 0.5s;
}
.dest-card:hover .thumb-photo,
.art-card:hover .thumb-photo,
.dest-feat-card:hover .thumb-photo { transform: scale(1.06); }
.article-img { position: relative; overflow: hidden; }
.article-img img.thumb-photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform 0.5s;
}
.article-card:hover .article-img img { transform: scale(1.06); }
.dest-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dest-bg img {
width: 100%; height: 100%;
object-fit: cover; object-position: center;
display: block;
transition: transform 0.5s;
}
.dest-card:hover .dest-bg img { transform: scale(1.07); }
nav { position: sticky; top: 0; z-index: 100; background: rgba(26,18,8,0.97); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: space-between; padding: 0 5%; height: 64px; }
.nav-logo { font-family: 'Playfair Display', serif; font-size: 1.4rem; color: var(--accent); text-decoration: none; font-weight: 700; }
.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a { color: #ddd; text-decoration: none; font-size: 0.9rem; letter-spacing: 0.06em; text-transform: uppercase; transition: color 0.2s; }
.nav-links a:hover, .nav-links a.active { color: var(--accent); }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
.hamburger span { width: 24px; height: 2px; background: #ddd; display: block; transition: 0.3s; }
@media (max-width: 768px) {
.hamburger { display: flex; }
.nav-links { display: none; position: absolute; top: 64px; left: 0; right: 0; background: rgba(26,18,8,0.98); flex-direction: column; padding: 1.5rem 5%; gap: 1rem; z-index: 99; }
.nav-links.open { display: flex; }
}
/* From planer-putnog-budzeta.html */
:root {
--sand: #f5ede0;
--terracotta: #c06f3a;
--deep: #1a1208;
--warm: #7a4f2b;
--light: #fdf8f2;
--panel: #fffdf9;
}
* { box-sizing: border-box; }
body {
margin: 0;
font-family: "Lato", sans-serif;
background: linear-gradient(180deg, #fdf8f2 0%, #f6eee3 100%);
color: var(--deep);
line-height: 1.7;
}
nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 22px 32px;
border-bottom: 1px solid rgba(26, 18, 8, 0.08);
background: rgba(253, 248, 242, 0.96);
position: sticky;
top: 0;
backdrop-filter: blur(8px);
}
.nav-logo {
color: var(--deep);
text-decoration: none;
font-family: "Playfair Display", serif;
font-size: 1.25rem;
font-weight: 700;
}
.nav-links {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 14px;
margin: 0;
padding: 0;
}
.nav-links a {
text-decoration: none;
color: var(--warm);
font-weight: 700;
}
.hamburger { display: none; }
.shell {
max-width: 1120px;
margin: 0 auto;
padding: 42px 20px 72px;
}
.hero {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 28px;
align-items: center;
background: rgba(255, 255, 255, 0.82);
border: 1px solid rgba(26, 18, 8, 0.08);
border-radius: 28px;
padding: 32px;
box-shadow: 0 18px 44px rgba(44, 25, 7, 0.08);
}
.eyebrow {
display: inline-block;
font-size: 0.76rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--terracotta);
margin-bottom: 12px;
font-weight: 700;
}
h1, h2 {
font-family: "Playfair Display", serif;
line-height: 1.1;
margin: 0 0 14px;
}
h1 { font-size: clamp(2.1rem, 4vw, 3.4rem); }
h2 { font-size: 1.6rem; margin-top: 0; }
.hero p, .card p, .notes li { color: #5d4937; }
.grid {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 24px;
margin-top: 28px;
}
.card {
background: var(--panel);
border: 1px solid rgba(26, 18, 8, 0.08);
border-radius: 24px;
padding: 26px;
box-shadow: 0 14px 36px rgba(44, 25, 7, 0.06);
}
.field-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-top: 18px;
}
.field {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 14px;
}
.field label { font-weight: 700; color: var(--deep); }
.field input {
width: 100%;
padding: 13px 14px;
border-radius: 14px;
border: 1px solid rgba(26, 18, 8, 0.14);
font: inherit;
background: #fff;
}
.btn {
display: inline-block;
border: none;
border-radius: 999px;
padding: 14px 22px;
background: var(--terracotta);
color: #fff;
font: inherit;
font-weight: 700;
cursor: pointer;
margin-top: 10px;
}
.result {
background: #fff6ea;
border: 1px solid rgba(192, 111, 58, 0.22);
border-radius: 18px;
padding: 18px;
margin-top: 18px;
}
.result strong {
display: block;
font-size: 1.4rem;
margin-bottom: 8px;
color: var(--deep);
}
.notes {
margin: 0;
padding-left: 20px;
}
.notes li { margin-bottom: 10px; }
@media (max-width: 900px) {
.hero, .grid, .field-grid { grid-template-columns: 1fr; }
nav { padding: 18px 20px; }
.nav-links { gap: 10px; }
}
/* From privacy.html */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { --sand:#f5ede0;--terracotta:#c06f3a;--deep:#1a1208;--accent:#e8b96a;--light:#fdf8f2; }
body { font-family:'Lato',sans-serif; background:var(--light); color:var(--deep); line-height:1.8; }
nav { background:rgba(26,18,8,0.97); display:flex; align-items:center; justify-content:space-between; padding:0 5%; height:64px; }
.page-header { background:var(--deep); padding:4rem 5%; color:#fff; }
.page-header .label { font-size:0.75rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--accent); margin-bottom:0.5rem; }
.page-header h1 { font-family:'Playfair Display',serif; font-size:2.5rem; }
.content { max-width:800px; margin:0 auto; padding:4rem 5%; }
h2 { font-family:'Playfair Display',serif; font-size:1.5rem; color:var(--deep); margin:2.5rem 0 1rem; }
p { margin-bottom:1rem; color:#444; }
ul { margin:1rem 0 1rem 2rem; color:#444; }
li { margin-bottom:0.5rem; }
a { color:var(--terracotta); }
nav { position: sticky; top: 0; z-index: 100; background: rgba(26,18,8,0.97); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: space-between; padding: 0 5%; height: 64px; }
.nav-logo { font-family: 'Playfair Display', serif; font-size: 1.4rem; color: var(--accent); text-decoration: none; font-weight: 700; }
.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a { color: #ddd; text-decoration: none; font-size: 0.9rem; letter-spacing: 0.06em; text-transform: uppercase; transition: color 0.2s; }
.nav-links a:hover, .nav-links a.active { color: var(--accent); }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
.hamburger span { width: 24px; height: 2px; background: #ddd; display: block; transition: 0.3s; }
@media (max-width: 768px) {
.hamburger { display: flex; }
.nav-links { display: none; position: absolute; top: 64px; left: 0; right: 0; background: rgba(26,18,8,0.98); flex-direction: column; padding: 1.5rem 5%; gap: 1rem; z-index: 99; }
.nav-links.open { display: flex; }
}
footer { background: var(--deep); color: rgba(255,255,255,0.6); font-size: 0.88rem; margin-top: 4rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; padding: 3.5rem 5% 2.5rem; }
.footer-logo { font-family: 'Playfair Display', serif; font-size: 1.5rem; color: var(--accent); font-weight: 700; display: block; margin-bottom: 1rem; }
.footer-grid > div > p { line-height: 1.7; color: rgba(255,255,255,0.5); max-width: 280px; }
.footer-col h4 { color: #fff; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 1.2rem; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.footer-col ul a { color: rgba(255,255,255,0.55); text-decoration: none; transition: color 0.2s; }
.footer-col ul a:hover { color: var(--accent); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding: 1.2rem 5%; display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; }
.footer-bottom a { color: rgba(255,255,255,0.4); text-decoration: none; margin-left: 1.5rem; transition: color 0.2s; }
.footer-bottom a:hover { color: var(--accent); }
@media (max-width: 768px) {
.footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
.footer-bottom { flex-direction: column; gap: 0.8rem; text-align: center; }
}
@media (max-width: 480px) {
.footer-grid { grid-template-columns: 1fr; }
}
/* From savjeti.html */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--terracotta: #c06f3a; --deep: #1a1208;
--warm: #7a4f2b; --accent: #e8b96a; --light: #fdf8f2;
}
body { font-family: 'Lato', sans-serif; background: var(--light); color: var(--deep); line-height: 1.7; }
/* NAV */
/* HERO */
.page-hero {
background: linear-gradient(135deg, #0d2233 0%, #1a3a2a 50%, #2d1a0a 100%);
padding: 5rem 5% 4rem; text-align: center; position: relative; overflow: hidden;
}
.page-hero::before { content: ''; position: absolute; inset: 0; opacity: 0.06; background-image: radial-gradient(circle, #fff 1px, transparent 1px); background-size: 36px 36px; }
.page-hero-content { position: relative; z-index: 2; }
.page-label { font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.8rem; }
.page-hero h1 { font-family: 'Playfair Display', serif; font-size: clamp(2.2rem, 5vw, 3.8rem); color: #fff; margin-bottom: 1rem; line-height: 1.15; }
.page-hero h1 em { color: var(--accent); font-style: italic; }
.page-hero p { color: rgba(255,255,255,0.65); font-size: 1.05rem; max-width: 520px; margin: 0 auto; }
/* QUICK TIPS STRIP */
.tips-strip { background: var(--terracotta); display: flex; justify-content: space-around; flex-wrap: wrap; padding: 1.4rem 5%; gap: 1rem; }
.strip-item { display: flex; align-items: center; gap: 0.6rem; color: #fff; font-size: 0.88rem; }
.strip-item .icon { font-size: 1.2rem; }
/* CATEGORY SECTION */
.cat-section { padding: 4rem 5%; }
.cat-section:nth-child(even) { background: #fff; }
.section-label { font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--terracotta); margin-bottom: 0.5rem; }
.section-title { font-family: 'Playfair Display', serif; font-size: clamp(1.6rem, 3.5vw, 2.4rem); color: var(--deep); margin-bottom: 0.8rem; }
.section-sub { color: #777; max-width: 600px; margin-bottom: 2.5rem; }
/* TIP CARDS GRID */
.tips-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 1100px; margin: 0 auto; }
.tip-card { background: #fff; border-radius: 10px; padding: 1.8rem; box-shadow: 0 2px 14px rgba(0,0,0,0.07); transition: transform 0.22s, box-shadow 0.22s; text-decoration: none; color: inherit; display: flex; flex-direction: column; border-top: 3px solid var(--terracotta); }
.tip-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.tip-icon { font-size: 2.2rem; margin-bottom: 1rem; }
.tip-card h3 { font-family: 'Playfair Display', serif; font-size: 1.15rem; color: var(--deep); margin-bottom: 0.6rem; }
.tip-card p { font-size: 0.9rem; color: #666; flex: 1; margin-bottom: 1rem; }
.tip-link { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--terracotta); }
/* DARK SECTION */
.dark-section { background: var(--deep); padding: 4rem 5%; }
.dark-section .section-title { color: #fff; }
.dark-section .section-label { color: var(--accent); }
.dark-section .section-sub { color: rgba(255,255,255,0.6); }
.checklist-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; max-width: 1100px; margin: 0 auto; }
.checklist-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 1.8rem; }
.checklist-card h3 { font-family: 'Playfair Display', serif; color: var(--accent); margin-bottom: 1.2rem; font-size: 1.1rem; }
.checklist-card ul { list-style: none; }
.checklist-card li { font-size: 0.88rem; color: rgba(255,255,255,0.7); padding: 0.35rem 0; border-bottom: 1px solid rgba(255,255,255,0.06); display: flex; align-items: flex-start; gap: 0.6rem; }
.checklist-card li:last-child { border-bottom: none; }
.check { color: var(--accent); flex-shrink: 0; }
/* BIG TIPS */
.big-tips { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.big-tip { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 14px rgba(0,0,0,0.07); text-decoration: none; color: inherit; display: flex; transition: transform 0.22s; }
.big-tip:hover { transform: translateY(-3px); }
.big-tip-accent { width: 6px; background: var(--terracotta); flex-shrink: 0; }
.big-tip-body { padding: 1.8rem; }
.big-tip-num { font-family: 'Playfair Display', serif; font-size: 2.5rem; color: #f0e8d8; font-weight: 700; line-height: 1; margin-bottom: 0.5rem; }
.big-tip-body h3 { font-family: 'Playfair Display', serif; font-size: 1.15rem; color: var(--deep); margin-bottom: 0.6rem; }
.big-tip-body p { font-size: 0.9rem; color: #666; }
/* ARTICLE LIST */
.article-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 1100px; margin: 0 auto; }
.art-card { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.07); text-decoration: none; color: inherit; transition: transform 0.22s, box-shadow 0.22s; display: flex; flex-direction: column; }
.art-card:hover { transform: translateY(-4px); box-shadow: 0 8px 22px rgba(0,0,0,0.12); }
.art-thumb { height: 180px; position: relative; }
.art-thumb-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.art-thumb-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,6,2,0.5) 0%, transparent 55%); }
.art-cat { position: absolute; top: 1rem; left: 1rem; background: var(--terracotta); color: #fff; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 10px; border-radius: 3px; }
.art-body { padding: 1.3rem; flex: 1; display: flex; flex-direction: column; }
.art-meta { font-size: 0.78rem; color: #aaa; margin-bottom: 0.5rem; }
.art-body h3 { font-family: 'Playfair Display', serif; font-size: 1.05rem; color: var(--deep); margin-bottom: 0.6rem; line-height: 1.35; flex: 1; }
.art-link { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--terracotta); margin-top: 0.8rem; }
/* NEWSLETTER */
.newsletter { background: linear-gradient(135deg, var(--terracotta), var(--warm)); color: #fff; text-align: center; padding: 4rem 5%; }
.newsletter h2 { font-family: 'Playfair Display', serif; font-size: 2rem; margin-bottom: 0.8rem; }
.newsletter p { opacity: 0.85; margin-bottom: 2rem; }
.nl-form { display: flex; gap: 0.5rem; max-width: 460px; margin: 0 auto; flex-wrap: wrap; justify-content: center; }
.nl-form input { flex: 1; min-width: 210px; padding: 12px 18px; border: none; border-radius: 4px; font-size: 0.95rem; outline: none; }
.nl-form button { background: var(--deep); color: var(--accent); padding: 12px 24px; border: none; border-radius: 4px; font-weight: 700; font-size: 0.9rem; cursor: pointer; }
/* FOOTER */
footer { background: var(--deep); color: rgba(255,255,255,0.5); padding: 3rem 5% 2rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem; margin-bottom: 2.5rem; }
.footer-logo { font-family: 'Playfair Display', serif; font-size: 1.4rem; color: var(--accent); display: block; margin-bottom: 0.8rem; }
footer p { font-size: 0.87rem; }
.footer-col h4 { color: #fff; font-size: 0.78rem; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 0.8rem; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 0.45rem; }
.footer-col a { color: rgba(255,255,255,0.5); text-decoration: none; font-size: 0.87rem; transition: color 0.2s; }
.footer-col a:hover { color: var(--accent); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 1.5rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.8rem; font-size: 0.82rem; }
.footer-bottom a { color: rgba(255,255,255,0.45); text-decoration: none; margin-left: 1.2rem; }
.footer-bottom a:hover { color: var(--accent); }
@media (max-width: 768px) {
.tips-grid { grid-template-columns: 1fr 1fr; }
.article-list { grid-template-columns: 1fr 1fr; }
.big-tips { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } .tips-grid { grid-template-columns: 1fr; } .article-list { grid-template-columns: 1fr; } }
.thumb-photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform 0.5s;
}
.dest-card:hover .thumb-photo,
.art-card:hover .thumb-photo,
.dest-feat-card:hover .thumb-photo { transform: scale(1.06); }
.dest-thumb-bg img, .art-thumb-bg img, .dest-feat-bg img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform 0.5s;
}
.dest-card:hover .dest-thumb-bg img,
.art-card:hover .art-thumb-bg img,
.dest-feat-card:hover .dest-feat-bg img { transform: scale(1.06); }
nav { position: sticky; top: 0; z-index: 100; background: rgba(26,18,8,0.97); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: space-between; padding: 0 5%; height: 64px; }
.nav-logo { font-family: 'Playfair Display', serif; font-size: 1.4rem; color: var(--accent); text-decoration: none; font-weight: 700; }
.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a { color: #ddd; text-decoration: none; font-size: 0.9rem; letter-spacing: 0.06em; text-transform: uppercase; transition: color 0.2s; }
.nav-links a:hover, .nav-links a.active { color: var(--accent); }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
.hamburger span { width: 24px; height: 2px; background: #ddd; display: block; transition: 0.3s; }
@media (max-width: 768px) {
.hamburger { display: flex; }
.nav-links { display: none; position: absolute; top: 64px; left: 0; right: 0; background: rgba(26,18,8,0.98); flex-direction: column; padding: 1.5rem 5%; gap: 1rem; z-index: 99; }
.nav-links.open { display: flex; }
}
/* From urednicki-principi.html */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { --terracotta:#c06f3a; --deep:#1a1208; --accent:#e8b96a; --light:#fdf8f2; }
body { font-family:'Lato',sans-serif; background:var(--light); color:var(--deep); line-height:1.8; }
nav { position: sticky; top: 0; z-index: 100; background: rgba(26,18,8,0.97); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: space-between; padding: 0 5%; height: 64px; }
.nav-logo { font-family:'Playfair Display',serif; font-size:1.4rem; color:var(--accent); text-decoration:none; font-weight:700; }
.nav-links { display:flex; gap:2rem; list-style:none; }
.nav-links a { color:#ddd; text-decoration:none; font-size:0.9rem; letter-spacing:0.06em; text-transform:uppercase; transition:color 0.2s; }
.nav-links a:hover, .nav-links a.active { color:var(--accent); }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:4px; }
.hamburger span { width:24px; height:2px; background:#ddd; display:block; transition:0.3s; }
.hero { background:linear-gradient(135deg,#1a1208,#3a2010); padding:5rem 5% 4rem; color:#fff; text-align:center; }
.hero .label { font-size:0.75rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--accent); margin-bottom:0.9rem; }
.hero h1 { font-family:'Playfair Display',serif; font-size:clamp(2rem,5vw,3.4rem); margin-bottom:1rem; }
.hero p { max-width:760px; margin:0 auto; color:rgba(255,255,255,0.75); }
.content { max-width:1040px; margin:0 auto; padding:4rem 5%; }
.intro-grid { display:grid; grid-template-columns:1.1fr 0.9fr; gap:2rem; margin-bottom:3rem; }
.card { background:#fff; border-radius:10px; padding:1.8rem; box-shadow:0 2px 12px rgba(0,0,0,0.07); }
.card h2, .section h2 { font-family:'Playfair Display',serif; font-size:1.7rem; margin-bottom:1rem; color:var(--deep); }
.card p, .section p { color:#555; margin-bottom:1rem; }
.section { margin-bottom:2.5rem; }
.principles { display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; margin:1.5rem 0 2rem; }
.principle { background:#fff; border-radius:10px; padding:1.5rem; border-top:3px solid var(--terracotta); box-shadow:0 2px 10px rgba(0,0,0,0.06); }
.principle h3 { font-family:'Playfair Display',serif; font-size:1.15rem; margin-bottom:0.6rem; }
.principle p { color:#666; font-size:0.95rem; margin:0; }
.timeline { list-style:none; display:flex; flex-direction:column; gap:1rem; }
.timeline li { background:#fff; border-radius:10px; padding:1.2rem 1.3rem; box-shadow:0 2px 10px rgba(0,0,0,0.06); border-left:4px solid var(--accent); }
.timeline strong { color:var(--deep); display:block; margin-bottom:0.3rem; }
.note { background:#fff8ee; border-left:4px solid var(--accent); padding:1.1rem 1.3rem; border-radius:0 8px 8px 0; margin:1.5rem 0; }
.cta { background:var(--terracotta); color:#fff; border-radius:10px; padding:2.2rem; text-align:center; margin-top:3rem; }
.cta h2 { color:#fff; margin-bottom:0.8rem; }
.cta a { display:inline-block; margin-top:1rem; background:#fff; color:var(--terracotta); text-decoration:none; padding:12px 24px; border-radius:4px; font-weight:700; }
footer { background: var(--deep); color: rgba(255,255,255,0.6); font-size: 0.88rem; margin-top: 4rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; padding: 3.5rem 5% 2.5rem; }
.footer-logo { font-family: 'Playfair Display', serif; font-size: 1.5rem; color: var(--accent); font-weight: 700; display: block; margin-bottom: 1rem; }
.footer-grid > div > p { line-height: 1.7; color: rgba(255,255,255,0.5); max-width: 280px; }
.footer-col h4 { color: #fff; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 1.2rem; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.footer-col ul a { color: rgba(255,255,255,0.55); text-decoration: none; transition: color 0.2s; }
.footer-col ul a:hover { color: var(--accent); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding: 1.2rem 5%; display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; }
.footer-bottom a { color: rgba(255,255,255,0.4); text-decoration: none; margin-left: 1.5rem; transition: color 0.2s; }
.footer-bottom a:hover { color: var(--accent); }
@media (max-width: 900px) {
.intro-grid, .principles { grid-template-columns:1fr; }
}
@media (max-width: 768px) {
.hamburger { display:flex; }
.nav-links { display:none; position:absolute; top:64px; left:0; right:0; background:rgba(26,18,8,0.98); flex-direction:column; padding:1.5rem 5%; gap:1rem; z-index:99; }
.nav-links.open { display:flex; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
.footer-bottom { flex-direction: column; gap: 0.8rem; text-align: center; }
}
@media (max-width: 480px) {
.footer-grid { grid-template-columns: 1fr; }
}
/* From uslovi.html */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--terracotta:#c06f3a;--deep:#1a1208;--accent:#e8b96a;--light:#fdf8f2}
body{font-family:'Lato',sans-serif;background:var(--light);color:var(--deep);line-height:1.8}
.page-hero{background:linear-gradient(135deg,#1a1208,#2d1a0a);padding:5rem 5% 4rem;text-align:center;color:#fff}
.page-hero h1{font-family:'Playfair Display',serif;font-size:2.5rem;margin-bottom:1rem}
.page-hero p{color:rgba(255,255,255,0.7);font-size:1rem}
.content{max-width:900px;margin:0 auto;padding:4rem 5%}
.content .last-updated{font-size:0.82rem;color:#999;margin-bottom:2.5rem;padding-bottom:1.5rem;border-bottom:1px solid #eee}
h2{font-family:'Playfair Display',serif;font-size:1.5rem;color:var(--deep);margin:2.5rem 0 1rem}
p{color:#555;margin-bottom:1rem}
a{color:var(--terracotta)}
ul{margin:1rem 0 1.5rem 2rem;color:#555}
li{margin-bottom:0.5rem}
nav { position: sticky; top: 0; z-index: 100; background: rgba(26,18,8,0.97); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: space-between; padding: 0 5%; height: 64px; }
.nav-logo { font-family: 'Playfair Display', serif; font-size: 1.4rem; color: var(--accent); text-decoration: none; font-weight: 700; }
.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a { color: #ddd; text-decoration: none; font-size: 0.9rem; letter-spacing: 0.06em; text-transform: uppercase; transition: color 0.2s; }
.nav-links a:hover, .nav-links a.active { color: var(--accent); }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
.hamburger span { width: 24px; height: 2px; background: #ddd; display: block; transition: 0.3s; }
@media (max-width: 768px) {
.hamburger { display: flex; }
.nav-links { display: none; position: absolute; top: 64px; left: 0; right: 0; background: rgba(26,18,8,0.98); flex-direction: column; padding: 1.5rem 5%; gap: 1rem; z-index: 99; }
.nav-links.open { display: flex; }
}
footer { background: var(--deep); color: rgba(255,255,255,0.6); font-size: 0.88rem; margin-top: 4rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; padding: 3.5rem 5% 2.5rem; }
.footer-logo { font-family: 'Playfair Display', serif; font-size: 1.5rem; color: var(--accent); font-weight: 700; display: block; margin-bottom: 1rem; }
.footer-grid > div > p { line-height: 1.7; color: rgba(255,255,255,0.5); max-width: 280px; }
.footer-col h4 { color: #fff; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 1.2rem; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.footer-col ul a { color: rgba(255,255,255,0.55); text-decoration: none; transition: color 0.2s; }
.footer-col ul a:hover { color: var(--accent); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding: 1.2rem 5%; display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; }
.footer-bottom a { color: rgba(255,255,255,0.4); text-decoration: none; margin-left: 1.5rem; transition: color 0.2s; }
.footer-bottom a:hover { color: var(--accent); }
@media (max-width: 768px) {
.footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
.footer-bottom { flex-direction: column; gap: 0.8rem; text-align: center; }
}
@media (max-width: 480px) {
.footer-grid { grid-template-columns: 1fr; }
}
/* === Unified Mozaik shell === */
:root {
--sand: #f5ede0;
--terracotta: #c06f3a;
--deep: #1a1208;
--warm: #7a4f2b;
--sky: #4a8fa8;
--light: #fdf8f2;
--accent: #e8b96a;
--panel: #fffdf9;
}
*,
*::before,
*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: "Lato", sans-serif;
background: var(--light);
color: var(--deep);
line-height: 1.75;
}
a { color: inherit; }
img { max-width: 100%; }
.site-header {
position: sticky;
top: 0;
z-index: 1000;
background: rgba(26, 18, 8, 0.97);
backdrop-filter: blur(8px);
}
.site-nav {
min-height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 0 5%;
}
.nav-logo {
font-family: "Playfair Display", serif;
font-size: 1.4rem;
color: var(--accent);
text-decoration: none;
font-weight: 700;
white-space: nowrap;
}
.nav-links {
display: flex;
align-items: center;
gap: 1.35rem;
list-style: none;
margin: 0;
padding: 0;
}
.nav-links a {
color: #ddd;
text-decoration: none;
font-size: 0.86rem;
letter-spacing: 0.04em;
text-transform: uppercase;
transition: color 0.2s;
}
.nav-links a:hover,
.nav-links a:focus { color: var(--accent); }
.nav-toggle {
display: none;
flex-direction: column;
gap: 5px;
border: 0;
background: transparent;
padding: 7px;
cursor: pointer;
}
.nav-toggle span {
width: 24px;
height: 2px;
background: #ddd;
display: block;
}
.site-main {
min-height: 60vh;
}
.site-main > .shell,
.content-shell {
max-width: 1120px;
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
}
.article-hero {
margin-top: 0;
}
.article-body,
.legal-content,
.page-content {
font-size: 1rem;
}
.article-body p,
.legal-content p,
.page-content p {
color: #4f4339;
}
.editor-note {
max-width: 1100px;
margin: 2rem auto;
padding: 1rem 1.2rem;
border-left: 4px solid var(--terracotta);
background: #fff8ee;
color: #5d4937;
border-radius: 0 8px 8px 0;
}
.editor-note strong { color: var(--deep); }
.site-footer {
background: var(--deep);
color: rgba(255,255,255,0.6);
font-size: 0.88rem;
margin-top: 4rem;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 3rem;
padding: 3.5rem 5% 2.5rem;
}
.footer-logo {
font-family: "Playfair Display", serif;
font-size: 1.5rem;
color: var(--accent);
font-weight: 700;
display: block;
margin-bottom: 1rem;
}
.footer-grid p {
line-height: 1.7;
color: rgba(255,255,255,0.55);
max-width: 360px;
}
.footer-col h4 {
color: #fff;
font-size: 0.75rem;
letter-spacing: 0.12em;
text-transform: uppercase;
margin: 0 0 1.2rem;
}
.footer-col ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.6rem;
margin: 0;
padding: 0;
}
.footer-col ul a,
.footer-bottom a {
color: rgba(255,255,255,0.6);
text-decoration: none;
transition: color 0.2s;
}
.footer-col ul a:hover,
.footer-bottom a:hover { color: var(--accent); }
.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.08);
padding: 1.2rem 5%;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
font-size: 0.8rem;
}
.footer-bottom a { margin-left: 1.5rem; }
.cookie-banner {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
background: rgba(26,18,8,0.97);
color: #fff;
padding: 1rem 5%;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
border-top: 2px solid var(--terracotta);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner p {
margin: 0;
font-size: 0.88rem;
line-height: 1.5;
max-width: 760px;
}
.cookie-banner a { color: var(--accent); }
.cookie-banner button {
background: var(--terracotta);
color: #fff;
border: 0;
padding: 10px 22px;
border-radius: 4px;
font-weight: 700;
cursor: pointer;
}
.cookie-banner button.secondary {
background: transparent;
color: #ddd;
border: 1px solid #666;
}
@media (max-width: 900px) {
.nav-toggle { display: flex; }
.nav-links {
display: none;
position: absolute;
top: 64px;
left: 0;
right: 0;
background: rgba(26,18,8,0.98);
flex-direction: column;
align-items: flex-start;
padding: 1.25rem 5%;
gap: 0.9rem;
}
.nav-links.open { display: flex; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
.footer-bottom { flex-direction: column; text-align: center; }
.footer-bottom a { margin: 0 0.75rem; }
}
@media (max-width: 560px) {
.footer-grid { grid-template-columns: 1fr; }
.site-nav { padding: 0 20px; }
}