/* ===================================================================== 3D Diagnostic Bijeljina — vlastiti stil. Učitava se POSLIJE `tokens.css`, svih `section.css` i `brend.css`, pa nadjačava njihove boje i pisma. Raspored se ne dira: nijedno pravilo ispod ne pipa display / grid-* / flex-direction / order / position / align-* / justify-* / text-align — osim broja kolona u sekciji Usluge, koji je izričito tražen (3 po redu). ===================================================================== */ /* --------------------------------------------------------------------- 1. OSNOVA --------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* Bez `overflow-x` na i , jer ga nema šta rješavati: izmjereno je da `scrollWidth` nigdje ne prelazi širinu prozora. Sekcije koje imaju dekoraciju izvan okvira (`abt__blob`, hero fotografija) nose `overflow: hidden` same. Globalni `overflow-x` ovdje samo nosi rizik — na od njega body postaje klizač, a `clip` na zna oboriti uspravno klizanje; o `window.scrollY` vise ljepljivo zaglavlje, donja traka i parallax. */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-sans); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; } img, video { max-width: 100%; height: auto; } ::selection { background: var(--accent-soft); color: var(--primary); } /* --------------------------------------------------------------------- 2. JEDNO PISMO NA CIJELOM SAJTU Naslovi: Nunito (--font-display-rounded) — opšta praksa, pacijenti svih uzrasta. Tijelo: Inter. Svaka sekcija nosila je svoje pismo iz templata; ovdje se obje varijable prevežu na isti par. --------------------------------------------------------------------- */ .sec-klar-header, .sec-sonnenschein-hero, .sec-fundament-services, .sec-anker-referenzen, .sec-nordlicht-parallax, .sec-calm-about, .sec-quiet-hours-results, .sec-sonnenschein-faq, .sec-anker-cta, .sec-housecall-footer { --ff-display: var(--font-display-rounded); --ff-body: var(--font-sans); } /* --------------------------------------------------------------------- 3. JEDNA PALETA Sekcije nose neutrale svog templata (krem, ljubičasto, pješčano). Ovdje se svode na jednu hladnu, medicinsku podlogu koja ide uz akcent iz `tokens.css` (#167c6b). --------------------------------------------------------------------- */ .sec-klar-header, .sec-sonnenschein-hero, .sec-fundament-services, .sec-anker-referenzen, .sec-nordlicht-parallax, .sec-calm-about, .sec-quiet-hours-results, .sec-sonnenschein-faq, .sec-anker-cta, .sec-housecall-footer { --c-bg: #ffffff; --c-bg-alt: #f2f7f6; --c-white: #ffffff; --c-surface: #eaf3f1; --c-text: #16241f; --c-text-muted: #56635e; --c-text-invert: #ffffff; --c-on-dark: #eaf3f1; --c-on-dark-mu: rgba(234, 243, 241, 0.76); --c-line: rgba(22, 36, 31, 0.10); --c-line-strong: rgba(22, 36, 31, 0.20); --c-line-dark: rgba(234, 243, 241, 0.18); --c-star: #e8a33b; --c-whatsapp: #128c7e; --c-whatsapp-dk: #0e6f63; /* nijanse koje pojedini templati traže pod svojim imenima */ --c-mint: var(--accent); --c-mint-soft: var(--accent-soft); --c-jade: var(--accent); --c-jade-soft: var(--accent-soft); --c-coral: var(--accent); --c-coral-dk: var(--accent-strong); --c-coral-soft: var(--accent-soft); --c-sun: #e8a33b; --c-sun-soft: #fdf1dd; --c-accent-tint: var(--accent-soft); } /* Naizmjenične trake — mirno, bez šarenila. */ .band-odd { background: #ffffff; } .band-even { background: #f2f7f6; } /* Tri tamne trake: parallax, kontakt i podnožje. */ .band[data-band="5"], .band[data-band="9"], .band[data-band="10"] { background: #0d1614; } /* --------------------------------------------------------------------- 4. JEDAN KONTEJNER I JEDAN VERTIKALNI RITAM Svaka sekcija ima vlastiti --maxw i --gutter. Svode se na isti. --------------------------------------------------------------------- */ .sec-klar-header, .sec-sonnenschein-hero, .sec-fundament-services, .sec-anker-referenzen, .sec-nordlicht-parallax, .sec-calm-about, .sec-quiet-hours-results, .sec-sonnenschein-faq, .sec-anker-cta, .sec-housecall-footer { --maxw: 1180px; --gutter: clamp(20px, 4vw, 40px); --section-y: clamp(64px, 7vw, 104px); } /* Zaobljenja i sjenke — jedan jezik umjesto tri. */ .sec-klar-header, .sec-sonnenschein-hero, .sec-fundament-services, .sec-anker-referenzen, .sec-nordlicht-parallax, .sec-calm-about, .sec-quiet-hours-results, .sec-sonnenschein-faq, .sec-anker-cta, .sec-housecall-footer { --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px; --sh-sm: 0 1px 2px rgba(22, 36, 31, 0.06), 0 2px 8px rgba(22, 36, 31, 0.04); --sh-md: 0 10px 30px rgba(22, 36, 31, 0.08); --sh-lg: 0 26px 64px rgba(22, 36, 31, 0.12); } /* --------------------------------------------------------------------- 5. TIPOGRAFSKA SKALA --------------------------------------------------------------------- */ .sec h1, .sec h2, .sec h3 { font-family: var(--ff-display); letter-spacing: -0.02em; line-height: 1.12; text-wrap: balance; } .sec-sonnenschein-hero h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); font-weight: 800; } .sec h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); font-weight: 800; } .sec h3 { font-size: clamp(1.06rem, 1.6vw, 1.28rem); font-weight: 700; line-height: 1.25; } .sec p { text-wrap: pretty; } .sec-sonnenschein-hero .hero__lead, .sec-fundament-services .svcs__intro, .sec-calm-about .abt__lead, .sec-nordlicht-parallax .plx__lead { font-size: clamp(1.02rem, 1.35vw, 1.14rem); line-height: 1.62; } /* Oznake iznad naslova — iste na svih deset sekcija. */ .sec .u-label, .sec .u-eyebrow, .sec .u-kicker { font-family: var(--ff-body); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); } .sec-nordlicht-parallax .u-kicker { color: #9fd6cc; } .sec .u-chip { font-family: var(--ff-body); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.01em; border-radius: var(--r-pill); padding: 7px 15px; } .sec .u-mark { color: var(--accent); } .sec .u-arc { color: var(--accent); } /* --------------------------------------------------------------------- 6. DUGMAD — tri templata su ih crtala na tri načina --------------------------------------------------------------------- */ .sec .u-btn { font-family: var(--ff-body); font-weight: 650; letter-spacing: 0.005em; border-radius: var(--r-pill); padding: 13px 26px; min-height: 46px; border-width: 1.5px; box-shadow: none; transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease; } .sec .u-btn--lg { padding: 15px 30px; min-height: 52px; font-size: 1rem; } .sec .u-btn:hover { transform: translateY(-1px); } .sec .u-btn:active { transform: translateY(0); } /* Ikona u dugmetu. Dugmad su u templatima `inline-flex`, pa se ikona i riječ same poravnaju — ovdje se samo daje veličina i razmak. Ikona nikad ne stoji sama: uz nju ide riječ. */ .sec .u-btn .btn-ic { width: 1.15em; height: 1.15em; flex: none; margin-right: 9px; margin-left: -2px; vertical-align: -0.18em; } .sec .u-btn--lg .btn-ic { width: 1.2em; height: 1.2em; margin-right: 10px; } .sec .u-btn--solid, .sec .u-btn--primary, .sec .u-btn--accent { background: var(--accent); border-color: var(--accent); color: #fff; } .sec .u-btn--solid:hover, .sec .u-btn--primary:hover, .sec .u-btn--accent:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; box-shadow: 0 8px 20px rgba(16, 93, 80, 0.24); } .sec .u-btn--line, .sec .u-btn--ghost { background: transparent; border-color: var(--c-line-strong); color: var(--c-text); } .sec .u-btn--line:hover, .sec .u-btn--ghost:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .sec-nordlicht-parallax .u-btn--ghost { border-color: rgba(255, 255, 255, 0.45); color: #fff; } .sec-nordlicht-parallax .u-btn--ghost:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; color: #fff; } .sec .u-btn--white { background: #fff; border-color: #fff; color: var(--primary); } .sec .u-btn--white:hover { background: var(--accent-soft); border-color: var(--accent-soft); } .sec .u-btn--wa { background: var(--c-whatsapp); border-color: var(--c-whatsapp); color: #fff; } .sec .u-btn--wa:hover { background: var(--c-whatsapp-dk); border-color: var(--c-whatsapp-dk); color: #fff; } .sec :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } /* --------------------------------------------------------------------- 7. ZAGLAVLJE --------------------------------------------------------------------- */ .sec-klar-header .site-head.is-stuck { background: rgba(255, 255, 255, 0.92); box-shadow: 0 1px 0 var(--c-line), 0 8px 24px rgba(22, 36, 31, 0.06); } /* Na širokom ekranu hero fotografija ide ispod fiksnog zaglavlja, pa je zaglavlje na vrhu stranice svijetlo; čim se zalijepi (`is-stuck`) dobija bijelu podlogu i vraća se na tamno pismo. ISPOD 768 px ovo NE vrijedi: tamo fotografija počinje tek ispod trake, zaglavlje stoji na bijelom, i pismo mora ostati tamno. */ @media (min-width: 768px) { .sec-klar-header .site-head:not(.is-stuck) .brand__tx strong { color: #fff; } .sec-klar-header .site-head:not(.is-stuck) .brand__tx small { color: rgba(255, 255, 255, 0.62); } .sec-klar-header .site-head:not(.is-stuck) .site-nav a { color: rgba(255, 255, 255, 0.88); } .sec-klar-header .site-head:not(.is-stuck) .site-nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.14); } .sec-klar-header .site-head:not(.is-stuck) .head-tel { color: #fff; } .sec-klar-header .site-head:not(.is-stuck) .head-tel__ic { color: #7fc9bb; } .sec-klar-header .site-head:not(.is-stuck) .head-tel:hover { color: #7fc9bb; } } /* Burger ostaje kakav jest: bijeli krug sa tamnim crticama — vidi se i na svijetloj traci i preko fotografije. */ .sec-klar-header .brand__mark { width: 40px; height: 40px; color: var(--accent); filter: drop-shadow(0 4px 10px rgba(16, 93, 80, 0.22)); } .sec-klar-header .brand__mark svg { width: 100%; height: 100%; display: block; } .sec-klar-header .brand__tx strong { font-family: var(--ff-display); font-weight: 800; letter-spacing: -0.015em; color: var(--primary); } .sec-klar-header .brand__tx small { color: var(--c-text-muted); letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.66rem; } .sec-klar-header .site-nav a { font-family: var(--ff-body); font-weight: 600; color: var(--c-text); border-radius: var(--r-pill); padding: 8px 14px; } .sec-klar-header .site-nav a:hover { color: var(--accent); background: var(--accent-soft); } .sec-klar-header .head-tel { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ff-display); font-weight: 800; font-size: 1.02rem; color: var(--primary); text-decoration: none; padding: 8px 6px; white-space: nowrap; } .sec-klar-header .head-tel__ic { width: 17px; height: 17px; flex: none; color: var(--accent); } .sec-klar-header .head-tel:hover { color: var(--accent); } @media (max-width: 1080px) { .sec-klar-header .head-tel { display: none; } } .sec-klar-header .fmenu__sheet { background: #fff; } .sec-klar-header .fmenu__list a { font-family: var(--ff-display); font-weight: 700; color: var(--primary); /* Templat je stavke crtao kao plakat (28–44 px). Na telefonu je to preveliko: pet stavki pojede ekran i meni se mora skrolati. */ font-size: clamp(1.15rem, 5vw, 1.5rem); padding: 12px 0; } .sec-klar-header .fmenu__tel { font-family: var(--ff-display); font-weight: 800; color: var(--accent); } .sec-klar-header .fmenu__hours { color: var(--c-text-muted); font-size: 0.9rem; } .sec-klar-header .mobile-bar { box-shadow: 0 -2px 10px rgba(22, 36, 31, 0.06), 0 14px 34px rgba(22, 36, 31, 0.16); border: 1px solid var(--c-line); } .sec-klar-header .mobile-bar__i { font-family: var(--ff-body); font-weight: 650; } .sec-klar-header .mobile-bar__i--wa { background: var(--c-whatsapp); color: #fff; } .sec-klar-header .mobile-bar__i--cta { background: var(--accent); color: #fff; border-radius: var(--r-pill); } /* --------------------------------------------------------------------- 8. HERO --------------------------------------------------------------------- */ /* Hero je sada jedna fotografija preko cijele sekcije, a tekst stoji DESNO preko nje. Žena je u lijevoj trećini kadra, pa zastor ide obrnuto od uobičajenog: proziran lijevo (da se lice vidi), gust desno (da se tekst čita). */ .sec-sonnenschein-hero { background: #0d1614; } .sec-sonnenschein-hero .hero { background: #0d1614; } .sec-sonnenschein-hero .hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; } .sec-sonnenschein-hero .hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 28% 42%; display: block; } .sec-sonnenschein-hero .hero__scrim { position: absolute; inset: 0; background: linear-gradient(95deg, rgba(13, 22, 20, 0.20) 0%, rgba(13, 22, 20, 0.34) 28%, rgba(13, 22, 20, 0.72) 52%, rgba(13, 22, 20, 0.88) 72%, rgba(13, 22, 20, 0.92) 100%); } /* Tekst ide u desnu kolonu. Lijeva ostaje prazna — tu se vidi fotografija. Ispod 768 px vrijedi pravilo iz odjeljka „Telefon". */ @media (min-width: 768px) { .sec-sonnenschein-hero .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); } .sec-sonnenschein-hero .hero__copy { grid-column: 2; } } .sec-sonnenschein-hero .hero__copy { max-width: 34rem; } .sec-sonnenschein-hero .hero h1 { color: #fff; max-width: 16ch; } .sec-sonnenschein-hero .hero h1 .u-mark { color: #7fc9bb; } .sec-sonnenschein-hero .hero__lead { color: rgba(255, 255, 255, 0.86); } .sec-sonnenschein-hero .u-chip { background: rgba(255, 255, 255, 0.12); color: #cfeae4; border: 1px solid rgba(255, 255, 255, 0.2); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } /* Sporedno dugme je preko fotografije obrubljeno svijetlo. */ .sec-sonnenschein-hero .hero__cta .u-btn--line { border-color: rgba(255, 255, 255, 0.42); color: #fff; } .sec-sonnenschein-hero .hero__cta .u-btn--line:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; color: #fff; } .sec-sonnenschein-hero .u-wave--bottom path { fill: #ffffff; } /* --------------------------------------------------------------------- 9. USLUGE Traženo: kontejner bez razmaka sa obje strane, tri usluge po redu. --------------------------------------------------------------------- */ .sec-fundament-services { background: #ffffff; } .sec-fundament-services .svcs { background: #ffffff; } /* Kontejner je normalan — ista širina i isti bočni razmak kao ostale sekcije, tako da se lijeva ivica poklapa niz cijelu stranicu. */ .sec-fundament-services .u-container { max-width: var(--maxw); padding-inline: var(--gutter); } @media (min-width: 1140px) { .sec-fundament-services .u-container { padding-left: var(--gutter); } } /* Tri kartice po redu. Ovo je jedino mjesto gdje se dira broj kolona, i to na izričit zahtjev. Ispod 760 px vrijedi prelom iz section.css. */ @media (min-width: 761px) { .sec-fundament-services .svcs__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .sec-fundament-services .svcs__grid { gap: clamp(16px, 1.8vw, 24px); } .sec-fundament-services .svc { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-xl); box-shadow: var(--sh-sm); padding: clamp(24px, 2.8vw, 34px); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .sec-fundament-services .svc:hover { border-color: var(--accent); box-shadow: var(--sh-md); transform: translateY(-2px); } /* Peta kartica je tamna — daje drugom redu težinu i zatvara ga. */ .sec-fundament-services .svc--accent { background: var(--primary); border-color: var(--primary); } .sec-fundament-services .svc--accent:hover { background: #10201b; border-color: var(--primary); } .sec-fundament-services .svc--accent .svc__body h3 { color: #fff; } .sec-fundament-services .svc--accent .svc__body p { color: rgba(255, 255, 255, 0.76); } .sec-fundament-services .svc--accent .svc__ic { background: rgba(255, 255, 255, 0.1); color: #7fc9bb; } .sec-fundament-services .svc--accent:hover .svc__ic { background: var(--accent); color: #fff; } .sec-fundament-services .svc__ic { width: 52px; height: 52px; border-radius: 14px; background: var(--accent-soft); color: var(--accent-strong); } .sec-fundament-services .svc:hover .svc__ic { background: var(--accent); color: #fff; } .sec-fundament-services .svc__ic svg { width: 25px; height: 25px; } .sec-fundament-services .svc__body h3 { color: var(--primary); margin-bottom: 8px; } .sec-fundament-services .svc__body p { color: var(--c-text-muted); font-size: 0.97rem; margin: 0; } .sec-fundament-services .svcs__head { margin-bottom: clamp(32px, 4vw, 56px); } /* --------------------------------------------------------------------- 10. RECENZIJE Tri po strani; iznad toga dugmad „Prethodne / Sljedeće". --------------------------------------------------------------------- */ .sec-anker-referenzen { background: #f2f7f6; } .sec-anker-referenzen .u-label--jade { color: var(--accent); } .sec-anker-referenzen .u-head h2 { color: var(--primary); } .sec-anker-referenzen .u-head p { color: var(--c-text-muted); max-width: 46ch; } .sec-anker-referenzen .gsum { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-xl); box-shadow: var(--sh-sm); padding: clamp(20px, 2.4vw, 28px); } .sec-anker-referenzen .gsum__score strong { font-family: var(--ff-display); font-size: clamp(2.2rem, 4vw, 2.9rem); font-weight: 800; color: var(--primary); } .sec-anker-referenzen .u-stars svg { color: var(--c-star); width: 19px; height: 19px; } .sec-anker-referenzen .u-stars svg.is-off { color: var(--c-line-strong); } .sec-anker-referenzen .gsum__meta { color: var(--c-text-muted); font-size: 0.92rem; } .sec-anker-referenzen .gsum__link { align-self: start; color: var(--accent); font-weight: 650; text-decoration: none; border-bottom: 1.5px solid var(--accent-soft); } .sec-anker-referenzen .gsum__link:hover { border-bottom-color: var(--accent); } .sec-anker-referenzen .rcard { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-xl); box-shadow: var(--sh-sm); transition: box-shadow .2s ease, transform .2s ease; } .sec-anker-referenzen .rcard:hover { box-shadow: var(--sh-md); transform: translateY(-2px); } .sec-anker-referenzen .rcard__tr p { color: var(--c-text); font-size: 1rem; line-height: 1.6; margin: 0; } .sec-anker-referenzen .rcard__who { font-family: var(--ff-display); font-weight: 700; color: var(--primary); } .sec-anker-referenzen .rcard__src { color: var(--c-text-muted); font-size: 0.85rem; } .sec-anker-referenzen .u-tab { background: var(--accent-soft); color: var(--accent-strong); font-family: var(--ff-body); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border-radius: var(--r-pill); padding: 5px 12px; } .sec-anker-referenzen .u-tab--jade { background: var(--accent); color: #fff; } /* Zamjena strane — kartice se pojave, ne skoče. */ .sec-anker-referenzen .rev__grid.is-swap .rcard { animation: rev-in .34s var(--ease, cubic-bezier(.4,0,.2,1)) both; } .sec-anker-referenzen .rev__grid.is-swap .rcard:nth-child(2) { animation-delay: .06s; } .sec-anker-referenzen .rev__grid.is-swap .rcard:nth-child(3) { animation-delay: .12s; } @keyframes rev-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .sec-anker-referenzen .rev__grid.is-swap .rcard { animation: none; } } /* Dugmad. `hidden` mora pobijediti `display`, inače strelice stoje i kad recenzija nema — zato eksplicitno pravilo za [hidden]. */ .sec-anker-referenzen .rev__nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: clamp(28px, 3.4vw, 40px); } .sec-anker-referenzen .rev__nav[hidden], .sec-anker-referenzen .rev__grid[hidden], .sec-anker-referenzen .rev__invite[hidden] { display: none; } .sec-anker-referenzen .rev__arrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ff-body); font-size: 0.94rem; font-weight: 650; color: var(--primary); background: #fff; border: 1.5px solid var(--c-line-strong); border-radius: var(--r-pill); padding: 11px 20px; min-height: 46px; cursor: pointer; transition: border-color .18s ease, color .18s ease, background-color .18s ease, opacity .18s ease; } .sec-anker-referenzen .rev__arrow svg { width: 18px; height: 18px; } .sec-anker-referenzen .rev__arrow:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .sec-anker-referenzen .rev__arrow:disabled { opacity: .38; cursor: default; } .sec-anker-referenzen .rev__count { font-family: var(--ff-display); font-weight: 700; color: var(--c-text-muted); min-width: 4.5ch; text-align: center; margin: 0; } /* Stanje bez recenzija */ .sec-anker-referenzen .rev__invite { margin-top: clamp(36px, 4.4vw, 56px); background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-xl); box-shadow: var(--sh-sm); padding: clamp(30px, 4vw, 48px) clamp(22px, 4vw, 44px); max-width: 640px; margin-inline: auto; text-align: center; } .sec-anker-referenzen .rev__invite-ic { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--accent-soft); color: var(--c-star); margin-bottom: 16px; } .sec-anker-referenzen .rev__invite-ic svg { width: 26px; height: 26px; } .sec-anker-referenzen .rev__invite h3 { color: var(--primary); margin: 0 0 10px; font-size: 1.4rem; } .sec-anker-referenzen .rev__invite p { color: var(--c-text-muted); margin: 0 auto 22px; max-width: 44ch; } .sec-anker-referenzen .rev__invite-act { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } /* --------------------------------------------------------------------- 11. PARALLAX / VIDEO --------------------------------------------------------------------- */ /* Panel je iz templata dolazio kao zaobljena ploča uvučena od ivica, sa vlastitom pozadinom. Ovdje je video preko cijele širine: bez uvlačenja, bez zaobljenja, bez podloge. */ .sec-nordlicht-parallax .u-panel { margin-inline: 0; margin-bottom: 0; border-radius: 0; background: transparent; } .sec-nordlicht-parallax .plx { background: #0d1614; } .sec-nordlicht-parallax .plx__video { object-fit: cover; object-position: 50% 40%; } .sec-nordlicht-parallax .plx__veil { background: linear-gradient(180deg, rgba(22, 36, 31, 0.42) 0%, rgba(22, 36, 31, 0.58) 55%, rgba(22, 36, 31, 0.72) 100%); } .sec-nordlicht-parallax .plx__title { color: #fff; } .sec-nordlicht-parallax .plx__lead { color: rgba(255, 255, 255, 0.88); max-width: 54ch; } .sec-nordlicht-parallax .plx__toggle { background: rgba(255, 255, 255, 0.16); color: #fff; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: var(--r-pill); } /* --------------------------------------------------------------------- 12. O NAMA --------------------------------------------------------------------- */ .sec-calm-about { background: #ffffff; } .sec-calm-about .abt__blob { background: var(--accent-soft); } .sec-calm-about .abt__photo, .sec-calm-about .abt__portrait { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-lg); } .sec-calm-about .abt__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 45%; } .sec-calm-about .abt__portrait { border: 5px solid #fff; } .sec-calm-about .abt__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; } .sec-calm-about .abt__badge { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--sh-md); } .sec-calm-about .abt__badge-icon { background: var(--accent); color: #fff; } .sec-calm-about .abt__badge-text strong { font-family: var(--ff-display); color: var(--primary); } .sec-calm-about .abt__badge-text small { color: var(--c-text-muted); } .sec-calm-about .abt__dots { color: var(--accent-soft); } .sec-calm-about .abt__copy h2 { color: var(--primary); } .sec-calm-about .abt__lead { color: var(--c-text-muted); } .sec-calm-about .abt__points li { color: var(--c-text); } .sec-calm-about .abt__points strong { color: var(--primary); } .sec-calm-about .abt__tick { background: var(--accent); } /* --------------------------------------------------------------------- 13. ZAŠTO SNIMAK (prije / poslije) --------------------------------------------------------------------- */ .sec-quiet-hours-results { background: #f2f7f6; } .sec-quiet-hours-results .res__head h2 { color: var(--primary); } .sec-quiet-hours-results .res__head p { color: var(--c-text-muted); } .sec-quiet-hours-results .case { background: transparent; } .sec-quiet-hours-results .case h3 { color: var(--primary); } .sec-quiet-hours-results .case figure { border-radius: var(--r-lg); overflow: hidden; background: #fff; border: 1px solid var(--c-line); box-shadow: var(--sh-sm); } .sec-quiet-hours-results .case figure img { width: 100%; aspect-ratio: 900 / 491; object-fit: cover; object-position: 50% 45%; display: block; } .sec-quiet-hours-results .case figcaption { padding: 12px 14px 14px; color: var(--c-text-muted); font-size: 0.88rem; line-height: 1.45; } .sec-quiet-hours-results .case__tag { background: var(--c-surface); color: var(--primary); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; border-radius: var(--r-pill); padding: 4px 10px; margin-right: 8px; } .sec-quiet-hours-results .case__tag--a { background: var(--accent); color: #fff; } .sec-quiet-hours-results .res__data { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-xl); box-shadow: var(--sh-sm); padding: clamp(26px, 3.4vw, 44px); margin-top: clamp(40px, 5vw, 64px); } .sec-quiet-hours-results .res__data-h { color: var(--primary); margin-top: 0; } .sec-quiet-hours-results .fig__n { color: var(--c-text-muted); } .sec-quiet-hours-results .u-num { font-family: var(--ff-display); color: var(--primary); font-weight: 800; } .sec-quiet-hours-results .fig__bar { background: var(--c-surface); border-radius: var(--r-pill); } .sec-quiet-hours-results .fig__bar::before { background: var(--accent); border-radius: var(--r-pill); } .sec-quiet-hours-results .fig--warn .fig__bar::before { background: var(--c-star); } .sec-quiet-hours-results .fig__t { color: var(--c-text-muted); font-size: 0.92rem; } /* --------------------------------------------------------------------- 14. PITANJA --------------------------------------------------------------------- */ .sec-sonnenschein-faq { background: #ffffff; } .sec-sonnenschein-faq .faq__head h2 { color: var(--primary); } .sec-sonnenschein-faq .faq__head p { color: var(--c-text-muted); } .sec-sonnenschein-faq .u-chip { background: var(--accent-soft); color: var(--accent-strong); } .sec-sonnenschein-faq .qa { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--sh-sm); transition: border-color .2s ease, box-shadow .2s ease; } .sec-sonnenschein-faq .qa--mint, .sec-sonnenschein-faq .qa--sun, .sec-sonnenschein-faq .qa--coral, .sec-sonnenschein-faq .qa--white { background: #fff; } .sec-sonnenschein-faq .qa:hover { border-color: var(--accent); } .sec-sonnenschein-faq .qa__q button { font-family: var(--ff-display); font-weight: 700; font-size: 1.03rem; color: var(--primary); padding: 20px 22px; } .sec-sonnenschein-faq .qa__sign { color: var(--accent); } /* Odgovor je nosio DVA punjenja — jedno na .qa__in (moje) i jedno na samom

(iz templata), pa je tekst bio uvučen dublje od pitanja iznad njega. Punjenje paragrafa ide van; ostaje ono na omotaču, koje odgovor poravnava tačno ispod pitanja. */ .sec-sonnenschein-faq .qa__in { padding: 0 22px 20px; } .sec-sonnenschein-faq .qa__in > p { padding: 0; } .sec-sonnenschein-faq .qa__in p { color: var(--c-text-muted); margin: 0; } .sec-sonnenschein-faq .qa__in a { color: var(--accent); font-weight: 600; } /* --------------------------------------------------------------------- 15. KONTAKT --------------------------------------------------------------------- */ /* Pozadinski video — 3D žičani model zuba. Ide iza sadržaja; tekst ostaje čitljiv preko dvostrukog zastora (jedna ravna gustina za cijelu plohu, jedan gradijent gušći uz lijevu ivicu, gdje stoji naslov). Video je ukras: aria-hidden, bez zvuka i bez kontrola. */ .sec-anker-cta .cta { position: relative; isolation: isolate; overflow: hidden; background: #0d1614; } .sec-anker-cta .cta__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .sec-anker-cta .cta__video { width: 100%; height: 100%; object-fit: cover; object-position: 42% 50%; display: block; } .sec-anker-cta .cta__veil { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(13, 22, 20, 0.90) 0%, rgba(13, 22, 20, 0.74) 42%, rgba(13, 22, 20, 0.58) 72%, rgba(13, 22, 20, 0.66) 100%), rgba(13, 22, 20, 0.22); } @media (prefers-reduced-motion: reduce) { .sec-anker-cta .cta__video { display: none; } .sec-anker-cta .cta__bg { background: #0d1614 url(video/cta-poster.jpg) center / cover no-repeat; } } .sec-anker-cta .cta__copy h2 { color: #fff; } .sec-anker-cta .cta__copy p { color: rgba(255, 255, 255, 0.8); max-width: 48ch; } .sec-anker-cta .u-label { color: #7fc9bb; } /* Preko videa kartica mora imati vlastitu podlogu, inače se rub žičanog modela probija kroz nju i dugmad se gube. */ .sec-anker-cta .cta__act { background: rgba(9, 17, 15, 0.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--r-xl); padding: clamp(24px, 3vw, 34px); } .sec-anker-cta .u-tab--line { background: transparent; border: 1px solid rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.82); border-radius: var(--r-pill); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 12px; } .sec-anker-cta .cta__ready { color: rgba(255, 255, 255, 0.74); font-size: 0.93rem; } .sec-anker-cta .cta__ready li::marker { color: #7fc9bb; } /* --------------------------------------------------------------------- 16. PODNOŽJE --------------------------------------------------------------------- */ /* Podnožje je tamno — zatvara stranicu i odvaja je od CTA sekcije iznad tankom akcentnom linijom umjesto sivim rubom. */ .sec-housecall-footer .ftr { background: #0d1614; border-top: 2px solid var(--accent); --c-line: rgba(255, 255, 255, 0.12); } .sec-housecall-footer .ftr__mark { width: 40px; height: 40px; color: var(--accent); flex: none; } .sec-housecall-footer .ftr__mark svg { width: 100%; height: 100%; display: block; } .sec-housecall-footer .ftr__logo-tx strong { font-family: var(--ff-display); font-weight: 800; color: #fff; } .sec-housecall-footer .ftr__logo-tx small { color: rgba(255, 255, 255, 0.55); letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.68rem; } .sec-housecall-footer .ftr__blurb { color: rgba(255, 255, 255, 0.66); max-width: 34ch; } .sec-housecall-footer .ftr__col h3 { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: #7fc9bb; font-family: var(--ff-body); font-weight: 700; } .sec-housecall-footer .ftr__map { color: #fff; font-style: normal; font-weight: 600; text-decoration: none; border-bottom: 1.5px solid rgba(127, 201, 187, 0.4); } .sec-housecall-footer .ftr__map:hover { color: #7fc9bb; border-bottom-color: #7fc9bb; } .sec-housecall-footer .ftr__hint { color: rgba(255, 255, 255, 0.5); font-size: 0.85rem; } .sec-housecall-footer .ftr__hours th { color: rgba(255, 255, 255, 0.6); font-weight: 600; padding-right: 18px; } .sec-housecall-footer .ftr__hours td { color: #fff; font-weight: 650; } .sec-housecall-footer .ftr__social { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; color: rgba(255, 255, 255, 0.66); text-decoration: none; font-weight: 600; font-size: 0.92rem; } .sec-housecall-footer .ftr__social svg { width: 20px; height: 20px; } .sec-housecall-footer .ftr__social:hover { color: #7fc9bb; } .sec-housecall-footer .ftr__bar { border-top: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.5); font-size: 0.88rem; } .sec-housecall-footer .ftr__top-btn { background: transparent; border: 1.5px solid rgba(255, 255, 255, 0.24); border-radius: var(--r-pill); color: #fff; font-family: var(--ff-body); font-weight: 650; padding: 9px 18px; cursor: pointer; } .sec-housecall-footer .ftr__top-btn:hover { border-color: #7fc9bb; color: #7fc9bb; } /* --------------------------------------------------------------------- 17. LEBDEĆE WHATSAPP DUGME Na telefonu tu je već donja traka sa WhatsApp-om, pa se ovo skriva ispod 620 px (assets/app.js pali klasu). Ikona nikad nije sama — uz nju stoji riječ. --------------------------------------------------------------------- */ .wa-float { position: fixed; right: clamp(16px, 3vw, 28px); bottom: clamp(16px, 3vw, 28px); z-index: 60; display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px; border-radius: 999px; background: #128c7e; color: #fff; font-family: var(--font-sans); font-weight: 650; font-size: 0.95rem; text-decoration: none; box-shadow: 0 10px 28px rgba(18, 140, 126, 0.34); transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease; } .wa-float svg { width: 22px; height: 22px; } .wa-float:hover { background: #0e6f63; transform: translateY(-2px); box-shadow: 0 14px 34px rgba(18, 140, 126, 0.4); } .wa-float.is-hidden { display: none; } /* ===================================================================== 18. TELEFON — mjera, ne ispravka Traženo: razmak sekcija 45px, kontejner 80 % širine, bez bočnog punjenja. ===================================================================== */ @media (max-width: 767px) { /* --- Zaglavlje: traka sa imenom, ne prazno bijelo polje --- Na širokom ekranu zaglavlje je prozirno i stoji PREKO tamne hero fotografije, pa je pismo bijelo. Na telefonu hero se slaže u blokove i fotografija silazi ISPOD zaglavlja — traka tada stoji na bijeloj podlozi, a bijelo pismo na njoj nestaje. Otud utisak praznog bijelog polja: ime firme je bilo tu, samo nevidljivo. */ .sec-klar-header .site-head { background: #fff; box-shadow: 0 1px 0 var(--c-line); } .sec-klar-header .site-head:not(.is-stuck) .brand__tx strong { color: var(--primary); } .sec-klar-header .site-head:not(.is-stuck) .brand__tx small { color: var(--c-text-muted); } .sec-klar-header .brand__tx small { display: block; } .sec-klar-header .brand__mark { width: 34px; height: 34px; } .sec-klar-header .brand { gap: 10px; } /* Sekcija zaglavlja drži mjesto fiksne trake u toku dokumenta. Templat je tu rezervisao 84 px — koliko treba DONJOJ traci, ali mjereno na vrhu stranice. Odatle bijela crta između zaglavlja i hero fotografije. Ovdje se rezerviše tačno visina trake, a razmak za donju traku ide na podnožje, gdje mu je i mjesto. */ .sec-klar-header { padding-bottom: var(--header-h); } .sec-housecall-footer .ftr { padding-bottom: 96px; } /* Razmak na vrhu i dnu svake sekcije. */ .sec-klar-header, .sec-sonnenschein-hero, .sec-fundament-services, .sec-anker-referenzen, .sec-nordlicht-parallax, .sec-calm-about, .sec-quiet-hours-results, .sec-sonnenschein-faq, .sec-anker-cta, .sec-housecall-footer { --section-y: 45px; } .sec .u-section { padding-block: 45px; } .sec-nordlicht-parallax .plx { padding-block: 45px; } .sec-anker-cta .cta { padding-block: 45px; } .sec-housecall-footer .ftr { padding-block: 45px; } /* Sekcija zaglavlja već drži visinu fiksne trake u toku dokumenta, pa hero ne dodaje ništa preko traženih 45 px. */ .sec-sonnenschein-hero .hero { padding-block: 45px; } /* Kontejner: 80 % širine, centriran, bez bočnog punjenja. Hero i parallax nemaju .u-container nego vlastiti inner — i oni se svode na istu širinu, da se ivica teksta poklapa niz stranicu. */ .sec .u-container, .sec .u-inner, .sec-sonnenschein-hero .hero__inner, .sec-fundament-services .u-container, .sec-fundament-services .svcs__head { width: 80%; max-width: 80%; margin-inline: auto; padding-left: 0; padding-right: 0; } .sec-sonnenschein-hero .hero__inner { padding-inline: 0; } .sec-sonnenschein-hero .hero__copy { max-width: 100%; } /* --- Hero: naslov i jedno dugme iznad pregiba --- */ /* Na telefonu tekst NE stoji preko fotografije. Slika je vlastiti blok na vrhu, u upotrebljivom omjeru i bez zatamnjenja, a tekst ide ispod nje — pun kontrast na tamnoj podlozi brenda. */ .sec-sonnenschein-hero .hero { --hero-img-h: 62vw; } .sec-sonnenschein-hero .hero__bg { inset: 0 0 auto 0; height: var(--hero-img-h); } .sec-sonnenschein-hero .hero__bg img { object-position: 30% 38%; } .sec-sonnenschein-hero .hero__scrim { display: none; } .sec-sonnenschein-hero .hero { padding-block: calc(var(--hero-img-h) + 28px) 45px; } .sec-sonnenschein-hero .hero__inner { gap: 22px; } .sec-sonnenschein-hero .hero__copy > * + * { margin-top: 14px; } .sec-sonnenschein-hero h1 { font-size: clamp(1.7rem, 7.4vw, 2.1rem); max-width: 18ch; } .sec-sonnenschein-hero .hero__lead { font-size: 0.98rem; margin-top: 16px; max-width: 36ch; } /* Uvod je na telefonu kraći — tri reda, ne šest. */ .sec-sonnenschein-hero .hero__lead .u-wide { display: none; } /* Jedno dugme je glavno; drugo je lakše i ne uzima pola ekrana. */ .sec-sonnenschein-hero .hero__cta { gap: 6px; } .sec-sonnenschein-hero .hero__cta .u-btn--line { background: transparent; border-color: transparent; color: #7fc9bb; text-decoration: underline; text-underline-offset: 4px; min-height: 42px; padding: 8px 0; width: auto; } .sec-sonnenschein-hero .hero__cta .u-btn--line:hover { background: transparent; } /* --- Usluge: jedna po redu, kartice sa punom ivicom --- */ .sec-fundament-services .svcs__grid { gap: 12px; } .sec-fundament-services .svc { border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--c-line); } /* --- Recenzije: dugmad dovoljno velika za palac --- */ .sec-anker-referenzen .rev__arrow { padding: 12px 16px; min-height: 48px; flex: 1; justify-content: center; } .sec-anker-referenzen .rev__nav { gap: 10px; } .sec-anker-referenzen .rev__invite-act .u-btn { width: 100%; } /* --- Prije / poslije: parovi jedan ispod drugog čitljivi --- */ .sec-quiet-hours-results .case figure img { aspect-ratio: 16 / 9; } /* --- Podnožje --- */ .sec-housecall-footer .ftr__grid { gap: 28px; } } /* Vrlo uski ekrani — 80 % od 320 px je pretijesno za dugmad. */ @media (max-width: 360px) { .sec .u-container, .sec .u-inner, .sec-fundament-services .u-container, .sec-fundament-services .svcs__head { width: 88%; max-width: 88%; } }