/* ========================================================================== RONITA DESIGN SYSTEM — "Calm & Confident" ========================================================================== Foundation: composed stack per Aug 2026 research — • Engine: fluid typography (clamp) + major-third (1.25) modular scale • Rulebook: USWDS readability contract (body >= 16px, 1.5-1.75 lh, 45-90ch measure, >=1.5x space above headings than below) • Voice: editorial serif display + humanist sans body Fonts: Source Serif 4 (headings) + Source Sans 3 (body) — one design language (Adobe Source family), warm humanist, professional-not-corporate. Replaces Open Sans/Roboto. ACTIVATION: a page opts in by adding the `ds-applied` class to (or ). All rules below are scoped to `.ds-applied` so the system is inert until a page is converted — enabling page-by-page rollout. TOKENS: all sizes are px-based clamp() so they are independent of the theme's 16->20px root font-size jump. Rollout target: body 17-18px. Live on: /centurion/ + /middelburg/ (experiment, Aug 2026) ========================================================================== */ /* ---------- Self-hosted fonts (latin + latin-ext subsets) ---------- */ @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/fonts/sourceserif4-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/fonts/sourceserif4-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/fonts/sourcesans3-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/fonts/sourcesans3-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---------- Tokens ---------- */ .ds-applied { /* Type scale (px, fluid 360px -> 1240px, major third 1.25) */ --ds-display: clamp(40px, 40px + 2.27vw, 68px); --ds-h1: clamp(30px, 30px + 1.13vw, 44px); --ds-h2: clamp(24px, 24px + 0.90vw, 34px); --ds-h3: clamp(20px, 20px + 0.56vw, 28px); --ds-h4: clamp(18px, 18px + 0.45vw, 24px); --ds-lead: clamp(17px, 17px + 0.28vw, 20px); --ds-body: clamp(17px, 17px + 0.11vw, 18px); --ds-caption: clamp(14px, 14px + 0.07vw, 15px); --ds-eyebrow: 13px; /* Line heights (unitless) */ --ds-lh-display: 1.08; --ds-lh-h1: 1.15; --ds-lh-h2: 1.25; --ds-lh-h3: 1.3; --ds-lh-body: 1.65; --ds-lh-lead: 1.6; --ds-lh-caption: 1.5; /* Letter spacing */ --ds-ls-eyebrow: 0.08em; /* Color tokens — "Modern Minimalist" (Theme Factory skill, Aug 2026). Applied from the skill's theme specs: Charcoal #36454f, Slate #708090, Light Gray #d3d3d3, White #ffffff (fonts kept: Source Serif 4 / Source Sans 3). Temporary A/B against "Warm Stone" (warm charcoal-brown) — user comparing on phone. Raw slate fails AA (4.05:1 white) — darkened for text. Warm-neutral surfaces keep the page from feeling clinical. */ --ds-ink: #36454F; /* body text, theme charcoal (9.4:1 on paper) */ --ds-heading: #2F3A44; /* headings, charcoal deepened (11.0:1) */ --ds-muted: #576370; /* secondary text, slate darkened (5.8:1 paper, 5.2:1 layer) */ --ds-green: #36454F; /* primary, theme charcoal (9.9:1 white) */ --ds-link: #445360; /* text links on light surfaces (7.5:1 on paper) */ --ds-green-dark: #2A3540; /* hover/active (12.5:1) */ --ds-green-deep: #36454F; /* chip text on light gray wash (8.0:1) */ --ds-mint: #D3D3D3; /* theme light gray, decorative only, never content text */ --ds-paper: #FAF9F7; /* page canvas, warm off-white */ --ds-surface: #FFFFFF; /* raised cards on paper */ --ds-layer: #EFEDE9; /* section bands, warm light gray */ --ds-tint: #EAE7E2; /* light gray wash for chips / subtle fills */ --ds-border: #E0DDD8; /* hairline border */ --ds-shadow: 0 4px 24px rgba(54, 69, 79, 0.08); /* Radius & depth (8-12px reads current, not the 4px "Bootstrap 4" look) */ --ds-radius-sm: 8px; --ds-radius-md: 12px; /* Spacing (4px base) */ --ds-space-1: 4px; --ds-space-2: 8px; --ds-space-3: 12px; --ds-space-4: 16px; --ds-space-5: 24px; --ds-space-6: 32px; --ds-space-7: 48px; --ds-space-8: 64px; /* Measure (line length) */ --ds-measure: 65ch; } /* ---------- Base type ---------- */ .ds-applied { font-family: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: var(--ds-ink); font-size: var(--ds-body); line-height: var(--ds-lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; background-color: var(--ds-paper); } /* Override custom.css's legacy light-gray article background (!important). The article itself carries .ds-applied, so match article.ds-applied. */ .ds-applied.article, article.ds-applied, .ds-applied.article .article-container, article.ds-applied .article-container { background-color: var(--ds-paper) !important; } /* ---------- Headings ---------- */ .ds-applied h1, .ds-applied h2, .ds-applied h3, .ds-applied h4, .ds-applied .ds-heading { font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif; color: var(--ds-heading); font-weight: 600; text-rendering: optimizeLegibility; } .ds-applied h1 { font-size: var(--ds-h1); line-height: var(--ds-lh-h1); margin: 0 0 0.5em; } .ds-applied h2 { font-size: var(--ds-h2); line-height: var(--ds-lh-h2); margin: 1.5em 0 0.75em; } .ds-applied h3 { font-size: var(--ds-h3); line-height: var(--ds-lh-h3); margin: 1.5em 0 0.6em; } .ds-applied h4 { font-size: var(--ds-h4); line-height: var(--ds-lh-h3); margin: 1.25em 0 0.5em; } /* USWDS heading rule: >= 1.5x space above a heading vs below. h2/h3 margins above already do this (1.5em/1.25em above vs 0.75em/0.6em below). */ /* ---------- Body / prose ---------- */ .ds-applied p { margin: 0 0 1.25em; line-height: var(--ds-lh-body); } .ds-applied .ds-lead { font-size: var(--ds-lead); line-height: var(--ds-lh-lead); color: var(--ds-ink); } /* Measure — cap prose line length on wide screens */ .ds-applied .ds-prose, .ds-applied .article-style, .ds-applied .ds-measure { max-width: var(--ds-measure); } /* ---------- Eyebrow labels (uppercase, small, tracked, muted) ---------- */ .ds-applied .ds-eyebrow { font-family: 'Source Sans 3', sans-serif; font-size: var(--ds-eyebrow); font-weight: 600; text-transform: uppercase; letter-spacing: var(--ds-ls-eyebrow); color: var(--ds-muted); margin-bottom: var(--ds-space-3); } /* ---------- Links ---------- */ .ds-applied a { color: var(--ds-link); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; } .ds-applied a:hover { color: var(--ds-green-dark); } /* ---------- Buttons (green accent, 44px+ touch targets, 12px radius) ---------- */ .ds-applied .btn { font-family: 'Source Sans 3', sans-serif; font-size: 17px; font-weight: 600; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: var(--ds-radius-md) !important; /* theme forces 0 !important */ text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease; } .ds-applied .btn:active { transform: scale(0.98); } .ds-applied .btn-primary { background-color: var(--ds-green); border-color: var(--ds-green); color: #fff !important; } .ds-applied .btn-primary:hover { background-color: var(--ds-green-dark); border-color: var(--ds-green-dark); color: #fff !important; } /* Solid buttons: white text, never inherit the green link color */ .ds-applied .btn-primary, .ds-applied .btn-success, .ds-applied .btn-dark, .ds-applied .btn-danger, .ds-applied .btn-info { color: #fff !important; } /* Outline buttons: link-green text on paper */ .ds-applied .btn-outline-primary { color: var(--ds-link) !important; border-color: var(--ds-green); background: transparent; } .ds-applied .btn-outline-primary:hover { background-color: var(--ds-green); color: #fff !important; } /* ---------- Captions / small ---------- */ .ds-applied .ds-caption, .ds-applied figcaption, .ds-applied small { font-size: var(--ds-caption); line-height: var(--ds-lh-caption); color: var(--ds-muted); } /* ---------- Cards / surfaces ---------- */ .ds-applied .ds-card { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); padding: var(--ds-space-5); box-shadow: var(--ds-shadow); } /* ---------- Contact form (flat, token-styled, no green chips) ---------- */ .ds-applied .contact-form-wrapper { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); } .ds-applied .contact-form { border-radius: var(--ds-radius-md); box-shadow: none !important; } .ds-applied .contact-form label { font-weight: 600; font-size: 14px; color: var(--ds-heading); } /* Icon chips: kill the theme's green .bg-primary box — icon floats bare */ .ds-applied .contact-form .input-group-text { background: none !important; border: 0; color: var(--ds-muted) !important; /* beats Bootstrap .text-white !important */ padding: 0 12px 0 0; } .ds-applied .contact-form .form-control { border: 1px solid var(--ds-border); border-radius: 8px !important; background: var(--ds-surface); color: var(--ds-ink); font-size: 16px; padding: 12px 14px; height: auto; } .ds-applied .contact-form .form-control:focus { border-color: var(--ds-green); box-shadow: 0 0 0 3px var(--ds-tint); } /* Feedback UI: spinner + success checkmark in token colors, not mint */ .ds-applied .contact-form .spinner > div { background-color: var(--ds-green); } .ds-applied .success-checkmark .check-icon { border-color: var(--ds-green); } .ds-applied .success-checkmark .check-icon .icon-line { background-color: var(--ds-green); } .ds-applied .contact-form .text-success { color: var(--ds-green) !important; } .ds-applied .contact-form .text-primary { color: var(--ds-green) !important; } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .ds-applied * { transition: none !important; animation: none !important; } } /* ---------- Mobile refinement ---------- */ @media (max-width: 768px) { .ds-applied h2 { margin-top: 1.25em; } .ds-applied .btn { min-height: 50px; } } /* ========================================================================== SITE-WIDE ROLLOUT — legacy pages (services, blog, posts, legal, etc.) Activation: .ds-applied now lives on (baseof.html), so every page inherits the design system. This layer re-skins the theme's page chrome (page header, breadcrumb, meta), the article body, and the service/blog partial components with the DS tokens — consistent with the homepage and location landings. ========================================================================== */ /* ---------- Chrome exclusions (navbar / footer / search) ---------- */ .ds-applied .navbar a, .ds-applied .site-footer a, .ds-applied .search-results a { text-decoration: none; font-weight: inherit; } /* ---------- Page shell (services, blog posts, privacy, blog list) ---------- */ .ds-page-header { padding: 56px 0 28px; border-bottom: 1px solid var(--ds-border); } .ds-page-header-inner { max-width: 920px; margin-inline: auto; padding-inline: 24px; } /* Body column: match the 920px header measure so prose stays aligned with the title/intro instead of stretching to Bootstrap's 1200px (.article-container) or the theme's 1000px (.universal-wrapper). */ .ds-page-body { max-width: 920px; margin-inline: auto; padding-inline: 24px; padding-bottom: 88px; } /* Lead + meta under a hero-band header (pages with featured image): sit in the same 920px column as the body below them. */ .sl-container.sl-hero-lead { max-width: 920px; margin-inline: auto; padding-top: 40px; padding-bottom: 48px; text-align: center; } .sl-hero-lead .ds-lead { max-width: 65ch; margin-inline: auto; margin-bottom: 16px; } .sl-hero-lead .ds-page-meta .article-metadata { justify-content: center; } .ds-page-title { margin: 0 0 16px; } .ds-page-lead { max-width: 65ch; margin: 0 0 24px; } .ds-page-meta .article-metadata { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; color: var(--ds-muted); font-size: 14.5px; } .ds-page-meta .middot-divider { display: none; } .ds-page-meta .share-box { background: none !important; } .ds-page-meta .network-icon { background: none !important; padding: 0 !important; margin: 0 !important; gap: 14px !important; } .ds-page-meta .network-icon a { color: var(--ds-link); text-decoration: none; } /* ---------- Byline + contact row (post_meta.html) ---------- */ .ds-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; color: var(--ds-muted); font-size: 14.5px; } .ds-meta a { color: var(--ds-link); text-decoration: none; } .ds-meta a:hover { color: var(--ds-green-deep); } .ds-meta-sep { color: var(--ds-border); } .ds-meta-contact { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; } .ds-meta-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border: 1px solid var(--ds-border); border-radius: 999px; background: none; color: var(--ds-green-deep); font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: none; transition: border-color 0.15s ease, background-color 0.15s ease; } .ds-meta-btn:hover { border-color: var(--ds-green-deep); background: var(--ds-tint); color: var(--ds-green-deep); text-decoration: none; } /* Breadcrumb: hairline, quiet */ .ds-breadcrumb { margin: 0 0 28px; } .ds-breadcrumb ol { list-style: none; display: flex; flex-wrap: nowrap; align-items: baseline; min-width: 0; margin: 0; padding: 0; } .ds-breadcrumb li { font-size: 13.5px; color: var(--ds-muted); white-space: nowrap; } /* Current-page crumb truncates with ellipsis instead of wrapping */ .ds-breadcrumb li:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .ds-breadcrumb li + li::before { content: "/"; color: var(--ds-border); margin: 0 8px; } .ds-breadcrumb a { color: var(--ds-muted); text-decoration: none; } /* ---------- Hero band (shared: service pages + blog posts with featured image) ---------- Identical to the rules in service_landing.html's inline style block; kept here so blog posts (which don't render that partial) get the same hero treatment. */ .sl-band { padding: 96px 0; } .sl-band-light { background: var(--ds-layer); border-top: 1px solid var(--ds-border); } .sl-container { max-width: 1160px; margin-inline: auto; padding-inline: 24px; } .sl-hero { padding: 40px 0 0; border-bottom: 1px solid var(--ds-border); } .sl-hero-top .ds-breadcrumb { margin: 0; } .sl-eyebrow { font-family: 'Source Sans 3', sans-serif; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ds-ink); margin: 0 0 16px; } .sl-hero-media { position: relative; margin-top: 32px; min-height: 440px; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; background: var(--ds-layer); } .sl-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .sl-hero-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(36, 32, 28, 0.30) 0%, rgba(36, 32, 28, 0.55) 100%); } .sl-hero-media-inner { position: relative; z-index: 1; max-width: 860px; margin-inline: auto; padding: 48px 24px; } .sl-hero-title { font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif; font-size: var(--ds-h1); line-height: 1.15; letter-spacing: -0.02em; font-weight: 600; color: var(--ds-heading); margin: 0; } .sl-hero-media .sl-eyebrow-light { color: rgba(255, 255, 255, 0.88); margin-bottom: 14px; } .sl-hero-media .sl-hero-title-light { color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); } @media (max-width: 768px) { .sl-hero { padding: 28px 0 0; } .sl-hero-media { min-height: 320px; margin-top: 24px; } .sl-hero-media-inner { padding: 40px 20px; } } /* ---------- Author cred card + contact band (shared: service + blog pages) ---------- Mirrors the rules in service_landing.html's inline style block; blog posts don't render that partial, so the shared styles live here. */ .sl-cred { margin-top: 48px; padding: 22px 24px; background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); color: var(--ds-muted); font-size: 15px; line-height: 1.65; } .sl-cred-title { font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif; font-size: 17px; font-weight: 600; color: var(--ds-heading); margin: 0 0 6px; } .sl-cred p { margin: 0 0 6px; } .sl-cred p:last-child { margin-bottom: 0; } .sl-cred-link a { font-weight: 600; color: var(--ds-link); } .sl-contact .sl-eyebrow, .sl-contact .sl-h2, .sl-contact .sl-contact-intro, .sl-contact .sl-ladder { text-align: center; } .sl-contact .sl-contact-intro { font-size: var(--ds-body); line-height: 1.7; color: var(--ds-ink); max-width: 44ch; margin: 0 auto 36px; } .sl-ladder { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 14px; margin-bottom: 40px; } /* WhatsApp green: theme default #28a745 fails WCAG AA with white text. Use the darker brand green that passes 4.5:1 (mirrors service_landing.html). */ .sl-ladder .btn-success { background-color: var(--ds-green-dark); border-color: var(--ds-green-dark); } .sl-ladder .btn-success:hover, .sl-ladder .btn-success:focus { background-color: var(--ds-green); border-color: var(--ds-green); } .sl-ladder-or { flex-basis: 100%; color: var(--ds-muted); font-size: 15px; padding: 0 4px; text-align: center; } /* ---------- FAQ (hairline accordion, mirrors service_landing.html) ---------- */ .sl-h2 { font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif; font-size: var(--ds-h2); line-height: 1.25; letter-spacing: -0.01em; font-weight: 600; color: var(--ds-heading); margin: 0 0 16px; } .sl-faq { border-top: 1px solid var(--ds-border); } .sl-faq-item { border-bottom: 1px solid var(--ds-border); } .sl-faq-question { margin: 0 !important; } .sl-faq-q { width: 100%; background: none; border: none; text-align: left; padding: 24px 44px 24px 0; font-family: 'Source Sans 3', sans-serif; font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--ds-heading); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; } .sl-faq-q::after { content: '+'; font-size: 24px; font-weight: 400; line-height: 1; color: var(--ds-green); transition: transform 0.25s ease; flex-shrink: 0; } .sl-faq-item.open .sl-faq-q::after { transform: rotate(45deg); } .sl-faq-answer { display: none; padding: 0 44px 26px 0; font-size: var(--ds-body); line-height: 1.7; color: var(--ds-muted); } .sl-faq-item.open .sl-faq-answer { display: block; } .sl-faq-answer p { margin: 0 0 1em; } .sl-faq-answer p:last-child { margin-bottom: 0; } .sl-faq-answer a { font-weight: 600; } /* ---------- Blog cards (blog list + related articles on posts) ---------- */ .blog-card-grid { display: grid; grid-template-columns: 1fr; gap: 24px; max-width: 960px; margin: 0 auto; } @media (min-width: 768px) { .blog-card-grid { grid-template-columns: 1fr 1fr; } } .blog-card { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.2s ease, box-shadow 0.2s ease; } .blog-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(54, 69, 79, 0.07); } .blog-card-image { display: block; width: 100%; aspect-ratio: 16/9; overflow: hidden; background: var(--ds-tint); line-height: 0; } .blog-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .blog-card-body { padding: 22px 24px; display: flex; flex-direction: column; flex-grow: 1; } .blog-card-date { font-size: 13.5px; color: var(--ds-muted); margin-bottom: 10px; } .blog-card-title { margin: 0 0 10px; font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif; font-size: 21px; font-weight: 600; line-height: 1.35; } .blog-card-title a { color: var(--ds-heading); text-decoration: none; } .blog-card-title a:hover { color: var(--ds-green); text-decoration: none; } .blog-card-summary { color: var(--ds-ink); font-size: 15.5px; line-height: 1.65; margin: 0 0 16px; flex-grow: 1; } .blog-card-read-more { display: inline-flex; align-items: center; gap: 8px; color: var(--ds-link); font-weight: 600; font-size: 15px; text-decoration: none; } .blog-card-read-more:hover { color: var(--ds-green-dark); text-decoration: underline; text-underline-offset: 2px; } .blog-card-grid:has(.blog-card:only-child) .blog-card { max-width: 640px; margin: 0 auto; } /* ---------- Blog post tail sections (references, FAQ, related) ---------- */ .ds-faq-section { margin-top: 56px; } .ds-related-section { margin-top: 56px; } /* References: quiet footnote-style citation block */ .ds-references { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--ds-border); font-size: 14.5px; line-height: 1.7; color: var(--ds-muted); } .ds-references h2 { font-family: 'Source Sans 3', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ds-muted); margin: 0 0 16px; } .ds-references ul { list-style: none; margin: 0; padding: 0; } .ds-references li { margin-bottom: 10px; padding-left: 1.4em; text-indent: -1.4em; } .ds-references a { color: var(--ds-link); text-decoration: underline; text-underline-offset: 2px; } .sl-contact .contact-form-wrapper { border-radius: var(--ds-radius-md); box-shadow: var(--ds-shadow); } .sl-contact .contact-form { box-shadow: none !important; } .sl-contact-strip { margin-top: 32px; text-align: center; } .sl-contact-link { color: var(--ds-muted); font-size: 15px; text-decoration: none; } .sl-contact-link:hover { color: var(--ds-green-dark); text-decoration: underline; text-underline-offset: 2px; } @media (max-width: 768px) { .sl-ladder .btn { width: 100%; } .sl-ladder { flex-direction: column; align-items: stretch; } .sl-ladder-or { text-align: center; padding: 6px 0; } .sl-faq-q { font-size: 16.5px; padding: 20px 32px 20px 0; } .sl-faq-answer { padding: 0 32px 22px 0; } .sl-band { padding: 64px 0; } .ds-page-body { padding-bottom: 56px; } } .ds-breadcrumb a:hover { color: var(--ds-green-dark); text-decoration: underline; text-underline-offset: 2px; } .ds-breadcrumb li[aria-current] { color: var(--ds-heading); font-weight: 600; max-width: 48ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Featured image: quiet rounded card, no overlay */ .ds-page-figure { margin: 32px auto 0; max-width: 920px; padding-inline: 24px; } .ds-page-figure img { width: 100%; height: auto; border-radius: var(--ds-radius-md); border: 1px solid var(--ds-border); } .ds-page-figure figcaption { margin-top: 10px; text-align: center; font-size: var(--ds-caption); color: var(--ds-muted); } /* ---------- Article body (prose + legacy custom.css leaks) ---------- */ .ds-applied article.article .article-container a { text-decoration-color: inherit; } .ds-applied .article-style blockquote { border-left: 3px solid var(--ds-border); background: transparent; color: var(--ds-muted); } .ds-applied .article-style figure.figure-float figcaption { border-left: 3px solid var(--ds-border); } /* ---------- Service content sections (service_content_styles.html) ---------- */ .ds-applied .service-content-body a { color: var(--ds-link); } .ds-applied .service-content-body a:hover { color: var(--ds-green-dark); } /* ---------- Service FAQ + assessment accordions (JS-built partials) ---------- */ .ds-applied .service-faq-answer a, .ds-applied .service-assessment-answer a { color: var(--ds-link) !important; } .ds-applied .service-faq-answer a:hover, .ds-applied .service-assessment-answer a:hover { color: var(--ds-green-dark) !important; } .ds-applied .service-assessment-answer h4 { color: var(--ds-heading) !important; border: none !important; } /* ---------- Service locations ("Where I Work") ---------- */ .ds-applied .location-badge a { color: var(--ds-heading) !important; } .ds-applied .service-contact-info { border-top: 1px solid var(--ds-border); } .ds-applied .service-phone-btn, .ds-applied .service-contact-btn { border-radius: var(--ds-radius-md); font-weight: 600; min-height: 48px; } .ds-applied .service-phone-btn { background: var(--ds-green); color: #fff !important; } .ds-applied .service-phone-btn:hover { background: var(--ds-green-dark); color: #fff !important; } .ds-applied .service-contact-btn { border: 1px solid var(--ds-green); color: var(--ds-link) !important; } .ds-applied .service-contact-btn:hover { background: var(--ds-green); color: #fff !important; } /* ---------- Tags ---------- */ .ds-applied .article-tags { margin-top: 32px; } .ds-applied .article-tags .badge { background: var(--ds-tint); color: var(--ds-green-deep); font-size: 13px; font-weight: 500; padding: 7px 14px; border-radius: 999px; text-decoration: none; margin: 0 8px 10px 0; } .ds-applied .article-tags .badge:hover { background: var(--ds-border); color: var(--ds-heading); } /* ---------- Author card ---------- */ .ds-applied .author-card { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); padding: 24px; margin-top: 40px; } .ds-applied .author-card .card-title a { color: var(--ds-heading); text-decoration: none; } .ds-applied .author-card .card-title a:hover { color: var(--ds-green); } .ds-applied .author-card .card-subtitle { color: var(--ds-muted); } .ds-applied .author-card .network-icon a { color: var(--ds-link); text-decoration: none; } /* ---------- Related posts ---------- */ .ds-applied .ds-related { margin-top: 40px; } .ds-applied .ds-related ul { list-style: none; padding: 0; margin: 0; } .ds-applied .ds-related li { padding: 12px 0; border-bottom: 1px solid var(--ds-border); } .ds-applied .ds-related li:last-child { border-bottom: 0; } .ds-applied .ds-related a { color: var(--ds-link); font-weight: 500; text-decoration: none; } .ds-applied .ds-related a:hover { color: var(--ds-green-dark); text-decoration: underline; text-underline-offset: 2px; } /* ---------- Pagination ---------- */ .ds-applied .pagination { margin-top: 40px; } .ds-applied .pagination .page-link { color: var(--ds-link); background: var(--ds-surface); border-color: var(--ds-border); } .ds-applied .pagination .page-link:hover { color: var(--ds-green-dark); background: var(--ds-tint); } .ds-applied .pagination .page-item.active .page-link { background: var(--ds-green); border-color: var(--ds-green); color: #fff !important; } /* ---------- Blog comparison cards (legacy green header) ---------- */ .ds-applied .comparison-card { border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); box-shadow: none; } .ds-applied .comparison-card.davis .comparison-header, .ds-applied .comparison-card.cellfield .comparison-header { background: var(--ds-green); } .ds-applied .comparison-header h3 { color: #fff !important; } /* ---------- Mobile sticky bar (UX-12): Call + WhatsApp, thumb reach ---------- Shared by the homepage and the service landings. */ .hl-mobilebar { display: none; } @media (max-width: 768px) { .home-landing, .service-landing { padding-bottom: 84px; } .hl-mobilebar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; background: var(--ds-surface); border-top: 1px solid var(--ds-border); padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); } .hl-mobilebar-btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: var(--ds-radius-md); font-weight: 600; font-size: 16px; text-decoration: none; } .hl-mobilebar-call { background: var(--ds-green); color: #fff !important; } .hl-mobilebar-wa { background: var(--ds-green-dark); color: #fff !important; } }