/* ==================================================== LAW OFFICE LINDA B. KLAIN LLC Aesthetic Direction: RH / Restoration Hardware — Pure white / warm stone / greige surfaces — Extreme letter-spacing on all-caps labels — Cormorant Garamond editorial serif — Jost ultra-light body — No borders, no shadows, no noise — Full-bleed imagery, vast whitespace ==================================================== */ /* === TOKENS === */ :root { /* RH Palette */ --white: #ffffff; --off-white: #f8f7f4; --stone-50: #f3f1ec; --stone-100: #ede9e1; --stone-200: #dcd7cc; --stone-300: #c8c2b5; --stone-400: #aaa39a; /* muted text */ --stone-500: #857e75; /* secondary text */ --stone-700: #4a453e; /* primary text */ --stone-900: #1c1a17; /* headline */ --ink: #111010; /* Type */ --font-display: 'Cormorant Garamond', 'Georgia', serif; --font-ui: 'Jost', 'Helvetica Neue', sans-serif; /* Scale */ --text-10: clamp(0.6rem, 0.55rem + 0.2vw, 0.7rem); /* 10px tracking labels */ --text-xs: clamp(0.72rem, 0.68rem + 0.18vw, 0.8rem); /* 11-13px */ --text-sm: clamp(0.8rem, 0.76rem + 0.2vw, 0.875rem); /* 13-14px */ --text-base: clamp(0.875rem, 0.82rem + 0.28vw, 1rem); /* 14-16px body */ --text-lg: clamp(1rem, 0.9rem + 0.5vw, 1.25rem); /* 16-20px */ --text-xl: clamp(1.4rem, 1rem + 1.2vw, 2rem); /* 22-32px */ --text-2xl: clamp(2rem, 1rem + 3vw, 4rem); /* 32-64px display */ --text-3xl: clamp(2.8rem, 1rem + 5.5vw, 6.5rem); /* hero */ --text-hero: clamp(3.5rem, 1rem + 7.5vw, 8.5rem); /* cinematic hero */ /* Spacing */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; --space-40: 10rem; --space-48: 12rem; /* Layout */ --max-w: 1320px; --gutter: clamp(var(--space-8), 6vw, var(--space-20)); /* Motion */ --ease: cubic-bezier(0.25, 0.1, 0.25, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur: 300ms; --dur-slow: 600ms; } /* === HERO CSS ENTRANCE ANIMATIONS === Pure CSS — no JS dependency, works in screenshots and slow loads. Each hero element gets its own keyframe with a staggered delay. JS-based scroll reveals remain separate (below sections only). ====================================================== */ @keyframes heroFadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: no-preference) { .hero-overline { animation: heroFadeUp 1s cubic-bezier(0.16,1,0.3,1) 0.3s both; } .hero-headline { animation: heroFadeUp 1s cubic-bezier(0.16,1,0.3,1) 0.45s both; } .hero-sub { animation: heroFadeUp 1s cubic-bezier(0.16,1,0.3,1) 0.6s both; } .hero-actions { animation: heroFadeUp 1s cubic-bezier(0.16,1,0.3,1) 0.75s both; } .hero-scroll { animation: heroFadeUp 1s cubic-bezier(0.16,1,0.3,1) 0.9s both; } } /* === SCROLL REVEAL INITIAL STATES (JS-controlled) === JS adds .js-ready to for elements below the fold. ====================================================== */ body.js-ready [data-reveal] { opacity: 0; } body.js-ready [data-reveal='fade-up'] { transform: translateY(32px); } body.js-ready [data-reveal='slide-left'] { transform: translateX(-32px); } body.js-ready [data-reveal='slide-right'] { transform: translateX(32px); } body.js-ready [data-reveal='scale-up'] { transform: scale(0.96); } /* === RESET === */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; scroll-behavior: smooth; scroll-padding-top: 90px; } body { background: var(--white); color: var(--stone-700); font-family: var(--font-ui); font-size: var(--text-base); line-height: 1.7; font-weight: 300; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { cursor: pointer; background: none; border: none; font: inherit; } input, textarea, select { font: inherit; } ::selection { background: rgba(26,24,20,0.08); } :focus-visible { outline: 1px solid var(--stone-700); outline-offset: 4px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* === TYPOGRAPHY MIXINS (via classes) === */ .eyebrow { font-family: var(--font-ui); font-size: var(--text-10); font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: var(--stone-400); } .section-eyebrow { font-family: var(--font-ui); font-size: var(--text-10); font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: var(--stone-400); margin-bottom: var(--space-5); display: block; } .section-heading { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 300; color: var(--stone-900); line-height: 1.12; letter-spacing: -0.01em; margin-bottom: var(--space-8); } .section-heading em { font-style: italic; font-weight: 300; } .section-body { font-size: var(--text-base); color: var(--stone-500); line-height: 1.85; max-width: 52ch; margin-bottom: var(--space-6); font-weight: 300; } /* === BUTTONS === */ .btn-primary-rh { display: inline-block; padding: var(--space-4) var(--space-10); background: var(--stone-900); color: var(--white); font-family: var(--font-ui); font-size: var(--text-10); font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); cursor: pointer; border: none; text-decoration: none; } .btn-primary-rh:hover { background: var(--stone-500); } .btn-ghost-rh { display: inline-block; padding: var(--space-4) var(--space-10); background: transparent; color: rgba(255,255,255,0.85); font-family: var(--font-ui); font-size: var(--text-10); font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; border: 1px solid rgba(255,255,255,0.4); transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease); cursor: pointer; text-decoration: none; } .btn-ghost-rh:hover { border-color: rgba(255,255,255,0.9); color: #fff; background: rgba(255,255,255,0.08); } /* === TOP BAR === */ .topbar { background: var(--stone-900); color: var(--stone-400); text-align: center; padding: var(--space-2) var(--gutter); font-size: var(--text-10); letter-spacing: 0.14em; font-weight: 300; } .topbar a { color: var(--stone-300); transition: color var(--dur) var(--ease); } .topbar a:hover { color: var(--white); } /* === HEADER === */ .header { position: sticky; top: 0; z-index: 210; background: rgba(255,255,255,0.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--stone-200); transition: background var(--dur) var(--ease); } .header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 72px; max-width: var(--max-w); margin-inline: auto; padding-inline: var(--gutter); gap: var(--space-8); } .nav-toggle { display: none; flex-direction: column; gap: 7px; width: 32px; height: 32px; justify-content: center; } .hamburger-line { display: block; width: 24px; height: 1px; background: var(--stone-700); transition: all var(--dur) var(--ease); } /* Hamburger turns white when nav is open */ .nav-open .hamburger-line { background: var(--white); } .logo { text-align: center; text-decoration: none; } .logo-wordmark { font-family: var(--font-display); font-size: clamp(1rem, 0.8rem + 0.8vw, 1.4rem); font-weight: 400; letter-spacing: 0.22em; color: var(--stone-900); line-height: 1; text-transform: uppercase; } .logo-sub { font-family: var(--font-ui); font-size: var(--text-10); font-weight: 300; letter-spacing: 0.28em; color: var(--stone-400); text-transform: uppercase; margin-top: 3px; } .nav { display: flex; align-items: center; justify-content: flex-start; gap: clamp(var(--space-5), 2.5vw, var(--space-10)); } .nav a { font-size: var(--text-10); font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone-500); transition: color var(--dur) var(--ease); white-space: nowrap; } .nav a:hover { color: var(--stone-900); } .header-cta { justify-self: end; font-size: var(--text-10); font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone-700); padding: var(--space-3) var(--space-6); border: 1px solid var(--stone-300); transition: all var(--dur) var(--ease); white-space: nowrap; text-decoration: none; } .header-cta:hover { background: var(--stone-900); color: var(--white); border-color: var(--stone-900); } /* Mobile nav */ .mobile-nav { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh; background: var(--stone-900); z-index: 200; padding: var(--space-8) var(--gutter); padding-top: 100px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.35s var(--ease-out), visibility 0.35s; display: flex !important; flex-direction: column; overflow-y: auto; box-sizing: border-box; } .mobile-nav.open { opacity: 1; visibility: visible; pointer-events: all; } .mobile-nav-inner { display: flex; flex-direction: column; gap: var(--space-2); } .mobile-link { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 300; color: var(--white); padding: var(--space-4) 0; border-bottom: 1px solid rgba(255,255,255,0.1); transition: color var(--dur) var(--ease); letter-spacing: 0.04em; } .mobile-link:hover { color: var(--stone-300); } .mobile-contact { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-10); } .mobile-contact a { font-size: var(--text-xs); letter-spacing: 0.14em; color: rgba(255,255,255,0.45); text-transform: uppercase; } /* === HERO === */ .hero { position: relative; height: 100vh; min-height: 640px; display: flex; align-items: center; overflow: hidden; } .hero-media { position: absolute; inset: 0; } .hero-image { width: 100%; height: 100%; position: relative; overflow: hidden; } .hero-image video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .hero-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(10,8,6,0.72) 0%, rgba(10,8,6,0.35) 55%, rgba(10,8,6,0.15) 100%); z-index: 1; pointer-events: none; } .hero-content { position: relative; z-index: 1; width: 100%; max-width: 820px; padding-inline: var(--gutter); padding-block: 0; margin-left: max(var(--gutter), calc((100vw - var(--max-w)) / 2)); /* Shift content slightly above true center for visual weight */ margin-top: -8vh; } .hero-overline { font-family: var(--font-ui); font-size: var(--text-10); font-weight: 300; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: var(--space-6); } .hero-headline { font-family: var(--font-display); font-size: var(--text-hero); font-weight: 300; color: var(--white); line-height: 1.04; letter-spacing: -0.02em; margin-bottom: var(--space-6); } .hero-headline em { font-style: italic; font-weight: 300; color: rgba(255,255,255,0.78); } .hero-sub { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 300; font-style: italic; color: rgba(255,255,255,0.55); margin-bottom: var(--space-8); line-height: 1.6; } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); } .hero-scroll { position: absolute; bottom: var(--space-10); right: var(--gutter); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); color: rgba(255,255,255,0.3); } .hero-scroll span { font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; font-family: var(--font-ui); writing-mode: vertical-rl; } .scroll-line { width: 1px; height: 60px; background: linear-gradient(to bottom, rgba(255,255,255,0.3), rgba(255,255,255,0)); } /* === PHILOSOPHY STATEMENT === */ .philosophy { background: var(--stone-900); padding-block: clamp(var(--space-20), 10vw, var(--space-40)); } .philosophy-inner { max-width: 900px; margin-inline: auto; padding-inline: var(--gutter); text-align: center; } .philosophy-eyebrow { font-family: var(--font-ui); font-size: var(--text-10); font-weight: 300; letter-spacing: 0.24em; text-transform: uppercase; color: var(--stone-500); margin-bottom: var(--space-10); } .philosophy-statement { font-family: var(--font-display); font-size: clamp(1.5rem, 1rem + 2vw, 2.8rem); font-weight: 300; font-style: italic; color: var(--white); line-height: 1.4; letter-spacing: 0.01em; margin-bottom: var(--space-8); } .philosophy-attr { font-size: var(--text-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone-500); font-family: var(--font-ui); font-weight: 300; } /* === FEATURE SECTION (Sentence Mod) === */ .feature-section { padding-block: 0; overflow: hidden; } .feature-grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; } .feature-visual { position: relative; overflow: hidden; } .feature-img { width: 100%; height: 100%; min-height: 600px; object-fit: cover; } .feature-img-1 { background-image: url('assets/feature-sentence-mod.png'); background-size: cover; background-position: center; } .feature-img-1::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, transparent 0%, rgba(248,247,244,0.04) 100%); } .feature-text { padding: clamp(var(--space-16), 6vw, var(--space-32)) clamp(var(--space-10), 5vw, var(--space-24)); display: flex; flex-direction: column; justify-content: center; background: var(--off-white); } .feature-list { display: flex; flex-direction: column; gap: 0; margin-top: var(--space-8); border-top: 1px solid var(--stone-200); } .feature-item { display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--space-5); align-items: start; padding-block: var(--space-8); border-bottom: 1px solid var(--stone-200); } .feature-num { font-family: var(--font-ui); font-size: var(--text-10); font-weight: 300; letter-spacing: 0.1em; color: var(--stone-400); padding-top: 3px; } .feature-item h3 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 400; color: var(--stone-900); margin-bottom: var(--space-2); letter-spacing: 0.01em; } .feature-item p { font-size: var(--text-sm); color: var(--stone-500); line-height: 1.75; font-weight: 300; } /* === COUNTY SECTION === */ .county-section { background: linear-gradient(160deg, #1c1a17 0%, #2d2820 50%, #3a3126 100%); padding-block: clamp(var(--space-20), 10vw, var(--space-40)); } .county-inner { max-width: var(--max-w); margin-inline: auto; padding-inline: var(--gutter); } .county-heading { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 300; color: var(--white); line-height: 1.15; letter-spacing: -0.01em; margin-bottom: var(--space-6); max-width: 16ch; } .county-body { font-size: var(--text-base); color: rgba(255,255,255,0.45); line-height: 1.8; font-weight: 300; max-width: 55ch; margin-bottom: var(--space-16); } .county-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255,255,255,0.08); } .county-item { font-family: var(--font-ui); font-size: var(--text-10); letter-spacing: 0.18em; font-weight: 300; color: rgba(255,255,255,0.45); text-transform: uppercase; padding: var(--space-6) 0; border-bottom: 1px solid rgba(255,255,255,0.08); border-right: 1px solid rgba(255,255,255,0.08); padding-inline: var(--space-6); transition: color var(--dur) var(--ease); } .county-item:nth-child(4n) { border-right: none; } .county-item:hover { color: rgba(255,255,255,0.8); } /* === ABOUT === */ .about-section { background: var(--white); padding-block: clamp(var(--space-20), 8vw, var(--space-40)); } .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--space-12), 8vw, var(--space-32)); max-width: var(--max-w); margin-inline: auto; padding-inline: var(--gutter); align-items: start; } .about-img-block { position: relative; } .about-img { aspect-ratio: 3 / 4; background-image: url('assets/about-portrait.png?v=2'); background-size: cover; background-position: center top; } .about-credential { position: absolute; bottom: calc(-1 * var(--space-5)); right: calc(-1 * var(--space-6)); background: var(--stone-900); color: var(--white); padding: var(--space-6) var(--space-8); text-align: center; } .cred-year { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 300; display: block; line-height: 1; } .cred-label { font-size: 9px; letter-spacing: 0.22em; font-family: var(--font-ui); font-weight: 300; display: block; margin-top: var(--space-2); opacity: 0.5; } .about-text-col { padding-top: var(--space-6); } .credentials-list { display: flex; flex-direction: column; border-top: 1px solid var(--stone-200); margin-top: var(--space-10); margin-bottom: var(--space-4); } .cred-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-6); padding-block: var(--space-5); border-bottom: 1px solid var(--stone-100); } .cred-label-sm { font-family: var(--font-ui); font-size: var(--text-10); letter-spacing: 0.2em; font-weight: 300; text-transform: uppercase; color: var(--stone-400); flex-shrink: 0; } .cred-value { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 300; color: var(--stone-900); text-align: right; } /* === PRACTICE AREAS === */ .practice-section { background: var(--off-white); padding-block: clamp(var(--space-20), 8vw, var(--space-40)); } .practice-inner { max-width: var(--max-w); margin-inline: auto; padding-inline: var(--gutter); } .practice-header { margin-bottom: var(--space-16); } .practice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--stone-200); } .practice-card { position: relative; background: var(--white); overflow: hidden; min-height: 340px; display: flex; flex-direction: column; text-decoration: none; color: inherit; cursor: default; transition: background var(--dur) var(--ease); } a.practice-card { cursor: pointer; } .practice-card-bg { position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur-slow) var(--ease); } .practice-bg-1 { background: linear-gradient(160deg, #2a2420 0%, #4e4335 100%); } .practice-bg-2 { background: linear-gradient(160deg, #1c2230 0%, #2d3545 100%); } .practice-bg-3 { background: linear-gradient(160deg, #2a2420 0%, #5a4a3a 100%); } .practice-bg-4 { background: linear-gradient(160deg, #1f2820 0%, #3a5040 100%); } .practice-bg-5 { background: linear-gradient(160deg, #28201c 0%, #504038 100%); } .practice-bg-6 { background: linear-gradient(160deg, #1c2028 0%, #3a3d50 100%); } .practice-card:hover .practice-card-bg { opacity: 1; } .practice-card:hover .practice-card-content h3, .practice-card:hover .practice-card-content p, .practice-card:hover .practice-num, .practice-card:hover .practice-cta { color: rgba(255,255,255,0.85); } .practice-card:hover .practice-num { color: rgba(255,255,255,0.3); } .practice-card-content { position: relative; z-index: 1; padding: var(--space-10); display: flex; flex-direction: column; height: 100%; } .practice-num { font-size: var(--text-10); letter-spacing: 0.14em; font-family: var(--font-ui); font-weight: 300; color: var(--stone-400); margin-bottom: var(--space-8); transition: color var(--dur) var(--ease); } .practice-card h3 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 300; color: var(--stone-900); line-height: 1.2; margin-bottom: var(--space-4); letter-spacing: 0.01em; transition: color var(--dur) var(--ease); } .practice-card p { font-size: var(--text-sm); color: var(--stone-500); line-height: 1.75; font-weight: 300; flex: 1; transition: color var(--dur) var(--ease); } .practice-cta { font-size: var(--text-10); letter-spacing: 0.2em; font-family: var(--font-ui); font-weight: 300; color: var(--stone-400); text-transform: uppercase; margin-top: var(--space-8); transition: color var(--dur) var(--ease); } .practice-card-hero { grid-row: span 2; } /* === FAQ === */ .faq-section { background: var(--white); padding-block: clamp(var(--space-20), 8vw, var(--space-40)); } .faq-inner { max-width: var(--max-w); margin-inline: auto; padding-inline: var(--gutter); display: grid; grid-template-columns: 1fr 1.8fr; gap: clamp(var(--space-12), 8vw, var(--space-32)); align-items: start; } .faq-header { position: sticky; top: 90px; } .faq-list { display: flex; flex-direction: column; } .faq-item { border-bottom: 1px solid var(--stone-100); overflow: hidden; } .faq-item:first-child { border-top: 1px solid var(--stone-100); } .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); padding-block: var(--space-7); font-family: var(--font-display); font-size: var(--text-lg); font-weight: 300; color: var(--stone-900); cursor: pointer; list-style: none; transition: color var(--dur) var(--ease); line-height: 1.4; letter-spacing: 0.01em; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary:hover { color: var(--stone-500); } .faq-item summary::after { content: '+'; font-size: 1.5rem; font-weight: 200; font-family: var(--font-ui); color: var(--stone-400); flex-shrink: 0; transition: transform var(--dur) var(--ease); } .faq-item[open] summary::after { transform: rotate(45deg); } .faq-item > p { font-size: var(--text-sm); color: var(--stone-500); line-height: 1.85; font-weight: 300; padding-bottom: var(--space-8); max-width: 60ch; } /* === CONTACT === */ .contact-section { background: var(--stone-50); } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 70vh; } .contact-left { overflow: hidden; } .contact-img { width: 100%; height: 100%; min-height: 500px; background-image: url('assets/contact-bg.png'); background-size: cover; background-position: center; } .contact-right { padding: clamp(var(--space-16), 6vw, var(--space-32)); display: flex; flex-direction: column; justify-content: center; background: var(--stone-50); } .contact-details { display: flex; flex-direction: column; border-top: 1px solid var(--stone-200); margin-bottom: var(--space-8); margin-top: var(--space-4); } .contact-line { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-6); padding-block: var(--space-5); border-bottom: 1px solid var(--stone-100); } .contact-label { font-family: var(--font-ui); font-size: var(--text-10); letter-spacing: 0.2em; font-weight: 300; text-transform: uppercase; color: var(--stone-400); flex-shrink: 0; } .contact-line a, .contact-line span { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 300; color: var(--stone-900); text-align: right; line-height: 1.4; transition: color var(--dur) var(--ease); } .contact-line a:hover { color: var(--stone-500); } .contact-note { font-size: var(--text-xs); color: var(--stone-400); line-height: 1.75; font-weight: 300; border-top: 1px solid var(--stone-200); padding-top: var(--space-6); } /* Contact Form */ .form-section { background: var(--white); padding-block: clamp(var(--space-20), 8vw, var(--space-32)); border-top: 1px solid var(--stone-100); } .form-inner { max-width: 900px; margin-inline: auto; padding-inline: var(--gutter); text-align: center; } .form-title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 300; color: var(--stone-900); margin-bottom: var(--space-12); letter-spacing: -0.01em; } .contact-form { text-align: left; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); } .form-field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-6); } .form-field-full { grid-column: span 2; } .form-field label { font-family: var(--font-ui); font-size: var(--text-10); font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: var(--stone-400); } .form-field input, .form-field select, .form-field textarea { background: transparent; border: none; border-bottom: 1px solid var(--stone-200); padding: var(--space-3) 0; font-size: var(--text-base); font-weight: 300; color: var(--stone-900); font-family: var(--font-ui); transition: border-color var(--dur) var(--ease); border-radius: 0; outline: none; } .form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-bottom-color: var(--stone-700); } .form-field input::placeholder, .form-field textarea::placeholder { color: var(--stone-300); font-weight: 300; } .form-field textarea { resize: vertical; min-height: 100px; } .form-field select { -webkit-appearance: none; cursor: pointer; } .form-disclaimer { font-size: var(--text-xs); color: var(--stone-400); line-height: 1.7; margin-bottom: var(--space-10); font-weight: 300; text-align: center; max-width: 60ch; margin-inline: auto; } .btn-submit { display: block; margin-inline: auto; cursor: pointer; font-family: var(--font-ui); } .form-success { text-align: center; font-family: var(--font-display); font-size: var(--text-lg); font-style: italic; font-weight: 300; color: var(--stone-700); margin-top: var(--space-8); padding: var(--space-6); border: 1px solid var(--stone-200); } /* === REEL BAND ===*/ .reel-section { position: relative; height: 55vh; min-height: 320px; overflow: hidden; } .reel-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .reel-overlay { position: absolute; inset: 0; background: rgba(10,8,6,0.38); display: flex; align-items: center; justify-content: center; } .reel-text { font-family: var(--font-ui); font-size: var(--text-10); font-weight: 300; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(255,255,255,0.55); } /* === FOOTER === */ .footer { background: var(--stone-900); padding-block: clamp(var(--space-16), 6vw, var(--space-24)); } .footer-top { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-12); max-width: var(--max-w); margin-inline: auto; padding-inline: var(--gutter); padding-bottom: var(--space-16); border-bottom: 1px solid rgba(255,255,255,0.08); align-items: start; } .footer-wordmark { font-family: var(--font-display); font-size: clamp(1.2rem, 0.8rem + 1vw, 1.8rem); font-weight: 300; letter-spacing: 0.2em; color: var(--white); text-transform: uppercase; line-height: 1; } .footer-firm { font-size: var(--text-10); letter-spacing: 0.28em; font-family: var(--font-ui); font-weight: 300; color: var(--stone-500); text-transform: uppercase; margin-top: var(--space-2); } .footer-nav { display: flex; flex-direction: column; gap: var(--space-3); } .footer-nav a { font-size: var(--text-10); letter-spacing: 0.2em; font-family: var(--font-ui); font-weight: 300; text-transform: uppercase; color: var(--stone-500); transition: color var(--dur) var(--ease); } .footer-nav a:hover { color: var(--white); } .footer-contact-col { display: flex; flex-direction: column; gap: var(--space-3); text-align: right; } .footer-contact-col a, .footer-contact-col span { font-size: var(--text-xs); color: var(--stone-500); font-family: var(--font-ui); font-weight: 300; transition: color var(--dur) var(--ease); } .footer-contact-col a:hover { color: var(--white); } .footer-bottom { max-width: var(--max-w); margin-inline: auto; padding-inline: var(--gutter); padding-top: var(--space-8); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-4); } .footer-bottom span { font-size: 10px; letter-spacing: 0.1em; font-family: var(--font-ui); font-weight: 300; color: var(--stone-500); } /* ===================================================== RESPONSIVE — Tablet (≤1024px) ===================================================== */ @media (max-width: 1024px) { /* Header */ .nav { display: none; } .header-cta { display: none; } .nav-toggle { display: flex; } .header-inner { grid-template-columns: 44px 1fr; gap: var(--space-4); } .logo { text-align: left; } /* Feature section — image on top, text below */ .feature-grid { grid-template-columns: 1fr; } .feature-visual { order: -1; min-height: 50vw; max-height: 480px; } .feature-img { min-height: 50vw; max-height: 480px; } /* County */ .county-grid { grid-template-columns: repeat(2, 1fr); } .county-item:nth-child(4n) { border-right: 1px solid rgba(255,255,255,0.08); } .county-item:nth-child(2n) { border-right: none; } /* About — show portrait on tablet */ .about-grid { grid-template-columns: 1fr 1.3fr; gap: var(--space-12); } .about-visual-col { display: block; } /* Practice */ .practice-grid { grid-template-columns: 1fr 1fr; } .practice-card-hero { grid-row: span 1; } /* FAQ */ .faq-inner { grid-template-columns: 1fr; gap: var(--space-10); } .faq-header { position: static; margin-bottom: var(--space-4); } /* Contact */ .contact-grid { grid-template-columns: 1fr; } .contact-left { display: none; } /* Footer */ .footer-top { grid-template-columns: 1fr 1fr; } .footer-contact-col { text-align: left; } } /* ===================================================== RESPONSIVE — Mobile (≤768px) ===================================================== */ @media (max-width: 768px) { /* Global */ :root { --gutter: clamp(20px, 5vw, 40px); } /* Topbar — smaller, let marquee handle it */ .topbar { padding: 8px var(--gutter); font-size: 9px; } /* Header */ .header-inner { height: 60px; } /* Hero — compact */ .hero { height: 100svh; min-height: 580px; } .hero-content { max-width: 100%; margin-left: 0; margin-top: 0; padding-inline: var(--gutter); padding-top: 96px; /* clear topbar + header */ padding-bottom: var(--space-10); } .hero-headline { font-size: clamp(2.6rem, 9vw, 4rem); letter-spacing: -0.02em; line-height: 1.06; } .hero-sub { font-size: var(--text-base); margin-bottom: var(--space-8); } .hero-actions { flex-direction: column; gap: var(--space-3); } .btn-primary-rh, .btn-ghost-rh { width: 100%; text-align: center; padding: var(--space-4) var(--space-6); } .hero-scroll { display: none; } .hero-image::after { /* Stronger overlay on mobile for readability */ background: linear-gradient(to bottom, rgba(10,8,6,0.55) 0%, rgba(10,8,6,0.6) 60%, rgba(10,8,6,0.4) 100%); } /* Philosophy */ .philosophy-statement { font-size: clamp(1.3rem, 5vw, 2rem); } .philosophy-attr { font-size: 9px; letter-spacing: 0.14em; } /* Feature */ .feature-visual { min-height: 260px; max-height: 320px; } .feature-img { min-height: 260px; max-height: 320px; } .feature-text { padding: var(--space-10) var(--gutter); } .feature-item { grid-template-columns: 2rem 1fr; gap: var(--space-4); padding-block: var(--space-6); } /* County */ .county-grid { grid-template-columns: 1fr 1fr; } .county-item { padding: var(--space-4); font-size: 9px; letter-spacing: 0.14em; } .county-heading { font-size: clamp(1.6rem, 6vw, 2.5rem); max-width: 100%; } /* About — single column, no portrait */ .about-grid { grid-template-columns: 1fr; } .about-visual-col { display: none; } .about-text-col { padding-top: 0; } .cred-row { flex-direction: column; gap: var(--space-1); align-items: flex-start; } .cred-value { text-align: left; font-size: var(--text-base); } /* Practice */ .practice-grid { grid-template-columns: 1fr; gap: 1px; } .practice-card-hero { grid-row: span 1; } .practice-card { min-height: 220px; } .practice-card-content { padding: var(--space-8); } .practice-card h3 { font-size: var(--text-xl); } /* FAQ */ .faq-item summary { font-size: var(--text-base); padding-block: var(--space-5); } .faq-item > p { padding-bottom: var(--space-5); } /* Contact */ .contact-right { padding: var(--space-10) var(--gutter); } .contact-line { flex-direction: column; gap: var(--space-1); align-items: flex-start; } .contact-line a, .contact-line span { text-align: left; font-size: var(--text-base); } /* Form */ .form-section { padding-block: var(--space-12) var(--space-16); } .form-inner { padding-inline: var(--gutter); } .form-row { grid-template-columns: 1fr; gap: 0; } .form-field-full { grid-column: span 1; } .form-title { font-size: clamp(1.8rem, 6vw, 3rem); margin-bottom: var(--space-8); } /* Reel band */ .reel-section { height: 40vh; min-height: 200px; } .reel-text { font-size: 8px; letter-spacing: 0.2em; text-align: center; padding-inline: var(--gutter); } /* Footer */ .footer-top { grid-template-columns: 1fr; gap: var(--space-8); padding-bottom: var(--space-10); } .footer-contact-col { text-align: left; } .footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--space-2); padding-top: var(--space-5); } .footer-wordmark { font-size: 1.1rem; letter-spacing: 0.18em; } } /* ===================================================== RESPONSIVE — Small mobile (≤390px) ===================================================== */ @media (max-width: 390px) { .hero-headline { font-size: clamp(2.2rem, 10vw, 3rem); } .logo-wordmark { font-size: 0.95rem; letter-spacing: 0.14em; } .philosophy-statement { font-size: 1.2rem; } .county-grid { grid-template-columns: 1fr; } .county-item { border-right: none !important; } .section-heading { font-size: clamp(1.7rem, 7vw, 2.5rem); } }