/* ============================================================ Apex Wealth Advisors - Direction 3: Quiet Premium Boutique, unhurried, photography-led. Warm-neutral ground, modest Lora serif headings, Inter body, blue as a whisper. ============================================================ */ /* ---- Fonts (Google, allowed via in ) ---- */ :root { /* Brand */ --grey: #4d4d4f; /* primary text + ground */ --blue: #009adb; /* accent, used sparingly */ --blue-ink: #0b6a92; /* darkened blue for body links (AA on warm ground) */ --light: #d0d0d0; /* hairlines / dividers */ --near-black: #1a1a1c; /* Warm-neutral palette (Quiet Premium) */ --paper: #f7f4ef; /* soft warm off-white ground */ --paper-2: #f1ece4; /* faint warm band */ --paper-3: #ece6dc; /* deeper warm band */ --card: #fffdfa; --ink: #3a3a3c; /* body ink, a touch softer than pure grey */ --ink-soft: #6f6f71; /* muted captions/labels */ --hairline: #ddd6ca; /* warm hairline */ /* Type scale (major third): 16 20 25 31 39 49 61 */ --t-0: 1rem; /* 16 */ --t-1: 1.25rem; /* 20 */ --t-2: 1.5625rem; /* 25 */ --t-3: 1.9375rem; /* 31 */ --t-4: 2.4375rem; /* 39 */ --t-5: 3.0625rem; /* 49 */ /* Spacing (8px scale) */ --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 48px; --s-6: 64px; --s-7: 96px; --s-8: 128px; --maxw: 1180px; --measure: 62ch; --serif: "Lora", Georgia, "Times New Roman", serif; --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } /* ---- Reset-ish ---- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--sans); font-size: 1.0625rem; /* 17px body */ line-height: 1.65; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; height: auto; display: block; } h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; color: var(--grey); line-height: 1.18; letter-spacing: -0.01em; margin: 0; } p { margin: 0; } a { color: var(--blue-ink); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } /* Visible, calm focus states everywhere */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, .btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 2px; } /* ---- Layout helpers ---- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s-3); } .narrow { max-width: 760px; margin-inline: auto; } .section { padding-block: var(--s-7); } @media (min-width: 900px) { .section { padding-block: var(--s-8); } } .band-2 { background: var(--paper-2); } .band-3 { background: var(--paper-3); } .eyebrow { font-family: var(--sans); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 var(--s-3); } .eyebrow .tick { color: var(--blue); } .lead { font-size: var(--t-1); line-height: 1.55; color: var(--ink); max-width: var(--measure); } .prose p { max-width: var(--measure); } .prose p + p { margin-top: var(--s-3); } /* Skip link */ .skip { position: absolute; left: -9999px; top: 0; background: var(--grey); color: #fff; padding: 12px 18px; z-index: 200; } .skip:focus { left: 12px; top: 12px; text-decoration: none; } /* ============================================================ Header ============================================================ */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(247, 244, 239, 0.86); backdrop-filter: saturate(120%) blur(10px); border-bottom: 1px solid var(--hairline); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 72px; gap: var(--s-3); } .brand { display: inline-flex; align-items: center; gap: 12px; color: var(--grey); } .brand:hover { text-decoration: none; } .brand img { height: 34px; width: auto; } .brand .brand-name { font-family: var(--serif); font-size: 1.125rem; letter-spacing: 0.01em; color: var(--grey); white-space: nowrap; } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: transparent; border: 1px solid var(--hairline); border-radius: 6px; color: var(--grey); cursor: pointer; } .nav-toggle svg { width: 20px; height: 20px; } .primary-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--s-4); } .primary-nav a { color: var(--grey); font-size: 0.9375rem; letter-spacing: 0.01em; padding: 6px 2px; } .primary-nav a[aria-current="page"] { color: var(--near-black); border-bottom: 2px solid var(--blue); } .nav-cta { font-family: var(--sans); font-size: 0.9375rem; color: var(--near-black) !important; border: 1px solid var(--grey); border-radius: 999px; padding: 8px 18px !important; } .nav-cta:hover { background: var(--grey); color: #fff !important; text-decoration: none; } @media (max-width: 860px) { .primary-nav { position: absolute; top: 72px; left: 0; right: 0; background: var(--paper); border-bottom: 1px solid var(--hairline); display: none; padding: var(--s-2) var(--s-3) var(--s-4); } .primary-nav.open { display: block; } .primary-nav ul { flex-direction: column; align-items: flex-start; gap: var(--s-2); } .primary-nav a { display: block; padding: 10px 0; font-size: 1.0625rem; } .nav-cta { margin-top: var(--s-1); } } @media (min-width: 861px) { .nav-toggle { display: none; } .primary-nav { display: block !important; } } /* ============================================================ Buttons ============================================================ */ .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: 1rem; font-weight: 500; line-height: 1; padding: 15px 26px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease); text-decoration: none; } .btn:hover { text-decoration: none; } .btn-primary { background: var(--blue); color: #fff; } .btn-primary:hover { background: #0089c4; color: #fff; } .btn-ghost { background: transparent; color: var(--near-black); border-color: var(--grey); } .btn-ghost:hover { background: var(--grey); color: #fff; } .btn .arrow { transition: transform .35s var(--ease); } .btn:hover .arrow { transform: translateX(4px); } .textlink { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--blue-ink); } .textlink .arrow { transition: transform .3s var(--ease); } .textlink:hover .arrow { transform: translateX(4px); } /* ============================================================ Hero (photography-led) ============================================================ */ .hero { position: relative; min-height: min(84vh, 760px); display: flex; align-items: flex-end; overflow: hidden; background: var(--paper-3); } .hero-media { position: absolute; inset: 0; z-index: 0; } .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; } .hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(26,26,28,0.10) 0%, rgba(26,26,28,0.05) 40%, rgba(26,26,28,0.62) 100%); } .hero-inner { position: relative; z-index: 1; width: 100%; padding-block: var(--s-7) var(--s-6); } .hero h1 { color: #fff; font-size: clamp(2rem, 5.2vw, 3.0625rem); font-weight: 500; max-width: 15ch; text-shadow: 0 1px 24px rgba(0,0,0,0.28); } .hero .hero-sub { color: rgba(255,255,255,0.94); font-size: var(--t-1); line-height: 1.55; max-width: 54ch; margin-top: var(--s-3); text-shadow: 0 1px 18px rgba(0,0,0,0.35); } .hero .hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); } .hero .hero-actions .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.7); } .hero .hero-actions .btn-ghost:hover { background: #fff; color: var(--near-black); } /* Simpler page hero (no photo) for interior pages */ .page-hero { padding-block: var(--s-7) var(--s-6); border-bottom: 1px solid var(--hairline); } .page-hero h1 { font-size: clamp(1.9rem, 4.6vw, var(--t-5)); max-width: 18ch; } .page-hero .lead { margin-top: var(--s-3); } /* ============================================================ Coordination / narrative blocks ============================================================ */ .statement h2 { font-size: clamp(1.6rem, 3.8vw, var(--t-4)); max-width: 20ch; margin-bottom: var(--s-3); } .statement .prose { color: var(--ink); } .split { display: grid; gap: var(--s-6); align-items: center; } @media (min-width: 900px) { .split { grid-template-columns: 1.05fr 0.95fr; gap: var(--s-7); } .split.reverse .split-media { order: -1; } } .split-media { border-radius: 10px; overflow: hidden; } .split-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } /* ============================================================ Pillars (three reasons) - quiet list, not cards ============================================================ */ .pillars { display: grid; gap: var(--s-5); margin-top: var(--s-6); } @media (min-width: 820px) { .pillars { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } } .pillar { border-top: 1px solid var(--hairline); padding-top: var(--s-3); } .pillar .idx { font-family: var(--serif); font-size: 1rem; color: var(--blue); font-style: italic; display: block; margin-bottom: var(--s-2); } .pillar h3 { font-size: var(--t-2); margin-bottom: var(--s-2); } .pillar p { color: var(--ink); font-size: 1rem; } /* ============================================================ Services - quiet definition list ============================================================ */ .services { margin-top: var(--s-6); border-top: 1px solid var(--hairline); } .service { display: grid; gap: var(--s-1) var(--s-5); padding-block: var(--s-4); border-bottom: 1px solid var(--hairline); } @media (min-width: 760px) { .service { grid-template-columns: 0.9fr 1.4fr; align-items: baseline; } } .service h3 { font-size: var(--t-2); color: var(--grey); } .service p { color: var(--ink); max-width: 54ch; } /* ============================================================ Team ============================================================ */ .partner { display: grid; gap: var(--s-5); align-items: start; } @media (min-width: 820px) { .partner { grid-template-columns: 0.8fr 1.2fr; gap: var(--s-7); } .partner.reverse .partner-photo { order: 2; } } .partner + .partner { margin-top: var(--s-8); } .partner-photo { position: relative; } .partner-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; background: var(--paper-3); } .swap-note { font-size: 0.75rem; color: var(--ink-soft); margin-top: var(--s-1); font-style: italic; } .partner-body h2 { font-size: var(--t-3); margin-bottom: 4px; } .partner-body .role { font-family: var(--sans); font-size: 0.9375rem; letter-spacing: 0.02em; color: var(--blue-ink); margin-bottom: 2px; } .partner-body .place { font-family: var(--sans); font-size: 0.875rem; color: var(--ink-soft); margin-bottom: var(--s-3); } .partner-body .prose p { max-width: 60ch; } /* ============================================================ Alternatives - categories + risk block ============================================================ */ .alt-grid { display: grid; gap: var(--s-5); margin-top: var(--s-6); } @media (min-width: 720px) { .alt-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .alt-grid { grid-template-columns: repeat(3, 1fr); } } .alt-item { border-top: 1px solid var(--hairline); padding-top: var(--s-3); } .alt-item h3 { font-size: var(--t-1); margin-bottom: 6px; } .alt-item p { font-size: 0.9375rem; color: var(--ink); } .riskblock { background: var(--card); border: 1px solid var(--hairline); border-left: 3px solid var(--blue); border-radius: 8px; padding: var(--s-5); } .riskblock h2 { font-size: var(--t-2); margin-bottom: var(--s-2); } .riskblock p { font-size: 0.9375rem; color: var(--ink); max-width: 68ch; } .riskblock .label { font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: var(--s-2); } /* ============================================================ Contact form ============================================================ */ .contact-grid { display: grid; gap: var(--s-6); } @media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr; gap: var(--s-7); } } .contact-info .info-item { margin-bottom: var(--s-4); } .contact-info .info-item .k { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; } .contact-info .info-item a { font-size: var(--t-1); color: var(--grey); } .contact-info .info-item a:hover { color: var(--blue-ink); } .no-cal-note { font-size: 0.875rem; color: var(--ink-soft); border-top: 1px solid var(--hairline); padding-top: var(--s-3); margin-top: var(--s-4); max-width: 42ch; } form.contact-form { display: grid; gap: var(--s-3); } .field { display: grid; gap: 6px; } .field label { font-size: 0.875rem; color: var(--grey); font-weight: 500; } .field .req { color: var(--blue-ink); } .field input, .field textarea { font-family: var(--sans); font-size: 1rem; color: var(--ink); background: var(--card); border: 1px solid var(--hairline); border-radius: 8px; padding: 12px 14px; width: 100%; } .field textarea { min-height: 130px; resize: vertical; } .field input:focus, .field textarea:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px rgba(0,154,219,0.15); } .reassure { font-size: 0.875rem; color: var(--ink-soft); margin-top: 4px; } /* ============================================================ CTA band ============================================================ */ .cta-band { text-align: center; } .cta-band h2 { font-size: clamp(1.6rem, 3.6vw, var(--t-4)); max-width: 24ch; margin-inline: auto; margin-bottom: var(--s-3); } .cta-band p { max-width: 56ch; margin-inline: auto; color: var(--ink); } .cta-band .btn { margin-top: var(--s-5); } /* ============================================================ Footer ============================================================ */ .site-footer { background: var(--near-black); color: #cfcfd1; padding-block: var(--s-7) var(--s-5); font-size: 0.875rem; line-height: 1.6; } .site-footer a { color: #d8d8da; } .site-footer a:hover { color: #fff; } .footer-top { display: grid; gap: var(--s-5); padding-bottom: var(--s-5); border-bottom: 1px solid rgba(255,255,255,0.12); } @media (min-width: 820px) { .footer-top { grid-template-columns: 1.2fr 1fr 1fr; gap: var(--s-6); } } .footer-brand img { height: 88px; width: auto; margin-bottom: var(--s-3); } .footer-brand p { color: #9d9d9f; max-width: 34ch; } .footer-col h4 { font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: #8f8f91; margin-bottom: var(--s-2); } .footer-col ul { list-style: none; margin: 0; padding: 0; } .footer-col li { margin-bottom: 8px; } .footer-contact a { display: block; margin-bottom: 6px; color: #fff; } .footer-legal { padding-top: var(--s-5); color: #8f8f91; font-size: 0.8125rem; line-height: 1.65; } .footer-legal p { max-width: 100%; margin-bottom: var(--s-2); } .footer-legal .disclosure { color: #a6a6a8; } .footer-bottom { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); justify-content: space-between; align-items: center; margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid rgba(255,255,255,0.12); } .footer-bottom .compare a { color: #8f8f91; } /* ============================================================ Scroll reveal (soft) - JS adds .in ============================================================ */ .reveal { opacity: 1; transform: none; } .js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 1s var(--ease), transform 1s var(--ease); will-change: opacity, transform; } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .btn, .btn .arrow, .textlink .arrow { transition: none !important; } }