/** * Advokat Burgas component layer. * * @import '@inkblot-studio/advokatburgas-ds/fonts'; (@font-face) * @import '@inkblot-studio/advokatburgas-ds/css'; (token variables) * @import '@inkblot-studio/advokatburgas-ds/components'; (this file) * * Everything is scoped under .advb-root so the layer cannot leak into the * WordPress admin. Put the class on . * * Components read the short --a-* alias layer below, never raw tokens. That * indirection is what makes the dark register work: a section marked * [data-surface="ink"] rebinds the aliases and every component inside it * re-colours without one component rule being duplicated. * * There is no theme switch. [data-surface="ink"] is a per-section treatment — * the footer, a statement band — applied to a wrapper, never to . * * Motion is confined to colour, border and opacity. Nothing here slides, * scales, or animates on scroll. * * Contents * 1 Aliases 8 Buttons 15 Tables * 2 Reset 9 Hero 16 Forms * 3 Base 10 Cards 17 Notices * 4 Typography 11 Panels 18 Footer * 5 Links 12 Article 19 Contact bar * 6 Layout 13 Accordion 20 Print * 7 Masthead + nav 14 Stats 21 Reduced motion */ /* ========================================================== 1 aliases */ .advb-root { --a-bg: var(--advb-semantic-color-surface-page); --a-bg-subtle: var(--advb-semantic-color-surface-subtle); --a-bg-sunken: var(--advb-semantic-color-surface-sunken); --a-bg-panel: var(--advb-semantic-color-surface-panel); --a-bg-accent: var(--advb-semantic-color-surface-accent-subtle); --a-text: var(--advb-semantic-color-text-default); --a-text-muted: var(--advb-semantic-color-text-muted); --a-heading: var(--advb-semantic-color-text-heading); --a-link: var(--advb-semantic-color-action-link); --a-link-hover: var(--advb-semantic-color-action-link-hover); --a-link-visited: var(--advb-semantic-color-action-link-visited); --a-cta: var(--advb-semantic-color-action-primary); --a-cta-hover: var(--advb-semantic-color-action-primary-hover); --a-cta-active: var(--advb-semantic-color-action-primary-active); --a-cta-text: var(--advb-semantic-color-action-primary-text); --a-border: var(--advb-semantic-color-border-default); --a-border-subtle: var(--advb-semantic-color-border-subtle); --a-border-strong: var(--advb-semantic-color-border-strong); --a-border-control: var(--advb-semantic-color-border-control); --a-border-control-hover: var(--advb-semantic-color-border-control-hover); --a-focus: var(--advb-semantic-color-border-focus); --a-focus-halo: var(--advb-semantic-elevation-focus-halo); --a-seal: var(--advb-semantic-color-accent-seal); } [data-surface='ink'] { --a-bg: var(--advb-ink-color-surface-page); --a-bg-subtle: var(--advb-ink-color-surface-subtle); --a-bg-sunken: var(--advb-ink-color-surface-sunken); --a-bg-panel: var(--advb-ink-color-surface-panel); --a-bg-accent: var(--advb-ink-color-surface-accent-subtle); --a-text: var(--advb-ink-color-text-default); --a-text-muted: var(--advb-ink-color-text-muted); --a-heading: var(--advb-ink-color-text-heading); --a-link: var(--advb-ink-color-action-link); --a-link-hover: var(--advb-ink-color-action-link-hover); --a-link-visited: var(--advb-ink-color-action-link); --a-cta: var(--advb-ink-color-action-primary); --a-cta-hover: var(--advb-ink-color-action-primary-hover); --a-cta-active: var(--advb-ink-color-action-primary); --a-cta-text: var(--advb-ink-color-action-primary-text); --a-border: var(--advb-ink-color-border-default); --a-border-subtle: var(--advb-ink-color-border-default); --a-border-strong: var(--advb-ink-color-border-strong); --a-border-control: var(--advb-ink-color-border-strong); --a-border-control-hover: var(--advb-ink-color-border-seal); --a-focus: var(--advb-ink-color-border-focus); --a-focus-halo: var(--advb-semantic-elevation-focus-halo-ink); --a-seal: var(--advb-ink-color-text-seal); background-color: var(--a-bg); color: var(--a-text); } /* ============================================================ 2 reset */ /* Without border-box, .advb-container's padding adds to its 100% width and every full-width section overflows the viewport horizontally. */ .advb-root *, .advb-root *::before, .advb-root *::after { box-sizing: border-box; } .advb-root img, .advb-root picture, .advb-root video, .advb-root svg { max-width: 100%; height: auto; } /* ============================================================= 3 base */ .advb-root { background-color: var(--a-bg); color: var(--a-text); font-family: var(--advb-semantic-typography-body-default-font-family); font-size: var(--advb-semantic-typography-body-default-font-size); font-weight: var(--advb-semantic-typography-body-default-font-weight); line-height: var(--advb-semantic-typography-body-default-line-height); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* One focus treatment for everything: a 2px ring plus a soft halo. A single hairline outline is hard to spot for the readers this site is built for. */ .advb-root :focus-visible { outline: var(--advb-border-width-medium) solid var(--a-focus); outline-offset: 2px; box-shadow: var(--a-focus-halo); transition: var(--advb-semantic-motion-focus); } .advb-skip-link { position: absolute; left: var(--advb-spacing-5); top: var(--advb-spacing-5); z-index: var(--advb-z-index-skip-link); padding: var(--advb-spacing-4) var(--advb-spacing-6); background-color: var(--advb-semantic-color-surface-page); color: var(--advb-semantic-color-text-heading); box-shadow: var(--advb-semantic-elevation-drawer); text-decoration: none; transform: translateY(-250%); } .advb-skip-link:focus { transform: translateY(0); } /* ======================================================= 4 typography */ /* Element defaults are wrapped in :where() so they carry zero specificity. Written as `.advb-root h1` they would be (0,1,1) and out-rank every component class — .advb-hero__title is (0,1,0), so the hero headline would inherit the dark heading colour and render dark-on-dark over its own scrim. */ .advb-h1, :where(.advb-root) h1 { font-family: var(--advb-semantic-typography-heading-1-font-family); font-size: var(--advb-semantic-typography-heading-1-font-size); font-weight: var(--advb-semantic-typography-heading-1-font-weight); line-height: var(--advb-semantic-typography-heading-1-line-height); letter-spacing: var(--advb-semantic-typography-heading-1-letter-spacing); color: var(--a-heading); margin: 0 0 var(--advb-spacing-6); text-wrap: balance; } .advb-h2, :where(.advb-root) h2 { font-family: var(--advb-semantic-typography-heading-2-font-family); font-size: var(--advb-semantic-typography-heading-2-font-size); font-weight: var(--advb-semantic-typography-heading-2-font-weight); line-height: var(--advb-semantic-typography-heading-2-line-height); letter-spacing: var(--advb-semantic-typography-heading-2-letter-spacing); color: var(--a-heading); margin: 0 0 var(--advb-spacing-5); text-wrap: balance; } .advb-h3, :where(.advb-root) h3 { font-family: var(--advb-semantic-typography-heading-3-font-family); font-size: var(--advb-semantic-typography-heading-3-font-size); font-weight: var(--advb-semantic-typography-heading-3-font-weight); line-height: var(--advb-semantic-typography-heading-3-line-height); color: var(--a-heading); margin: 0 0 var(--advb-spacing-4); text-wrap: balance; } .advb-h4, :where(.advb-root) h4 { font-family: var(--advb-semantic-typography-heading-4-font-family); font-size: var(--advb-semantic-typography-heading-4-font-size); font-weight: var(--advb-semantic-typography-heading-4-font-weight); line-height: var(--advb-semantic-typography-heading-4-line-height); color: var(--a-heading); margin: 0 0 var(--advb-spacing-3); } .advb-h5, :where(.advb-root) h5 { font-family: var(--advb-semantic-typography-heading-5-font-family); font-size: var(--advb-semantic-typography-heading-5-font-size); font-weight: var(--advb-semantic-typography-heading-5-font-weight); line-height: var(--advb-semantic-typography-heading-5-line-height); color: var(--a-heading); margin: 0 0 var(--advb-spacing-3); } :where(.advb-root) p { margin: 0 0 var(--advb-spacing-6); } :where(.advb-root) p:last-child { margin-bottom: 0; } /* The display register — the hero headline and the full-width statement. */ .advb-display { font-family: var(--advb-semantic-typography-display-section-font-family); font-size: var(--advb-semantic-typography-display-section-font-size); font-weight: var(--advb-semantic-typography-display-section-font-weight); line-height: var(--advb-semantic-typography-display-section-line-height); letter-spacing: var(--advb-semantic-typography-display-section-letter-spacing); color: var(--a-heading); margin: 0; text-wrap: balance; } /* The eyebrow — uppercase kicker over a short brass rule, one per section. .advb-eyebrow is the Cyrillic-safe default (Roboto). Use --latin only for Latin or transliterated labels: Abel has no Cyrillic and falls back mid-word. */ .advb-eyebrow { display: block; font-family: var(--advb-semantic-typography-display-eyebrow-cyrillic-font-family); font-size: var(--advb-semantic-typography-display-eyebrow-cyrillic-font-size); font-weight: var(--advb-semantic-typography-display-eyebrow-cyrillic-font-weight); line-height: var(--advb-semantic-typography-display-eyebrow-cyrillic-line-height); letter-spacing: var(--advb-semantic-typography-display-eyebrow-cyrillic-letter-spacing); text-transform: var(--advb-semantic-typography-display-eyebrow-cyrillic-text-transform); color: var(--a-seal); margin: 0 0 var(--advb-spacing-5); } .advb-eyebrow--latin { font-family: var(--advb-semantic-typography-display-eyebrow-font-family); } /* The rule is a pseudo-element so the eyebrow stays one element in markup. */ .advb-eyebrow::after { content: ''; display: block; width: var(--advb-size-rule-eyebrow); height: var(--advb-border-width-rule); margin-top: var(--advb-spacing-3); background-color: var(--a-seal); } .advb-eyebrow--bare::after { display: none; } .advb-lede { font-family: var(--advb-semantic-typography-body-lede-font-family); font-size: var(--advb-semantic-typography-body-lede-font-size); line-height: var(--advb-semantic-typography-body-lede-line-height); color: var(--a-text-muted); max-width: var(--advb-typography-measure-narrow); margin: 0 0 var(--advb-spacing-8); } .advb-meta { font-family: var(--advb-semantic-typography-body-meta-font-family); font-size: var(--advb-semantic-typography-body-meta-font-size); line-height: var(--advb-semantic-typography-body-meta-line-height); color: var(--a-text-muted); margin: 0; } .advb-quote { font-family: var(--advb-semantic-typography-quote-font-family); font-size: var(--advb-semantic-typography-quote-font-size); font-weight: var(--advb-semantic-typography-quote-font-weight); line-height: var(--advb-semantic-typography-quote-line-height); color: var(--a-heading); border-left: var(--advb-border-width-rule) solid var(--a-seal); padding-left: var(--advb-spacing-6); margin: var(--advb-spacing-12) 0; max-width: var(--advb-typography-measure-narrow); } .advb-quote cite { display: block; margin-top: var(--advb-spacing-4); font-family: var(--advb-typography-font-family-sans); font-size: var(--advb-typography-font-size-base); font-style: normal; color: var(--a-text-muted); } /* ============================================================ 5 links */ :where(.advb-root) a { color: var(--a-link); text-decoration: underline; text-underline-offset: var(--advb-typography-underline-offset-default); text-decoration-thickness: 1px; transition: var(--advb-semantic-motion-interactive); } :where(.advb-root) a:visited { color: var(--a-link-visited); } :where(.advb-root) a:hover { color: var(--a-link-hover); text-decoration-thickness: 2px; } /* Colour is never the only signal — the underline is always present, so a link survives greyscale, colour-blindness and print. */ /* =========================================================== 6 layout */ .advb-container { width: 100%; max-width: var(--advb-semantic-layout-container); margin-inline: auto; padding-inline: var(--advb-semantic-layout-gutter); } .advb-container--content { max-width: var(--advb-semantic-layout-content); } .advb-container--measure { max-width: var(--advb-semantic-layout-measure); } .advb-container--wide { max-width: var(--advb-semantic-layout-wide); } /* Fluid section rhythm — 64px of air on a phone, 128px on a desktop, with no media query. Lifted from Cooley, the one firm in the reference set that drives its whole vertical scale this way. */ .advb-section { padding-block: var(--advb-semantic-layout-section-y); } .advb-section--tight { padding-block: var(--advb-semantic-layout-section-y-tight); } .advb-section--subtle { background-color: var(--a-bg-subtle); } .advb-section--panel { background-color: var(--a-bg-panel); } /* Vertical rhythm without margins on children. */ .advb-stack > * + * { margin-top: var(--advb-semantic-layout-stack); } .advb-grid { display: grid; gap: var(--advb-semantic-layout-grid-gap); grid-template-columns: 1fr; } @media (min-width: 768px) { .advb-grid--2, .advb-grid--3, .advb-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1025px) { .advb-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .advb-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* A section header — eyebrow, title, lede — used above every content block. */ .advb-section-head { max-width: var(--advb-typography-measure-narrow); margin-bottom: var(--advb-semantic-layout-stack); } /* ==================================================== 7 masthead + nav */ .advb-masthead { position: sticky; top: 0; z-index: var(--advb-z-index-sticky); background-color: var(--advb-semantic-color-surface-masthead); border-bottom: var(--advb-border-width-hairline) solid var(--advb-semantic-color-border-default); } .advb-masthead[data-scrolled='true'] { box-shadow: var(--advb-semantic-elevation-sticky); } .advb-masthead__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--advb-spacing-8); min-height: var(--advb-size-control-lg); padding-block: var(--advb-spacing-4); } .advb-masthead__logo { display: block; height: var(--advb-size-logo-header-compact); width: auto; } @media (min-width: 1025px) { .advb-masthead__logo { height: var(--advb-size-logo-header); } } /* Wraps rather than overflowing. Bulgarian navigation labels are long, and a five-item menu on a narrow desktop would otherwise push the whole page wide. */ .advb-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--advb-spacing-8); list-style: none; margin: 0; padding: 0; } .advb-nav__link { display: inline-flex; align-items: center; min-height: var(--advb-semantic-layout-touch-target); font-family: var(--advb-semantic-typography-nav-primary-font-family); font-size: var(--advb-semantic-typography-nav-primary-font-size); font-weight: var(--advb-semantic-typography-nav-primary-font-weight); letter-spacing: var(--advb-semantic-typography-nav-primary-letter-spacing); text-transform: var(--advb-semantic-typography-nav-primary-text-transform); color: var(--a-heading); text-decoration: none; border-bottom: var(--advb-border-width-medium) solid transparent; transition: var(--advb-semantic-motion-interactive); } .advb-nav__link:hover, .advb-nav__link[aria-current='page'] { color: var(--advb-semantic-color-action-link); border-bottom-color: var(--advb-semantic-color-border-accent); } .advb-nav__submenu { min-width: 16rem; padding: var(--advb-spacing-2); background-color: var(--advb-semantic-color-surface-page); border: var(--advb-border-width-hairline) solid var(--advb-semantic-color-border-default); box-shadow: var(--advb-semantic-elevation-dropdown); list-style: none; margin: 0; } .advb-nav__submenu a { display: flex; align-items: center; min-height: var(--advb-semantic-layout-touch-target); padding: var(--advb-spacing-3) var(--advb-spacing-4); color: var(--advb-semantic-color-text-heading); text-decoration: none; } .advb-nav__submenu a:hover { background-color: var(--advb-semantic-color-surface-sunken); color: var(--advb-semantic-color-action-link); } /* The mobile toggle is the one place a pill radius is permitted. */ .advb-nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: var(--advb-semantic-layout-touch-target); height: var(--advb-semantic-layout-touch-target); background-color: transparent; border: var(--advb-border-width-hairline) solid var(--advb-semantic-color-border-strong); border-radius: var(--advb-semantic-radius-pill); color: var(--advb-semantic-color-text-heading); cursor: pointer; } @media (min-width: 1025px) { .advb-nav-toggle { display: none; } } .advb-drawer { position: fixed; inset: 0 0 0 auto; width: min(22rem, 88vw); z-index: var(--advb-z-index-drawer); padding: var(--advb-spacing-8); background-color: var(--advb-semantic-color-surface-page); box-shadow: var(--advb-semantic-elevation-drawer); transform: translateX(100%); transition: var(--advb-semantic-motion-drawer); overflow-y: auto; } .advb-drawer[data-open='true'] { transform: translateX(0); } .advb-drawer__backdrop { position: fixed; inset: 0; z-index: var(--advb-z-index-overlay); background-color: var(--advb-semantic-color-overlay-backdrop); } /* Breadcrumb — news and practice pages sit two levels deep. */ .advb-breadcrumb { display: flex; flex-wrap: wrap; gap: var(--advb-spacing-2); align-items: center; list-style: none; margin: 0 0 var(--advb-spacing-6); padding: 0; font-family: var(--advb-semantic-typography-nav-breadcrumb-font-family); font-size: var(--advb-semantic-typography-nav-breadcrumb-font-size); color: var(--a-text-muted); } /* A trail, not prose — the "/" separators already mark each item as a distinct step, so an underline on top of that is redundant. */ .advb-breadcrumb a { text-decoration: none; } .advb-breadcrumb a:hover { text-decoration: underline; } .advb-breadcrumb li + li::before { content: '/'; margin-right: var(--advb-spacing-2); color: var(--a-border-strong); } /* ========================================================== 8 buttons */ .advb-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--advb-spacing-3); min-height: var(--advb-semantic-layout-control-height); padding: var(--advb-spacing-4) var(--advb-spacing-10); font-family: var(--advb-semantic-typography-button-font-family); font-size: var(--advb-semantic-typography-button-font-size); font-weight: var(--advb-semantic-typography-button-font-weight); line-height: var(--advb-semantic-typography-button-line-height); letter-spacing: var(--advb-semantic-typography-button-letter-spacing); text-transform: var(--advb-semantic-typography-button-text-transform); border: var(--advb-border-width-hairline) solid transparent; border-radius: var(--advb-semantic-radius-control); text-decoration: none; cursor: pointer; transition: var(--advb-semantic-motion-interactive); } .advb-btn--primary { background-color: var(--a-cta); color: var(--a-cta-text); } .advb-btn--primary:hover { background-color: var(--a-cta-hover); color: var(--a-cta-text); } .advb-btn--primary:active { background-color: var(--a-cta-active); } /* Secondary is outlined, not filled. Latham, Cravath and Cooley all use an outlined secondary with generous horizontal padding. */ .advb-btn--secondary { background-color: transparent; color: var(--advb-semantic-color-action-secondary-text); border-color: var(--a-border-strong); } .advb-btn--secondary:hover { background-color: var(--advb-semantic-color-action-secondary-hover); border-color: var(--advb-semantic-color-border-control); color: var(--advb-semantic-color-action-secondary-text); } /* Ghost — a text button with a rule, for tertiary actions in dense layouts. */ .advb-btn--ghost { background-color: transparent; color: var(--a-link); padding-inline: 0; border-bottom: var(--advb-border-width-medium) solid var(--advb-semantic-color-border-accent); min-height: auto; padding-block: var(--advb-spacing-2); } .advb-btn--ghost:hover { color: var(--a-link-hover); background-color: transparent; } /* The prestige button — outlined brass, dark bands only. */ [data-surface='ink'] .advb-btn--outline { background-color: transparent; color: var(--advb-ink-color-action-outline); border-color: var(--advb-ink-color-action-outline); } [data-surface='ink'] .advb-btn--outline:hover { background-color: var(--advb-ink-color-action-outline); color: var(--advb-ink-color-surface-page); } .advb-btn--lg { min-height: var(--advb-semantic-layout-control-height-lg); padding-inline: var(--advb-spacing-12); } .advb-btn--sm { min-height: var(--advb-size-control-sm); padding: var(--advb-spacing-3) var(--advb-spacing-6); font-size: var(--advb-typography-font-size-sm); } .advb-btn--block { display: flex; width: 100%; } .advb-btn[disabled], .advb-btn[aria-disabled='true'] { background-color: var(--advb-semantic-color-action-disabled); color: var(--advb-semantic-color-action-disabled-text); border-color: transparent; cursor: not-allowed; pointer-events: none; } /* A row of actions that stacks on a phone rather than shrinking. */ .advb-btn-row { display: flex; flex-wrap: wrap; gap: var(--advb-spacing-4); } /* ============================================================= 9 hero */ .advb-hero { position: relative; display: grid; align-items: end; min-height: 60vh; background-color: var(--advb-semantic-color-surface-hero); background-size: cover; background-position: center; isolation: isolate; } /* The scrim is part of the component, not something an author has to remember. Text is never placed on a bare photograph. */ .advb-hero::before { content: ''; position: absolute; inset: 0; background-color: var(--advb-semantic-color-overlay-hero); z-index: var(--advb-z-index-base); } .advb-hero--warm::before { background-color: var(--advb-semantic-color-overlay-hero-warm); } .advb-hero--compact { min-height: auto; } .advb-hero__inner { position: relative; z-index: var(--advb-z-index-raised); padding-block: var(--advb-semantic-layout-hero-y); } .advb-hero__title { font-family: var(--advb-semantic-typography-display-hero-font-family); font-size: var(--advb-semantic-typography-display-hero-font-size); font-weight: var(--advb-semantic-typography-display-hero-font-weight); line-height: var(--advb-semantic-typography-display-hero-line-height); letter-spacing: var(--advb-semantic-typography-display-hero-letter-spacing); color: var(--advb-semantic-color-text-on-image); max-width: 18ch; margin: 0 0 var(--advb-spacing-6); text-wrap: balance; } .advb-hero__desc { color: var(--advb-semantic-color-text-on-image-muted); font-size: var(--advb-semantic-typography-body-lede-font-size); line-height: var(--advb-semantic-typography-body-lede-line-height); max-width: var(--advb-typography-measure-narrow); margin: 0; } .advb-hero .advb-eyebrow { color: var(--advb-semantic-color-accent-seal-on-dark); } .advb-hero .advb-eyebrow::after { background-color: var(--advb-semantic-color-accent-seal-on-dark); } /* =========================================================== 10 cards */ .advb-card { display: flex; flex-direction: column; gap: var(--advb-spacing-3); padding: var(--advb-spacing-8); background-color: var(--a-bg); border: var(--advb-border-width-hairline) solid var(--a-border); border-radius: var(--advb-semantic-radius-surface); box-shadow: var(--advb-semantic-elevation-flat); transition: var(--advb-semantic-motion-interactive); } .advb-card:hover { border-color: var(--a-border-strong); box-shadow: var(--advb-semantic-elevation-card-hover); } .advb-card__title { font-family: var(--advb-semantic-typography-heading-4-font-family); font-size: var(--advb-semantic-typography-heading-4-font-size); font-weight: var(--advb-semantic-typography-heading-4-font-weight); line-height: var(--advb-semantic-typography-heading-4-line-height); color: var(--a-heading); margin: 0; } /* The title is the link, not the whole card. A card-wide link destroys text selection and gives a screen reader one enormous link name. */ .advb-card__title a { color: inherit; text-decoration: none; } .advb-card__title a:hover { color: var(--a-link); text-decoration: underline; text-underline-offset: var(--advb-typography-underline-offset-default); } .advb-card__body { color: var(--a-text-muted); margin: 0; } .advb-card__media { aspect-ratio: var(--advb-grid-aspect-card); object-fit: cover; width: 100%; border-radius: var(--advb-semantic-radius-media); margin-bottom: var(--advb-spacing-2); } .advb-card__foot { margin-top: auto; padding-top: var(--advb-spacing-4); } /* A card with no chrome — used where a grid of practice areas would otherwise look like a form. Cravath and Latham both list practices this way. */ .advb-card--bare { padding: var(--advb-spacing-6) 0; border: 0; border-top: var(--advb-border-width-hairline) solid var(--a-border); } .advb-card--bare:hover { box-shadow: none; border-color: var(--a-border-strong); } /* Attorney card */ .advb-card__portrait { aspect-ratio: var(--advb-grid-aspect-portrait); object-fit: cover; width: 100%; margin-bottom: var(--advb-spacing-4); } .advb-card__role { font-size: var(--advb-typography-font-size-base); color: var(--a-text-muted); margin: 0; } /* ========================================================== 11 panels */ .advb-panel { background-color: var(--a-bg-panel); color: var(--advb-semantic-color-text-on-panel); padding: var(--advb-spacing-8); border-radius: var(--advb-semantic-radius-surface); } .advb-panel--split { display: grid; gap: var(--advb-spacing-8); grid-template-columns: 1fr; } @media (min-width: 768px) { .advb-panel--split { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); align-items: start; } } /* A callout — consultation prompts, fee notes. */ .advb-callout { padding: var(--advb-spacing-6); background-color: var(--a-bg-accent); border-left: var(--advb-border-width-rule) solid var(--advb-semantic-color-border-accent); } .advb-callout > :last-child { margin-bottom: 0; } /* ========================================================= 12 article */ .advb-article { max-width: var(--advb-semantic-layout-measure); font-size: var(--advb-semantic-typography-body-default-font-size); line-height: var(--advb-semantic-typography-body-default-line-height); } .advb-article > * + * { margin-top: var(--advb-spacing-6); } .advb-article h2 { margin-top: var(--advb-spacing-14); } .advb-article h3 { margin-top: var(--advb-spacing-10); } .advb-article ul, .advb-article ol { padding-left: var(--advb-spacing-6); } .advb-article li + li { margin-top: var(--advb-spacing-3); } /* Media, tables and pull-outs may break the measure. Nothing else. */ .advb-article > figure, .advb-article > table, .advb-article > .advb-panel, .advb-article > .advb-table-wrap { max-width: var(--advb-semantic-layout-content); width: 100%; } .advb-article figcaption { margin-top: var(--advb-spacing-3); font-size: var(--advb-typography-font-size-base); color: var(--a-text-muted); } /* ======================================================= 13 accordion */ /* FAQ blocks are standard on legal sites. Built on

so it works with no JavaScript and is keyboard-operable for free. */ .advb-accordion { border-top: var(--advb-border-width-hairline) solid var(--a-border); } .advb-accordion__item { border-bottom: var(--advb-border-width-hairline) solid var(--a-border); } .advb-accordion__summary { display: flex; align-items: center; justify-content: space-between; gap: var(--advb-spacing-4); min-height: var(--advb-semantic-layout-touch-target); padding: var(--advb-spacing-5) 0; font-family: var(--advb-semantic-typography-heading-4-font-family); font-size: var(--advb-semantic-typography-heading-5-font-size); font-weight: var(--advb-semantic-typography-heading-4-font-weight); color: var(--a-heading); cursor: pointer; list-style: none; transition: var(--advb-semantic-motion-interactive); } .advb-accordion__summary::-webkit-details-marker { display: none; } .advb-accordion__summary:hover { color: var(--a-link); } .advb-accordion__summary::after { content: '+'; font-family: var(--advb-typography-font-family-sans); font-size: var(--advb-typography-font-size-xl); line-height: 1; color: var(--a-seal); } .advb-accordion__item[open] .advb-accordion__summary::after { content: '−'; } .advb-accordion__body { padding-bottom: var(--advb-spacing-6); max-width: var(--advb-typography-measure-default); } /* =========================================================== 14 stats */ /* Figure blocks — "practice since 1998", "two offices". Skadden and Latham both anchor a page with a row of these. */ .advb-stat__value { display: block; font-family: var(--advb-typography-font-family-serif); font-size: var(--advb-typography-font-size-5xl); font-weight: var(--advb-typography-font-weight-regular); line-height: var(--advb-typography-line-height-display); letter-spacing: var(--advb-typography-letter-spacing-tight); color: var(--a-seal); } .advb-stat__label { display: block; margin-top: var(--advb-spacing-3); font-size: var(--advb-typography-font-size-base); color: var(--a-text-muted); } /* ========================================================== 15 tables */ /* Tables scroll inside their own container. The page body never scrolls sideways. */ .advb-table-wrap { overflow-x: auto; } .advb-table { width: 100%; border-collapse: collapse; font-size: var(--advb-typography-font-size-base); } .advb-table th, .advb-table td { padding: var(--advb-spacing-4); text-align: start; border-bottom: var(--advb-border-width-hairline) solid var(--a-border); } .advb-table th { background-color: var(--a-bg-sunken); color: var(--a-heading); font-weight: var(--advb-typography-font-weight-medium); } .advb-table caption { caption-side: top; text-align: start; padding-bottom: var(--advb-spacing-4); color: var(--a-text-muted); font-size: var(--advb-typography-font-size-base); } /* =========================================================== 16 forms */ .advb-field { display: flex; flex-direction: column; gap: var(--advb-spacing-2); margin-bottom: var(--advb-spacing-6); } .advb-label { font-family: var(--advb-semantic-typography-label-font-family); font-size: var(--advb-semantic-typography-label-font-size); font-weight: var(--advb-semantic-typography-label-font-weight); line-height: var(--advb-semantic-typography-label-line-height); color: var(--a-heading); } .advb-label__optional { color: var(--a-text-muted); font-weight: var(--advb-typography-font-weight-regular); } .advb-input, .advb-textarea, .advb-select { width: 100%; min-height: var(--advb-semantic-layout-control-height); padding: var(--advb-spacing-3) var(--advb-spacing-4); font-family: var(--advb-typography-font-family-sans); font-size: var(--advb-typography-font-size-md); line-height: var(--advb-typography-line-height-normal); color: var(--a-text); background-color: var(--a-bg); border: var(--advb-border-width-hairline) solid var(--a-border-control); border-radius: var(--advb-semantic-radius-control); transition: var(--advb-semantic-motion-interactive); } .advb-textarea { min-height: 9rem; resize: vertical; } .advb-input::placeholder, .advb-textarea::placeholder { color: var(--advb-semantic-color-text-placeholder); } .advb-input:hover, .advb-textarea:hover, .advb-select:hover { border-color: var(--a-border-control-hover); } .advb-input[aria-invalid='true'], .advb-textarea[aria-invalid='true'], .advb-select[aria-invalid='true'] { border-color: var(--advb-semantic-color-feedback-error); border-width: var(--advb-border-width-medium); } .advb-field__hint { font-size: var(--advb-typography-font-size-base); color: var(--a-text-muted); } /* The error is text as well as colour, and it carries an icon glyph so it survives greyscale. */ .advb-field__error { font-size: var(--advb-typography-font-size-base); font-weight: var(--advb-typography-font-weight-medium); color: var(--advb-semantic-color-feedback-error); } .advb-field__error::before { content: '! '; font-weight: var(--advb-typography-font-weight-bold); } /* Checkbox and radio — sized up, because the default 13px box is a real obstacle for the readers this site is built for. */ .advb-choice { display: flex; align-items: flex-start; gap: var(--advb-spacing-3); min-height: var(--advb-semantic-layout-touch-target); padding-block: var(--advb-spacing-2); cursor: pointer; } .advb-choice input { width: var(--advb-size-icon-lg); height: var(--advb-size-icon-lg); margin: 0; flex: none; accent-color: var(--advb-semantic-color-action-primary); } .advb-fieldset { border: 0; padding: 0; margin: 0 0 var(--advb-spacing-6); } .advb-fieldset legend { padding: 0; margin-bottom: var(--advb-spacing-3); font-family: var(--advb-semantic-typography-label-font-family); font-size: var(--advb-semantic-typography-label-font-size); font-weight: var(--advb-semantic-typography-label-font-weight); color: var(--a-heading); } /* ========================================================= 17 notices */ .advb-notice { padding: var(--advb-spacing-5) var(--advb-spacing-6); border-left: var(--advb-border-width-rule) solid currentColor; margin-bottom: var(--advb-spacing-6); } .advb-notice > :last-child { margin-bottom: 0; } .advb-notice--error { background-color: var(--advb-semantic-color-feedback-error-surface); color: var(--advb-semantic-color-feedback-error); } .advb-notice--success { background-color: var(--advb-semantic-color-feedback-success-surface); color: var(--advb-semantic-color-feedback-success); } .advb-badge { display: inline-flex; align-items: center; padding: var(--advb-spacing-1) var(--advb-spacing-3); border-radius: var(--advb-semantic-radius-badge); background-color: var(--advb-semantic-color-accent-subtle); color: var(--advb-semantic-color-action-link); font-size: var(--advb-typography-font-size-sm); font-weight: var(--advb-typography-font-weight-medium); letter-spacing: var(--advb-typography-letter-spacing-wide); text-transform: var(--advb-typography-text-case-upper); } /* ========================================================== 18 footer */ .advb-footer { background-color: var(--advb-semantic-color-surface-footer); color: var(--advb-ink-color-text-default); padding-block: var(--advb-semantic-layout-section-y); } .advb-footer__grid { display: grid; gap: var(--advb-semantic-layout-stack); grid-template-columns: 1fr; } @media (min-width: 768px) { .advb-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .advb-footer__heading { font-family: var(--advb-semantic-typography-nav-footer-font-family); font-size: var(--advb-semantic-typography-nav-footer-font-size); font-weight: var(--advb-semantic-typography-nav-footer-font-weight); letter-spacing: var(--advb-semantic-typography-nav-footer-letter-spacing); text-transform: var(--advb-semantic-typography-nav-footer-text-transform); color: var(--advb-ink-color-text-seal); margin: 0 0 var(--advb-spacing-4); } /* Footer links are a short, dense list of contact details, not prose — colour plus position is enough to mark them as links here without underlining every line in the block. Prose links (article, quote, panel, callout) keep the underline; this is the one place that reads as "surrounded by non-link text of the same style," which is what WCAG 1.4.1 is actually guarding against. */ .advb-footer a { color: var(--advb-ink-color-action-link); text-decoration: none; } .advb-footer a:hover { color: var(--advb-ink-color-action-link-hover); text-decoration: underline; } /* Office contact details — the most-used links on the site, sized for it. */ .advb-office { font-style: normal; } .advb-office a { display: inline-flex; align-items: center; min-height: var(--advb-size-touch-target-comfortable); } /* The full-bleed white legal bar below the footer. */ .advb-legal { background-color: var(--advb-semantic-color-surface-footer-legal); color: var(--advb-semantic-color-text-muted); font-family: var(--advb-semantic-typography-legal-font-family); font-size: var(--advb-semantic-typography-legal-font-size); line-height: var(--advb-semantic-typography-legal-line-height); padding-block: var(--advb-spacing-5); text-align: center; } /* ==================================================== 19 contact bar */ /* A sticky bar on phones carrying the two things people came for. */ .advb-contact-bar { position: fixed; inset: auto 0 0 0; z-index: var(--advb-z-index-sticky); display: grid; grid-template-columns: 1fr 1fr; background-color: var(--advb-semantic-color-surface-footer); } .advb-contact-bar a { display: flex; align-items: center; justify-content: center; gap: var(--advb-spacing-2); min-height: var(--advb-size-touch-target-comfortable); padding: var(--advb-spacing-3); color: var(--advb-ink-color-text-default); text-decoration: none; font-weight: var(--advb-typography-font-weight-medium); } .advb-contact-bar a + a { border-left: var(--advb-border-width-hairline) solid var(--advb-ink-color-border-default); } @media (min-width: 768px) { .advb-contact-bar { display: none; } } /* =========================================================== 20 print */ /* Clients print engagement terms and article pages. Without this the hero scrim prints as a solid rectangle and the nav wastes the first page. */ @media print { .advb-masthead, .advb-nav, .advb-nav-toggle, .advb-drawer, .advb-contact-bar, .advb-skip-link, .advb-hero::before { display: none !important; } .advb-root { background: #fff; color: #000; font-size: 11pt; } .advb-article, .advb-container { max-width: none; } .advb-root a { color: #000; text-decoration: underline; } /* A printed page has no hover and no click — print the destination. */ .advb-article a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 9pt; word-break: break-all; } .advb-accordion__item { break-inside: avoid; } .advb-accordion__body { display: block !important; } } /* ================================================== 21 reduced motion */ @media (prefers-reduced-motion: reduce) { .advb-root *, .advb-root *::before, .advb-root *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }