/* ============================================================ v3 shared design system (single source for every page) Tokens, global type overrides, CTA buttons and the reduced-motion collapse. Page-specific styles stay inline in each page's . ============================================================ */ /* ============ Design tokens ============ */ :root { /* Type: serif display + neutral UI/body */ --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-body: "Public Sans", -apple-system, "Segoe UI", Helvetica, sans-serif; --font-ui: "Public Sans", -apple-system, "Segoe UI", Helvetica, sans-serif; /* Brand blue-green tonal scale (depth instead of one flat teal) */ --dark-0: #00171f; --dark-1: #062430; --dark-2: #0a3140; --brand-deep: #1f4e5e; --brand-teal: #3d94b0; --teal-light: #7fc1d4; --teal-wash: #eef5f7; /* Single warm accent, reserved for the primary CTA + "Winner" marks */ --brass: #a87f33; --brass-deep: #8c6a29; --ink: #14323e; --ink-soft: #44565e; --line: #dde6e9; /* Layered shadows: ambient + direct, tinted toward the brand hue */ --shadow-card: 0 1px 2px rgba(20, 50, 62, 0.06), 0 10px 28px rgba(20, 50, 62, 0.09); --shadow-card-hover: 0 2px 4px rgba(20, 50, 62, 0.08), 0 16px 40px rgba(20, 50, 62, 0.14); } /* ============ Global type overrides ============ */ /* The template's .oswald/.raleway utility classes are applied all over the markup; repointing them swaps the whole page onto the new type system without touching every element. */ body, p, .raleway { font-family: var(--font-body); } .oswald { font-family: var(--font-display); } /* Nav stays small caps, but in the UI face, not the display serif */ #navigation .nav a, .second-nav .nav a { font-family: var(--font-ui); font-weight: 600; letter-spacing: 0.08em; } /* ============ Section CTA buttons ============ */ /* The warm brass is reserved for the primary action ("Get Started" / "Request a Call"); everything secondary is a quiet ghost. */ .cta-btn { display: inline-block; font-family: var(--font-ui); font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; background: var(--brass); color: #fff !important; border: 0; padding: 15px 34px; border-radius: 5px; cursor: pointer; font-size: 13.5px; text-decoration: none; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .cta-btn:hover { background: var(--brass-deep); color: #fff !important; box-shadow: 0 6px 18px rgba(168, 127, 51, 0.35); } .cta-btn.ghost { background: transparent; border: 1px solid var(--brand-teal); color: var(--brand-teal) !important; padding: 14px 33px; } .cta-btn.ghost:hover { background: var(--brand-teal); color: #fff !important; box-shadow: none; } /* Ghost on dark surfaces (hero, dark bands) */ #home .cta-btn.ghost, .dark-band .cta-btn.ghost { border-color: rgba(255, 255, 255, 0.45); color: #fff !important; } #home .cta-btn.ghost:hover, .dark-band .cta-btn.ghost:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.8); } /* ============ Legal small print (shared) ============ */ /* Landing page: the legal lines live at the end of the #contacts dark band (one merged closing section, no separate footer band). The Platform page keeps a minimal standalone footer with the same two lines on the template's flat dark background. */ footer.big-footer.dark-footer, footer.big-footer.dark-footer .footer_bottom { border-top: 0; } footer.big-footer.dark-footer .footer_bottom { padding: 34px 0 30px; } /* Clearly detached from the content above it (wider than the band's own title-to-cards rhythm), tight close below: the section's own padding provides the last ~44px under the entity line */ .band-footer { margin-top: 72px; padding-bottom: 0; /* cancel the template's generic footer padding */ } @media (max-width: 760px) { .band-footer { margin-top: 56px; } } /* Selectors carry a parent qualifier so they outrank the template's generic ".dark-band p" / "footer .footer_bottom p" rules */ .dark-band p.footer-legal, footer.big-footer .footer_bottom p.footer-legal { font-family: var(--font-ui); font-size: 12px; line-height: 1.6; color: rgba(255, 255, 255, 0.55); margin: 0 0 4px; } .dark-band p.footer-legal.entity, footer.big-footer .footer_bottom p.footer-legal.entity { font-size: 11.5px; color: rgba(255, 255, 255, 0.4); } /* The one footer link (privacy) sits inline in the small print: same color as its line, a faint underline marks it as clickable */ .dark-band p.footer-legal a, footer.big-footer.dark-footer .footer_bottom p.footer-legal a { color: inherit; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.3); text-underline-offset: 3px; } .dark-band p.footer-legal a:hover, .dark-band p.footer-legal a:focus, footer.big-footer.dark-footer .footer_bottom p.footer-legal a:hover, footer.big-footer.dark-footer .footer_bottom p.footer-legal a:focus { color: #fff; opacity: 1; /* cancel the template's 0.7 hover fade */ } /* ============ Motion ============ */ /* Honor reduced-motion: collapse transitions/animations to instant */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-delay: 0s !important; /* staggered reveals appear at once */ animation-iteration-count: 1 !important; } }