/* v2026-05-21a */ /* Font Awesome font-display: swap */ @font-face { font-family: 'Font Awesome 6 Free'; font-display: swap; } @font-face { font-family: 'Font Awesome 6 Brands'; font-display: swap; } @font-face { font-family: 'Font Awesome 5 Free'; font-display: swap; } @font-face { font-family: 'Font Awesome 5 Brands'; font-display: swap; } /* Category Blog: Card Layout */ .com-content-category-blog { max-width:1100px; margin:0 auto; padding:20px 0; } .com-content-category-blog .page-header h1, .com-content-category-blog .page-header h2 { text-align:center; margin-bottom:30px; font-size:28px; font-weight:700; color:#1a3c5e; } .com-content-category-blog .blog-items { display:grid !important; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:24px; margin-bottom:30px; } .com-content-category-blog .blog-item { background:#fff; border-radius:12px; box-shadow:0 2px 12px rgba(0,0,0,.08); padding:24px; overflow:hidden; transition:transform .2s,box-shadow .2s; display:flex; flex-direction:column; } .com-content-category-blog .blog-item:hover { transform:translateY(-3px); box-shadow:0 6px 24px rgba(0,0,0,.12); } .com-content-category-blog .blog-item h2, .com-content-category-blog .blog-item h3 { font-size:17px; font-weight:700; line-height:1.35; margin:0 0 12px; color:#1a3c5e; } .com-content-category-blog .blog-item h2 a, .com-content-category-blog .blog-item h3 a { color:#1a3c5e; text-decoration:none; transition:color .2s; } .com-content-category-blog .blog-item h2 a:hover, .com-content-category-blog .blog-item h3 a:hover { color:#2980b9; } .com-content-category-blog .blog-item .item-content p { font-size:14px; line-height:1.6; color:#555; margin-bottom:12px; } .com-content-category-blog .blog-item .readmore a { display:inline-block; margin-top:auto; color:#2980b9; font-weight:600; font-size:13px; text-decoration:none; } .com-content-category-blog .blog-item .readmore a:hover { color:#1a3c5e; } .com-content-category-blog .items-more { margin-bottom:30px; } .com-content-category-blog .com-content-blog__links { list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:12px; } .com-content-category-blog .com-content-blog__link { background:#fff; border-radius:8px; box-shadow:0 1px 6px rgba(0,0,0,.06); transition:transform .2s,box-shadow .2s; } .com-content-category-blog .com-content-blog__link:hover { transform:translateY(-2px); box-shadow:0 4px 16px rgba(0,0,0,.1); } .com-content-category-blog .com-content-blog__link a { display:block; padding:16px 20px; color:#1a3c5e; text-decoration:none; font-weight:600; font-size:15px; } .com-content-category-blog .com-content-blog__link a:hover { color:#2980b9; } /* [CUST-01] rationale: ASSET-COMMENT-DECISIONS.md */ .com-content-blog__link, .com-content-blog__link *, li.com-content-blog__link { color:#1a3c5e !important; } /* ID-scoped variant: Helix's `#sp-main-body .sp-page-builder h3{color:#fff!important}` (ID specificity) beat the class rule above, leaving card titles white-on-white. Match the ID level so dark text wins. */ #sp-main-body .com-content-blog__link, #sp-main-body .com-content-blog__link *, #sp-main-body li.com-content-blog__link { color:#1a3c5e !important; } .com-content-blog__link a:hover, .com-content-blog__link a:hover * { color:#2980b9 !important; } .dv-warning a, .dv-callout a, .dv-tip a, [style*="fff6e0"] a, [style*="FFF6E0"] a, [style*="246, 224"] a, [style*="246,224"] a { color:#1956a3 !important; } /* Green CTA bands in article content set color:#fff inline, but a Helix `a{color:#2563eb!important}` overrode it -> blue-on-green (1.24:1). Re-assert white, scoped to links that carry the green band bg inline so other "join panel" links on light backgrounds are untouched. (2026-06-14) */ a[style*="2d6a4f"], a[style*="2D6A4F"] { color:#fff !important; } .com-content-category-blog .pagination { justify-content:center; margin-top:20px; } .com-content-category-blog .page-link { color:#1a3c5e; border-radius:6px; margin:0 3px; border-color:#e1e8ed; } .com-content-category-blog .page-item.active .page-link { background:#1a3c5e; border-color:#1a3c5e; } .com-content-category-blog__counter { text-align:center; color:#7f8c8d; font-size:13px; margin-bottom:10px; } @media (max-width:767px) { .com-content-category-blog .blog-items, .com-content-category-blog .com-content-blog__links { grid-template-columns:1fr; } } /* Fix: no-link parent menu items render as , not . */ #sp-header .sp-megamenu-parent > li > span { color: rgba(255, 255, 255, 0.9) !important; cursor: default; } #sp-header .sp-megamenu-parent > li > span:hover { color: #ffffff !important; } #sp-header .sp-megamenu-parent > li.active > span, #sp-header .sp-megamenu-parent > li.sp-current-item > span { color: #ffffff !important; } /* [CUST-02] rationale: ASSET-COMMENT-DECISIONS.md */ /* Fix: Navigation links - ensure sufficient contrast */ #sp-header a, #sp-menu a, #sp-top-bar a, .navbar a { color: #FFFFFF !important; text-decoration: none; } #sp-header a:hover, #sp-menu a:hover, #sp-top-bar a:hover, .navbar a:hover { color: #F0F4F8 !important; } /* Menu items */ .sp-megamenu a { color: #FFFFFF !important; } .sp-megamenu a:hover, .sp-megamenu a:focus { color: #F0F4F8 !important; } /* Ensure nav items are light enough on dark backgrounds */ #sp-header .navbar-nav .nav-link { color: #FFFFFF !important; } #sp-header .navbar-nav .nav-link:hover, #sp-header .navbar-nav .nav-link:active { color: #F0F4F8 !important; } /* Off-canvas menu */ .offcanvas a { color: #1F3A5F !important; } .offcanvas a:hover { color: #1E5BB8 !important; } /* End of navigation contrast fixes */ /* ============================================ ESTATE AGENT ARTICLES - READABILITY FIXES ============================================ */ /* Fix: h4 headings invisible (no rule existed - white on white) */ .article-details [itemprop="articleBody"] h4 { font-size: 1.05rem; font-weight: 600; color: #1F3A5F; margin-top: 20px; margin-bottom: 8px; } /* Fix: td inherits white text from template body */ .article-details [itemprop="articleBody"] td { color: #333 !important; } /* Fix: "Read article" was a CSS pseudo-element, not a real link. Make the title link overlay the whole card so the full card is clickable. */ .com-content-category-blog .article-list .article { position: relative !important; } .com-content-category-blog .article-list .article h2 a::after { content: ''; position: absolute; inset: 0; z-index: 1; } /* ===================================================== DROPDOWN MENU WHITE BACKGROUND FIX (2026-04-15) Overwrites dark Helix dropdown bg with white + dark text ===================================================== */ .sp-megamenu-parent .sp-dropdown { border-radius: 10px !important; box-shadow: 0 8px 32px rgba(31, 58, 95, 0.14) !important; border: 1px solid rgba(226, 230, 234, 0.6) !important; animation: dvDropIn 0.2s ease-out; overflow: hidden; background: #ffffff !important; } @keyframes dvDropIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* #sp-header ID needed to beat Helix compiled CSS that forces all header links white */ #sp-header .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a { transition: padding 0.2s ease, background 0.2s ease !important; color: #252525 !important; } #sp-header .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover { background: rgba(47, 111, 204, 0.06) !important; padding-left: 20px !important; color: #1F3A5F !important; } /* Fix: .sp-dropdown-inner has dark bg from Helix compiled CSS */ .sp-megamenu-parent .sp-dropdown .sp-dropdown-inner { background: #ffffff !important; } /* ===================================================== COMPONENT COLUMN BACKGROUND FIX (2026-04-16) Helix wraps component output in .sp-column with white bg, blocking #sp-main-body dark navy from reaching content. ===================================================== */ #sp-main-body #sp-component > .sp-column { background-color: transparent !important; } /* ===================================================== CONTRAST FIXES - Site-wide (2026-04-17) Loaded everywhere via Helix custom.css. For component-only fixes see com_domovita/assets/css/domovita.css. ===================================================== */ /* SPPB animated heading on /home was dark grey on dark navy (1.52:1). Force white for all child text spans of the animated heading. */ .sppb-addon-title.animated-heading-text, .sppb-addon-title.animated-heading-text *, .text-animation-flip > * { color: #ffffff !important; } /* SPPB section headings on dark sections (commonly dark text - invisible). Only applies to sections WITHOUT an explicit dark/light bg class. */ #sp-page-builder .sppb-section:not([class*="sppb-section-bg"]) .sppb-addon-title { color: #ffffff; } /* Generic fallback: any h1-h3 sitting directly on the dark #sp-main-body without an intervening white container should be readable. */ #sp-main-body > .sppb-section-content h1, #sp-main-body > .sppb-section-content h2 { color: #ffffff; } /* UX-N02: append "Domovita" wordmark next to the header logo icon. The Helix template only outputs an with no brand text; first-time visitors don't always recognise the icon. Using ::after pseudo-element on the logo link avoids touching the Helix template. */ .logo a { display: inline-flex !important; align-items: center; gap: 0.5rem; text-decoration: none; } .logo a::after { content: "Domovita"; color: #ffffff; font-family: 'Inter', system-ui, -apple-system, sans-serif; font-weight: 700; font-size: 1.25rem; letter-spacing: -0.01em; line-height: 1; white-space: nowrap; } /* Hide on very narrow viewports so we don't crowd the mobile header */ @media (max-width: 420px) { .logo a::after { display: none; } } /* ========================================================== EDITORIAL TYPOGRAPHY (site-wide, Session 115 - 2026-04-22) ----------------------------------------------------------- Georgia serif for display headings, system sans for body, mono for metadata. Applies to ALL pages the Helix template renders (articles, SPPB pages, template chrome). com_domovita views already get this via domovita.css; this sheet covers everything else for visual consistency across the site. Colour tokens intentionally NOT touched - the existing palette already passes contrast in its current contexts. ========================================================== */ :root { --dv-serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "URW Palladio L", P052, serif; --dv-sans-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --dv-mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, "Courier New", monospace; } /* Body text on system sans - instant render, no network cost. */ body { font-family: var(--dv-sans-system); } /* Display headings in Georgia. body-prefix gives us specificity 11 so we beat Helix's own h1/h2/h3 rules without needing !important. SPPB title classes are covered too. */ body h1, body h2, body h3, body .sppb-addon-title, body .sppb-section-title { font-family: var(--dv-serif); font-weight: 400; letter-spacing: -0.01em; } /* Italic accent inside a display heading - pair with em in markup. */ body h1 em, body h2 em, body h3 em, body .sppb-addon-title em { font-style: italic; font-weight: 400; } /* Smaller headings stay on sans for density / legibility. */ body h4, body h5, body h6 { font-weight: 600; letter-spacing: 0; } /* Mono for code blocks + any opt-in data tokens. */ body code, body pre, body .dv-mono { font-family: var(--dv-mono); font-variant-numeric: tabular-nums; } /* ===================================================== COOKIE TRIGGER - HIDE ON MOBILE (2026-05-21) The n3t Cookie Consent plugin places a persistent cookie icon at bottom-left after consent. On phones it covers content and interferes with bottom-edge gestures. Upstream library (orestbida) hides it below 768px by default; we restore that behaviour. The initial consent banner remains visible on mobile; users can still revoke consent via the privacy policy page link. ===================================================== */ @media (max-width: 767px) { .cc-trigger { display: none !important; } }