/* ============================================ LEGAL PAGES (Privacy / Terms / Cookies) Clean, readable, calm — minimal chrome. ============================================ */ :root { --legal-stone-50: #FAFAF9; --legal-stone-100: #F5F5F4; --legal-stone-200: #E7E5E4; --legal-stone-300: #D6D3D1; --legal-stone-500: #78716C; --legal-stone-600: #57534E; --legal-stone-700: #44403C; --legal-stone-800: #292524; --legal-stone-900: #1C1917; --legal-brand-red: #B91C1C; --legal-brand-red-dark: #991B1B; --legal-accent-green: #16A34A; } /* Use Inter/DM Sans if available; fall back gracefully. */ .legal-page { background: var(--legal-stone-50); /* Sticky-footer fix: global style.css makes a flex column with height:100%. Without flex-grow on this main, the footer would be crushed by flex-shrink and main's content (overflow: visible) would paint over the collapsed footer area, causing the overlap reported on long legal pages. We grow main into the available space and lock it against shrinking; the footer keeps its own size below. */ flex: 1 0 auto; min-height: 100vh; padding-top: 96px; padding-bottom: 80px; font-family: 'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--legal-stone-800); line-height: 1.7; } /* Make sure the shared footer never gets crushed when it appears after a legal page. Same pattern is used in restaurant-v2.css / profil.css / partner.css. Sibling selector keeps the rule scoped to legal pages so we don't influence other layouts. */ main.legal-page ~ footer.site-footer, main.legal-page + footer.site-footer { flex-shrink: 0; } .legal-container { max-width: 760px; margin: 0 auto; padding: 0 24px; } /* Hero — stays small and quiet, focused on the document name. */ .legal-hero { margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--legal-stone-200); } .legal-eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--legal-brand-red); margin-bottom: 8px; } .legal-title { font-size: 2.25rem; font-weight: 700; color: var(--legal-stone-900); margin: 0 0 12px; letter-spacing: -0.01em; line-height: 1.15; } .legal-meta { font-size: 0.875rem; color: var(--legal-stone-500); } /* "Vaši podaci nisu na prodaju" trust card (privacy + cookies pages). */ .legal-trust-card { background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%); border: 1px solid #A7F3D0; border-radius: 16px; padding: 20px 24px; margin: 32px 0; display: flex; gap: 16px; align-items: flex-start; } .legal-trust-icon { width: 40px; height: 40px; flex-shrink: 0; background: var(--legal-accent-green); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.25rem; } .legal-trust-text { flex: 1; } .legal-trust-title { font-size: 1rem; font-weight: 700; color: #064E3B; margin: 0 0 6px; } .legal-trust-desc { font-size: 0.9rem; color: #065F46; margin: 0; line-height: 1.55; } /* Article body */ .legal-article { background: white; border-radius: 16px; padding: 32px 36px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 4px 12px rgba(0, 0, 0, 0.02); border: 1px solid var(--legal-stone-200); } .legal-article h2 { font-size: 1.25rem; font-weight: 700; color: var(--legal-stone-900); margin: 32px 0 12px; padding-top: 16px; border-top: 1px solid var(--legal-stone-100); letter-spacing: -0.005em; } .legal-article h2:first-child { margin-top: 0; padding-top: 0; border-top: none; } .legal-article h3 { font-size: 1rem; font-weight: 600; color: var(--legal-stone-800); margin: 24px 0 8px; } .legal-article p { margin: 0 0 14px; color: var(--legal-stone-700); font-size: 0.975rem; } .legal-article ul, .legal-article ol { padding-left: 22px; margin: 0 0 16px; } .legal-article li { margin-bottom: 8px; color: var(--legal-stone-700); font-size: 0.975rem; } .legal-article a { color: var(--legal-brand-red); text-decoration: underline; text-underline-offset: 2px; } .legal-article a:hover { color: var(--legal-brand-red-dark); } .legal-article strong { color: var(--legal-stone-900); font-weight: 600; } /* Definition rows (controller, contact, supervisory authority) */ .legal-definition { background: var(--legal-stone-50); border-left: 3px solid var(--legal-brand-red); border-radius: 4px; padding: 14px 18px; margin: 16px 0; } .legal-definition strong { display: block; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--legal-stone-600); margin-bottom: 4px; } /* Tables (used in Cookie Policy for cookie inventory). */ .legal-table-wrap { overflow-x: auto; margin: 16px 0 24px; border: 1px solid var(--legal-stone-200); border-radius: 12px; } .legal-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .legal-table th, .legal-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--legal-stone-100); vertical-align: top; } .legal-table th { background: var(--legal-stone-50); font-weight: 600; color: var(--legal-stone-700); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; } .legal-table tbody tr:last-child td { border-bottom: none; } .legal-table code { background: var(--legal-stone-100); padding: 2px 6px; border-radius: 4px; font-size: 0.85em; color: var(--legal-stone-800); } /* Pill / category badge */ .legal-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; } .legal-pill.necessary { background: #FEE2E2; color: #991B1B; } .legal-pill.functional { background: #DBEAFE; color: #1E40AF; } /* Quick "rights" cards on Privacy Policy. */ .legal-rights-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 16px 0 24px; } .legal-right-card { border: 1px solid var(--legal-stone-200); border-radius: 12px; padding: 16px; background: var(--legal-stone-50); } .legal-right-card-title { font-size: 0.95rem; font-weight: 700; color: var(--legal-stone-900); margin-bottom: 4px; } .legal-right-card-desc { font-size: 0.85rem; color: var(--legal-stone-600); line-height: 1.5; margin: 0; } /* Cross-link nav at bottom */ .legal-related { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--legal-stone-200); } .legal-related a { flex: 1; min-width: 200px; background: white; border: 1px solid var(--legal-stone-200); border-radius: 12px; padding: 14px 18px; text-decoration: none; color: var(--legal-stone-800); font-weight: 600; transition: all 0.15s ease; display: flex; align-items: center; justify-content: space-between; } .legal-related a:hover { border-color: var(--legal-brand-red); color: var(--legal-brand-red); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(185, 28, 28, 0.08); } .legal-related a span:last-child { color: var(--legal-stone-400); font-weight: 400; } /* Mobile */ @media (max-width: 600px) { .legal-page { padding-top: 80px; padding-bottom: 56px; } .legal-container { padding: 0 16px; } .legal-title { font-size: 1.75rem; } .legal-article { padding: 24px 20px; border-radius: 12px; } .legal-article h2 { font-size: 1.1rem; } .legal-trust-card { padding: 16px 18px; flex-direction: column; gap: 10px; } }