/* ===================================================================
NeMo.si — Neskončne Možnosti · V2
Celestial / astrology redesign (v3). Figma hero, starrier sky.
Fonts: Lora (display, incl. italic) + Plus Jakarta Sans (UI/body).
=================================================================== */
/* Fonts (Playfair Display + Barlow) are loaded via
tags in each page's , preceded by — not via
@import here, since @import delays font discovery behind an extra
stylesheet round-trip. See any page's for the exact tags. */
:root {
--plum-900: #141414; /* dark grey — page background, darkest */
--plum-800: #1E1E1E; /* dark grey — card backgrounds, mid-tone */
--plum-700: #2A2A2A; /* grey mid */
--plum-600: #C9A85C; /* gold — main linework, CTA */
--plum-400: #E7CE8E; /* gold bright — glows, highlights */
--lav-200: #E7CE8E; /* gold bright */
--lav-100: #EFEFEF; /* light grey */
--lav-050: #F7F7F7; /* near white */
--cream: #F4EDDD; /* primary text */
--ink: #1E1E1E; /* dark grey — text on light */
--blush: #E7CE8E; /* gold bright */
--peach: #F4EDDD; /* cream */
--pink: #C9A85C; /* gold */
--star: #F4EDDD; /* cream */
--cta-a: #C9A85C; /* gold */
--cta-b: #E7CE8E; /* gold bright */
--green: #4FAE73; /* availability dot */
--cream-bg: #EFEFEF; /* light grey */
--cream-2: #B9B19C; /* cream dim */
--cream-ink: #1E1E1E; /* dark grey */
--cream-soft:#2A2A2A; /* grey mid */
--cream-acc: #C9A85C; /* gold */
--maxw: 1360px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 110%; scroll-behavior: smooth; scroll-padding-top: 80px; overflow-x: hidden; max-width: 100%; height: 100%; }
body {
font-family: 'Barlow', system-ui, sans-serif;
font-weight: 400;
font-size: 21px;
line-height: 1.8;
color: var(--ink);
background: var(--lav-050);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
min-height: 100%;
display: flex;
flex-direction: column;
}
/* ---------- TYPOGRAPHY ---------- */
h1, h2, h3, h4 {
font-family: 'Playfair Display', serif;
font-style: normal;
font-weight: 500;
line-height: 1.12;
text-transform: none;
letter-spacing: 0;
color: var(--ink);
}
h1 { font-size: clamp(38px, 5vw, 68px); font-weight: 500; letter-spacing: -0.01em; }
h2 { font-size: clamp(34px, 4.4vw, 56px); }
h3 { font-size: clamp(23px, 2.6vw, 32px); }
p { font-size: 1rem; line-height: 1.85; color: var(--ink); }
strong { font-weight: 700; color: inherit; }
a { color: var(--plum-600); }
.eyebrow {
font-family: 'Barlow', sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--plum-600);
display: block;
margin-bottom: 18px;
}
.lead { font-size: 1.18rem; line-height: 1.75; color: var(--plum-800); }
/* small star-and-line divider */
.divider-star {
display: flex; align-items: center; gap: 12px;
margin: 22px 0;
}
.divider-star::before, .divider-star::after {
content: ''; height: 1px; flex: 0 0 56px;
background: linear-gradient(90deg, transparent, var(--plum-400));
}
.divider-star::after { background: linear-gradient(90deg, var(--plum-400), transparent); }
.divider-star span { color: var(--plum-400); font-size: 13px; letter-spacing: 0.3em; }
.divider-star.center { justify-content: center; }
/* ---------- LAYOUT ---------- */
section { padding: 104px 0; position: relative; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 40px; }
.narrow { max-width: 820px; margin: 0 auto; padding: 0 40px; }
/* light vs dark celestial sections */
.sky {
background:
radial-gradient(120% 90% at 78% 6%, rgba(201,168,92,0.12), transparent 55%),
radial-gradient(120% 85% at 12% 106%, rgba(30,30,30,0.60), transparent 55%),
radial-gradient(100% 80% at 50% 46%, rgba(20,20,20,0.80), transparent 72%),
linear-gradient(168deg, #2A2A2A 0%, #141414 58%, #0d0d0d 100%);
color: var(--cream);
}
.sky h1, .sky h2, .sky h3 { color: var(--cream); }
.sky p { color: rgba(244,237,221,0.82); }
.sky .eyebrow { color: var(--lav-200); }
/* drifting starfield overlay */
.stars { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.stars::before {
content: ''; position: absolute; inset: -40%;
background-image:
radial-gradient(1.6px 1.6px at 15% 25%, rgba(244,237,221,0.85), transparent),
radial-gradient(1.2px 1.2px at 55% 65%, rgba(231,206,142,0.80), transparent),
radial-gradient(1.5px 1.5px at 78% 18%, rgba(244,237,221,0.75), transparent),
radial-gradient(1.1px 1.1px at 33% 82%, rgba(244,237,221,0.60), transparent),
radial-gradient(1.3px 1.3px at 88% 58%, rgba(201,168,92,0.80), transparent),
radial-gradient(1.1px 1.1px at 8% 60%, rgba(244,237,221,0.65), transparent),
radial-gradient(1.4px 1.4px at 68% 40%, rgba(231,206,142,0.65), transparent),
radial-gradient(1px 1px at 45% 12%, rgba(244,237,221,0.55), transparent);
background-size: 440px 440px;
background-repeat: repeat;
opacity: 0.9;
animation: drift 120s linear infinite;
}
.stars::after {
content: ''; position: absolute; inset: -40%;
background-image:
radial-gradient(1px 1px at 22% 16%, rgba(244,237,221,0.75), transparent),
radial-gradient(1px 1px at 42% 38%, rgba(231,206,142,0.70), transparent),
radial-gradient(0.8px 0.8px at 63% 12%, rgba(244,237,221,0.55), transparent),
radial-gradient(1px 1px at 72% 72%, rgba(244,237,221,0.65), transparent),
radial-gradient(0.8px 0.8px at 12% 42%, rgba(201,168,92,0.70), transparent),
radial-gradient(1px 1px at 92% 28%, rgba(244,237,221,0.60), transparent),
radial-gradient(0.8px 0.8px at 50% 88%, rgba(244,237,221,0.55), transparent),
radial-gradient(1.2px 1.2px at 30% 62%, rgba(231,206,142,0.70), transparent),
radial-gradient(0.8px 0.8px at 84% 84%, rgba(244,237,221,0.55), transparent),
radial-gradient(1px 1px at 5% 80%, rgba(244,237,221,0.55), transparent),
radial-gradient(0.8px 0.8px at 58% 50%, rgba(244,237,221,0.50), transparent),
radial-gradient(1px 1px at 38% 8%, rgba(201,168,92,0.65), transparent);
background-size: 300px 300px; background-repeat: repeat;
opacity: 0.55; animation: drift 90s linear infinite reverse, twinkle 5s ease-in-out infinite;
}
@keyframes drift { from { transform: translate(0,0); } to { transform: translate(-260px,-160px); } }
@keyframes twinkle { 0%,100% { opacity: 0.4; } 50% { opacity: 0.75; } }
.container, .narrow { position: relative; z-index: 1; }
/* ---------- BUTTONS ---------- */
.btn-call, .btn-ghost {
display: inline-flex; align-items: center; gap: 10px;
font-family: 'Barlow', sans-serif;
font-size: 1.2rem; font-weight: 500;
letter-spacing: 0.02em;
text-decoration: none;
padding: 15px 32px;
cursor: pointer;
transition: transform 0.2s ease, background 0.2s ease;
}
.btn-call {
color: #141414;
background: #C9A85C;
border: none;
border-radius: 50px;
animation: ctaGlow 2.8s ease-in-out infinite;
}
.btn-call:hover { transform: translateY(-2px); background: #D4B870; }
#kako-deluje h2 { font-weight: 500; }
#storitve-teaser h2 { margin-bottom: 20px; }
.btn-call .ph, .nav-call .ph, .btn-ghost .ph { flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.btn-call .ph, .nav-call .ph { color: #141414; }
.btn-ghost .ph { color: #C9A85C; }
.btn-call .ph, .btn-ghost .ph { width: 20px; height: 20px; }
.btn-call .ph svg, .nav-call .ph svg, .btn-ghost .ph svg { width: 100%; height: 100%; display: block; }
.btn-call .ph { width: 30px; height: 30px; background: #ffffff; border-radius: 50%; }
.btn-call .ph svg { width: 16px; height: 16px; }
.btn-ghost {
color: var(--cream);
background: rgba(255,255,255,0.05);
border: 1.5px solid rgba(231,206,142,0.5);
border-radius: 50px;
}
.btn-ghost:hover { background: rgba(255,255,255,0.12); border-color: var(--lav-200); }
.btn-ghost.on-light { color: var(--plum-800); border-color: var(--plum-400); background: transparent; }
.btn-ghost.on-light:hover { background: var(--lav-100); }
.btn-white {
display: inline-flex; align-items: center; gap: 10px;
font-family: 'Barlow', sans-serif; font-size: 1.2rem; font-weight: 500;
letter-spacing: 0.02em; text-decoration: none; cursor: pointer;
padding: 15px 32px; border-radius: 50px; border: none;
color: #141414; background: #ffffff;
margin-top: 36px;
transition: transform 0.2s ease, background 0.2s ease;
}
.btn-white:hover { transform: translateY(-2px); background: #f0f0f0; }
/* gold pill (hero CTA) */
.btn-lav {
display: inline-flex; align-items: center; gap: 10px;
font-family: 'Barlow', sans-serif; font-size: 27px; font-weight: 500;
letter-spacing: 0.02em; text-decoration: none; cursor: pointer;
padding: 15px 32px; border-radius: 50px;
color: #141414; background: #ffffff; border: none;
justify-content: center;
animation: ctaGlow 2.8s ease-in-out infinite;
transition: transform 0.2s ease, background 0.2s ease;
}
.btn-lav .ico { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0; background: #141414; border-radius: 50%; }
.btn-lav .ico svg { width: 18px; height: 18px; display: block; }
.btn-lav:hover { transform: translateY(-2px); background: #f0f0f0; }
@keyframes ctaGlow {
0%,100% { box-shadow: 0 0 0 0 rgba(201,168,92,0.45); }
50% { box-shadow: 0 0 0 14px rgba(201,168,92,0); }
}
/* ---------- NAV ---------- */
nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
height: 72px; padding: 0 40px;
display: flex; align-items: center; justify-content: space-between;
background: transparent;
transition: background 0.3s ease;
}
nav.scrolled {
background: rgba(20,20,20,0.94);
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand .mark { width: 46px; height: 46px; color: var(--lav-200); flex-shrink: 0; }
.brand-name {
font-family: 'Playfair Display', serif; font-weight: 600;
font-size: 27px; color: var(--cream); line-height: 1; letter-spacing: 0.04em;
}
.brand-name b { color: var(--lav-200); font-weight: 600; }
.brand-name small {
display: block; font-family: 'Barlow', sans-serif;
font-size: 9px; font-weight: 600; letter-spacing: 0.28em;
text-transform: uppercase; color: rgba(244,237,221,0.55); margin-top: 2px;
}
.brand-sub {
display: block; font-family: 'Barlow', sans-serif;
font-size: 16px; font-weight: 600; letter-spacing: 0.28em;
text-transform: uppercase; color: var(--cream);
}
.nav-links { display: flex; align-items: center; gap: 46px; list-style: none; }
.nav-links a {
font-family: 'Barlow', sans-serif; font-size: 18px; font-weight: 500;
letter-spacing: 0.02em; text-transform: none;
color: #ffffff; text-decoration: none; transition: color 0.2s;
}
.nav-links a:hover { color: var(--lav-200); }
/* dropdown */
.has-dropdown { position: relative; }
.has-dropdown > a { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.nav-trigger { font-family: 'Barlow', sans-serif; font-size: 18px; font-weight: 500; letter-spacing: 0.02em; color: #ffffff; display: inline-flex; align-items: center; gap: 7px; cursor: default; user-select: none; }
.dropdown-arrow {
width: 16px; height: 16px; opacity: 0.7; flex-shrink: 0;
margin-top: 3px;
transition: transform 0.25s ease;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: center; background-size: contain;
display: inline-block;
}
.has-dropdown:hover .dropdown-arrow { transform: rotate(180deg); opacity: 1; }
.dropdown {
display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
padding-top: 12px; list-style: none; min-width: 210px; z-index: 100;
}
.dropdown::before {
content: ''; position: absolute; top: 12px; left: 0; right: 0; bottom: 0;
background: #000; border: none; border-radius: 6px;
box-shadow: 0 16px 48px rgba(0,0,0,0.55);
}
.has-dropdown:hover .dropdown { display: block; }
.dropdown li { position: relative; }
.dropdown li a {
display: block; padding: 12px 22px; position: relative; z-index: 1;
font-family: 'Barlow', sans-serif; font-size: 18px; font-weight: 500;
color: #ffffff; text-decoration: none; white-space: nowrap;
transition: color 0.15s, background 0.15s;
}
.dropdown li:first-child a { border-radius: 6px 6px 0 0; }
.dropdown li:last-child a { border-radius: 0 0 6px 6px; }
.dropdown li a:hover { color: var(--lav-200); background: rgba(255,255,255,0.06); }
.nav-call {
padding: 10px 22px; border-radius: 50px;
display: inline-flex; align-items: center; gap: 8px;
background: #C9A85C !important;
color: #141414 !important;
justify-content: center;
font-family: 'Barlow', sans-serif !important; font-size: 1.2rem !important; font-weight: 500 !important;
letter-spacing: 0.02em !important; text-transform: none !important;
}
.nav-call .ph { width: 30px; height: 30px; background: #ffffff; border-radius: 50%; }
.nav-call .ph svg { width: 16px; height: 16px; }
.nav-call { white-space: nowrap; text-decoration: none; }
/* right-side group (menu + phone + hamburger) */
.nav-right { display: flex; align-items: center; gap: 46px; }
.brand-sub, .brand-short { white-space: nowrap; }
.brand-short {
display: none; font-family: 'Barlow', sans-serif; font-size: 16px;
font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--cream);
}
/* hamburger (CSS-only toggle, no JS) — 2 bars that fold into an X.
Two bars (not three) so there's no middle bar leaving a rendering
artifact; both bars converge to the exact center and rotate ±45°. */
.nav-toggle { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.nav-burger {
display: none; position: relative;
width: 32px; height: 32px; cursor: pointer; flex-shrink: 0;
}
.nav-burger span {
position: absolute; left: 5px; width: 22px; height: 2px;
background: var(--cream);
transition: top 0.25s ease, transform 0.25s ease;
}
.nav-burger span:nth-child(1) { top: 12px; }
.nav-burger span:nth-child(2) { top: 20px; }
.nav-toggle:checked ~ .nav-burger span { top: 16px; }
.nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: rotate(45deg); }
.nav-toggle:checked ~ .nav-burger span:nth-child(2) { transform: rotate(-45deg); }
body:has(.nav-toggle:checked) { overflow: hidden; }
/* ---------- HERO ---------- */
#above-fold { height: 100vh; display: flex; flex-direction: column; }
/* Background doubles as the fallback when the hero video does not play — e.g.
iOS Safari before 17.4, which cannot decode WebM, or any browser with
autoplay blocked. A flat #141414 left a dead black block there, so use the
same gradient as .sky instead. */
#hero {
flex: 1; min-height: 0; padding: 60px 0; overflow: hidden; text-align: center;
position: relative; display: flex; align-items: center;
background:
radial-gradient(120% 90% at 78% 6%, rgba(201,168,92,0.12), transparent 55%),
radial-gradient(120% 85% at 12% 106%, rgba(30,30,30,0.60), transparent 55%),
radial-gradient(100% 80% at 50% 46%, rgba(20,20,20,0.80), transparent 72%),
linear-gradient(168deg, #2A2A2A 0%, #141414 58%, #0d0d0d 100%);
}
.hero-video {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; object-position: center;
opacity: 0.3;
z-index: 0;
pointer-events: none;
/* Keep the #hero gradient visible when the source cannot be decoded —
some browsers paint an opaque black box for an unplayable