/* Fonts are loaded via + stylesheet in each page (faster than @import). */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #f7f3ea; /* warm ivory */ --bg-alt: #efe8d8; /* deeper cream */ --bg-card: #fffdf8; /* near-white card */ --ink: #16223a; /* deep navy — headings */ --navy: #16223a; --navy-soft: #1e2c47; --brass: #9a7a33; /* antique brass accent */ --brass-light: #b8923f; --brass-dim: rgba(154, 122, 51, 0.28); --text: #41474f; /* slate body */ --text-soft: #5b616b; --text-muted: #8b8675; --on-navy: #e9e3d3; /* cream text on navy */ --on-navy-mut: #a7a896; --border: #e0d8c5; --border-navy: #2a3a55; --max-width: 1080px; } html { scroll-behavior: smooth; } body { background-color: var(--bg); color: var(--text); font-family: 'EB Garamond', Georgia, serif; font-size: 18px; line-height: 1.75; } /* ── Nav ── */ header { background: rgba(247, 243, 234, 0.88); backdrop-filter: saturate(1.1) blur(6px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; } nav { max-width: var(--max-width); margin: 0 auto; padding: 0 2.5rem; display: flex; align-items: center; justify-content: space-between; height: 76px; } .nav-brand a { font-family: 'Playfair Display', serif; font-size: 0.98rem; color: var(--ink); text-decoration: none; letter-spacing: 0.01em; } .nav-links { list-style: none; display: flex; gap: 2.5rem; } .nav-links a { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); text-decoration: none; transition: color 0.2s; position: relative; } .nav-links a:hover, .nav-links a.active { color: var(--brass); } .nav-links a.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--brass); } /* ── Hero ── */ .hero { position: relative; min-height: 86vh; display: flex; align-items: center; overflow: hidden; border-bottom: 1px solid var(--border); padding: 0 2.5rem; background: radial-gradient(ellipse 70% 90% at 88% 30%, rgba(154,122,51,0.07) 0%, transparent 55%), linear-gradient(180deg, #faf7ef 0%, #f7f3ea 60%, #f1ebdd 100%); } .hero-engraving { position: absolute; top: 0; right: 0; bottom: 0; width: 52%; z-index: 0; opacity: 0.9; pointer-events: none; animation: drift 28s ease-in-out infinite alternate; } @keyframes drift { 0% { transform: translateX(0) scale(1); } 100% { transform: translateX(-2%) scale(1.03); } } @media (prefers-reduced-motion: reduce) { .hero-engraving { animation: none; } } .hero-inner { position: relative; z-index: 2; max-width: var(--max-width); margin: 0 auto; width: 100%; padding: 5rem 0; } .eyebrow { font-size: 0.76rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--brass); display: block; margin-bottom: 1.3rem; } .eyebrow.with-rule { display: inline-flex; align-items: center; gap: 0.9rem; } .eyebrow.with-rule::before { content: ''; width: 36px; height: 1px; background: var(--brass); } .hero-inner h1 { font-family: 'Playfair Display', serif; font-size: clamp(2.8rem, 5.2vw, 4.7rem); font-weight: 400; color: var(--ink); line-height: 1.1; max-width: 680px; margin-bottom: 1.6rem; } .hero-inner h1 em { font-style: italic; color: var(--brass); } .hero-rotator { position: relative; display: block; min-height: 3.4em; max-width: 500px; margin-bottom: 2.6rem; } .hero-rotator span { position: absolute; top: 0; left: 0; font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.2rem; color: var(--text-soft); line-height: 1.7; opacity: 0; animation: rotateLine 13.5s linear infinite; } .hero-rotator span:nth-child(1) { animation-delay: 0s; } .hero-rotator span:nth-child(2) { animation-delay: 4.5s; } .hero-rotator span:nth-child(3) { animation-delay: 9s; } @keyframes rotateLine { 0% { opacity: 0; transform: translateY(8px); } 4% { opacity: 1; transform: translateY(0); } 29% { opacity: 1; transform: translateY(0); } 33% { opacity: 0; transform: translateY(-8px); } 100% { opacity: 0; transform: translateY(-8px); } } @media (prefers-reduced-motion: reduce) { .hero-rotator span { animation: none; } .hero-rotator span:nth-child(1) { opacity: 1; position: relative; } .hero-rotator span:nth-child(2), .hero-rotator span:nth-child(3) { display: none; } } .hero-actions { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; } /* ── Buttons ── */ .btn { display: inline-block; padding: 0.85rem 2.2rem; background: var(--navy); border: 1px solid var(--navy); color: var(--on-navy); font-family: 'EB Garamond', serif; font-size: 0.84rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; transition: background 0.2s, color 0.2s, border-color 0.2s; } .btn:hover { background: var(--brass); border-color: var(--brass); color: #fff; } .btn-ghost { background: transparent; border: 1px solid var(--brass); color: var(--brass); } .btn-ghost:hover { background: var(--brass); border-color: var(--brass); color: #fff; } .text-link { font-size: 0.84rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brass); text-decoration: none; border-bottom: 1px solid var(--brass-dim); padding-bottom: 2px; transition: border-color 0.2s; } .text-link:hover { border-color: var(--brass); } .scroll-cue { position: absolute; z-index: 2; bottom: 1.8rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.4rem; text-decoration: none; color: var(--text-muted); font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; transition: color 0.2s; } .scroll-cue:hover { color: var(--brass); } .scroll-arrow { animation: bob 2s ease-in-out infinite; font-size: 0.95rem; } @keyframes bob { 0%, 100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(5px); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .scroll-arrow { animation: none; } } /* ── Sections ── */ .section { max-width: var(--max-width); margin: 0 auto; padding: 6rem 2.5rem; } .section-title { font-family: 'Playfair Display', serif; font-size: clamp(1.9rem, 3vw, 2.7rem); font-weight: 400; color: var(--ink); margin-bottom: 1.2rem; line-height: 1.2; } .section-lead { font-size: 1.08rem; color: var(--text-soft); max-width: 640px; margin-bottom: 3rem; } .center { text-align: center; } .center .section-lead { margin-left: auto; margin-right: auto; } /* ── Service cards ── */ .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.5rem; } .service-card { background: var(--bg-card); border: 1px solid var(--border); border-top: 3px solid var(--brass-dim); padding: 2.4rem 2rem; transition: transform 0.2s, border-top-color 0.2s, box-shadow 0.2s; } .service-card:hover { border-top-color: var(--brass); transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(22,34,58,0.4); } .service-card .num { font-family: 'Playfair Display', serif; font-size: 0.95rem; color: var(--brass); letter-spacing: 0.1em; display: block; margin-bottom: 1rem; } .service-card h3 { font-family: 'Playfair Display', serif; font-size: 1.3rem; font-weight: 400; color: var(--ink); margin-bottom: 0.8rem; } .service-card p { font-size: 0.98rem; color: var(--text); line-height: 1.7; } /* ── Navy statement band ── */ .band { background: radial-gradient(ellipse 60% 80% at 80% 30%, rgba(154,122,51,0.16) 0%, transparent 60%), var(--navy); border-top: 1px solid #0f1828; border-bottom: 1px solid #0f1828; } .band .section { padding-top: 5.5rem; padding-bottom: 5.5rem; } .band .eyebrow { color: var(--brass-light); } .band-quote { font-family: 'Playfair Display', serif; font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-style: italic; font-weight: 400; color: var(--on-navy); line-height: 1.45; max-width: 820px; } .band-quote em { color: var(--brass-light); font-style: italic; } .band-attribution { margin-top: 2rem; font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-navy-mut); } /* ── Attorney spotlight ── */ .section-alt { background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .spotlight { display: grid; grid-template-columns: 300px 1fr; gap: 4.5rem; align-items: center; } .spotlight-portrait { text-align: center; } .monogram { width: 230px; height: 290px; margin: 0 auto 1.2rem; display: flex; align-items: center; justify-content: center; font-family: 'Playfair Display', serif; font-size: 3.6rem; letter-spacing: 0.08em; color: var(--brass); background: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(154,122,51,0.10) 0%, transparent 70%), var(--bg-card); border: 1px solid var(--border); border-top: 3px solid var(--brass-dim); } .portrait-photo { width: 230px; height: 290px; object-fit: cover; margin: 0 auto 1.2rem; display: block; border: 1px solid var(--border); } .portrait-caption { font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); } .spotlight-body .section-title { margin-bottom: 1.2rem; } .spotlight-body p { margin-bottom: 1.6rem; max-width: 560px; } .spotlight-body blockquote { font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.22rem; color: var(--ink); line-height: 1.6; border-left: 2px solid var(--brass-dim); padding-left: 1.5rem; margin-bottom: 2rem; max-width: 560px; } /* ── Page header (inner pages) ── */ .page-header { background: radial-gradient(ellipse 80% 100% at 70% 0%, rgba(154,122,51,0.06) 0%, transparent 60%), linear-gradient(180deg, #faf7ef 0%, #f1ebdd 100%); border-bottom: 1px solid var(--border); padding: 5.5rem 2.5rem 4rem; text-align: center; } .page-header .eyebrow { display: inline-flex; align-items: center; gap: 0.9rem; } .page-header .eyebrow::before { content: ''; width: 36px; height: 1px; background: var(--brass); } .page-header h1 { font-family: 'Playfair Display', serif; font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 400; color: var(--ink); line-height: 1.15; margin-top: 0.4rem; } /* ── Gold rule ── */ .rule { border: none; border-top: 1px solid var(--brass-dim); margin: 0; } /* ── About page ── */ .about-grid { display: grid; grid-template-columns: 260px 1fr; gap: 5rem; align-items: start; } .about-sidebar { position: sticky; top: 100px; } .sidebar-name { font-family: 'Playfair Display', serif; font-size: 1.45rem; color: var(--ink); margin-bottom: 0.2rem; } .sidebar-role { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass); padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); margin-bottom: 1.8rem; } .info-block { margin-bottom: 1.5rem; } .info-label { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass); display: block; margin-bottom: 0.35rem; } .info-value { font-size: 0.95rem; color: var(--text-soft); line-height: 1.65; } .info-value a { color: var(--text-soft); text-decoration: none; transition: color 0.2s; } .info-value a:hover { color: var(--brass); } .about-body h2 { font-family: 'Playfair Display', serif; font-size: clamp(1.6rem, 2.5vw, 2.1rem); font-weight: 400; color: var(--ink); margin-bottom: 1.4rem; } .about-body p { margin-bottom: 1.3rem; } .about-divider { border: none; border-top: 1px solid var(--border); margin: 2.5rem 0; } .cred-list { list-style: none; } .cred-list li, .pa-list li { padding: 0.6rem 0 0.6rem 1.4rem; border-bottom: 1px solid var(--border); color: var(--text); font-size: 0.97rem; position: relative; } .cred-list li:first-child, .pa-list li:first-child { border-top: 1px solid var(--border); } .cred-list li::before, .pa-list li::before { content: '—'; position: absolute; left: 0; color: var(--brass); font-size: 0.75rem; top: 0.78rem; } /* ── Practice areas (detail page) ── */ .pa-block { border-left: 3px solid var(--brass); padding: 3rem 2.5rem; background: var(--bg-card); border-top: 1px solid var(--border); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 2rem; } .pa-block h2 { font-family: 'Playfair Display', serif; font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 400; color: var(--ink); margin: 0.5rem 0 1.3rem; } .pa-block > p { margin-bottom: 1rem; max-width: 700px; color: var(--text-soft); } .pa-block h3 { font-family: 'Playfair Display', serif; font-size: 1.08rem; font-weight: 400; color: var(--brass); letter-spacing: 0.03em; margin: 2rem 0 0.6rem; } .pa-list { list-style: none; margin-bottom: 1rem; } .pa-scope-note { background: rgba(154,122,51,0.07); border-left: 3px solid var(--brass); padding: 1rem 1.3rem; margin: 0 0 1.4rem; max-width: 700px; font-size: 0.97rem; color: var(--ink); } .pa-scope-note strong { color: var(--ink); letter-spacing: 0.01em; } /* ── Contact page ── */ .contact-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 5rem; } .contact-col h2 { font-family: 'Playfair Display', serif; font-size: 1.55rem; font-weight: 400; color: var(--ink); padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); margin-bottom: 2rem; } .form-group { margin-bottom: 1.5rem; } .form-group label { display: block; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.5rem; } .form-group input, .form-group textarea, .form-group select { width: 100%; background: #fffdf8; border: 1px solid var(--border); color: var(--ink); padding: 0.8rem 1rem; font-family: 'EB Garamond', serif; font-size: 1rem; outline: none; transition: border-color 0.2s, box-shadow 0.2s; -webkit-appearance: none; } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--brass); box-shadow: 0 0 0 3px rgba(154,122,51,0.12); } .form-group textarea { min-height: 140px; resize: vertical; } .form-group select { cursor: pointer; color: var(--text); } .form-disclaimer { font-size: 0.84rem; color: var(--text-muted); font-style: italic; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); line-height: 1.65; } /* Honeypot: visually hidden, kept in the accessibility tree's off-screen flow. Real visitors never see or tab to it; bots that fill it are rejected. */ .hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* Form submission feedback (set by contact.html script via ?sent / ?error) */ .form-success { background: var(--bg-card); border-left: 3px solid var(--brass); color: var(--ink); padding: 1.4rem 1.6rem; line-height: 1.7; font-size: 1.02rem; } .form-success strong { font-family: 'Playfair Display', serif; font-weight: 600; } .form-error { background: #f6ecec; border-left: 3px solid #8a2b2b; color: #5a1f1f; padding: 1rem 1.3rem; margin-bottom: 1.6rem; line-height: 1.6; } .form-error a { color: #5a1f1f; } /* ── Footer ── */ footer { background: var(--navy); border-top: 1px solid #0f1828; padding: 4rem 2.5rem 3rem; text-align: center; } .footer-inner { max-width: var(--max-width); margin: 0 auto; } .footer-name { font-family: 'Playfair Display', serif; font-size: 1.1rem; color: var(--on-navy); margin-bottom: 0.7rem; } .footer-detail { font-size: 0.88rem; color: var(--on-navy-mut); margin-bottom: 0.2rem; } .footer-detail a { color: var(--on-navy-mut); text-decoration: none; transition: color 0.2s; } .footer-detail a:hover { color: var(--brass-light); } .footer-rule { width: 40px; height: 1px; background: var(--brass-dim); margin: 1.8rem auto; border: none; } .footer-copy { font-size: 0.78rem; color: var(--on-navy-mut); line-height: 1.9; max-width: 780px; margin: 0 auto; } /* ── Responsive ── */ @media (max-width: 860px) { .hero-engraving { width: 80%; opacity: 0.35; } .spotlight { grid-template-columns: 1fr; gap: 2.5rem; } .about-grid { grid-template-columns: 1fr; gap: 2.5rem; } .about-sidebar { position: static; } .contact-grid { grid-template-columns: 1fr; gap: 3rem; } } @media (max-width: 600px) { nav { flex-direction: column; height: auto; padding: 1rem 1.5rem; gap: 0.7rem; } .nav-links { gap: 1.2rem; flex-wrap: wrap; justify-content: center; } .section { padding: 4rem 1.5rem; } .hero { padding: 0 1.5rem; } }