/* ============================================================================ SPARKS MILLING DIGITAL — 2026 BRAND CSS ---------------------------------------------------------------------------- File: smd-brand-2026.css Version: 1.2.0-005 Released: April 26, 2026 Status: Active development — v-005 release for April 30 launch Author: Sparks Milling Digital ---------------------------------------------------------------------------- Purpose: Establishes the SMD typography, brand color palette, structural color roles, button system, and design primitives for the SMD Blazor website. Loaded after Bootstrap, before component styles. Reference: Vignelli's Canon — disciplined grid, restricted typography, color as structural language, intentional whitespace. Replaces the legacy .smd-brand-XX text-only color classes in app.css with a complete text + background + border system using the 2026 palette. ---------------------------------------------------------------------------- CHANGE LOG ---------------------------------------------------------------------------- 1.2.0-005 2026-04-26 Added section 24: image protection primitives (.smd-img-protected) — discourages drag-to-save and selection of branded imagery. Note: this is a deterrent, not a lock. Determined extraction remains possible. Right-click suppression should be added via JavaScript by the integration team if stronger protection is required. Recommended global rule for the integration team: when navigating between pages via internal links, scroll position should reset to top-of-page (handled at the Blazor router level, not in CSS). 1.1.0-003 2026-04-09 Added service detail page primitives: service hero band (.smd-service-hero), deliverables grid (.smd-deliverable), capability deep-dive cards (.smd-capability), process steps (.smd-process-step), integration story band (.smd-integration-band). Designed to be reusable across all three service detail pages (Technology, Creative, Consulting). 1.0.0-002 2026-04-08 (Promoted from home page integration work by Isabella and Alejandro.) Promoted inline harness classes into CSS file as proper sections: 16. LOGO CLASSES (.smd-logo-blue, .smd-logo-white-name) 17. SERVICE PILLAR CARDS (.smd-pillar, .smd-pillar-icon) 18. STAT BLOCK (.smd-stat-number, .smd-stat-label) NOTE: This change should have triggered a version bump when committed; documenting retroactively here. 1.0.0-001 2026-04-07 Initial release. 2026 brand palette, Open Sans typography, button system, service markers (Technology / Creative / Consulting), section rhythm, dark navy footer. Renamed service markers from .smd-discipline-* to .smd-service-* and from "Strategy" to "Consulting" per direction. ============================================================================ */ /* ---------------------------------------------------------------------------- 1. TYPOGRAPHY ---------------------------------------------------------------------------- Open Sans is the SMD typeface. Available weights: 300 Light | 400 Regular | 500 Medium | 600 Semibold | 700 Bold | 800 Extra Bold Load via Google Fonts in App.razor head: ---------------------------------------------------------------------------- */ html, body { font-family: 'Open Sans', sans-serif; color: #363639; } .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6, p, li, a, span, button, input, select, textarea, label { font-family: 'Open Sans', sans-serif; } /* ---------------------------------------------------------------------------- 2. 2026 BRAND COLOR PALETTE — TEXT UTILITIES ---------------------------------------------------------------------------- Naming convention: .smd-text-{name} Use as a class on any text element to apply the brand color. ---------------------------------------------------------------------------- */ .smd-text-blue { color: #282561 !important; } /* Sparks Blue (Primary) */ .smd-text-blue-a1 { color: #55537A !important; } /* Sparks Blue Accent 1 */ .smd-text-blue-a2 { color: #7976AD !important; } /* Sparks Blue Accent 2 */ .smd-text-gold { color: #E0C543 !important; } /* Sparks Gold */ .smd-text-khaki { color: #B79160 !important; } /* British Khaki */ .smd-text-racing-green { color: #004225 !important; } /* British Racing Green */ .smd-text-taupe { color: #5F5850 !important; } /* Taupe */ .smd-text-gray { color: #363639 !important; } /* Gray Primary */ .smd-text-gray-mid { color: #7E7E85 !important; } /* Mid Gray */ .smd-text-gray-100 { color: #BBBBC4 !important; } /* Light Gray Accent 1 */ .smd-text-gray-200 { color: #C7C7D1 !important; } /* Light Gray Accent 2 */ .smd-text-gray-300 { color: #D3D3DE !important; } /* Light Gray Accent 3 */ .smd-text-gray-400 { color: #DFDFEB !important; } /* Light Gray Accent 4 */ .smd-text-white { color: #FFFFFF !important; } /* ---------------------------------------------------------------------------- 3. 2026 BRAND COLOR PALETTE — BACKGROUND UTILITIES ---------------------------------------------------------------------------- Naming convention: .smd-bg-{name} Use as a class on any container element to apply the brand background. ---------------------------------------------------------------------------- */ .smd-bg-blue { background-color: #282561 !important; } .smd-bg-blue-a1 { background-color: #55537A !important; } .smd-bg-blue-a2 { background-color: #7976AD !important; } .smd-bg-gold { background-color: #E0C543 !important; } .smd-bg-khaki { background-color: #B79160 !important; } .smd-bg-racing-green { background-color: #004225 !important; } .smd-bg-taupe { background-color: #5F5850 !important; } .smd-bg-gray { background-color: #363639 !important; } .smd-bg-gray-mid { background-color: #7E7E85 !important; } .smd-bg-gray-100 { background-color: #BBBBC4 !important; } .smd-bg-gray-200 { background-color: #C7C7D1 !important; } .smd-bg-gray-300 { background-color: #D3D3DE !important; } .smd-bg-gray-400 { background-color: #DFDFEB !important; } .smd-bg-white { background-color: #FFFFFF !important; } /* ---------------------------------------------------------------------------- 4. 2026 BRAND COLOR PALETTE — BORDER UTILITIES ---------------------------------------------------------------------------- Naming convention: .smd-border-{name} Use with Bootstrap's .border or as a standalone class to apply brand color to borders. Useful for top-border accent treatments on cards. ---------------------------------------------------------------------------- */ .smd-border-blue { border-color: #282561 !important; } .smd-border-blue-a1 { border-color: #55537A !important; } .smd-border-blue-a2 { border-color: #7976AD !important; } .smd-border-gold { border-color: #E0C543 !important; } .smd-border-khaki { border-color: #B79160 !important; } .smd-border-racing-green { border-color: #004225 !important; } .smd-border-taupe { border-color: #5F5850 !important; } .smd-border-gray { border-color: #363639 !important; } .smd-border-gray-mid { border-color: #7E7E85 !important; } .smd-border-gray-400 { border-color: #DFDFEB !important; } /* ---------------------------------------------------------------------------- 5. STRUCTURAL COLOR ROLES (Vignelli-inspired) ---------------------------------------------------------------------------- Color is structural language. These semantic classes assign brand colors to specific roles in the design system. When applied consistently across the site, they create predictable rhythm and aid wayfinding. Service markers: .smd-service-technology → British Racing Green .smd-service-creative → British Khaki .smd-service-consulting → Taupe ---------------------------------------------------------------------------- */ .smd-service-technology { color: #004225; } .smd-service-creative { color: #B79160; } .smd-service-consulting { color: #5F5850; } .smd-service-technology-bg { background-color: #004225; color: #FFFFFF; } .smd-service-creative-bg { background-color: #B79160; color: #FFFFFF; } .smd-service-consulting-bg { background-color: #5F5850; color: #FFFFFF; } .smd-service-technology-border { border-color: #004225 !important; } .smd-service-creative-border { border-color: #B79160 !important; } .smd-service-consulting-border { border-color: #5F5850 !important; } /* ---------------------------------------------------------------------------- 6. LINK STYLES ---------------------------------------------------------------------------- */ a, .btn-link { color: #282561; text-decoration: underline; text-decoration-color: rgba(40, 37, 97, 0.3); text-underline-offset: 0.2em; transition: color 0.2s ease, text-decoration-color 0.2s ease; } a:hover, .btn-link:hover { color: #55537A; text-decoration-color: #55537A; } /* ---------------------------------------------------------------------------- 7. BUTTON SYSTEM ---------------------------------------------------------------------------- SMD button system uses square corners (border-radius: 0) for a disciplined geometric feel that aligns with Vignelli's grid-based aesthetic. Variants: .btn-smd-blue → primary action, dark on light .btn-smd-outline → secondary action, neutral .btn-smd-gold → emphasis CTA, used sparingly .btn-smd-light → light variant for use on dark backgrounds ---------------------------------------------------------------------------- */ .btn-smd-blue, .btn-smd-outline, .btn-smd-gold, .btn-smd-light { font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: 0.95rem; letter-spacing: 0.02em; padding: 0.75rem 1.85rem; border-radius: 0; border-width: 2px; border-style: solid; transition: all 0.2s ease; text-decoration: none; display: inline-block; } .btn-smd-blue { background-color: #282561; border-color: #282561; color: #FFFFFF; } .btn-smd-blue:hover { background-color: #FFFFFF; color: #282561; } .btn-smd-outline { background-color: transparent; border-color: #282561; color: #282561; } .btn-smd-outline:hover { background-color: #282561; color: #FFFFFF; } .btn-smd-gold { background-color: #E0C543; border-color: #E0C543; color: #282561; font-weight: 700; } .btn-smd-gold:hover { background-color: #282561; border-color: #282561; color: #E0C543; } .btn-smd-light { background-color: transparent; border-color: #FFFFFF; color: #FFFFFF; } .btn-smd-light:hover { background-color: #FFFFFF; color: #282561; } /* ---------------------------------------------------------------------------- 8. TYPOGRAPHIC PRIMITIVES ---------------------------------------------------------------------------- Reusable type treatments that establish hierarchy and rhythm. ---------------------------------------------------------------------------- */ /* Eyebrow — small uppercase label that introduces a section heading. Use above any major heading for context and rhythm. */ .smd-eyebrow { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; color: #B79160; margin-bottom: 1rem; display: inline-block; } /* Eyebrow on dark backgrounds — switches to gold for legibility */ .smd-eyebrow-light { color: #E0C543; } /* Display heading — for hero areas. Uses Extra Bold (800), tight line height, slightly negative tracking. Fluid sizing via clamp. */ .smd-display { font-weight: 800; line-height: 1.05; letter-spacing: -0.015em; font-size: clamp(2rem, 5vw, 3.75rem); margin-bottom: 1.5rem; } /* H2 — section headings. Bold, blue, fluid. */ h2.smd-h2, .smd-h2 { font-family: 'Open Sans', sans-serif; font-weight: 700; line-height: 1.2; color: #282561; font-size: clamp(1.75rem, 3vw, 2.5rem); margin-bottom: 1rem; } /* H3 — subsection headings, card titles. */ h3.smd-h3, .smd-h3 { font-family: 'Open Sans', sans-serif; font-weight: 700; line-height: 1.25; color: #282561; font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: 0.75rem; } /* Lead paragraph — for opening copy under headlines */ .smd-lead { font-weight: 300; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.55; color: #5F5850; } /* ---------------------------------------------------------------------------- 9. GEOMETRIC ACCENT PRIMITIVES ---------------------------------------------------------------------------- Small reusable shapes that act as brand marks throughout the site. ---------------------------------------------------------------------------- */ /* Gold accent bar — 60x4 horizontal rule used under section eyebrows */ .smd-accent-bar { display: inline-block; width: 60px; height: 4px; background-color: #E0C543; margin-bottom: 1.5rem; } /* Variants for service-specific sections */ .smd-accent-bar-technology { background-color: #004225; } .smd-accent-bar-creative { background-color: #B79160; } .smd-accent-bar-consulting { background-color: #5F5850; } .smd-accent-bar-blue { background-color: #282561; } /* ---------------------------------------------------------------------------- 10. SECTION RHYTHM ---------------------------------------------------------------------------- Vertical rhythm primitives. Use .smd-section as the wrapper for major page sections to establish consistent vertical spacing. ---------------------------------------------------------------------------- */ .smd-section { padding-top: 5rem; padding-bottom: 5rem; } .smd-section-sm { padding-top: 3rem; padding-bottom: 3rem; } .smd-section-lg { padding-top: 7rem; padding-bottom: 7rem; } @media (max-width: 768px) { .smd-section { padding-top: 3rem; padding-bottom: 3rem; } .smd-section-sm { padding-top: 2rem; padding-bottom: 2rem; } .smd-section-lg { padding-top: 4rem; padding-bottom: 4rem; } } /* ---------------------------------------------------------------------------- 11. BANNER COMPONENT (legacy, retained from original app.css) ---------------------------------------------------------------------------- */ .banner { height: 320px; overflow: hidden; } .banner-img { height: 100%; object-fit: cover; filter: saturate(0.95) contrast(1.05); } .banner-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(40,37,97,0.15) 0%, rgba(40,37,97,0.55) 100%); } /* ---------------------------------------------------------------------------- 12. SMD FOOTER (dark navy, 2026 redesign) ---------------------------------------------------------------------------- Replaces the light gray footer. The dark navy treatment anchors every page, gives the brand color hero presence, and uses gold for link hover states. ---------------------------------------------------------------------------- */ .smd-footer { background-color: #282561; color: #DFDFEB; padding: 4rem 0 1.5rem; } .smd-footer p, .smd-footer li { color: #DFDFEB; } .smd-footer p { margin-bottom: 0; } .smd-footer li { font-size: 0.85rem; } .smd-footer a { color: #DFDFEB; text-decoration: none; transition: color 0.2s ease; } .smd-footer a:hover { color: #E0C543; } .smd-footer h5 { color: #FFFFFF; font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1.25rem; } .smd-footer .footer-divider { border-top: 1px solid rgba(255,255,255,0.12); margin-top: 3rem; padding-top: 1.5rem; } /* ---------------------------------------------------------------------------- 13. FORM ELEMENTS ---------------------------------------------------------------------------- */ .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #55537A; } h1:focus { outline: none; } .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid #e50000; } .validation-message { color: #e50000; } .darker-border-checkbox.form-check-input { border-color: #929292; } /* ---------------------------------------------------------------------------- 14. OFFCANVAS CLOSE BUTTON (retained from original app.css) ---------------------------------------------------------------------------- */ .offcanvas .btn-close { --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M2 2 L14 14 M14 2 L2 14' stroke='rgba(0,0,0,0.85)' stroke-width='2' stroke-linecap='round'/%3e%3c/svg%3e"); background: transparent var(--bs-btn-close-bg) center/1em auto no-repeat !important; opacity: .75; } .offcanvas .btn-close:hover { opacity: 1; } .offcanvas[data-bs-theme="dark"] .btn-close { --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M2 2 L14 14 M14 2 L2 14' stroke='rgba(255,255,255,0.9)' stroke-width='2' stroke-linecap='round'/%3e%3c/svg%3e"); } /* ---------------------------------------------------------------------------- 15. BLAZOR ERROR BOUNDARY (retained from original app.css) ---------------------------------------------------------------------------- */ .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } /* ---------------------------------------------------------------------------- 16. LOGO CLASSES ---------------------------------------------------------------------------- Logo images are embedded as base64 SVG data URIs. Copy the full background-image data URI values from the design harness HTML file (smd-design-harness-home-v1_0_0-001.html) into the rules below. ---------------------------------------------------------------------------- */ /* Blue wordmark — used on light backgrounds (nav, etc.) */ .smd-logo-blue { display: block; width: 240px; height: auto; aspect-ratio: 1411.2 / 266.4; background-image: url("/* PASTE .smd-logo-blue data URI here */"); background-size: contain; background-repeat: no-repeat; } /* White name-only wordmark — used in the dark footer */ .smd-logo-white-name { display: block; width: 280px; height: auto; aspect-ratio: 1082.3 / 78.7; background-image: url("/* PASTE .smd-logo-white-name data URI here */"); background-size: contain; background-repeat: no-repeat; } /* ---------------------------------------------------------------------------- 17. SERVICE PILLAR CARDS ---------------------------------------------------------------------------- Used on the home page Three Pillars section and any future service listings. ---------------------------------------------------------------------------- */ .smd-pillar { background: #FFFFFF; padding: 2.5rem 2rem; height: 100%; border-top: 4px solid #282561; transition: transform 0.2s ease; } .smd-pillar:hover { transform: translateY(-4px); } .smd-pillar-icon { font-size: 2.25rem; margin-bottom: 1.25rem; display: block; } /* ---------------------------------------------------------------------------- 18. STAT BLOCK ---------------------------------------------------------------------------- Large number + small label treatment used in the Stats Band section. ---------------------------------------------------------------------------- */ .smd-stat-number { font-weight: 800; font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1; color: #282561; letter-spacing: -0.02em; } .smd-stat-label { font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: #5F5850; margin-top: 0.5rem; } /* ---------------------------------------------------------------------------- 19. SERVICE HERO BAND ---------------------------------------------------------------------------- Used at the top of service detail pages (Technology, Creative, Consulting). The .smd-service-hero acts as a band container with the service marker color as a top accent. Pair with one of the service marker modifier classes: .smd-service-hero.smd-service-technology-accent .smd-service-hero.smd-service-creative-accent .smd-service-hero.smd-service-consulting-accent ---------------------------------------------------------------------------- */ .smd-service-hero { position: relative; padding-top: 6rem; padding-bottom: 4rem; background-color: #FFFFFF; border-top: 6px solid #282561; /* default; overridden by service modifier */ } .smd-service-hero.smd-service-technology-accent { border-top-color: #004225; } .smd-service-hero.smd-service-creative-accent { border-top-color: #B79160; } .smd-service-hero.smd-service-consulting-accent { border-top-color: #5F5850; } @media (max-width: 768px) { .smd-service-hero { padding-top: 3.5rem; padding-bottom: 2.5rem; } } /* ---------------------------------------------------------------------------- 20. DELIVERABLES GRID ---------------------------------------------------------------------------- A grid of concrete service deliverables. Each .smd-deliverable is a single tile in the grid showing one capability with an icon, name, and short description. Use within a Bootstrap row > col-md-6 col-lg-4 structure. ---------------------------------------------------------------------------- */ .smd-deliverable { padding: 1.75rem 1.5rem; border-left: 3px solid #DFDFEB; height: 100%; transition: border-color 0.2s ease; } .smd-deliverable:hover { border-left-color: #B79160; } .smd-deliverable-icon { font-size: 1.5rem; color: #B79160; margin-bottom: 0.75rem; display: block; } .smd-deliverable-title { font-size: 1rem; font-weight: 700; color: #282561; margin-bottom: 0.5rem; line-height: 1.3; } .smd-deliverable-text { font-size: 0.9rem; line-height: 1.5; color: #5F5850; margin-bottom: 0; } /* Service-specific accent variants */ .smd-deliverable.smd-service-technology-accent { border-left-color: #004225; } .smd-deliverable.smd-service-technology-accent .smd-deliverable-icon { color: #004225; } .smd-deliverable.smd-service-creative-accent { border-left-color: #B79160; } .smd-deliverable.smd-service-creative-accent .smd-deliverable-icon { color: #B79160; } .smd-deliverable.smd-service-consulting-accent { border-left-color: #5F5850; } .smd-deliverable.smd-service-consulting-accent .smd-deliverable-icon { color: #5F5850; } /* ---------------------------------------------------------------------------- 21. CAPABILITY DEEP-DIVE CARD ---------------------------------------------------------------------------- Larger card treatment for featured capabilities that need more space than a deliverable tile. Used to highlight 3-4 differentiating capabilities per service detail page (e.g., FAA-licensed drone, in-house studio, foreign language production). ---------------------------------------------------------------------------- */ .smd-capability { background-color: #FFFFFF; padding: 2rem; height: 100%; border-top: 3px solid #B79160; /* default to creative; override per service */ } .smd-capability.smd-service-technology-accent { border-top-color: #004225; } .smd-capability.smd-service-creative-accent { border-top-color: #B79160; } .smd-capability.smd-service-consulting-accent { border-top-color: #5F5850; } .smd-capability-eyebrow { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; color: #B79160; margin-bottom: 0.75rem; display: block; } .smd-capability.smd-service-technology-accent .smd-capability-eyebrow { color: #004225; } .smd-capability.smd-service-consulting-accent .smd-capability-eyebrow { color: #5F5850; } .smd-capability-title { font-size: 1.25rem; font-weight: 700; color: #282561; line-height: 1.25; margin-bottom: 0.75rem; } .smd-capability-text { font-size: 0.95rem; line-height: 1.55; color: #5F5850; margin-bottom: 0; } /* ---------------------------------------------------------------------------- 22. PROCESS STEPS ---------------------------------------------------------------------------- Numbered steps shown in a horizontal flow on desktop, stacked on mobile. Used for "How we work" sections on service detail pages. ---------------------------------------------------------------------------- */ .smd-process-step { position: relative; padding: 0 1rem; } .smd-process-step-number { font-size: 2.5rem; font-weight: 800; line-height: 1; color: #B79160; letter-spacing: -0.02em; margin-bottom: 0.75rem; display: block; } .smd-process-step.smd-service-technology-accent .smd-process-step-number { color: #004225; } .smd-process-step.smd-service-creative-accent .smd-process-step-number { color: #B79160; } .smd-process-step.smd-service-consulting-accent .smd-process-step-number { color: #5F5850; } .smd-process-step-title { font-size: 1rem; font-weight: 700; color: #282561; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; line-height: 1.3; } .smd-process-step-text { font-size: 0.9rem; line-height: 1.55; color: #5F5850; margin-bottom: 0; } /* ---------------------------------------------------------------------------- 23. INTEGRATION BAND ---------------------------------------------------------------------------- A band used at the bottom of service detail pages to reinforce that the featured service is part of an integrated three-service system. Uses a subtle taupe-tinted background to differentiate it from white sections. ---------------------------------------------------------------------------- */ .smd-integration-band { background-color: #F5F4F1; padding-top: 5rem; padding-bottom: 5rem; } @media (max-width: 768px) { .smd-integration-band { padding-top: 3rem; padding-bottom: 3rem; } } .smd-integration-pillar { padding: 1.5rem; text-align: center; border-top: 3px solid #DFDFEB; background-color: #FFFFFF; height: 100%; transition: border-color 0.2s ease; } .smd-integration-pillar.smd-service-technology-accent { border-top-color: #004225; } .smd-integration-pillar.smd-service-creative-accent { border-top-color: #B79160; } .smd-integration-pillar.smd-service-consulting-accent { border-top-color: #5F5850; } .smd-integration-pillar.is-current { background-color: #FFFFFF; box-shadow: 0 0 0 2px #282561; } .smd-integration-pillar-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; color: #5F5850; display: block; margin-bottom: 0.5rem; } .smd-integration-pillar-name { font-size: 1.1rem; font-weight: 700; color: #282561; margin-bottom: 0.5rem; } .smd-integration-pillar-text { font-size: 0.85rem; line-height: 1.5; color: #5F5850; margin-bottom: 0; } /* ---------------------------------------------------------------------------- 24. IMAGE PROTECTION ---------------------------------------------------------------------------- Discourages casual drag-to-save and selection of branded imagery. Apply the .smd-img-protected class to any image that should be protected. IMPORTANT: This is a deterrent, not a lock. Anything rendered to the browser can ultimately be captured (screenshot, dev tools, etc.). For stronger protection, add JavaScript-based right-click suppression at the layout level. For full protection, do not display the image at all. ---------------------------------------------------------------------------- */ .smd-img-protected { -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; user-drag: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; } /* Re-enable pointer events on parent containers so links over images still work. Use .smd-img-protected only on images that don't need click handlers; if a click handler is needed, wrap in a parent element that has pointer-events: auto. */ a .smd-img-protected, button .smd-img-protected { pointer-events: none; } /* ============================================================================ END OF ADDITIONS ============================================================================ */ /* ============================================================================ END OF FILE — smd-brand-2026.css ============================================================================ */