/* ============================================================================ rp-brand.css — RidePride LLC corporate brand layer ---------------------------------------------------------------------------- Loads AFTER: templates/blackhawk/css/style.css (vendor — never edit) templates/blackhawk/css/bh-custom.css (reference — never edit) Job: turn a neon-green-on-near-black charity/clinic skin into a sober, light-first B2B software company site that a telecom carrier reviewer, a bank, or an aviation client reads as "established and real". Follows the existing TWO-LAYER brand pattern verbatim: Layer 1 --brand-* = abstract brand tokens (what the company's colors ARE) Layer 2 --bh-* = Blackhawk role tokens (what those colors MEAN in this theme) The layer-1 -> layer-2 wiring below is identical to BlackhawkLayout.razor's. Only the VALUES change. No third system is introduced. HEX POLICY: raw hex appears ONLY in the :root primitive block below. Every rule in this file references a var() with the original as fallback. CONTRAST (measured, WCAG 2.1): #E8720C on #FFFFFF ....... 3.07:1 FAIL body text -> fills/rules/display only #00843D on #FFFFFF ....... 4.81:1 PASS #00843D on #F5F7F6 ....... 4.47:1 FAIL (marginal) -> green TEXT standardized on #006B31 #A34C08 on #FFFFFF ....... 5.84:1 PASS (text-safe orange, same hue 27deg) #A34C08 on #F5F7F6 ....... 5.43:1 PASS #006B31 on #FFFFFF ....... 6.67:1 PASS #006B31 on #F5F7F6 ....... 6.20:1 PASS #14231B on #FFFFFF ....... 16.3:1 PASS (headings) #3D4A43 on #FFFFFF ........ 9.3:1 PASS (body) #3D4A43 on #F5F7F6 ....... 8.64:1 PASS #6B7770 on #FFFFFF ....... 4.67:1 PASS (meta / captions) #FFFFFF on #00843D ....... 4.81:1 PASS (primary button label) #FFFFFF on #006B31 ....... 6.67:1 PASS (primary button hover) #FFFFFF on hero overlay .. 12.9:1 PASS (worst case: pure-white hero image) RULE: #E8720C is NEVER used as text below 24px. #00843D is NEVER used as text. ========================================================================== */ /* ============================================================================ 1. LAYER 1 — RidePride brand tokens + LAYER 2 — Blackhawk role remap ========================================================================== */ :root { /* ---- Primitives (the ONLY place raw hex lives) ------------------------ */ /* Brand — Florida Orange. Fills, rules, hero display accent. */ --rp-orange: #E8720C; /* The ONLY orange permitted as text on a light surface. Hue 27deg — same family as --rp-orange, darkened purely to clear 4.5:1 on white AND paper. */ --rp-orange-deep: #A34C08; /* Brand — Florida Green. Primary button fill (white label clears 4.81:1). */ --rp-green: #00843D; /* Green as TEXT on light, and the fill hover/pressed step. */ --rp-green-deep: #006B31; /* Neutrals — a green-cast ink family so the palette coheres instead of reading as "orange + green bolted onto grey". */ --rp-ink: #14231B; /* headings; dark surfaces (hero overlay, footer) */ --rp-ink-body: #3D4A43; /* body copy */ --rp-ink-muted: #6B7770; /* meta, captions, labels */ --rp-canvas: #FFFFFF; /* primary page surface */ --rp-paper: #F5F7F6; /* alternating section + card surface */ --rp-line: #DFE4E1; /* decorative hairline (no contrast requirement) */ --rp-line-strong: #8B968F; /* input/control borders — 3.06:1 on white, clears UI AA */ --rp-on-dark: #FFFFFF; --rp-on-dark-dim: rgba(255, 255, 255, 0.72); /* ---- Layer 1: abstract brand tokens ---------------------------------- */ /* Identical names/roles to the Portal's Clinic.BrandColors contract. */ --brand-primary: var(--rp-ink, #14231B); /* the dark structural role */ --brand-accent: var(--rp-green, #00843D); /* the "highlight" role */ --brand-button: var(--rp-orange, #E8720C); /* the "accent detail" role */ --brand-text: var(--rp-ink, #14231B); /* ---- Layer 2: Blackhawk role mapping (wiring unchanged) -------------- */ /* --bh-accent drives rules, icon chips, eyebrows, focus rings, dividers, spinner — all non-text or large-text uses where Florida Orange is safe. --bh-highlight drives the primary CTA (see §6) because white-on-orange is 3.07:1 and fails; white-on-green is 4.81:1 and passes. */ --bh-accent: var(--brand-button); /* -> Florida Orange */ --bh-highlight: var(--brand-accent); /* -> Florida Green */ --bh-dark: var(--brand-primary); /* -> Ink */ /* ---- Type ------------------------------------------------------------ */ /* System fonts only. No @font-face, no Google Fonts, no external host — the CSP blocks third-party origins and this is a free static tier. Rajdhani (the template's face) is a Google webfont: it cannot load here and would silently degrade to generic sans-serif. Both stacks below are therefore explicit, not decorative. */ --rp-font-display: Georgia, "Times New Roman", "Liberation Serif", "Nimbus Roman", "DejaVu Serif", serif; --rp-font-body: Calibri, "Carlito", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; /* Type scale — 8 styles total, no more. */ --rp-size-hero: clamp(2.5rem, 5.2vw, 4.25rem); /* 40 -> 68px */ --rp-size-h2: clamp(2rem, 3.4vw, 2.75rem); /* 32 -> 44px */ --rp-size-h3: 1.375rem; /* 22px */ --rp-size-h4: 1.125rem; /* 18px */ --rp-size-lead: 1.1875rem; /* 19px */ --rp-size-body: 1.0625rem; /* 17px */ --rp-size-meta: 0.8125rem; /* 13px */ --rp-size-eyebrow: 0.75rem; /* 12px */ /* ---- Space / shape / motion ------------------------------------------ */ --rp-section-y: 96px; --rp-radius: 3px; /* engineered, not soft. Charity UI is round; this isn't. */ --rp-radius-lg: 4px; --rp-ease: cubic-bezier(0.4, 0, 0.2, 1); --rp-dur: 180ms; --rp-shadow-sm: 0 1px 2px rgba(20, 35, 27, 0.06); --rp-shadow-md: 0 8px 24px -8px rgba(20, 35, 27, 0.16); } /* ============================================================================ 2. BASE SURFACE FLIP — the single highest-leverage change Near-black canvas -> white. Dark stays ONLY where it earns its keep: the hero band and the footer. (Dark hero + light body + dark footer is the prevailing B2B convention — Twilio, Stripe, Bandwidth, Datadog all do it.) ========================================================================== */ html, body { background-color: var(--rp-canvas, #FFFFFF); color: var(--rp-ink-body, #3D4A43); font-family: var(--rp-font-body); font-size: var(--rp-size-body, 1.0625rem); font-weight: 400; line-height: 1.7; /* vendor 26px/18px = 1.44 — too tight to read */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* De-Rajdhani. The template hardcodes the face in ~25 places; these are the inheritance entry points that reach all of them on the surviving sections. */ p, span, li, td, th, label, input, select, textarea, button, blockquote, small, .desc, .text, .short-title, .te-slider-short-desc, .te-slider-short-title, .te-section-desc, .te-section-desc-text, .te-study-meta, .read-btn a, .te-theme-btn, input.te-theme-btn { font-family: var(--rp-font-body); } ::selection { background: var(--rp-green, #00843D); color: var(--rp-on-dark, #FFFFFF); } /* ============================================================================ 3. TYPOGRAPHY — Georgia bold headings, Calibri body The template sets text-transform:uppercase on EVERY h1–h6. Georgia bold in all-caps at 69px reads as a spirits ad, not a software company. Sentence case is the institutional/editorial register we want. This is the second biggest "kill the charity read" lever after the surface flip. ========================================================================== */ h1, h2, h3, h4, h5, h6 { font-family: var(--rp-font-display); color: var(--rp-ink, #14231B); font-weight: 700; text-transform: none; transition: none; /* vendor puts `all 0.5s` on every heading */ } /* h2 needs !important — vendor style.css declares the family with !important. */ h2 { font-family: var(--rp-font-display) !important; } h1 { font-size: var(--rp-size-hero, 4.25rem); line-height: 1.08; letter-spacing: -0.02em; /* Georgia opens up at display size; pull it in */ } h2 { font-size: var(--rp-size-h2, 2.75rem); line-height: 1.15; letter-spacing: -0.015em; } h3 { font-size: var(--rp-size-h3, 1.375rem); line-height: 1.3; letter-spacing: -0.005em; } h4 { font-size: var(--rp-size-h4, 1.125rem); line-height: 1.4; letter-spacing: 0; } h5 { font-size: var(--rp-size-body, 1.0625rem); line-height: 1.4; letter-spacing: 0; } h6 { font-size: var(--rp-size-meta, 0.8125rem); line-height: 1.4; letter-spacing: 0; } @media only screen and (max-width: 767px) { h1 { font-size: var(--rp-size-hero, 2.5rem); } h2 { font-size: var(--rp-size-h2, 2rem); } h3 { font-size: var(--rp-size-h3, 1.25rem); } } p { margin: 0 0 1rem; } a { color: var(--rp-green-deep, #006B31); } /* 6.67:1 on white */ a:hover, a:focus { color: var(--rp-orange-deep, #A34C08); } /* 5.84:1 on white */ /* Keyboard focus must be visible on a light surface — the vendor kills outlines globally (`a:focus { outline: none }`). WCAG 2.4.7. `[tabindex="-1"]` is excluded deliberately. Elements with tabindex="-1" are PROGRAMMATIC focus targets, not keyboard-navigable ones — the pages focus the page

on route change so screen readers announce the new view. Matching them here painted a permanent green ring around the hero headline on load. Keyboard users never tab to these, so they need no focus ring. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible { outline: 2px solid var(--rp-green-deep, #006B31); outline-offset: 2px; border-radius: var(--rp-radius, 3px); } /* Section eyebrow — the ONE place uppercase belongs. Wide tracking on a small caps label is the universal B2B section-label convention. */ .te-section-title .short-title, .te-section-title .short-title-wrapper .short-title { font-family: var(--rp-font-body); font-size: var(--rp-size-eyebrow, 0.75rem); font-weight: 700; line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rp-orange-deep, #A34C08); /* 5.84:1 white / 5.43:1 paper */ } /* Decorative dashes flanking the eyebrow — brand orange, non-text. */ .te-section-title .short-title-wrapper::before, .te-section-title .short-title-wrapper::after, .te-section-title .short-title::before, .te-section-title .short-title::after { background-color: var(--rp-orange, #E8720C); color: var(--rp-orange, #E8720C); border-color: var(--rp-orange, #E8720C); } .te-section-title .title { font-family: var(--rp-font-display); color: var(--rp-ink, #14231B); text-transform: none; margin-top: 12px; } .te-section-desc, .te-section-desc p, .te-section-desc-text { color: var(--rp-ink-body, #3D4A43); font-family: var(--rp-font-body); font-size: var(--rp-size-lead, 1.1875rem); line-height: 1.65; max-width: 62ch; /* measure — reading comfort, not decoration */ margin-left: 0; margin-right: 0; } /* ============================================================================ 4. HERO — .slider-area.style-1 Stays dark (the founder's hero.jpg spec depends on it). The overlay is a LEFT-WEIGHTED gradient, not a flat scrim: it guarantees the white headline clears AA on the left third even if Creatify returns a brighter image than briefed. Worst case (pure-white image) still measures 12.9:1. ========================================================================== */ .slider-area.style-1 { background-color: var(--rp-ink, #14231B); background-image: url("../images/hero.jpg"); background-size: cover; background-position: center right; background-repeat: no-repeat; height: auto; min-height: min(56.25vw, 78vh); position: relative; } /* Left-weighted scrim. Defensive: contrast does not depend on the artwork. */ .slider-area.style-1::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( 100deg, rgba(20, 35, 27, 0.92) 0%, rgba(20, 35, 27, 0.86) 34%, rgba(20, 35, 27, 0.58) 62%, rgba(20, 35, 27, 0.34) 100% ); } .slider-area.style-1 > .container, .slider-area.style-1 .te-slider-wrapper, .slider-area.style-1 .te-single-slider { position: relative; z-index: 2; } /* The 105px rotated clinic-name watermark behind the hero. Pure template decoration; it reads as a nightclub flyer. Gone. */ .slider-area .te-slider-label { display: none; } /* Vendor's flat 0.55 black scrim — superseded by the gradient above. */ .slider-area .te-video-bg::after, .slider-area > .te-slider-overlay, .slider-area .te-single-slider .te-slider-overlay { display: none; } .slider-area.style-1 .te-single-slider .te-slider-container { align-items: center; padding-top: clamp(140px, 20vh, 200px); padding-bottom: clamp(90px, 14vh, 140px); } /* Hero copy column — pinned to the dark left third. */ .slider-area.style-1 .te-slider-column { max-width: 660px; } /* Short orange rule above the eyebrow. Decorative — carries the Florida Orange into the hero without asking small orange text to clear contrast on an unknown image. */ .slider-area .te-single-slider .te-slider-content-wrapper .te-slider-content::before { content: ""; display: block; width: 48px; height: 3px; margin-bottom: 22px; background-color: var(--rp-orange, #E8720C); } /* Eyebrow: white, not orange. Small orange text over a variable photograph is the one place the brand color cannot be trusted (worst case 4.19:1). */ .slider-area .te-single-slider .te-slider-content-wrapper .te-slider-content .te-slider-short-title, .slider-area .te-single-slider .te-slider-content-wrapper .te-slider-content .te-slider-short-title a { font-family: var(--rp-font-body); font-size: var(--rp-size-eyebrow, 0.75rem); font-weight: 700; line-height: 1; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rp-on-dark-dim, rgba(255, 255, 255, 0.72)); margin-bottom: 20px; width: auto; } /* 97px/88px Rajdhani -> Georgia bold at a human display size. */ .slider-area .te-single-slider .te-slider-content-wrapper .te-slider-content .te-slider-title { font-family: var(--rp-font-display); font-size: var(--rp-size-hero, 4.25rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; text-transform: none; color: var(--rp-on-dark, #FFFFFF); margin-bottom: 24px; text-wrap: balance; } /* Highlighted span in the headline: ORANGE, never green. Green on the dark overlay measures 3.40:1 — it fails as text. Orange measures 5.32:1 on the scrim (4.19:1 worst case), and the headline is display-sized, so it clears the 3:1 large-text threshold with room. */ .slider-area .te-single-slider .te-slider-content-wrapper .te-slider-content .te-slider-title span { color: var(--rp-orange, #E8720C); } .slider-area .te-single-slider .te-slider-content-wrapper .te-slider-content .te-slider-short-desc { font-family: var(--rp-font-body); font-size: var(--rp-size-lead, 1.1875rem); font-weight: 400; line-height: 1.65; color: var(--rp-on-dark-dim, rgba(255, 255, 255, 0.72)); max-width: 52ch; } .slider-area .te-single-slider .te-slider-content-wrapper .te-slider-content .te-slider-btn-wrapper { padding-top: 34px; /* vendor 52px — corporate hero is tighter */ } @media only screen and (max-width: 991px) { /* Below lg the copy sits over the whole image, so flatten the gradient to an even scrim — a left-weighted one would leave the text on the light end. */ .slider-area.style-1::before { background: linear-gradient( 180deg, rgba(20, 35, 27, 0.88) 0%, rgba(20, 35, 27, 0.82) 100% ); } .slider-area.style-1 { background-position: center center; } .slider-area.style-1 .te-slider-column { max-width: none; } } /* ============================================================================ 5. SECTION RHYTHM + SURFACES hero(dark) -> about(canvas) -> cards(paper) -> contact(canvas) -> footer(dark) ========================================================================== */ .about-us-area.style-1, .feature-area.style-1, .appointment-area.style-1 { padding-top: var(--rp-section-y, 96px); padding-bottom: var(--rp-section-y, 96px); } .about-us-area.style-1 { background-color: var(--rp-canvas, #FFFFFF); } .feature-area.style-1 { background-color: var(--rp-paper, #F5F7F6); } .appointment-area.style-1 { background-color: var(--rp-canvas, #FFFFFF); } @media only screen and (max-width: 767px) { .about-us-area.style-1, .feature-area.style-1, .appointment-area.style-1 { padding-top: 56px; padding-bottom: 56px; } } /* The template separates sections with stacks of
. Neutralize them so the padding above owns the rhythm instead of fighting it. */ .about-us-area + br, .feature-area + br, .slider-area + br, .appointment-area + br, br + br { display: none; } /* ---- About 2-col image card ---------------------------------------------- */ .te-about-image-card { display: block; padding-right: 0; gap: 0; border-radius: var(--rp-radius-lg, 4px); overflow: hidden; box-shadow: var(--rp-shadow-md, 0 8px 24px -8px rgba(20, 35, 27, 0.16)); background-color: var(--rp-paper, #F5F7F6); } .te-about-image-card img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Decorative confetti shapes behind the about image — charity-template tell. */ .te-about-image-card .about-image-card-shape-one, .te-about-image-card .about-image-card-shape-two { display: none; } .te-about-info-card .te-section-title .title { margin-bottom: 18px; } .te-about-info-card .te-section-desc p { color: var(--rp-ink-body, #3D4A43); font-size: var(--rp-size-body, 1.0625rem); line-height: 1.75; } /* Vendor paints this block Blackhawk-orange as a stat/foundation callout. */ .te-company-foundation-wrapper { background-color: var(--rp-paper, #F5F7F6); border-left: 3px solid var(--rp-orange, #E8720C); padding: 28px 32px; } /* ============================================================================ 6. CARDS — .te-info-card / .te-info-card.style-2 #111111 filled boxes -> white cards, hairline border, Georgia titles. ========================================================================== */ .te-info-card, .te-info-card.style-2, .te-info-card.style-3 { background-color: var(--rp-canvas, #FFFFFF); border: 1px solid var(--rp-line, #DFE4E1); border-radius: var(--rp-radius-lg, 4px); padding: 32px 28px; box-shadow: var(--rp-shadow-sm, 0 1px 2px rgba(20, 35, 27, 0.06)); transition: border-color var(--rp-dur, 180ms) var(--rp-ease), box-shadow var(--rp-dur, 180ms) var(--rp-ease), transform var(--rp-dur, 180ms) var(--rp-ease); } /* Restrained hover: 2px lift + an orange top edge. The accent appears on intent, so 6 cards don't shout orange at rest. */ .te-info-card:hover, .te-info-card.style-2:hover { transform: translateY(-2px); border-color: var(--rp-line-strong, #8B968F); box-shadow: inset 0 3px 0 0 var(--rp-orange, #E8720C), var(--rp-shadow-md, 0 8px 24px -8px rgba(20, 35, 27, 0.16)); } /* Vendor's orange top-rule variant — keep the idiom, use the brand token. */ .te-info-card.style-1 { border-top: 3px solid var(--rp-orange, #E8720C); text-align: left; } .te-info-card .te-content-wrapper .title, .te-info-card.style-2 .te-content-wrapper .title, .te-info-card .te-title-wrapper .title { font-family: var(--rp-font-display); font-size: var(--rp-size-h3, 1.375rem); font-weight: 700; line-height: 1.3; letter-spacing: -0.005em; text-transform: none; color: var(--rp-ink, #14231B); margin: 0 0 10px; } .te-info-card .te-content-wrapper .title a, .te-info-card .te-title-wrapper .title a { color: inherit; } .te-info-card:hover .te-content-wrapper .title, .te-info-card:hover .te-title-wrapper .title, .te-info-card .te-content-wrapper .title a:hover { color: var(--rp-green-deep, #006B31); } .te-info-card .content .desc, .te-info-card.style-2 .te-content-wrapper .desc { font-family: var(--rp-font-body); color: var(--rp-ink-body, #3D4A43); font-size: var(--rp-size-body, 1.0625rem); line-height: 1.7; text-align: left; } .te-info-card .content { align-items: flex-start; text-align: left; } /* Icon chip — orange tint square, orange-deep glyph. Sober, branded, and nothing here depends on white-on-orange (which is 3.07:1). */ .te-info-card .icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border: 0; padding: 0; margin-bottom: 20px; border-radius: var(--rp-radius, 3px); background-color: color-mix(in srgb, var(--rp-orange, #E8720C) 12%, transparent); color: var(--rp-orange-deep, #A34C08); font-size: 22px; } .te-info-card .icon i, .te-info-card .icon svg { color: var(--rp-orange-deep, #A34C08); fill: currentColor; } /* Inline "read more" link */ .read-btn a, a.read-btn, .te-info-card.style-2 .read-btn a { font-family: var(--rp-font-body); font-size: var(--rp-size-meta, 0.8125rem); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rp-green-deep, #006B31) !important; /* beats bh-custom's !important */ gap: 8px; } .read-btn a i, a.read-btn i { color: var(--rp-orange, #E8720C) !important; transition: transform var(--rp-dur, 180ms) var(--rp-ease); } .read-btn a:hover, a.read-btn:hover { color: var(--rp-orange-deep, #A34C08) !important; } .read-btn a:hover i, a.read-btn:hover i { color: var(--rp-orange-deep, #A34C08) !important; transform: translateX(3px); } /* ============================================================================ 7. BUTTONS DELIBERATE ROLE EXCEPTION: the primary CTA takes --bh-highlight (green), not --bh-accent (orange). Reason is measured, not aesthetic — white on #E8720C = 3.07:1 (fails), white on #00843D = 4.81:1 (passes). bh-custom.css works around this by putting near-black text on the orange button; that reads as logistics/hazard, not enterprise software. To flip back to an orange CTA: swap the two backgrounds below and set color to var(--rp-ink) — ink-on-orange measures 5.30:1 and is compliant. ========================================================================== */ .te-theme-btn, input.te-theme-btn, .wp-block-loginout a { font-family: var(--rp-font-body); font-size: 0.9375rem; /* 15px */ font-weight: 700; letter-spacing: 0.02em; text-transform: none; /* markup should use sentence case */ padding: 14px 28px; gap: 10px; border-radius: var(--rp-radius, 3px); background-color: var(--rp-green, #00843D); border: 1px solid var(--rp-green, #00843D); color: var(--rp-on-dark, #FFFFFF); box-shadow: none; transition: background-color var(--rp-dur, 180ms) var(--rp-ease), border-color var(--rp-dur, 180ms) var(--rp-ease), transform var(--rp-dur, 180ms) var(--rp-ease); } .te-theme-btn:hover, .te-theme-btn:focus, input.te-theme-btn:hover, .wp-block-loginout a:hover { background-color: var(--rp-green-deep, #006B31); border-color: var(--rp-green-deep, #006B31); color: var(--rp-on-dark, #FFFFFF); transform: translateY(-1px); } .te-theme-btn i, input.te-theme-btn i { font-size: 0.75rem; transition: transform var(--rp-dur, 180ms) var(--rp-ease); } .te-theme-btn:hover i { transform: translateX(3px); } /* Secondary / outline */ .te-theme-btn.style-2, input.te-theme-btn.style-2, .wp-block-loginout a.style-2 { background-color: transparent; border: 1px solid var(--rp-line-strong, #8B968F); color: var(--rp-ink, #14231B); } .te-theme-btn.style-2:hover, input.te-theme-btn.style-2:hover, .wp-block-loginout a.style-2:hover { background-color: transparent; border-color: var(--rp-green-deep, #006B31); color: var(--rp-green-deep, #006B31); } /* On the dark hero the outline button must invert. */ .slider-area .te-theme-btn.style-2 { border-color: rgba(255, 255, 255, 0.45); color: var(--rp-on-dark, #FFFFFF); } .slider-area .te-theme-btn.style-2:hover { border-color: var(--rp-on-dark, #FFFFFF); color: var(--rp-on-dark, #FFFFFF); } /* 44x44 minimum target (WCAG 2.5.5 / HIG) */ .te-theme-btn, input.te-theme-btn, .te-slider-btn-wrapper .te-slider-nav { min-height: 44px; } .te-slider-btn-wrapper .te-slider-nav { min-width: 44px; background-color: transparent; border: 1px solid var(--rp-line-strong, #8B968F); color: var(--rp-ink, #14231B); border-radius: var(--rp-radius, 3px); } .te-slider-btn-wrapper .te-slider-nav:hover { background-color: var(--rp-ink, #14231B); border-color: var(--rp-ink, #14231B); color: var(--rp-on-dark, #FFFFFF); } /* ============================================================================ 8. CONTACT — .appointment-area.style-1 ========================================================================== */ .appointment-area.style-1 .te-post-comments-form.style-2 { background-color: var(--rp-paper, #F5F7F6); border: 1px solid var(--rp-line, #DFE4E1); border-radius: var(--rp-radius-lg, 4px); padding: 40px; } @media (max-width: 767px) { .appointment-area.style-1 .te-post-comments-form.style-2 { padding: 24px 20px; } } .appointment-area .te-section-desc p, .appointment-area .te-section-desc p.text-white { color: var(--rp-ink-body, #3D4A43) !important; /* beats Bootstrap .text-white */ } /* Inputs: light, hairline, sharp. --rp-line-strong clears the 3:1 UI component threshold; --rp-line (1.29:1) would not and is never used here. */ .appointment-area input[type="text"], .appointment-area input[type="email"], .appointment-area input[type="tel"], .appointment-area input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), .appointment-area select, .appointment-area textarea, .te-contacts-email input, .te-contacts-name input, .te-contacts-message textarea { width: 100%; background-color: var(--rp-canvas, #FFFFFF); border: 1px solid var(--rp-line-strong, #8B968F); border-radius: var(--rp-radius, 3px); color: var(--rp-ink, #14231B); font-family: var(--rp-font-body); font-size: 1rem; /* >=16px — prevents iOS focus zoom */ line-height: 1.5; padding: 12px 14px; margin-bottom: 16px; min-height: 44px; transition: border-color var(--rp-dur, 180ms) var(--rp-ease), box-shadow var(--rp-dur, 180ms) var(--rp-ease); } .appointment-area input::placeholder, .appointment-area textarea::placeholder, .te-contacts-email input::placeholder, .te-contacts-name input::placeholder, .te-contacts-message textarea::placeholder { color: var(--rp-ink-muted, #6B7770); /* 4.67:1 — placeholders are text too */ text-transform: none; letter-spacing: 0; font-size: 1rem; } .appointment-area input:focus, .appointment-area select:focus, .appointment-area textarea:focus, .te-contacts-email input:focus, .te-contacts-name input:focus, .te-contacts-message textarea:focus { border-color: var(--rp-green-deep, #006B31); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rp-green, #00843D) 18%, transparent); outline: none; } .appointment-area label { color: var(--rp-ink-body, #3D4A43); font-family: var(--rp-font-body); font-size: var(--rp-size-meta, 0.8125rem); font-weight: 600; } /* Contact info cards — vendor uses rgba(255,255,255,.03) fills that vanish on white. */ .bh-contact-info-card, .bh-site-contact-card { background-color: var(--rp-paper, #F5F7F6); border: 1px solid var(--rp-line, #DFE4E1); border-radius: var(--rp-radius-lg, 4px); } .bh-contact-info-icon, .bh-site-contact-icon { background-color: color-mix(in srgb, var(--rp-orange, #E8720C) 12%, transparent); color: var(--rp-orange-deep, #A34C08); border-radius: var(--rp-radius, 3px); } .bh-contact-info-label, .bh-site-contact-label { font-family: var(--rp-font-body); color: var(--rp-ink-muted, #6B7770); letter-spacing: 0.12em; } .bh-contact-info-value, .bh-site-contact-value { font-family: var(--rp-font-body); color: var(--rp-ink, #14231B); } .bh-contact-info-value:hover, .bh-site-contact-value:hover { color: var(--rp-green-deep, #006B31); } .bh-contact-success i { color: var(--rp-green, #00843D); } .bh-contact-success p { font-family: var(--rp-font-body); color: var(--rp-ink-body, #3D4A43); } /* Status/validation must never be colour-only (WCAG 1.4.1) — pair with a glyph. */ .validation-message, .validation-errors, label.error { font-family: var(--rp-font-body); color: #9B1C1C; /* 6.4:1 on white */ font-size: var(--rp-size-meta, 0.8125rem); display: flex; align-items: center; gap: 6px; } .validation-message::before, .validation-errors::before, label.error::before { content: "\26A0"; /* warning sign — non-colour signal */ font-size: 0.875em; } /* ============================================================================ 9. HEADER / FOOTER ========================================================================== */ .header-area { background-color: transparent; } .header-top { background-color: var(--rp-ink, #14231B); color: var(--rp-on-dark-dim, rgba(255, 255, 255, 0.72)); } .header-top a { color: var(--rp-on-dark-dim, rgba(255, 255, 255, 0.72)); } .header-top a:hover { color: var(--rp-orange, #E8720C); } /* on dark: 5.32:1 */ /* Sticky state: white bar, ink nav — the B2B norm once you leave the hero. */ .te-sticky_menu, .te-sticky_menu .menu-wrapper, .header-area.style-3 .te-sticky_menu .menu-wrapper { background-color: var(--rp-canvas, #FFFFFF); border-bottom: 1px solid var(--rp-line, #DFE4E1); box-shadow: var(--rp-shadow-sm, 0 1px 2px rgba(20, 35, 27, 0.06)); } .te-sticky_menu a, .te-sticky_menu .te-main-menu ul li a { color: var(--rp-ink, #14231B); } .te-sticky_menu a:hover, .te-sticky_menu .te-main-menu ul li a:hover { color: var(--rp-green-deep, #006B31); } .te-header-btn .te-call-btn .icon { background-color: color-mix(in srgb, var(--rp-orange, #E8720C) 14%, transparent); color: var(--rp-orange-deep, #A34C08); border-radius: var(--rp-radius, 3px); } .te-header-btn .te-call-btn .call-info a:hover { color: var(--rp-green-deep, #006B31); } footer.footer, .footer-bottom-area { background-color: var(--rp-ink, #14231B); color: var(--rp-on-dark-dim, rgba(255, 255, 255, 0.72)); font-family: var(--rp-font-body); } footer.footer h1, footer.footer h2, footer.footer h3, footer.footer h4, footer.footer h5, footer.footer h6, footer.footer .title { color: var(--rp-on-dark, #FFFFFF); } footer.footer p, footer.footer .desc, .footer-bottom-area .te-copyright-text p { color: var(--rp-on-dark-dim, rgba(255, 255, 255, 0.72)); font-family: var(--rp-font-body); } footer.footer a { color: var(--rp-on-dark-dim, rgba(255, 255, 255, 0.72)); } footer.footer a:hover { color: var(--rp-orange, #E8720C); } /* 5.32:1 on ink */ /* Preloader / nav-transition curtain bars inherit --bh-dark -> ink. Restated here so the intent is explicit rather than incidental. */ .bh-preloader-bar, .bh-nt-col { background-color: var(--rp-ink, #14231B); } .bh-nt-spinner svg circle { stroke: var(--rp-orange, #E8720C); } /* ============================================================================ 10. MOTION — prefers-reduced-motion (WCAG 2.3.3 / HIG / M3) The template ships wow.js entrance animations, slick autoplay, a ticker keyframe and a `transition: all 0.5s` on every heading, none of which are guarded upstream. Blanket guard. ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .te-info-card:hover, .te-info-card.style-2:hover, .te-theme-btn:hover { transform: none; } .te-theme-btn:hover i, .read-btn a:hover i, a.read-btn:hover i { transform: none; } /* wow.js sets these inline/via class; force the end state so content is never left invisible when its animation is suppressed. */ .wow, .animated { animation-name: none !important; visibility: visible !important; opacity: 1 !important; } } /* ============================================================================ 11. DEAD TEMPLATE FURNITURE Sections dropped from the corporate site. Defensive: if any markup survives a copy-paste, it must not render a charity artifact. ========================================================================== */ .team-area, .latest-posts-area, .testimonial-slider-area, .brand-slider-area, .bh-sponsor-ticker-wrap, .bh-benefits-list { display: none; }