/* ============================================================ DYCO Drives — shared marketing design layer Reusable elements distilled from the Claude Design handoff. ADDITIVE + namespaced `.dy-*` so it never collides with any page's existing inline CSS. Light pages stay light; these add premium dark "feature bands", gradient accents, the OEM brand marquee, and the DYCO quality seal. Link in each page : ============================================================ */ /* ---- full-bleed DARK feature band ---- */ .dy-band { position: relative; overflow: hidden; background: #0a0a0f; color: rgba(255,255,255,.8); padding: 92px 0; } .dy-band--alt { background: #0c0c15; border-top: 1px solid rgba(255,255,255,.05); border-bottom: 1px solid rgba(255,255,255,.05); } .dy-band-inner { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 0 48px; } .dy-band-center { text-align: center; max-width: 760px; margin: 0 auto; } /* ---- glow auroras (place as empty children of .dy-band) ---- */ .dy-glow { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; } .dy-glow--blue { background: radial-gradient(circle, rgba(96,165,250,.17) 0%, rgba(96,165,250,0) 66%); } .dy-glow--teal { background: radial-gradient(circle, rgba(52,211,153,.10) 0%, rgba(52,211,153,0) 70%); } .dy-glow--gold { background: radial-gradient(circle, rgba(212,175,55,.12) 0%, rgba(212,175,55,0) 64%); } .dy-glow--tr { top: -160px; right: -120px; width: 560px; height: 560px; } .dy-glow--bl { bottom: -180px; left: -120px; width: 520px; height: 520px; } .dy-glow--tc { top: -120px; left: 50%; transform: translateX(-50%); width: 700px; height: 480px; } /* ---- gradient accents ---- */ .dy-grad { background: linear-gradient(135deg, #60a5fa, #34d399); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .dy-grad-num { background: linear-gradient(180deg, #fff 0%, rgba(96,165,250,.85) 138%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-variant-numeric: tabular-nums; letter-spacing: -.04em; } /* ---- overline kicker ---- */ .dy-overline { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: #60a5fa; } .dy-overline--gold { color: #d4af37; } .dy-overline--teal { color: #34d399; } /* ---- band typography ---- */ .dy-band h2.dy-h2 { font-size: 40px; font-weight: 800; line-height: 1.08; letter-spacing: -.03em; color: rgba(255,255,255,.97); margin: 16px 0; } .dy-lede { font-size: 16px; line-height: 1.7; color: rgba(255,255,255,.56); } .dy-lede strong { color: rgba(255,255,255,.82); font-weight: 700; } .dy-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } /* ---- frosted panels / cards on dark ---- */ .dy-panel { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.09); border-radius: 18px; backdrop-filter: blur(12px); box-shadow: 0 34px 80px rgba(0,0,0,.42); } .dy-card { background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 24px; transition: border-color .2s, background .2s; } .dy-card:hover { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.045); } .dy-card h3 { font-size: 16px; font-weight: 700; color: rgba(255,255,255,.95); margin: 0 0 8px; } .dy-card p { font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.55); margin: 0; } /* ---- dark-band buttons (match index hero CTAs) ---- */ .dy-btn { display: inline-flex; align-items: center; gap: 8px; background: #60a5fa; color: #0a0a0f; padding: 13px 28px; border-radius: 10px; font-size: 14.5px; font-weight: 700; text-decoration: none; box-shadow: 0 6px 22px rgba(96,165,250,.28); transition: transform .15s, background .15s; } .dy-btn:hover { background: #93c5fd; transform: translateY(-1px); } .dy-btn-ghost { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.85); padding: 13px 24px; border-radius: 10px; font-size: 14.5px; font-weight: 600; text-decoration: none; border: 1px solid rgba(255,255,255,.14); transition: border-color .15s, color .15s; } .dy-btn-ghost:hover { border-color: rgba(255,255,255,.3); color: #fff; } /* ---- live/verified pill ---- */ .dy-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; padding: 6px 13px; border-radius: 20px; background: rgba(52,211,153,.10); border: 1px solid rgba(52,211,153,.22); color: #34d399; } .dy-pill .dy-dot { width: 6px; height: 6px; border-radius: 50%; background: #34d399; animation: dyPulse 2s ease-in-out infinite; } @keyframes dyPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.8); } } /* ---- OEM brand marquee ---- */ .dy-marquee { position: relative; overflow: hidden; max-width: 900px; margin: 0 auto; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .dy-marquee-track { display: flex; width: max-content; gap: 44px; animation: dyMarq 32s linear infinite; font-weight: 700; font-size: 18px; letter-spacing: .04em; color: rgba(255,255,255,.3); white-space: nowrap; } @keyframes dyMarq { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ---- quality seal ---- */ .dy-seal { display: block; margin: 0 auto; filter: drop-shadow(0 8px 26px rgba(212,175,55,.20)); } .dy-seal--navy { filter: drop-shadow(0 8px 24px rgba(30,64,175,.18)); } /* ---- scroll reveal (opt-in: add class .dy-reveal; JS toggles .dy-in) ---- */ .dy-reveal { opacity: 0; transform: translateY(20px); } .dy-reveal.dy-in { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); } @media (prefers-reduced-motion: reduce) { .dy-pill .dy-dot, .dy-marquee-track { animation: none; } .dy-reveal { opacity: 1; transform: none; } } /* ---- responsive ---- */ @media (max-width: 768px) { .dy-band { padding: 60px 0; } .dy-band-inner { padding: 0 20px; } .dy-band h2.dy-h2 { font-size: 28px; } .dy-marquee-track { font-size: 15px; gap: 32px; } } /* ============================================================ MARKETING DARK THEME Flips the bespoke light pages to the handoff's dark aesthetic by overriding their shared CSS variables. `!important` on custom properties wins over each page's inline :root regardless of load order, so every surface that reads these vars (body, sections, cards, footers, borders, text) goes dark from this one file. The .dy-* feature bands use hardcoded dark colors and are unaffected. ============================================================ */ :root { --bg: #0a0a0f !important; --bg-subtle: #0c0c15 !important; --bg-muted: #13131f !important; --bg-card: #13131f !important; --text: rgba(255,255,255,.92) !important; --text-secondary: rgba(255,255,255,.72) !important; --text-muted: rgba(255,255,255,.5) !important; --text-light: rgba(255,255,255,.38) !important; --border: rgba(255,255,255,.08) !important; --border-light: rgba(255,255,255,.05) !important; --accent: #60a5fa !important; --accent-hover: #93c5fd !important; --accent-light: #60a5fa !important; --accent-bg: rgba(96,165,250,.12) !important; --accent-bg-strong: rgba(96,165,250,.22) !important; --green: #34d399 !important; --green-bg: rgba(52,211,153,.1) !important; --amber: #fbbf24 !important; --amber-bg: rgba(251,191,36,.1) !important; --teal: #2dd4bf !important; --teal-bg: rgba(45,212,191,.1) !important; --purple: #a78bfa !important; --purple-bg: rgba(167,139,250,.1) !important; } body { background: var(--bg); color: var(--text); } /* Dark/ink logos (footer wordmark, "Powered by SEP") render as white on dark. */ img[src*="-dark.png"], img[src*="/logo.png"] { filter: brightness(0) invert(1); } /* Accent-on-white CTA banners -> dark panel with a subtle top glow (white text on light-blue failed contrast once --accent lightened for dark mode). */ .proof-banner, .cta-banner, .cta-section, .final-cta { background: radial-gradient(circle at 50% 0%, rgba(96,165,250,.12), rgba(10,10,15,0) 62%), #0c0c15 !important; color: rgba(255,255,255,.92) !important; border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); } .proof-banner h2, .cta-banner h2, .cta-section h2, .final-cta h2 { color: #fff !important; } .proof-banner p, .cta-banner p, .cta-section p, .final-cta p { color: rgba(255,255,255,.7) !important; } /* keep the white CTA button readable (white bg + accent text) on the dark banner */ .btn-white { background: #60a5fa !important; color: #0a0a0f !important; } /* form fields on the dark theme (contact / request-access / newsletter) */ input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]), select, textarea { background: rgba(255,255,255,.04) !important; color: rgba(255,255,255,.92) !important; border-color: rgba(255,255,255,.14) !important; } input::placeholder, textarea::placeholder { color: rgba(255,255,255,.4) !important; } select option { background: #13131f; color: #fff; } /* ---- page-specific fixes: hardcoded-light backgrounds that the variable flip can't reach (white/light gradient + now-light text = invisible) ---- */ /* pricing.html — featured tier card used a white gradient */ .pricing-card.featured { background: linear-gradient(135deg, rgba(96,165,250,.16), rgba(96,165,250,.03)) !important; border-color: rgba(96,165,250,.4) !important; } /* about.html / pricing.html CTA buttons used a hardcoded white background */ .cta-button { background: #60a5fa !important; color: #0a0a0f !important; border-color: #60a5fa !important; } .cta-button-secondary { background: transparent !important; color: rgba(255,255,255,.9) !important; border: 1px solid rgba(255,255,255,.22) !important; box-shadow: none !important; }