/* ==========================================================================
MANI d'ORO — Studio za nohte, obrvi in trepalnice, Ljubljana
Barvna paleta je povzeta po logotipu (šampanjec, zlato, bron, krem).
========================================================================== */
/* --------------------------------------------------------------------------
1. Design tokens
-------------------------------------------------------------------------- */
:root {
/* Paleta iz logotipa */
--cream: #FBF7F0;
--cream-2: #F5EDE1;
--sand: #EFE3D2;
--champagne: #E5D3B8;
--gold-lt: #EFDCB6;
--gold: #C9A667;
--gold-dk: #A8874C;
--bronze: #7C6549;
--espresso: #3F3124;
--ink: #241C15;
/* Semantika */
--bg: var(--cream);
--text: #5E4E3C;
--heading: var(--espresso);
--rule: rgba(201, 166, 103, .28);
--rule-strong: rgba(201, 166, 103, .55);
/* Tipografija */
--serif: "Cormorant Garamond", "Times New Roman", serif;
--sans: "Jost", "Helvetica Neue", Arial, sans-serif;
/* Ritem */
--pad: clamp(1.25rem, 5vw, 4.5rem);
--section: clamp(5rem, 12vw, 10rem);
--maxw: 1320px;
--maxw-txt: 62ch;
/* Gibanje */
--ease: cubic-bezier(.22, 1, .36, 1);
--slow: .8s var(--ease);
--med: .45s var(--ease);
}
/* --------------------------------------------------------------------------
2. Reset
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
/* Okrasni elementi (vrtljiv lok, mehki sij) smejo segati čez rob,
ne smejo pa ustvariti vodoravnega drsnika. `clip` za razliko od `hidden`
ne naredi drsnega konteksta, zato position: fixed deluje naprej. */
overflow-x: clip;
}
body {
background: var(--bg);
color: var(--text);
font-family: var(--sans);
font-weight: 300;
font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
line-height: 1.75;
letter-spacing: .012em;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
/* Brez overflow-x: hidden! Vodoravni drsnik zadrži že `clip` na ,
hidden na pa iz njega naredi drsni kontekst — na iOS zaradi tega
vrstica s položajem fixed med drsenjem zaostaja in poskakuje. */
}
body.is-locked { overflow: hidden; }
img, picture, svg { display: block; max-width: 100%; }
/* Atributa width/height na ![]()
se preslikata v CSS. Ko max-width skrči širino,
višina brez tega ostane pri vrednosti iz atributa in slika se razpotegne.
Slike čez cel blok si višino nastavijo prek razredov, ki to pravilo prevladajo. */
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--gold); color: #fff; }
:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 4px;
}
/* Zrnatost — komaj zaznaven film čez celo stran, da barve niso "digitalno" ploske */
body::after {
content: "";
position: fixed;
inset: 0;
z-index: 9999;
pointer-events: none;
opacity: .055;
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}
/* --------------------------------------------------------------------------
3. Tipografija
-------------------------------------------------------------------------- */
h1, h2, h3, h4 {
font-family: var(--serif);
font-weight: 300;
color: var(--heading);
line-height: 1.08;
letter-spacing: .01em;
}
.display { font-size: clamp(2.6rem, 6.4vw, 5.25rem); }
.title { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
.subtitle { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.eyebrow {
font-family: var(--sans);
font-size: .7rem;
font-weight: 400;
letter-spacing: .34em;
text-transform: uppercase;
color: var(--gold-dk);
display: block;
}
.lead {
font-size: clamp(1.06rem, 1rem + .4vw, 1.25rem);
line-height: 1.8;
color: var(--bronze);
}
.muted { color: rgba(124, 101, 73, .78); }
em, .italic { font-style: italic; }
/* Zlati okrasni razdelilnik z rombom na sredini */
.rule {
display: flex;
align-items: center;
gap: .9rem;
width: min(240px, 60%);
}
.rule::before, .rule::after {
content: "";
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, var(--rule-strong), transparent);
}
.rule i {
width: 5px;
height: 5px;
background: var(--gold);
transform: rotate(45deg);
flex: none;
}
.rule--center { margin-inline: auto; }
/* --------------------------------------------------------------------------
4. Layout
-------------------------------------------------------------------------- */
/* viewport-fit=cover raztegne stran čez cel zaslon, tudi pod izrez in
statusno vrstico. Robovi se zato merijo od varnega območja navzgor —
na zaslonih brez izreza je env() enak 0 in ostane le --pad. */
.shell {
width: 100%;
max-width: var(--maxw);
margin-inline: auto;
padding-inline: max(var(--pad), env(safe-area-inset-left), env(safe-area-inset-right));
}
.section { padding-block: var(--section); position: relative; }
.section--sand { background: var(--cream-2); }
.section-head {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.1rem;
text-align: center;
margin-bottom: clamp(3rem, 6vw, 5rem);
}
.section-head p { max-width: 52ch; }
.stack { display: flex; flex-direction: column; }
.gap-sm { gap: .75rem; }
.gap-md { gap: 1.5rem; }
.gap-lg { gap: 2.5rem; }
/* --------------------------------------------------------------------------
5. Gumbi
-------------------------------------------------------------------------- */
.btn {
--btn-bg: transparent;
--btn-fg: var(--espresso);
--btn-bd: var(--rule-strong);
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: .8em;
padding: 1.05rem 2.3rem;
font-family: var(--sans);
font-size: .72rem;
font-weight: 400;
letter-spacing: .24em;
text-transform: uppercase;
white-space: nowrap;
color: var(--btn-fg);
background: var(--btn-bg);
border: 1px solid var(--btn-bd);
border-radius: 2px;
overflow: hidden;
transition: color var(--med), border-color var(--med), transform var(--med), box-shadow var(--med);
}
.btn > * { position: relative; z-index: 1; }
/* Zlati odsev, ki se ob prehodu prelije čez gumb */
.btn::after {
content: "";
position: absolute;
inset: 0;
transform: translateX(-101%);
background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .38) 45%, transparent);
transition: transform .9s var(--ease);
}
.btn:hover::after { transform: translateX(101%); }
.btn:hover { transform: translateY(-2px); }
.btn--gold {
--btn-fg: #2E2419;
--btn-bd: transparent;
background: linear-gradient(135deg, #E2C48C 0%, #C9A667 48%, #AC8B50 100%);
box-shadow: 0 10px 30px -12px rgba(168, 135, 76, .7);
}
.btn--gold:hover { box-shadow: 0 18px 40px -14px rgba(168, 135, 76, .85); }
.btn--ghost {
--btn-fg: var(--gold-lt);
--btn-bd: rgba(239, 220, 182, .42);
}
.btn--ghost:hover { --btn-fg: #fff; --btn-bd: rgba(239, 220, 182, .9); }
.btn--dark { --btn-fg: var(--espresso); --btn-bd: rgba(63, 49, 36, .28); }
.btn--dark:hover { --btn-bd: var(--espresso); }
.btn--sm { padding: .78rem 1.5rem; font-size: .66rem; letter-spacing: .2em; }
/* Tekstovna povezava z zlato podčrto, ki zraste iz leve */
.link {
display: inline-flex;
align-items: center;
gap: .6em;
font-size: .72rem;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--gold-dk);
padding-bottom: .35rem;
background-image: linear-gradient(var(--gold), var(--gold));
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 0% 1px;
transition: background-size var(--med), color var(--med);
}
.link:hover { background-size: 100% 1px; color: var(--espresso); }
.link svg { transition: transform var(--med); }
.link:hover svg { transform: translateX(5px); }
/* --------------------------------------------------------------------------
6. Navigacija
-------------------------------------------------------------------------- */
.nav {
position: fixed;
inset: 0 0 auto;
z-index: 100;
padding-block: clamp(1rem, 2vw, 1.6rem);
/* Na zaslonih z izrezom (iPhone v načinu spletne aplikacije) se vrstica
spusti pod statusno vrstico; v Safariju je vrednost 0 in se nič ne premakne. */
padding-top: calc(clamp(1rem, 2vw, 1.6rem) + env(safe-area-inset-top, 0px));
/* Lastna plast: iOS med inercijskim drsenjem sicer prerisuje vrstico
z zamikom in ta za trenutek ne stoji povsem na vrhu. */
transform: translateZ(0);
transition: background var(--med), box-shadow var(--med), padding var(--med), backdrop-filter var(--med);
}
.nav__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
}
.nav__mark {
display: inline-flex;
align-items: center;
min-height: 44px;
font-family: var(--serif);
font-size: clamp(1.15rem, 1.6vw, 1.4rem);
letter-spacing: .18em;
color: var(--gold-lt);
white-space: nowrap;
transition: color var(--med);
}
/* Znak MD z rokami. Datoteka ima belo podlago; mix-blend-mode: multiply
jo na svetli kremni strani povsem izniči — brez izrezovanja in brez
nazobčanih robov, ki jih pusti ključanje po barvi. */
.nav__logo {
display: flex;
align-items: center;
width: clamp(62px, 7vw, 96px);
flex: none;
transition: opacity var(--med);
}
.nav__logo img { width: 100%; height: auto; }
.nav__logo:hover { opacity: .72; }
.nav__mark em { letter-spacing: .06em; }
.nav__links {
display: flex;
align-items: center;
gap: clamp(1.2rem, 2.6vw, 2.6rem);
list-style: none;
padding: 0;
}
.nav__links a {
position: relative;
font-size: .72rem;
letter-spacing: .2em;
text-transform: uppercase;
color: rgba(251, 247, 240, .82);
padding-block: .4rem;
transition: color var(--med);
}
.nav__links a::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background: var(--gold);
transform: scaleX(0);
transform-origin: right;
transition: transform var(--med);
}
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav__links a:hover { color: #fff; }
.nav__links a[aria-current="page"] { color: var(--gold-lt); }
.nav__cta { display: none; }
@media (min-width: 1080px) { .nav__cta { display: inline-flex; } }
/* Hero je kremen, zato je pisava v vrstici temna že od vrha — ozadje pa
se še vedno pojavi šele ob skrolanju (razred is-solid iz main.js). */
.nav--onlight .nav__links a { color: var(--bronze); }
.nav--onlight .nav__links a:hover { color: var(--espresso); }
.nav--onlight .nav__burger span { background: var(--espresso); }
/* Stanje po skrolanju / na podstraneh — svetla, motna vrstica */
.nav.is-solid,
.nav--light {
background: rgba(251, 247, 240, .88);
backdrop-filter: blur(14px) saturate(1.1);
-webkit-backdrop-filter: blur(14px) saturate(1.1);
box-shadow: 0 1px 0 var(--rule), 0 14px 40px -28px rgba(63, 49, 36, .5);
}
/* Safari na iPhonu vrstico s položajem fixed pripne na vrh postavitvenega
okna. Ko se med drsenjem zgornja orodna vrstica skrči, se vsebina razlije
pod statusno vrstico, postavitveno okno pa ostane pod njo — vrstica zato
ni povsem na vrhu in nad njo posije stran. Zamika ni mogoče izračunati,
ker je env(safe-area-inset-top) v Safariju enak 0, zato ozadje podaljšamo
navzgor čez rob zaslona. Pas je sicer zunaj vidnega polja in se pokaže
samo takrat, kadar vrstica ne stoji na vrhu. */
.nav.is-solid::before,
.nav--light::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 100%;
height: 200px;
/* Enaka barva kot vrstica, da med pasom in vrstico ni vidnega roba. */
background: rgba(251, 247, 240, .88);
pointer-events: none;
}
.nav.is-solid .nav__mark,
.nav--light .nav__mark { color: var(--espresso); }
.nav.is-solid .nav__links a,
.nav--light .nav__links a { color: var(--bronze); }
.nav.is-solid .nav__links a:hover,
.nav--light .nav__links a:hover { color: var(--espresso); }
.nav.is-solid .nav__burger span,
.nav--light .nav__burger span { background: var(--espresso); }
/* Odprt meni: pod vrstico leži temna plast. Vrstica zato odloži svetlo ozadje,
križec pa mora biti svetel — sicer se zlije s plastjo in ga komaj vidiš. */
.nav.is-open {
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow: none;
}
.nav.is-open::before { content: none; }
.nav.is-open .nav__burger span { background: var(--gold-lt); }
/* Hamburger */
.nav__burger {
display: grid;
place-content: center;
gap: 6px;
padding: .5rem;
margin-right: -.5rem;
/* Udobna tarča za prst */
min-width: 44px;
min-height: 44px;
}
.nav__burger span {
display: block;
width: 26px;
height: 1px;
background: var(--gold-lt);
transition: transform var(--med), opacity var(--med), background var(--med);
}
.is-open .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.is-open .nav__burger span:nth-child(2) { opacity: 0; }
.is-open .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 900px) { .nav__burger { display: none; } }
@media (max-width: 899px) { .nav__links { display: none; } }
/* Mobilni meni čez cel zaslon */
.menu {
position: fixed;
inset: 0;
z-index: 99;
display: grid;
place-content: center;
gap: 2rem;
text-align: center;
/* Meni pokrije cel zaslon, vsebina pa ostane znotraj varnega območja */
padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
background: linear-gradient(160deg, #2E2419, #4A3A2A 60%, #2E2419);
opacity: 0;
visibility: hidden;
transition: opacity var(--slow), visibility var(--slow);
}
.menu.is-open { opacity: 1; visibility: visible; }
.menu ul { list-style: none; padding: 0; display: grid; gap: 1.4rem; }
/* Pomembno: omejeno na povezave v seznamu, sicer prevzame tudi gumb za rezervacijo */
.menu ul a {
font-family: var(--serif);
font-size: clamp(2rem, 8vw, 3rem);
color: var(--gold-lt);
opacity: 0;
transform: translateY(18px);
transition: opacity .6s var(--ease), transform .6s var(--ease), color var(--med);
}
.menu.is-open ul a { opacity: 1; transform: none; }
.menu.is-open li:nth-child(1) a { transition-delay: .12s; }
.menu.is-open li:nth-child(2) a { transition-delay: .18s; }
.menu.is-open li:nth-child(3) a { transition-delay: .24s; }
.menu.is-open li:nth-child(4) a { transition-delay: .30s; }
.menu.is-open li:nth-child(5) a { transition-delay: .36s; }
.menu ul a:hover { color: #fff; }
.menu .btn {
justify-self: center;
opacity: 0;
transform: translateY(18px);
transition: opacity .6s var(--ease) .42s, transform .6s var(--ease) .42s,
color var(--med), border-color var(--med), box-shadow var(--med);
}
.menu.is-open .btn { opacity: 1; transform: none; }
.menu.is-open .btn:hover { transform: translateY(-2px); }
/* --------------------------------------------------------------------------
7. Hero — uredniška postavitev
Naslov, dve fotografiji, vrtljiv pečat in okrogel gumb na kremni podlagi.
-------------------------------------------------------------------------- */
.hero {
position: relative;
background: var(--cream-2);
}
/* je privzeto inline in visok le toliko kot slika — brez tega
se height:100% na ![]()
meri glede na sesedeno višino in ozadje ne pokrije zaslona. */
.page-hero__media picture { display: block; width: 100%; height: 100%; }
/* Oder v razmerju 16:9. Vsi elementi so postavljeni v odstotkih njegove
širine in višine, zato se celotna kompozicija sorazmerno pomanjšuje —
natanko tako, kot je razporejena v predlogi. Enota cqw se nanaša nanj. */
.hero__stage {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
container-type: inline-size;
}
.hero__stage > * { position: absolute; margin: 0; }
/* Črta desno od naslova in črta pod odstavkom */
.hero__rule {
left: 56.5%;
right: 5%;
top: 20.6%;
height: 1px;
/* Temnejši od zlatih črt drugod na strani, da v heroju jasno izstopata */
background: rgba(37, 28, 20, .62);
}
.hero__rule--low {
left: 36.8%;
right: auto;
width: 40%;
top: 83.6%;
}
/* Podpis na desnem koncu spodnje črte */
.hero__sign {
left: 36.8%;
width: 40%;
top: 84.6%;
text-align: right;
font-family: var(--serif);
font-size: clamp(.9rem, 1.7cqw, 1.45rem);
font-weight: 400;
font-style: italic;
letter-spacing: .1em;
line-height: 1;
color: var(--espresso);
}
/* --- Naslov ------------------------------------------------------------- */
.hero__t1,
.hero__t2 {
font-family: var(--serif);
font-weight: 300;
color: var(--espresso);
line-height: 1;
white-space: nowrap;
letter-spacing: .005em;
}
.hero__t1 { left: 6.5%; top: 13.6%; font-size: 6.8cqw; }
.hero__t2 { left: 38.4%; top: 28.8%; font-size: 6cqw; font-style: italic; }
.hero__t1 em { font-style: italic; letter-spacing: .015em; }
/* "nail" stoji ob imenu v manjši ležeči različici, kakor "photo" v predlogi */
.hero__title-sm {
font-size: .44em;
font-style: italic;
letter-spacing: .02em;
margin-left: .55em;
color: var(--espresso);
}
/* --- Glavna fotografija z zlatim napisom --------------------------------- */
.hero__main {
left: 5.5%;
top: 34.9%;
width: 26.2%;
/* Pečat sega iz te figure na selfie, zato mora ležati nad njim */
z-index: 2;
/* Vgnezden vsebnik: napis in pečat se merita glede na fotografijo */
container-type: inline-size;
}
/* je privzeto inline in visok le toliko kot slika — brez tega se
height: 100% na ![]()
meri glede na sesedeno višino in fotografija na
telefonu ne pokrije zaslona. (Enako kot pri .page-hero__media.) */
.hero__main picture { display: block; width: 100%; height: 100%; }
.hero__main img {
/* Razmerje je pripeto na okvir, ne na datoteko: višina figure ostane enaka
ne glede na fotografijo, zato pečat vedno obvisi na istem mestu.
Fotografija se vanj vloži z object-fit in se ob straneh nekoliko obreže. */
width: 100%;
aspect-ratio: 1000 / 1250;
object-fit: cover;
border-radius: 2px;
}
/* --- Vrtljiv pečat ------------------------------------------------------- */
/* Odstotki se nanašajo na glavno fotografijo; pečat zato sega iz nje proti
selfieju in obvisi točno na mestu iz predloge. */
.hero__badge {
position: absolute;
left: 241.2%;
top: 15.1%;
width: 47.7%;
aspect-ratio: 1;
pointer-events: none;
}
.hero__badge svg {
width: 100%;
height: 100%;
animation: badgeSpin 26s linear infinite;
}
.hero__badge text {
font-family: var(--serif);
font-size: 16px;
font-weight: 600;
letter-spacing: .1em;
fill: var(--bronze);
text-transform: uppercase;
}
@keyframes badgeSpin { to { transform: rotate(360deg); } }
/* --- Selfie -------------------------------------------------------------- */
.hero__side {
right: 5%;
top: 28.4%;
width: 18%;
}
.hero__side img {
width: 100%;
aspect-ratio: 3 / 4;
object-fit: cover;
border-radius: 2px;
}
/* --- Besedilo in gumb ---------------------------------------------------- */
/* Odstavek je pripet na svoje dno, tik nad črto. Ko se oder oži, se besedilo
prelomi v več vrstic — te rastejo navzgor v prazen prostor, namesto da bi
se spustile čez črto pod njim. */
.hero__lead {
left: 36.8%;
bottom: 17.9%;
/* Besedilo se prelomi samo; blok se konča pred okroglim pečatom na desni */
width: 30.5%;
text-wrap: pretty;
font-size: clamp(.78rem, 1.22cqw, 1.1rem);
/* Temnejši in nekoliko močnejši od telesnega besedila — na kremni podlagi
blok tako stoji kot samostojen odstavek, ne kot drobna opomba. */
font-weight: 400;
line-height: 1.72;
letter-spacing: .008em;
color: var(--espresso);
}
.hero__lead p + p { margin-top: .85em; }
/* Ime pod selfiejem — na mestu, kjer je prej stal okrogel gumb */
.hero__name {
margin-top: .75em;
text-align: center;
font-family: var(--serif);
font-size: clamp(1rem, 2cqw, 1.7rem);
font-weight: 400;
letter-spacing: .12em;
line-height: 1;
color: var(--espresso);
}
/* --------------------------------------------------------------------------
7b. Hero na telefonu — samostojna kompozicija
Namizna postavitev v odstotkih na ozkem zaslonu ne zdrži, zato telefon dobi
svojo: ime studia na krem podlagi, zlata črta, lok s fotografijo in pečatom
ter poziv k rezervaciji. Elementi spodaj obstajajo samo zanj — na namizju so
skriti, tam vsebino nosi kompozicija iz predloge.
-------------------------------------------------------------------------- */
.hero__eyebrow,
.hero__divider,
.hero__tagline,
.hero__arch,
.hero__cta,
.hero__note { display: none; }
@media (max-width: 999.98px) {
.hero {
padding: 0;
/* Preliv namesto fotografije: krem se proti dnu poglobi v pesek, da se
naslovni del mehko zlije z razdelkom, ki sledi. */
background: linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 56%, var(--sand) 100%);
}
/* Oder se iz odstotkovne kompozicije prelevi v sredinski stolpec */
.hero__stage {
aspect-ratio: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: clamp(.6rem, 2.2vw, 1rem);
min-height: 100svh;
padding: calc(clamp(5.5rem, 21vw, 7.5rem) + env(safe-area-inset-top, 0px))
var(--pad)
calc(clamp(2.75rem, 9vw, 4rem) + env(safe-area-inset-bottom, 0px));
}
/* Otroci gredo v navpičen tok — brez odstotkov iz namizne postavitve */
.hero__stage > * { position: static; inset: auto; width: auto; margin: 0; }
/* Kar na telefonu odpade: naslovna fotografija s pečatom, selfie, besedilo,
črti in podpis. Ista vsebina pride takoj zatem v razdelku o meni. */
.hero__main,
.hero__rule,
.hero__rule--low,
.hero__sign,
.hero__side,
.hero__name,
.hero__lead,
.hero__stamp,
.hero__t2,
.hero__title-sm { display: none; }
.hero__eyebrow {
display: block;
font-family: var(--sans);
font-size: clamp(.6rem, 2.5vw, .72rem);
font-weight: 400;
letter-spacing: .36em;
text-transform: uppercase;
color: var(--gold-dk);
/* Razmik za zadnjo črko sicer potisne napis rahlo levo od sredine */
padding-left: .36em;
}
/* Ime studia v dveh vrsticah — na ozkem zaslonu je to celotna "znamka" */
.hero__t1 {
font-size: clamp(3rem, 16.5vw, 5rem);
line-height: .98;
letter-spacing: .015em;
white-space: normal;
}
.hero__t1 em { display: block; letter-spacing: .025em; }
.hero__divider {
display: flex;
align-items: center;
gap: .9rem;
width: min(180px, 50vw);
margin-top: .35rem;
}
.hero__divider::before,
.hero__divider::after {
content: "";
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, var(--rule-strong), transparent);
}
.hero__divider i {
width: 5px;
height: 5px;
flex: none;
background: var(--gold);
transform: rotate(45deg);
}
.hero__tagline {
display: block;
font-size: clamp(.7rem, 3vw, .84rem);
letter-spacing: .24em;
text-transform: uppercase;
color: var(--bronze);
}
/* Lok s fotografijo. Višina se meri v svh, da kompozicija ostane cela tudi
na nižjih zaslonih; zlata nit teče vzporedno z robom slike. */
.hero__arch {
display: block;
position: relative;
height: clamp(180px, 33svh, 320px);
aspect-ratio: 3 / 4;
margin-block: clamp(.5rem, 2.5vw, 1.1rem);
}
.hero__arch::before {
content: "";
position: absolute;
inset: -11px;
border: 1px solid var(--rule-strong);
border-radius: 999px 999px 5px 5px;
pointer-events: none;
}
.hero__arch img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 32%;
border-radius: 999px 999px 3px 3px;
box-shadow: 0 28px 52px -30px rgba(63, 49, 36, .8);
}
.hero__cta {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.05rem;
margin-top: .4rem;
}
.hero__cta .btn { width: min(320px, 76vw); }
.hero__cta-alt { font-size: .68rem; }
.hero__note {
display: block;
font-size: .68rem;
letter-spacing: .16em;
text-transform: uppercase;
color: rgba(124, 101, 73, .7);
}
/* Vstop: elementi se po vrsti dvignejo — isti občutek kot razkrivanje
ob skrolanju, le da tu ni česa čakati. */
.hero__eyebrow,
.hero__t1,
.hero__divider,
.hero__tagline,
.hero__arch,
.hero__cta,
.hero__note { animation: heroRise .95s var(--ease) both; }
.hero__t1 { animation-delay: .08s; }
.hero__divider { animation-delay: .16s; }
.hero__tagline { animation-delay: .2s; }
.hero__arch { animation-delay: .26s; }
.hero__cta { animation-delay: .36s; }
.hero__note { animation-delay: .44s; }
}
@keyframes heroRise {
from { opacity: 0; transform: translateY(20px); }
}
/* Nižji zasloni (starejši telefoni, ležeči pogled): ista kompozicija, le
tesneje spletena — cela mora ostati na enem zaslonu. */
@media (max-width: 999.98px) and (max-height: 700px) {
.hero__stage {
gap: .45rem;
padding-top: clamp(4.25rem, 16vw, 5.5rem);
padding-bottom: 2rem;
}
.hero__t1 { font-size: clamp(2.4rem, 13.5vw, 3.6rem); }
.hero__arch {
height: clamp(148px, 30svh, 230px);
margin-block: .4rem;
}
.hero__cta { gap: .8rem; margin-top: .2rem; }
.hero__cta .btn { padding: .9rem 2rem; }
}
/* --------------------------------------------------------------------------
8. Tiana — portret v "oblaku"
Razdelek je namenjen telefonu, kjer sledi takoj za naslovno fotografijo.
Na namizju iste vsebine nosi že hero (selfie, ime in besedilo), zato ga
tam skrijemo — z njim tudi povezavo, ki bi kazala v prazno.
-------------------------------------------------------------------------- */
@media (min-width: 1000px) {
#o-meni,
.nav__about { display: none; }
}
.about__grid {
display: grid;
gap: clamp(1.75rem, 5vw, 6rem);
align-items: center;
}
/* Fotografija ostane ob besedilu tudi na ožjih zaslonih — le manjša je.
V en stolpec se zloži šele na telefonu, kjer bi bila stolpca pretesna. */
@media (min-width: 620px) {
.about__grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); }
}
.cloud {
position: relative;
justify-self: center;
/* 100 % = širina stolpca, zato se fotografija samodejno manjša z njim
in nikoli ne prerase svojega prostora ob besedilu. */
width: min(460px, 100%);
aspect-ratio: 1 / 1.16;
isolation: isolate;
}
/* Mehko sevanje za portretom — "oblak", iz katerega izstopa */
.cloud::before {
content: "";
position: absolute;
inset: -16%;
z-index: -1;
background:
radial-gradient(closest-side, rgba(229, 211, 184, .95), rgba(229, 211, 184, 0) 72%),
radial-gradient(closest-side at 68% 28%, rgba(201, 166, 103, .42), transparent 70%);
filter: blur(6px);
animation: cloudBreathe 11s ease-in-out infinite alternate;
}
@keyframes cloudBreathe {
from { transform: scale(1) rotate(0deg); }
to { transform: scale(1.06) rotate(3deg); }
}
/* Okvir nosi obliko in mehke robove; povečava slike ostane ujeta znotraj njega,
da oblak ne sili v besedilni stolpec ob strani. */
.cloud__frame {
width: 100%;
height: 100%;
overflow: hidden;
/* Organska oblika + zamegljeni robovi, da fotografija "lebdi" brez okvirja */
border-radius: 58% 42% 51% 49% / 44% 47% 53% 56%;
-webkit-mask-image: radial-gradient(ellipse 76% 76% at 50% 46%, #000 54%, rgba(0, 0, 0, .7) 74%, transparent 94%);
mask-image: radial-gradient(ellipse 76% 76% at 50% 46%, #000 54%, rgba(0, 0, 0, .7) 74%, transparent 94%);
animation: cloudFloat 8s ease-in-out infinite alternate;
}
.cloud__img {
width: 100%;
height: 100%;
object-fit: cover;
/* Fotografija je že kadrirana na motiv, zato približevanja ne rabi —
razmerji sta skoraj enaki in obrez odreže le nekaj pikslov ob robu. */
object-position: 50% 45%;
transform: scale(1.02);
transform-origin: 50% 45%;
filter: saturate(.72) contrast(1.04) sepia(.16);
}
@keyframes cloudFloat {
from { translate: 0 0; }
to { translate: 0 -14px; }
}
/* Tanek zlat lok, ki objame oblak */
.cloud__ring {
position: absolute;
inset: -6% -4% 2% -6%;
z-index: -1;
border: 1px solid var(--rule-strong);
border-radius: 58% 42% 51% 49% / 44% 47% 53% 56%;
animation: cloudSpin 34s linear infinite;
}
@keyframes cloudSpin {
to { transform: rotate(360deg); }
}
.cloud__sparkle {
position: absolute;
width: 26px;
height: 26px;
color: var(--gold);
opacity: .85;
animation: twinkle 4.5s ease-in-out infinite;
}
.cloud__sparkle--a { top: 4%; right: 10%; }
.cloud__sparkle--b { bottom: 12%; left: 2%; width: 17px; height: 17px; animation-delay: 1.6s; }
@keyframes twinkle {
0%, 100% { opacity: .25; transform: scale(.85); }
50% { opacity: .95; transform: scale(1); }
}
.about__body { max-width: 54ch; }
.about__body .lead + .lead { margin-top: 1.25rem; }
.signature {
font-family: var(--serif);
font-style: italic;
font-size: clamp(2.1rem, 4vw, 2.9rem);
color: var(--gold-dk);
line-height: 1;
margin-top: .5rem;
}
/* --------------------------------------------------------------------------
9. Storitve
-------------------------------------------------------------------------- */
.services {
display: grid;
gap: clamp(1.5rem, 3vw, 2.2rem);
}
/* Kartici stojita drug ob drugem šele na pravem namizju. Pod tem se zložita
ena pod drugo — tudi na širokih telefonih in tablicah, kjer bi bili sicer pretesni. */
@media (min-width: 1080px) { .services { grid-template-columns: 1fr 1fr; } }
.card {
position: relative;
display: block;
overflow: hidden;
border-radius: 3px;
background: var(--espresso);
isolation: isolate;
box-shadow: 0 26px 60px -40px rgba(63, 49, 36, .8);
transition: transform var(--slow), box-shadow var(--slow);
}
.card:hover { transform: translateY(-6px); box-shadow: 0 40px 80px -44px rgba(63, 49, 36, .9); }
.card__media { position: absolute; inset: 0; z-index: -2; }
.card__media img {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(.72) contrast(1.04);
transform: scale(1.02);
transition: transform 1.3s var(--ease), filter var(--slow);
}
.card:hover .card__media img { transform: scale(1.09); filter: saturate(.85) contrast(1.05); }
/* Izrez vsake fotografije: nohti na sredini kartice, oko z obrvjo pa nekoliko
nižje, da ostane v vidnem delu nad besedilom. */
.card--nails .card__media img { object-position: 52% 42%; }
.card--brows .card__media img { object-position: 44% 46%; }
.card::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(to top, rgba(30, 23, 16, .9) 6%, rgba(30, 23, 16, .5) 42%, rgba(30, 23, 16, .12) 78%);
transition: opacity var(--slow);
}
.card__inner {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: .9rem;
min-height: clamp(420px, 58vw, 560px);
padding: clamp(1.75rem, 4vw, 3rem);
}
.card__inner .eyebrow { color: var(--gold-lt); opacity: .8; }
.card h3 { color: #FBF7F0; font-size: clamp(2rem, 3.6vw, 2.9rem); }
.card p { color: rgba(251, 247, 240, .78); max-width: 34ch; font-size: .98rem; }
.card .link { color: var(--gold-lt); margin-top: .6rem; align-self: flex-start; }
.card:hover .link { background-size: 100% 1px; color: #fff; }
/* Tanek zlat okvir znotraj kartice */
.card__frame {
position: absolute;
inset: 14px;
border: 1px solid rgba(239, 220, 182, .22);
pointer-events: none;
transition: inset var(--slow), border-color var(--slow);
}
.card:hover .card__frame { inset: 10px; border-color: rgba(239, 220, 182, .45); }
/* --------------------------------------------------------------------------
10. Instagram
-------------------------------------------------------------------------- */
.ig__head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: clamp(1rem, 3vw, 2rem);
text-align: center;
margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.ig__avatar {
width: 92px;
height: 92px;
flex: none;
border-radius: 50%;
padding: 3px;
background: linear-gradient(135deg, var(--gold-lt), var(--gold) 45%, var(--gold-dk));
}
.ig__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 44%;
border-radius: 50%;
border: 2px solid var(--cream);
transform: scale(1.02);
}
.ig__meta { display: grid; gap: .3rem; text-align: left; }
.ig__handle {
font-family: var(--serif);
font-size: clamp(1.4rem, 2.6vw, 1.9rem);
color: var(--espresso);
}
.ig__meta p { font-size: .95rem; }
.ig__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(.5rem, 1.2vw, .9rem);
}
@media (min-width: 720px) { .ig__grid { grid-template-columns: repeat(4, 1fr); } }
.ig__tile {
position: relative;
aspect-ratio: 1;
overflow: hidden;
border-radius: 2px;
background: var(--champagne);
isolation: isolate;
}
.ig__tile img {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(.75) contrast(1.03);
transition: transform 1.1s var(--ease);
}
.ig__tile:hover img { transform: scale(1.08); }
/* Ploščica, ki potrebuje tesnejši obrez (npr. portret iz množice) */
.ig__tile--zoom img { transform: scale(1.28); transform-origin: 50% 22%; }
.ig__tile--zoom:hover img { transform: scale(1.36); }
/* Prekrivni sloj z ikono ob prehodu */
.ig__tile::after {
content: "";
position: absolute;
inset: 0;
background: rgba(46, 36, 25, .42);
opacity: 0;
transition: opacity var(--med);
}
.ig__tile:hover::after { opacity: 1; }
.ig__tile svg {
position: absolute;
inset: 0;
margin: auto;
z-index: 2;
width: 30px;
height: 30px;
color: var(--cream);
opacity: 0;
transform: scale(.8);
transition: opacity var(--med), transform var(--med);
}
.ig__tile:hover svg { opacity: 1; transform: scale(1); }
/* Okrasne ploščice med fotografijami */
.ig__tile--mark {
display: grid;
place-items: center;
background: linear-gradient(150deg, #F2E5CE, #E5D3B8 55%, #D8C09A);
}
.ig__tile--mark span {
font-family: var(--serif);
font-size: clamp(1.6rem, 4vw, 2.4rem);
letter-spacing: .06em;
color: var(--gold-dk);
}
.ig__tile--mark small {
display: block;
font-family: var(--sans);
font-size: .54rem;
letter-spacing: .3em;
text-transform: uppercase;
text-align: center;
color: rgba(124, 101, 73, .75);
margin-top: .35rem;
}
.ig__tile--mark::after, .ig__tile--mark svg { display: none; }
.ig__cta { display: flex; justify-content: center; margin-top: clamp(2rem, 4vw, 3rem); }
/* --------------------------------------------------------------------------
11. Poziv k rezervaciji
-------------------------------------------------------------------------- */
.cta {
position: relative;
isolation: isolate;
overflow: hidden;
background: linear-gradient(155deg, #372A1E, #55412D 55%, #2E2419);
color: var(--cream);
text-align: center;
}
.cta::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(ellipse 50% 60% at 50% 0%, rgba(201, 166, 103, .3), transparent 70%),
radial-gradient(ellipse 40% 50% at 88% 100%, rgba(201, 166, 103, .18), transparent 70%);
}
.cta h2 { color: var(--cream); }
.cta .eyebrow { color: var(--gold); }
.cta p { color: rgba(251, 247, 240, .78); max-width: 48ch; margin-inline: auto; }
.cta__inner { display: grid; gap: 1.6rem; justify-items: center; }
/* --------------------------------------------------------------------------
12. Noga
-------------------------------------------------------------------------- */
.footer {
background: var(--cream-2);
border-top: 1px solid var(--rule);
/* Spodaj še prostor za potezno črto na iPhonu */
padding-block: clamp(3.5rem, 7vw, 5.5rem) calc(2rem + env(safe-area-inset-bottom, 0px));
}
.footer__grid {
display: grid;
gap: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 780px) {
.footer__grid { grid-template-columns: 1.3fr 1fr 1fr; }
}
/* Logotip je prosojen, zato stoji neposredno na ozadju — brez ploščice */
.footer__logo {
display: block;
width: min(240px, 100%);
}
.footer__logo img { width: 100%; height: auto; }
.footer h4 {
font-family: var(--sans);
font-size: .68rem;
font-weight: 500;
letter-spacing: .28em;
text-transform: uppercase;
color: var(--gold-dk);
margin-bottom: 1.2rem;
}
.footer ul { list-style: none; padding: 0; display: grid; gap: .7rem; }
.footer a:not(.btn):not(.footer__logo) { transition: color var(--med); }
.footer a:not(.btn):not(.footer__logo):hover { color: var(--gold-dk); }
.footer__note { font-size: .95rem; max-width: 34ch; margin-top: 1.25rem; }
.footer__bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-top: clamp(3rem, 6vw, 4.5rem);
padding-top: 1.6rem;
border-top: 1px solid var(--rule);
font-size: .78rem;
letter-spacing: .06em;
color: rgba(124, 101, 73, .75);
}
/* Pravno obvestilo in politika zasebnosti — v spodnji vrstici na vseh
straneh, ker morata biti podatki o ponudniku vedno en klik stran */
.footer__legal {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .4rem 1.6rem;
}
.footer__legal a[aria-current="page"] { color: var(--gold-dk); }
/* Označena mesta, ki jih je treba še izpolniti (pikčasta podčrta) */
.todo {
border-bottom: 1px dashed var(--rule-strong);
padding-bottom: 1px;
}
/* --------------------------------------------------------------------------
13. Podstrani
-------------------------------------------------------------------------- */
.page-hero {
position: relative;
isolation: isolate;
overflow: hidden;
min-height: clamp(56vh, 60vh, 640px);
display: grid;
place-items: center;
text-align: center;
padding: calc(clamp(9rem, 18vh, 12rem) + env(safe-area-inset-top, 0px)) var(--pad) clamp(4rem, 8vh, 6rem);
}
.page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero__media img {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(.72) contrast(1.03);
transform: scale(1.04);
}
.page-hero--nails .page-hero__media img { object-position: 50% 50%; }
/* Trepalnice: fotografija je že tesen izrez obrvi in trepalnic, zato dodatno
približevanje ni potrebno — motiv leži levo od sredine, tam ostane fokus
tudi, ko pas obreže višino (namizje) ali širino (telefon). */
.page-hero--brows .page-hero__media img {
object-position: 44% 46%;
transform-origin: 44% 46%;
}
.page-hero::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(ellipse 60% 60% at 50% 50%, rgba(36, 28, 21, .58), transparent 78%),
linear-gradient(to bottom, rgba(36, 28, 21, .62), rgba(36, 28, 21, .28) 45%, rgba(36, 28, 21, .72));
}
.page-hero__content { display: grid; gap: 1.2rem; justify-items: center; max-width: 720px; }
.page-hero .eyebrow { color: rgba(239, 220, 182, .85); }
.page-hero h1 {
color: transparent;
background: linear-gradient(178deg, #FDF6E8, #EFDCB6 42%, #C9A667 100%);
-webkit-background-clip: text;
background-clip: text;
filter: drop-shadow(0 14px 36px rgba(24, 17, 10, .5));
}
.page-hero p { color: rgba(251, 247, 240, .82); max-width: 48ch; }
/* Drobtinice */
.crumbs {
font-size: .68rem;
letter-spacing: .24em;
text-transform: uppercase;
color: rgba(239, 220, 182, .6);
display: flex;
gap: .7rem;
align-items: center;
}
.crumbs a:hover { color: var(--gold-lt); }
.crumbs span { opacity: .5; }
/* Cenik */
.pricelist { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); }
@media (min-width: 900px) { .pricelist { grid-template-columns: 1fr 1fr; } }
.pricegroup h3 {
font-size: clamp(1.5rem, 2.4vw, 1.95rem);
margin-bottom: 1.6rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--rule);
}
/* Pojasnilo ob naslovu skupine, npr. Korekcija (do enega meseca) */
.pricegroup__sub {
font-family: var(--sans);
font-size: .8rem;
font-weight: 300;
letter-spacing: .06em;
color: rgba(124, 101, 73, .8);
white-space: nowrap;
}
.pricegroup ul { list-style: none; padding: 0; display: grid; gap: 1.35rem; }
.price {
display: grid;
grid-template-columns: 1fr auto;
align-items: baseline;
gap: .5rem 1rem;
column-gap: .9rem;
}
.price__name { font-size: 1.06rem; color: var(--espresso); }
.price__desc {
grid-column: 1 / -1;
font-size: .88rem;
line-height: 1.6;
color: rgba(124, 101, 73, .8);
margin-top: -.35rem;
}
/* Pikčasta črta med storitvijo in ceno */
.price__dots {
align-self: center;
height: 1px;
min-width: 1.5rem;
background-image: linear-gradient(90deg, var(--rule-strong) 1px, transparent 1px);
background-size: 5px 1px;
background-repeat: repeat-x;
opacity: .7;
}
.price { grid-template-columns: auto 1fr auto; }
.price__value {
font-family: var(--serif);
font-size: 1.3rem;
color: var(--gold-dk);
white-space: nowrap;
}
/* Opomba o DDV pod cenikom — drobna in na sredini, da ne tekmuje s cenami */
.pricelist__vat {
margin-top: clamp(2.5rem, 5vw, 3.5rem);
text-align: center;
font-size: .85rem;
letter-spacing: .02em;
}
/* Koraki / postopek */
.steps {
display: grid;
gap: clamp(1.5rem, 3vw, 2.5rem);
counter-reset: step;
}
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step {
position: relative;
padding: clamp(1.8rem, 3vw, 2.5rem) clamp(1.5rem, 2.5vw, 2rem);
background: var(--cream);
border: 1px solid var(--rule);
border-radius: 3px;
display: grid;
gap: .8rem;
align-content: start;
transition: transform var(--slow), box-shadow var(--slow), border-color var(--slow);
}
.step:hover {
transform: translateY(-4px);
border-color: var(--rule-strong);
box-shadow: 0 26px 50px -38px rgba(63, 49, 36, .7);
}
.step::before {
counter-increment: step;
content: "0" counter(step);
font-family: var(--serif);
font-size: 2.4rem;
line-height: 1;
color: var(--champagne);
}
.step h3 { font-size: 1.4rem; }
.step p { font-size: .95rem; }
/* Galerijski trak */
.strip {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(.5rem, 1.2vw, .9rem);
}
@media (min-width: 760px) { .strip { grid-template-columns: repeat(4, 1fr); } }
.strip__item {
position: relative;
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: 2px;
background: var(--champagne);
}
.strip__item img {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(.72) contrast(1.03);
transition: transform 1.2s var(--ease);
}
.strip__item:hover img { transform: scale(1.07); }
/* Opozorilo / opomba */
.note {
display: flex;
gap: 1rem;
align-items: flex-start;
padding: 1.4rem 1.6rem;
background: var(--cream);
border: 1px solid var(--rule);
border-left: 2px solid var(--gold);
border-radius: 3px;
font-size: .95rem;
max-width: 62ch;
/* Pod dvostolpčnim cenikom stoji sama zase, zato naj bo na sredini, ne ob levem robu.
Na ozkih zaslonih je škatla že široka kot vsebina in samodejna robova nimata učinka. */
margin-inline: auto;
}
.note svg { flex: none; color: var(--gold-dk); margin-top: .28rem; }
/* --------------------------------------------------------------------------
13b. Pravne strani — pravno obvestilo in politika zasebnosti
Brez naslovne fotografije: vrstica je svetla že od vrha, besedilo pa teče
v enem ozkem stolpcu, da se dolge razlage udobno berejo.
-------------------------------------------------------------------------- */
.legal {
/* Vrstica je fiksna, zato mora naslov začeti pod njo — tudi pod izrezom */
padding-top: calc(clamp(8rem, 14vw, 11rem) + env(safe-area-inset-top, 0px));
}
.legal__date { font-size: .8rem; letter-spacing: .08em; }
.legal__body { max-width: var(--maxw-txt); margin-inline: auto; }
.legal__body > * + * { margin-top: 1.1rem; }
.legal__body h2 {
font-size: clamp(1.5rem, 2.4vw, 1.95rem);
margin-top: clamp(2.75rem, 5vw, 3.5rem);
padding-bottom: .9rem;
border-bottom: 1px solid var(--rule);
}
.legal__body ul { padding-left: 1.2rem; display: grid; gap: .45rem; }
.legal__body li::marker { color: var(--gold); }
.legal__body a {
color: var(--gold-dk);
text-decoration: underline;
text-decoration-color: var(--rule-strong);
text-underline-offset: .2em;
transition: color var(--med), text-decoration-color var(--med);
}
.legal__body a:hover { color: var(--espresso); text-decoration-color: var(--gold); }
/* Podatki o ponudniku: oznaka levo, vrednost desno; na telefonu pod sabo */
.facts {
display: grid;
align-items: baseline;
gap: .15rem 2rem;
padding: 1.5rem 1.7rem;
background: var(--cream-2);
border: 1px solid var(--rule);
border-radius: 3px;
}
.facts dt {
font-size: .66rem;
font-weight: 400;
letter-spacing: .24em;
text-transform: uppercase;
color: var(--gold-dk);
}
.facts dt:not(:first-child) { margin-top: .85rem; }
.facts dd { color: var(--espresso); overflow-wrap: anywhere; }
@media (min-width: 620px) {
.facts { grid-template-columns: 11rem 1fr; row-gap: .8rem; }
.facts dt:not(:first-child) { margin-top: 0; }
}
/* --------------------------------------------------------------------------
14. Razkrivanje ob skrolanju
-------------------------------------------------------------------------- */
.reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity 1s var(--ease), transform 1s var(--ease);
transition-delay: var(--d, 0s);
will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
.reveal { opacity: 1; transform: none; }
}
/* --------------------------------------------------------------------------
15. Pomožno
-------------------------------------------------------------------------- */
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.skip {
position: absolute;
top: -100px;
left: var(--pad);
z-index: 200;
background: var(--espresso);
color: var(--cream);
padding: .8rem 1.4rem;
font-size: .74rem;
letter-spacing: .18em;
text-transform: uppercase;
transition: top var(--med);
}
.skip:focus { top: 1rem; }
/* --------------------------------------------------------------------------
16. Ozki zasloni
Hero ohrani isto zgradbo pri vseh širinah — ime leži čez fotografijo in se
z njo pomanjšuje. Ker gumbov v heroju ni več, se ime udobno prilega
tudi v nizek pas fotografije na telefonu.
-------------------------------------------------------------------------- */
/* Šele na telefonu se razdelek zloži v en stolpec — fotografija se pomanjša in
se prestavi pod besedilo, da naslov in odstavek prideta prva na vrsto. */
@media (max-width: 619px) {
.cloud { width: min(240px, 58vw); order: 2; }
.about__body { text-align: center; order: 1; }
.about__body .rule { margin-inline: auto; }
/* Daljše besedilo pod naslovom — nekoliko manjša pisava, da se na ozkem
zaslonu prebere brez neskončnega drsenja. */
.about__body .lead {
font-size: .98rem;
line-height: 1.7;
}
}
@media (max-width: 800px) {
/* Manj gibanja na telefonu — neprekinjeno vrtenje tu le jemlje baterijo */
.hero__badge svg { animation: none; }
}
@media (max-width: 700px) {
:root {
--section: 4.5rem;
}
/* Razmiki v razdelkih */
.section-head { margin-bottom: 2.5rem; }
/* Kartici storitev nista tako visoki */
.card__inner { min-height: 380px; padding: 1.6rem 1.5rem 1.8rem; }
/* Instagram: glava naj bo v enem stolpcu in poravnana na sredino */
.ig__head { flex-direction: column; gap: 1rem; }
.ig__meta { text-align: center; justify-items: center; }
.ig__avatar { width: 78px; height: 78px; }
/* Vrtenje loka razširi njegov očrt za ~30 % in na ozkem zaslonu sili čez rob.
Na telefonu ga zato ustavimo in okras potegnemo bliže. */
.cloud__ring { animation: none; inset: -4% -2% 2% -4%; }
.cloud::before { inset: -10%; }
/* Noga */
.footer__bottom { flex-direction: column; text-align: center; gap: .6rem; }
.footer__logo { margin-inline: auto; }
.footer__note { margin-inline: auto; text-align: center; }
.footer > .shell > .footer__grid > div { text-align: center; }
.footer h4 { margin-bottom: .9rem; }
/* Hero podstrani */
.page-hero {
min-height: 58vh;
min-height: 56svh;
padding: calc(7rem + env(safe-area-inset-top, 0px)) var(--pad) 3.5rem;
}
}
/* Gumba drug pod drugim, enake širine — na ozkih zaslonih se sicer prelomita neenakomerno */
@media (max-width: 560px) {
.hero__actions,
.cta__inner .btn {
width: min(100%, 300px);
}
.hero__actions {
flex-direction: column;
gap: .8rem;
}
.hero__actions .btn { width: 100%; }
.btn { padding: 1rem 1.6rem; letter-spacing: .18em; }
}
/* Cenik: pikčasta črta na ozkih zaslonih le jemlje prostor imenu storitve */
@media (max-width: 480px) {
.price { grid-template-columns: 1fr auto; column-gap: .8rem; }
.price__dots { display: none; }
.price__name { font-size: 1rem; }
.price__value { font-size: 1.15rem; }
}