/* ═══════════════════════════════════════════════════════════════ SYNC VALUATIONS — SITE CHROME One header + one footer for every page on syncvaluations.com. Load after the Google Fonts link, before any page CSS. ═══════════════════════════════════════════════════════════════ */ :root { --sc-navy: #1B2C3C; --sc-navy-2: #253f57; --sc-cream: #F5F0E3; --sc-cream-light: #FAF7EF; --sc-cream-dark: #EDE7D5; --sc-warm-gray: #9B9588; --sc-warm-gray-l: #D4D0C8; --sc-brown-gray: #5A5650; --sc-charcoal: #343434; --sc-navy-dark: #122130; /* hover: darkened navy, not neutral grey */ --sc-gold: #B5A878; --sc-nav-h: 68px; } /* ── HEADER ──────────────────────────────────────────────────── */ .sc-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 18px 0; background: rgba(245, 240, 227, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--sc-cream-dark); transition: background .3s ease, padding .3s ease, box-shadow .3s ease; } .sc-nav__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1200px; margin: 0 auto; padding: 0 40px; } .sc-nav__logo { display: flex; align-items: center; text-decoration: none; } .sc-nav__logo img { height: 28px; width: auto; display: block; } .sc-nav__logo .sc-logo--light { display: none; } .sc-nav__links { display: flex; align-items: center; gap: 32px; list-style: none; margin: 0; padding: 0; } .sc-nav__links a { font-family: 'DM Sans', Arial, sans-serif; font-size: 12px; font-weight: 500; color: var(--sc-brown-gray); text-decoration: none; text-transform: uppercase; letter-spacing: .1em; transition: color .2s ease; } .sc-nav__links a:hover { color: var(--sc-navy); } .sc-nav__links a[aria-current="page"] { color: var(--sc-navy); } .sc-nav__cta { font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: 1.5px !important; text-transform: uppercase; white-space: nowrap; padding: 10px 24px; border: none; border-radius: 5px; background: var(--sc-navy); color: var(--sc-cream) !important; transition: background .2s ease; } .sc-nav__cta:hover { background: var(--sc-navy-dark); } .sc-nav__burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; background: none; border: 0; } .sc-nav__burger span { display: block; width: 24px; height: 2px; background: var(--sc-navy); transition: background .2s ease; } /* Transparent variant — only on pages that declare a dark hero: . Reverts to the cream bar on scroll. */ body[data-sc-hero="dark"] .sc-nav:not(.sc-nav--scrolled) { background: transparent; box-shadow: none; } body[data-sc-hero="dark"] .sc-nav:not(.sc-nav--scrolled) .sc-nav__links a { color: rgba(245,240,227,.82); } body[data-sc-hero="dark"] .sc-nav:not(.sc-nav--scrolled) .sc-nav__links a:hover, body[data-sc-hero="dark"] .sc-nav:not(.sc-nav--scrolled) .sc-nav__links a[aria-current="page"] { color: #fff; } body[data-sc-hero="dark"] .sc-nav:not(.sc-nav--scrolled) .sc-nav__cta { background: var(--sc-cream); color: var(--sc-navy) !important; } body[data-sc-hero="dark"] .sc-nav:not(.sc-nav--scrolled) .sc-nav__cta:hover { background: #fff; } body[data-sc-hero="dark"] .sc-nav:not(.sc-nav--scrolled) .sc-nav__burger span { background: var(--sc-cream); } body[data-sc-hero="dark"] .sc-nav:not(.sc-nav--scrolled) .sc-logo--dark { display: none; } body[data-sc-hero="dark"] .sc-nav:not(.sc-nav--scrolled) .sc-logo--light { display: block; } .sc-nav--scrolled { padding: 12px 0; } /* One breakpoint. 900px, because 4 links + the CTA need ~850px of room. */ @media (max-width: 900px) { .sc-nav__links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 12px 24px 20px; background: var(--sc-cream); border-top: 1px solid var(--sc-cream-dark); box-shadow: 0 8px 24px rgba(27,44,60,.08); z-index: 999; } .sc-nav__links.sc-open { display: flex; } .sc-nav__links li { border-bottom: 1px solid var(--sc-cream-dark); width: 100%; } .sc-nav__links li:last-child { border-bottom: none; padding-top: 12px; } .sc-nav__links li a { display: block; padding: 13px 0; font-size: 13px; } /* the dropdown always sits on cream, so force dark text even over a dark hero */ body[data-sc-hero="dark"] .sc-nav:not(.sc-nav--scrolled) .sc-nav__links a { color: var(--sc-brown-gray); } body[data-sc-hero="dark"] .sc-nav:not(.sc-nav--scrolled) .sc-nav__links a:hover { color: var(--sc-navy); } body[data-sc-hero="dark"] .sc-nav:not(.sc-nav--scrolled) .sc-nav__links .sc-nav__cta { background: var(--sc-navy); color: var(--sc-cream) !important; } .sc-nav__burger { display: flex; } .sc-nav__inner { padding: 0 24px; } } /* ── FOOTER ──────────────────────────────────────────────────── */ .sc-footer { padding: 64px 0 40px; background: var(--sc-navy); color: rgba(245,240,227,0.6); } .sc-footer__inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } .sc-footer__grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 48px; margin-bottom: 32px; border-bottom: 1px solid rgba(245,240,227,0.1); } .sc-footer__col { display: flex; flex-direction: column; gap: 10px; } .sc-footer__brand-name { display: block; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--sc-gold); margin-bottom: 16px; } .sc-footer__brand p { font-size: 13px; line-height: 1.6; color: rgba(245,240,227,0.5); max-width: 260px; margin: 0; } .sc-footer__heading { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--sc-gold); margin: 0 0 16px; } .sc-footer__col a { font-family: 'DM Sans', Arial, sans-serif; font-size: 14px; color: rgba(245,240,227,0.6); text-decoration: none; transition: color .2s ease; } .sc-footer__col a:hover { color: var(--sc-cream); } /* ── mailing list ─────────────────────────────────────────────── */ .sc-signup { margin-top: 24px; display: block; max-width: 280px; } .sc-signup__label { display: block; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--sc-gold); margin-bottom: 10px; } .sc-signup__row { display: flex; gap: 8px; } .sc-signup__input { flex: 1 1 auto; min-width: 0; font-family: 'DM Sans', Arial, sans-serif; font-size: 13px; padding: 10px 12px; border-radius: 5px; background: rgba(245,240,227,0.06); border: 1px solid rgba(245,240,227,0.22); color: var(--sc-cream); } .sc-signup__input::placeholder { color: rgba(245,240,227,0.35); } .sc-signup__input:focus { outline: none; border-color: var(--sc-gold); } .sc-signup__btn { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap; cursor: pointer; padding: 10px 16px; border-radius: 5px; border: none; background: var(--sc-cream); color: var(--sc-navy); transition: background .2s ease; } .sc-signup__btn:hover { background: #fff; } .sc-signup__btn--wide { display: inline-block; text-decoration: none; padding: 11px 20px; } .sc-signup__note { display: block; margin-top: 10px; font-size: 11.5px; line-height: 1.5; color: rgba(245,240,227,0.4); } .sc-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; } .sc-footer__left { font-size: 13px; color: rgba(245,240,227,0.4); } .sc-footer__left a { color: var(--sc-gold); text-decoration: none; transition: color .2s; } .sc-footer__left a:hover { color: var(--sc-cream); } .sc-footer__right { display: flex; gap: 24px; } .sc-footer__right a { font-family: 'DM Sans', Arial, sans-serif; font-size: 13px; color: rgba(245,240,227,0.5); text-decoration: none; transition: color .2s; } .sc-footer__right a:hover { color: var(--sc-cream); } @media (max-width: 768px) { .sc-footer__inner { padding: 0 24px; } .sc-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; } /* ── mailing list ─────────────────────────────────────────────── */ .sc-signup { margin-top: 24px; display: block; max-width: 280px; } .sc-signup__label { display: block; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--sc-gold); margin-bottom: 10px; } .sc-signup__row { display: flex; gap: 8px; } .sc-signup__input { flex: 1 1 auto; min-width: 0; font-family: 'DM Sans', Arial, sans-serif; font-size: 13px; padding: 10px 12px; border-radius: 5px; background: rgba(245,240,227,0.06); border: 1px solid rgba(245,240,227,0.22); color: var(--sc-cream); } .sc-signup__input::placeholder { color: rgba(245,240,227,0.35); } .sc-signup__input:focus { outline: none; border-color: var(--sc-gold); } .sc-signup__btn { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap; cursor: pointer; padding: 10px 16px; border-radius: 5px; border: none; background: var(--sc-cream); color: var(--sc-navy); transition: background .2s ease; } .sc-signup__btn:hover { background: #fff; } .sc-signup__btn--wide { display: inline-block; text-decoration: none; padding: 11px 20px; } .sc-signup__note { display: block; margin-top: 10px; font-size: 11.5px; line-height: 1.5; color: rgba(245,240,227,0.4); } .sc-footer__bottom { flex-direction: column; gap: 16px; text-align: center; } } @media (max-width: 480px) { .sc-footer__grid { grid-template-columns: 1fr; } } /* ── FOCUS ───────────────────────────────────────────────────── */ .sc-nav a:focus-visible, .sc-nav button:focus-visible, .sc-footer a:focus-visible { outline: 2px solid var(--sc-gold); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .sc-nav, .sc-nav__cta, .sc-nav__links a { transition: none; } }