/* ================================================================ /assets/css/equal-opportunity-employer.css Component styles for /about/equal-opportunity-employer/ Prefix: eeo- | All values from :root tokens defined inline in the page — never hardcode hex here. ================================================================ */ *, *::before, *::after { box-sizing: border-box; } .eeo-page { font-family: 'Lato', system-ui, sans-serif; color: var(--tx); background: var(--cr); line-height: 1.75; } .eeo-page img { max-width: 100%; height: auto; display: block; } .eeo-page a { color: var(--nv-s); } /* ---------- Skip Link ---------- */ .eeo-skip { position: absolute; top: -120px; left: 1rem; background: var(--gd); color: var(--nv); font-weight: 700; padding: .6rem 1.2rem; border-radius: 6px; text-decoration: none; z-index: 9999; transition: top 240ms cubic-bezier(.4,0,.2,1); } .eeo-skip:focus { top: 1rem; } /* ---------- Progress bar ---------- */ .eeo-prog { position: fixed; top: 0; left: 0; width: 0; height: 3px; background: linear-gradient(90deg, var(--gd), var(--gl)); z-index: 9100; pointer-events: none; will-change: width; } /* ---------- WhatsApp float ---------- */ .eeo-wa { position: fixed; bottom: 5.5rem; right: 1.25rem; z-index: 899; width: 52px; height: 52px; border-radius: 50%; background: var(--em); color: var(--wh); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; text-decoration: none; box-shadow: 0 4px 20px rgba(16,185,129,.45); transition: transform 240ms cubic-bezier(.4,0,.2,1), box-shadow 240ms cubic-bezier(.4,0,.2,1); -webkit-tap-highlight-color: transparent; min-height: 52px; } .eeo-wa:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(16,185,129,.55); } .eeo-wa:focus-visible { box-shadow: var(--focus); border-radius: 50%; outline: none; } /* ---------- AI Summary Strip ---------- */ .eeo-ai-strip { background: var(--nv); border-bottom: 2px solid var(--gd); } .eeo-ai-inner { max-width: 1260px; margin: 0 auto; padding: .75rem 1.5rem; display: flex; align-items: flex-start; gap: .7rem; } .eeo-ai-inner > i { color: var(--gd); font-size: .85rem; flex-shrink: 0; margin-top: .2rem; } #eeo-ai-summary { font-size: .8rem; color: rgba(255,255,255,.82); line-height: 1.6; } #eeo-ai-summary strong { color: var(--wh); } /* ---------- Breadcrumb ---------- */ .eeo-bc { background: var(--nv); padding: .55rem 0; border-bottom: 1px solid rgba(255,255,255,.07); } .eeo-bc-inner { max-width: 1260px; margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: center; gap: .4rem; font-size: .77rem; color: rgba(255,255,255,.5); flex-wrap: wrap; } .eeo-bc-inner a { color: rgba(255,255,255,.65); text-decoration: none; transition: color 240ms; } .eeo-bc-inner a:hover { color: var(--gl); } .eeo-bc-inner a:focus-visible { box-shadow: var(--focus); border-radius: 4px; outline: none; } .eeo-bc-sep { font-size: .6rem; opacity: .35; } .eeo-bc-cur { color: var(--gl); font-weight: 700; } /* ---------- Hero ---------- */ .eeo-hero { background: linear-gradient(160deg, var(--nv-m) 0%, var(--nv) 40%, var(--nv-s) 70%, var(--nv-m) 100%); padding: 4.5rem 1.5rem 3.5rem; } .eeo-hero-inner { max-width: 1260px; margin: 0 auto; } .eeo-hero-badge { display: inline-flex; align-items: center; gap: .5rem; background: rgba(201,168,76,.15); border: 1px solid rgba(201,168,76,.3); color: var(--gl); font-size: .72rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; padding: .35rem 1.1rem; border-radius: 100px; margin-bottom: 1.25rem; } .eeo-hero h1 { font-family: 'Cinzel', serif; font-size: clamp(1.8rem, 4vw, 2.75rem); font-weight: 800; color: var(--wh); line-height: 1.2; margin: 0 0 1rem; } .eeo-hero h1 .eeo-acc { color: var(--gd); } .eeo-hero-sub { font-size: 1.02rem; color: rgba(255,255,255,.75); line-height: 1.85; max-width: 720px; margin: 0 0 1.75rem; } .eeo-chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.75rem; } .eeo-chip { display: flex; align-items: center; gap: .45rem; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: .45rem .85rem; font-size: .82rem; color: rgba(255,255,255,.82); } .eeo-chip i { color: var(--gl); font-size: .75rem; } .eeo-chip strong { color: var(--wh); } .eeo-hero-cta { display: flex; gap: .85rem; flex-wrap: wrap; } /* ---------- Buttons ---------- */ .eeo-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 1.75rem; border-radius: 10px; font-family: 'Lato', system-ui, sans-serif; font-size: .92rem; font-weight: 900; text-decoration: none; border: none; cursor: pointer; transition: transform 240ms cubic-bezier(.4,0,.2,1), box-shadow 240ms cubic-bezier(.4,0,.2,1); -webkit-tap-highlight-color: transparent; min-height: 44px; } .eeo-btn:hover { transform: translateY(-2px); } .eeo-btn:focus-visible { box-shadow: var(--focus); outline: none; border-radius: 10px; } .eeo-btn--gold { background: linear-gradient(135deg, var(--gd), var(--gl)); color: var(--nv); box-shadow: 0 6px 20px rgba(201,168,76,.3); } .eeo-btn--gold:hover { box-shadow: 0 10px 32px rgba(201,168,76,.4); } .eeo-btn--outline { background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.28); color: var(--wh); } .eeo-btn--outline:hover { background: rgba(255,255,255,.13); } /* ---------- Sections ---------- */ .eeo-sec { padding: 3.25rem 0; } .eeo-sec--wh { background: var(--wh); } .eeo-sec--cr { background: var(--cr); } .eeo-sec--nv { background: linear-gradient(155deg, var(--nv-m) 0%, var(--nv) 50%, var(--nv-s) 100%); } .eeo-wrap { max-width: 1260px; margin: 0 auto; padding: 0 1.5rem; } .eeo-center { text-align: center; } .eeo-sec-tag { display: inline-flex; align-items: center; gap: .4rem; font-size: .67rem; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; color: var(--gk); margin-bottom: .5rem; } .eeo-sec-h2 { font-family: 'Cinzel', serif; font-size: clamp(1.3rem, 3vw, 1.8rem); font-weight: 700; color: var(--nv); line-height: 1.25; margin: 0 0 .6rem; } .eeo-sec-sub { font-size: .95rem; color: var(--tm); line-height: 1.85; max-width: 700px; margin: 0 auto 2.25rem; } .eeo-sec-sub a { color: var(--nv-s); font-weight: 700; } /* ---------- Commitment cards ---------- */ .eeo-commit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-bottom: 2rem; } .eeo-commit-card { background: var(--wh); border: 1px solid var(--bd); border-radius: 14px; padding: 1.6rem; transition: border-color 240ms, transform 240ms; } .eeo-commit-card:hover { border-color: var(--gd); transform: translateY(-2px); } .eeo-commit-ico { width: 50px; height: 50px; background: linear-gradient(135deg, var(--nv), var(--nv-s)); color: var(--gl); border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; margin-bottom: .9rem; } .eeo-commit-card h3 { font-family: 'Cinzel', serif; font-size: .9rem; font-weight: 700; color: var(--nv); margin: 0 0 .55rem; } .eeo-commit-card p { font-size: .87rem; color: var(--tx); line-height: 1.72; margin: 0; } /* ---------- Practice list ---------- */ .eeo-practice-list { display: flex; flex-direction: column; gap: 1.1rem; margin-bottom: 2rem; } .eeo-practice-item { display: flex; gap: 1.1rem; background: var(--wh); border: 1px solid var(--bd); border-radius: 12px; padding: 1.3rem 1.5rem; } .eeo-practice-num { font-family: 'Cinzel', serif; font-size: 1.4rem; font-weight: 800; color: var(--gd); line-height: 1; flex-shrink: 0; width: 38px; } .eeo-practice-body h3 { font-family: 'Cinzel', serif; font-size: .88rem; font-weight: 700; color: var(--nv); margin: 0 0 .45rem; } .eeo-practice-body p { font-size: .86rem; color: var(--tx); line-height: 1.72; margin: 0; } /* ---------- Callout ---------- */ .eeo-callout { display: flex; gap: .8rem; padding: 1.05rem 1.25rem; border-radius: 10px; margin: 1.5rem 0; font-size: .87rem; line-height: 1.78; } .eeo-callout > i { flex-shrink: 0; font-size: .95rem; margin-top: .15rem; } .eeo-callout p { margin: 0; } .eeo-callout--gold { background: var(--gp); border-left: 4px solid var(--gd); color: var(--gt); } .eeo-callout--gold > i { color: var(--gk); } .eeo-callout--em { background: var(--em-p); border-left: 4px solid var(--em); color: var(--em-b); } .eeo-callout--em > i { color: var(--em); } /* ---------- Non-Discrimination Policy formal section ---------- */ .eeo-policy-section { background: var(--wh); border: 1px solid var(--bd); border-radius: 16px; padding: 2rem 2.25rem; display: flex; flex-direction: column; gap: 1.75rem; } .eeo-policy-block h3 { font-family: 'Cinzel', serif; font-size: .95rem; font-weight: 700; color: var(--nv); margin: 0 0 .7rem; display: flex; align-items: center; gap: .5rem; } .eeo-policy-block h3 i { color: var(--gd); font-size: .8rem; } .eeo-policy-block p { font-size: .89rem; color: var(--tx); line-height: 1.8; margin: 0 0 .6rem; } .eeo-policy-block p:last-child { margin-bottom: 0; } .eeo-policy-block ul { margin: .5rem 0 0; padding-left: 1.3rem; } .eeo-policy-block li { font-size: .87rem; color: var(--tx); line-height: 1.75; margin-bottom: .35rem; } /* ---------- Contact / report-a-concern grid ---------- */ .eeo-contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.2rem; } .eeo-contact-card { background: var(--wh); border: 1px solid var(--bd); border-radius: 14px; padding: 1.6rem; text-align: center; transition: border-color 240ms; } .eeo-contact-card:hover { border-color: var(--gd); } .eeo-contact-ico { width: 50px; height: 50px; margin: 0 auto .9rem; background: linear-gradient(135deg, var(--nv), var(--nv-s)); color: var(--gl); border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; } .eeo-contact-card h3 { font-family: 'Cinzel', serif; font-size: .88rem; font-weight: 700; color: var(--nv); margin: 0 0 .5rem; } .eeo-contact-card p { font-size: .87rem; margin: 0 0 .3rem; } .eeo-contact-card p:last-child { margin-bottom: 0; } .eeo-contact-note { font-size: .76rem; color: var(--tm); } /* ---------- FAQ Accordion ---------- */ .eeo-faq { max-width: 900px; margin: 1.25rem auto; } .eeo-faq-item { border-bottom: 1px solid var(--bd); position: relative; } .eeo-faq-item:first-child { border-top: 1px solid var(--bd); } .eeo-faq-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(180deg, var(--gd), var(--gl)); transition: width 240ms; pointer-events: none; z-index: 1; } .eeo-faq-item.eeo-open::before { width: 3px; } .eeo-faq-q { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: .85rem; width: 100%; padding: 1.05rem 1.15rem; cursor: pointer; font-family: 'Lato', system-ui, sans-serif; font-size: .9rem; font-weight: 700; color: var(--nv); background: var(--wh); min-height: 52px; transition: background 240ms; -webkit-tap-highlight-color: transparent; } .eeo-faq-q:hover, .eeo-faq-item.eeo-open .eeo-faq-q { background: var(--gp); } .eeo-faq-q:focus-visible { outline: 2px solid var(--gd); outline-offset: -2px; } .eeo-faq-num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; min-width: 28px; border-radius: 6px; background: var(--cr); color: var(--tm); font-size: .67rem; font-weight: 900; font-family: 'Cinzel', serif; transition: background 240ms, color 240ms; flex-shrink: 0; } .eeo-faq-item.eeo-open .eeo-faq-num { background: linear-gradient(135deg, var(--gd), var(--gl)); color: var(--nv); } .eeo-faq-txt { flex: 1; line-height: 1.45; } .eeo-faq-icon { color: var(--tm); font-size: .7rem; flex-shrink: 0; transition: transform 240ms, color 240ms; margin-left: auto; } .eeo-faq-item.eeo-open .eeo-faq-icon { transform: rotate(180deg); color: var(--gd); } .eeo-faq-a { display: block; max-height: 0; overflow: hidden; opacity: 0; padding: 0 1.15rem 0 3.75rem; font-size: .87rem; color: var(--tx); line-height: 1.85; background: var(--gp); transition: max-height .38s cubic-bezier(.4,0,.2,1), opacity .28s, padding .35s; } .eeo-faq-item.eeo-open .eeo-faq-a { max-height: 600px; opacity: 1; padding: .9rem 1.15rem 1.05rem 3.75rem; } .eeo-faq-a p { margin: 0; } .eeo-faq-a a { color: var(--nv-s); font-weight: 700; text-decoration: none; } .eeo-faq-a a:hover { text-decoration: underline; } /* ---------- Related resources ---------- */ .eeo-rel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.1rem; } .eeo-rel-card { background: var(--wh); border: 1px solid var(--bd); border-radius: 12px; padding: 1.3rem; text-decoration: none; display: block; transition: border-color 240ms, transform 240ms; } .eeo-rel-card:hover { border-color: var(--gd); transform: translateY(-3px); } .eeo-rel-ico { width: 42px; height: 42px; background: linear-gradient(135deg, var(--nv), var(--nv-s)); color: var(--gl); border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: .95rem; margin-bottom: .8rem; } .eeo-rel-card h3 { font-family: 'Cinzel', serif; font-size: .85rem; font-weight: 700; color: var(--nv); margin: 0 0 .35rem; } .eeo-rel-card p { font-size: .78rem; color: var(--tm); margin: 0; line-height: 1.55; } /* ---------- Final CTA ---------- */ .eeo-final-wrap { max-width: 860px; margin: 0 auto; text-align: center; padding: 3.5rem 1.5rem; } .eeo-final-wrap h2 { font-family: 'Cinzel', serif; font-size: clamp(1.25rem, 3vw, 1.7rem); font-weight: 800; color: var(--wh); margin: 0 0 .75rem; } .eeo-final-wrap p { font-size: .95rem; color: rgba(255,255,255,.72); line-height: 1.8; margin: 0 0 1.75rem; } .eeo-final-btns { display: flex; gap: .85rem; justify-content: center; flex-wrap: wrap; } /* ---------- Mobile sticky bar ---------- */ .eeo-sticky { position: fixed; bottom: 0; left: 0; right: 0; background: var(--nv); border-top: 2px solid var(--gd); display: flex; z-index: 700; padding-bottom: env(safe-area-inset-bottom); } .eeo-sticky a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .22rem; padding: .65rem .4rem; color: rgba(255,255,255,.72); text-decoration: none; font-size: .6rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; transition: color 240ms, background 240ms; -webkit-tap-highlight-color: transparent; min-height: 44px; border-right: 1px solid rgba(255,255,255,.07); } .eeo-sticky a:last-child { border-right: none; } .eeo-sticky a i { font-size: 1.1rem; } .eeo-sticky a:hover { color: var(--gd); background: rgba(201,168,76,.07); } .eeo-sticky a:focus-visible { box-shadow: var(--focus) inset; outline: none; } /* ---------- Reveal ---------- */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity .45s ease, transform .45s ease; } .reveal.vis { opacity: 1; transform: none; } /* ---------- Responsive: 900px breakpoint ---------- */ @media (max-width: 900px) { .eeo-commit-grid { grid-template-columns: 1fr; } .eeo-contact-grid { grid-template-columns: 1fr; } .eeo-policy-section { padding: 1.5rem 1.4rem; } } /* ---------- Responsive: 760px breakpoint ---------- */ @media (max-width: 760px) { .eeo-hero { padding: 3rem 1rem 2.5rem; } .eeo-hero-cta { flex-direction: column; } .eeo-hero-cta .eeo-btn { justify-content: center; } .eeo-wrap { padding: 0 1rem; } .eeo-sec { padding: 2.5rem 0; } .eeo-final-btns { flex-direction: column; align-items: center; } .eeo-final-btns .eeo-btn { width: 100%; max-width: 320px; justify-content: center; } .eeo-faq-a { padding: 0 1rem 0 3.4rem; } .eeo-faq-item.eeo-open .eeo-faq-a { padding: .85rem 1rem .95rem 3.4rem; } .eeo-practice-item { flex-direction: column; gap: .6rem; } } /* ---------- Reduced motion — required on every HOA page ---------- */ @media (prefers-reduced-motion: reduce) { .eeo-page *, .eeo-page *::before, .eeo-page *::after { transition: none !important; animation: none !important; } .eeo-page .reveal { opacity: 1; transform: none; } } /* ---------- Touch targets & tap highlight — required sitewide ---------- */ .eeo-page a, .eeo-page button { -webkit-tap-highlight-color: transparent; } .eeo-page a[href], .eeo-page button { min-height: 44px; } .eeo-page :focus-visible { box-shadow: var(--focus); border-radius: 4px; outline: none; } /* ---------- On-page jump navigation ---------- */ .eeo-jump { background: var(--wh); border-bottom: 1px solid var(--bd); } .eeo-jump-inner { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding-top: .9rem; padding-bottom: .9rem; } .eeo-jump-label { font-size: .74rem; font-weight: 800; color: var(--tm); text-transform: uppercase; letter-spacing: .06em; display: flex; align-items: center; gap: .35rem; margin-right: .3rem; } .eeo-jump-label i { color: var(--gd); font-size: .7rem; } .eeo-jump a { display: inline-flex; align-items: center; background: var(--cr); border: 1px solid var(--bd); color: var(--nv-s); font-size: .8rem; font-weight: 700; text-decoration: none; padding: .4rem .9rem; border-radius: 100px; transition: background 240ms, border-color 240ms, color 240ms; -webkit-tap-highlight-color: transparent; min-height: 32px; } .eeo-jump a:hover { background: var(--gp); border-color: var(--gd); color: var(--nv); } .eeo-jump a:focus-visible { box-shadow: var(--focus); outline: none; } @media (max-width: 760px) { .eeo-jump-inner { padding-top: .75rem; padding-bottom: .75rem; } .eeo-jump-label { width: 100%; margin-right: 0; margin-bottom: .1rem; } .eeo-jump a { font-size: .76rem; padding: .35rem .75rem; } } /* ================================================================ PRINT STYLESHEET This page is a formal HR/legal reference document — employees, applicants, and HR staff realistically print it or save it as PDF. Strip chrome, keep the policy text. ================================================================ */ @media print { .eeo-skip, .eeo-prog, .eeo-wa, .eeo-jump, .eeo-hero-badge, .eeo-chips, .eeo-hero-cta, .eeo-bc, .eeo-sticky, .eeo-rel-grid, .eeo-final-btns { display: none !important; } .eeo-page { background: #fff; color: #000; } .eeo-hero { background: none !important; padding: 0 0 1.5rem !important; border-bottom: 2px solid #000; } .eeo-hero::before, .eeo-hero::after { display: none !important; } .eeo-hero h1 { color: #000 !important; } .eeo-hero h1 .eeo-acc { color: #000 !important; } .eeo-hero-sub { color: #000 !important; } .eeo-ai-strip { background: #fff !important; border: 1px solid #000; border-bottom: 1px solid #000; } #eeo-ai-summary, #eeo-ai-summary strong { color: #000 !important; } .eeo-sec--nv, .eeo-sec--cr { background: #fff !important; } .eeo-sec-h2, .eeo-sec-tag { color: #000 !important; } .eeo-sec-sub { color: #000 !important; } .eeo-commit-card, .eeo-practice-item, .eeo-contact-card, .eeo-policy-section, .eeo-faq-a { background: #fff !important; border: 1px solid #999 !important; box-shadow: none !important; } .eeo-commit-ico { display: none; } .eeo-callout--gold, .eeo-callout--em { background: #fff !important; border: 1px solid #000 !important; border-left: 4px solid #000 !important; color: #000 !important; } .eeo-callout > i { display: none; } /* Force every FAQ answer open and remove interactive chrome — printed output should read as a flat document, not an accordion with hidden content. */ .eeo-faq-q { background: #fff !important; color: #000 !important; pointer-events: none; } .eeo-faq-icon, .eeo-faq-num { display: none; } .eeo-faq-a { display: block !important; max-height: none !important; opacity: 1 !important; padding: 0 0 .75rem 0 !important; } .eeo-final-wrap h2, .eeo-final-wrap p { color: #000 !important; } a { color: #000 !important; text-decoration: underline; } a[href^="http"]::after, a[href^="mailto"]::after, a[href^="tel"]::after { content: " (" attr(href) ")"; font-size: .75em; font-weight: 400; color: #444; } a[href^="#"]::after { content: ""; } }