/* ============================================================ ROZICH LAW GROUP — SITEWIDE STYLESHEET (site.css) Mirrors 02-deliverables/brand-and-style-guide.md (v1.0, 2026-06-10). Locked system: Ink Black / White / Silver + three-red architecture. Fonts (loaded in each page ): Bebas Neue, Big Shoulders Text, Inter. ⚠ WPMU DEV "Rebuild" wipes dist/client/ — re-push this file after any rebuild. ============================================================ */ /* ============================================================ DESIGN TOKENS Locked system: Ink Black / White / Silver + two-red arch. ============================================================ */ :root { --ink-black: #1A1614; --white: #FFFFFF; --warm-cream: #F5EFE3; --body-ink: #2B2522; --cinnabar: #D9261C; /* primary accent — CTA buttons, large color blocks */ --cinnabar-bright: #FF3B30; /* dark-surface only — stars, eyebrows, small text on dark bg */ --crimson: #A4161A; /* secondary — light-mode buttons / authority */ --silver-light: #BFC2C8; /* dark-mode text silver */ --silver-dark: #6E727A; /* utility only — small light-mode text */ --silver-metallic: linear-gradient(135deg, #E8EAEE 0%, #BFC2C8 40%, #8E939B 65%, #D9DCE1 100%); /* Mode-aware "metallic" treatment — polished/anodized look with a narrow highlight band that can be ANIMATED into a shine sweep (see .site-nav__wordmark + @keyframes shine-sweep). Flips with the theme so any display-fill use case (nav wordmark today; future hero accents, dividers, button borders) reads correctly against its surface. - Dark mode (default below): brushed gunmetal on near-black - Light mode (override): dark anodized on white The legacy --silver-metallic stays as the static bright silver-foil for moments ALWAYS on a dark surface (e.g. the giant footer wordmark, which is dark in both themes). */ --metallic: linear-gradient(105deg, #757A82 0%, #757A82 30%, #B8BCC3 42%, #E8EBEF 50%, #B8BCC3 58%, #757A82 70%, #757A82 100%); /* Semantic layer — dark mode defaults */ --bg: var(--ink-black); --bg-alt: #221E1B; --surface: #2A2420; --text-primary: var(--white); --text-secondary: var(--silver-light); --text-muted: #8A8A8A; --accent: var(--cinnabar); --border: rgba(191,194,200,0.15); --rule: var(--silver-light); } [data-theme="light"] { --bg: var(--white); --bg-alt: var(--warm-cream); --surface: #F0ECEC; --text-primary: var(--body-ink); --text-secondary: var(--silver-dark); --text-muted: #777; --accent: var(--crimson); --border: rgba(43,37,34,0.12); --rule: var(--silver-dark); /* Dark anodized variant for light surfaces — same shine-band geometry as the dark-mode --metallic, shifted into the near-black range so it reads as anodized aluminum on white. */ --metallic: linear-gradient(105deg, #1A1C20 0%, #1A1C20 30%, #555A64 42%, #7A8088 50%, #555A64 58%, #1A1C20 70%, #1A1C20 100%); } /* ============================================================ RESET + BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.6; background: var(--bg); color: var(--text-primary); transition: background 0.3s ease, color 0.3s ease; overflow-x: hidden; } img { display: block; width: 100%; height: 100%; object-fit: cover; } a { color: inherit; text-decoration: none; } /* ============================================================ TYPOGRAPHY SCALE ============================================================ */ .display { font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.04em; line-height: 1; text-transform: uppercase; } .body-text { font-family: 'Inter', sans-serif; font-weight: 400; } .ui-text { font-family: 'Inter', sans-serif; } .eyebrow { font-family: 'Inter', sans-serif; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--silver-light); } [data-theme="light"] .eyebrow { color: var(--silver-dark); } /* ============================================================ UTILITY ============================================================ */ .container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 2rem; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } /* Image placeholder */ .img-placeholder { background: #2A2420; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; color: var(--silver-light); font-family: 'Inter', sans-serif; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; border: 1px dashed rgba(191,194,200,0.25); } [data-theme="light"] .img-placeholder { background: #e8e4e0; border-color: rgba(43,37,34,0.15); color: var(--silver-dark); } .img-placeholder svg { opacity: 0.35; } /* ============================================================ TOP NAV — sticky, hides until past hero ============================================================ */ .site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(26,22,20,0.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); transition: background 0.3s ease; } [data-theme="light"] .site-nav { background: rgba(255,255,255,0.96); } .site-nav__inner { max-width: 1280px; margin: 0 auto; padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; height: 54px; } .site-nav__wordmark { font-family: 'Big Shoulders Text', sans-serif; font-size: 2rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; line-height: 1; /* Mode-aware metallic fill with a shine-sweep animation. The gradient is wider than the text so the highlight band can slide through; positions outside the visible range hold the dark base steady. */ background: var(--metallic); background-size: 300% 100%; background-position: 150% 0%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: shine-sweep 6s ease-in-out infinite; } @keyframes shine-sweep { 0% { background-position: 150% 0%; } /* dark base — highlight off-right */ 25% { background-position: -50% 0%; } /* sweep complete — highlight off-left */ 100% { background-position: -50% 0%; } /* rest — dark base visible */ } @media (prefers-reduced-motion: reduce) { .site-nav__wordmark { animation: none; background-position: 50% 0%; } } .site-nav__links { display: flex; align-items: center; gap: 0.25rem; } .site-nav__link { font-family: 'Inter', sans-serif; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--silver-light); padding: 0.5rem 0.75rem; border-radius: 2px; transition: color 0.2s; white-space: nowrap; } [data-theme="light"] .site-nav__link { color: var(--silver-dark); } .site-nav__link:hover { color: var(--text-primary); } .site-nav__cta { background: var(--cinnabar); color: var(--white) !important; margin-left: 0.75rem; padding: 0.5rem 1.1rem !important; border-radius: 2px; transition: background 0.2s; } .site-nav__cta:hover { background: #bf1f17; color: var(--white) !important; } /* Mobile nav toggle */ .nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.25rem; color: var(--text-primary); } /* ============================================================ SECTION 1 — HERO ============================================================ */ .hero { position: relative; width: 100%; min-height: 100vh; background: var(--ink-black); display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; } /* ===== YSL film-scratch streak field (canvas) ===== */ #hero-streaks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } /* ===== Venetian-blinds reveal — full-cover slats scaleX open ===== */ .hero__blinds { position: absolute; inset: 0; display: flex; z-index: 5; pointer-events: none; } .hero__blinds div { flex: 1; height: 100%; background: linear-gradient(45deg, #444444, #C8C8C8); transform: scaleX(1.04); transform-origin: left center; } .hero__blinds.run div { animation: blindOpen 0.9s cubic-bezier(.77, 0, .18, 1) forwards; } @keyframes blindOpen { to { transform: scaleX(0); } } @media (prefers-reduced-motion: reduce) { .hero__blinds { display: none; } .hero__blinds.run div { animation: none; } } .hero__content { position: relative; z-index: 3; text-align: center; padding: 2rem; animation: heroFadeIn 1s ease 1.2s both; } @keyframes heroFadeIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .hero__wordmark { font-family: 'Bebas Neue', sans-serif; font-size: clamp(3.5rem, 10vw, 9rem); letter-spacing: 0.12em; text-transform: uppercase; color: var(--white); line-height: 1; margin-bottom: 2rem; } .hero__headline { font-family: 'Big Shoulders Text', sans-serif; font-size: clamp(1.6rem, 3.5vw, 2.8rem); font-weight: 700; letter-spacing: 0.06em; color: var(--silver-light); margin-bottom: 0.6rem; text-transform: uppercase; } .hero__subline { font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 300; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(191,194,200,0.6); margin-bottom: 2.5rem; } .hero__actions { display: flex; flex-direction: column; align-items: center; gap: 1rem; } .btn-primary { display: inline-block; background: var(--cinnabar); color: var(--white); font-family: 'Inter', sans-serif; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; padding: 1rem 2.5rem; border-radius: 2px; transition: background 0.2s, transform 0.15s; } .btn-primary:hover { background: #bf1f17; transform: translateY(-1px); } .btn-outline { display: inline-block; font-family: 'Inter', sans-serif; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--white); background: transparent; border: 1.5px solid var(--cinnabar); padding: 1rem 2.5rem; border-radius: 2px; transition: background 0.2s, color 0.2s; } .btn-outline:hover { background: var(--cinnabar); color: var(--white); } .hero__scroll { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; color: rgba(191,194,200,0.4); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; animation: heroFadeIn 1s ease 2.2s both; } .hero__scroll-line { width: 1px; height: 40px; background: linear-gradient(to bottom, rgba(191,194,200,0.4), transparent); animation: scrollPulse 2s ease-in-out infinite; } @keyframes scrollPulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } /* ============================================================ SECTION 2 — PHOTO BAND 1 ============================================================ */ .photo-band { width: 100%; height: clamp(300px, 45vw, 600px); overflow: hidden; position: relative; } .photo-band__placeholder { width: 100%; height: 100%; } /* ============================================================ SECTION 3 — CHECKERBOARD: PRACTICE AREAS ============================================================ */ .checker-row { display: grid; grid-template-columns: 1fr 1fr; min-height: clamp(400px, 50vw, 620px); } .checker-row.reverse { direction: rtl; } .checker-row.reverse > * { direction: ltr; } .checker-cell { display: flex; flex-direction: column; justify-content: center; padding: clamp(2.5rem, 6vw, 6rem); } .checker-cell--dark { background: var(--ink-black); color: var(--white); } .checker-cell--light { background: var(--white); color: var(--body-ink); } [data-theme="light"] .checker-cell--dark { background: var(--body-ink); } .checker-cell__eyebrow { margin-bottom: 1.25rem; } .checker-cell__heading { font-family: 'Big Shoulders Text', sans-serif; font-weight: 700; font-size: clamp(2rem, 4vw, 3.5rem); letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.05; margin-bottom: 1.5rem; } .checker-cell__body { font-family: 'Inter', sans-serif; font-size: clamp(0.95rem, 1.4vw, 1.1rem); font-weight: 400; line-height: 1.7; color: var(--silver-light); max-width: 48ch; margin-bottom: 2rem; } [data-theme="light"] .checker-cell--light .checker-cell__body { color: var(--body-ink); } .practice-list { list-style: none; display: flex; flex-direction: column; gap: 0; } .practice-list__item { border-top: 1px solid var(--border); } .practice-list__item:last-child { border-bottom: 1px solid var(--border); } .practice-list__link { display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 0; font-family: 'Inter', sans-serif; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--body-ink); transition: color 0.2s; } .practice-list__link:hover { color: var(--crimson); } .practice-list__link span { font-size: 1rem; font-weight: 300; } .practice-list__all { display: inline-block; margin-top: 1.25rem; font-family: 'Inter', sans-serif; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--crimson); border-bottom: 1px solid var(--crimson); padding-bottom: 2px; } /* ============================================================ SECTION 4 — CHECKERBOARD: TRUST STACK ============================================================ */ .trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-bottom: 2.5rem; } .trust-stat { padding: 1.5rem; background: rgba(255,255,255,0.04); } .trust-stat__number { font-family: 'Bebas Neue', sans-serif; font-size: clamp(2.5rem, 5vw, 4rem); color: var(--cinnabar-bright); letter-spacing: 0.03em; line-height: 1; } .trust-stat__label { font-family: 'Inter', sans-serif; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--silver-light); margin-top: 0.25rem; } /* ============================================================ SECTION 5 — LINCOLN QUOTE ============================================================ */ .quote-module { background: var(--ink-black); padding: clamp(5rem, 10vw, 10rem) 2rem; text-align: center; position: relative; overflow: hidden; } [data-theme="light"] .quote-module { background: var(--body-ink); } .quote-module::before { content: ''; display: block; width: 48px; height: 2px; background: var(--cinnabar-bright); margin: 0 auto 3rem; } .quote-module__text { font-family: 'Bebas Neue', sans-serif; font-size: clamp(1.8rem, 4vw, 3.5rem); letter-spacing: 0.04em; text-transform: uppercase; color: var(--white); line-height: 1.2; max-width: 900px; margin: 0 auto 2rem; } .quote-module__attribution { font-family: 'Inter', sans-serif; font-size: 0.75rem; font-weight: 300; letter-spacing: 0.2em; text-transform: uppercase; color: var(--silver-light); } /* ============================================================ SECTION 6 — HOW IT WORKS ============================================================ */ .how-it-works { background: var(--white); padding: clamp(4rem, 8vw, 8rem) 2rem; } .how-it-works__header { text-align: center; margin-bottom: 4rem; } .section-heading { font-family: 'Bebas Neue', sans-serif; font-size: clamp(2.5rem, 5vw, 4.5rem); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-primary); line-height: 1; margin-top: 1rem; } .how-it-works__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; max-width: 960px; margin: 0 auto 3.5rem; position: relative; } .how-it-works__steps::before { content: ''; position: absolute; top: 1.5rem; left: 16.66%; right: 16.66%; height: 1px; background: var(--border); } .step { padding: 0 2rem; text-align: center; } .step__number { font-family: 'Bebas Neue', sans-serif; font-size: 3rem; color: var(--cinnabar-bright); line-height: 1; margin-bottom: 1rem; } .step__title { font-family: 'Big Shoulders Text', sans-serif; font-weight: 700; font-size: 1.4rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--body-ink); margin-bottom: 0.75rem; } .step__body { font-family: 'Inter', sans-serif; font-size: 0.95rem; font-weight: 400; line-height: 1.65; color: var(--silver-dark); } .how-it-works__footer { text-align: center; } .fee-note { font-family: 'Inter', sans-serif; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--crimson); margin-top: 1.25rem; } /* ============================================================ SECTION 7 — RESULTS STRIP ============================================================ */ .results-strip { background: var(--ink-black); padding: clamp(4rem, 8vw, 8rem) 0; overflow: hidden; } [data-theme="light"] .results-strip { background: var(--body-ink); } .results-strip__inner { padding: 0 2rem; } .results-strip__header { margin-bottom: 3.5rem; max-width: 700px; } .results-strip__subhead { font-family: 'Inter', sans-serif; font-size: clamp(1rem, 1.8vw, 1.25rem); font-weight: 400; line-height: 1.6; color: var(--silver-light); margin: 1rem 0 0; } .results-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); margin-bottom: 3rem; } .result-card { background: var(--ink-black); padding: 2rem 1.75rem; } [data-theme="light"] .result-card { background: var(--body-ink); } .result-card__type { font-family: 'Inter', sans-serif; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cinnabar-bright); margin-bottom: 0.75rem; } .result-card__outcome { font-family: 'Bebas Neue', sans-serif; font-size: 1.6rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--white); line-height: 1.1; margin-bottom: 0.5rem; } .result-card__note { font-family: 'Inter', sans-serif; font-size: 0.75rem; color: var(--silver-light); opacity: 0.7; } .results-strip__body { font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 400; color: var(--silver-light); max-width: 600px; margin-bottom: 2rem; } /* ============================================================ SECTION 8 — REVIEWS ============================================================ */ .reviews-section { background: var(--white); padding: clamp(4rem, 8vw, 8rem) 2rem; } .reviews-section__header { margin-bottom: 3.5rem; } .reviews-section__subhead { font-family: 'Inter', sans-serif; font-size: 1.1rem; font-weight: 300; color: var(--silver-dark); margin-top: 0.5rem; letter-spacing: 0.05em; } /* Featured quote */ .featured-review { border-left: 3px solid var(--cinnabar-bright); padding: 1.5rem 2rem; background: rgba(217,38,28,0.04); margin-bottom: 3rem; max-width: 800px; } .featured-review__quote { font-family: 'Inter', sans-serif; font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 500; line-height: 1.5; color: var(--body-ink); margin-bottom: 0.75rem; } .featured-review__attribution { font-family: 'Inter', sans-serif; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cinnabar-bright); } /* Google-style review cards */ .review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-bottom: 2.5rem; } .review-card { background: var(--white); border-radius: 4px; padding: 1.5rem; border: 1px solid rgba(43,37,34,0.12); transition: border-color 0.2s; } .review-card:hover { border-color: rgba(191,194,200,0.4); } .review-card__header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; } .review-card__avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--body-ink); display: flex; align-items: center; justify-content: center; font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 600; color: var(--white); flex-shrink: 0; } .review-card__meta { flex: 1; } .review-card__name { font-family: 'Inter', sans-serif; font-size: 0.82rem; font-weight: 600; color: var(--body-ink); } .review-card__date { font-family: 'Inter', sans-serif; font-size: 0.7rem; color: var(--silver-dark); } .review-card__google { opacity: 0.5; } .review-card__stars { color: var(--cinnabar-bright); font-size: 0.85rem; letter-spacing: 1px; margin-bottom: 0.6rem; } .review-card__text { font-family: 'Inter', sans-serif; font-size: 0.9rem; font-weight: 400; line-height: 1.6; color: var(--body-ink); } .review-card__source { display: inline-block; margin-top: 0.75rem; font-family: 'Inter', sans-serif; font-size: 0.65rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cinnabar-bright); opacity: 0.7; transition: opacity 0.2s; } .review-card__source:hover { opacity: 1; } .reviews-section__cta { text-align: center; } /* ============================================================ SECTION 9 — PHOTO BAND 2 ============================================================ */ /* re-uses .photo-band */ /* ============================================================ SECTION 10 — ABOUT TEASER ============================================================ */ .about-teaser { background: var(--white); color: var(--body-ink); display: grid; grid-template-columns: 1fr 1fr; min-height: clamp(400px, 45vw, 580px); } [data-theme="light"] .about-teaser { background: var(--warm-cream); } .about-teaser__content { display: flex; flex-direction: column; justify-content: center; padding: clamp(3rem, 6vw, 6rem); } .about-teaser__eyebrow { margin-bottom: 1.25rem; color: var(--silver-dark); } .about-teaser__heading { font-family: 'Big Shoulders Text', sans-serif; font-weight: 700; font-size: clamp(2rem, 4vw, 3.5rem); letter-spacing: 0.04em; text-transform: uppercase; color: var(--body-ink); line-height: 1.05; margin-bottom: 1.5rem; } .about-teaser__body { font-family: 'Inter', sans-serif; font-size: clamp(0.95rem, 1.4vw, 1.1rem); font-weight: 400; line-height: 1.7; color: var(--body-ink); max-width: 46ch; margin-bottom: 2rem; } .btn-dark { display: inline-block; background: var(--body-ink); color: var(--white); font-family: 'Inter', sans-serif; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; padding: 0.9rem 2rem; border-radius: 2px; transition: background 0.2s; } .btn-dark:hover { background: var(--crimson); } .about-teaser__image { overflow: hidden; } /* ============================================================ SECTION 11 — JOURNAL PREVIEW ============================================================ */ .journal-section { background: var(--bg); padding: clamp(4rem, 8vw, 8rem) 2rem; } .journal-section__header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 3rem; flex-wrap: wrap; gap: 1rem; } .journal-section__subhead { font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 300; color: var(--text-secondary); margin-top: 0.5rem; max-width: 50ch; } .link-arrow { font-family: 'Inter', sans-serif; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--cinnabar); border-bottom: 1px solid var(--cinnabar); padding-bottom: 2px; white-space: nowrap; } .journal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .journal-card { border: 1px solid var(--border); border-radius: 2px; overflow: hidden; } .journal-card__image { height: 200px; } .journal-card__content { padding: 1.5rem; } .journal-card__tag { font-family: 'Inter', sans-serif; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cinnabar); margin-bottom: 0.6rem; } .journal-card__title { font-family: 'Big Shoulders Text', sans-serif; font-weight: 700; font-size: 1.25rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-primary); line-height: 1.2; margin-bottom: 0.75rem; } .journal-card__excerpt { font-family: 'Inter', sans-serif; font-size: 0.88rem; font-weight: 400; line-height: 1.6; color: var(--text-secondary); margin-bottom: 1.25rem; } .journal-card__read { font-family: 'Inter', sans-serif; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cinnabar); } /* ============================================================ SECTION 12 — FINAL CTA + MAP + FOOTER ============================================================ */ .final-cta { background: var(--ink-black); padding: clamp(5rem, 10vw, 10rem) 2rem; text-align: center; } [data-theme="light"] .final-cta { background: var(--body-ink); } .final-cta__heading { font-family: 'Bebas Neue', sans-serif; font-size: clamp(3rem, 7vw, 7rem); letter-spacing: 0.05em; text-transform: uppercase; color: var(--white); line-height: 1; margin-bottom: 1rem; } .final-cta__subhead { font-family: 'Inter', sans-serif; font-size: clamp(0.95rem, 1.6vw, 1.15rem); font-weight: 300; color: var(--silver-light); max-width: 52ch; margin: 0 auto 2.5rem; line-height: 1.7; } .final-cta__actions { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-bottom: 4rem; } .location-block { display: inline-flex; flex-direction: column; gap: 0.25rem; margin-top: 3rem; font-family: 'Inter', sans-serif; font-size: 0.75rem; letter-spacing: 0.1em; color: var(--silver-light); text-transform: uppercase; } .location-block strong { font-weight: 600; color: var(--white); } /* Map placeholder */ .map-placeholder { width: 100%; max-width: 960px; margin: 0 auto 3rem; height: 320px; } /* Live Google Maps embed — framed so it reads as designed, not a bare iframe. */ .map-embed { border: 1px solid var(--border); overflow: hidden; } .map-embed iframe { display: block; width: 100%; height: 100%; border: 0; /* Dark-map treatment for the always-black final-CTA band — inverts Google's default light tiles to a dark palette while preserving hue (the standard invert + hue-rotate technique). No API key needed. */ filter: invert(0.9) hue-rotate(180deg) brightness(0.95) contrast(0.9); } /* ============================================================ 404 — branded not-found page. Sits between shared header/footer and fills the viewport so the page never reads as broken chrome. ============================================================ */ .not-found { min-height: calc(100vh - 54px); display: flex; align-items: center; justify-content: center; padding: 4rem 2rem; background: var(--bg); } .not-found__inner { max-width: 720px; text-align: center; } /* Massive "404" — same brushed-gunmetal metallic + shine-sweep as the nav/footer wordmarks, so the page reads as part of the brand language rather than a generic error code. Hardcoded gradient (not the var) because the metallic var flips to dark anodized in light mode and wouldn't read against the dark surface of light-mode footers — here we want the brushed silver in both themes. */ .not-found__code { font-family: 'Bebas Neue', sans-serif; font-size: clamp(8rem, 24vw, 18rem); line-height: 0.85; letter-spacing: 0.04em; background: linear-gradient(105deg, #757A82 0%, #757A82 30%, #B8BCC3 42%, #E8EBEF 50%, #B8BCC3 58%, #757A82 70%, #757A82 100%); background-size: 300% 100%; background-position: 150% 0%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: shine-sweep 6s ease-in-out infinite; user-select: none; margin-bottom: 1.5rem; } [data-theme="light"] .not-found__code { /* On a light surface, brushed silver disappears — switch to the dark anodized variant so the 404 reads with the right contrast. */ background: linear-gradient(105deg, #1A1C20 0%, #1A1C20 30%, #555A64 42%, #7A8088 50%, #555A64 58%, #1A1C20 70%, #1A1C20 100%); background-size: 300% 100%; background-position: 150% 0%; -webkit-background-clip: text; background-clip: text; } .not-found__title { font-family: 'Big Shoulders Text', sans-serif; font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 600; letter-spacing: 0.01em; line-height: 1.15; color: var(--text-primary); margin-bottom: 1rem; } .not-found__body { font-family: 'Inter', sans-serif; font-size: 1rem; line-height: 1.6; color: var(--text-secondary); max-width: 38ch; margin: 0 auto 2.5rem; } .not-found__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-bottom: 2.5rem; } /* .btn-outline ships with color: var(--white) — designed for the always- dark hero. The 404 sits on a theme-aware surface, so in light mode that's white-on-white. Override locally; hover state (red bg + white text) reads fine in both themes and doesn't need to change. */ .not-found .btn-outline { color: var(--text-primary); } .not-found__phone { font-family: 'Inter', sans-serif; font-size: 0.875rem; color: var(--text-muted); } .not-found__phone a { color: var(--accent); font-weight: 600; } .not-found__phone a:hover { text-decoration: underline; } @media (max-width: 540px) { .not-found__actions { flex-direction: column; align-items: stretch; } .not-found__actions .btn-primary, .not-found__actions .btn-outline { text-align: center; } } @media (prefers-reduced-motion: reduce) { .not-found__code { animation: none; background-position: 50% 0%; } } /* Giant footer wordmark */ footer { background: var(--ink-black); overflow: hidden; border-top: 1px solid var(--border); } [data-theme="light"] footer { background: var(--body-ink); } .footer-wordmark { font-family: 'Bebas Neue', sans-serif; font-size: clamp(2rem, 8.5vw, 10rem); letter-spacing: 0.06em; text-transform: uppercase; /* Same brushed-gunmetal metallic + shine-sweep as the nav wordmark. Footer sits on a dark surface in both themes, so we lock in the dark-mode --metallic gradient directly (the mode-aware var would flip to dark anodized in light mode and vanish against the bg). */ background: linear-gradient(105deg, #757A82 0%, #757A82 30%, #B8BCC3 42%, #E8EBEF 50%, #B8BCC3 58%, #757A82 70%, #757A82 100%); background-size: 300% 100%; background-position: 150% 0%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: shine-sweep 6s ease-in-out infinite; line-height: 0.85; padding: 2rem 2rem 0; user-select: none; white-space: nowrap; width: 100%; display: block; text-align: left; } @media (prefers-reduced-motion: reduce) { .footer-wordmark { animation: none; background-position: 50% 0%; } } .footer-nav { display: flex; flex-wrap: wrap; gap: 0.25rem 2rem; padding: 2rem 2rem 1rem; } .footer-nav a { font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--silver-light); transition: color 0.2s; } .footer-nav a:hover { color: var(--white); } .footer-utils { display: flex; align-items: center; justify-content: space-between; padding: 1rem 2rem 2rem; border-top: 1px solid var(--border); flex-wrap: wrap; gap: 1rem; } /* Membership / credentials bar */ .footer-credentials { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 2rem; padding: 2.5rem 4rem; border-top: 1px solid var(--border); } .footer-credentials__label { font-family: 'Inter', sans-serif; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--silver-light); opacity: 0.7; flex-shrink: 0; } /* Logos sit in a grid that fills the full width of the bar. Each cell is equal share — natural widths constrained by `max-width: 100%` so wide wordmark lockups (e.g. ISBA at ~6:1) don't crowd the others. Desktop: 6 columns (one row). Medium: 3 columns (two rows). Mobile: 1. */ .footer-credentials__items { flex: 1 1 100%; display: grid; grid-template-columns: repeat(6, 1fr); align-items: center; gap: 1rem 1.5rem; } /* Each membership is a fixed-HEIGHT rectangular slot. Logos are white-silhouette PNGs (processed in 03-assets/images/memberships/) so widths scale to each logo's natural aspect — the row reads as a consistent monochrome silver lockup on the always-dark footer. */ .credential { display: flex; align-items: center; justify-content: center; width: 100%; height: 64px; min-width: 0; } .credential__seal { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; opacity: 0.85; transition: opacity 0.2s; } .credential__seal:hover { opacity: 1; } /* Medium viewport — 6 logos break to two rows of 3. */ @media (max-width: 1100px) { .footer-credentials { padding: 2.25rem 3rem; } .footer-credentials__items { grid-template-columns: repeat(3, 1fr); } .credential { height: 60px; } } /* Mobile — stacked vertically, larger so each logo is readable. */ @media (max-width: 640px) { .footer-credentials { padding: 2rem 1.75rem; } .footer-credentials__items { grid-template-columns: 1fr; gap: 1.75rem; } .credential { height: 72px; } } /* Legacy classes kept as inline-style fallbacks (unused by new markup). */ .footer-credentials__item { font-family: 'Inter', sans-serif; font-size: 0.65rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--silver-light); white-space: nowrap; } .footer-credentials__divider { color: var(--border); font-size: 0.7rem; } /* Stale 700px breakpoint removed — new responsive rules for the credentials row live with the .credential block. */ .footer-copy { font-family: 'Inter', sans-serif; font-size: 0.85rem; color: var(--text-muted); letter-spacing: 0.06em; } /* Agency credit — subtle underline that brightens on hover. */ .footer-design-credit { color: inherit; border-bottom: 1px solid currentColor; padding-bottom: 1px; transition: color 0.2s, border-color 0.2s; } .footer-design-credit:hover { color: var(--silver-light); border-color: var(--silver-light); } /* Plain footer link — same color/hover behavior as the design credit but no border-bottom. Used for the phone tel: link and the agency link in the bottom utility row where the underline reads as noise. */ .footer-link--plain { color: inherit; text-decoration: none; transition: color 0.2s; } .footer-link--plain:hover { color: var(--silver-light); } /* Theme toggle */ .theme-toggle { display: flex; gap: 0.25rem; background: rgba(255,255,255,0.06); border: 1px solid var(--border); border-radius: 2px; padding: 0.25rem; } [data-theme="light"] .theme-toggle { background: rgba(0,0,0,0.05); } .theme-btn { font-family: 'Inter', sans-serif; font-size: 0.62rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); background: none; border: none; cursor: pointer; padding: 0.3rem 0.6rem; border-radius: 1px; transition: background 0.15s, color 0.15s; } .theme-btn.active, .theme-btn:hover { background: var(--cinnabar); color: var(--white); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 900px) { .site-nav__links { display: none; } .site-nav__links.nav-open { display: flex; flex-direction: column; position: absolute; top: 60px; left: 0; right: 0; background: rgba(26,22,20,0.98); padding: 1rem 2rem 1.5rem; gap: 0.1rem; border-bottom: 1px solid var(--border); } [data-theme="light"] .site-nav__links.nav-open { background: rgba(255,255,255,0.98); } .site-nav__cta { margin-left: 0; margin-top: 0.5rem; text-align: center; } .nav-toggle { display: flex; align-items: center; justify-content: center; } .checker-row, .checker-row.reverse { grid-template-columns: 1fr; direction: ltr; } .checker-cell { padding: 3rem 1.5rem; } .trust-grid { grid-template-columns: 1fr 1fr; } .how-it-works__steps { grid-template-columns: 1fr; gap: 2.5rem; } .how-it-works__steps::before { display: none; } .results-grid { grid-template-columns: 1fr 1fr; } .review-grid { grid-template-columns: 1fr; } .about-teaser { grid-template-columns: 1fr; } .about-teaser__image { min-height: 300px; } .journal-grid { grid-template-columns: 1fr; } } @media (max-width: 600px) { .results-grid { grid-template-columns: 1fr; } .trust-grid { grid-template-columns: 1fr; } .footer-wordmark { font-size: clamp(1.5rem, 8.5vw, 10rem); } } /* ============================================================ PRACTICE-AREA PAGE — specific components ============================================================ */ /* Breadcrumb (in hero) */ .breadcrumb { font-family: 'Inter', sans-serif; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(191,194,200,0.7); margin-bottom: 1.5rem; } .breadcrumb a { color: var(--cinnabar-bright); border-bottom: 1px solid transparent; transition: border-color 0.2s; } .breadcrumb a:hover { border-color: var(--cinnabar-bright); } .breadcrumb span { opacity: 0.45; margin: 0 0.5rem; } /* Practice hero — shorter than homepage, left-aligned content */ .pa-hero { position: relative; width: 100%; min-height: clamp(420px, 62vh, 640px); background: var(--ink-black); display: flex; align-items: center; overflow: hidden; } .pa-hero__content { position: relative; z-index: 3; max-width: 1280px; margin: 0 auto; padding: 7rem 2rem 4rem; width: 100%; animation: heroFadeIn 0.9s ease 0.15s both; } .pa-hero__h1 { font-family: 'Big Shoulders Text', sans-serif; font-weight: 700; font-size: clamp(2.2rem, 5.2vw, 4.4rem); letter-spacing: 0.03em; text-transform: uppercase; color: var(--white); line-height: 1.04; max-width: 18ch; margin-bottom: 1.5rem; } .pa-hero__subhead { font-family: 'Inter', sans-serif; font-size: clamp(1rem, 1.8vw, 1.3rem); font-weight: 300; line-height: 1.6; color: var(--silver-light); max-width: 60ch; margin-bottom: 2.5rem; } .pa-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; } /* Prose content section */ .pa-prose { background: var(--bg); padding: clamp(4rem, 8vw, 7rem) 2rem; } .pa-prose__inner { max-width: 760px; margin: 0 auto; } .pa-prose h2 { font-family: 'Big Shoulders Text', sans-serif; font-weight: 700; font-size: clamp(1.7rem, 3.2vw, 2.6rem); letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-primary); line-height: 1.1; margin: 2.5rem 0 1.25rem; } .pa-prose h2:first-child { margin-top: 0; } .pa-prose p { font-family: 'Inter', sans-serif; font-size: clamp(1rem, 1.4vw, 1.12rem); font-weight: 400; line-height: 1.75; color: var(--text-secondary); margin-bottom: 1.25rem; } [data-theme="light"] .pa-prose p { color: var(--body-ink); } .pa-prose strong { color: var(--text-primary); font-weight: 600; } /* Compensation list */ .comp-list { list-style: none; margin: 1.5rem 0 2rem; } .comp-list li { position: relative; padding: 1rem 0 1rem 2.25rem; border-top: 1px solid var(--border); font-family: 'Inter', sans-serif; font-size: clamp(0.95rem, 1.4vw, 1.08rem); line-height: 1.6; color: var(--text-secondary); } [data-theme="light"] .comp-list li { color: var(--body-ink); } .comp-list li:last-child { border-bottom: 1px solid var(--border); } .comp-list li::before { content: '→'; position: absolute; left: 0; top: 1rem; color: var(--cinnabar); font-weight: 600; } .comp-list strong { color: var(--text-primary); font-weight: 600; } /* Inline callout / contingency panel */ .pa-callout { border-left: 3px solid var(--cinnabar); background: rgba(217,38,28,0.05); padding: 1.5rem 1.75rem; margin: 2rem 0; border-radius: 0 4px 4px 0; } .pa-callout p { margin-bottom: 0; color: var(--text-primary); font-weight: 500; } /* FAQ accordion */ .faq-section { background: var(--bg-alt); padding: clamp(4rem, 8vw, 8rem) 2rem; } .faq-section__inner { max-width: 820px; margin: 0 auto; } .faq-item { border-bottom: 1px solid var(--border); } .faq-item summary { list-style: none; cursor: pointer; padding: 1.4rem 2.5rem 1.4rem 0; position: relative; font-family: 'Big Shoulders Text', sans-serif; font-weight: 600; font-size: clamp(1.05rem, 1.8vw, 1.35rem); letter-spacing: 0.02em; color: var(--text-primary); transition: color 0.2s; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary:hover { color: var(--accent); } .faq-item summary::after { content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-family: 'Inter', sans-serif; font-size: 1.6rem; font-weight: 300; color: var(--cinnabar-bright); transition: transform 0.25s; } [data-theme="light"] .faq-item summary::after { color: var(--cinnabar); } .faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); } .faq-item__body { padding: 0 0 1.5rem; font-family: 'Inter', sans-serif; font-size: clamp(0.95rem, 1.4vw, 1.05rem); line-height: 1.7; color: var(--text-secondary); max-width: 70ch; } [data-theme="light"] .faq-item__body { color: var(--body-ink); } /* Related practice areas */ .related-pa { background: var(--bg); padding: clamp(4rem, 8vw, 7rem) 2rem; } .related-pa__inner { max-width: 1280px; margin: 0 auto; } .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); margin-top: 2.5rem; } .related-card { background: var(--bg); padding: 1.75rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-family: 'Inter', sans-serif; font-size: 0.92rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-primary); transition: background 0.2s, color 0.2s; } .related-card:hover { color: var(--accent); } .related-card span { color: var(--cinnabar); font-weight: 300; font-size: 1.1rem; } @media (max-width: 900px) { .related-grid { grid-template-columns: 1fr; } } /* ============================================================ BUTTONS — square corners (locked 2026-06-10: car-accidents copy + approved mock). Overrides earlier 2px radius. ============================================================ */ .btn-primary, .btn-outline, .btn-dark, .site-nav__cta, .lead-form input, .lead-form textarea, .lead-form button { border-radius: 0; } /* ============================================================ PRACTICE-AREA ALTERNATING BANDS (fixed black/white, mode-independent — mirrors the homepage checkerboard rhythm) ============================================================ */ /* The [data-theme] prefix raises specificity so these win over the theme-aware "[data-theme=light] .pa-prose ..." rules — a dark band keeps LIGHT text even in light mode, a light band keeps DARK text even in dark mode (mode-independent, like the homepage checkerboard). */ [data-theme] .pa-prose--dark { background: var(--ink-black); } [data-theme] .pa-prose--dark h2, [data-theme] .pa-prose--dark strong, [data-theme] .pa-prose--dark .comp-list strong, [data-theme] .pa-prose--dark .pa-callout p, [data-theme] .pa-prose--dark .pa-callout strong { color: var(--white); } [data-theme] .pa-prose--dark p, [data-theme] .pa-prose--dark .comp-list li { color: var(--silver-light); } [data-theme] .pa-prose--dark .comp-list li { border-color: rgba(191,194,200,0.15); } [data-theme] .pa-prose--light { background: var(--white); } [data-theme] .pa-prose--light h2, [data-theme] .pa-prose--light p, [data-theme] .pa-prose--light strong, [data-theme] .pa-prose--light .comp-list li, [data-theme] .pa-prose--light .comp-list strong, [data-theme] .pa-prose--light .pa-callout p { color: var(--body-ink); } [data-theme] .pa-prose--light .comp-list li { border-color: rgba(43,37,34,0.12); } /* Trust strip (hero) */ .trust-strip { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin-top: 2.25rem; align-items: center; } .trust-strip li { position: relative; font-family: 'Inter', sans-serif; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--silver-light); } .trust-strip li:not(:last-child)::after { content: '·'; position: absolute; right: -1rem; color: var(--silver-dark); } .trust-strip__stars { color: var(--cinnabar-bright); letter-spacing: 1px; } /* Social-proof band (dark) — reuses .featured-review / .review-card */ .pa-reviews { background: var(--ink-black); padding: clamp(4rem, 8vw, 8rem) 0; } .pa-reviews .eyebrow { color: var(--silver-light); } .pa-reviews .section-heading { color: var(--white); } .pa-reviews .featured-review { background: rgba(217,38,28,0.10); border-left-color: var(--cinnabar-bright); } .pa-reviews .featured-review__quote { color: var(--white); } /* CTA + inline lead form (light band) */ .pa-cta { background: var(--white); padding: clamp(4rem, 8vw, 8rem) 2rem; } .cta-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); max-width: 1100px; margin: 0 auto; align-items: start; } .cta-split__intro h2 { font-family: 'Big Shoulders Text', sans-serif; font-weight: 700; font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: 0.03em; text-transform: uppercase; color: var(--body-ink); line-height: 1.05; margin-bottom: 1.25rem; } .cta-split__intro p { font-family: 'Inter', sans-serif; font-size: 1.05rem; line-height: 1.7; color: var(--body-ink); margin-bottom: 1.75rem; max-width: 42ch; } .lead-form { display: flex; flex-direction: column; gap: 1rem; } .lead-form__field { display: flex; flex-direction: column; gap: 0.35rem; } .lead-form label { font-family: 'Inter', sans-serif; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--body-ink); } .lead-form label .req { color: var(--crimson); } .lead-form input, .lead-form textarea { width: 100%; padding: 0.85rem 1rem; border: 1px solid rgba(43,37,34,0.25); background: #fff; font-family: 'Inter', sans-serif; font-size: 1rem; color: var(--body-ink); } .lead-form textarea { min-height: 96px; resize: vertical; } .lead-form input:focus, .lead-form textarea:focus { outline: none; border-color: var(--cinnabar); box-shadow: 0 0 0 2px rgba(217,38,28,0.25); } .lead-form button { margin-top: 0.25rem; align-self: flex-start; background: var(--crimson); color: var(--white); font-family: 'Inter', sans-serif; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; padding: 1rem 2.5rem; border: none; cursor: pointer; transition: background 0.2s, transform 0.15s; } .lead-form button:hover { background: #8c1216; transform: translateY(-1px); } .lead-form__micro { font-family: 'Inter', sans-serif; font-size: 0.75rem; color: var(--silver-dark); margin-top: 0.25rem; } @media (max-width: 800px) { .cta-split { grid-template-columns: 1fr; } } /* ============================================================ MODE-AWARE CONTRAST FIXES (2026-06-10 audit) — use the right red/silver for the actual surface. ============================================================ */ /* Eyebrows inside DARK checker cells stay silver-light even in light mode (the cell is dark regardless of mode; light-mode .eyebrow override goes too dark against it). */ [data-theme="light"] .checker-cell--dark .eyebrow { color: var(--silver-light); } /* Featured-review attribution lives on WHITE (.reviews-section is always white). Cinnabar-bright is dark-surface-only — switch to crimson on white. */ .featured-review__attribution { color: var(--crimson); } /* On the dark practice-area band, keep the bright variant. */ .pa-reviews .featured-review__attribution { color: var(--cinnabar-bright); } /* Result cards stay on pure ink-black in both modes (the lighter body-ink background in light mode dropped Cinnabar Bright eyebrow contrast). */ [data-theme="light"] .result-card { background: var(--ink-black); } /* Journal card "read more" — Cinnabar is CTA/display-only on dark; small text needs the dark-surface token in dark mode, Crimson on white. */ .journal-card__read, .journal-card__tag { color: var(--cinnabar-bright); } [data-theme="light"] .journal-card__read, [data-theme="light"] .journal-card__tag { color: var(--crimson); } /* Footer is always a DARK surface (ink-black in dark, body-ink in light). --text-muted in light mode is tuned for white surfaces — too dim on the dark footer. Pin readable values on the footer specifically. */ [data-theme="light"] .footer-copy, [data-theme="light"] .theme-btn { color: var(--silver-light); } /* ============================================================ NAV DROPDOWN — desktop hover/focus-within, mobile inline-expanded. ============================================================ */ .site-nav__item { display: inline-flex; align-items: center; } .site-nav__item--has-children { position: relative; } .site-nav__link--has-children { display: inline-flex; align-items: center; gap: 0.4rem; } .site-nav__caret { transition: transform 0.2s; } .site-nav__item--has-children:hover .site-nav__caret, .site-nav__item--has-children:focus-within .site-nav__caret { transform: rotate(180deg); } .site-nav__submenu { list-style: none; margin: 0; padding: 0.4rem 0; position: absolute; top: calc(100% + 4px); left: -0.6rem; min-width: 240px; background: rgba(26,22,20,0.98); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--border); box-shadow: 0 14px 32px rgba(0,0,0,0.5); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.18s, transform 0.18s, visibility 0s linear 0.18s; z-index: 200; } [data-theme="light"] .site-nav__submenu { background: rgba(255,255,255,0.98); border-color: rgba(43,37,34,0.15); } .site-nav__item--has-children:hover .site-nav__submenu, .site-nav__item--has-children:focus-within .site-nav__submenu { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s, 0s, 0s; } .site-nav__submenu li a { display: block; padding: 0.7rem 1.25rem; font-family: 'Inter', sans-serif; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--silver-light); white-space: nowrap; transition: background 0.15s, color 0.15s; } [data-theme="light"] .site-nav__submenu li a { color: var(--body-ink); } .site-nav__submenu li a:hover, .site-nav__submenu li a:focus { background: rgba(217,38,28,0.12); color: var(--white); outline: none; } [data-theme="light"] .site-nav__submenu li a:hover, [data-theme="light"] .site-nav__submenu li a:focus { background: rgba(217,38,28,0.08); color: var(--cinnabar); } /* Mobile (below 900px): the hamburger panel stacks links vertically. Show the submenu inline as an indented sub-list — always visible, no extra tap needed. The caret is hidden. */ @media (max-width: 900px) { .site-nav__item { display: block; width: 100%; } .site-nav__item--has-children { position: static; } .site-nav__caret { display: none; } .site-nav__submenu { position: static; opacity: 1; visibility: visible; transform: none; background: transparent; backdrop-filter: none; border: none; box-shadow: none; padding: 0.25rem 0 0.5rem 1.25rem; min-width: 0; transition: none; } .site-nav__submenu li a { padding: 0.5rem 0.75rem; font-size: 0.65rem; } } /* ============================================================ PRACTICE-AREAS HUB — six-card grid ============================================================ */ .pa-areas-grid { background: var(--ink-black); padding: clamp(4rem, 8vw, 7rem) 2rem; } [data-theme] .pa-areas-grid { background: var(--ink-black); } .areas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .area-card { display: flex; flex-direction: column; gap: 1rem; padding: 1.75rem 1.75rem 1.5rem; background: rgba(255,255,255,0.04); border: 1px solid var(--border); transition: background 0.2s, border-color 0.2s, transform 0.2s; color: var(--silver-light); } .area-card:hover { background: rgba(217,38,28,0.08); border-color: var(--cinnabar-bright); transform: translateY(-2px); } .area-card__title { font-family: 'Big Shoulders Text', sans-serif; font-weight: 700; font-size: clamp(1.3rem, 2.2vw, 1.65rem); letter-spacing: 0.04em; text-transform: uppercase; color: var(--white); line-height: 1.1; } .area-card__body { font-family: 'Inter', sans-serif; font-size: 0.95rem; line-height: 1.6; color: var(--silver-light); flex: 1; } .area-card__cta { font-family: 'Inter', sans-serif; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cinnabar-bright); margin-top: auto; } @media (max-width: 1000px) { .areas-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .areas-grid { grid-template-columns: 1fr; } }