/* Theme Name: Zack Law Firm Theme URI: https://zacklawfirm.com Author: Dan Gilroy Design Author URI: https://dangilroydesign.com Description: Custom WordPress theme for Zack Law Firm, PLLC — a boutique commercial litigation firm in Miami, Florida. Version: 1.0.0 License: Proprietary Text Domain: zack-law-firm */ :root { --navy: #15406a; --navy-dark: #0a1e3d; --navy-gradient-end: #15406a; --blue-hover: #348ff3; --blue-bright: #00b2ff; --blue-white: #dbeeff; --banner-bg: rgba(21, 64, 106, 0.9); --white: #ffffff; --white-90: rgba(255, 255, 255, 0.9); --white-70: rgba(255, 255, 255, 0.7); --white-50: rgba(255, 255, 255, 0.5); --white-30: rgba(255, 255, 255, 0.3); --white-15: rgba(255, 255, 255, 0.15); --white-06: rgba(255, 255, 255, 0.06); --font-heading: 'Cormorant Garamond', 'Times New Roman', Times, serif; --font-body: 'Libre Franklin', Helvetica, Arial, sans-serif; --font-script: 'Playfair Display', cursive; --font-tagline: 'Cormorant Infant', Georgia, serif; --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 2rem; --space-lg: 4rem; --space-xl: 6rem; --space-2xl: 8rem; --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --transition-smooth: 0.4s var(--ease-out-expo); --max-width: 1100px; --max-width-narrow: 900px; --header-height: 90px; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-body); font-weight: 400; color: var(--navy); line-height: 1.7; overflow-x: hidden; background: var(--white); } a { color: var(--navy); text-decoration: none; transition: color var(--transition-smooth); } a:hover { color: var(--blue-hover); } img { max-width: 100%; display: block; height: auto; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 400; line-height: 1.3; color: var(--navy); } h1 { font-size: clamp(2.5rem, 5vw, 4rem); } h2 { font-size: clamp(2rem, 4vw, 3rem); } h3 { font-size: clamp(1.75rem, 3.3vw, 2.6rem); } p { margin-bottom: 1.5rem; } p:last-child { margin-bottom: 0; } /* HEADER */ .site-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; padding: 1.5rem 2.5rem; display: flex; align-items: center; justify-content: space-between; transition: background var(--transition-smooth), padding var(--transition-smooth); } .site-header.scrolled { background: rgba(10, 30, 61, 0.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 1rem 2.5rem; } .site-header--light .header-logo a { color: var(--navy); } .site-header--light .hamburger span { background: var(--navy); } .site-header--light .search-toggle svg { stroke: var(--navy); } .site-header--light.scrolled { background: rgba(255,255,255,0.95); } .header-logo { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 500; letter-spacing: 0.08em; } .header-logo a { color: var(--white); opacity: 0; transition: opacity 0.6s ease; } .header-logo a.visible { opacity: 1; } .site-header--light .header-logo a { opacity: 1; } .header-right { display: flex; align-items: center; gap: 1.5rem; } .search-toggle { background: none; border: none; cursor: pointer; padding: 0.25rem; display: flex; align-items: center; } .search-toggle svg { width: 20px; height: 20px; stroke: var(--white); fill: none; stroke-width: 2; transition: stroke var(--transition-smooth); } .search-toggle:hover svg { stroke: var(--blue-hover); } .site-header--light .search-toggle svg { stroke: var(--navy); } .hamburger { background: none; border: none; cursor: pointer; width: 28px; height: 20px; position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 0; } .hamburger span { display: block; width: 100%; height: 2px; background: var(--white); transition: all 0.4s var(--ease-out-expo); transform-origin: center; } .hamburger.active span:nth-child(1) { transform: translateY(9px) rotate(45deg); } .hamburger.active span:nth-child(2) { opacity: 0; } .hamburger.active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); } /* PRIMARY NAV (DESKTOP) */ .primary-nav { display: none; } @media (min-width: 901px) { .primary-nav { display: block; } .primary-nav__list { list-style: none; display: flex; align-items: center; gap: 2.5rem; } .primary-nav__list li a { font-family: var(--font-body); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--white); transition: color var(--transition-smooth); } .primary-nav__list li a:hover { color: var(--blue-hover); } .site-header--light .primary-nav__list li a { color: var(--navy); } .site-header--light .primary-nav__list li a:hover { color: var(--blue-hover); } .site-header.scrolled .primary-nav__list li a { color: var(--white); } .site-header--light.scrolled .primary-nav__list li a { color: var(--navy); } } /* ── Site Logo (Header) ── */ .site-logo { display: block; text-decoration: none; } .site-logo__img { display: block; height: 50px; width: auto; } /* OVERLAY MENU */ .overlay-menu { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: var(--white); z-index: 999; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0.5s ease; } .overlay-menu.open { opacity: 1; visibility: visible; } .overlay-menu-inner { display: flex; width: 70%; max-width: 900px; } .overlay-menu-left { flex: 1; padding-right: 4rem; border-right: 1px solid rgba(21, 64, 106, 0.15); display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; } .overlay-menu-right { flex: 1; padding-left: 4rem; display: flex; flex-direction: column; justify-content: center; gap: 1.8rem; } .overlay-menu-left a { font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 400; color: var(--navy); display: block; line-height: 1.3; padding: 0.3rem 0; transition: color 0.3s ease, transform 0.3s ease; } .overlay-menu-left a:hover { color: var(--blue-hover); transform: translateX(8px); } .overlay-menu-right a { font-family: var(--font-body); font-size: 0.8rem; font-weight: 500; color: var(--navy); letter-spacing: 0.18em; text-transform: uppercase; display: block; transition: color 0.3s ease, transform 0.3s ease; } .overlay-menu-right a:hover { color: var(--blue-hover); transform: translateX(6px); } .overlay-menu.open .overlay-menu-left a, .overlay-menu.open .overlay-menu-right a { animation: menuItemIn 0.5s var(--ease-out-expo) forwards; opacity: 0; transform: translateY(20px); } .overlay-menu.open .overlay-menu-left a:nth-child(1) { animation-delay: 0.1s; } .overlay-menu.open .overlay-menu-left a:nth-child(2) { animation-delay: 0.15s; } .overlay-menu.open .overlay-menu-left a:nth-child(3) { animation-delay: 0.2s; } .overlay-menu.open .overlay-menu-left a:nth-child(4) { animation-delay: 0.25s; } .overlay-menu.open .overlay-menu-right a:nth-child(1) { animation-delay: 0.15s; } .overlay-menu.open .overlay-menu-right a:nth-child(2) { animation-delay: 0.2s; } .overlay-menu.open .overlay-menu-right a:nth-child(3) { animation-delay: 0.25s; } .overlay-menu.open .overlay-menu-right a:nth-child(4) { animation-delay: 0.3s; } .overlay-menu.open .overlay-menu-right a:nth-child(5) { animation-delay: 0.35s; } @keyframes menuItemIn { to { opacity: 1; transform: translateY(0); } } /* SEARCH OVERLAY */ .search-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: var(--white); z-index: 1001; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease; } .search-overlay.open { opacity: 1; visibility: visible; } .search-overlay-close { position: absolute; top: 1.5rem; right: 2.5rem; background: none; border: none; cursor: pointer; padding: 0.5rem; } .search-overlay-close svg { width: 24px; height: 24px; stroke: var(--navy); fill: none; stroke-width: 2; } .search-overlay-inner { width: 60%; max-width: 700px; } .search-overlay-inner input { width: 100%; font-family: var(--font-heading); font-size: clamp(1.5rem, 3vw, 2.5rem); color: var(--navy); border: none; border-bottom: 2px solid var(--navy); padding: 0.5rem 0; background: transparent; outline: none; } .search-overlay-inner input::placeholder { color: rgba(21, 64, 106, 0.35); } /* DIAGONAL LINES */ .home-page { background: var(--navy-dark); } .home-page::before { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100vh; background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy-gradient-end) 100%); z-index: 0; } .lines-container { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 1; pointer-events: none; } .diagonal-lines { width: 100%; height: 100%; } .line-stroke { stroke-linecap: butt; fill: none; stroke-dasharray: 2000; stroke-dashoffset: 2000; } .line-stroke.thick { stroke-width: 90; } .line-stroke.medium { stroke-width: 45; } .line-stroke.thin { stroke-width: 18; } @keyframes drawLineFull { from { stroke-dashoffset: 2000; } to { stroke-dashoffset: 0; } } @keyframes drawLineP1 { from { stroke-dashoffset: 2000; } to { stroke-dashoffset: 600; } } @keyframes drawLineP2 { from { stroke-dashoffset: 2000; } to { stroke-dashoffset: 800; } } @keyframes drawLineP3 { from { stroke-dashoffset: 2000; } to { stroke-dashoffset: 400; } } @keyframes drawLineP4 { from { stroke-dashoffset: 2000; } to { stroke-dashoffset: 1000; } } .line-stroke:nth-child(1) { animation: drawLineFull 1.4s ease-out 0s forwards; } .line-stroke:nth-child(2) { animation: drawLineP2 1.4s ease-out 0.12s forwards; } .line-stroke:nth-child(3) { animation: drawLineP3 1.4s ease-out 0.24s forwards; } .line-stroke:nth-child(4) { animation: drawLineFull 1.4s ease-out 0.36s forwards; } .line-stroke:nth-child(5) { animation: drawLineP1 1.4s ease-out 0.48s forwards; } .line-stroke:nth-child(6) { animation: drawLineFull 1.4s ease-out 0.60s forwards; } .line-stroke:nth-child(7) { animation: drawLineP4 1.4s ease-out 0.72s forwards; } .line-stroke:nth-child(8) { animation: drawLineFull 1.4s ease-out 0.84s forwards; } .line-stroke:nth-child(9) { animation: drawLineP2 1.4s ease-out 0.96s forwards; } .line-stroke:nth-child(10) { animation: drawLineP3 1.4s ease-out 1.08s forwards; } /* HERO SCREEN 1 */ .hero-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; z-index: 10; opacity: 1; transition: opacity 1.2s ease-out, transform 1.2s ease-out; } .hero-screen.fade-out { opacity: 0; transform: scale(1.02); pointer-events: none; } .hero-text-container { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; } .firm-name-container { display: flex; align-items: center; font-family: var(--font-heading); font-weight: 600; font-size: clamp(3.5rem, 8vw, 8.5rem); color: rgba(245, 240, 232, 1.0); letter-spacing: 0.04em; margin-bottom: 0.4rem; } .firm-name-cap { font-size: 1.12em; line-height: 1; } .firm-name-bold { font-weight: 900; } .firm-name-right { font-weight: 100; } .firm-name-slash { position: relative; z-index: 2; margin: 0 0.05em; font-weight: 300; color: var(--blue-hover); transform: scaleY(0); transform-origin: center center; } @keyframes slashGrow { 0% { transform: scaleY(0); } 100% { transform: scaleY(1); } } .firm-name-slash { animation: slashGrow 0.7s var(--ease-out-expo) 0.8s forwards; } .firm-name-clip-left, .firm-name-clip-right { overflow: hidden; display: inline-block; } .firm-name-left { display: inline-block; transform: translateX(100%); } .firm-name-right { display: inline-block; transform: translateX(-100%); } @keyframes slideOutLeft { 0% { transform: translateX(100%); } 100% { transform: translateX(0); } } @keyframes slideOutRight { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } } .firm-name-left { animation: slideOutLeft 1.3s var(--ease-out-expo) 1.4s forwards; } .firm-name-right { animation: slideOutRight 1.3s var(--ease-out-expo) 1.4s forwards; } .miami-text { font-family: var(--font-body); font-weight: 300; font-size: clamp(1rem, 2.2vw, 2.2rem); color: rgba(245, 240, 232, 1.0); letter-spacing: 0.35em; text-transform: uppercase; opacity: 0; transform: translateY(12px); animation: fadeInUp 1s ease-out 2.4s forwards; } @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } } /* EXCELLENCE SCREEN 2 */ .excellence-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 5; opacity: 0; pointer-events: none; transition: opacity 1.4s ease-in; } .excellence-screen.active { opacity: 1; pointer-events: auto; } .excellence-content { position: relative; text-align: center; z-index: 2; } .excellence-content::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 800px; height: 800px; background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.04) 35%, transparent 70%); pointer-events: none; opacity: 0; z-index: -1; } .excellence-screen.active .excellence-content::before { animation: glowFadeIn 2s ease-out 0.3s forwards; } @keyframes glowFadeIn { to { opacity: 1; } } .excellence-title { font-family: 'Playfair Display', Georgia, serif; font-style:italic; font-size: clamp(3.5rem, 8vw, 7.5rem); color: var(--blue-hover); margin-bottom: 2.5rem; opacity: 0; line-height: 1.1; } .excellence-screen.active .excellence-title { animation: writeIn 1.8s cubic-bezier(0.4, 0, 0.2, 1) forwards; } @keyframes writeIn { 0% { opacity: 0; clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); } 100% { opacity: 1; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } } .tagline-container { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; } .tagline-item { font-family: var(--font-tagline); font-size: clamp(1.8rem, 2.8vw, 2.5rem); font-weight: 300; font-style: italic; color: var(--white-90); letter-spacing: 0.08em; opacity: 0; transform: translateY(18px); } .excellence-screen.active .tagline-item:nth-child(1) { animation: fadeInUp 0.8s ease-out 1s forwards; } .excellence-screen.active .tagline-item:nth-child(2) { animation: fadeInUp 0.8s ease-out 1.4s forwards; } .excellence-screen.active .tagline-item:nth-child(3) { animation: fadeInUp 0.8s ease-out 1.8s forwards; } .scroll-indicator { position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); cursor: pointer; opacity: 0; z-index: 2; } .excellence-screen.active .scroll-indicator { animation: fadeInUp 0.8s ease-out 2.6s forwards; } .scroll-indicator svg { width: 26px; height: 44px; animation: bounce 2.2s ease-in-out infinite; } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } } .scroll-indicator:hover svg { stroke: var(--blue-hover); } /* MAIN CONTENT */ .main-content { position: relative; z-index: 20; margin-top: 100vh; background: var(--blue-white); } .deco-bar { width: 60px; height: 4px; background: var(--blue-hover); margin: 2rem auto 0; } .section-welcome { padding: var(--space-2xl) var(--space-lg); max-width: var(--max-width-narrow); margin: 0 auto; text-align: center; } .section-welcome .section-overline { font-family: var(--font-body); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--blue-hover); margin-bottom: 1.5rem; } .section-welcome h2 { font-size: clamp(2rem, 4vw, 3.2rem); margin-bottom: 1.5rem; } .section-welcome p { font-size: 1.05rem; line-height: 1.8; opacity: 0.85; } /* PRACTICE TEASERS */ .section-practice { padding: var(--space-xl) var(--space-lg); background: var(--white); } .section-practice-inner { max-width: var(--max-width); margin: 0 auto; } .section-practice .section-header { display: flex; align-items: center; gap: 1.5rem; margin-bottom: var(--space-lg); } .section-practice .section-header h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); } .section-practice .section-header .deco-bar-h { flex-grow: 1; height: 1px; background: rgba(21, 64, 106, 0.15); } .practice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1px; background: rgba(21, 64, 106, 0.08); border: 1px solid rgba(21, 64, 106, 0.08); } .practice-card { background: var(--white); padding: 2.5rem 2rem; cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; min-height: 180px; transition: background 0.4s ease; } .practice-card:hover { background: var(--blue-white); } .practice-card h3 { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 500; margin-bottom: 0.75rem; transition: color 0.3s ease; } .practice-card:hover h3 { color: var(--blue-hover); } .practice-card p { font-size: 0.9rem; line-height: 1.7; opacity: 0.7; margin-bottom: 1.5rem; } .arrow-link { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-body); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy); transition: color 0.3s ease, transform 0.3s ease; } .practice-card:hover .arrow-link { color: var(--blue-hover); transform: translateX(4px); } .arrow-link svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; transform: rotate(-45deg); transition: transform 0.3s ease; } .practice-card:hover .arrow-link svg { transform: rotate(-45deg) translateX(2px); } .practice-card-industries { background: var(--navy); } .practice-card-industries .industries-overline { font-family: var(--font-body); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--blue-hover); margin-bottom: 0.75rem; } .practice-card-industries h3 { color: var(--blue-white); font-size: 1.6rem; } .practice-card-industries:hover h3 { color: var(--white); } .practice-card-industries p { color: var(--white-70); } .practice-card-industries .arrow-link { color: var(--blue-white); } .practice-card-industries:hover .arrow-link { color: var(--blue-hover); } .practice-card-industries:hover { background: var(--navy-dark); } /* NEWS */ .section-news { padding: var(--space-xl) var(--space-lg); background: var(--blue-white); } .section-news-inner { max-width: var(--max-width); margin: 0 auto; } .section-news .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-lg); } .section-news .section-header h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); } .section-news .section-header a { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 0.4rem; } .section-news .section-header a svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; transform: rotate(-45deg); } .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .news-card { cursor: pointer; } .news-card-image { width: 100%; aspect-ratio: 16 / 10; margin-bottom: 1.2rem; overflow: hidden; } .news-card-image.style-columns { background: linear-gradient(135deg, #1a3a5c, #0d2847); } .news-card-image.style-abstract { background: linear-gradient(135deg, #1a4a6c, #0a2a4d); } .news-card-image.style-building { background: linear-gradient(135deg, #15406a, #0d2040); } .news-card .overline { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--blue-hover); margin-bottom: 0.5rem; } .news-card h3 { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 500; line-height: 1.4; margin-bottom: 0.5rem; transition: color 0.3s ease; } .news-card:hover h3 { color: var(--blue-hover); } .news-card .date { font-size: 0.82rem; opacity: 0.5; } /* CREDENTIALS */ .section-credentials { padding: var(--space-lg); background: var(--white); text-align: center; } .credentials-inner { max-width: 800px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 3rem; flex-wrap: wrap; } .credential-badge { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .badge-placeholder { width: 80px; height: 80px; border: 2px solid rgba(21, 64, 106, 0.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .badge-placeholder svg { width: 32px; height: 32px; stroke: var(--navy); fill: none; stroke-width: 1.5; opacity: 0.4; } .credential-badge span { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.5; } /* CONTACT STRIP */ .section-contact { padding: var(--space-2xl) var(--space-lg); background: var(--navy); color: var(--blue-white); position: relative; overflow: hidden; border-top: 1px solid rgba(255,255,255,0.06); } .section-contact::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, transparent, rgba(255,255,255,0.03)); pointer-events: none; } .contact-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.6fr; gap: 0; align-items: center; position: relative; z-index: 1; } .contact-col-intro { padding-right: 3.5rem; border-right: 1px solid rgba(255,255,255,0.12); } .contact-col-intro h2 { font-size: clamp(2.2rem, 4vw, 3.2rem); color: var(--blue-white); margin-bottom: 1.5rem; line-height: 1.2; } .contact-col-intro p { font-size: 1rem; line-height: 1.85; color: var(--white-70); max-width: 36ch; } .contact-arrow-link { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-top: 1.5rem; color: var(--blue-white); transition: color 0.3s ease, transform 0.3s ease; } .contact-arrow-link svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; transform: rotate(-45deg); } .contact-arrow-link:hover { color: var(--blue-hover); transform: translateX(4px); } .contact-col-details { padding-left: 3.5rem; display: flex; align-items: center; } .contact-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 3rem; width: 100%; } .contact-item { display: flex; align-items: flex-start; gap: 1rem; } .contact-item svg { width: 18px; height: 18px; stroke: var(--blue-hover); fill: none; stroke-width: 1.5; flex-shrink: 0; margin-top: 0.15rem; } .contact-item-text { font-size: 0.95rem; line-height: 1.6; color: var(--white-70); } .contact-item-text a { color: var(--white-70); } .contact-item-text a:hover { color: var(--blue-hover); } /* FOOTER */ .site-footer { position: relative; z-index: 20; background: var(--navy-dark); padding: 2rem var(--space-lg); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } .footer-links { display: flex; gap: 2rem; list-style: none; } .footer-links a { font-size: 0.72rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white-50); } .footer-links a:hover { color: var(--blue-hover); } .footer-social { display: flex; align-items: center; gap: 1rem; } .footer-social a svg { width: 18px; height: 18px; fill: var(--white-50); transition: fill 0.3s ease; } .footer-social a:hover svg { fill: var(--blue-hover); } .footer-credit { font-size: 0.7rem; color: var(--white-30); letter-spacing: 0.05em; } .footer-credit a { color: var(--white-50); } .footer-credit a:hover { color: var(--blue-hover); } /* SCROLL REVEAL */ .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s var(--ease-out-expo); } .reveal.visible { opacity: 1; transform: translateY(0); } /* CATEGORY A: PRIMARY PAGES */ .page-primary { background-color: var(--blue-white); padding-top: var(--header-height); } .page-header-primary { padding: var(--space-xl) var(--space-lg) var(--space-lg); max-width: var(--max-width); margin: 0 auto; } .page-header-primary__bar { width: 60px; height: 4px; background-color: var(--blue-hover); margin-bottom: var(--space-md); } .page-header-primary h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); } .page-content-primary { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-lg) var(--space-2xl); } .page-content-primary section { margin-bottom: var(--space-xl); } .page-content-primary h2 { margin-bottom: var(--space-md); } /* CATEGORY B: SECONDARY PAGES */ .page-secondary { padding-top: var(--header-height); } .page-header-banner { background-color: var(--banner-bg); padding: var(--space-2xl) var(--space-lg) var(--space-xl); position: relative; overflow: hidden; } .page-header-banner h1 { font-size: clamp(3rem, 6vw, 6rem); color: var(--blue-white); max-width: var(--max-width); margin: 0 auto; } .page-header-banner__gradient { position: absolute; top: 0; right: 0; width: 30%; height: 100%; background: linear-gradient(to right, transparent, var(--banner-bg)); pointer-events: none; } .page-content-secondary { max-width: var(--max-width); margin: 0 auto; padding: var(--space-xl) var(--space-lg) var(--space-2xl); } .page-content-secondary h2 { margin-bottom: var(--space-md); } /* CATEGORY C: PRACTICE PAGES */ .practice-hero-image { width: 100%; height: clamp(300px, 40vw, 500px); object-fit: cover; display: block; } .practice-page-content { max-width: var(--max-width); margin: 0 auto; padding: var(--space-xl) var(--space-lg) var(--space-2xl); } .practice-page-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-md); } .print-btn { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-body); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy); background: none; border: 1px solid rgba(21, 64, 106, 0.3); padding: 0.5rem 1rem; cursor: pointer; transition: all 0.3s ease; } .print-btn:hover { color: var(--blue-hover); border-color: var(--blue-hover); } .print-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; } /* CATEGORY D: ATTORNEY BIOS */ .attorney-bio { padding-top: var(--header-height); background: var(--blue-white); } .attorney-bio__header { max-width: var(--max-width); margin: 0 auto; padding: var(--space-xl) var(--space-lg) 0; } .attorney-bio__top { max-width: var(--max-width); margin: 0 auto; padding: var(--space-lg); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); align-items: start; } .attorney-bio__photo { width: 100%; max-width: 400px; } .attorney-bio__photo img { width: 100%; height: auto; } .attorney-bio__contact h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: var(--space-xs); } .attorney-bio__title { font-family: var(--font-body); font-size: 0.85rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue-hover); margin-bottom: var(--space-md); } .attorney-bio__info { list-style: none; display: flex; flex-direction: column; gap: var(--space-xs); } .attorney-bio__info li { display: flex; align-items: center; gap: var(--space-xs); font-size: 0.95rem; } .attorney-bio__info svg { width: 18px; height: 18px; fill: none; stroke: var(--blue-hover); stroke-width: 2; flex-shrink: 0; } .attorney-bio__body { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-lg) var(--space-2xl); } /* PRACTICE INDEX */ .practice-list { list-style: none; } .practice-list__item a { font-family: var(--font-heading); font-size: 1.5rem; display: inline-flex; align-items: center; gap: 0.75rem; padding: var(--space-sm) 0; border-bottom: 1px solid rgba(21, 64, 106, 0.1); width: 100%; transition: color 0.3s ease, padding-left 0.3s ease; } .practice-list__item a:hover { color: var(--blue-hover); padding-left: var(--space-sm); } .practice-list__item a .nav-arrow { opacity: 0; transition: opacity 0.3s ease; } .practice-list__item a:hover .nav-arrow { opacity: 1; } /* TEAM (home page teasers) */ .section-team .team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-lg); } .section-team .team-card { text-align: center; } .section-team .team-card__photo { width: 100%; max-width: 300px; margin: 0 auto var(--space-md); aspect-ratio: 3 / 4; object-fit: cover; background: rgba(21, 64, 106, 0.1); } .section-team .team-card__name { font-family: var(--font-heading); font-size: 1.5rem; margin-bottom: var(--space-xs); } .section-team .team-card__name a { color: var(--navy); } .section-team .team-card__name a:hover { color: var(--blue-hover); } .section-team .team-card__title { font-size: 0.82rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue-hover); } /* BLOG */ .blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } .blog-card { background: var(--white); } .blog-card__image { width: 100%; height: 200px; object-fit: cover; } .blog-card__content { padding: var(--space-md); } .blog-card__category { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--blue-hover); margin-bottom: var(--space-xs); } .blog-card__title { font-family: var(--font-heading); font-size: 1.25rem; margin-bottom: var(--space-sm); line-height: 1.4; } .blog-card__title a { color: var(--navy); } .blog-card__title a:hover { color: var(--blue-hover); } .blog-card__excerpt { font-size: 0.95rem; line-height: 1.7; opacity: 0.7; } /* BLOG INDEX — background overrides */ .blog-index.page-primary { background: var(--white); } .blog-index .page-header-centered { background: var(--blue-white); } /* BLOG HERO — full-page featured post */ .blog-hero { position: relative; width: 100%; min-height: 100vh; display: flex; align-items: flex-end; overflow: hidden; } .blog-hero__bg { position: absolute; inset: 0; background: var(--blue-white); z-index: 0; } .blog-hero__bg::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 180px; background: linear-gradient(to bottom, transparent, var(--white)); z-index: 1; pointer-events: none; } .blog-hero__image-col { position: absolute; left: 0; bottom: 0; width: 50%; height: 100%; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; } .blog-hero__courthouse { width: auto; height: 88%; max-height: 92vh; object-fit: contain; object-position: center bottom; opacity: 0.85; filter: saturate(0.3) brightness(0.95) sepia(0.25) hue-rotate(185deg); mix-blend-mode: multiply; } .blog-hero__content { position: relative; z-index: 2; width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 5rem 10rem; display: flex; justify-content: flex-end; } .blog-hero__text { position: relative; width: 45%; max-width: 560px; } .blog-hero__text::before { content: ''; position: absolute; top: 40%; left: 40%; width: 800px; height: 800px; transform: translate(-50%, -50%); background: radial-gradient(ellipse, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.7) 20%, rgba(219, 238, 255, 0.3) 45%, transparent 65%); pointer-events: none; z-index: -1; } .blog-hero__rule { display: block; width: 40px; height: 1px; background: var(--navy); opacity: 0.25; margin-bottom: 1rem; } .blog-hero__category { font-family: var(--font-body); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--blue-hover); margin-bottom: 1.2rem; display: block; } .blog-hero__title { font-family: var(--font-heading); font-size: clamp(2rem, 3.5vw, 3.2rem); font-weight: 400; line-height: 1.25; margin-bottom: 1.2rem; color: var(--navy); } .blog-hero__title a { color: var(--navy); text-decoration: none; transition: color 0.3s ease; } .blog-hero__title a:hover { color: var(--blue-hover); } .blog-hero__excerpt { font-size: 1.05rem; line-height: 1.8; color: var(--navy); opacity: 0.82; margin-bottom: 1.8rem; } .blog-hero__meta { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; } .blog-hero__date { font-family: var(--font-body); font-size: 0.78rem; color: var(--navy); opacity: 0.4; } .blog-hero__read-more { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-body); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy); transition: color 0.3s ease, gap 0.3s ease; } .blog-hero__read-more:hover { color: var(--blue-hover); gap: 1rem; } .blog-hero__read-more svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; transform: rotate(-45deg); transition: transform 0.3s ease; } .blog-hero__read-more:hover svg { transform: rotate(0deg); } /* BLOG INDEX — section heading between hero and grid */ .blog-index__section-header { max-width: 1400px; margin: 0 auto; padding: 3rem 2.5rem 0; } .blog-index__heading { font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 3rem); font-weight: 400; color: var(--navy); } /* POST META — author, avatar, read time (shared across hero + cards) */ .post-meta { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .post-meta__avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .post-meta__author { font-family: var(--font-body); font-size: 0.85rem; font-weight: 500; color: var(--navy); } .post-meta__sep { width: 3px; height: 3px; border-radius: 50%; background: var(--navy); opacity: 0.3; flex-shrink: 0; } .post-meta__date { font-family: var(--font-body); font-size: 0.85rem; color: var(--navy); opacity: 0.55; } .post-meta__read-time { font-family: var(--font-body); font-size: 0.85rem; color: var(--navy); opacity: 0.55; } .blog-hero .post-meta__avatar { width: 34px; height: 34px; } /* BLOG INDEX */ .blog-index__body { max-width: 1400px; margin: 0 auto; padding: 3.5rem 2.5rem 5rem; background: var(--white); } /* Row of cards — 3 columns */ .blog-index-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } /* Card base */ .blog-index-card { position: relative; } .blog-index-card__link { display: block; text-decoration: none; } /* Image wrap */ .blog-index-card__image-wrap { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; margin-bottom: 1.2rem; } .blog-index-card__image { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--ease-out-expo); } .blog-index-card__link:hover .blog-index-card__image { transform: scale(1.03); } /* Placeholder image wraps — decorative SVG backgrounds per S&C image vocabulary */ .blog-index-card__image-wrap--placeholder { background: var(--navy); } .blog-index-card__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: rgba(219, 238, 255, 0.35); } .blog-index-card__placeholder svg { width: 55%; height: auto; max-width: 140px; } /* Placeholder style variants — unified navy palette, each visually distinct */ .placeholder-style--courthouse { background: linear-gradient(145deg, #132f54, #1a4a72); } .placeholder-style--columns { background: linear-gradient(135deg, #1a3a5c, #0d2847); } .placeholder-style--abstract { background: linear-gradient(155deg, #1a4a6c, #0a2a4d); } .placeholder-style--building { background: linear-gradient(140deg, #15406a, #0d2040); } .placeholder-style--tech { background: linear-gradient(130deg, #122e50, #183d60); } .placeholder-style--scales { background: linear-gradient(160deg, #163558, #0b2240); } /* Card body */ .blog-index-card__body { padding-top: 0; } .blog-index-card__category { font-family: var(--font-body); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--blue-hover); margin-bottom: 0.6rem; } .blog-index-card__title { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 500; line-height: 1.35; margin-bottom: 0.7rem; } .blog-index-card__title a { color: var(--navy); text-decoration: none; transition: color 0.3s ease; } .blog-index-card__title a:hover { color: var(--blue-hover); } .blog-index-card__excerpt { font-size: 0.95rem; line-height: 1.7; opacity: 0.8; margin-bottom: 0.85rem; } .blog-index-card__meta { display: flex; align-items: center; gap: 1rem; } .blog-index-card__date { font-family: var(--font-body); font-size: 0.78rem; color: var(--navy); opacity: 0.4; } .blog-index-card .post-meta { margin-top: 0.5rem; } /* Empty state */ .blog-index-empty { margin-bottom: 3rem; } .blog-index-empty h2 { font-family: var(--font-heading); font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 400; margin-bottom: 1rem; } .blog-index-empty p { font-size: 0.95rem; line-height: 1.85; opacity: 0.7; max-width: 600px; } /* Pagination */ .blog-pagination { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid rgba(21, 64, 106, 0.1); } .blog-pagination .page-numbers { list-style: none; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .blog-pagination .page-numbers li { display: inline-flex; } .blog-pagination .page-numbers a, .blog-pagination .page-numbers span { font-family: var(--font-body); font-size: 0.85rem; padding: 0.5rem 0.85rem; color: var(--navy); transition: color 0.3s ease, background 0.3s ease; } .blog-pagination .page-numbers a:hover { color: var(--blue-hover); background: rgba(21, 64, 106, 0.04); } .blog-pagination .page-numbers .current { color: var(--blue-hover); font-weight: 500; border-bottom: 2px solid var(--blue-hover); } .blog-pagination .page-numbers .prev, .blog-pagination .page-numbers .next { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; } /* ============================================================ SINGLE BLOG POST ============================================================ */ .blog-single__header { padding-bottom: 3rem; position: relative; overflow: hidden; } .blog-single__header::before { content: ''; position: absolute; top: 55%; left: 50%; width: 900px; height: 700px; transform: translate(-50%, -50%); background: radial-gradient(ellipse, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 25%, rgba(219, 238, 255, 0.2) 50%, transparent 70%); pointer-events: none; z-index: 0; } .blog-single__header .page-header-centered__inner { position: relative; z-index: 1; } .blog-single__category { font-family: var(--font-body); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--blue-hover); margin-bottom: 1.25rem; } .blog-single__meta { margin-top: 1.25rem; } .blog-single__meta time { font-family: var(--font-body); font-size: 0.85rem; color: var(--navy); opacity: 0.45; } /* Hero image */ .blog-single__hero { width: 100%; max-height: 480px; overflow: hidden; background: var(--blue-white); } .blog-single__hero-image { width: 100%; height: auto; max-height: 480px; object-fit: cover; display: block; } .blog-prose h2 { font-family: var(--font-heading); font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 400; color: var(--navy); margin-top: 2.5rem; margin-bottom: 1rem; } .blog-prose h3 { font-family: var(--font-heading); font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 500; color: var(--navy); margin-top: 2rem; margin-bottom: 0.75rem; } .blog-prose p { font-size: 0.95rem; line-height: 1.85; opacity: 0.82; margin-bottom: 1.25rem; } .blog-prose p:last-child { margin-bottom: 0; } .blog-prose ul, .blog-prose ol { margin-bottom: 1.5rem; padding-left: 1.5rem; } .blog-prose li { font-size: 0.95rem; line-height: 1.85; opacity: 0.82; margin-bottom: 0.4rem; } .blog-prose blockquote { border-left: 3px solid var(--blue-hover); padding: 1.5rem 0 1.5rem 2rem; margin: 2rem 0; } .blog-prose blockquote p { font-family: var(--font-tagline); font-size: 1.2rem; font-style: italic; line-height: 1.7; opacity: 0.9; } .blog-prose img { max-width: 100%; height: auto; margin: 2rem 0; } .blog-prose a { color: var(--blue-hover); border-bottom: 1px solid transparent; transition: border-color 0.3s ease; } .blog-prose a:hover { border-bottom-color: var(--blue-hover); } /* Related articles — reuses blog-index-row */ .blog-single__related .blog-index-row { gap: 2rem; } .blog-single__related .blog-index-card__title { font-size: 1.1rem; } /* BLOG RESPONSIVE */ @media (max-width: 900px) { .blog-hero { min-height: auto; align-items: stretch; flex-direction: column; } .blog-hero__bg { position: relative; min-height: 50vh; } .blog-hero__bg::after { height: 100px; } .blog-hero__image-col { position: relative; width: 100%; height: 50vh; justify-content: flex-start; padding-left: 1.5rem; } .blog-hero__courthouse { height: 100%; max-height: 50vh; } .blog-hero__text::before { width: 400px; height: 400px; left: 50%; top: 50%; } .blog-hero__content { padding: 2rem 1.5rem 3rem; justify-content: flex-start; } .blog-hero__text { width: 100%; max-width: 100%; } .blog-index__section-header { padding: 2rem 1.5rem 0; } .blog-index__body { padding: 2.5rem 1.5rem 4rem; } .blog-index-row { grid-template-columns: 1fr; gap: 2.5rem; } .blog-single__related .blog-index-row { grid-template-columns: 1fr; } .blog-single__hero { max-height: 320px; } .blog-single__header::before { width: 600px; height: 500px; } } @media (max-width: 600px) { .blog-hero__image-col { height: 40vh; } .blog-hero__title { font-size: 1.6rem; } .blog-index__section-header { padding: 1.5rem 1.5rem 0; } .blog-index__body { padding: 2rem 1.5rem 3rem; } .blog-index-card__title { font-size: 1.1rem; } .blog-single__header { padding-bottom: 2rem; } .blog-single__hero { max-height: 240px; } } /* INDUSTRIES */ .industries-columns { columns: 3; column-gap: var(--space-lg); list-style: none; } .industries-columns li { padding: var(--space-xs) 0; border-bottom: 1px solid rgba(21, 64, 106, 0.1); break-inside: avoid; } /* CONTACT PAGE */ .contact-banner { position: relative; background: var(--banner-bg); overflow: hidden; } .contact-banner::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(-55deg, transparent, transparent 60px, rgba(255, 255, 255, 0.018) 60px, rgba(255, 255, 255, 0.018) 61px); pointer-events: none; } .contact-banner__top { padding: clamp(5rem, 12vw, 8rem) 2.5rem clamp(1.5rem, 4vw, 2.5rem); text-align: center; position: relative; z-index: 2; } .contact-banner__title { font-family: var(--font-heading); font-weight: 400; font-size: clamp(2.6rem, 6vw, 5rem); line-height: 1.15; color: var(--blue-white); margin: 0; opacity: 0; transform: translateY(14px); animation: bannerWordReveal 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.18s forwards; margin-bottom:0; padding-bottom} /* CONTACT BAR — no top border, brighter text and icons */ .contact-bar { padding: 0 2.5rem 5rem; position: relative; z-index: 2; } .contact-bar__inner { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 2rem; flex-wrap: wrap; } .contact-bar__item { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-body); font-size: 0.82rem; font-weight: 400; color: rgba(219, 238, 255, 0.85); letter-spacing: 0.02em; white-space: nowrap; transition: color 0.3s ease; } .contact-bar__item:hover { color: var(--white); } .contact-bar__item a { color: var(--white); transition: color 0.3s ease; } .contact-bar__item a:hover { color: var(--white); text-decoration: underline} .contact-bar__fax-label, .contact-bar__fax-number { color: var(--white); } .contact-bar__icon { flex-shrink: 0; width: 15px; height: 15px; display: flex; align-items: center; justify-content: center; } .contact-bar__icon svg { width: 15px; height: 15px; stroke: var(--blue-hover); fill: none; stroke-width: 1.8; } .contact-bar__divider { width: 1px; height: 14px; background: rgba(219, 238, 255, 0.2); flex-shrink: 0; } /* CONTACT BODY — no sidebar */ .contact-body { max-width: 1200px; margin: 0 auto; padding: 3.5rem 2.5rem 5rem; } .contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; } /* GROUP PHOTO */ .contact-group-photo { position: sticky; top: 6rem; } .contact-group-photo__wrap { position: relative; } .contact-group-photo__accent { position: absolute; top: 10px; left: -8px; width: 100%; height: 100%; background: var(--blue-white); z-index: 0; transition: transform 0.5s var(--ease-out-expo); } .contact-group-photo:hover .contact-group-photo__accent { transform: translate(-2px, 2px); } .contact-group-photo__img { width: 100%; height: auto; display: block; position: relative; z-index: 1; } /* RIGHT COLUMN */ /* SECTION LABEL (used for map) */ .contact-section-label { font-family: var(--font-body); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--blue-hover); margin-bottom: 1.2rem; } /* ATTORNEY CARDS */ .contact-attorneys { display: flex; flex-direction: column; gap: 0; } .contact-attorney-card { padding: 1.75rem 0; border-top: 1px solid rgba(21, 64, 106, 0.12); } .contact-attorney-card:first-child { padding: 1.0; border-top: 0 } .contact-attorney-card:last-child { padding-bottom: 0; } .contact-attorney-card__name { font-family: var(--font-heading); font-size: 1.75rem; font-weight: 400; color: var(--navy); margin-bottom: 0.2rem; line-height: 1.2; } .contact-attorney-card__role { font-family: var(--font-body); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-hover); margin-bottom: 1rem; } .contact-attorney-card__details { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; } .contact-attorney-card__details li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.86rem; line-height: 1.5; } .contact-attorney-card__details svg { width: 16px; height: 16px; flex-shrink: 0; stroke: var(--blue-hover); fill: none; stroke-width: 1.8; } .contact-attorney-card__details a { color: var(--navy); border-bottom: 1px solid transparent; transition: color 0.3s ease, border-color 0.3s ease; } .contact-attorney-card__details a:hover { color: var(--blue-hover); border-bottom-color: var(--blue-hover); } .contact-attorney-card__vcard { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 0.9rem; font-family: var(--font-body); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy); opacity: 0.45; transition: color 0.3s ease, opacity 0.3s ease; } .contact-attorney-card__vcard:hover { color: var(--blue-hover); opacity: 1; } .contact-attorney-card__vcard svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; } /* FULL-WIDTH MAP */ .contact-map-full { margin-top: 3.5rem; } .contact-map-wrap { position: relative; overflow: hidden; } .contact-map-wrap::after { content: ''; position: absolute; inset: 0; background: rgba(21, 64, 106, 0.08); mix-blend-mode: color; pointer-events: none; z-index: 1; } .contact-map-wrap iframe { display: block; width: 100%; height: 380px; border: 0; filter: saturate(0.3) brightness(1.05) contrast(1.05) hue-rotate(10deg); transition: filter 0.5s ease; } .contact-map-wrap:hover iframe { filter: saturate(0.55) brightness(1.02) contrast(1.02) hue-rotate(5deg); } /* CONTACT PAGE RESPONSIVE */ @media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; gap: 2.5rem; } .contact-group-photo { position: static; } .contact-body { padding: 2.5rem 1.5rem 4rem; } .contact-bar__inner { flex-direction: column; align-items: center; gap: 0.6rem; } .contact-bar__divider { display: none; } .contact-bar__item { white-space: normal; text-align: center; justify-content: center; } .contact-attorney-card { text-align: center; } .contact-attorney-card__details { align-items: center; } .contact-attorney-card__details li { justify-content: center; } .contact-attorney-card__vcard { justify-content: center; width: 100%; } .contact-section-label { text-align: center; } .contact-map-wrap iframe { height: 350px; } .contact-map-full { margin-top: 2.5rem; } } @media (max-width: 600px) { .contact-bar { padding: 1.2rem 1.5rem 1.5rem; } .contact-banner__top { padding: 4rem 1.5rem 1.5rem; } .contact-banner__title { font-size: 2.2rem; } .contact-map-wrap iframe { height: 280px; } } /* CONTACT PAGE — reduced motion */ @media (prefers-reduced-motion: reduce) { .contact-banner__title { animation: none !important; opacity: 1 !important; transform: none !important; } } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* OUR FIRM PAGE — Centered header + sidebar layout */ .page-our-firm { padding-top: var(--header-height); background: var(--white); } .page-header-centered { background: var(--blue-white); padding: 8rem 2.5rem 5rem; text-align: center; } .page-header-centered__inner { max-width: 1200px; margin: 0 auto; } .page-header-centered h1 { font-family: var(--font-heading); font-size: clamp(3.5rem, 8vw, 6.5rem); font-weight: 400; color: var(--navy); line-height: 1.1; } /* Sidebar + content grid (MoloLamken-inspired) */ .page-body { max-width: 1200px; margin: 0 auto; padding: 3.5rem 2.5rem 5rem; display: grid; grid-template-columns: 220px 1fr; gap: 4rem; } .page-sidebar { position: sticky; top: 6rem; align-self: start; padding-top: 0.5rem; } .sidebar-nav { display: flex; flex-direction: column; } .sidebar-nav-label { font-family: var(--font-body); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--navy); opacity: 0.4; margin-bottom: 1rem; } .sidebar-nav a { font-family: var(--font-body); font-size: 0.85rem; font-weight: 400; color: var(--navy); padding: 0.6rem 0; display: flex; align-items: center; gap: 0.6rem; border-bottom: 1px solid rgba(21, 64, 106, 0.08); transition: color 0.3s ease, padding-left 0.3s ease; } .sidebar-nav a:first-of-type { border-top: 0 solid rgba(21, 64, 106, 0.08); } .sidebar-nav a:last-of-type { border-bottom: 0px solid rgba(21, 64, 106, 0.08); } .sidebar-nav a:hover { color: var(--blue-hover); padding-left: 4px; } .sidebar-nav a.active { color: var(--blue-hover); font-weight: 500; } .sidebar-nav a svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; transform: rotate(-45deg); opacity: 0; transition: opacity 0.3s ease; flex-shrink: 0; } .sidebar-nav a:hover svg, .sidebar-nav a.active svg { opacity: 1; } .sidebar-divider { height: 1px; background: rgba(21, 64, 106, 0.08); margin: 1.5rem 0; } .sidebar-other-links { display: flex; flex-direction: column; } .sidebar-other-links a { font-family: var(--font-body); font-size: 0.85rem; font-weight: 500; color: var(--navy); opacity: 0.75; padding: 0.6rem 0; transition: color 0.3s ease, opacity 0.3s ease; } .sidebar-other-links a:hover { color: var(--blue-hover); opacity: 1; } /* Content sections */ .page-content { min-width: 0; } .content-section { margin-bottom: 2rem; opacity: 0; transform: translateY(25px); transition: opacity 0.7s ease, transform 0.7s var(--ease-out-expo); } .content-section.visible { opacity: 1; transform: translateY(0); } .content-section:last-child { margin-bottom: 0; } .content-section-label { font-family: var(--font-body); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--blue-hover); margin-bottom: 1rem; } .content-section h2 { font-family: var(--font-heading); font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 400; line-height: 1.3; margin-bottom: 1.5rem; } .content-section p { font-size: 0.95rem; line-height: 1.85; opacity: 0.82; margin-bottom: 1.25rem; } .content-section p:last-child { margin-bottom: 0; } /* Pull-quote / highlight */ .content-highlight { border-left: 3px solid var(--blue-hover); padding: 1.5rem 0 1.5rem 2rem; margin: 2rem 0; } .content-highlight p { font-family: var(--font-tagline); font-size: 1.25rem; font-style: italic; line-height: 1.7; opacity: 0.9; } .content-divider { height: 1px; background: rgba(21, 64, 106, 0.1); margin: 3.5rem 0; } /* Value grid (Why Us numbered items) */ .value-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2rem; } .value-item { padding: 1.5rem 0; } .value-item h3 { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 500; color: var(--navy); margin-bottom: 0.5rem; } .value-item p { font-size: 0.88rem; opacity: 0.75; } .value-item-number { font-family: var(--font-heading); font-size: 2.5rem; font-weight: 300; color: var(--blue-hover); line-height: 1; margin-bottom: 0.75rem; opacity: 0.5; } /* RESPONSIVE */ @media (max-width: 900px) { .news-grid { grid-template-columns: 1fr; gap: 2.5rem; } .contact-inner, .contact-info-grid { grid-template-columns: 1fr; } .contact-col-intro { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.12); padding-right: 0; padding-bottom: 2rem; margin-bottom: 2rem; } .contact-col-details { padding-left: 0; } .contact-info-grid { gap: 1.5rem; } .overlay-menu-inner { flex-direction: column; width: 85%; gap: 3rem; } .overlay-menu-left { border-right: none; border-bottom: 1px solid rgba(21, 64, 106, 0.15); padding-right: 0; padding-bottom: 2rem; } .overlay-menu-right { padding-left: 0; } .attorney-bio__top { grid-template-columns: 1fr; } .industries-columns { columns: 2; } .page-body { grid-template-columns: 1fr; gap: 2rem; padding: 2.5rem 1.5rem 4rem; } .page-sidebar { position: static; border-bottom: 1px solid rgba(21, 64, 106, 0.1); padding-bottom: 1.5rem; } .sidebar-nav { flex-direction: row; flex-wrap: wrap; gap: 0.5rem; } .sidebar-nav a { border: 1px solid rgba(21, 64, 106, 0.12); padding: 0.5rem 1rem; font-size: 0.8rem; border-radius: 2px; } .sidebar-nav a:first-of-type { border-top: 1px solid rgba(21, 64, 106, 0.12); } .sidebar-nav a svg { display: none; } .sidebar-divider, .sidebar-other-links, .sidebar-nav-label { display: none; } .value-grid { grid-template-columns: 1fr; } .page-header-centered { padding-left: 1.5rem; padding-right: 1.5rem; } } @media (max-width: 600px) { .site-header { padding: 1rem 1.5rem; } .section-welcome, .section-practice, .section-news, .section-credentials, .section-contact, .page-header-primary, .page-content-primary, .page-content-secondary, .practice-page-content, .attorney-bio__top, .attorney-bio__body, .attorney-bio__header { padding-left: 1.5rem; padding-right: 1.5rem; } .practice-grid { grid-template-columns: 1fr; } .contact-inner { grid-template-columns: 1fr; gap: 0; } .firm-name-container { font-size: clamp(2.5rem, 10vw, 4rem); } .excellence-title { font-size: clamp(2.8rem, 10vw, 4.5rem); } .site-footer { padding-left: 1.5rem; padding-right: 1.5rem; flex-direction: column; align-items: center; text-align: center; } .footer-links { flex-wrap: wrap; justify-content: center; gap: 1rem; } .industries-columns { columns: 1; } } /* REDUCED MOTION */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .hero-screen { opacity: 0; } .excellence-screen { opacity: 1; pointer-events: auto; } .excellence-title, .tagline-item, .scroll-indicator { opacity: 1; transform: none; } .reveal { opacity: 1; transform: none; } .content-section { opacity: 1; transform: none; } .line-stroke { stroke-dashoffset: 0 !important; } .firm-name-left, .firm-name-right, .firm-name-slash, .miami-text { opacity: 1 !important; transform: none !important; } } /* PRACTICE INDEX PAGE */ .page-practice { padding-top: var(--header-height); background: var(--white); } .practice-index-list { display: flex; flex-direction: column; } .practice-index-card { display: block; padding: 2.25rem 0; border-bottom: 1px solid rgba(21, 64, 106, 0.1); color: var(--navy); text-decoration: none; transition: all 0.3s ease; } .practice-index-card:first-child { padding-top: 0; } .practice-index-card:last-child { border-bottom: none; } .practice-index-card:hover { color: var(--navy); } .practice-index-card__inner { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 2rem; } .practice-index-card__content { min-width: 0; } .practice-index-card__number { font-family: var(--font-body); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.15em; color: rgba(21, 64, 106, 0.3); margin-bottom: 0.5rem; } .practice-index-card h3 { font-family: var(--font-heading); font-size: 2.5rem; font-weight: 400; color: var(--navy); margin-bottom: 0.75rem; line-height: 1.3; transition: color 0.3s ease; } .practice-index-card:hover h3 { color: var(--blue-hover); } .practice-index-card p { font-size: 0.9rem; line-height: 1.75; color: rgba(21, 64, 106, 0.65); max-width: 580px; margin-bottom: 0; } /* Practice index sub-areas (Commercial Litigation) */ .practice-index-card__subareas { margin-top: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.3rem 0; } .practice-index-card__subareas span { font-family: var(--font-body); font-size: 0.75rem; color: rgba(21, 64, 106, 0.45); } .practice-index-card__subareas span::after { content: ' · '; color: rgba(21, 64, 106, 0.2); } .practice-index-card__subareas span:last-child::after { content: ''; } /* Practice index arrow */ .practice-index-card__arrow { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-top: 0.75rem; color: rgba(21, 64, 106, 0.2); transition: all 0.3s ease; } .practice-index-card:hover .practice-index-card__arrow { color: var(--blue-hover); transform: translate(3px, -3px); } .practice-index-card__arrow svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Practice index responsive */ @media (max-width: 900px) { .practice-index-card__inner { grid-template-columns: 1fr; gap: 0.75rem; } .practice-index-card__arrow { margin-top: 0; } } /* SINGLE PRACTICE AREA PAGE (Category C) */ .practice-single { padding-top: var(--header-height); background: var(--white); } .practice-hero { position: relative; width: 100%; overflow: hidden; background: var(--blue-white); } .practice-hero::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 120px; background: linear-gradient(to top, var(--white), transparent); pointer-events: none; } .practice-hero .practice-hero-image { width: 100%; height: clamp(320px, 42vw, 540px); object-fit: cover; display: block; } .practice-hero-image--placeholder { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%); } /* Practice single body: sidebar + content grid */ .practice-single__body { max-width: 1200px; margin: 0 auto; padding: 3.5rem 2.5rem 5rem; display: grid; grid-template-columns: 220px 1fr; gap: 4rem; } .practice-single__sidebar { position: sticky; top: 6rem; align-self: start; padding-top: 0.5rem; } /* Practice single header row (title + print) */ .practice-single__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; flex-wrap: wrap; } .practice-single__header h1 { font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 400; color: var(--navy); line-height: 1.2; } .practice-single__header .print-btn { flex-shrink: 0; margin-top: 0.25rem; } /* Practice single content prose */ .practice-single__content h2 { font-family: var(--font-heading); font-size: clamp(1.5rem, 2.5vw, 2.2rem); font-weight: 400; color: var(--navy); margin-top: 2.5rem; margin-bottom: 1rem; } .practice-single__content h3 { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 500; color: var(--navy); margin-top: 2rem; margin-bottom: 0.75rem; } .practice-single__content p { font-size: 0.95rem; line-height: 1.85; opacity: 0.82; margin-bottom: 1.25rem; } .practice-single__content ul, .practice-single__content ol { margin-bottom: 1.5rem; padding-left: 1.25rem; } .practice-single__content li { font-size: 0.95rem; line-height: 1.85; opacity: 0.82; margin-bottom: 0.75rem; } .practice-single__content a { color: var(--blue-hover); text-decoration: none; border-bottom: 1px solid rgba(52, 143, 243, 0.3); transition: color var(--transition-smooth), border-color var(--transition-smooth); } .practice-single__content a:hover { color: var(--blue-hover); border-bottom-color: var(--blue-hover); } /* Commercial Litigation sub-areas */ .practice-subareas { margin-top: 2rem; } .practice-subareas__list { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; } .practice-subareas__list li { font-family: var(--font-body); font-size: 0.9rem; color: var(--navy); opacity: 0.75; padding: 0.7rem 0; border-bottom: 1px solid rgba(21, 64, 106, 0.08); transition: color 0.3s ease, opacity 0.3s ease; } .practice-subareas__list li:hover { color: var(--blue-hover); opacity: 1; } /* Practice single responsive */ @media (max-width: 900px) { .practice-single__body { grid-template-columns: 1fr; gap: 2rem; padding: 2.5rem 1.5rem 4rem; } .practice-single__sidebar { position: static; border-bottom: 1px solid rgba(21, 64, 106, 0.1); padding-bottom: 1.5rem; } .practice-subareas__list { grid-template-columns: 1fr; } } @media (max-width: 600px) { .practice-single__body { padding-left: 1.5rem; padding-right: 1.5rem; } .practice-single__header { flex-direction: column; gap: 1rem; } .practice-hero .practice-hero-image { height: clamp(220px, 50vw, 320px); } } /* LINKED SUB-AREAS */ .practice-subareas__list a { color: var(--navy-dark); text-decoration: none; transition: color 0.3s ease; } .practice-subareas__list a:hover { color: var(--blue-hover); } /* PRACTICE SUB-AREA BUTTONS */ .practice-subarea-buttons { margin-top: 0rem; margin-bottom:3rem; } .practice-subarea-buttons__grid { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; } .practice-subarea-btn { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-body); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.04em; color: var(--navy-dark); background: #d1e0f0; border: 1px solid rgba(21, 64, 106, 0.25); padding: 0.6rem 1.2rem; text-decoration: none; transition: all 0.3s ease; } .practice-subarea-btn:hover { color: var(--blue-hover); border-color: var(--blue-hover); } .practice-subarea-btn svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 1.5; transform: rotate(-45deg); opacity: 0.4; transition: opacity 0.3s ease; } .practice-subarea-btn:hover svg { opacity: 1; } @media (max-width: 600px) { .practice-subarea-buttons__grid { flex-direction: column; } .practice-subarea-btn { justify-content: space-between; } } /* SIDEBAR NESTED SUB-ITEMS */ .sidebar-nav-subitems { display: flex; flex-direction: column; padding-left: 1.25rem; border-left: 1px solid rgba(21, 64, 106, 0.1); margin-left: 0.5rem; margin-bottom: 0.25rem; } .sidebar-nav-subitems a { font-family: var(--font-body); font-size: 0.78rem; font-weight: 400; color: var(--navy); opacity: 0.7; padding: 0.35rem 0; display: block; transition: color 0.3s ease, opacity 0.3s ease; border-bottom: none; } .sidebar-nav-subitems a:hover { color: var(--blue-hover); opacity: 1; } .sidebar-nav-subitems a.active { color: var(--blue-hover); font-weight: 500; opacity: 1; } @media (max-width: 900px) { .sidebar-nav-subitems { flex-direction: row; flex-wrap: wrap; gap: 0.4rem; padding-left: 0; border-left: none; margin-left: 0; margin-bottom: 0.5rem; } .sidebar-nav-subitems a { border: 1px solid rgba(21, 64, 106, 0.1); padding: 0.4rem 0.8rem; font-size: 0.75rem; border-radius: 2px; } } /* TEAM INDEX PAGE */ .page-team { padding-top: var(--header-height); background: var(--white); } /* Asymmetric layout: intro left, cards right */ .team-layout { max-width: 1200px; margin: 0 auto; padding: 3.5rem 2.5rem 5rem; display: grid; grid-template-columns: 260px 1fr; gap: 4rem; } /* Left intro column — sticky like sidebar */ .team-intro { position: sticky; top: 6rem; align-self: start; padding-top: 0.5rem; } .team-intro h2 { font-family: var(--font-heading); font-size: clamp(1.6rem, 2.5vw, 2rem); font-weight: 400; line-height: 1.3; margin-bottom: 0; color: var(--navy); } .team-intro__rule { width: 40px; height: 2px; background: var(--blue-hover); margin: 1.25rem 0; } .team-intro p { font-size: 0.9rem; line-height: 1.8; opacity: 0.78; margin-bottom: 1.5rem; } .team-intro__links { display: flex; flex-direction: row; gap: 1.5rem; padding-top: 0.5rem; border-top: 1px solid rgba(21, 64, 106, 0.08); } .team-intro__links .arrow-link { font-size: 0.75rem; } /* Cards grid — two attorneys side by side */ .team-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; } /* Individual card */ .team-card { text-align: left; } /* Photo with offset accent */ .team-card__photo-wrap { position: relative; margin-bottom: 1.5rem; } .team-card__photo-accent { position: absolute; top: 10px; left: -8px; width: 100%; height: 100%; background: var(--blue-white); z-index: 0; transition: transform 0.5s var(--ease-out-expo); } .team-card:hover .team-card__photo-accent { transform: translate(-2px, 2px); } .team-card__photo { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; display: block; position: relative; z-index: 1; filter: grayscale(15%); transition: filter 0.5s ease; } .team-card:hover .team-card__photo { filter: grayscale(0%); } .team-card__photo--placeholder { width: 100%; aspect-ratio: 3 / 4; background: rgba(21, 64, 106, 0.06); display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; } .team-card__photo--placeholder svg { width: 48px; height: 48px; color: rgba(21, 64, 106, 0.15); } /* Card info */ .team-card__info { padding-top: 0; } .team-card__name { font-family: var(--font-heading); font-size: clamp(1.6rem, 2.5vw, 2.2rem); font-weight: 400; line-height: 1.2; margin-bottom: 0.4rem; } .team-card__name a { color: var(--navy); transition: color 0.3s ease; } .team-card__name a:hover { color: var(--blue-hover); } .team-card__role { font-family: var(--font-body); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue-hover); margin-bottom: 1rem; } .team-card__bio { font-size: 0.9rem; line-height: 1.8; opacity: 0.75; margin-bottom: 1.25rem; } .team-card__contact { display: flex; flex-direction: column; gap: 0.2rem; margin-bottom: 1rem; } .team-card__contact a { font-size: 0.82rem; color: var(--navy); opacity: 0.55; transition: color 0.3s ease, opacity 0.3s ease; } .team-card__contact a:hover { color: var(--blue-hover); opacity: 1; } /* Bio link — inline subtle style */ .team-card__bio-link { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-body); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy); opacity: 0.6; transition: color 0.3s ease, opacity 0.3s ease; } .team-card__bio-link:hover { color: var(--blue-hover); opacity: 1; } .team-card__bio-link svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; transform: rotate(-45deg); transition: transform 0.3s ease; } .team-card:hover .team-card__bio-link svg { transform: rotate(-45deg) translateX(2px); } /* Team responsive */ @media (max-width: 900px) { .team-layout { grid-template-columns: 1fr; gap: 2.5rem; padding: 2.5rem 1.5rem 4rem; } .team-intro { position: static; } } @media (max-width: 600px) { .team-cards { grid-template-columns: 1fr; gap: 3rem; } .team-card__photo-wrap { max-width: none; } } /* ATTORNEY BIO PAGE (Category D) */ .attorney-bio-page { padding-top: var(--header-height); background: var(--white); } /* Bio top section: photo + contact */ .bio-top { background: var(--blue-white); padding: 3.5rem 2.5rem 4rem; } .bio-top__inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 340px 1fr; gap: 4rem; align-items: start; } .bio-top__img { width: 100%; height: auto; display: block; position: relative; z-index: 1; filter: grayscale(15%); transition: filter 0.5s ease; } .bio-top__img:hover { filter: grayscale(0%); } .bio-top__photo-wrap { position: relative; } .bio-top__photo-accent { position: absolute; top: 10px; left: -8px; width: 100%; height: 100%; background: #cde4f9; z-index: 0; border: 1px solid rgba(21, 64, 106, 0.08); } .bio-top__img--placeholder { width: 100%; aspect-ratio: 3 / 4; background: rgba(21, 64, 106, 0.06); display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; } .bio-top__img--placeholder svg { width: 64px; height: 64px; color: rgba(21, 64, 106, 0.12); } /* Bio contact info (right column) */ .bio-top__contact { padding-top: 1.5rem; } .bio-top__name { font-family: var(--font-heading); font-size: clamp(2.2rem, 4.5vw, 3.5rem); font-weight: 400; color: var(--navy); line-height: 1.15; margin-bottom: 0.5rem; } .bio-top__role { font-family: var(--font-body); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-hover); margin-bottom: 2rem; } .bio-top__info { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 2rem; } .bio-top__info li { display: flex; align-items: center; gap: 0.75rem; font-size: 0.92rem; line-height: 1.5; } .bio-top__info svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--blue-hover); } .bio-top__info svg[viewBox="0 0 24 24"][fill="currentColor"] { fill: var(--blue-hover); stroke: none; width: 18px; height: 18px; } .bio-top__info a { color: var(--navy); transition: color 0.3s ease; } .bio-top__info a:hover { color: var(--blue-hover); } .bio-top__contact .print-btn { margin-top: 0.5rem; } /* Attorney badges (info row layout) */ .bio-top__info-row { display: flex; align-items: flex-start; gap: 2.5rem; } .bio-top__info-row .bio-top__info { margin-bottom: 0; flex: 0 1 auto; } .bio-top__badges { display: flex; flex-direction: column; align-items: center; gap: 1rem; flex-shrink: 0; padding-top: 0.25rem; } .bio-top__badge-img { width: 120px; height: auto; display: block; } /* Bio body: sidebar + content */ .bio-body { background: var(--white); } .bio-body__inner { max-width: 1200px; margin: 0 auto; padding: 3.5rem 2.5rem 5rem; display: grid; grid-template-columns: 220px 1fr; gap: 4rem; } .bio-body__sidebar { position: sticky; top: 6rem; align-self: start; padding-top: 0.5rem; } .bio-body__content { min-width: 0; } /* Bio prose */ .bio-prose h2 { font-family: var(--font-heading); font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 400; color: var(--navy); margin-top: 2rem; margin-bottom: 1rem; } .bio-prose h3 { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 500; color: var(--navy); margin-top: 1.5rem; margin-bottom: 0.75rem; } .bio-prose p { font-size: 0.95rem; line-height: 1.85; opacity: 0.82; margin-bottom: 1.25rem; } .bio-prose p:last-child { margin-bottom: 0; } .bio-prose ul, .bio-prose ol { margin-bottom: 1.5rem; padding-left: 1.5rem; } .bio-prose li { font-size: 0.95rem; line-height: 1.85; opacity: 0.82; margin-bottom: 0.4rem; } /* Bio responsive */ @media (max-width: 900px) { .bio-top__inner { grid-template-columns: 1fr; gap: 2rem; } .bio-top__photo { max-width: 340px; margin-left: 8px; } .bio-top__contact { padding-top: 0; } .bio-top__info-row { gap: 2rem; } .bio-body__inner { grid-template-columns: 1fr; gap: 2rem; padding: 2.5rem 1.5rem 4rem; } .bio-body__sidebar { position: static; border-bottom: 1px solid rgba(21, 64, 106, 0.1); padding-bottom: 1.5rem; } .bio-body__sidebar .sidebar-nav { flex-direction: row; flex-wrap: wrap; gap: 0.5rem; } .bio-body__sidebar .sidebar-nav a { border: 1px solid rgba(21, 64, 106, 0.12); padding: 0.5rem 1rem; font-size: 0.8rem; border-radius: 2px; } .bio-body__sidebar .sidebar-nav a:first-of-type { border-top: 1px solid rgba(21, 64, 106, 0.12); } .bio-body__sidebar .sidebar-nav a svg { display: none; } .bio-body__sidebar .sidebar-divider, .bio-body__sidebar .sidebar-other-links, .bio-body__sidebar .sidebar-nav-label { display: none; } } @media (max-width: 600px) { .bio-top { padding: 2.5rem 1.5rem 3rem; } .bio-top__inner { gap: 1.5rem; } .bio-top__info-row { flex-direction: column; gap: 1.5rem; } .bio-top__badges { flex-direction: row; } .bio-body__inner { padding-left: 1.5rem; padding-right: 1.5rem; } } /* SECONDARY BANNER (Category B header — Cravath ghost-echo style) */ .secondary-banner { position: relative; background: var(--banner-bg); padding: clamp(6rem, 14vw, 11rem) 2.5rem clamp(4rem, 10vw, 7rem); overflow: hidden; text-align: center; } .secondary-banner::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(-55deg, transparent, transparent 60px, rgba(255, 255, 255, 0.018) 60px, rgba(255, 255, 255, 0.018) 61px); pointer-events: none; } .secondary-banner__inner { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; } /* Ghost / echo text — large decorative watermark behind the title */ .secondary-banner__ghost { position: absolute; bottom: -0.08em; left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: var(--font-heading); font-weight: 300; font-style: normal; line-height: 0.85; letter-spacing: -0.01em; font-size: clamp(4rem, 9vw, 9rem); background: linear-gradient(to bottom, rgba(52, 107, 168, 0.95) 0%, rgba(52, 107, 168, 0.45) 65%, transparent 100%); -webkit-background-clip: text; background-clip: text; color: transparent; pointer-events: none; user-select: none; z-index: 1; opacity: 0; animation: ghostReveal 1.4s var(--ease-out-expo) 0.15s forwards; } .secondary-banner[data-words="1"] .secondary-banner__ghost { font-size: clamp(5rem, 11vw, 11rem); } .secondary-banner[data-words="2"] .secondary-banner__ghost { font-size: clamp(4rem, 9vw, 9rem); } .secondary-banner[data-words="3"] .secondary-banner__ghost { font-size: clamp(4rem, 8vw, 8rem); } .secondary-banner[data-words="4"] .secondary-banner__ghost, .secondary-banner[data-words="5"] .secondary-banner__ghost { font-size: clamp(3.5rem, 7vw, 7.5rem); } .secondary-banner[data-words="6"] .secondary-banner__ghost, .secondary-banner[data-words="7"] .secondary-banner__ghost { font-size: clamp(3rem, 6vw, 7rem); } @keyframes ghostReveal { 0% { opacity: 0; transform: translateX(-50%) translateY(12px); } 100% { opacity: 1; transform: translateX(-50%) translateY(0); } } /* Banner title */ .secondary-banner__title { font-family: var(--font-heading); font-weight: 300; font-size: clamp(2.6rem, 6vw, 5rem); line-height: 1.15; color: var(--blue-white); margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 0.3em; } .secondary-banner__word { display: inline-block; opacity: 0; transform: translateY(14px); animation: bannerWordReveal 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; animation-delay: calc(0.18s + var(--word-i, 0) * 0.09s); } @keyframes bannerWordReveal { to { opacity: 1; transform: translateY(0); } } /* Banner subtitle */ .secondary-banner__subtitle { font-family: var(--font-body); font-weight: 300; font-size: clamp(0.9rem, 1.5vw, 1.1rem); color: rgba(219, 238, 255, 0.55); letter-spacing: 0.06em; margin-top: 1.2rem; text-align: center; opacity: 0; animation: bannerSubReveal 0.8s ease 0.55s forwards; } @keyframes bannerSubReveal { to { opacity: 1; } } /* PAGE-SECONDARY — shared wrapper */ .page-secondary .page-body { padding-top: 3rem; } /* Industries Expertise enhancements */ .page-secondary--expertise .industries-columns li { transition: color 0.25s ease; font-size: 0.92rem; color: var(--navy); } .page-secondary--expertise .industries-columns li:hover { color: var(--blue-hover); } /* Contact photo */ .contact-photo { margin-bottom: 2rem; } .contact-photo__img { width: 100%; max-width: 360px; height: auto; display: block; } .contact-photo--placeholder .contact-photo__placeholder-inner { width: 100%; max-width: 360px; aspect-ratio: 3 / 4; background: rgba(21, 64, 106, 0.05); border: 1px dashed rgba(21, 64, 106, 0.15); display: flex; align-items: center; justify-content: center; } .contact-photo--placeholder span { font-family: var(--font-body); font-size: 0.82rem; color: rgba(21, 64, 106, 0.3); letter-spacing: 0.04em; } /* Contact details icons + text */ .contact-details__icon { flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; } .contact-details__icon svg { width: 100%; height: 100%; } .contact-details__icon svg[fill="currentColor"] { fill: var(--blue-hover); stroke: none; width: 20px; height: 20px; } .contact-details__text { font-family: var(--font-body); font-weight: 400; font-size: 0.92rem; color: var(--navy); line-height: 1.6; } .contact-details__text a { color: var(--navy); text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.3s ease, border-color 0.3s ease; } .contact-details__text a:hover { color: var(--blue-hover); border-bottom-color: var(--blue-hover); } /* Contact map */ .contact-map-wrap { border: 1px solid rgba(21, 64, 106, 0.08); overflow: hidden; } .contact-map-wrap iframe { display: block; } /* Category B responsive */ @media (max-width: 900px) { .secondary-banner { padding: 4.5rem 1.5rem 3rem; } .secondary-banner__ghost { font-size: clamp(3.5rem, 12vw, 7rem); bottom: -0.05em; } .secondary-banner[data-words="2"] .secondary-banner__ghost, .secondary-banner[data-words="3"] .secondary-banner__ghost, .secondary-banner[data-words="4"] .secondary-banner__ghost, .secondary-banner[data-words="5"] .secondary-banner__ghost, .secondary-banner[data-words="6"] .secondary-banner__ghost, .secondary-banner[data-words="7"] .secondary-banner__ghost { font-size: clamp(2.5rem, 10vw, 5.5rem); } .page-secondary--contact .contact-info-grid { grid-template-columns: 1fr; } } @media (max-width: 600px) { .secondary-banner { padding: 4rem 1.5rem 2.5rem; } .secondary-banner__title { font-size: 2rem; } .secondary-banner__ghost { font-size: clamp(2.5rem, 14vw, 5rem); bottom: -0.02em; } .secondary-banner[data-words="2"] .secondary-banner__ghost, .secondary-banner[data-words="3"] .secondary-banner__ghost, .secondary-banner[data-words="4"] .secondary-banner__ghost, .secondary-banner[data-words="5"] .secondary-banner__ghost, .secondary-banner[data-words="6"] .secondary-banner__ghost, .secondary-banner[data-words="7"] .secondary-banner__ghost { font-size: clamp(2rem, 12vw, 4rem); } } /* Category B + banner reduced motion */ @media (prefers-reduced-motion: reduce) { .secondary-banner__word, .secondary-banner__subtitle { animation: none !important; opacity: 1 !important; transform: none !important; } .secondary-banner__ghost { animation: none !important; opacity: 1 !important; transform: translateX(-50%) translateY(0) !important; } } /* ITEM 3: White header background on all non-home pages */ .site-header--light { background: rgba(255, 255, 255,1.0); } /* ITEM 4: Remove extra top spacing from centered & banner headings */ .page-header-centered { padding: 6rem 2.5rem 5rem; display: flex; align-items: center; justify-content: center; min-height: 0; } .secondary-banner { padding: clamp(5rem, 12vw, 9rem) 2.5rem clamp(4rem, 10vw, 7rem); display: flex; flex-direction: column; align-items: center; justify-content: center; } /* ITEM 5: White backgrounds for secondary + single blog pages */ .page-secondary { background: var(--white); color: var(--navy); min-height: 100vh; } .page-secondary .secondary-banner { background: var(--banner-bg); } /* Sidebar other-links arrow icon support */ .sidebar-other-links a { display: flex; align-items: center; gap: 0.5rem; } .sidebar-other-links a svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.5; transform: rotate(-45deg); opacity: 0; transition: opacity 0.3s ease; flex-shrink: 0; } .sidebar-other-links a:hover svg { opacity: 1; } /* ============================================================ ITEM 6: BLOG SINGLE — Right Sidebar Layout ============================================================ */ .blog-single.page-primary { background: var(--white); } .blog-single__body { max-width: 1200px; margin: 0 auto; padding: 3.5rem 2.5rem 5rem; display: grid; grid-template-columns: 1fr 280px; gap: 4rem; } .blog-single__main { min-width: 0; } /* Blog right sidebar */ .blog-single__sidebar { position: sticky; top: 6rem; align-self: start; padding-top: 3rem; } /* Blog sidebar widgets */ .blog-sidebar-widget { padding-bottom: 1.75rem; margin-bottom: 1.75rem; border-bottom: 1px solid rgba(21, 64, 106, 0.08); } .blog-sidebar-widget:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .blog-sidebar-widget__title { font-family: var(--font-body); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--navy); margin-bottom: 1rem; } .blog-sidebar-widget p { font-size: 0.88rem; line-height: 1.75; opacity: 0.72; margin-bottom: 0.75rem; } .blog-sidebar-widget__link { font-family: var(--font-body); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-hover); transition: opacity 0.3s ease; } .blog-sidebar-widget__link:hover { opacity: 0.7; color: var(--blue-hover); } .blog-sidebar-widget__list { list-style: none; padding: 0; margin: 0; } .blog-sidebar-widget__list li { border-bottom: 1px solid rgba(21, 64, 106, 0.06); } .blog-sidebar-widget__list li:last-child { border-bottom: none; } .blog-sidebar-widget__list a { display: flex; justify-content: space-between; align-items: center; font-size: 0.88rem; color: var(--navy); padding: 0.55rem 0; transition: color 0.3s ease; } .blog-sidebar-widget__list a:hover { color: var(--blue-hover); } .blog-sidebar-widget__count { font-size: 0.75rem; color: var(--navy); opacity: 0.35; } /* Recent articles list — stacked title + date */ .blog-sidebar-widget__list--posts a { flex-direction: column; align-items: flex-start; gap: 0.15rem; } .blog-sidebar-widget__list--posts time { font-size: 0.75rem; color: var(--navy); opacity: 0.4; } /* Blog single responsive */ @media (max-width: 900px) { .blog-single__body { grid-template-columns: 1fr; gap: 2.5rem; padding: 2.5rem 1.5rem 4rem; } .blog-single__sidebar { position: static; border-top: 1px solid rgba(21, 64, 106, 0.1); padding-top: 2rem; } .blog-single__related .blog-index-row { grid-template-columns: 1fr; } } @media (max-width: 600px) { .blog-single__body { padding: 2rem 1.5rem 3rem; } } /* ============================================================ ITEM 7: MOBILE — Sidebar after content (order fix) ============================================================ */ @media (max-width: 900px) { .page-body { display: flex; flex-direction: column; } .page-body > .page-sidebar { order: 2; } .page-body > .page-content { order: 1; } /* Bio page sidebar after content too */ .bio-body__inner { display: flex; flex-direction: column; } .bio-body__inner > .bio-body__sidebar { order: 2; } .bio-body__inner > .bio-body__content { order: 1; } } /* ============================================================ ITEM 8: LOGO IMAGE — replaces text logo ============================================================ */ .header-logo__img { height: 32px; width: auto; display: block; transition: opacity 0.3s ease; } /* On home page (dark bg), invert/brighten the logo for visibility */ .home-page .header-logo__img { filter: brightness(0) invert(1); } /* On scrolled home page header, keep inverted */ .home-page .site-header.scrolled .header-logo__img { filter: brightness(0) invert(1); } /* ============================================================ UTILITY PAGES — White background override ============================================================ */ .page-404.page-primary, .page-search.page-primary, .page-archive.page-primary, .page-primary.page-default { background: var(--white); } /* ============================================================ 404 PAGE ============================================================ */ .page-404 .page-content-primary { padding-bottom: var(--space-2xl); } .page-404__body { max-width: 600px; } .page-404__message { font-size: 0.95rem; line-height: 1.85; opacity: 0.75; margin-bottom: 2.5rem; } .page-404__search { margin-bottom: 3rem; } .page-404__search-input { width: 100%; max-width: 460px; font-family: var(--font-heading); font-size: clamp(1.2rem, 2vw, 1.6rem); color: var(--navy); border: none; border-bottom: 2px solid rgba(21, 64, 106, 0.2); padding: 0.5rem 0; background: transparent; outline: none; transition: border-color 0.3s ease; } .page-404__search-input:focus { border-bottom-color: var(--blue-hover); } .page-404__search-input::placeholder { color: rgba(21, 64, 106, 0.3); } .page-404__nav-label { font-family: var(--font-body); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--navy); opacity: 0.4; display: block; margin-bottom: 1rem; } .page-404__links { list-style: none; display: flex; flex-direction: column; } .page-404__links li { border-bottom: 1px solid rgba(21, 64, 106, 0.08); } .page-404__links li:last-child { border-bottom: none; } .page-404__links a { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 400; color: var(--navy); display: block; padding: 0.75rem 0; transition: color 0.3s ease, padding-left 0.3s ease; } .page-404__links a:hover { color: var(--blue-hover); padding-left: 6px; } /* ============================================================ ARCHIVE & CATEGORY PAGES ============================================================ */ .page-archive__description { margin-top: 1rem; max-width: 600px; } .page-archive__description p { font-size: 0.95rem; line-height: 1.85; opacity: 0.72; margin-bottom: 0; } /* WordPress default pagination styling (shared across search, archive, category) */ .page-primary .nav-links { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(21, 64, 106, 0.1); display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .page-primary .nav-links .page-numbers { font-family: var(--font-body); font-size: 0.85rem; padding: 0.5rem 0.85rem; color: var(--navy); text-decoration: none; transition: color 0.3s ease, background 0.3s ease; } .page-primary .nav-links a.page-numbers:hover { color: var(--blue-hover); background: rgba(21, 64, 106, 0.04); } .page-primary .nav-links .page-numbers.current { color: var(--blue-hover); font-weight: 500; border-bottom: 2px solid var(--blue-hover); } .page-primary .nav-links .prev, .page-primary .nav-links .next { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; } /* LEGAL PAGE */ .page-legal { padding-top: var(--header-height); background: var(--white); } .page-legal .page-header-centered { background: var(--blue-white); } .legal-updated { font-family: var(--font-body); font-size: 0.78rem; color: var(--navy); opacity: 0.45; margin-top: 0.75rem; letter-spacing: 0.04em; } .legal-body { max-width: 1200px; margin: 0 auto; padding: 3.5rem 2.5rem 6rem; } .legal-prose { max-width: 100%; } .legal-prose h2 { font-size: clamp(1.4rem, 2.5vw, 1.9rem); margin-top: var(--space-lg); margin-bottom: var(--space-sm); } .legal-prose h3 { font-size: clamp(1.1rem, 2vw, 1.35rem); margin-top: var(--space-md); margin-bottom: var(--space-xs); } .legal-prose ul, .legal-prose ol { margin: 0 0 1.5rem 1.5rem; } .legal-prose li { font-size: 0.95rem; line-height: 1.85; opacity: 0.82; margin-bottom: 0.4rem; } .legal-prose a { color: var(--navy); border-bottom: 1px solid rgba(21, 64, 106, 0.25); transition: color 0.3s ease, border-color 0.3s ease; } .legal-prose a:hover { color: var(--blue-hover); border-bottom-color: var(--blue-hover); } @media (max-width: 900px) { .legal-body { padding: 2.5rem 1.5rem 4rem; } } /* Hide print-only elements on screen */ .print-branded-header, .print-branded-footer { display: none !important; }