/* ========================================================================== Arbor Care Management - Global Footer Styles Version: 1.0.0 A unified, modular footer stylesheet for the Arbor Care Management software ecosystem. Drop this file into any of the three sites to maintain visual parity. SITES SUPPORTED: - arborcaremanagement.com (Parent Hub) - arborachieve.com (CRM Product) - arboralign.com (Messaging Product) USAGE: 1. Link this stylesheet in your 2. Set data-current-site attribute on .acm-footer element 3. Override --acm-accent-* variables if needed for product-specific theming ========================================================================== */ /* ========================================================================== CSS Custom Properties - Design Tokens These match your existing brand system from arborcaremanagement.com. Override these at the :root or .acm-footer level for product variants. ========================================================================== */ :root { /* Core Brand Colors */ --acm-forest-green: #607244; --acm-forest-dark: #4a5a35; --acm-forest-light: #7a8c5e; --acm-warm-tan: #dbccb6; --acm-tan-light: #e8ddd0; --acm-tan-dark: #c4b199; --acm-muted-brown: #92836c; --acm-cream: #f5f1eb; --acm-text-dark: #2d3424; --acm-text-light: #f5f1eb; /* Accent Colors (can be overridden per-product) */ --acm-accent-primary: var(--acm-forest-green); --acm-accent-hover: var(--acm-forest-dark); /* Typography */ --acm-font-display: 'Cormorant Garamond', Georgia, serif; --acm-font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif; /* Spacing */ --acm-space-xs: 0.5rem; --acm-space-sm: 1rem; --acm-space-md: 1.5rem; --acm-space-lg: 2.5rem; --acm-space-xl: 4rem; /* Layout */ --acm-max-width: 1200px; --acm-border-radius: 8px; /* Transitions */ --acm-transition-fast: 0.2s ease; --acm-transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* ========================================================================== Product-Specific Accent Overrides Apply these to the .acm-footer element or :root when on product sites. Example: On arborachieve.com, add class "acm-footer--achieve" ========================================================================== */ .acm-footer--achieve { --acm-accent-primary: #5a7a4a; /* Slightly different green for Achieve */ --acm-accent-hover: #4a6a3a; } .acm-footer--align { --acm-accent-primary: #6a8254; /* Slightly different green for Align */ --acm-accent-hover: #5a7244; } /* ========================================================================== Brand Bar - "Part of the Suite" Strip A thin bar above the main footer that reinforces ecosystem membership. Can be placed above OR below the main footer content. ========================================================================== */ .acm-brand-bar { background: var(--acm-forest-green); padding: var(--acm-space-xs) var(--acm-space-md); } .acm-brand-bar__inner { max-width: var(--acm-max-width); margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: var(--acm-space-xs); flex-wrap: wrap; } .acm-brand-bar__text { font-family: var(--acm-font-body); font-size: 0.8125rem; color: rgba(255, 255, 255, 0.7); font-weight: 400; } .acm-brand-bar__link { display: inline-flex; align-items: center; gap: 0.375rem; font-family: var(--acm-font-body); font-size: 0.875rem; font-weight: 600; color: var(--acm-text-light); text-decoration: none; transition: var(--acm-transition-fast); } .acm-brand-bar__link:hover { color: var(--acm-warm-tan); } .acm-brand-bar__icon { width: 16px; height: 16px; opacity: 0.9; } /* ========================================================================== Global Footer - Main Container ========================================================================== */ .acm-footer { background: var(--acm-text-dark); color: var(--acm-tan-light); padding: var(--acm-space-xl) var(--acm-space-md) 0; font-family: var(--acm-font-body); } .acm-footer__inner { max-width: var(--acm-max-width); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--acm-space-lg); } /* ========================================================================== Footer Columns - Base Styles ========================================================================== */ .acm-footer__col { display: flex; flex-direction: column; } .acm-footer__heading { font-family: var(--acm-font-display); font-size: 1.125rem; font-weight: 500; color: var(--acm-warm-tan); margin-bottom: var(--acm-space-sm); display: flex; align-items: center; gap: var(--acm-space-xs); } .acm-footer__heading-icon { width: 18px; height: 18px; opacity: 0.8; } /* ========================================================================== Column 1: Brand & Family of Products ========================================================================== */ .acm-footer__brand { grid-column: span 1; } .acm-footer__logo-link { display: inline-block; transition: var(--acm-transition-fast); } .acm-footer__logo-link:hover { opacity: 0.85; } .acm-footer__logo { height: 150px; width: auto; margin-bottom: var(--acm-space-xs); } .acm-footer__tagline { font-family: var(--acm-font-display); font-style: italic; font-size: 0.9375rem; color: var(--acm-warm-tan); margin-bottom: var(--acm-space-md); line-height: 1.4; } /* Family of Products Section */ .acm-footer__family { margin-top: auto; } .acm-footer__family-label { display: block; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--acm-muted-brown); margin-bottom: var(--acm-space-sm); } .acm-footer__family-products { display: flex; flex-direction: row; gap: var(--acm-space-sm); flex-wrap: wrap; } /* Individual Product Card in Family Section */ .acm-footer__product { display: flex; flex-direction: column; align-items: center; gap: var(--acm-space-xs); padding: var(--acm-space-sm); background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(219, 204, 182, 0.1); border-radius: var(--acm-border-radius); text-decoration: none; transition: var(--acm-transition-fast); text-align: center; } .acm-footer__product:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(219, 204, 182, 0.2); transform: translateY(-2px); } .acm-footer__product-current { border-color: var(--acm-accent-primary); background: rgba(96, 114, 68, 0.15); } .acm-footer__product-logo { width: 100%; max-height: 60px; object-fit: contain; flex-shrink: 0; } .acm-footer__product-name { display: block; font-weight: 600; font-size: 0.9375rem; color: var(--acm-tan-light); line-height: 1.2; } .acm-footer__product-desc { display: block; font-size: 0.75rem; color: var(--acm-muted-brown); line-height: 1.3; } /* ========================================================================== Column 2: Quick Switch Navigation ========================================================================== */ .acm-footer__tools { grid-column: span 1; } .acm-footer__nav { list-style: none; padding: 0; margin: 0 0 var(--acm-space-md) 0; display: flex; flex-direction: column; gap: var(--acm-space-xs); } .acm-footer__nav li a { display: inline-flex; align-items: center; gap: var(--acm-space-xs); color: var(--acm-tan-light); text-decoration: none; font-size: 0.9375rem; padding: var(--acm-space-xs) 0; transition: var(--acm-transition-fast); position: relative; } .acm-footer__nav li a:hover { color: var(--acm-warm-tan); } .acm-footer__nav li a::before { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: var(--acm-accent-primary); transition: var(--acm-transition-fast); } .acm-footer__nav li a:hover::before { width: 100%; } .acm-footer__nav li a svg { width: 16px; height: 16px; opacity: 0.7; flex-shrink: 0; } /* Current Site Highlight */ .acm-footer__nav-current { color: var(--acm-accent-primary) !important; font-weight: 600; } .acm-footer__nav-current::after { content: '(current)'; font-size: 0.6875rem; font-weight: 400; color: var(--acm-muted-brown); margin-left: var(--acm-space-xs); } /* Login Links */ .acm-footer__logins { display: flex; align-items: center; gap: var(--acm-space-xs); font-size: 0.8125rem; padding-top: var(--acm-space-sm); border-top: 1px solid rgba(219, 204, 182, 0.1); } .acm-footer__logins-label { color: var(--acm-muted-brown); } .acm-footer__login-link { color: var(--acm-tan-light); text-decoration: none; transition: var(--acm-transition-fast); } .acm-footer__login-link:hover { color: var(--acm-accent-primary); } .acm-footer__login-divider { color: var(--acm-muted-brown); opacity: 0.5; } /* ========================================================================== Column 3: Support Navigation ========================================================================== */ .acm-footer__support { grid-column: span 1; } /* ========================================================================== Column 4: Contact & Social ========================================================================== */ .acm-footer__contact { grid-column: span 1; } .acm-footer__contact-list { list-style: none; padding: 0; margin: 0 0 var(--acm-space-md) 0; display: flex; flex-direction: column; gap: var(--acm-space-xs); } .acm-footer__contact-list li a { display: inline-flex; align-items: center; gap: var(--acm-space-xs); color: var(--acm-tan-light); text-decoration: none; font-size: 0.9375rem; padding: var(--acm-space-xs) 0; transition: var(--acm-transition-fast); } .acm-footer__contact-list li a:hover { color: var(--acm-warm-tan); } .acm-footer__contact-list svg { width: 18px; height: 18px; opacity: 0.7; flex-shrink: 0; } /* Social Links */ .acm-footer__social { display: flex; gap: var(--acm-space-sm); margin-top: auto; } .acm-footer__social-link { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(219, 204, 182, 0.15); border-radius: 50%; color: var(--acm-tan-light); transition: var(--acm-transition-fast); } .acm-footer__social-link:hover { background: var(--acm-accent-primary); border-color: var(--acm-accent-primary); color: var(--acm-text-light); transform: translateY(-2px); } .acm-footer__social-link svg { width: 18px; height: 18px; } /* ========================================================================== Footer Bottom - Legal & Copyright ========================================================================== */ .acm-footer__bottom { margin-top: var(--acm-space-lg); padding: var(--acm-space-md) 0; border-top: 1px solid rgba(219, 204, 182, 0.12); background: rgba(0, 0, 0, 0.15); } .acm-footer__bottom-inner { max-width: var(--acm-max-width); margin: 0 auto; padding: 0 var(--acm-space-md); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--acm-space-sm); } .acm-footer__copyright { font-size: 0.8125rem; color: var(--acm-muted-brown); margin: 0; } .acm-footer__legal { display: flex; gap: var(--acm-space-md); } .acm-footer__legal a { font-size: 0.8125rem; color: var(--acm-muted-brown); text-decoration: none; transition: var(--acm-transition-fast); } .acm-footer__legal a:hover { color: var(--acm-tan-light); } /* ========================================================================== Responsive Styles - Tablet ========================================================================== */ @media (max-width: 1024px) { .acm-footer__inner { grid-template-columns: repeat(2, 1fr); gap: var(--acm-space-lg) var(--acm-space-md); } .acm-footer__brand { grid-column: span 2; text-align: center; align-items: center; } .acm-footer__family-products { flex-direction: row; justify-content: center; flex-wrap: wrap; } .acm-footer__product { flex: 1; min-width: 200px; max-width: 280px; } } /* ========================================================================== Responsive Styles - Mobile ========================================================================== */ @media (max-width: 640px) { .acm-footer { padding: var(--acm-space-lg) var(--acm-space-sm) 0; } .acm-footer__inner { grid-template-columns: 1fr; gap: var(--acm-space-lg); text-align: center; } .acm-footer__brand { grid-column: span 1; } .acm-footer__heading { justify-content: center; } .acm-footer__family-products { flex-direction: column; align-items: center; } .acm-footer__product { width: 100%; max-width: 300px; justify-content: flex-start; } .acm-footer__nav { align-items: center; } .acm-footer__nav li a { justify-content: center; } .acm-footer__contact-list { align-items: center; } .acm-footer__contact-list li a { justify-content: center; } .acm-footer__social { justify-content: center; } .acm-footer__logins { justify-content: center; } .acm-footer__bottom-inner { flex-direction: column; text-align: center; gap: var(--acm-space-sm); } .acm-footer__legal { flex-wrap: wrap; justify-content: center; gap: var(--acm-space-sm); } /* Brand Bar Mobile */ .acm-brand-bar__inner { flex-direction: column; gap: 0.25rem; } } /* ========================================================================== Accessibility & Motion Preferences ========================================================================== */ @media (prefers-reduced-motion: reduce) { .acm-footer *, .acm-footer *::before, .acm-footer *::after, .acm-brand-bar *, .acm-brand-bar *::before, .acm-brand-bar *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* Focus states for keyboard navigation */ .acm-footer a:focus-visible, .acm-brand-bar a:focus-visible { outline: 2px solid var(--acm-accent-primary); outline-offset: 2px; border-radius: 2px; } /* ========================================================================== Print Styles ========================================================================== */ @media print { .acm-brand-bar, .acm-footer__social { display: none; } .acm-footer { background: #fff; color: #333; padding: 1rem; } .acm-footer__inner { grid-template-columns: 1fr; } .acm-footer a { color: #333; } .acm-footer a::after { content: ' (' attr(href) ')'; font-size: 0.75rem; color: #666; } }