/* ============================================================ Stomatološka ordinacija Dr Ristić — stil sajta. Učitava se POSLIJE svih `sekcije//section.css` i nadjačava ih. Sekcije dolaze iz dvije porodice (Calm Clinical i Bloom) i svaka definiše svoje tokene na `.sec-`. Sajt se ujednačava tako što se ti tokeni ovdje prepišu — geometrija sekcija (display, grid, position, align, text-align) se NE dira. Paleta je izmjerena iz logotipa ordinacije: kraljevska plava #0441B2 i siva #5A6064 sa znaka. ============================================================ */ :root { /* ---------- Boje iz logotipa ---------- */ --brand: #0441B2; /* plava sa znaka; 8,7:1 na bijeloj */ --brand-dk: #03318A; /* hover */ --brand-lt: #4C7FDD; /* prsten fokusa, svijetli akcent */ --brand-arc: #7FA9F2; /* luk ispod riječi, potezi, trake */ --brand-soft: #E7EEFB; /* podloge kartica i značaka */ --brand-tint: rgba(4, 65, 178, 0.12); --ink: #0C1E3C; /* tamna mornarska — naslovi, tamne trake */ --ink-2: #142B54; --slate: #5A6064; /* siva sa znaka */ --bg: #F8FAFD; --bg-alt: #EDF2FA; --white: #FFFFFF; --text: #1B2432; --text-muted: #4E5B6E; /* 6,5:1 na --bg */ --line: rgba(12, 30, 60, 0.13); --line-strong: rgba(12, 30, 60, 0.24); --wa: #128C7E; --wa-dk: #0E6F63; --ff: 'Inter Variable', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } /* ---------- Osnova dokumenta ---------- */ html { scroll-behavior: smooth; /* Sekcije ga postavljaju na sebe, gdje nema efekta — element koji skroluje je . */ scroll-padding-top: 92px; } @media (max-width: 760px) { html { scroll-padding-top: 80px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--ff); /* clip, ne hidden: ne pravi scroll kontejner pa ljepljivi elementi rade */ overflow-x: clip; } /* Sekcije koje nose dekorativne mrlje ih zadržavaju kod sebe. */ .band { position: relative; overflow-x: clip; } /* ============================================================ 1. TOKENI — jedna paleta i jedno pismo za obje porodice ============================================================ */ .sec { /* --- boje: Calm Clinical --- */ --c-bg: var(--bg); --c-bg-alt: var(--bg-alt); --c-surface: var(--brand-soft); --c-surface-soft: #F1F5FD; --c-white: var(--white); --c-primary: var(--brand); --c-primary-dk: var(--ink); --c-primary-lt: var(--brand-lt); --c-primary-05: rgba(4, 65, 178, 0.05); --c-primary-10: rgba(4, 65, 178, 0.10); --c-primary-20: rgba(4, 65, 178, 0.18); --c-accent: var(--brand-arc); --c-accent-dk: var(--brand); --c-accent-soft: var(--brand-soft); --c-accent-tint: var(--brand-tint); --c-text: var(--text); --c-text-muted: var(--text-muted); --c-text-invert: var(--white); --c-border: var(--line); --c-border-strong: var(--line-strong); --c-whatsapp: var(--wa); --c-whatsapp-dk: var(--wa-dk); --c-whatsapp-vivid:#25D366; --c-star: #E0A02E; --c-google-blue: #4285F4; /* --- boje: dodatna imena iz porodice Bloom --- */ --c-primary-08: rgba(4, 65, 178, 0.08); --c-primary-14: rgba(4, 65, 178, 0.14); --c-on-dark: #EAF1FF; --c-on-dark-mu: rgba(234, 241, 255, 0.78); --c-line: var(--line); --c-line-strong: var(--line-strong); --c-line-dark: rgba(234, 241, 255, 0.22); /* --- sjenke: jedna skala, tonirana u mornarsko --- */ --sh-xs: 0 1px 2px rgba(12, 30, 60, 0.06); --sh-sm: 0 2px 10px rgba(12, 30, 60, 0.07); --sh-md: 0 10px 28px -8px rgba(12, 30, 60, 0.14), 0 2px 6px rgba(12, 30, 60, 0.05); --sh-lg: 0 22px 52px -14px rgba(12, 30, 60, 0.20), 0 4px 12px rgba(12, 30, 60, 0.06); --sh-xl: 0 34px 76px -18px rgba(12, 30, 60, 0.26); --sh-focus: 0 0 0 3px var(--white), 0 0 0 6px var(--brand-lt); /* --- zaobljenja: jedna skala --- */ --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-2xl: 44px; --r-pill: 999px; --r-circle: 50%; --r-gallery: 12px; /* --- razmaci i širina --- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 16px; --sp-4: 24px; --sp-5: 32px; --sp-6: 48px; --sp-7: 64px; --sp-8: 96px; --sp-9: 128px; --section-y: clamp(64px, 8.6vw, 118px); --gutter: clamp(20px, 5vw, 44px); --maxw: 1180px; --maxw-text: 68ch; /* --- pismo: jedno kroz cijeli sajt --- */ --ff-display: var(--ff); --ff-body: var(--ff); --fs-xs: 0.8125rem; --fs-sm: 0.9375rem; --fs-base: 1rem; --fs-md: 1.0625rem; --fs-lg: clamp(1.0625rem, 0.35vw + 1rem, 1.1875rem); --fs-h4: clamp(1.1875rem, 0.6vw + 1.05rem, 1.375rem); --fs-h3: clamp(1.375rem, 0.9vw + 1.15rem, 1.75rem); --fs-h2: clamp(1.875rem, 2.2vw + 1.3rem, 2.75rem); --fs-h1: clamp(2.25rem, 3.8vw + 1.15rem, 3.75rem); --lh-tight: 1.08; --lh-snug: 1.22; --lh-body: 1.62; --ls-tight: -0.025em; --ls-label: 0.13em; /* --- pokret --- */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-soft: cubic-bezier(0.33, 1, 0.68, 1); --t-fast: 150ms; --t-base: 260ms; --t-slow: 620ms; /* --- raspored --- */ --header-h: 76px; --util-h: 0px; --z-header: 100; --z-mobilebar: 90; --z-menu: 95; --z-lightbox: 120; } @media (max-width: 760px) { .sec { --header-h: 64px; } } /* Naizmjenična pozadina — luk ispod heroja i valovite ivice sekcija crtaju boju SLJEDEĆE sekcije, pa ovaj ritam mora ostati ovakav. */ .sec-bloom-referenzen, .sec-calm-cta { --c-bg: var(--bg-alt); } .sec-calm-cta .cta { background: var(--c-bg-alt); } /* ---------- Tipografija ---------- */ .sec h1, .sec h2, .sec h3, .sec h4 { font-weight: 700; letter-spacing: var(--ls-tight); color: var(--ink); } .sec h3 { letter-spacing: -0.015em; } .sec h4 { letter-spacing: -0.01em; } .sec { font-feature-settings: "cv05" 1, "ss03" 1; } /* Brojke u tabelama i statistici u istoj širini. */ .sec table, .sec .plx__num, .sec .gsum__score { font-variant-numeric: tabular-nums; } /* ============================================================ 2. ZNAK ORDINACIJE Znak je izvučen iz plakata iz paketa i stoji na bijelom krugu — tako se dvije boje sa znaka (plava i siva) vide i u podnožju. ============================================================ */ .sec-calm-header .brand__mark { padding: 4px; background: var(--white); border: 1px solid var(--line); box-shadow: var(--sh-sm); } .sec-calm-header .brand__mark img { width: 100%; height: auto; } .sec-calm-footer .ftr__logo-mark { padding: 6px; background: var(--white); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22); } .sec-calm-footer .ftr__logo-mark img { width: 100%; height: auto; } /* ============================================================ 3. TVRDE BOJE IZ TEMPLATA Četiri mjesta u `section.css` nose heks vrijednosti izvan tokena; ovdje dobijaju boju ordinacije. ============================================================ */ /* Mrlja iza heroja */ .sec-calm-hero .hero__blob--a { background: radial-gradient(circle at 34% 30%, #D6E2F8, var(--brand-soft) 62%, transparent 72%); } /* Krugovi sa inicijalima u kartici heroja */ .sec-calm-hero .hero__card-avatars i:nth-child(2) { background: linear-gradient(140deg, var(--brand-lt), var(--brand)); color: var(--white); } .sec-calm-hero .hero__card-avatars i:nth-child(3) { background: linear-gradient(140deg, #8A9299, var(--slate)); color: var(--white); } /* Kvačica u spisku usluga */ .sec-bloom-services .scard__list li::before { background: var(--brand-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230441B2' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.4 4.4L19 7.3'/%3E%3C/svg%3E") center / 13px no-repeat; } /* Velika kartica poziva na akciju */ .sec-calm-cta .cta__card { background: radial-gradient(120% 130% at 6% 0%, #2A63C8 0%, var(--brand) 42%, var(--ink-2) 100%); } /* Podnožje */ .sec-calm-footer .ftr { background: radial-gradient(115% 95% at 10% 0%, var(--ink-2) 0%, var(--ink) 52%, #08152B 100%); color: rgba(234, 241, 255, 0.80); } /* ============================================================ 4. UJEDNAČAVANJE — kartice, dugmad, ivice, fokus ============================================================ */ /* Isti prsten fokusa svuda. */ .sec :focus-visible { outline: 3px solid var(--brand-lt); outline-offset: 3px; border-radius: var(--r-xs); } /* Dugmad: ista visina, isto zaobljenje, ista težina slova. */ .sec .u-btn { border-radius: var(--r-sm); font-weight: 650; letter-spacing: -0.005em; min-height: 52px; padding: 14px 26px; } .sec .u-btn--lg { min-height: 58px; padding: 17px 32px; border-radius: var(--r-md); } .sec .u-btn--ghost { --btn-bd: var(--line-strong); background: rgba(255, 255, 255, 0.6); } .sec .u-btn--ghost:hover { --btn-bd: var(--brand); --btn-bg: var(--white); color: var(--brand); } /* Kartice usluga: ista podloga, ivica i sjenka. */ .sec-bloom-services .scard { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-sm); transition: box-shadow var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), border-color var(--t-fast) var(--ease); } .sec-bloom-services .scard:hover { box-shadow: var(--sh-lg); transform: translateY(-4px); border-color: var(--brand-arc); } .sec-bloom-services .scard--wide { background: linear-gradient(168deg, var(--white) 0%, var(--brand-soft) 150%); border-color: rgba(4, 65, 178, 0.22); } .sec-bloom-services .scard__ic { background: var(--brand-soft); color: var(--brand); border-radius: var(--r-md); } .sec-bloom-services .scard__ask { color: var(--brand); font-weight: 650; } .sec-bloom-services .scard__ask:hover { color: var(--brand-dk); } /* Kartice recenzija */ .sec-bloom-referenzen .rev { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-sm); } .sec-bloom-referenzen .rev__av { background: var(--brand); color: var(--white); font-weight: 700; } .sec-bloom-referenzen .gsum { border-radius: var(--r-lg); } .sec-bloom-referenzen .gsum__link { color: var(--brand); font-weight: 650; } .sec-bloom-referenzen .gsum__link:hover { color: var(--brand-dk); } .sec-bloom-referenzen .u-stars { color: var(--c-star); } /* Harmonika pitanja */ .sec-calm-faq .faq__item { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-xs); } .sec-calm-faq .faq__item.is-open { border-color: rgba(4, 65, 178, 0.28); box-shadow: var(--sh-md); } .sec-calm-faq .faq__panel-in a { color: var(--brand); font-weight: 600; } .sec-calm-faq .faq__panel-in a:hover { color: var(--brand-dk); } /* Značka uz sliku u sekciji „o ordinaciji" */ .sec-calm-about .abt__badge { border-radius: var(--r-md); box-shadow: var(--sh-md); } /* Tamna traka sa brojkama */ .sec-calm-parallax .plx__veil { background: linear-gradient(180deg, rgba(8, 21, 43, 0.86), rgba(4, 65, 178, 0.72)); } /* ============================================================ 5. DVIJE TIHE GREŠKE IZ TEMPLATA a) `overflow-x: hidden` na svakoj sekciji pravi scroll kontejner — a scroll kontejner koji se ne skroluje ubija `position: sticky` bočne kolone u sekciji sa pitanjima. `clip` klipuje isto, a ne pravi kontejner. b) Zaglavlje je `position: fixed`, pa sekcija zaglavlja nema visinu; `padding-bottom: 76px` koji template dodaje na telefonu zato pravi praznu traku između zaglavlja i heroja. Prostor za ljepljivu traku na dnu treba podnožju, ne zaglavlju. ============================================================ */ .sec { overflow-x: clip; } @media (max-width: 760px) { .sec-calm-header { padding-bottom: 0; } .band[data-band="9"] { padding-bottom: 74px; } } /* Otkrivanje sekcija: ako posmatrač ne okine (snimak cijele stranice, vraćena pozicija skrola), `assets/js/sajt.js` postavlja ovu klasu i sadržaj se vidi. Nijedna sekcija ne smije ostati na `opacity: 0`. */ .sec.has-js [data-reveal].is-in, .sec .is-in[data-reveal] { opacity: 1; transform: none; } /* Strelice uz traku recenzija se sklone kad nema šta da se pomjera. */ .sec-bloom-referenzen .revs__nav[hidden] { display: none; } /* ============================================================ 6. TELEFON ============================================================ */ @media (max-width: 760px) { /* Traka na dnu: veći dodir i jasnija hijerarhija. */ .sec-calm-header .mobile-bar { background: rgba(255, 255, 255, 0.96); border-top: 1px solid var(--line); box-shadow: 0 -8px 26px -12px rgba(12, 30, 60, 0.3); } .sec-calm-header .mobile-bar__item { min-height: 56px; border-radius: var(--r-sm); } .sec-calm-header .mobile-bar__item--wa { background: rgba(18, 140, 126, 0.10); } .sec-calm-header .mobile-bar__item--cta { background: var(--brand); } } @media (max-width: 560px) { /* Dugmad pune širinu, ne lome se u dva reda. */ .sec-calm-about .abt__actions .u-btn { width: 100%; } .sec-calm-parallax .plx__cta { width: 100%; } /* Kartice u heroju ostaju u okviru slike. */ .sec-calm-hero .hero__card { max-width: 78%; } .sec-bloom-referenzen .rev { flex-basis: 86%; } } @media (max-width: 420px) { .sec .u-btn { padding-inline: 18px; } .sec-calm-header .brand__text strong { font-size: 1.05rem; } } /* ============================================================ 7. ŠTAMPA ============================================================ */ @media print { .sec { background: #fff; } .sec-calm-footer .ftr, .sec-calm-cta .cta__card { background: #fff; color: #000; } } /* Dva dugmeta u heroju staju u jedan red do najuže tačke gdje mogu. */ @media (min-width: 981px) { .sec-calm-hero .hero__actions .u-btn--lg { padding-inline: 24px; } }