/* ============================================================ Sterling & Ghold LLP — Design System Tokens Applies Bootstrap 5 custom properties + firm-specific overrides. Bootstrap itself is linked in Phase 3 once the public layout is built. ============================================================ */ /* ── Google Fonts — wired in Phase 3 layout ────────── Cormorant Garamond: headings Raleway: body copy, UI labels ──────────────────────────────────────────────────────────── */ /* ── Colour palette ────────────────────────────────────────── */ :root { --ink-900: #0b0b0f; --ink-800: #14171f; --navy-900: #0e1a2b; --navy-700: #1b2a41; --charcoal-600: #3a3f4b; --charcoal-300: #9098a6; --rule-200: #e5e7ec; --paper-50: #fafaf7; --paper-0: #ffffff; --gold-600: #a8884b; --gold-300: #d6be85; --danger: #a4243b; --success: #2f6b4f; --slate-blue: #2e6da4; --slate-blue-dark: #245a8a; /* ── Bootstrap 5 overrides ─────────────────────────────── */ /* ── Extended palette ─────────────────────────────────── */ --paper-100: #f0f0ea; --ink-500: #6b7280; --ink-400: #9ca3af; /* ── Design tokens ────────────────────────────────────── */ --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-sans: 'Raleway', system-ui, -apple-system, Segoe UI, sans-serif; --radius-md: 4px; --radius-sm: 2px; --bs-primary: var(--navy-900); --bs-primary-rgb: 14, 26, 43; --bs-body-bg: var(--paper-50); --bs-body-color: var(--ink-900); --bs-body-font-family: 'Raleway', system-ui, -apple-system, Segoe UI, sans-serif; --bs-body-font-size: 1.0625rem; /* 17px */ --bs-body-line-height: 1.6; --bs-heading-color: var(--ink-900); --bs-link-color: var(--ink-900); --bs-link-hover-color: var(--gold-600); --bs-border-color: var(--rule-200); --bs-border-radius: 2px; --bs-border-radius-sm: 2px; --bs-border-radius-lg: 2px; --bs-border-radius-xl: 2px; --bs-border-radius-xxl: 2px; --bs-dropdown-border-radius: 2px; } /* ── Base resets ─────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } /* ── Typography ──────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6, .serif { font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; font-weight: 600; line-height: 1.1; color: var(--ink-900); } /* ── Eyebrow / label ─────────────────────────────────────────── */ .eyebrow { font-family: 'Raleway', system-ui, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--charcoal-600); } .eyebrow--light { color: var(--gold-300); } /* ── Section vertical rhythm ─────────────────────────────────── */ .py-section { padding-block: clamp(64px, 8vw, 96px); } /* ── Hairline rule ───────────────────────────────────────────── */ .rule { border-top: 1px solid var(--rule-200); } /* ── Hero ────────────────────────────────────────────────────── */ .section-hero { position: relative; min-height: 560px; display: flex; align-items: center; background-color: var(--navy-900); color: var(--paper-0); overflow: hidden; } @media (max-width: 767.98px) { .section-hero { min-height: 420px; } } .section-hero--sm { min-height: 320px; } .section-hero--lg { min-height: 680px; } .section-hero--navy { background-color: var(--navy-900); } /* All interior-page heroes get the shared background image */ .section-hero:not(.section-hero--home) { background-image: url('/img/other-hero-bg.png'); background-size: cover; background-position: center; } .section-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; } .section-hero__overlay { position: absolute; inset: 0; background: rgba(14, 26, 43, 0.75); } .section-hero__overlay--navy { background: rgba(14, 26, 43, 0.72); } .section-hero__overlay--gradient { background: linear-gradient(135deg, rgba(14, 26, 43, 0.75) 0%, rgba(27, 42, 65, 0.4) 100%); } /* Hide overlays on interior-page heroes; keep them on the home hero */ .section-hero:not(.section-hero--home) .section-hero__overlay { display: none; } .section-hero__content { position: relative; z-index: 1; } .hero-headline { color: var(--paper-0); line-height: 1.2; } .hero-body { color: rgba(255, 255, 255, 0.8); max-width: 560px; } /* Attorney hero — portrait lives in hero but doesn't grow it */ .attorney-hero { overflow: visible; background: var(--navy-900); } .attorney-hero .section-hero__overlay { background: rgba(14, 26, 43, 0.82); } .attorney-hero__portrait img { width: 100%; height: 100%; display: block; object-fit: cover; } @media (min-width: 768px) { .attorney-hero__portrait-col { position: relative; align-self: stretch; } .attorney-hero__portrait-col .attorney-hero__portrait { position: absolute; top: -60px; max-width: 85%; z-index: 2; } } @media (max-width: 767.98px) { .attorney-hero__portrait { max-width: 320px; margin: 0 auto; } } /* Breadcrumb on the navy attorney hero */ .attorney-hero__crumb .breadcrumb { --bs-breadcrumb-divider-color: var(--gold-300); --bs-breadcrumb-item-active-color: var(--gold-300); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.05em; margin-bottom: 0; } .attorney-hero__crumb a { color: var(--gold-300); text-decoration: none; } /* Attorney hero text elements */ .attorney-hero__name { font-size: 2.25rem; font-weight: 600; color: var(--paper-0); } .attorney-hero__display-title { color: rgba(255, 255, 255, 0.8); font-size: 1rem; margin-bottom: 0; } .attorney-hero__city { font-size: 0.8125rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gold-300); margin-top: 0.5rem; margin-bottom: 0; } /* ── Attorney bio sidebar + tab content utilities ─────────────── */ .bio-eyebrow { font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--charcoal-300); margin-top: 0; margin-bottom: 0.5rem; font-weight: 400; } .bio-contact { font-size: 0.875rem; line-height: 1.8; } .bio-contact__link { color: var(--ink-900); text-decoration: none; } .bio-contact__meta { color: var(--charcoal-600); text-decoration: none; } .icon-gold { color: var(--gold-600); } .bio-sidebar-item { font-size: 0.875rem; color: var(--charcoal-600); } .bio-ext-link { color: var(--gold-600); font-size: 0.8125rem; margin-left: 0.25rem; } /* bio-richtext kept as alias; prefer .prose for new usage */ .bio-richtext, .prose { line-height: 1.8; color: var(--charcoal-600); } .bio-tab-item { font-size: 0.9375rem; color: var(--charcoal-600); } .bio-item-text { color: var(--ink-900); } .bio-nested { margin: 0.25rem 0 0.5rem 1.25rem; } /* ── Buttons ─────────────────────────────────────────────────── */ .btn-primary { display: inline-block; background-color: var(--ink-900); color: var(--paper-0); border: 1px solid var(--ink-900); border-radius: 2px; padding: 0.6rem 1.5rem; font-family: 'Raleway', sans-serif; font-size: 0.875rem; font-weight: 500; text-decoration: none; transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease; cursor: pointer; } .btn-primary:hover, .btn-primary:focus-visible { background-color: var(--navy-700); border-color: var(--navy-700); color: var(--paper-0); } .btn-outline-ink { display: inline-block; background-color: transparent; color: var(--ink-900); border: 1px solid var(--ink-900); border-radius: 2px; padding: 0.6rem 1.5rem; font-family: 'Raleway', sans-serif; font-size: 0.875rem; font-weight: 500; text-decoration: none; transition: background-color 200ms ease, color 200ms ease; cursor: pointer; } .btn-outline-ink:hover, .btn-outline-ink:focus-visible { background-color: var(--ink-900); color: var(--paper-0); } .btn-secondary { display: inline-block; background-color: var(--charcoal-600); color: var(--paper-0); border: 1px solid var(--charcoal-600); border-radius: 2px; padding: 0.6rem 1.5rem; font-family: 'Raleway', sans-serif; font-size: 0.875rem; font-weight: 500; text-decoration: none; transition: background-color 200ms ease, border-color 200ms ease; cursor: pointer; } .btn-secondary:hover, .btn-secondary:focus-visible { background-color: var(--ink-900); border-color: var(--ink-900); color: var(--paper-0); } .btn-gold { display: inline-block; background-color: var(--gold-600); color: var(--paper-0); border: 1px solid var(--gold-600); border-radius: 2px; padding: 0.6rem 1.5rem; font-family: 'Raleway', sans-serif; font-size: 0.875rem; font-weight: 500; text-decoration: none; transition: background-color 200ms ease, border-color 200ms ease; cursor: pointer; } .btn-gold:hover, .btn-gold:focus-visible { background-color: var(--gold-300); border-color: var(--gold-300); color: var(--ink-900); } .btn-gold-link { display: inline; background: none; border: none; padding: 0; color: var(--gold-300); text-decoration: underline; text-decoration-color: var(--gold-600); text-underline-offset: 3px; font-family: 'Raleway', sans-serif; font-size: 0.9375rem; font-weight: 500; cursor: pointer; transition: text-decoration-color 200ms ease; } .btn-gold-link:hover { text-decoration-color: var(--gold-300); } /* ── Attorney bio tabs ───────────────────────────────────────── */ .attorney-bio-tabs .nav-tabs { border-bottom: 1px solid var(--navy-700); font-size: 0.85rem; } .attorney-bio-tabs .nav-tabs .nav-link { color: var(--charcoal-600, #4a4a52); border: 1px solid transparent; border-bottom: 0; background-color: transparent; font-weight: 500; letter-spacing: 0.02em; margin-bottom: -1px; } .attorney-bio-tabs .nav-tabs .nav-link:hover, .attorney-bio-tabs .nav-tabs .nav-link:focus-visible { color: var(--navy-900); border-color: var(--navy-700) var(--navy-700) transparent; background-color: rgba(14, 26, 43, 0.04); } .attorney-bio-tabs .nav-tabs .nav-link.active { color: var(--paper-0, #fff); background-color: var(--navy-900); border-color: var(--navy-900) var(--navy-900) var(--navy-900); } /* ── Cards ───────────────────────────────────────────────────── */ .card-practice, .card-attorney, .card-article { border: 1px solid var(--rule-200); border-radius: 0; background: var(--paper-0); } .card-practice--featured { border-top: 2px solid var(--gold-600); } /* Practice card body */ .card-practice .card-body { padding: 1.75rem; } .card-practice .card-title { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 600; margin-bottom: 0.5rem; } .card-practice .card-text { color: var(--charcoal-600); font-size: 0.9375rem; line-height: 1.6; } /* Attorney card */ .card-attorney { border: none; background: transparent; display: block; cursor: pointer; color: inherit; } .card-attorney:hover .card-attorney__portrait img { opacity: 0.88; transition: opacity 200ms ease; } .card-attorney:hover .card-attorney__name { color: var(--gold-600); transition: color 200ms ease; } .card-attorney__portrait { aspect-ratio: 4 / 5; overflow: hidden; background: var(--rule-200); } .card-attorney__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; } .card-attorney__portrait--placeholder { display: flex; align-items: center; justify-content: center; color: var(--charcoal-300); font-size: 3rem; } .card-attorney__name { font-family: var(--font-serif); font-size: 1.125rem; font-weight: 600; margin: 0.75rem 0 0.2rem; color: var(--ink-900); } .card-attorney__title { font-size: 0.8125rem; color: var(--charcoal-600); margin-bottom: 0.15rem; } .card-attorney__office { font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--charcoal-300); } /* Article editorial row */ .article-row { display: flex; gap: 1.5rem; padding-block: 1.5rem; border-bottom: 1px solid var(--rule-200); align-items: flex-start; text-decoration: none; color: inherit; } .article-row:last-child { border-bottom: none; } .article-row__date { flex-shrink: 0; width: 96px; padding-top: 0.2rem; } .article-row__body { flex: 1; min-width: 0; } .article-row__headline { font-family: var(--font-serif); font-size: 1.1rem; font-weight: 600; margin-bottom: 0.35rem; color: var(--ink-900); } .article-row__excerpt { font-size: 0.9rem; color: var(--charcoal-600); margin: 0; } .article-row__arrow { flex-shrink: 0; font-size: 1.1rem; color: var(--gold-600); padding-top: 0.2rem; } .article-row:hover .article-row__headline { color: var(--gold-600); } /* Leadership carousel */ .leader-carousel__track { display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .leader-carousel__track::-webkit-scrollbar { display: none; } .leader-carousel__slide { flex: 0 0 calc(25% - 1.125rem); /* 4 visible on desktop */ scroll-snap-align: start; } @media (max-width: 991.98px) { .leader-carousel__slide { flex: 0 0 calc(33.333% - 1rem); /* 3 visible on tablet */ } } @media (max-width: 575.98px) { .leader-carousel__slide { flex: 0 0 82%; /* ~1 + peek on mobile */ } } .leader-carousel__btn { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border: 1px solid var(--rule-200); background: transparent; color: var(--ink-900); cursor: pointer; padding: 0; line-height: 1; transition: background 200ms, color 200ms, border-color 200ms; } .leader-carousel__btn:hover { background: var(--ink-900); color: var(--paper-0); border-color: var(--ink-900); } .leader-carousel__btn:disabled { opacity: 0.3; cursor: default; pointer-events: none; } /* Stats strip */ .stats-strip { background: var(--navy-900); color: var(--paper-0); } .stats-strip__number { font-family: var(--font-serif); font-size: 3rem; font-weight: 600; color: var(--gold-300); line-height: 1; margin-bottom: 0.25rem; } .stats-strip__label { font-size: 0.8125rem; color: var(--charcoal-300); text-transform: uppercase; letter-spacing: 0.08em; } /* CTA strip */ .cta-strip { background: #08080c; color: var(--paper-0); } .cta-strip__heading { font-family: var(--font-serif); font-size: 2rem; font-weight: 400; color: var(--paper-0); margin-bottom: 0.75rem; } .cta-strip__sub { color: var(--charcoal-300); margin-bottom: 1.5rem; font-size: 1.0625rem; } .btn-outline-paper { display: inline-block; background: transparent; color: var(--paper-0); border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 2px; padding: 0.65rem 1.75rem; font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 500; text-decoration: none; transition: border-color 200ms, background 200ms; } .btn-outline-paper:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.7); color: var(--paper-0); } /* ── Navigation (public) ─────────────────────────────────────── */ .nav-public { position: sticky; top: 0; z-index: 1030; background: var(--ink-900); border-bottom: 1px solid rgba(255, 255, 255, 0.08); transition: box-shadow 200ms ease; } .nav-public.is-scrolled { box-shadow: 0 2px 16px rgba(0, 0, 0, 0.4); } /* Navbar brand wordmark */ .nav-public__brand { font-size: 1.25rem; letter-spacing: 0.03em; color: var(--gold-300); text-decoration: none; } .nav-public__brand:hover { color: var(--gold-600); } /* Invert the mobile toggler icon so it's visible on dark nav */ .nav-public .navbar-toggler { filter: invert(1); } /* Desktop nav links */ .nav-public .nav-link { font-size: 0.9rem; font-weight: 500; color: var(--paper-50); } .nav-public .nav-link:hover, .nav-public .nav-link:focus-visible { color: var(--gold-300); } /* Dropdown items */ .nav-public .dropdown-item { font-size: 0.875rem; } /* Action area links (dashboard, client login) */ .nav-public__actions-link { font-size: 0.875rem; font-weight: 500; color: var(--paper-50); text-decoration: none; } .nav-public__actions-link:hover { color: var(--gold-300); } /* Size override for btn-outline-paper in the nav action bar */ .nav-public .btn-outline-paper { font-size: 0.8125rem; padding: 0.4rem 1rem; } /* Offcanvas */ .nav-offcanvas__title { font-size: 1.1rem; } .nav-offcanvas__link { display: block; font-size: 1rem; font-weight: 500; color: var(--ink-900); border-bottom: 1px solid var(--rule-200); text-decoration: none; padding-top: 0.5rem; padding-bottom: 0.5rem; } .nav-offcanvas__link:hover { color: var(--gold-600); } .nav-offcanvas__btn { font-size: 0.9rem; } /* ── Staff/admin sidebar layout ──────────────────────────────── */ .layout-staff { display: flex; min-height: 100vh; } .sidebar { width: 260px; flex-shrink: 0; background: var(--ink-800); color: var(--charcoal-300); display: flex; flex-direction: column; } .topbar { height: 56px; background: var(--paper-0); border-bottom: 1px solid var(--rule-200); display: flex; align-items: center; padding-inline: 1.5rem; } .main-content { flex: 1; min-width: 0; display: flex; flex-direction: column; } /* ── Reveal on scroll ────────────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(56px); will-change: opacity, transform; transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 700ms cubic-bezier(0.22, 1, 0.36, 1); } .reveal.is-visible { opacity: 1; transform: none; } /* ── Footer ──────────────────────────────────────────────────── */ .footer-firm { background-color: var(--ink-900); background-image: linear-gradient(rgba(11, 11, 15, 0.75), rgba(11, 11, 15, 0.75)), url('/img/footer-bg.png'); background-size: cover; background-position: center top; color: var(--charcoal-300); font-family: 'Raleway', sans-serif; font-size: 0.875rem; } .footer-firm a { color: var(--charcoal-300); text-decoration: none; } .footer-firm a:hover { color: var(--paper-0); } /* Footer column headings (The Firm, Practices, etc.) */ .footer__col-heading { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-300); } /* Footer bottom bar text */ .footer__fine-print { font-size: 0.8125rem; color: var(--charcoal-300); } .footer__credit { font-size: 0.75rem; color: var(--charcoal-300); } /* ── Flash messages ──────────────────────────────────────────── */ .flash-success { background-color: #eaf5ee; border-left: 3px solid var(--success); color: var(--success); padding: 0.75rem 1rem; font-family: 'Raleway', sans-serif; font-size: 0.9375rem; } .flash-error { background-color: #fbeae9; border-left: 3px solid var(--danger); color: var(--danger); padding: 0.75rem 1rem; font-family: 'Raleway', sans-serif; font-size: 0.9375rem; } /* ── Form elements ───────────────────────────────────────────── */ .form-label { font-family: 'Raleway', sans-serif; font-size: 0.8125rem; font-weight: 500; color: var(--ink-900); } /* Ensure form controls inherit the global 2px border-radius token */ .form-control, .form-select { border-radius: 2px; } /* ── Utilities ───────────────────────────────────────────────── */ /* Pagination */ .pagination .page-link { border-radius: 2px; } .text-gold { color: var(--gold-600); } .text-muted-firm { color: var(--charcoal-300); } .border-rule { border-color: var(--rule-200) !important; } /* Serif font shorthand */ .serif { font-family: var(--font-serif); } /* Bottom padding matching .py-section */ .pb-section { padding-bottom: 5rem; } /* White/light text on dark backgrounds */ .text-paper { color: var(--paper-0); } /* Section-level heading sizes (utility, not tied to any one page) */ .section-h2 { font-size: 1.875rem; } .section-h3 { font-size: 1.5rem; } /* Rich text / article body content */ .prose { line-height: 1.8; color: var(--charcoal-600); } /* "See all" back / forward text links */ .back-link, .see-all-link { font-size: 0.875rem; font-weight: 500; } /* Result count text (e.g. "Showing 12 of 48 professionals") */ .result-count { font-size: 0.875rem; } /* Filter bar strip (articles index, attorneys index) */ .filter-bar { background: var(--paper-100); border-bottom: 1px solid var(--rule-200); } .filter-label { font-size: 0.75rem; margin-bottom: 0.25rem; } .filter-btn { font-size: 0.8rem; } /* Breadcrumb modifiers */ .breadcrumb--sm { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.05em; } /* Breadcrumb on dark / navy hero backgrounds */ .breadcrumb--light { --bs-breadcrumb-divider-color: var(--gold-400); } .breadcrumb--light .breadcrumb-item a { color: var(--gold-300); text-decoration: none; } .breadcrumb--light .breadcrumb-item a:hover { color: var(--gold-200); } .breadcrumb--light .breadcrumb-item.active { color: var(--gold-300); } /* -- Auth layout ----------------------------------------------------------- */ .auth-body { background: var(--navy-900); min-height: 100vh; display: flex; align-items: center; justify-content: center; } .auth-shell { width: 100%; max-width: 440px; padding: 2rem 1rem; } .auth-brand { text-align: center; margin-bottom: 2rem; } .auth-brand__link { font-family: var(--font-serif); font-size: 1.35rem; color: var(--paper-0); text-decoration: none; letter-spacing: 0.04em; } .auth-card { background: #fff; border: 1px solid var(--rule-200); border-radius: var(--radius-md); padding: 2.25rem 2rem; box-shadow: 0 2px 12px rgba(26, 26, 46, 0.07); } .auth-card__title { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 400; color: var(--ink-900); margin: 0 0 0.25rem; } .auth-card__subtitle { color: var(--ink-500); font-size: 0.9rem; margin: 0 0 1.5rem; } .auth-footer-note { text-align: center; font-size: 0.8rem; color: rgba(255, 255, 255, 0.4); margin-top: 1.5rem; } /* ── Accessibility — focus rings ─────────────────────────────── */ /* Ensure custom anchor-styled buttons get visible focus rings */ .btn-primary:focus-visible, .btn-outline-ink:focus-visible, .btn-outline-paper:focus-visible, .btn-gold-link:focus-visible { outline: 3px solid var(--gold-600); outline-offset: 3px; } /* Skip-to-content link for keyboard users */ .skip-link { position: absolute; top: -100%; left: 1rem; z-index: 2000; background: var(--ink-900); color: var(--paper-0); padding: 0.5rem 1rem; font-family: var(--font-sans); font-size: 0.875rem; border-radius: 0 0 2px 2px; text-decoration: none; transition: top 0s; } .skip-link:focus { top: 0; } /* ── Insight / article page ────────────────────────────────────── */ .insight-header { background: var(--paper-0); border-bottom: 1px solid var(--rule-200); } .insight-byline { font-size: 0.8125rem; color: var(--charcoal-300); } .insight-byline__link { color: var(--charcoal-600); text-decoration: none; } /* Category tag badges */ .tag { display: inline-block; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; color: var(--gold-600); text-decoration: none; border: 1px solid var(--gold-300); padding: 0.2rem 0.6rem; } .tag:hover { color: var(--gold-600); border-color: var(--gold-600); } /* Author bio strip */ .author-strip { background: var(--paper-100); border-top: 1px solid var(--rule-200); border-bottom: 1px solid var(--rule-200); } .author-strip__avatar { width: 56px; height: 56px; background: var(--rule-200); border-radius: 50%; overflow: hidden; flex-shrink: 0; } .author-strip__avatar img { width: 100%; height: 100%; object-fit: cover; } .author-strip__placeholder { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 1.5rem; color: var(--charcoal-300); } .author-strip__name { font-size: 0.9375rem; margin-bottom: 0; } .author-strip__name a { color: var(--ink-900); text-decoration: none; } .author-strip__role { font-size: 0.8rem; color: var(--charcoal-300); margin-bottom: 0; } /* Article row date / read time */ .article-row__date-text { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--charcoal-300); } .article-row__read-time { font-size: 0.7rem; color: var(--charcoal-300); } /* ── Practice card ─────────────────────────────────────────────── */ .card-practice .stretched-link { color: inherit; } .card-practice__learn-more { font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.04em; } /* ── Practice area pages ───────────────────────────────────────── */ .sub-practice-link { color: var(--ink-900); font-size: 0.9375rem; padding: 0.5rem 0; border-bottom: 1px solid var(--rule-200); text-decoration: none; } .sub-practice-link:hover { color: var(--gold-600); } .matter-card { padding: 1.5rem; border: 1px solid var(--rule-200); background: var(--paper-0); } .matter-card__label { display: block; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--charcoal-300); } .matter-card__headline { font-size: 1rem; } .matter-card__summary { font-size: 0.875rem; color: var(--charcoal-600); margin: 0; } /* Practices index: child practice list */ .sub-practices-list { border-left: 2px solid var(--rule-200); padding-left: 1rem; margin-top: 0.75rem; } .sub-practices-list a { font-size: 0.875rem; color: var(--charcoal-600); text-decoration: none; } .sub-practices-list a:hover { color: var(--gold-600); } .sub-practices-list .bi-chevron-right { font-size: 0.7rem; color: var(--gold-600); } /* ── Office page ───────────────────────────────────────────────── */ .address-block { font-size: 0.9375rem; color: var(--ink-500); line-height: 1.7; } .map-placeholder { background: var(--rule-200); height: 320px; display: flex; align-items: center; justify-content: center; } .map-placeholder__icon { color: var(--charcoal-300); font-size: 2rem; } /* Generic contact tel/mailto link */ .contact-link { color: var(--ink-900); text-decoration: none; } /* ── Careers page ──────────────────────────────────────────────── */ .job-group-heading { font-size: 1.4rem; color: var(--ink-900); } .job-title { font-size: 1.125rem; color: var(--ink-900); text-decoration: none; } .job-title:hover { color: var(--gold-600); } .job-meta { font-size: 0.8125rem; color: var(--charcoal-300); } .job-meta span + span::before { content: '\2022'; margin: 0 0.5rem; font-size: 0.75rem; vertical-align: middle; color: var(--charcoal-300); } .job-meta-hero { gap: 0; } .job-meta-hero span + span::before { content: '\2022'; margin: 0 0.5rem; font-size: 0.75rem; vertical-align: middle; opacity: 0.7; } /* ── Admin UI ──────────────────────────────────────────────────── */ .row-clickable { cursor: pointer; } .topbar__toggle-icon { font-size: 1.4rem; } .topbar__chevron { font-size: 0.75rem; } /* CMS table list items */ .cms-list-link { font-size: 0.875rem; color: var(--ink-900); } .cms-list-link--sm { font-size: 0.8125rem; color: var(--ink-800); } .cms-list-meta { font-size: 0.75rem; } .badge.badge--xs { font-size: 0.65rem; } /* Sub-practice indented row */ .tr-child { background: var(--paper-50); } /* Nav tabs small */ .nav-tabs--sm { font-size: 0.85rem; } /* Admin/staff shared */ .admin-table { font-size: 0.875rem; } .admin-list-item { font-size: 0.8125rem; } .admin-meta { font-size: 0.75rem; } .admin-code { font-size: 0.8rem; } .code-muted { font-size: 0.8rem; color: var(--ink-500); } .audit-pre { font-size: 0.7rem; margin: 0; white-space: pre-wrap; } .cover-letter-pre { white-space: pre-wrap; font-family: inherit; font-size: 0.875rem; } .staff-container { max-width: 900px; } .staff-container--lg { max-width: 860px; } .note-body { font-size: 0.875rem; white-space: pre-wrap; } .error-heading { font-size: 2.5rem; font-weight: 400; } .error-stack { font-size: 0.75rem; overflow: auto; margin: 0.75rem 0 0; white-space: pre-wrap; word-break: break-word; } .media-drop-icon { font-size: 2rem; color: var(--charcoal-600); display: block; margin-bottom: 0.5rem; } .media-drop-hint { font-size: 0.9rem; color: var(--charcoal-600); } .media-drop-filename { font-size: 0.8125rem; color: var(--charcoal-600); } .media-file-icon { font-size: 2rem; color: var(--ink-400); } .media-filename { font-size: 0.75rem; } .media-filesize { font-size: 0.7rem; } .media-delete-btn { font-size: 0.7rem; } .pick-asset { cursor: pointer; } .attorney-placeholder-icon { font-size: 4rem; color: var(--charcoal-300); } /* ── CMS attorney profile form field widths ────────────────────── */ .profile-field--type { width: 160px; } .profile-field--parent { width: 160px; } .profile-field--text { flex: 1 1 240px; } .profile-field--link { width: 200px; } /* ── Print stylesheet ─────────────────────────────────────────── */ @media print { /* Hide interactive chrome */ .app-sidebar, .sidebar, .topbar, .navbar, .nav-public, footer, .footer-firm, .btn, .btn-primary, .btn-outline-ink, .alert, .flash-success, .flash-error, .no-print { display: none !important; } /* Reset body for print */ body { font-size: 11pt; background: #fff !important; color: #000 !important; font-family: Georgia, 'Times New Roman', serif; } /* Cards: remove shadows for print */ .card, .body-card { border: 1px solid #ccc !important; box-shadow: none !important; break-inside: avoid; } /* Tables */ table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid #ccc; padding: 4pt 6pt; font-size: 9pt; } /* Suppress URL printing for links */ a[href]::after { content: none !important; } /* Ensure main content spans full width */ .main-content, .layout-staff { display: block !important; } /* Page breaks */ h1, h2, h3 { break-after: avoid; } }