/* ========================================================================== theme-salesforce.css — Salesforce Lightning (SLDS) skin. Load order: style.css → site.css → theme-salesforce.css (this file, LAST). This is a pure re-skin: colours, type and radii only. It changes no layout, no spacing and no markup. To revert the site to the Arbisoft palette, delete the single to this file — nothing else needs to change. Palette values are SLDS design tokens (Cloud Blue / neutral ramps). ========================================================================== */ /* --- 1. Design tokens ------------------------------------------------------ Overrides the :root block in style.css. Because this file loads last and the selector specificity matches, these win. Every component that already used var(--…) is re-themed for free. -------------------------------------------------------------------------- */ :root { /* SLDS Cloud Blue ramp */ --primary-blue: #032D60; /* Blue 10 — headings, hero gradient start */ --accent-blue: #0176D3; /* Blue 50 — SLDS brand, buttons and links */ --dark-slate: #001639; /* Blue 05 — hero gradient end, footer */ /* SLDS neutral ramp */ --light-bg: #F3F3F3; /* Neutral 95 — SLDS default page background */ --text-color: #444444; /* Neutral 30 — body copy */ --border-color: #E5E5E5; /* Neutral 90 — card and divider borders */ /* SLDS feedback colours */ --warning-red: #EA001E; /* Red 50 */ --warning-bg: #FEF1EE; /* Red 95 */ --notice-amber: #8C4B02; /* Orange 20 */ --notice-bg: #FEF5E9; /* Orange 95 */ /* Local additions used further down */ --sf-blue-hover: #014486; /* Blue 20 — button/link hover */ --sf-blue-tint: #EEF4FF; /* Blue 95 — selected/hover surfaces */ --sf-blue-border: #AACBFF; /* Blue 80 — borders on tinted surfaces */ --sf-input-border:#C9C9C9; /* Neutral 80 — SLDS form control border */ /* Neutral 40, not SLDS's Neutral 50 (#747474). #747474 only reaches 4.21:1 on the --light-bg grey, which fails WCAG AA for normal-size text. #5C5C5C measures 6.03:1 there and 6.69:1 on white. */ --sf-text-weak: #5C5C5C; --sf-radius: 0.25rem; /* SLDS border-radius-medium (4px) */ } /* --- 2. Typography --------------------------------------------------------- SLDS ships "Salesforce Sans", which is licensed for use inside Salesforce products and is NOT redistributable — so it is named first (it resolves for anyone who has it) and falls back to the closest widely available faces. Do not try to self-host Salesforce Sans without checking the licence. The universal selector matches style.css's own `*` rule and loads later. -------------------------------------------------------------------------- */ * { font-family: "Salesforce Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } body { color: var(--text-color); } /* SLDS headings are noticeably lighter than the Arbisoft originals. */ .hero h1, .hero-home h1 { font-weight: 700; letter-spacing: -0.01em; } .hero h2 { font-weight: 400; } .section-head h2, .form-title { font-weight: 700; letter-spacing: -0.005em; } .app-card h3, .feature-card h3, .video-meta h3, .support-band h3 { font-weight: 700; } /* --- 3. Radii -------------------------------------------------------------- SLDS uses a much tighter corner radius than the original design (4px vs 8–10px). This is the single biggest cue that a UI "looks Salesforce". -------------------------------------------------------------------------- */ .btn, .btn-back, .btn-ghost, .btn-header, .app-menu-trigger, .app-menu-list, .app-menu-list a, .app-card, .feature-card, .video-card, .support-band, .form-container, .alert, .form-group textarea { border-radius: var(--sf-radius); } /* Single-line inputs and service rows are borderless by design (site.css) — deliberately excluded from the radius list above. */ .app-card-icon { border-radius: var(--sf-radius); } .video-frame { border-radius: 0; } /* --- 4. Hard-coded colours inherited from style.css ------------------------ style.css contains literal hex values that no variable reaches. They are re-pointed here so the palette stays consistent. -------------------------------------------------------------------------- */ .btn:hover { background-color: var(--sf-blue-hover); } .form-subtitle { color: var(--sf-text-weak); } .docs-sidebar ul li a:hover { background-color: #F3F3F3; } .docs-sidebar ul li a.active, .docs-note { background-color: var(--sf-blue-tint); } .docs-content h3, .docs-content .docs-subheading { color: var(--accent-blue); } .docs-table th { background-color: #F3F3F3; } .alert-info { background-color: var(--sf-blue-tint); color: var(--primary-blue); } .alert-success { background-color: #EBF7E6; border-color: #2E844A; color: #2E844A; } /* --- 5. Component nudges --------------------------------------------------- Small adjustments so shared components read as SLDS rather than generic. -------------------------------------------------------------------------- */ /* SLDS shadows are far shallower than the originals. */ .app-card, .feature-card, .video-card, .support-band, .form-container { box-shadow: 0 2px 3px rgba(0, 0, 0, 0.06); } .app-card:hover, .video-card:hover { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12); border-color: var(--accent-blue); } /* Buttons: SLDS brand button is a flat fill with a 1px same-colour border. */ .btn, .btn-header { border: 1px solid var(--accent-blue); font-weight: 600; letter-spacing: 0.01em; } .btn:hover, .btn-header:hover { border-color: var(--sf-blue-hover); } /* Neutral/outline button, SLDS style. */ .btn-back { border-color: var(--sf-input-border); color: var(--accent-blue); font-weight: 600; } .btn-back:hover { background-color: var(--sf-blue-tint); border-color: var(--accent-blue); color: var(--sf-blue-hover); } /* Tinted surfaces. */ .app-menu-trigger:hover { background-color: var(--sf-blue-tint); } .app-menu-trigger[aria-expanded="true"], .app-menu-trigger.is-current { background-color: var(--sf-blue-tint); border-color: var(--sf-blue-border); } .app-menu-list a:hover, .app-menu-list a:focus-visible { background-color: var(--sf-blue-tint); } .app-menu-item-note { color: var(--sf-text-weak); } .app-card-icon { background-color: var(--sf-blue-tint); } .video-step { background-color: var(--sf-blue-tint); border-color: var(--sf-blue-border); } /* Service rows have no surface to tint — see site.css. Their hover/selected states are carried by the control fill and label weight instead. */ /* Form controls — colour only. The SHAPE is set in site.css: single-line fields are underlines, the comment textarea keeps its box, and service rows have no surface at all. Do not reintroduce a full `border` or a boxing `outline` here; either would put the boxes back. */ .form-group input, .form-group textarea, .form-group select { color: #181818; } .form-group input[type="text"], .form-group input[type="tel"], .form-group input[type="email"], .form-group select { border-bottom-color: var(--sf-input-border); } .form-group input[type="text"]:focus, .form-group input[type="tel"]:focus, .form-group input[type="email"]:focus, .form-group select:focus { border-bottom-color: var(--accent-blue); } /* Textarea is the one boxed control. */ .form-group textarea { background-color: #FFFFFF; border-color: var(--sf-input-border); } .form-group textarea:focus { border-color: var(--accent-blue); outline: 2px solid var(--accent-blue); outline-offset: -2px; } .service-checkboxes input[type="checkbox"] { border-color: var(--sf-input-border); } /* Section labels and captions. The eyebrow is 12.8px bold — too small to qualify as "large text" — so it needs the darker Blue 20 rather than brand blue. #0176D3 measures only 4.17:1 on the grey section background; #014486 measures 8.71:1. */ .eyebrow { letter-spacing: 1.4px; color: var(--sf-blue-hover); } .section-head p { color: var(--sf-text-weak); } .support-band p { color: var(--sf-text-weak); } /* Header keeps SLDS's thin bottom rule instead of a drop shadow. */ header { box-shadow: none; border-bottom: 1px solid var(--border-color); }