/* --------------------------------------------------- Blog stylesheet Edit the values below to re-brand the site. --------------------------------------------------- */ /* Self-hosted type — Fraunces (headings/display) + Public Sans (body/UI), both licensed under the SIL Open Font License (see assets/fonts/*-OFL.txt). Subset to Latin + Latin Extended-A so Montenegrin diacritics (č ć đ š ž) render correctly. Fraunces ships an extra Semibold (600) alongside Regular/Italic/Bold since its weight jump from 400 to 700 is large enough to look heavy-handed on the smaller section labels; Public Sans ships Medium (500) and Semibold (600) for the same reason on UI chrome. */ @font-face { font-family: 'Fraunces'; src: url('/assets/fonts/fraunces-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Fraunces'; src: url('/assets/fonts/fraunces-italic.woff2') format('woff2'); font-weight: 400 600; font-style: italic; font-display: swap; } @font-face { font-family: 'Fraunces'; src: url('/assets/fonts/fraunces-semibold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Fraunces'; src: url('/assets/fonts/fraunces-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Public Sans'; src: url('/assets/fonts/publicsans-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Public Sans'; src: url('/assets/fonts/publicsans-medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Public Sans'; src: url('/assets/fonts/publicsans-semibold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Public Sans'; src: url('/assets/fonts/publicsans-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } :root { --accent: #971726; /* primary brand color — deep wine red */ --accent-dark: #6c0f1a; --gold: #c39322; /* paired accent — antique gold, for buttons/highlights */ --gold-light: #e2bc65; /* lighter gold — sheen/shine highlight in gradients only */ --accent-2: #653625; /* secondary accent — aged bronze, for CTA/highlight sections */ --accent-2-dark: #47261a; --text: #232427; --muted: #6c6d72; --bg: #f5f5f4; --card-bg: #ffffff; --border: #e3e3e2; --header-bg: #6c0f1a; --header-text: #fdf6e8; --max-width: 920px; --ease-premium: cubic-bezier(0.16, 1, 0.3, 1); /* --accent/--accent-dark stay wine-red everywhere they're a BACKGROUND (buttons, stats bar) — fine with white text in both themes. But those same variables are also used as heading/link TEXT color on card surfaces, so these text-only aliases keep the accent's identity and brighten further in dark mode so they don't wash out against a dark page. */ --text-accent: #971726; --text-accent-dark: #6c0f1a; --text-accent-2-dark: #47261a; } /* Dark mode: only the neutral surface/text variables flip — the wine-red brand backgrounds and gold accent stay put since they already read fine against a dark page. Applied via a data-theme attribute the toggle button sets on , so a page-load inline script (see base.njk) can apply the saved/system preference before first paint with no flash. */ :root[data-theme="dark"] { --text: #ececed; --muted: #9a9ba1; --bg: #17181a; --card-bg: #201f22; --text-accent: #e07b87; --text-accent-dark: #da5d6c; --text-accent-2-dark: #ca866d; --border: #34353a; } * { box-sizing: border-box; } /* Custom scrollbar — thin gold thumb, matching the accent. Firefox via scrollbar-color, WebKit/Chromium via the ::-webkit-scrollbar-* pseudo elements; browsers supporting neither just keep their native scrollbar. */ html { scrollbar-width: thin; scrollbar-color: var(--gold) var(--bg); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 999px; border: 2px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: var(--text-accent-dark); } /* Soft cross-fade between pages on navigation, via the CSS View Transitions API. Progressive enhancement only — browsers that don't support @view-transition (Firefox, older Safari) just navigate normally with no error and no missing effect to speak of. */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.28s; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } } /* Circular reveal on the theme toggle: suppress the default page-transition cross-fade above for this one case so the new theme is only ever revealed by the growing clip-path circle the toggle script animates in JS. */ :root.theme-transition::view-transition-old(root), :root.theme-transition::view-transition-new(root) { animation: none; mix-blend-mode: normal; } /* Smooth light/dark fade — the theme toggle flips CSS custom properties (--bg, --text, --card-bg, --border, --text-accent...) instantly, so every element reading one of them needs its own transition to animate between the old and new computed color instead of snapping. This is a low-specificity catch-all; elements with their own more specific transition (buttons, hover states, etc.) keep their own faster timing for that property, since their rule wins the cascade outright. */ *, *::before, *::after { transition: background-color 0.35s var(--ease-premium), color 0.35s var(--ease-premium), border-color 0.35s var(--ease-premium), fill 0.35s var(--ease-premium), stroke 0.35s var(--ease-premium), box-shadow 0.35s var(--ease-premium); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01s; } } html { scroll-behavior: smooth; height: 100%; font-size: 17.5px; /* slightly larger baseline — scales all rem-based sizing site-wide */ scrollbar-gutter: stable; /* reserve scrollbar space on every page so the header doesn't shift horizontally when navigating between a page tall enough to scroll and one that isn't */ } body { margin: 0; min-height: 100%; display: flex; flex-direction: column; font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--text); background: var(--bg); line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Barely-visible grain so flat background colors don't look sterile/digital */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch' result='noise'/%3E%3CfeColorMatrix in='noise' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.9 0 0 0 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: 0.05; } :root[data-theme="dark"] body::before { opacity: 0.08; } /* Push the footer to the bottom on short pages instead of leaving a gap */ main { flex: 1 0 auto; position: relative; } /* Faint background watermark — scoped to
's own box (not the whole page), so it structurally cannot render over the header/nav/footer no matter how tall or short a given page's content is; it scrolls away with the content like any other part of the page. Height is capped to the actual rendered content (see the script in base.njk) rather than main's full flex-stretched box, so on a short page it stops at the bottom of the visible content card instead of drifting into the empty space below it that flex:1 0 auto adds to push the footer down. */ main::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: var(--watermark-height, 100%); background-image: url("../assets/logo.svg"); background-repeat: no-repeat; background-position: center 40%; background-size: min(70vw, 640px); opacity: 0.018; pointer-events: none; z-index: 0; } h1, h2, h3 { font-family: 'Fraunces', Georgia, "Times New Roman", serif; line-height: 1.25; } /* Page-entrance animations */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(16px) scale(0.99); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } .new-badge { display: inline-block; background: var(--gold); color: var(--accent-2-dark); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.15rem 0.6rem; border-radius: 999px; margin-left: 0.4rem; vertical-align: middle; animation: pulse 1.8s ease-in-out infinite; } /* Campaign status badge — shown on posts/cards for ongoing initiatives (Velje Brdo and similar) vs. ones that have already concluded. */ .status-badge { display: inline-block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.15rem 0.6rem; border-radius: 999px; margin-left: 0.4rem; vertical-align: middle; border: 1px solid transparent; } .status-badge-u-toku { background: rgba(151, 23, 38, 0.1); color: var(--text-accent-dark); border-color: rgba(151, 23, 38, 0.3); } .status-badge-zavrseno { background: rgba(60, 130, 90, 0.12); color: #2f7d52; border-color: rgba(60, 130, 90, 0.35); } :root[data-theme="dark"] .status-badge-zavrseno { color: #6fc494; } /* Apartment listing availability badge (Stanovi) */ .status-badge-available { background: rgba(60, 130, 90, 0.12); color: #2f7d52; border-color: rgba(60, 130, 90, 0.35); } :root[data-theme="dark"] .status-badge-available { color: #6fc494; } .status-badge-coming-soon { background: rgba(195, 147, 34, 0.14); color: #8a6d10; border-color: rgba(195, 147, 34, 0.4); } :root[data-theme="dark"] .status-badge-coming-soon { color: var(--gold); } .status-badge-reserved { background: rgba(107, 107, 107, 0.12); color: var(--muted); border-color: rgba(107, 107, 107, 0.3); } @media (prefers-reduced-motion: reduce) { .new-badge { animation: none; } } header.site-header, .hero, main { animation: fadeInUp 0.6s var(--ease-premium) both; } .hero { animation-delay: 0.08s; } main { animation-delay: 0.16s; } .post-card, .staff-card, .widget, .law-section, .contact-card, .minutes-item, .collab-section, .qa-form-wrap, .stats-bar, .steps-item, .stan-card, .stan-info-widget, .testimonial-card { animation: fadeInUp 0.6s var(--ease-premium) both; } .stanovi-grid .stan-card:nth-child(1) { animation-delay: 0.15s; } .stanovi-grid .stan-card:nth-child(2) { animation-delay: 0.25s; } .stanovi-grid .stan-card:nth-child(3) { animation-delay: 0.35s; } .post-list .post-card:nth-child(1) { animation-delay: 0.22s; } .post-list .post-card:nth-child(2) { animation-delay: 0.30s; } .post-list .post-card:nth-child(3) { animation-delay: 0.38s; } .post-list .post-card:nth-child(4) { animation-delay: 0.46s; } .post-list .post-card:nth-child(n+5) { animation-delay: 0.5s; } .staff-grid .staff-card:nth-child(1) { animation-delay: 0.22s; } .staff-grid .staff-card:nth-child(2) { animation-delay: 0.30s; } .staff-grid .staff-card:nth-child(3) { animation-delay: 0.38s; } .sidebar .widget:nth-child(1) { animation-delay: 0.3s; } .sidebar .widget:nth-child(2) { animation-delay: 0.38s; } .sidebar .widget:nth-child(3) { animation-delay: 0.46s; } .sidebar .widget:nth-child(4) { animation-delay: 0.54s; } .stats-bar { animation-delay: 0.12s; } .steps-list .steps-item:nth-child(1) { animation-delay: 0.1s; } .steps-list .steps-item:nth-child(2) { animation-delay: 0.18s; } .steps-list .steps-item:nth-child(3) { animation-delay: 0.26s; } .steps-list .steps-item:nth-child(4) { animation-delay: 0.34s; } /* Subtle hover-lift for icons and interactive elements */ .tip-icon, .law-heading img, .staff-avatar { transition: transform 0.25s var(--ease-premium); } .tip-item:hover .tip-icon, .law-section:hover .law-heading img, .staff-card:hover .staff-avatar { transform: scale(1.1) rotate(-3deg); } .stat-number { transition: transform 0.25s var(--ease-premium); } .stat-item:hover .stat-number { transform: scale(1.06); } @media (prefers-reduced-motion: reduce) { header.site-header, .hero, main, footer.site-footer, .post-card, .staff-card, .widget, .law-section, .contact-card, .minutes-item, .collab-section, .qa-form-wrap, .stats-bar, .steps-item, .stan-card, .stan-info-widget, .testimonial-card { animation: none; } .tip-icon, .law-heading img, .staff-avatar, .stat-number { transition: none; } } a { color: var(--text-accent); text-decoration: none; transition: color 0.15s var(--ease-premium); } a:hover { color: var(--text-accent-dark); text-decoration: underline; } /* Auto-scrolling news ticker, above everything else — headlines pulled straight from the posts collection at build time (no manual upkeep). The content is duplicated once and the whole track is animated exactly half its own width, so the loop point is invisible: as the first copy scrolls fully offscreen, the second copy is sitting exactly where the first one started. */ .news-ticker { display: flex; align-items: stretch; background: var(--accent-2-dark); overflow: hidden; } .news-ticker-label { flex-shrink: 0; display: flex; align-items: center; background: var(--gold); color: var(--accent-2-dark); font-weight: 700; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.4rem 1.6rem 0.4rem 1rem; clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); margin-right: -10px; position: relative; z-index: 1; } .news-ticker-viewport { flex: 1; min-width: 0; overflow: hidden; } .news-ticker-track { display: flex; width: max-content; animation: news-ticker-scroll 38s linear infinite; } .news-ticker-content { display: flex; flex-shrink: 0; } .news-ticker-item { flex-shrink: 0; white-space: nowrap; padding: 0.4rem 2rem 0.4rem 0; color: var(--header-text); font-size: 0.78rem; font-weight: 600; } .news-ticker-item:hover { color: var(--gold); text-decoration: underline; } .news-ticker-item::before { content: "\25CF"; margin-right: 2rem; color: var(--gold); font-size: 0.5rem; vertical-align: middle; } @keyframes news-ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .news-ticker-track { animation: none; } } @media (max-width: 600px) { .news-ticker-label { font-size: 0.62rem; padding: 0.35rem 1.2rem 0.35rem 0.75rem; } .news-ticker-item { font-size: 0.72rem; padding: 0.35rem 1.5rem 0.35rem 0; } } /* Slim utility bar above the header — quick phone/email/hours, shown site-wide */ .top-bar { background: linear-gradient(180deg, #34070b 0%, #290509 100%); color: rgba(242, 240, 234, 0.85); font-size: 0.78rem; } .top-bar-inner { max-width: var(--max-width); margin: 0 auto; padding: 0.45rem 1.25rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.5rem; } .top-bar-inner a { display: inline-flex; align-items: center; gap: 0.35rem; color: rgba(242, 240, 234, 0.85); } .top-bar-inner a:hover { color: var(--gold); text-decoration: none; } .top-bar-inner span { display: inline-flex; align-items: center; gap: 0.35rem; } .top-bar-inner svg { width: 13px; height: 13px; flex-shrink: 0; } @media (max-width: 600px) { .top-bar-inner { justify-content: center; gap: 0.3rem 1rem; } } /* Header */ header.site-header { position: relative; z-index: 10; background: linear-gradient(155deg, var(--accent) 0%, var(--header-bg) 68%); border-bottom: 3px solid var(--gold); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); } .site-header-inner { max-width: var(--max-width); margin: 0 auto; padding: 1rem 1.25rem 0.85rem; display: flex; align-items: center; } .site-brand { display: flex; align-items: center; gap: 1rem; color: inherit; flex: 1 1 auto; min-width: 0; } .site-brand:hover { text-decoration: none; } .site-brand:hover .site-title { color: var(--gold); } .site-logo { height: 76px; width: 76px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), 0 0 0 2px rgba(195, 147, 34, 0.3); } .site-title { font-family: 'Fraunces', Georgia, "Times New Roman", serif; font-size: 1.55rem; font-weight: 700; letter-spacing: 0.03em; color: var(--header-text); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); margin: 0; min-width: 0; transition: color 0.15s var(--ease-premium); } .site-title-mobile { display: none; } /* Nav bar strip beneath the brand row — sticks to the top on scroll so navigation stays reachable on long pages. Written mobile-first: the default here is the hamburger + dropdown, which is overridden into a horizontal swipeable strip on mobile (see max-width: 760px below) and into a full-width, always-expanded link row on desktop (see min-width: 761px below) — the hamburger never appears there, regardless of scroll position. */ .site-nav-bar { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid rgba(255, 255, 255, 0.25); background: linear-gradient(180deg, var(--accent) 0%, var(--header-bg) 100%); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); display: flex; align-items: center; gap: 1rem; padding: 0.6rem 1.25rem; } /* Hamburger button — mobile only; hidden again on desktop (see min-width: 761px below), which keeps the always-expanded link row. */ .nav-toggle { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 40px; height: 40px; flex-shrink: 0; padding: 0; background: transparent; border: 1px solid rgba(195, 147, 34, 0.35); border-radius: 10px; cursor: pointer; transition: background 0.2s var(--ease-premium), border-color 0.2s var(--ease-premium); } .nav-toggle:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--gold); } .nav-toggle span { display: block; width: 20px; height: 2px; background: var(--header-text); border-radius: 2px; transition: transform 0.2s var(--ease-premium), opacity 0.2s var(--ease-premium); } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Site name next to the hamburger — mobile only (see max-width: 760px below); desktop shows the corner logo instead. */ .site-nav-bar-title { display: none; margin-left: auto; color: var(--header-text); font-family: 'Fraunces', Georgia, "Times New Roman", serif; font-weight: 700; font-size: 1rem; letter-spacing: 0.02em; text-align: right; text-decoration: none; } a.site-nav-bar-title:hover { color: var(--gold); text-decoration: none; } .site-nav-bar .site-nav { display: flex; gap: 0.5rem; } .site-nav a { text-align: center; color: var(--header-text); padding: 0.6rem 1.1rem; border: 1px solid rgba(195, 147, 34, 0.35); border-radius: 999px; transition: background 0.2s var(--ease-premium), color 0.2s var(--ease-premium), border-color 0.2s var(--ease-premium), transform 0.2s var(--ease-premium); } .site-nav a:hover { background: var(--gold); border-color: var(--gold); color: var(--header-bg); text-decoration: none; transform: translateY(-1px); } .site-nav a.current { background: rgba(242, 240, 234, 0.15); border-color: var(--gold); color: var(--gold); font-weight: 700; } /* Nav category groups — a toggle button plus a panel of sub-links that appears immediately below it (mobile: accordion; desktop: dropdown). */ .nav-group-toggle { font: inherit; cursor: pointer; } @media (max-width: 760px) { .site-header-inner { padding: 0.6rem 1rem; } .site-brand { gap: 0.6rem; } .site-logo { height: 40px; width: 40px; } .site-title-full { display: none; } .site-title-mobile { display: block; font-size: 0.82rem; line-height: 1.2; letter-spacing: 0.01em; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } } /* Mobile nav: just the hamburger at rest. Once the big header above scrolls out of view, the site name fades in beside it. */ @media (max-width: 760px) { .nav-toggle { display: flex; } .site-nav-bar-title { display: block; width: 0; overflow: hidden; white-space: nowrap; font-size: 0.78rem; opacity: 0; transform: translateX(14px); pointer-events: none; transition: opacity 0.5s var(--ease-premium), transform 0.5s var(--ease-premium), width 0.5s var(--ease-premium); } body.scrolled .site-nav-bar-title { width: 280px; opacity: 1; transform: translateX(0); pointer-events: auto; } .site-nav-bar .site-nav { display: flex; flex-direction: column; align-items: stretch; gap: 0; position: absolute; top: calc(100% + 0.5rem); left: 1.25rem; width: 250px; max-height: calc(100vh - 5rem); overflow-y: auto; background: #6c0f1a; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4); padding: 0.3rem 0; z-index: 60; font-size: 0.9rem; opacity: 0; visibility: hidden; transform: translateY(-14px) scale(0.92); pointer-events: none; transition: opacity 0.4s var(--ease-premium), transform 0.4s var(--ease-premium), visibility 0s linear 0.4s; } .site-nav-bar .site-nav.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto; transition-delay: 0s; } /* Clean list rows with hairline dividers instead of pill buttons — a gold accent bar slides in on hover/current for a bit of "pop". */ .site-nav-bar .site-nav > a, .site-nav-bar .site-nav .nav-group-toggle { text-align: center; width: 100%; background: transparent; color: var(--header-text); padding: 0.75rem 1.1rem; border: none; border-left: 3px solid transparent; border-bottom: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0; opacity: 0; display: flex; align-items: center; justify-content: center; gap: 0.75rem; transform: translateX(-8px); transition: opacity 0.3s var(--ease-premium), transform 0.3s var(--ease-premium), background 0.2s var(--ease-premium), border-color 0.2s var(--ease-premium), padding-left 0.2s var(--ease-premium); } .site-nav-bar .site-nav > .nav-group:last-child .nav-group-toggle, .site-nav-bar .site-nav > a:last-child { border-bottom: none; } .site-nav-bar .site-nav.open > a, .site-nav-bar .site-nav.open .nav-group-toggle { opacity: 1; transform: translateX(0); } .site-nav-bar .site-nav.open > a { transition-delay: 0.02s; } .site-nav-bar .site-nav.open > .nav-group:nth-child(2) .nav-group-toggle { transition-delay: 0.06s; } .site-nav-bar .site-nav.open > .nav-group:nth-child(3) .nav-group-toggle { transition-delay: 0.11s; } .site-nav-bar .site-nav.open > .nav-group:nth-child(4) .nav-group-toggle { transition-delay: 0.16s; } .site-nav-bar .site-nav.open > .nav-group:nth-child(5) .nav-group-toggle { transition-delay: 0.21s; } .site-nav-bar .site-nav > a:hover, .site-nav-bar .site-nav .nav-group-toggle:hover { background: rgba(255, 255, 255, 0.06); border-left-color: var(--gold); padding-left: 1.3rem; transform: none; } .site-nav-bar .site-nav > a.current, .site-nav-bar .site-nav .nav-group-toggle.has-current { background: rgba(242, 240, 234, 0.08); border-left-color: var(--gold); color: var(--gold); font-weight: 700; } .nav-group-caret { width: 7px; height: 7px; flex-shrink: 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.25s var(--ease-premium); } .nav-group.open .nav-group-caret { transform: rotate(-135deg); } /* Accordion reveal via grid-template-rows (0fr -> 1fr) so the panel's height animates without needing a hardcoded max-height guess. */ .nav-group-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s var(--ease-premium); } .nav-group.open .nav-group-panel { grid-template-rows: 1fr; } .nav-group-panel-inner { overflow: hidden; min-height: 0; display: flex; flex-direction: column; background: rgba(0, 0, 0, 0.15); } .nav-group-panel-inner a { padding: 0.65rem 1.1rem 0.65rem 2.1rem; font-size: 0.85rem; color: var(--header-text); border: none; border-bottom: 1px solid rgba(255, 255, 255, 0.08); border-radius: 0; transition: background 0.2s var(--ease-premium), color 0.2s var(--ease-premium); } .nav-group-panel-inner a:last-child { border-bottom: none; } .nav-group-panel-inner a:hover { background: rgba(255, 255, 255, 0.06); color: var(--gold); transform: none; } .nav-group-panel-inner a.current { color: var(--gold); font-weight: 700; background: rgba(242, 240, 234, 0.06); } } /* Full-width single-row nav on desktop, always — no hamburger there. */ @media (min-width: 761px) { .nav-toggle { display: none; } .site-nav-bar { padding: 0.5rem 2rem; } .site-nav-bar .site-nav { position: static; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; flex: 1 1 auto; min-width: 0; max-width: none; background: none; border: none; box-shadow: none; padding: 0; gap: 0.4rem; opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: none; } .nav-home-link { display: none; } .nav-group { position: relative; } .nav-group-toggle { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--header-text); background: transparent; padding: 0.6rem 1.1rem; border: 1px solid rgba(195, 147, 34, 0.35); border-radius: 999px; transition: background 0.2s var(--ease-premium), color 0.2s var(--ease-premium), border-color 0.2s var(--ease-premium), transform 0.2s var(--ease-premium); } .nav-group-toggle:hover, .nav-group.open .nav-group-toggle { background: var(--gold); border-color: var(--gold); color: var(--header-bg); text-decoration: none; } .nav-group-toggle.has-current { border-color: var(--gold); color: var(--gold); font-weight: 700; } .nav-group-caret { width: 7px; height: 7px; flex-shrink: 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-1px); transition: transform 0.25s var(--ease-premium); } .nav-group.open .nav-group-caret { transform: rotate(-135deg) translateY(1px); } .nav-group-panel { position: absolute; top: calc(100% + 0.6rem); left: 50%; min-width: 230px; background: #6c0f1a; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4); padding: 0.4rem 0; z-index: 60; opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(-8px); pointer-events: none; transition: opacity 0.3s var(--ease-premium), transform 0.3s var(--ease-premium), visibility 0s linear 0.3s; } .nav-group.open .nav-group-panel { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: auto; transition-delay: 0s; } .nav-group-panel-inner { display: flex; flex-direction: column; } .site-nav-bar .site-nav .nav-group-panel-inner a { display: block; text-align: left; color: var(--header-text); padding: 0.65rem 1.25rem; border: none; border-radius: 0; white-space: nowrap; } .site-nav-bar .site-nav .nav-group-panel-inner a:hover { background: rgba(255, 255, 255, 0.08); color: var(--gold); transform: none; } .site-nav-bar .site-nav .nav-group-panel-inner a.current { color: var(--gold); font-weight: 700; background: rgba(242, 240, 234, 0.08); } } /* Note: the tall top-bar + brand row are intentionally left alone here — they simply scroll out of view naturally, since only .site-nav-bar is sticky. Hiding them with display:none would shrink
's own box down to the sticky child's height, leaving no room for it to stick at all. */ /* Hero banner (homepage) */ .hero { position: relative; min-height: 420px; border-bottom: 3px solid var(--gold); text-align: center; overflow: hidden; } .hero-slider { position: absolute; inset: 0; display: flex; height: 100%; cursor: grab; transition: transform 1.1s var(--ease-premium); user-select: none; } .hero-slider.dragging { cursor: grabbing; transition: none; } .hero-slide { position: relative; flex-shrink: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; } /* Oversized and independently transformed from .hero-slider (which only ever gets translateX for the carousel) so scroll-driven parallax can translateY this layer without fighting the carousel's own transform. */ .hero-slide-bg { position: absolute; inset: -12% 0; background-size: cover; background-position: center; will-change: transform; } .hero-slide:nth-child(1) .hero-slide-bg { background-image: url("../assets/hero-banner.svg"); } .hero-slide:nth-child(2) .hero-slide-bg { background-image: url("../assets/hero-banner-2.svg"); } /* Night version of the bridge scene — the deck lamps twinkle instead of sitting flat, since the light itself is the whole point once it's dark. */ :root[data-theme="dark"] .hero-slide:nth-child(1) .hero-slide-bg { background-image: url("../assets/hero-banner-dark.svg"); } @media (prefers-reduced-motion: reduce) { .hero-slide-bg { inset: 0; } } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(151, 23, 38, 0.42) 0%, rgba(101, 54, 37, 0.5) 55%, rgba(58, 10, 13, 0.68) 100%); pointer-events: none; } .hero-inner { position: relative; z-index: 2; max-width: var(--max-width); margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1.5rem; pointer-events: none; } .hero-inner::before { content: ""; position: absolute; inset: -1rem -3rem; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0) 72%); z-index: -1; } .hero-dots { position: absolute; z-index: 3; left: 0; right: 0; bottom: 1rem; display: flex; justify-content: center; gap: 0.5rem; } .hero-dots button { width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.25); padding: 0; cursor: pointer; transition: background 0.2s var(--ease-premium), transform 0.2s var(--ease-premium); } .hero-dots button.active { background: var(--gold); border-color: var(--gold); transform: scale(1.2); } .hero h1 { color: #fff; margin: 0 0 0.6rem; font-size: 1.3rem; letter-spacing: 0.06em; text-transform: uppercase; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); } .hero-rule { display: block; width: 50px; height: 2px; margin: 0 auto 0.85rem; background: var(--gold); border-radius: 2px; } .hero p { color: #fff; margin: 0; font-size: 1.05rem; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55); } /* Stats bar (real figures from published sources) */ .stats-bar { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%); border-bottom: 3px solid var(--gold); } .stats-bar-inner { max-width: 1180px; margin: 0 auto; padding: 1.75rem 1.25rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; text-align: center; } .stat-item { display: flex; flex-direction: column; align-items: center; } .stat-number { font-family: 'Fraunces', Georgia, "Times New Roman", serif; font-size: 1.9rem; font-weight: 700; color: var(--gold); } .stat-label { font-size: 0.78rem; color: rgba(242, 240, 234, 0.85); margin-top: 0.25rem; line-height: 1.35; } .stats-note { text-align: center; font-size: 0.72rem; color: rgba(242, 240, 234, 0.6); padding: 0 1.25rem 1rem; font-style: italic; } /* Desktop only: the stats bar is cut into an inverted trapezoid (full width at top, flush against the hero above, tapering inward toward the bottom) with a gold rim traced around the whole shape. Built as two stacked, identically-clipped layers — a gold outer layer and an inset red inner layer — since clip-path itself can't draw a stroke along a cut edge. */ @media (min-width: 761px) { .stats-bar-shape { background: var(--gold); clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%); padding: 1.5px; } .stats-bar { clip-path: polygon(0 0, 100% 0, 94.7% 100%, 5.3% 100%); border-bottom: none; } } @media (max-width: 700px) { .stats-bar-inner { display: flex; flex-wrap: wrap; justify-content: center; } .stat-item { flex: 0 0 calc(50% - 0.5rem); } } @media (max-width: 760px) { .stats-bar-inner { padding: 1rem 1rem 0.75rem; gap: 0.6rem 0.5rem; } .stat-number { font-size: 1.25rem; } .stat-label { font-size: 0.66rem; margin-top: 0.15rem; } .stats-note { display: none; } .mission-line { display: none; } } .mission-line { position: relative; background: var(--card-bg); border-bottom: 1px solid var(--border); text-align: center; padding: 2rem 1.25rem; } /* Solid var(--card-bg) bands fully cover the page-wide grain behind them (see body::before), leaving them flat. A second, differently-seeded noise layer gives mission-line and press-strip their own faint texture instead of one uniform sheet bleeding through the whole page. */ .mission-line::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.045; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='2' stitchTiles='stitch' result='noise'/%3E%3CfeColorMatrix in='noise' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.9 0 0 0 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } :root[data-theme="dark"] .mission-line::before { opacity: 0.075; } .mission-line p { position: relative; max-width: 720px; margin: 0 auto; color: var(--text); font-family: 'Fraunces', Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400; font-size: 1.2rem; line-height: 1.7; letter-spacing: 0.01em; } .mission-line p::before { content: "\201C"; display: block; font-size: 2.75rem; line-height: 0; color: var(--gold); margin-bottom: 0.9rem; } .press-strip { position: relative; background: var(--card-bg); border-bottom: 1px solid var(--border); text-align: center; padding: 2.25rem 1.25rem 2.5rem; } /* Same idea as .mission-line::before above, with a finer, differently-seeded grain so the two flat bands don't read as the same repeated texture. */ .press-strip::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.045; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch' result='noise'/%3E%3CfeColorMatrix in='noise' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.9 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)'/%3E%3C/svg%3E"); } :root[data-theme="dark"] .press-strip::before { opacity: 0.075; } .press-label { display: flex; align-items: center; justify-content: center; gap: 0.85rem; font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-accent); margin: 0 0 1.5rem; } .press-label::before, .press-label::after { content: ""; width: 32px; height: 1px; background: var(--gold); } .press-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 0.85rem; } .press-logos a { display: inline-block; font-family: 'Fraunces', Georgia, "Times New Roman", serif; font-weight: 700; font-size: 0.98rem; letter-spacing: 0.01em; color: var(--muted); text-decoration: none; border: 1px solid var(--border); border-radius: 999px; padding: 0.55rem 1.5rem; transition: transform 0.2s var(--ease-premium), background 0.2s var(--ease-premium), color 0.2s var(--ease-premium), border-color 0.2s var(--ease-premium); } @media (max-width: 760px) { .press-strip { padding: 1.25rem 1rem 1.5rem; } .press-label { font-size: 0.66rem; gap: 0.6rem; margin: 0 0 0.9rem; } .press-label::before, .press-label::after { width: 20px; } .press-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; } .press-logos a { box-sizing: border-box; flex: 0 0 auto; font-size: 0.72rem; padding: 0.45rem 0.9rem; white-space: nowrap; text-align: center; } } .press-logos a:hover, .press-logos a:focus-visible { color: #fff; background: var(--accent); border-color: var(--accent); transform: translateY(-3px); } .press-logos-inline { justify-content: flex-start; } .press-download-list { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } main { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 2.5rem 1.25rem 4rem; min-width: 0; } .section-heading { position: relative; display: flex; align-items: center; gap: 0.6rem; font-size: 1.3rem; color: var(--text-accent-dark); margin: 0 0 1.25rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--border); } .section-heading::before { content: ""; display: inline-block; width: 10px; height: 10px; background: linear-gradient(135deg, var(--gold-light), var(--gold)); border-radius: 2px; flex-shrink: 0; } .section-heading::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 42px; height: 2px; background: linear-gradient(90deg, var(--gold-light), var(--gold)); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease-premium); } .section-heading.heading-line-visible::after { transform: scaleX(1); } @media (prefers-reduced-motion: reduce) { .section-heading::after { transition: none; transform: scaleX(1); } } /* Gold divider between whole page sections — echoes the gold accents used in the nav's section-color-coding and .section-heading's marker, so the same accent language carries from the chrome into the page body. */ .section-divider { display: flex; align-items: center; gap: 0.85rem; width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 2.5rem 1.25rem; } .section-divider::before, .section-divider::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--gold); opacity: 0.35; } .section-divider-mark { width: 8px; height: 8px; flex-shrink: 0; background: var(--gold); transform: rotate(45deg); } /* Post list on homepage */ .post-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.5rem; } .empty-state { color: var(--muted); text-align: center; padding: 3rem 1rem; background: var(--card-bg); border: 1px dashed var(--border); border-radius: 15px; } /* Skeleton loading placeholder — used on numbers fetched from a Netlify Function (petition counters) so the wait reads as "loading" rather than a blank flash before the count-up animation kicks in. */ @keyframes skeleton-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } /* Shimmer placeholder shown on elements while they load — a moving gradient sweep behind the (still-transparent) image box, covered over the instant the real image paints. Applied/removed by the shared script in base.njk; see .skeleton above for the text-placeholder equivalent. */ @keyframes img-shimmer { 0% { background-position: -150% 0; } 100% { background-position: 150% 0; } } .img-loading { background-image: linear-gradient(90deg, var(--border) 25%, var(--card-bg) 50%, var(--border) 75%); background-size: 250% 100%; animation: img-shimmer 1.4s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .img-loading { animation: none; background-image: none; background-color: var(--border); } } .skeleton { display: inline-block; min-width: 3.5ch; border-radius: 4px; background: var(--border); color: transparent !important; animation: skeleton-pulse 1.3s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .skeleton { animation: none; opacity: 0.75; } } .post-card.post-hidden { display: none; } .show-more-btn { display: block; margin: 1.5rem auto 0; padding: 0.7rem 1.8rem; border: 1px solid var(--border); border-radius: 999px; background: var(--card-bg); color: var(--text-accent-dark); font-family: inherit; font-weight: 700; font-size: 0.9rem; cursor: pointer; transition: background 0.2s var(--ease-premium), border-color 0.2s var(--ease-premium), color 0.2s var(--ease-premium); } .show-more-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; } .post-card { display: flex; gap: 1.5rem; align-items: stretch; background: var(--card-bg); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 13px; padding: 1.75rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 20px rgba(0, 0, 0, 0.07); transition: transform 0.15s var(--ease-premium), box-shadow 0.15s var(--ease-premium); } /* Post card left-border color echoes the nav's section-color-coding, so a post's topic is recognizable at a glance (see sectionAccentColor in .eleventy.js for the same 4 colors used on the nav bar). */ .post-card-podstanare { border-left-color: #c39322; } .post-card-ucestvujte { border-left-color: #c46a2e; } .post-card-resursi { border-left-color: #4a7a91; } .post-card-udruzenje { border-left-color: #5c3220; } .post-card-featured.post-card-podstanare { border-top-color: #c39322; } .post-card-featured.post-card-ucestvujte { border-top-color: #c46a2e; } .post-card-featured.post-card-resursi { border-top-color: #4a7a91; } .post-card-featured.post-card-udruzenje { border-top-color: #5c3220; } .post-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(195, 147, 34, 0.3); } .post-thumb { width: 150px; height: auto; align-self: stretch; object-fit: cover; border-radius: 8px; flex-shrink: 0; } .post-body { flex: 1; min-width: 0; } .post-card h2 { margin: 0 0 0.35rem; font-size: 1.35rem; } .post-card h2 a { color: var(--text); } .post-card h2 a:hover { color: var(--text-accent); } .post-meta { color: var(--muted); font-size: 0.85rem; margin: 0 0 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; } .post-excerpt { margin: 0 0 1rem; } .read-more { display: inline-block; font-weight: 600; font-size: 0.85rem; color: var(--text-accent); padding: 0.35rem 0.9rem; border: 1px solid var(--accent); border-radius: 999px; } .read-more:hover { background: var(--accent); color: #fff; text-decoration: none; box-shadow: 0 0 14px rgba(195, 147, 34, 0.45); } /* Lead story on the homepage feed: a bigger, image-on-top card for the newest post, distinct from the smaller list items below it. */ .post-card-featured { flex-direction: column; border-left: none; border-top: 4px solid var(--accent); } .post-card-featured .post-thumb { width: 100%; height: 260px; } .post-card-featured .post-body h2 { font-size: 1.7rem; } .post-card-featured .post-excerpt { font-size: 1rem; } @media (max-width: 600px) { .post-card-featured .post-thumb { height: 190px; } .post-card-featured .post-body h2 { font-size: 1.3rem; } } /* Single post page */ article.post { background: var(--card-bg); border: 1px solid var(--border); border-radius: 15px; padding: 2.25rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 20px rgba(0, 0, 0, 0.07); } article.post h1 { margin-top: 0; color: var(--text-accent-dark); } article.post .post-meta { margin-bottom: 1.75rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); } article.post img { max-width: 100%; border-radius: 8px; } .post-article-body > p:first-of-type::first-letter { font-family: 'Fraunces', Georgia, "Times New Roman", serif; float: left; font-size: 3.6em; font-weight: 700; line-height: 0.82; padding: 0.04em 0.09em 0 0; color: var(--text-accent-dark); } .post-hero-img { width: 100%; height: 260px; object-fit: cover; border-radius: 13px; margin-bottom: 0.5rem; filter: saturate(0.92) contrast(1.03); } .img-caption { font-size: 0.78rem; color: var(--muted); font-style: italic; text-align: center; margin: 0 0 1.5rem; } .share-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--border); font-size: 0.85rem; color: var(--muted); } .share-btn { display: inline-flex; align-items: center; gap: 0.4rem; border: 1px solid var(--border); background: none; padding: 0.35rem 0.9rem; border-radius: 999px; font-family: inherit; font-weight: 600; font-size: 0.85rem; line-height: 1.4; color: var(--text-accent-dark); cursor: pointer; transition: background 0.15s var(--ease-premium), border-color 0.15s var(--ease-premium); } .share-btn svg { width: 15px; height: 15px; } .share-btn:hover { background: var(--bg); border-color: var(--accent); text-decoration: none; } .share-btn.copied { border-color: #3c825a; color: #3c825a; } :root[data-theme="dark"] .share-btn.copied { border-color: #6fc494; color: #6fc494; } .back-link { display: inline-block; margin-bottom: 1.5rem; font-size: 0.9rem; font-weight: 600; } /* "Povezane objave" module on individual post pages */ .related-posts { margin-top: 2.5rem; } .related-posts-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .related-post-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 13px; overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 20px rgba(0, 0, 0, 0.07); transition: transform 0.15s var(--ease-premium), box-shadow 0.15s var(--ease-premium); } .related-post-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); } .related-post-card a { display: block; color: inherit; } .related-post-card a:hover { text-decoration: none; } .related-post-thumb { width: 100%; height: 130px; object-fit: cover; display: block; } .related-post-body { padding: 1rem 1.1rem 1.1rem; } .related-post-title { margin: 0 0 0.35rem; font-size: 0.95rem; font-weight: 700; color: var(--text); line-height: 1.4; } .related-post-card a:hover .related-post-title { color: var(--text-accent); } .related-post-body .post-meta { margin: 0; } @media (max-width: 700px) { .related-posts-list { grid-template-columns: 1fr; } } .breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--muted); margin-bottom: 1.5rem; } .breadcrumbs a { color: var(--muted); } .breadcrumbs a:hover { color: var(--text-accent); } .breadcrumb-sep { color: var(--border); } .breadcrumb-current { color: var(--text); font-weight: 600; } .social-links { display: flex; gap: 0.75rem; margin-top: 1.5rem; margin-bottom: 1.5rem; flex-wrap: wrap; } .social-links a { display: inline-flex; align-items: center; gap: 0.5rem; border: 1px solid var(--border); padding: 0.5rem 1.1rem; border-radius: 999px; font-weight: 600; font-size: 0.9rem; color: var(--text-accent-dark); } .social-links a:hover { background: var(--bg); border-color: var(--accent); text-decoration: none; } /* OpenStreetMap's embed always draws its own attribution/"Report a problem"/donation links along the bottom edge — since that strip isn't something we can style away (cross-origin iframe), we instead make the iframe taller than the visible window and let overflow crop the strip off, then provide our own compliant attribution link via .footer-map-credit right below it. */ .footer-map { margin-top: 0.6rem; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.25); height: 120px; } .footer-map iframe { display: block; width: 100%; height: 158px; border: 0; } .footer-map-credit { margin: 0.3rem 0 0; font-size: 0.68rem; } .footer-map-credit a { color: rgba(242, 240, 234, 0.55); } .footer-map-credit a:hover { color: var(--gold); } @media (min-width: 761px) { .footer-map { height: 150px; } .footer-map iframe { height: 190px; } } .chart-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 13px; padding: 1.5rem; margin: 1.5rem 0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 20px rgba(0, 0, 0, 0.07); } .chart-title { font-weight: 700; font-size: 0.95rem; margin: 0 0 1rem; color: var(--text-accent-dark); } .index-chart { width: 100%; height: auto; display: block; } .chart-value { font-size: 12px; font-weight: 700; fill: var(--text-accent-dark); font-family: 'Fraunces', Georgia, "Times New Roman", serif; } .chart-label { font-size: 11px; fill: var(--muted); } .chart-note { margin: 1rem 0 0; font-size: 0.78rem; font-style: italic; color: var(--muted); } .chart-point { cursor: pointer; outline: none; } .chart-point-hit { fill: transparent; } .chart-point-dot { fill: var(--text-accent-dark); transform-box: fill-box; transform-origin: center; transition: transform 0.15s var(--ease-premium); } .chart-point:hover .chart-point-dot, .chart-point:focus-visible .chart-point-dot, .chart-point.chart-point-active .chart-point-dot { transform: scale(1.5); fill: var(--gold); } .chart-tooltip { position: fixed; z-index: 60; max-width: 260px; background: var(--accent-dark); color: #fdf6e8; font-size: 0.8rem; line-height: 1.4; padding: 0.55rem 0.8rem; border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2); pointer-events: none; } @media (prefers-reduced-motion: reduce) { .chart-point-dot { transition: none; } } .map-section-wrap { max-width: 640px; margin: 0 auto 2.5rem; padding: 0 1.25rem; } .mn-map-card { margin: 0; } .mn-map-wrap { display: flex; justify-content: center; } .mn-map { width: 100%; max-width: 260px; height: auto; } .mn-map-shape { fill: var(--bg); stroke: var(--gold); stroke-width: 2; } .mn-map-pin circle { fill: var(--accent); stroke: var(--card-bg); stroke-width: 2; } .stats-table-wrap { position: relative; overflow-x: auto; margin: 1.5rem 0; } /* Hints that the table scrolls horizontally on narrow screens — hidden once JS detects there's nothing left to scroll to (see base.njk). */ .stats-table-wrap::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 28px; background: linear-gradient(to right, transparent, var(--bg)); pointer-events: none; opacity: 1; transition: opacity 0.2s var(--ease-premium); } .stats-table-wrap.scroll-end::after { opacity: 0; } .stats-table { width: 100%; border-collapse: collapse; background: var(--card-bg); border: 1px solid var(--border); border-radius: 13px; overflow: hidden; } .stats-table th, .stats-table td { padding: 0.75rem 1.1rem; text-align: left; border-bottom: 1px solid var(--border); } .stats-table th { background: var(--bg); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 700; } .stats-table tr:last-child td { border-bottom: none; } .stats-table td:first-child { font-weight: 700; color: var(--text-accent-dark); } /* Large pull-quote callout for breaking up long articles/legal pages — drop
...
anywhere in the markdown content (raw HTML passes through, same as the doc-signature blocks elsewhere). */ .pull-quote { font-family: 'Fraunces', Georgia, "Times New Roman", serif; font-style: italic; font-size: 1.3rem; line-height: 1.5; color: var(--text-accent-dark); border-left: 4px solid var(--gold); margin: 1.75rem 0; padding: 0.4rem 0 0.4rem 1.25rem; } @media (min-width: 700px) { .pull-quote { font-size: 1.55rem; margin: 2rem -1.5rem; padding: 0.6rem 0 0.6rem 1.75rem; } } .post-source { font-size: 0.85rem; font-style: italic; color: var(--muted); margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); } /* Team page */ .page-intro { margin: -0.5rem 0 1.75rem; color: var(--muted); } /* Stanovi page: intro callout emphasizing membership + contract requirements */ .stanovi-intro { background: var(--card-bg); border: 1px solid var(--border); border-left: 4px solid var(--gold); border-radius: 13px; padding: 1.35rem 1.6rem; margin: 0 0 2rem; font-family: 'Fraunces', Georgia, "Times New Roman", serif; font-size: 1.02rem; line-height: 1.65; color: var(--text); } .stanovi-intro p { margin: 0; } .stanovi-intro strong { color: var(--text-accent-dark); } .stanovi-intro em { display: block; margin-top: 0.6rem; font-family: inherit; font-size: 0.85rem; color: var(--muted); } .stanovi-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.25rem 1.75rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: 13px; padding: 1.1rem 1.5rem; margin: 0 0 1.75rem; } .stanovi-filter-field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 160px; } .stanovi-filter-field label { font-size: 0.8rem; font-weight: 600; color: var(--text); } .stanovi-filter-field select { padding: 0.45rem 0.1rem; border: none; border-bottom: 1.5px solid var(--muted); border-radius: 0; background: transparent; font-family: inherit; font-size: 0.95rem; color: var(--text); } .stanovi-filter-field select:focus { outline: none; border-bottom-color: var(--accent); } .stanovi-filter-reset { background: none; border: none; padding: 0 0 0.5rem; font-family: inherit; font-size: 0.85rem; font-weight: 600; color: var(--text-accent-dark); text-decoration: underline; cursor: pointer; align-self: flex-end; } .stanovi-filter-count { font-size: 0.85rem; color: var(--muted); margin: 0 0 1.25rem; } .stanovi-empty-message { display: none; flex-direction: column; align-items: center; background: var(--card-bg); border: 1px dashed var(--border); border-radius: 13px; padding: 2rem; text-align: center; color: var(--muted); } .stanovi-empty-message.visible { display: flex; } .empty-state-icon { width: 64px; height: 64px; margin-bottom: 1rem; opacity: 0.9; } @media (max-width: 600px) { .stanovi-filters { flex-direction: column; align-items: stretch; } .stanovi-filter-reset { align-self: flex-start; } } /* Generic reusable filter bar — same look as .stanovi-filters, under neutral names so other listing pages (Dokumenti, homepage post list) can use it without borrowing an apartment-specific class name. */ .filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.25rem 1.75rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: 13px; padding: 1.1rem 1.5rem; margin: 0 0 1.75rem; } .filter-field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 160px; } .filter-field label { font-size: 0.8rem; font-weight: 600; color: var(--text); } .filter-field select { padding: 0.45rem 0.1rem; border: none; border-bottom: 1.5px solid var(--muted); border-radius: 0; background: transparent; font-family: inherit; font-size: 0.95rem; color: var(--text); } .filter-field select:focus { outline: none; border-bottom-color: var(--accent); } .filter-reset { background: none; border: none; padding: 0 0 0.5rem; font-family: inherit; font-size: 0.85rem; font-weight: 600; color: var(--text-accent-dark); text-decoration: underline; cursor: pointer; align-self: flex-end; } .filter-count { font-size: 0.85rem; color: var(--muted); margin: 0 0 1.25rem; } .filter-empty-message { display: none; flex-direction: column; align-items: center; background: var(--card-bg); border: 1px dashed var(--border); border-radius: 13px; padding: 2rem; text-align: center; color: var(--muted); } .filter-empty-message.visible { display: flex; } @media (max-width: 600px) { .filter-bar { flex-direction: column; align-items: stretch; } .filter-reset { align-self: flex-start; } } .staff-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; } .staff-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 13px; padding: 1.75rem 1.25rem; text-align: center; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 20px rgba(0, 0, 0, 0.07); max-width: 360px; margin: 0 auto; } .staff-avatar { width: 84px; height: 84px; margin: 0 auto 1rem; border-radius: 50%; background: var(--accent); color: var(--header-text); display: flex; align-items: center; justify-content: center; font-family: 'Fraunces', Georgia, "Times New Roman", serif; font-size: 1.5rem; font-weight: 700; object-fit: cover; } .staff-name { font-family: 'Fraunces', Georgia, "Times New Roman", serif; font-weight: 700; margin: 0 0 0.15rem; } .staff-role { color: var(--text-accent-dark); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 0.75rem; } .staff-bio { font-size: 0.9rem; color: var(--muted); margin: 0; } .disclaimer { background: var(--card-bg); border: 1px dashed var(--border); border-radius: 13px; padding: 1rem 1.25rem; font-size: 0.88rem; font-style: italic; color: var(--muted); margin: 0 0 2rem; } /* Zakonik page */ .zakonik-layout { display: flex; gap: 2.5rem; align-items: flex-start; } .zakonik-content { flex: 1; min-width: 0; } .toc-sidebar { flex: 0 0 210px; } .toc-sidebar-title { font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 0 0 0.75rem; } .toc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-left: 2px solid var(--border); } .toc-link { display: block; padding: 0.3rem 0 0.3rem 0.9rem; margin-left: -2px; border-left: 2px solid transparent; color: var(--muted); font-size: 0.85rem; line-height: 1.3; text-decoration: none; transition: color 0.2s ease, border-color 0.2s ease; } .toc-link:hover { color: var(--text-accent-dark); } .toc-link.active { color: var(--text-accent-dark); border-left-color: var(--gold); font-weight: 700; } @media (max-width: 900px) { .zakonik-layout { flex-direction: column; } .toc-sidebar { position: static; flex: none; width: 100%; border-bottom: 1px solid var(--border); padding-bottom: 1.25rem; margin-bottom: 0.5rem; } .toc-list { flex-direction: row; flex-wrap: wrap; gap: 0.4rem 0; border-left: none; } .toc-link { border-left: none; padding: 0.25rem 0.7rem; background: var(--bg); border-radius: 999px; margin: 0 0.4rem 0.4rem 0; } .toc-link.active { background: var(--accent); color: #fdf6e8; border-left: none; } } .law-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; } .law-section { background: var(--card-bg); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 13px; padding: 1.5rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 20px rgba(0, 0, 0, 0.07); } .law-heading { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 0.9rem; } .law-heading img { width: 40px; height: 40px; flex-shrink: 0; } .law-heading h2 { margin: 0 auto 0 0; font-size: 1.1rem; color: var(--text-accent-dark); } .law-copy-link { display: inline-flex; align-items: center; gap: 0.3rem; flex-shrink: 0; background: none; border: 1px solid var(--border); border-radius: 999px; padding: 0.3rem 0.7rem; font-family: inherit; font-size: 0.75rem; font-weight: 600; color: var(--muted); cursor: pointer; transition: background 0.15s var(--ease-premium), color 0.15s var(--ease-premium), border-color 0.15s var(--ease-premium); } .law-copy-link svg { width: 13px; height: 13px; } .law-copy-link:hover, .law-copy-link.copied { background: var(--accent); border-color: var(--accent); color: #fff; } @media (max-width: 480px) { .law-copy-link .share-copy-label { display: none; } } .law-section ul { margin: 0; padding-left: 1.15rem; } .law-section li { font-size: 0.92rem; margin-bottom: 0.55rem; } .law-section li:last-child { margin-bottom: 0; } .zakonik-print-row { margin: 0 0 1.25rem; } .zakonik-print-letterhead { display: none; } @media print { /* Printing this page should read as a compact, standalone reference summary, not a screenshot of the on-screen layout: single column, no card chrome/shadows, sections never split across a page break. */ .zakonik-print-letterhead { display: block; text-align: center; margin-bottom: 1rem; } .zakonik-print-letterhead img { height: 40px; margin-bottom: 0.4rem; } .zakonik-print-letterhead p { margin: 0; font-weight: 700; font-size: 1rem; } .law-grid { display: block; } .law-section { border: 1px solid #000; border-left: 4px solid #000; box-shadow: none; border-radius: 0; padding: 0.7rem 0.9rem; margin-bottom: 0.6rem; break-inside: avoid; } .law-heading img { display: none; } .law-heading h2 { color: #000; font-size: 1rem; } .law-section li { font-size: 0.85rem; margin-bottom: 0.3rem; } .disclaimer { font-size: 0.78rem; } } /* Legal aid contacts page */ .contact-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; } /* FAQ / guide accordion (native
/) */ .faq-list { display: flex; flex-direction: column; gap: 0.75rem; } .faq-item { background: var(--card-bg); border: 1px solid var(--border); border-radius: 13px; padding: 0.2rem 1.25rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 20px rgba(0, 0, 0, 0.07); } .faq-question { cursor: pointer; list-style: none; padding: 1rem 1.75rem 1rem 0; font-weight: 700; color: var(--text-accent-dark); position: relative; } .faq-question::-webkit-details-marker { display: none; } .faq-question::after { content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 1.3rem; font-weight: 400; color: var(--text-accent); transition: transform 0.25s var(--ease-premium); } .faq-item[open] .faq-question::after { transform: translateY(-50%) rotate(45deg); } .faq-answer { padding: 0 0 1.1rem; color: var(--text); font-size: 0.95rem; line-height: 1.6; } .faq-answer a { color: var(--text-accent-dark); } /* "Was this helpful?" feedback widget — shared between Pomoć (situations + FAQ) and Zakonik (law sections). A quiet write-only signal (see netlify/functions/feedback.js), not a public vote counter, so once clicked the widget just confirms receipt and hides the unclicked option rather than showing a tally. */ .feedback-widget { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.85rem; padding-top: 0.75rem; border-top: 1px solid var(--border); font-size: 0.82rem; color: var(--muted); } .feedback-btn { display: inline-flex; align-items: center; gap: 0.3rem; background: none; border: 1px solid var(--border); border-radius: 999px; padding: 0.25rem 0.65rem; font-family: inherit; font-size: 0.8rem; font-weight: 600; color: var(--muted); cursor: pointer; transition: background 0.15s var(--ease-premium), color 0.15s var(--ease-premium), border-color 0.15s var(--ease-premium); } .feedback-btn svg { width: 14px; height: 14px; } .feedback-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--text-accent); } .feedback-btn.feedback-btn-selected { background: var(--accent); border-color: var(--accent); color: #fff; } .feedback-btn:disabled { cursor: default; } .feedback-btn:disabled:not(.feedback-btn-selected) { display: none; } .feedback-thanks { color: var(--text-accent-dark); font-weight: 600; } .guide-steps { margin: 0 0 0.9rem; padding-left: 1.2rem; } .guide-steps li { margin-bottom: 0.5rem; } /* Dokumenti i obrasci */ .doc-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; } .doc-card { background: var(--card-bg); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 13px; padding: 1.5rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 20px rgba(0, 0, 0, 0.07); display: flex; flex-direction: column; } .doc-card .read-more { margin-top: auto; } .doc-card img { width: 32px; height: 32px; margin-bottom: 0.75rem; } .doc-card-category { display: inline-block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gold); margin-bottom: 0.4rem; } .doc-card h2 { margin: 0 0 0.5rem; font-size: 1.1rem; color: var(--text-accent-dark); } .doc-card p { font-size: 0.92rem; margin: 0 0 0.75rem; } .not-found { text-align: center; max-width: 760px; margin: 0 auto; } .not-found-code { font-family: 'Fraunces', Georgia, "Times New Roman", serif; font-weight: 700; font-size: clamp(4rem, 14vw, 7rem); line-height: 1; margin: 0 0 0.5rem; color: var(--gold); letter-spacing: 0.02em; } .not-found-zero { display: inline-block; animation: not-found-spin 4s linear infinite; } @keyframes not-found-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .not-found-zero { animation: none; } } .not-found .section-heading { justify-content: center; margin-left: auto; margin-right: auto; } .not-found .doc-grid { text-align: left; margin-top: 1.75rem; } .not-found-search-hint { margin-top: 1.75rem; font-size: 0.9rem; color: var(--muted); } .not-found-search-hint svg { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; margin: 0 0.15rem; } .doc-fill-form { background: var(--card-bg); border: 1px solid var(--border); border-radius: 13px; padding: 1.5rem; margin: 0 0 2rem; } /* The full legal text stays present (so nothing about what you're signing is hidden) but reads as secondary/reference material — the form above is the primary, actionable part of the page. Print resets all of this back to a normal, fully legible document (see @media print below). */ .document-body { font-size: 0.82rem; line-height: 1.6; color: var(--muted); } .document-body p { margin: 0 0 0.85rem; } .document-body [data-field] { border-bottom: 1px dotted var(--muted); } .document-body [data-field].doc-field-filled { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); } .doc-letterhead { display: none; } .doc-signature-row { display: flex; flex-wrap: wrap; gap: 2rem; margin: 1.5rem 0 0.5rem; } .doc-signature-col { flex: 1 1 200px; } .doc-signature-line { height: 1.8rem; border-bottom: 1px solid var(--muted); } .doc-signature-col p { margin: 0.3rem 0 0; font-size: 0.72rem; } @media print { .no-print, .site-nav-bar, .top-bar, header.site-header, footer.site-footer, .floating-call, .back-to-top, .sticky-mobile-cta, .news-ticker { display: none !important; } /* The watermark's height is a screen-measured px value baked in by JS (see base.njk) — print reflows main at completely different dimensions (no header/nav/footer, A4 page width), so that stale height can extend well past the actual printed content and pad out extra blank pages. It's purely decorative, so simplest is to drop it for print entirely. */ main::before { display: none !important; } @page { size: A4; margin: 0.8cm; } /* html/body are stretched to min-height:100% for the "sticky footer" layout on screen — in a print/PDF context that 100% resolves against the page's full height, not the actual content, which was leaving a blank trailing page even for a one-paragraph letter. Print only ever needs as much height as the content itself. */ html, body { height: auto; min-height: 0; } /* Needs to out-specificity the base "article.post" rule (element+class, 0-1-1) which otherwise wins over a bare ".document-page" (0-1-0) and keeps its card padding/border/shadow on the printed page — wasting ~1.5cm of vertical space per side and, on at least one document, is exactly what pushed its last two lines onto an otherwise-blank second page. */ article.post.document-page { padding: 0; border: none; box-shadow: none; background: transparent; border-radius: 0; } /* Default print sizing is generous — most documents in this collection are one short letter's worth of text, and a compact/dense typeset left the printed page mostly blank. The dense contract (many articles/fields) opts back into the compact rules below via .document-page-long so it still fits its 2-page budget. A few of the "short" documents sit close enough to a full page that this same generous sizing left only ~40-50px of slack — not enough room for the (unbreakable) signature block, which then jumped to a near-empty second page. Trimmed slightly across the board so every short document keeps a comfortable page-1 margin. */ .document-page h1 { font-size: 1.5rem; margin: 0 0 0.4rem; } .document-body { font-size: 10.5pt; line-height: 1.4; color: #000; } .document-body h3 { font-size: 1.15rem; margin: 0.6rem 0 0.3rem; } .document-body p { margin: 0 0 0.42rem; } .document-body [data-field] { border-bottom: 1px solid #000; } .document-body [data-field].doc-field-filled { color: #000; font-weight: 400; border-bottom-color: #000; } .document-page-long h1 { font-size: 1.3rem; margin: 0 0 0.35rem; } .document-page-long .document-body { font-size: 9.1pt; line-height: 1.22; } .document-page-long .document-body h3 { font-size: 1rem; margin: 0.4rem 0 0.2rem; } .document-page-long .document-body p { margin: 0 0 0.26rem; } .doc-letterhead { display: block; text-align: center; margin-bottom: 0.5rem; } .doc-letterhead img { height: 34px; margin-bottom: 0.25rem; } .doc-letterhead p { margin: 0; font-weight: 700; font-size: 0.9rem; } .doc-signature-row { margin: 1rem 0 0.3rem; } .doc-signature-line { height: 1.9rem; border-bottom-color: #000; } .document-page-long .doc-letterhead { margin-bottom: 0.35rem; } .document-page-long .doc-letterhead img { height: 26px; margin-bottom: 0.15rem; } .document-page-long .doc-letterhead p { font-size: 0.75rem; } .document-page-long .doc-signature-row { margin: 0.45rem 0 0.2rem; } .document-page-long .doc-signature-line { height: 1.3rem; } } /* Stanovi (apartment listings) */ .stanovi-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.75rem; } /* Phones: swipeable horizontal cards instead of a stacked column — bleeds to the screen edges (cancelling out main's own side padding) so the next/previous card peeks in as a scroll affordance. */ @media (max-width: 700px) { .stanovi-grid { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1rem; margin: 0 -1.25rem; padding: 0.25rem 1.25rem 0.75rem; -webkit-overflow-scrolling: touch; } .stanovi-grid li { flex: 0 0 82%; scroll-snap-align: center; } .stanovi-grid .stan-card { height: 100%; } } /* main's own side padding narrows below 480px — match it so the negative margin doesn't overshoot and cause page-level horizontal overflow. */ @media (max-width: 480px) { .stanovi-grid { margin: 0 -1rem; padding: 0.25rem 1rem 0.75rem; } } .stan-card { display: block; background: var(--card-bg); border: 1px solid var(--border); border-radius: 15px; overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 20px rgba(0, 0, 0, 0.07); transition: transform 0.25s var(--ease-premium), box-shadow 0.25s var(--ease-premium); color: inherit; } .stan-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(195, 147, 34, 0.3); text-decoration: none; } .stan-card-media { position: relative; overflow: hidden; } .stan-card img { width: 100%; height: 190px; object-fit: cover; display: block; transition: transform 0.4s var(--ease-premium); } .stan-card:hover img { transform: scale(1.04); } .stan-card-hover-info { position: absolute; inset: auto 0 0 0; display: flex; gap: 0.75rem; padding: 0.6rem 1rem; background: linear-gradient(to top, rgba(0, 0, 0, 0.65), transparent); color: #fff; font-size: 0.8rem; font-weight: 600; opacity: 0; transform: translateY(8px); transition: opacity 0.25s var(--ease-premium), transform 0.25s var(--ease-premium); pointer-events: none; } .stan-card:hover .stan-card-hover-info, .stan-card:focus-visible .stan-card-hover-info { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .stan-card-hover-info { transition: opacity 0.1s linear; } } .stan-card-body { padding: 1.25rem 1.5rem; } .stan-card-body h2 { margin: 0 0 0.4rem; font-size: 1.15rem; color: var(--text); } .stan-price { display: inline-block; background: var(--accent); color: #fff; font-weight: 700; font-size: 0.85rem; padding: 0.2rem 0.7rem; border-radius: 999px; margin-bottom: 0.6rem; } .stan-price-subsidized { display: inline-block; background: var(--bg); border: 1px solid var(--gold); color: var(--text-accent-dark); font-weight: 700; font-size: 0.78rem; padding: 0.2rem 0.7rem; border-radius: 999px; margin: 0 0 0.6rem 0.5rem; white-space: nowrap; } .stan-subsidy-note { font-size: 0.8rem; color: var(--muted); font-style: italic; margin: 0 0 1.25rem; } .stanovi-subsidy-note { font-size: 0.85rem; color: var(--muted); font-style: italic; } .stan-meta { color: var(--muted); font-size: 0.85rem; margin: 0 0 0.6rem; } .stan-desc { font-size: 0.9rem; margin: 0; color: var(--text); } /* Icon-badge facts row (size, rooms, floor, location) — replaces plain .stan-meta text */ .stan-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.75rem; padding: 0; } .stan-facts li { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 0.35rem 0.85rem; font-size: 0.85rem; font-weight: 600; color: var(--text); } .stan-facts svg { width: 15px; height: 15px; color: var(--text-accent); flex-shrink: 0; } .stan-facts-compact { margin-bottom: 0.6rem; } .stan-facts-compact li { font-size: 0.78rem; font-weight: 500; padding: 0.25rem 0.65rem; } .stan-facts-compact svg { width: 13px; height: 13px; } /* Stan detail page */ .stan-detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; align-items: start; } .stan-detail-img { width: 100%; border-radius: 15px; margin-bottom: 0.5rem; } /* Photo gallery on the detail page — main image + clickable thumbnail strip */ .stan-gallery-main { width: 100%; height: 360px; object-fit: cover; border-radius: 15px; display: block; transition: opacity 0.2s var(--ease-premium); } .stan-gallery-thumbs { display: flex; gap: 0.6rem; margin-top: 0.6rem; } .stan-thumb { padding: 0; margin: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; cursor: pointer; background: none; width: 84px; height: 62px; flex-shrink: 0; transition: border-color 0.2s var(--ease-premium), transform 0.2s var(--ease-premium); } .stan-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .stan-thumb:hover { border-color: var(--gold); transform: translateY(-2px); } .stan-thumb.active { border-color: var(--accent); } @media (max-width: 480px) { .stan-gallery-main { height: 240px; } } .stan-info-widget { background: var(--card-bg); border: 1px solid var(--border); border-left: 4px solid var(--accent-2); border-radius: 13px; padding: 1.5rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 20px rgba(0, 0, 0, 0.07); } .stan-info-widget h3 { margin: 0 0 1rem; font-size: 1.05rem; color: var(--text-accent-2-dark); } .stan-info-widget ul { margin: 0 0 1.25rem; padding-left: 1.2rem; } .stan-info-widget li { font-size: 0.9rem; margin-bottom: 0.6rem; } .stan-call-cta { background: linear-gradient(160deg, var(--accent-2) 0%, var(--accent-2-dark) 100%); border-radius: 8px; padding: 1.1rem 1.25rem; color: var(--header-text); text-align: center; } .stan-call-cta p { margin: 0 0 0.5rem; font-size: 0.85rem; color: rgba(242, 240, 234, 0.9); } .stan-call-cta a { display: inline-block; background: var(--gold); color: var(--accent-2-dark); font-weight: 700; font-size: 1rem; padding: 0.5rem 1.25rem; border-radius: 999px; } .stan-call-cta a:hover { text-decoration: none; transform: translateY(-1px); } @media (max-width: 800px) { .stan-detail-grid { grid-template-columns: 1fr; } } .contact-card { background: var(--card-bg); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 13px; padding: 1.5rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 20px rgba(0, 0, 0, 0.07); } .contact-card h2 { margin: 0 0 0.25rem; font-size: 1.1rem; } .contact-role { color: var(--muted); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.03em; margin: 0 0 0.75rem; } .contact-card p { margin: 0 0 0.3rem; font-size: 0.92rem; } /* Meeting minutes archive page */ .minutes-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; } .minutes-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; background: var(--card-bg); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 13px; padding: 1.1rem 1.5rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 20px rgba(0, 0, 0, 0.07); } .minutes-item.featured { justify-content: flex-start; align-items: flex-start; } .minutes-thumb { width: 120px; height: 90px; object-fit: cover; border-radius: 8px; flex-shrink: 0; } .minutes-note { font-size: 0.85rem; color: var(--muted); font-style: italic; margin: 0.5rem 0 0; } .minutes-item h2 { margin: 0 0 0.2rem; font-size: 1.05rem; } .minutes-item .post-meta { margin: 0; } /* Complaint form page */ .steps-list { margin: 0 0 2rem; padding-left: 1.25rem; } .steps-list li { margin-bottom: 0.6rem; } /* Forms — survey and comments */ .form-note { color: var(--muted); font-size: 0.9rem; margin: 0 0 1.25rem; } .poll-form, .comment-form { display: flex; flex-direction: column; gap: 1rem; } .poll-form fieldset { /* Browsers give
an intrinsic min-width matching its widest child (the legend, here) regardless of the flex column it sits in — override that so a long legend wraps instead of forcing the fieldset wider than the viewport on narrow screens. */ min-width: 0; border: 1px solid var(--border); border-left: 4px solid var(--gold); border-radius: 13px; background: var(--card-bg); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 20px rgba(0, 0, 0, 0.07); padding: 1.1rem 1.4rem 1.35rem; margin: 0; } .poll-form legend { font-weight: 700; font-size: 1rem; padding: 0 0.5rem; color: var(--text-accent-dark); } .poll-option { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.6rem; border-radius: 6px; font-weight: normal; transition: background 0.15s var(--ease-premium); } .poll-option:hover { background: var(--bg); } .poll-form label:not(.poll-option), .comment-form label { font-weight: 600; font-size: 0.9rem; } .poll-form textarea, .poll-form input[type="text"], .comment-form textarea, .comment-form input[type="text"] { width: 100%; padding: 0.6rem 0.75rem; border: 1px solid var(--border); border-radius: 6px; background: var(--card-bg); color: var(--text); font-family: inherit; font-size: 1rem; resize: vertical; } .poll-form button, .comment-form button { align-self: flex-start; background: var(--accent); color: #fff; border: none; padding: 0.6rem 1.5rem; border-radius: 6px; font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: background 0.15s var(--ease-premium); } .poll-form button:hover, .comment-form button:hover { background: var(--accent-dark); } /* Comments */ .comments { margin-top: 2.5rem; } .comment-list { list-style: none; margin: 0 0 1.75rem; padding: 0; display: flex; flex-direction: column; gap: 1rem; } .comment-item { background: var(--card-bg); border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: 8px; padding: 1rem 1.25rem; } .comment-author { font-weight: 700; margin: 0 0 0.25rem; } .comment-text { margin: 0; color: var(--text); } .comment-badge { display: inline-block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 0.1rem 0.55rem; margin-left: 0.5rem; vertical-align: middle; } .comment-reply { margin: 0.85rem 0 0 1.5rem; padding: 0.85rem 1.1rem; background: var(--bg); border-left: 3px solid var(--accent); border-radius: 6px; } .comment-reply .comment-author { color: var(--text-accent-dark); font-size: 0.9rem; } .comment-reply .comment-text { font-size: 0.92rem; } @media (max-width: 480px) { .comment-reply { margin-left: 0.75rem; } } footer.site-footer { text-align: center; color: var(--header-text); background: var(--header-bg); border-top: 3px solid var(--gold); font-size: 0.85rem; padding: 1.5rem 1.25rem 1.75rem; margin-top: 3rem; } @media (max-width: 850px) { footer.site-footer { padding: 1.25rem 1rem 1.25rem; margin-top: 2rem; } } .footer-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1rem; } .footer-nav a { color: var(--header-text); font-size: 0.85rem; padding: 0.3rem 0.9rem; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 6px; } .footer-nav a:hover { background: var(--gold); border-color: var(--gold); color: var(--header-bg); text-decoration: none; } footer.site-footer p { margin: 0; } .footer-inner { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.3fr; gap: 2rem; max-width: var(--max-width); margin: 0 auto; text-align: left; padding-bottom: 1.5rem; } .footer-col h4, .footer-col-toggle { color: var(--gold); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 0.75rem; } /* On desktop this is just a heading with no interactive affordance — the collapsible behavior (and the caret that signals it) only kicks in on phones, where three full link/contact/newsletter columns otherwise push the real footer content a full screen down. */ .footer-col-toggle { display: block; width: 100%; text-align: left; background: none; border: none; padding: 0; font-family: inherit; font-weight: 700; cursor: default; } .footer-col-caret { display: none; } .footer-col-panel { display: contents; } .footer-col a, .footer-col p { display: block; color: var(--header-text); opacity: 0.85; font-size: 0.85rem; margin: 0 0 0.55rem; } .footer-col a:hover { opacity: 1; color: var(--gold); text-decoration: none; } .footer-hours { opacity: 1; margin-top: 0.15rem; white-space: nowrap; font-size: 0.78rem; } .footer-hours strong { color: var(--gold); } .footer-brand { display: flex; flex-direction: column; } .footer-logo { width: 42px; height: 42px; margin-bottom: 0.6rem; border-radius: 50%; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); } .footer-tagline { font-style: italic; opacity: 0.75; } .footer-newsletter form { display: flex; gap: 0.4rem; margin-top: 0.3rem; } .footer-newsletter input[type="email"] { flex: 1; min-width: 0; padding: 0.45rem 0.6rem; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.08); color: var(--header-text); font-size: 0.82rem; } .footer-newsletter input::placeholder { color: rgba(255, 255, 255, 0.6); } .footer-newsletter button { background: var(--gold); color: var(--header-bg); border: none; border-radius: 6px; padding: 0.45rem 0.9rem; font-weight: 700; font-size: 0.82rem; cursor: pointer; transition: filter 0.2s var(--ease-premium); } .footer-newsletter button:hover { filter: brightness(1.1); } .footer-copy { text-align: center; border-top: 1px solid rgba(255, 255, 255, 0.15); padding-top: 1.25rem; margin: 0 !important; opacity: 0.8; } .footer-copy a { color: inherit; text-decoration: underline; } .footer-copy a:hover { color: var(--gold); } @media (max-width: 850px) { .footer-inner { display: flex; flex-direction: column; gap: 0; padding-bottom: 0.5rem; } .footer-brand { flex-direction: row; align-items: center; gap: 0.75rem; padding-bottom: 1.25rem; } .footer-tagline { margin: 0; } .footer-col + .footer-col { border-top: 1px solid rgba(255, 255, 255, 0.15); } .footer-col h4 { margin: 0 0 0.5rem; } .footer-col a, .footer-col p { margin: 0 0 0.4rem; } /* Collapsed by default — tap the column title to expand. Same grid-template-rows 0fr/1fr technique as the mobile nav dropdown, so the reveal animates without a hardcoded height guess. */ .footer-col-toggle { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.9rem 0; cursor: pointer; } .footer-col-caret { display: block; flex-shrink: 0; width: 9px; height: 9px; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(45deg); transition: transform 0.25s var(--ease-premium); } .footer-col.open .footer-col-caret { transform: rotate(-135deg); } .footer-col-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s var(--ease-premium); } .footer-col.open .footer-col-panel { grid-template-rows: 1fr; } .footer-col-panel-inner { overflow: hidden; min-height: 0; } .footer-col-panel-inner > *:last-child { margin-bottom: 1rem; } .footer-copy { padding-top: 1rem; font-size: 0.78rem; } } .back-to-top { position: fixed; bottom: 1.5rem; right: 1.5rem; width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--accent); color: #fff; font-size: 1.2rem; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.25s var(--ease-premium), transform 0.25s var(--ease-premium), background 0.2s; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 0; } .back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:hover { background: var(--accent-dark); } .back-to-top-ring { position: absolute; inset: 0; width: 44px; height: 44px; transform: rotate(-90deg); pointer-events: none; } .back-to-top-ring-track { fill: none; stroke: rgba(255, 255, 255, 0.22); stroke-width: 2.5; } .back-to-top-ring-progress { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 119.4; stroke-dashoffset: 119.4; transition: stroke-dashoffset 0.1s linear; } .back-to-top-arrow { position: relative; z-index: 1; } @media (prefers-reduced-motion: reduce) { .back-to-top { transition: opacity 0.1s linear; } .back-to-top-ring-progress { transition: none; } } /* Sticky mobile CTA bar — surfaces the real submit button on long forms (calculators, registry form) so mobile visitors don't have to scroll back up/down to find it. Hidden on desktop; on mobile it slides in once the visitor has scrolled past the top of the page and hides again once the real button is back in view. */ .sticky-mobile-cta { display: none; } @media (max-width: 760px) { .sticky-mobile-cta { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--card-bg); border-top: 1px solid var(--border); padding: 0.65rem 1rem calc(0.65rem + env(safe-area-inset-bottom)); box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.12); transform: translateY(100%); transition: transform 0.25s var(--ease-premium); } .sticky-mobile-cta.visible { transform: translateY(0); } .sticky-mobile-cta button { display: block; width: 100%; background: var(--accent); color: #fff; border: none; padding: 0.85rem 1rem; border-radius: 6px; font-size: 1rem; font-weight: 700; cursor: pointer; } .sticky-mobile-cta button:hover { background: var(--accent-dark); } } @media (prefers-reduced-motion: reduce) { .sticky-mobile-cta { transition: transform 0.1s linear; } } /* Skip-to-content link — invisible until keyboard-focused, standard accessibility pattern */ .skip-link { position: absolute; top: 0; left: -9999px; z-index: 100; background: var(--accent); color: #fff; font-weight: 700; padding: 0.75rem 1.25rem; border-radius: 0 0 8px 0; } .skip-link:focus { left: 0; } /* Floating "call us" button — mirrors back-to-top on the opposite corner. Hidden until the visitor scrolls a bit (same threshold as back-to-top), so it never sits on top of the hero/stats text every page starts with. */ .floating-call { position: fixed; bottom: 1.5rem; left: 1.5rem; width: 50px; height: 50px; border-radius: 50%; /* Translucent + blurred rather than solid — this button sits over scrolling page content on every long page, so whatever text happens to pass underneath stays legible instead of being fully hidden. */ background: rgba(101, 54, 37, 0.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); z-index: 50; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.25s var(--ease-premium), transform 0.25s var(--ease-premium), background 0.2s var(--ease-premium), visibility 0s linear 0.25s; } .floating-call.visible { opacity: 1; visibility: visible; transform: translateY(0); animation: call-pulse 2.8s ease-in-out infinite; transition: opacity 0.25s var(--ease-premium), transform 0.25s var(--ease-premium), background 0.2s var(--ease-premium); } .floating-call svg { width: 24px; height: 24px; } .floating-call:hover { background: rgba(71, 38, 26, 0.92); transform: scale(1.07); text-decoration: none; } @keyframes call-pulse { 0%, 100% { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(101, 54, 37, 0.45); } 50% { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3), 0 0 0 9px rgba(101, 54, 37, 0); } } @media (prefers-reduced-motion: reduce) { .floating-call.visible { animation: none; } } @media (max-width: 600px) { .post-card { flex-direction: column; } .post-thumb { width: 100%; height: 160px; } } @media (max-width: 480px) { main { padding: 1.75rem 1rem 3rem; } article.post { padding: 1.5rem; } .post-card { padding: 1.25rem; } .hero { min-height: 320px; } .hero-inner { padding: 1.5rem 1rem; } .hero h1 { font-size: 1.15rem; } .site-logo { height: 56px; width: 56px; } .site-title { font-size: 1.15rem; } .site-nav-bar .site-nav { justify-content: center; } } /* Homepage sidebar */ main.main-wide { max-width: 1180px; } .content-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; align-items: start; } .sidebar { display: flex; flex-direction: column; gap: 1.5rem; } .widget { background: var(--card-bg); border: 1px solid var(--border); border-radius: 13px; padding: 1.5rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 20px rgba(0, 0, 0, 0.07); transition: box-shadow 0.2s var(--ease-premium); } .widget:hover { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(195, 147, 34, 0.3); } .widget-title { display: flex; align-items: center; gap: 0.5rem; font-family: 'Fraunces', Georgia, "Times New Roman", serif; font-size: 1.05rem; color: var(--text-accent-dark); margin: 0 0 0.35rem; } .widget-title::before { content: ""; width: 8px; height: 8px; background: var(--gold); border-radius: 2px; flex-shrink: 0; } .widget-note { font-size: 0.78rem; color: var(--muted); font-style: italic; margin: 0 0 1.1rem; } .tip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; } .tip-item { display: flex; gap: 0.75rem; align-items: flex-start; } .tip-icon { width: 34px; height: 34px; flex-shrink: 0; } .tip-text { font-size: 0.88rem; margin: 0; color: var(--text); line-height: 1.5; } .quicklinks-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; } .quicklinks-list a { display: block; padding: 0.6rem 0.9rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.88rem; font-weight: 600; color: var(--text-accent-dark); transition: background 0.15s var(--ease-premium), border-color 0.15s var(--ease-premium); } .quicklinks-list a:hover { background: var(--bg); border-color: var(--accent); text-decoration: none; } /* Sidebar "Kako do pomoći" steps widget */ .steps-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.1rem; } .steps-item { display: flex; gap: 0.85rem; align-items: flex-start; } .steps-number { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; font-family: 'Fraunces', Georgia, "Times New Roman", serif; font-weight: 700; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; } .steps-title { margin: 0 0 0.15rem; font-weight: 700; font-size: 0.92rem; color: var(--text); } .steps-desc { margin: 0; font-size: 0.85rem; color: var(--muted); line-height: 1.5; } /* Sidebar membership CTA */ .cta-widget { background: linear-gradient(160deg, var(--accent-2) 0%, var(--accent-2-dark) 100%); border: none; border-radius: 13px; padding: 1.5rem; color: var(--header-text); box-shadow: 0 4px 14px rgba(71, 38, 26, 0.25); } .cta-widget .widget-title { color: var(--header-text); } .cta-widget .widget-title::before { background: var(--gold); } .cta-widget p { font-size: 0.9rem; margin: 0 0 1.1rem; color: rgba(242, 240, 234, 0.9); } .cta-button { position: relative; display: inline-block; overflow: hidden; background: linear-gradient(160deg, var(--gold-light) 0%, var(--gold) 60%, var(--accent-2) 100%); color: var(--accent-2-dark); font-weight: 700; font-size: 0.9rem; padding: 0.6rem 1.25rem; border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 2px 6px rgba(0, 0, 0, 0.12); transition: transform 0.15s var(--ease-premium), box-shadow 0.15s var(--ease-premium); } .cta-button:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 4px 10px rgba(0, 0, 0, 0.2), 0 0 18px rgba(195, 147, 34, 0.55); text-decoration: none; color: var(--accent-2-dark); } /* Metal-foil shine sweep — a diagonal highlight band sits just off the button's left edge and glides across on hover, on top of the gradient fill, for a "polished metal" read rather than a flat hover color swap. */ .cta-button::before { content: ""; position: absolute; top: 0; left: -60%; width: 35%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.65), transparent); transform: skewX(-20deg); transition: left 0.55s var(--ease-premium); pointer-events: none; } .cta-button:hover::before { left: 130%; } @media (prefers-reduced-motion: reduce) { .cta-button::before { transition: none; display: none; } } /* Small press-down feedback on the main clickable elements — a button should feel "pushed" on click, not just change color on hover. */ button:not(:disabled):active, .cta-button:active, .read-more:active { transform: scale(0.96); } @media (prefers-reduced-motion: reduce) { button:active, .cta-button:active, .read-more:active { transform: none; } } /* Success checkmark — draws itself in (ring, then tick) on load. Used after a successful petition sign or Registar podstanara submission. */ .success-check { width: 72px; height: 72px; display: block; margin: 0 auto 1.25rem; color: var(--gold); } .icon-check-circle-ring { stroke-dasharray: 64; stroke-dashoffset: 64; animation: check-ring-draw 0.5s var(--ease-premium) forwards; } .icon-check-circle-tick { stroke-dasharray: 16; stroke-dashoffset: 16; animation: check-tick-draw 0.35s var(--ease-premium) 0.45s forwards; } @keyframes check-ring-draw { to { stroke-dashoffset: 0; } } @keyframes check-tick-draw { to { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { .icon-check-circle-ring, .icon-check-circle-tick { animation: none; stroke-dashoffset: 0; } } /* Scroll-reveal: sections fade + rise into place the first time they enter the viewport (see the IntersectionObserver in base.njk). Skipped entirely under prefers-reduced-motion — .reveal-init is never applied there, so nothing is ever hidden waiting on a scroll event. */ .reveal-init { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease-premium), transform 0.6s var(--ease-premium); } .reveal-init.reveal-visible { opacity: 1; transform: translateY(0); } @media (max-width: 800px) { .content-grid { grid-template-columns: 1fr; } } @media (max-width: 760px) { .widget-kalkulator, .widget-peticija, .widget-korisni-linkovi, .sidebar .cta-widget { display: none; } } /* Reading progress bar — thin fill at the very top of the viewport that tracks scroll position on long-form pages (posts, documents, Zakonik). */ .reading-progress-bar { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg, var(--gold), var(--accent)); z-index: 45; transition: width 0.1s linear; } @media (prefers-reduced-motion: reduce) { .reading-progress-bar { transition: none; } } /* Welcome popup (mobile): gentle fade + rise, dismissible via backdrop or the close button; see the "Postanite član" sidebar CTA it stands in for. */ .welcome-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1.25rem; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.5s var(--ease-premium), visibility 0s linear 0.5s; } .welcome-modal.open { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; } .welcome-modal-backdrop { position: absolute; inset: 0; background: rgba(28, 15, 10, 0.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .welcome-modal-box { position: relative; max-width: 360px; width: 100%; background: linear-gradient(160deg, var(--accent-2) 0%, var(--accent-2-dark) 100%); color: var(--header-text); border-radius: 16px; padding: 1.85rem 1.6rem 1.6rem; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); transform: translateY(24px) scale(0.94); transition: transform 0.5s var(--ease-premium); } .welcome-modal.open .welcome-modal-box { transform: translateY(0) scale(1); } .welcome-modal-box .widget-title { color: var(--header-text); } .welcome-modal-box .widget-title::before { background: var(--gold); } .welcome-modal-box p { font-size: 0.92rem; line-height: 1.5; margin: 0 0 1.2rem; color: rgba(242, 240, 234, 0.9); } .welcome-modal-close { position: absolute; top: 0.6rem; right: 0.75rem; width: 32px; height: 32px; background: none; border: none; color: var(--header-text); font-size: 1.6rem; line-height: 1; cursor: pointer; opacity: 0.8; transition: opacity 0.15s var(--ease-premium); } .welcome-modal-close:hover { opacity: 1; } @media (min-width: 761px) { .welcome-modal { display: none; } } /* Homepage: Saradnja (collaboration) section */ .collab-section { margin-top: 2.5rem; background: linear-gradient(135deg, var(--accent-2) 0%, var(--accent-2-dark) 100%); border-radius: 15px; padding: 2.5rem; color: var(--header-text); text-align: center; } .collab-section h2 { color: #fff; margin: 0 0 0.75rem; font-size: 1.4rem; } .collab-section p { max-width: 620px; margin: 0 auto 1.5rem; color: rgba(242, 240, 234, 0.9); } .collab-buttons { display: flex; justify-content: center; gap: 0.9rem; flex-wrap: wrap; } .collab-buttons a { display: inline-block; border: 1px solid rgba(255, 255, 255, 0.5); color: var(--header-text); padding: 0.6rem 1.4rem; border-radius: 999px; font-weight: 600; font-size: 0.92rem; transition: background 0.15s var(--ease-premium), border-color 0.15s var(--ease-premium); } .collab-buttons a:hover { background: var(--gold); border-color: var(--gold); color: var(--accent-2-dark); text-decoration: none; } /* Homepage: testimonials */ .testimonials-section { margin-top: 2.5rem; } .testimonials-slider { position: relative; } .testimonials-viewport { overflow: hidden; } .testimonials-track { display: flex; width: 100%; transition: transform 0.6s var(--ease-premium); } .testimonials-track.dragging { transition: none; } .testimonial-slide { flex-shrink: 0; width: 100%; min-width: 0; padding: 0 0.5rem; display: flex; gap: 1.5rem; align-items: stretch; box-sizing: border-box; } .testimonial-card { position: relative; background: var(--card-bg); border: 1px solid var(--border); border-radius: 13px; padding: 1.65rem 1.85rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 20px rgba(0, 0, 0, 0.07); flex: 1 1 0; min-width: 0; text-align: left; overflow: hidden; } .testimonial-card::before { content: "\201C"; position: absolute; top: -1rem; left: 0.6rem; font-family: 'Fraunces', Georgia, "Times New Roman", serif; font-weight: 700; font-size: 6rem; line-height: 1; color: var(--gold); opacity: 0.14; z-index: 0; pointer-events: none; } .testimonial-quote, .testimonial-author { position: relative; z-index: 1; } /* Testimonial cards show a brief skeleton shimmer as the section scrolls into view, then crossfade into the real quote — keyed off the same .reveal-init/.reveal-visible toggle already driving the section's own fade-up (see the IntersectionObserver in base.njk), so no extra JS is needed. Entirely scoped under .reveal-init: when that class is never applied (prefers-reduced-motion, no IntersectionObserver, no JS), the shimmer pseudo-element never materializes and the real text is never hidden in the first place. */ .testimonials-section.reveal-init .testimonial-quote, .testimonials-section.reveal-init .testimonial-author { opacity: 0; transition: opacity 0.4s var(--ease-premium); } .testimonials-section.reveal-visible .testimonial-quote, .testimonials-section.reveal-visible .testimonial-author { opacity: 1; transition-delay: 0.35s; } .testimonials-section.reveal-init .testimonial-card::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, var(--border) 25%, var(--card-bg) 50%, var(--border) 75%); background-size: 250% 100%; animation: img-shimmer 1.4s ease-in-out infinite; opacity: 1; transition: opacity 0.3s var(--ease-premium); pointer-events: none; } .testimonials-section.reveal-visible .testimonial-card::after { opacity: 0; transition-delay: 0.25s; } @media (max-width: 700px) { .testimonial-slide { flex-direction: column; } /* .testimonial-card keeps flex-basis:0 for desktop's equal-width row layout — but stacked in a column, a 0 basis combined with this card's overflow:hidden disables the browser's automatic min-height-from-content floor, letting flex-grow squeeze both cards to a sliver and clip the quote text. Switch to an auto basis here so each card sizes to its own content height instead of splitting the slide's height in half. */ .testimonial-card { flex: 0 1 auto; } } .testimonials-nav { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-top: 1.25rem; } .testimonials-arrow { background: var(--card-bg); border: 1px solid var(--border); color: var(--text-accent); width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s var(--ease-premium), color 0.15s var(--ease-premium); } .testimonials-arrow:hover { background: var(--accent); color: #fff; } .testimonials-arrow svg { width: 16px; height: 16px; } .testimonials-dots { display: flex; gap: 0.5rem; } .testimonials-dots button { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--border); background: var(--border); padding: 0; cursor: pointer; transition: background 0.2s var(--ease-premium), border-color 0.2s var(--ease-premium), transform 0.2s var(--ease-premium); } .testimonials-dots button.active { background: var(--accent); border-color: var(--accent); transform: scale(1.2); } .testimonial-quote { font-style: italic; color: var(--text); margin: 0 0 1rem; font-size: 0.95rem; line-height: 1.6; } .testimonial-quote::before { content: "\201C"; font-family: 'Fraunces', Georgia, "Times New Roman", serif; font-size: 2.6rem; color: var(--gold); line-height: 0; display: block; margin-bottom: 0.6rem; } .testimonial-author { margin: 0; font-size: 0.85rem; font-weight: 700; color: var(--text-accent-dark); display: flex; align-items: center; gap: 0.5rem; } /* About page: activity list + milestones timeline */ .about-list { margin: 0 0 1.75rem; padding-left: 1.25rem; } .about-list li { margin-bottom: 0.6rem; line-height: 1.6; } /* Glossary (Rječnik pojmova) */ .glossary-list { margin: 0 0 1.75rem; } .glossary-item { padding: 1.1rem 0; border-bottom: 1px solid var(--border); } .glossary-item:first-child { padding-top: 0; } .glossary-term { font-family: 'Fraunces', Georgia, "Times New Roman", serif; font-weight: 700; font-size: 1.05rem; color: var(--text-accent-dark); margin: 0 0 0.3rem; } .glossary-def { margin: 0; color: var(--text); font-size: 0.94rem; line-height: 1.6; } .glossary-def a { color: var(--text-accent-dark); } /* New-tenant starter guide checklist (Vodič za novog podstanara) — its own class names rather than reusing .steps-list/.steps-item, which already name two visually different things elsewhere in this file (a plain padded
    and the homepage sidebar's circle-number widget). */ .guide-checklist { list-style: none; margin: 0 0 1.75rem; padding: 0; display: flex; flex-direction: column; gap: 1.1rem; } .guide-checklist-item { display: flex; gap: 1rem; align-items: flex-start; background: var(--card-bg); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 13px; padding: 1.25rem 1.5rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 20px rgba(0, 0, 0, 0.07); } .guide-checklist-number { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: var(--accent-2-dark); display: flex; align-items: center; justify-content: center; font-family: 'Fraunces', Georgia, "Times New Roman", serif; font-weight: 700; font-size: 1rem; } .guide-checklist-title { margin: 0 0 0.3rem; font-size: 1.05rem; color: var(--text-accent-dark); } .guide-checklist-desc { margin: 0; font-size: 0.92rem; color: var(--muted); } @media print { .guide-checklist-item { box-shadow: none; border-left-color: #000; break-inside: avoid; } } .milestones-list { list-style: none; margin: 0 0 1.75rem; padding: 0 0 0 1.25rem; border-left: 3px solid var(--border); display: flex; flex-direction: column; gap: 1.4rem; } .milestone-item { position: relative; opacity: 0; transform: translateX(-16px); transition: opacity 0.5s var(--ease-premium), transform 0.5s var(--ease-premium); } .milestones-list.milestones-reveal-visible .milestone-item { opacity: 1; transform: none; } .milestones-list.milestones-reveal-visible .milestone-item:nth-child(1) { transition-delay: 0.03s; } .milestones-list.milestones-reveal-visible .milestone-item:nth-child(2) { transition-delay: 0.11s; } .milestones-list.milestones-reveal-visible .milestone-item:nth-child(3) { transition-delay: 0.19s; } .milestones-list.milestones-reveal-visible .milestone-item:nth-child(4) { transition-delay: 0.27s; } .milestones-list.milestones-reveal-visible .milestone-item:nth-child(5) { transition-delay: 0.35s; } .milestones-list.milestones-reveal-visible .milestone-item:nth-child(6) { transition-delay: 0.43s; } .milestones-list.milestones-reveal-visible .milestone-item:nth-child(7) { transition-delay: 0.51s; } .milestones-list.milestones-reveal-visible .milestone-item:nth-child(8) { transition-delay: 0.59s; } .milestones-list.milestones-reveal-visible .milestone-item:nth-child(n+9) { transition-delay: 0.67s; } @media (prefers-reduced-motion: reduce) { .milestone-item { opacity: 1; transform: none; transition: none; } } .milestone-item::before { content: ""; position: absolute; left: -1.6rem; top: 0.3rem; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px var(--card-bg); } .milestone-date { display: block; font-size: 0.78rem; font-weight: 700; color: var(--text-accent); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.15rem; } .milestone-item h3 { margin: 0 0 0.3rem; font-size: 1rem; } .milestone-item p { margin: 0; font-size: 0.9rem; color: var(--muted); } .qa-form-wrap { background: var(--card-bg); border: 1px solid var(--border); border-radius: 13px; padding: 1.75rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 20px rgba(0, 0, 0, 0.07); } /* Registar podstanara — printable registration form */ .registry-frame { background: var(--card-bg); border: 2px solid var(--accent-dark); border-radius: 15px; padding: 2rem 2.25rem 2.25rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 20px rgba(0, 0, 0, 0.07); } .print-only { display: none; } .registry-frame h2 { margin: 2rem 0 0.35rem; padding-top: 1.25rem; border-top: 1px solid var(--border); color: var(--text-accent-dark); font-size: 1.05rem; } .registry-frame h2:first-child { margin-top: 0; padding-top: 0; border-top: none; } .registry-instructions { background: var(--bg); border-radius: 8px; padding: 0.85rem 1.1rem; margin: 0 0 1.75rem; font-size: 0.88rem; color: var(--text); } .registry-field-hint { font-weight: normal; color: var(--muted); font-size: 0.8rem; } .registry-error { background: #fdecea; border: 1px solid #e3a8a1; border-radius: 8px; padding: 0.85rem 1.1rem; margin: 0 0 1.75rem; font-size: 0.9rem; font-weight: 600; color: #8a2e24; } .registry-submit-note { margin: 0.85rem 0 0; font-size: 0.82rem; color: var(--muted); } .registry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.5rem; } .registry-grid.single { grid-template-columns: 1fr; } .registry-field { display: flex; flex-direction: column; gap: 0.3rem; } .registry-field.full { grid-column: 1 / -1; } .registry-field label { font-size: 0.85rem; font-weight: 600; color: var(--text); } .registry-field input[type="text"], .registry-field input[type="email"], .registry-field input[type="tel"], .registry-field input[type="date"], .registry-field input[type="number"], .registry-field select, .registry-field textarea { width: 100%; padding: 0.5rem 0.1rem; border: none; border-bottom: 1.5px solid var(--muted); border-radius: 0; background: transparent; font-family: inherit; font-size: 1rem; resize: vertical; } .registry-field input:focus, .registry-field select:focus, .registry-field textarea:focus { outline: none; border-bottom-color: var(--accent); } .landlord-stats { margin-top: 2rem; } .notice-financial { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px dashed var(--border); } .pomoc-section-gap { margin-top: 4rem; padding-top: 2.5rem; border-top: 1px solid var(--border); } .registry-radio-row { display: flex; flex-wrap: wrap; gap: 1.25rem; padding-top: 0.3rem; } .registry-radio-row label { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: normal; font-size: 0.95rem; } .registry-statement { background: var(--bg); border: 1px solid var(--border); border-left: 4px solid var(--gold); border-radius: 8px; padding: 1.1rem 1.35rem; margin: 1.5rem 0; } .registry-statement label { display: flex; align-items: flex-start; gap: 0.65rem; font-size: 0.92rem; line-height: 1.55; font-weight: normal; } .registry-statement input[type="checkbox"] { margin-top: 0.2rem; flex-shrink: 0; width: 16px; height: 16px; } .registry-statement strong { color: var(--text-accent-dark); } .registry-signature-row { display: flex; flex-wrap: wrap; gap: 2.5rem; margin-top: 2rem; } .registry-signature-row .registry-field { flex: 1 1 200px; } .registry-privacy-note { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--border); font-size: 0.82rem; color: var(--muted); line-height: 1.6; } .registry-privacy-note svg { width: 14px; height: 14px; vertical-align: -2px; color: var(--text-accent); } @keyframes shield-pulse { 0% { transform: scale(0.6); opacity: 0.4; } 60% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } .registry-privacy-note svg.icon-pulse { animation: shield-pulse 0.5s var(--ease-premium); } @media (prefers-reduced-motion: reduce) { .registry-privacy-note svg.icon-pulse { animation: none; } } /* Kalkulator opterećenja kirijom */ .calc-result { margin-top: 2.25rem; padding-top: 2rem; border-top: 1px solid var(--border); animation: fadeInUp 0.5s var(--ease-premium) both; } @media (prefers-reduced-motion: reduce) { .calc-result { animation: none; } } .calc-percent-row { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1rem; flex-wrap: wrap; } .calc-percent-text { display: flex; flex-direction: column; gap: 0.2rem; } .calc-donut-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; } .calc-donut { transform: rotate(-90deg); } .calc-donut-track { fill: none; stroke: var(--border); stroke-width: 12; } .calc-donut-fill { fill: none; stroke: var(--gold); stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset 0.8s var(--ease-premium), stroke 0.3s ease; } .calc-donut-fill-low { stroke: #4a7c4e; } .calc-donut-fill-mid { stroke: var(--gold); } .calc-donut-fill-high { stroke: var(--accent-2); } .calc-donut-label { transform: rotate(90deg); transform-origin: 50px 50px; font-family: 'Fraunces', Georgia, "Times New Roman", serif; font-size: 1.1rem; font-weight: 700; fill: var(--text-accent-dark); } .calc-donut-caption { font-size: 0.72rem; color: var(--muted); text-align: center; max-width: 110px; margin: 0; } @media (prefers-reduced-motion: reduce) { .calc-donut-fill { transition: none; } } .calc-percent { font-family: 'Fraunces', Georgia, "Times New Roman", serif; font-size: 2.75rem; font-weight: 700; color: var(--text-accent-dark); } .calc-percent-label { color: var(--muted); font-size: 0.95rem; } .calc-bar { position: relative; height: 14px; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; overflow: visible; margin-bottom: 2.25rem; } .calc-bar-fill { height: 100%; width: 0; border-radius: 999px; transition: width 0.6s var(--ease-premium); } .calc-bar-fill-low { background: #4a7c4e; } .calc-bar-fill-mid { background: var(--gold); } .calc-bar-fill-high { background: var(--accent-2); } .calc-bar-avg-marker { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--accent-dark); } .calc-bar-avg-marker span { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 0.4rem; white-space: nowrap; font-size: 0.72rem; color: var(--muted); } .calc-message { font-size: 0.98rem; line-height: 1.6; margin: 0 0 1.5rem; } .calc-eligibility { background: var(--bg); border-radius: 13px; padding: 1.25rem 1.5rem; } .calc-eligibility p { margin: 0 0 1rem; font-size: 0.92rem; line-height: 1.6; } .calc-eligibility p:last-child { margin-bottom: 0; } .calc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 13px; overflow: hidden; margin: 0 0 1.5rem; } .calc-stat-tile { background: var(--card-bg); padding: 1.1rem 1.25rem; display: flex; flex-direction: column; gap: 0.3rem; } .calc-stat-number { font-family: 'Fraunces', Georgia, "Times New Roman", serif; font-size: 1.4rem; font-weight: 700; color: var(--text-accent-dark); } .calc-stat-number.calc-stat-negative { color: var(--accent-2); } .calc-stat-number.calc-stat-positive { color: #4a7c4e; } .calc-stat-label { font-size: 0.78rem; color: var(--muted); line-height: 1.4; } .calc-per-member { font-size: 0.88rem; color: var(--muted); margin: -0.75rem 0 1.5rem; } .calc-subheading { font-size: 1.15rem; color: var(--text-accent-dark); margin: 0 0 0.5rem; } .calc-hypothetical { margin: 0 0 1.75rem; padding: 1.5rem 1.75rem; border: 1.5px dashed var(--gold); border-radius: 13px; background: var(--bg); } .calc-hypothetical .calc-subheading { margin-bottom: 0.6rem; } .calc-hypothetical-intro { font-size: 0.88rem; color: var(--muted); line-height: 1.6; margin: 0 0 1.25rem; } .calc-hypothetical-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 13px; overflow: hidden; margin: 0 0 1.1rem; } .calc-hypothetical-note { font-size: 0.78rem; color: var(--muted); font-style: italic; margin: 0; line-height: 1.5; } .calc-apartments-wrap { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); } .calc-apartments-intro { font-size: 0.9rem; color: var(--muted); margin: 0 0 1.25rem; } .calc-apartments-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.25rem; } .calc-apartments-grid .stan-card-body { padding: 1rem 1.15rem; } .calc-no-apartments { grid-column: 1 / -1; } /* Peticija */ .petition-text { font-size: 1.02rem; line-height: 1.75; margin: 0 0 2rem; } .petition-counter { text-align: center; padding: 1.5rem 1rem; background: var(--bg); border-radius: 13px; margin: 0 0 2rem; } .petition-count { position: relative; display: block; font-family: 'Fraunces', Georgia, "Times New Roman", serif; font-size: 3rem; font-weight: 700; color: var(--text-accent-dark); line-height: 1.1; } /* A brief ring confirms the number actually changed, instead of just quietly snapping to a new value the way it would on plain reload. */ .petition-count.count-pulse::after { content: ""; position: absolute; inset: -10px -18px; border: 2px solid var(--gold); border-radius: 14px; opacity: 1; animation: count-pulse-ring 0.7s var(--ease-premium); pointer-events: none; } @keyframes count-pulse-ring { 0% { opacity: 1; transform: scale(0.92); } 100% { opacity: 0; transform: scale(1.3); } } @media (prefers-reduced-motion: reduce) { .petition-count.count-pulse::after { animation: none; display: none; } } .petition-count-label { font-size: 0.9rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; } .petition-progress { margin: 0 0 2rem; } .petition-progress-bar { background: var(--border); border-radius: 999px; height: 10px; overflow: hidden; } .petition-progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--gold), var(--accent)); border-radius: 999px; transition: width 1s var(--ease-premium); } .petition-progress-label { margin: 0.5rem 0 0; font-size: 0.8rem; color: var(--muted); text-align: center; } .petition-widget-progress-bar { background: var(--border); border-radius: 999px; height: 6px; overflow: hidden; margin: 0.5rem 0 0.75rem; } .petition-widget-progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--gold), var(--accent)); border-radius: 999px; transition: width 1s var(--ease-premium); } .petition-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; margin: 0 0 1.25rem; } .petition-form label { flex: 1 1 100%; font-weight: 700; font-size: 0.9rem; } .petition-form input[type="email"] { flex: 1 1 260px; padding: 0.65rem 0.85rem; border: 1px solid var(--border); border-radius: 6px; background: var(--card-bg); color: var(--text); font-size: 1rem; font-family: inherit; } .petition-form button { flex: 0 0 auto; background: var(--accent); color: #fff; border: none; padding: 0.7rem 1.5rem; border-radius: 6px; font-weight: 700; font-size: 0.95rem; cursor: pointer; transition: background 0.15s var(--ease-premium), transform 0.15s var(--ease-premium); } .petition-form button:hover { background: var(--accent-dark); } .petition-form button:disabled { opacity: 0.6; cursor: default; } .petition-message { background: #eaf4ea; border: 1px solid #a8cba8; color: #2f5c30; border-radius: 8px; padding: 0.85rem 1.1rem; margin: 0 0 1.5rem; font-weight: 600; font-size: 0.92rem; } .petition-message-error { background: #fdecea; border-color: #e3a8a1; color: #8a2e24; } .petition-widget-count { font-family: 'Fraunces', Georgia, "Times New Roman", serif; font-size: 1.6rem; font-weight: 700; color: var(--text-accent-dark); display: block; margin-bottom: 0.15rem; } .registry-submit-row { margin-top: 2rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .registry-submit-row button { background: var(--accent); color: #fff; border: none; padding: 0.7rem 1.75rem; border-radius: 6px; font-size: 0.98rem; font-weight: 700; cursor: pointer; transition: background 0.15s var(--ease-premium); } .registry-submit-row button:hover { background: var(--accent-dark); box-shadow: 0 0 16px rgba(195, 147, 34, 0.4); } #download-certificate { margin-top: 1.5rem; } .registry-print-button { background: none; border: 1px solid var(--accent); color: var(--text-accent); padding: 0.68rem 1.5rem; border-radius: 6px; font-size: 0.95rem; font-weight: 700; cursor: pointer; transition: background 0.15s var(--ease-premium), color 0.15s var(--ease-premium); } .registry-print-button:hover { background: var(--accent); color: #fff; } .registry-print-button svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 0.3rem; } @media (max-width: 600px) { .registry-grid { grid-template-columns: 1fr; } .registry-frame { padding: 1.5rem 1.25rem 1.75rem; } } @media print { .skip-link, .top-bar, .news-ticker, header.site-header, .back-link, footer.site-footer, .floating-call, .back-to-top, .sticky-mobile-cta, .registry-submit-row, .registry-submit-note { display: none !important; } .print-only { display: block; text-align: center; margin-bottom: 1.5rem; } .print-only img { height: 60px; margin-bottom: 0.5rem; } .print-only p { margin: 0; font-weight: 700; font-size: 1.1rem; } body::before { display: none; } main { max-width: 100%; padding: 0; } /* The form has 4 sections' worth of generous on-screen spacing (headings, card padding, statement boxes) that on paper added up to 3 pages for what is, printed, a single dense page of fields. Tighten all of it. */ .section-heading { margin: 0 0 0.25rem; font-size: 1rem; } .section-heading::before { display: none; } .page-intro { font-size: 0.76rem; margin: 0 0 0.35rem; } .registry-frame { border: 1.5px solid #000; box-shadow: none; padding: 0.5rem 0.8rem 0.6rem; } .registry-instructions { padding: 0.3rem 0.5rem; margin: 0 0 0.45rem; font-size: 0.7rem; } .registry-frame h2 { margin: 0.3rem 0 0.1rem; padding-top: 0.15rem; font-size: 0.86rem; } .registry-frame h2:first-child { margin-top: 0; padding-top: 0; border-top: none; } .registry-grid { gap: 0.25rem 1rem; } .registry-field { gap: 0.02rem; } .registry-field label { font-size: 0.7rem; } .registry-field input { border-bottom-color: #000; padding: 0.08rem 0.1rem; font-size: 0.8rem; } .registry-radio-row { gap: 0.75rem; padding-top: 0.05rem; } .registry-radio-row label { font-size: 0.76rem; } .registry-statement { padding: 0.28rem 0.5rem; margin: 0.22rem 0; } .registry-statement label { font-size: 0.7rem; line-height: 1.3; gap: 0.4rem; } .registry-signature-row { gap: 1.25rem; margin-top: 0.3rem; } .registry-privacy-note { margin-top: 0.3rem; padding-top: 0.2rem; font-size: 0.63rem; } .print-only { margin-bottom: 0.4rem; } .print-only img { height: 32px; } .print-only p { font-size: 0.9rem; } } /* Projekti page: one featured project (currently: subsidies) + a grid of the rest, each with a status tag and a link to the full story. */ .project-featured { background: linear-gradient(150deg, var(--accent-2) 0%, var(--accent-2-dark) 100%); border-radius: 15px; padding: 2rem 2.25rem; color: var(--header-text); box-shadow: 0 6px 20px rgba(71, 38, 26, 0.28); margin: 0 0 2.25rem; } .project-featured h2 { margin: 0.6rem 0 0.75rem; color: var(--header-text); font-size: 1.5rem; } .project-featured p { color: rgba(242, 240, 234, 0.92); margin: 0 0 1.25rem; max-width: 60ch; } .project-status { display: inline-block; background: var(--card-bg); color: var(--text-accent-dark); border: 1px solid var(--border); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.3rem 0.75rem; border-radius: 999px; } .project-status-featured { background: var(--gold); color: var(--accent-2-dark); border: none; } .project-grid { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; } .project-card { flex: 1 1 300px; max-width: 380px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 13px; padding: 1.5rem 1.65rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 20px rgba(0, 0, 0, 0.07); transition: transform 0.2s var(--ease-premium), box-shadow 0.2s var(--ease-premium); } .project-card:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); } .project-card h3 { margin: 0.75rem 0 0.5rem; font-size: 1.1rem; } .project-card p { font-size: 0.92rem; color: var(--text); margin: 0 0 0.9rem; } @media (max-width: 600px) { .page-intro { margin-bottom: 1.1rem; } .project-featured { padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; } .project-featured h2 { font-size: 1.2rem; margin: 0.5rem 0 0.6rem; } .project-featured p { font-size: 0.9rem; margin-bottom: 1rem; } } /* Site search: a small icon button in the header (deliberately kept out of the nav bar below it) that opens a lightweight overlay backed by a build-time JSON index (see search-index.njk) searched entirely client-side — no backend needed for a ~40-page site. */ .search-toggle, .theme-toggle { position: relative; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--gold); background: none; color: var(--header-text); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s var(--ease-premium), transform 0.15s var(--ease-premium); } .search-toggle:hover, .theme-toggle:hover { background: rgba(255, 255, 255, 0.1); transform: scale(1.06); } .search-toggle svg, .theme-toggle svg { width: 18px; height: 18px; } /* Sun/moon morph: both icons stay mounted and overlap in the same spot, crossfading with a quarter-turn rotation instead of an instant swap. */ .theme-toggle svg { position: absolute; top: 50%; left: 50%; transition: opacity 0.35s var(--ease-premium), transform 0.45s var(--ease-premium); } .theme-toggle .icon-sun { opacity: 1; transform: translate(-50%, -50%) rotate(0deg) scale(1); } .theme-toggle .icon-moon { opacity: 0; transform: translate(-50%, -50%) rotate(-90deg) scale(0.4); } :root[data-theme="dark"] .theme-toggle .icon-sun { opacity: 0; transform: translate(-50%, -50%) rotate(90deg) scale(0.4); } :root[data-theme="dark"] .theme-toggle .icon-moon { opacity: 1; transform: translate(-50%, -50%) rotate(0deg) scale(1); } @media (prefers-reduced-motion: reduce) { .theme-toggle svg { transition: opacity 0.01s linear, transform 0.01s linear; } } @media (max-width: 760px) { .search-toggle, .theme-toggle { width: 34px; height: 34px; } .search-toggle svg, .theme-toggle svg { width: 15px; height: 15px; } } .search-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: flex-start; justify-content: center; padding: 4.5rem 1.25rem 1.25rem; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s var(--ease-premium), visibility 0s linear 0.3s; } .search-modal.open { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; } .search-modal-backdrop { position: absolute; inset: 0; background: rgba(28, 15, 10, 0.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .search-modal-box { position: relative; width: 100%; max-width: 560px; max-height: calc(100vh - 6rem); display: flex; flex-direction: column; background: var(--card-bg); border-radius: 16px; padding: 1.35rem; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); transform: translateY(-16px) scale(0.96); transition: transform 0.3s var(--ease-premium); } .search-modal.open .search-modal-box { transform: translateY(0) scale(1); } .search-modal-close { position: absolute; top: 0.6rem; right: 0.7rem; width: 32px; height: 32px; border-radius: 50%; border: none; background: none; color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s var(--ease-premium); } .search-modal-close:hover { background: var(--bg); } .search-modal-close svg { width: 18px; height: 18px; } .search-modal-input-wrap { display: flex; align-items: center; gap: 0.6rem; border: 2px solid var(--border); border-radius: 999px; padding: 0.55rem 1.1rem; margin-top: 1.75rem; margin-bottom: 1rem; flex-shrink: 0; } .search-modal-input-wrap:focus-within { border-color: var(--accent); } .search-modal-input-wrap svg { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; } .search-modal-input-wrap input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: inherit; font-size: 1rem; color: var(--text); } .search-results { list-style: none; margin: 0; padding: 0; overflow-y: auto; } .search-results li + li { margin-top: 0.5rem; } .search-results a { display: block; padding: 0.7rem 0.9rem; border: 1px solid var(--border); border-radius: 10px; color: inherit; } .search-results a:hover, .search-results a:focus-visible { border-color: var(--accent); background: var(--bg); } .search-result-title { display: block; font-family: 'Fraunces', Georgia, "Times New Roman", serif; font-weight: 700; color: var(--text-accent-dark); margin-bottom: 0.2rem; } .search-result-excerpt { display: block; font-size: 0.85rem; line-height: 1.4; color: var(--muted); } .search-results mark { background: rgba(195, 147, 34, 0.35); color: inherit; border-radius: 2px; } .search-empty, .search-hint { padding: 0.5rem 0.25rem; font-size: 0.88rem; color: var(--muted); text-align: center; } @media (max-width: 600px) { .search-modal { padding: 4.5rem 0.75rem 0.75rem; } }