/* ============================================================ DESIGN B — Opinionated Counsel × Law Office of Brandon Mayfield Trade: lawyer. Design: opinionated-counsel (HEY/37signals register). Every selector scoped under [data-design="b"]. Keyframes oc-prefixed. ============================================================ */ /* ── Tokens (data-design is on , so no :root) ── */ [data-design="b"] { --oc-canvas: #F5F5F4; --oc-paper: #FFFFFF; --oc-ink: #171717; --oc-ink-2: #3F3F3E; --oc-muted: #7A7A78; --oc-rule: #1A1A1A; --oc-soft: #E5E4E1; --oc-stamp: #1A47B8; --oc-stamp-deep: #102E78; --oc-stamp-on: #FFFFFF; --oc-warn: #C2410C; --oc-warn-soft: #FBE9DC; --oc-success: #15803D; /* primary accent surfaced for the Massiveforge brand bar */ --design-b-primary: #1A47B8; --oc-font-display: "Söhne Breit", "Inter Display", -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif; --oc-font-body: "Söhne", "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; --oc-font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace; --oc-space-hair: 2px; --oc-space-tick: 4px; --oc-space-bite: 8px; --oc-space-gap: 12px; --oc-space-stub: 16px; --oc-space-block: 24px; --oc-space-tile: 32px; --oc-space-bay: 48px; --oc-space-deck: 80px; --oc-space-yard: 128px; --oc-dur-snap: 120ms; --oc-dur-stamp: 220ms; --oc-dur-settle: 360ms; --oc-dur-breathe: 4400ms; --oc-dur-scrub: 22000ms; --oc-ease-decide: cubic-bezier(.22,.61,.36,1); --oc-ease-stamp: cubic-bezier(.34,1.42,.64,1); --oc-ease-bite: cubic-bezier(.55,.06,.68,.19); --oc-ease-scrub: cubic-bezier(.65,.05,.35,.95); --oc-radius-0: 0; --oc-radius-sm: 4px; --oc-radius-md: 8px; --oc-radius-lg: 12px; --oc-radius-stamp: 2px; --oc-elev-stamp: 0 4px 0 0 var(--oc-rule); } /* ── Base / reset within the slice ── */ [data-design="b"].dq-design { background: var(--oc-canvas); color: var(--oc-ink); font-family: var(--oc-font-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; display: block; } [data-design="b"] *, [data-design="b"] *::before, [data-design="b"] *::after { box-sizing: border-box; } [data-design="b"] h1, [data-design="b"] h2, [data-design="b"] h3, [data-design="b"] p, [data-design="b"] ol, [data-design="b"] ul, [data-design="b"] figure, [data-design="b"] dl, [data-design="b"] dd { margin: 0; } [data-design="b"] a { color: inherit; } [data-design="b"] :focus-visible { outline: 3px solid rgba(26,71,184,0.5); outline-offset: 2px; } /* ════════════════════════════════════════════════════════════ ELEMENT 1 — HEADER ════════════════════════════════════════════════════════════ */ [data-design="b"] .oc-header { position: sticky; top: 0; z-index: 20; background: var(--oc-canvas); border-bottom: 2px solid var(--oc-rule); } [data-design="b"] .oc-header__bar { display: flex; align-items: center; justify-content: space-between; padding: var(--oc-space-stub) clamp(20px, 4vw, 48px); gap: var(--oc-space-stub); max-width: 100%; } [data-design="b"] .oc-logo { text-decoration: none; color: var(--oc-ink); } [data-design="b"] .oc-logo__mark { font-family: var(--oc-font-display); font-weight: 800; font-size: clamp(20px, 2.4vw, 26px); letter-spacing: -0.015em; line-height: 1; } [data-design="b"] .oc-hamburger { appearance: none; background: transparent; border: 2px solid var(--oc-rule); border-radius: var(--oc-radius-sm); padding: 10px 12px; display: inline-flex; flex-direction: column; gap: 4px; cursor: pointer; min-height: 44px; transition: background var(--oc-dur-snap) var(--oc-ease-decide), transform var(--oc-dur-snap) var(--oc-ease-bite); } [data-design="b"] .oc-hamburger__bar { display: block; width: 22px; height: 2px; background: var(--oc-ink); } [data-design="b"] .oc-hamburger:hover { background: var(--oc-soft); } [data-design="b"] .oc-hamburger:active { transform: translateY(1px); } [data-design="b"] .oc-hamburger[aria-expanded="true"] { background: var(--oc-ink); border-color: var(--oc-ink); } [data-design="b"] .oc-hamburger[aria-expanded="true"] .oc-hamburger__bar { background: var(--oc-canvas); } /* atmospheric hairline scrubber — 22s slow cycle */ [data-design="b"] .oc-scrubber { position: relative; height: 2px; background: var(--oc-soft); overflow: hidden; } [data-design="b"] .oc-scrubber__head { position: absolute; inset: 0 auto 0 0; width: 18%; background: linear-gradient( 90deg, transparent 0%, var(--oc-ink) 22%, var(--oc-stamp) 60%, var(--oc-stamp) 78%, transparent 100% ); animation: oc-header-scrub var(--oc-dur-scrub) var(--oc-ease-scrub) infinite; will-change: transform; } @keyframes oc-header-scrub { 0% { transform: translateX(-30%); } 100% { transform: translateX(620%); } } /* Drawer */ [data-design="b"] .oc-drawer { position: fixed; inset: 0; background: var(--oc-canvas); z-index: 30; display: flex; flex-direction: column; transform: translateY(-100%); transition: transform var(--oc-dur-settle) var(--oc-ease-decide); } [data-design="b"] .oc-drawer[data-open="true"] { transform: translateY(0); } [data-design="b"] .oc-drawer__bar { display: flex; justify-content: space-between; align-items: center; padding: var(--oc-space-stub) clamp(20px, 4vw, 48px); border-bottom: 2px solid var(--oc-rule); } [data-design="b"] .oc-drawer__brand { font-family: var(--oc-font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.015em; } [data-design="b"] .oc-drawer__close { background: transparent; border: 0; font-size: 36px; line-height: 1; color: var(--oc-ink); cursor: pointer; padding: 0 8px; min-width: 44px; min-height: 44px; } [data-design="b"] .oc-drawer__nav { display: flex; flex-direction: column; padding: var(--oc-space-bay) clamp(20px, 4vw, 48px) var(--oc-space-tile); gap: var(--oc-space-stub); max-width: 100%; } [data-design="b"] .oc-nav-link { font-family: var(--oc-font-display); font-weight: 800; font-size: clamp(34px, 7vw, 56px); letter-spacing: -0.025em; line-height: 1; color: var(--oc-ink); text-decoration: none; position: relative; padding-bottom: 6px; width: max-content; max-width: 100%; } [data-design="b"] .oc-nav-link::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: var(--oc-stamp); transition: width var(--oc-dur-settle) var(--oc-ease-decide); } [data-design="b"] .oc-nav-link:hover, [data-design="b"] .oc-nav-link:focus-visible { color: var(--oc-stamp); outline: none; } [data-design="b"] .oc-nav-link:hover::after, [data-design="b"] .oc-nav-link:focus-visible::after { width: 100%; } [data-design="b"] .oc-drawer__cta-wrap { padding: 0 clamp(20px, 4vw, 48px) var(--oc-space-bay); margin-top: auto; } /* ════════════════════════════════════════════════════════════ ELEMENT 2 — ANIMATED CTA (inside the drawer) ════════════════════════════════════════════════════════════ */ [data-design="b"] .oc-cta { display: inline-flex; align-items: center; gap: var(--oc-space-gap); font-family: var(--oc-font-display); font-weight: 800; font-size: clamp(17px, 1.6vw, 20px); letter-spacing: -0.015em; padding: 18px 26px; min-height: 44px; background: var(--oc-stamp); color: var(--oc-stamp-on); text-decoration: none; border-radius: var(--oc-radius-md); border: 2px solid var(--oc-rule); box-shadow: var(--oc-elev-stamp); transform: translateY(0); transition: transform var(--oc-dur-snap) var(--oc-ease-decide), box-shadow var(--oc-dur-snap) var(--oc-ease-decide), background var(--oc-dur-snap) var(--oc-ease-decide); animation: oc-cta-breath var(--oc-dur-breathe) var(--oc-ease-decide) infinite; } [data-design="b"] .oc-cta__arrow { display: inline-block; transition: transform var(--oc-dur-snap) var(--oc-ease-decide); } [data-design="b"] .oc-cta[data-lean="true"], [data-design="b"] .oc-cta:hover, [data-design="b"] .oc-cta:focus-visible { background: var(--oc-stamp-deep); box-shadow: 0 6px 0 0 var(--oc-rule); transform: translateY(-2px); animation-play-state: paused; outline: none; } [data-design="b"] .oc-cta:hover .oc-cta__arrow, [data-design="b"] .oc-cta:focus-visible .oc-cta__arrow { transform: translateX(8px); } [data-design="b"] .oc-cta:active { transform: translateY(4px); box-shadow: 0 0 0 0 var(--oc-rule); transition-duration: var(--oc-dur-snap); transition-timing-function: var(--oc-ease-bite); } @keyframes oc-cta-breath { 0%, 100% { box-shadow: var(--oc-elev-stamp), 0 0 0 0 rgba(26,71,184,0); } 50% { box-shadow: var(--oc-elev-stamp), 0 0 0 8px rgba(26,71,184,0.18); } } /* ════════════════════════════════════════════════════════════ HERO — hero.md themed-movement v0.2 schematic One animated substrate layer: a declarative sapphire color-block + ink rule that settle in within ~1.8s, then a quiet breath. ════════════════════════════════════════════════════════════ */ [data-design="b"] .oc-hero { position: relative; overflow: hidden; background: var(--oc-canvas); border-bottom: 2px solid var(--oc-rule); padding: clamp(72px, 12vw, 132px) clamp(20px, 4vw, 48px); min-height: clamp(440px, 72vh, 680px); display: flex; align-items: center; } /* the substrate. A STATIC low-chroma wash fills the whole hero area (counts toward the visual-presence floor, does not move); the ONE animated layer is the sapphire color-block within it. */ [data-design="b"] .oc-hero__substrate { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(26,71,184,0.05) 0%, rgba(26,71,184,0.10) 100%); } /* a chunky sapphire color-block — the 37signals "paragraph as color" move. The ONE animated layer: it settles in (~1.75s) then holds a quiet breath. The thick inset border + corner mark are STATIC detail on the same element (no second moving layer) so the block reads as a deliberate brand stamp. */ [data-design="b"] .oc-hero__block { position: absolute; right: clamp(-32px, -2.5vw, -16px); top: clamp(-28px, -3.5vw, 8px); width: clamp(260px, 60vw, 720px); height: clamp(320px, 96%, 720px); background: var(--oc-stamp); border: 2px solid var(--oc-rule); border-radius: var(--oc-radius-lg); box-shadow: inset 0 0 0 12px rgba(255,255,255,0.10); transform-origin: top right; transform: translateY(-26px) scale(0.93); opacity: 0; animation: oc-hero-block-settle 1750ms var(--oc-ease-stamp) forwards, oc-hero-block-breath 6200ms var(--oc-ease-decide) 1950ms infinite; } /* static corner tick — pure decoration on the substrate, not animated */ [data-design="b"] .oc-hero__block::before { content: ""; position: absolute; left: 22px; bottom: 22px; width: 44px; height: 10px; background: var(--oc-stamp-on); border-radius: var(--oc-radius-0); } @keyframes oc-hero-block-settle { 0% { opacity: 0; transform: translateY(-26px) scale(0.93); } 62% { opacity: 0.37; transform: translateY(5px) scale(1.014); } 100% { opacity: 0.32; transform: translateY(0) scale(1); } } @keyframes oc-hero-block-breath { 0%, 100% { opacity: 0.32; transform: translateY(0) scale(1); } 50% { opacity: 0.42; transform: translateY(-6px) scale(1.014); } } [data-design="b"] .oc-hero__inner { position: relative; z-index: 1; /* hold the text in the clear left zone, off the sapphire block */ max-width: min(100%, 660px); width: 100%; } [data-design="b"] .oc-hero__headline { font-family: var(--oc-font-display); font-weight: 800; font-size: clamp(38px, 8.4vw, 84px); letter-spacing: -0.03em; line-height: 1.02; color: var(--oc-ink); max-width: 13ch; overflow-wrap: anywhere; } [data-design="b"] .oc-hero__sub { font-family: var(--oc-font-body); font-size: clamp(18px, 2.4vw, 20px); font-weight: 500; line-height: 1.5; color: var(--oc-ink-2); margin-top: var(--oc-space-block); max-width: 30ch; } [data-design="b"] .oc-hero__proof { font-family: var(--oc-font-mono); font-size: 13px; letter-spacing: 0.03em; line-height: 1.65; color: var(--oc-ink-2); margin-top: var(--oc-space-block); max-width: 42ch; overflow-wrap: anywhere; } /* ════════════════════════════════════════════════════════════ ELEMENT 6 — POINTER (fallback rendering: dignified chevron-breath) ════════════════════════════════════════════════════════════ */ [data-design="b"] .oc-pointer { display: flex; justify-content: center; background: var(--oc-canvas); padding: clamp(36px, 6vw, 56px) clamp(20px, 4vw, 48px); border-bottom: 2px solid var(--oc-rule); } [data-design="b"] .oc-pointer__link { display: inline-flex; flex-direction: column; align-items: center; gap: var(--oc-space-gap); text-decoration: none; color: var(--oc-ink-2); padding: 8px 16px; border-radius: var(--oc-radius-md); transition: color var(--oc-dur-snap) var(--oc-ease-decide); } [data-design="b"] .oc-pointer__link:hover, [data-design="b"] .oc-pointer__link:focus-visible { color: var(--oc-stamp); outline: none; } [data-design="b"] .oc-pointer__label { font-family: var(--oc-font-mono); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; } [data-design="b"] .oc-pointer__chev { display: block; line-height: 0; color: var(--oc-stamp); animation: oc-pointer-breath 5s var(--oc-ease-decide) infinite; } [data-design="b"] .oc-pointer__chev svg { display: block; } @keyframes oc-pointer-breath { 0%, 100% { transform: translateY(0); opacity: 0.55; } 50% { transform: translateY(7px); opacity: 1; } } /* ════════════════════════════════════════════════════════════ ELEMENT 5 — FUNNEL ════════════════════════════════════════════════════════════ */ [data-design="b"] .oc-funnel { background: var(--oc-canvas); padding: clamp(56px, 9vw, 80px) clamp(20px, 4vw, 48px); border-bottom: 2px solid var(--oc-rule); } [data-design="b"] .oc-funnel__head { max-width: 60ch; } [data-design="b"] .oc-funnel__kicker { font-family: var(--oc-font-mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-muted); margin-bottom: var(--oc-space-gap); } [data-design="b"] .oc-funnel__title { font-family: var(--oc-font-display); font-weight: 800; font-size: clamp(30px, 6vw, 56px); letter-spacing: -0.025em; line-height: 1.04; color: var(--oc-ink); max-width: 20ch; } [data-design="b"] .oc-funnel__lead { font-size: clamp(17px, 2.2vw, 20px); line-height: 1.55; color: var(--oc-ink-2); margin-top: var(--oc-space-stub); max-width: 54ch; } [data-design="b"] .oc-funnel__progress { height: 4px; background: var(--oc-soft); overflow: hidden; margin: var(--oc-space-bay) 0 var(--oc-space-gap); } [data-design="b"] .oc-funnel__progress-bar { display: block; height: 100%; width: 20%; background: var(--oc-stamp); transition: width var(--oc-dur-settle) var(--oc-ease-decide); } [data-design="b"] .oc-funnel__progress-bar[data-step="2"] { width: 40%; } [data-design="b"] .oc-funnel__progress-bar[data-step="3"] { width: 60%; } [data-design="b"] .oc-funnel__progress-bar[data-step="4"] { width: 80%; } [data-design="b"] .oc-funnel__progress-bar[data-step="5"] { width: 100%; } [data-design="b"] .oc-funnel__counter { font-family: var(--oc-font-mono); font-size: 13px; letter-spacing: 0.06em; color: var(--oc-muted); margin-bottom: var(--oc-space-bay); } [data-design="b"] .oc-funnel__form { background: var(--oc-paper); border: 2px solid var(--oc-rule); border-radius: var(--oc-radius-lg); padding: clamp(20px, 4vw, 32px); position: relative; overflow: hidden; max-width: 100%; } [data-design="b"] .oc-funnel__step { border: 0; padding: 0; margin: 0; min-width: 0; display: none; animation: oc-step-in var(--oc-dur-settle) var(--oc-ease-stamp); } [data-design="b"] .oc-funnel__step[aria-hidden="false"] { display: block; } [data-design="b"] .oc-funnel__legend { font-family: var(--oc-font-display); font-weight: 800; font-size: clamp(20px, 3vw, 26px); letter-spacing: -0.01em; line-height: 1.12; color: var(--oc-ink); margin-bottom: var(--oc-space-bay); padding: 0; max-width: 32ch; } [data-design="b"] .oc-funnel__note { font-size: 15px; line-height: 1.55; color: var(--oc-ink-2); margin: calc(-1 * var(--oc-space-block)) 0 var(--oc-space-block); max-width: 52ch; } [data-design="b"] .oc-funnel__tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: var(--oc-space-stub); margin-bottom: var(--oc-space-bay); } [data-design="b"] .oc-tile-radio { display: block; cursor: pointer; } [data-design="b"] .oc-tile-radio input { position: absolute; opacity: 0; pointer-events: none; } [data-design="b"] .oc-tile-radio__face { display: flex; flex-direction: column; gap: 4px; padding: var(--oc-space-stub); min-height: 44px; background: var(--oc-paper); color: var(--oc-ink); border: 2px solid var(--oc-rule); border-radius: var(--oc-radius-md); position: relative; transition: transform var(--oc-dur-stamp) var(--oc-ease-stamp), background var(--oc-dur-stamp) var(--oc-ease-stamp), color var(--oc-dur-stamp) var(--oc-ease-stamp); } [data-design="b"] .oc-tile-radio__face::after { content: "\2713"; position: absolute; top: 8px; right: 10px; font-family: var(--oc-font-display); font-weight: 800; font-size: 18px; color: var(--oc-stamp-on); opacity: 0; transform: scale(0.4); transition: opacity var(--oc-dur-stamp) var(--oc-ease-stamp), transform var(--oc-dur-stamp) var(--oc-ease-stamp); } [data-design="b"] .oc-tile-radio:hover .oc-tile-radio__face { transform: translateY(-2px); background: var(--oc-soft); } [data-design="b"] .oc-tile-radio input:focus-visible + .oc-tile-radio__face { box-shadow: 0 0 0 3px rgba(26,71,184,0.32); } [data-design="b"] .oc-tile-radio input:checked + .oc-tile-radio__face { background: var(--oc-stamp); color: var(--oc-stamp-on); border-color: var(--oc-stamp); transform: scale(1.02) translateY(-1px); } [data-design="b"] .oc-tile-radio input:checked + .oc-tile-radio__face::after { opacity: 1; transform: scale(1); } [data-design="b"] .oc-tile-radio__title { font-family: var(--oc-font-display); font-weight: 800; font-size: 17px; letter-spacing: -0.005em; } [data-design="b"] .oc-tile-radio__meta { font-family: var(--oc-font-mono); font-size: 13px; letter-spacing: 0.04em; line-height: 1.4; color: var(--oc-muted); } [data-design="b"] .oc-tile-radio input:checked + .oc-tile-radio__face .oc-tile-radio__meta { color: rgba(255,255,255,0.78); } [data-design="b"] .oc-field { display: flex; flex-direction: column; gap: var(--oc-space-bite); margin-bottom: var(--oc-space-block); } [data-design="b"] .oc-field__label { font-family: var(--oc-font-display); font-weight: 700; font-size: 17px; color: var(--oc-ink); } [data-design="b"] .oc-field__optional { font-family: var(--oc-font-mono); font-weight: 500; font-size: 13px; letter-spacing: 0.04em; color: var(--oc-muted); } [data-design="b"] .oc-field__input, [data-design="b"] .oc-field__textarea { font-family: var(--oc-font-body); font-size: 17px; background: transparent; color: var(--oc-ink); border: 0; border-bottom: 2px solid var(--oc-rule); border-radius: 0; padding: 10px 0; outline: none; transition: border-color var(--oc-dur-snap) var(--oc-ease-decide); width: 100%; } [data-design="b"] .oc-field__input[readonly] { color: var(--oc-ink-2); border-bottom-style: dashed; cursor: default; } [data-design="b"] .oc-field__textarea { resize: vertical; min-height: 120px; } [data-design="b"] .oc-field__input:focus:not([readonly]), [data-design="b"] .oc-field__textarea:focus { border-bottom-color: var(--oc-stamp); border-bottom-width: 3px; } [data-design="b"] .oc-field__help { font-family: var(--oc-font-mono); font-size: 13px; line-height: 1.5; color: var(--oc-muted); } [data-design="b"] .oc-field__help[data-contact-help].is-error { color: var(--oc-warn); } [data-design="b"] .oc-funnel__nav { display: flex; gap: var(--oc-space-gap); align-items: center; flex-wrap: wrap; margin-top: var(--oc-space-bay); } [data-design="b"] .oc-btn { font-family: var(--oc-font-display); font-weight: 800; font-size: 17px; letter-spacing: -0.005em; padding: 14px 22px; min-height: 44px; border-radius: var(--oc-radius-md); border: 2px solid var(--oc-rule); cursor: pointer; background: var(--oc-paper); color: var(--oc-ink); box-shadow: var(--oc-elev-stamp); transform: translateY(0); transition: transform var(--oc-dur-snap) var(--oc-ease-decide), box-shadow var(--oc-dur-snap) var(--oc-ease-decide), background var(--oc-dur-snap) var(--oc-ease-decide); } [data-design="b"] .oc-btn--primary { background: var(--oc-stamp); color: var(--oc-stamp-on); } [data-design="b"] .oc-btn--ghost { background: transparent; box-shadow: none; border-color: transparent; color: var(--oc-ink-2); } [data-design="b"] .oc-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 0 0 var(--oc-rule); } [data-design="b"] .oc-btn--primary:hover:not(:disabled) { background: var(--oc-stamp-deep); } [data-design="b"] .oc-btn--ghost:hover:not(:disabled) { background: var(--oc-soft); box-shadow: none; } [data-design="b"] .oc-btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 0 0 0 var(--oc-rule); } [data-design="b"] .oc-btn:disabled { opacity: 0.4; cursor: not-allowed; } [data-design="b"] .oc-funnel__verdict { display: flex; flex-direction: column; gap: var(--oc-space-stub); padding: var(--oc-space-tile); border-radius: var(--oc-radius-md); border: 2px solid var(--oc-rule); } [data-design="b"] .oc-funnel__verdict--ok { background: var(--oc-stamp); color: var(--oc-stamp-on); border-color: var(--oc-stamp); } [data-design="b"] .oc-funnel__verdict-stamp { align-self: flex-start; font-family: var(--oc-font-mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 10px; border: 2px solid currentColor; border-radius: var(--oc-radius-stamp); background: rgba(255,255,255,0.12); } [data-design="b"] .oc-funnel__verdict-title { font-family: var(--oc-font-display); font-weight: 800; font-size: clamp(24px, 4vw, 36px); letter-spacing: -0.015em; line-height: 1.08; } [data-design="b"] .oc-funnel__verdict-body { font-size: 17px; line-height: 1.55; } [data-design="b"] .oc-funnel__verdict-link { color: var(--oc-stamp-on); font-weight: 700; text-underline-offset: 3px; } @keyframes oc-step-in { 0% { opacity: 0; transform: translateX(24px) scale(0.98); } 60% { opacity: 1; transform: translateX(0) scale(1.005); } 100% { opacity: 1; transform: translateX(0) scale(1); } } /* required intake warning */ [data-design="b"] .oc-funnel__warning { margin-top: var(--oc-space-block); font-family: var(--oc-font-mono); font-size: 13px; line-height: 1.6; letter-spacing: 0.02em; color: var(--oc-ink-2); max-width: 64ch; padding-left: var(--oc-space-stub); border-left: 3px solid var(--oc-warn); } /* ════════════════════════════════════════════════════════════ PRACTICE AREAS — Element 3 motion grammar embedded ════════════════════════════════════════════════════════════ */ [data-design="b"] .oc-practice { background: var(--oc-paper); padding: clamp(56px, 9vw, 80px) clamp(20px, 4vw, 48px); border-bottom: 2px solid var(--oc-rule); } [data-design="b"] .oc-practice__head { max-width: 60ch; } [data-design="b"] .oc-practice__kicker { font-family: var(--oc-font-mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-muted); margin-bottom: var(--oc-space-gap); } [data-design="b"] .oc-practice__title { font-family: var(--oc-font-display); font-weight: 800; font-size: clamp(30px, 6vw, 56px); letter-spacing: -0.025em; line-height: 1.04; color: var(--oc-ink); max-width: 20ch; } [data-design="b"] .oc-practice__lead { font-size: clamp(17px, 2.2vw, 20px); line-height: 1.55; color: var(--oc-ink-2); margin-top: var(--oc-space-stub); max-width: 56ch; } /* Element 3 — the ambient status strip with 3 coprime rhythms */ [data-design="b"] .oc-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--oc-space-stub); margin: var(--oc-space-bay) 0; } [data-design="b"] .oc-strip__cell { display: flex; flex-direction: column; gap: var(--oc-space-bite); padding: var(--oc-space-block); min-width: 0; background: var(--oc-canvas); border: 2px solid var(--oc-rule); border-radius: var(--oc-radius-lg); position: relative; } [data-design="b"] .oc-strip__label { font-family: var(--oc-font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.4; color: var(--oc-muted); } [data-design="b"] .oc-strip__digit { font-family: var(--oc-font-display); font-weight: 800; font-size: clamp(40px, 7vw, 64px); letter-spacing: -0.035em; line-height: 0.95; color: var(--oc-ink); display: inline-block; transform-origin: bottom left; } [data-design="b"] .oc-strip__unit { font-family: var(--oc-font-body); font-size: 15px; color: var(--oc-ink-2); } [data-design="b"] .oc-strip__rule { display: block; height: 4px; width: 0; background: var(--oc-stamp); margin-top: var(--oc-space-bite); animation: oc-strip-restrike 11s var(--oc-ease-scrub) infinite; } [data-design="b"] .oc-strip__rule--alt { animation-duration: 19s; } [data-design="b"] .oc-strip__dot { position: absolute; top: var(--oc-space-stub); right: var(--oc-space-stub); width: 14px; height: 14px; border-radius: 50%; background: var(--oc-warn); animation: oc-strip-pulse 13s var(--oc-ease-decide) infinite; } [data-design="b"] .oc-strip__cell[data-rhythm="years"] .oc-strip__digit { animation: oc-strip-roll 17s var(--oc-ease-stamp) infinite; } @keyframes oc-strip-restrike { 0% { width: 0; } 70% { width: 100%; } 100% { width: 100%; opacity: 0.2; } } @keyframes oc-strip-pulse { 0%, 80%, 100% { transform: scale(1); opacity: 1; } 90% { transform: scale(1.7); opacity: 0.5; } } @keyframes oc-strip-roll { 0%, 88%, 100% { transform: translateY(0); } 92% { transform: translateY(-12px); opacity: 0.6; } 96% { transform: translateY(0); } } [data-design="b"] .oc-practice__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--oc-space-block); } [data-design="b"] .oc-practice-card { background: var(--oc-canvas); border: 2px solid var(--oc-rule); border-radius: var(--oc-radius-lg); padding: var(--oc-space-tile); position: relative; transition: transform var(--oc-dur-snap) var(--oc-ease-decide), box-shadow var(--oc-dur-snap) var(--oc-ease-decide); } [data-design="b"] .oc-practice-card:hover { transform: translateY(-3px); box-shadow: var(--oc-elev-stamp); } [data-design="b"] .oc-practice-card__num { font-family: var(--oc-font-mono); font-size: 13px; letter-spacing: 0.08em; color: var(--oc-stamp); } [data-design="b"] .oc-practice-card__name { font-family: var(--oc-font-display); font-weight: 800; font-size: clamp(22px, 3vw, 26px); letter-spacing: -0.015em; line-height: 1.1; color: var(--oc-ink); margin: var(--oc-space-gap) 0 var(--oc-space-stub); } [data-design="b"] .oc-practice-card__body { font-size: 17px; line-height: 1.6; color: var(--oc-ink-2); max-width: 60ch; } [data-design="b"] .oc-practice-card__tags { list-style: none; padding: 0; margin: var(--oc-space-stub) 0 0; display: flex; flex-wrap: wrap; gap: var(--oc-space-bite); } [data-design="b"] .oc-practice-card__tags li { font-family: var(--oc-font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--oc-ink-2); background: var(--oc-paper); border: 2px solid var(--oc-soft); border-radius: var(--oc-radius-stamp); padding: 5px 10px; } /* ════════════════════════════════════════════════════════════ ABOUT / ATTORNEYS ════════════════════════════════════════════════════════════ */ [data-design="b"] .oc-about { background: var(--oc-canvas); padding: clamp(56px, 9vw, 80px) clamp(20px, 4vw, 48px); border-bottom: 2px solid var(--oc-rule); } [data-design="b"] .oc-about__grid { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; } [data-design="b"] .oc-about__monolith { position: relative; aspect-ratio: 4 / 5; background: var(--oc-stamp); border: 2px solid var(--oc-rule); border-radius: var(--oc-radius-lg); display: flex; flex-direction: column; justify-content: flex-end; gap: var(--oc-space-stub); padding: var(--oc-space-tile); overflow: hidden; } [data-design="b"] .oc-about__monolith-initials { position: absolute; top: clamp(-10px, -1vw, 0px); right: var(--oc-space-block); font-family: var(--oc-font-display); font-weight: 800; font-size: clamp(120px, 26vw, 200px); letter-spacing: -0.05em; line-height: 0.82; color: rgba(255,255,255,0.13); } [data-design="b"] .oc-about__monolith-rule { width: 56px; height: 8px; background: var(--oc-stamp-on); border-radius: var(--oc-radius-0); } [data-design="b"] .oc-about__monolith-tag { position: relative; font-family: var(--oc-font-mono); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--oc-stamp-on); } [data-design="b"] .oc-about__kicker { font-family: var(--oc-font-mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-muted); margin-bottom: var(--oc-space-gap); } [data-design="b"] .oc-about__title { font-family: var(--oc-font-display); font-weight: 800; font-size: clamp(28px, 5vw, 56px); letter-spacing: -0.025em; line-height: 1.05; color: var(--oc-ink); max-width: 20ch; } [data-design="b"] .oc-about__copy { font-size: clamp(17px, 2.2vw, 20px); line-height: 1.6; color: var(--oc-ink-2); margin-top: var(--oc-space-block); max-width: 62ch; } [data-design="b"] .oc-about__pull { font-family: var(--oc-font-display); font-weight: 800; font-size: clamp(22px, 3.4vw, 36px); letter-spacing: -0.015em; line-height: 1.18; color: var(--oc-ink); margin-top: var(--oc-space-block); padding-left: var(--oc-space-block); border-left: 8px solid var(--oc-stamp); max-width: 24ch; } [data-design="b"] .oc-about__meta { margin-top: var(--oc-space-bay); border-top: 2px solid var(--oc-rule); } [data-design="b"] .oc-about__meta-row { display: grid; grid-template-columns: minmax(0, 180px) minmax(0, 1fr); gap: var(--oc-space-stub); padding: var(--oc-space-stub) 0; border-bottom: 2px solid var(--oc-soft); } [data-design="b"] .oc-about__meta-row dt { font-family: var(--oc-font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--oc-muted); } [data-design="b"] .oc-about__meta-row dd { font-family: var(--oc-font-body); font-size: 15px; line-height: 1.5; color: var(--oc-ink); } /* ════════════════════════════════════════════════════════════ JURISDICTIONS — Element 4 motion grammar (docket folio) ════════════════════════════════════════════════════════════ */ [data-design="b"] .oc-docket { background: var(--oc-paper); padding: clamp(56px, 9vw, 80px) clamp(20px, 4vw, 48px); border-bottom: 2px solid var(--oc-rule); } [data-design="b"] .oc-docket__head { max-width: 60ch; } [data-design="b"] .oc-docket__kicker { font-family: var(--oc-font-mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-muted); margin-bottom: var(--oc-space-gap); } [data-design="b"] .oc-docket__title { font-family: var(--oc-font-display); font-weight: 800; font-size: clamp(28px, 5.5vw, 56px); letter-spacing: -0.025em; line-height: 1.04; color: var(--oc-ink); max-width: 20ch; } [data-design="b"] .oc-docket__lead { font-size: clamp(17px, 2.2vw, 20px); line-height: 1.55; color: var(--oc-ink-2); margin: var(--oc-space-stub) 0 var(--oc-space-bay); max-width: 56ch; } [data-design="b"] .oc-docket__list { list-style: none; margin: 0; padding: 0; max-width: 100%; } [data-design="b"] .oc-docket__row { display: grid; grid-template-columns: 96px 1fr auto; align-items: baseline; gap: var(--oc-space-bay); padding: var(--oc-space-tile) 0; border-bottom: 2px solid var(--oc-rule); animation: oc-docket-breathe-rule 14s var(--oc-ease-scrub) infinite; position: relative; } [data-design="b"] .oc-docket__row:nth-child(2) { animation-delay: -4.6s; } [data-design="b"] .oc-docket__row:nth-child(3) { animation-delay: -9.2s; } [data-design="b"] .oc-docket__num { font-family: var(--oc-font-display); font-weight: 800; font-size: 36px; letter-spacing: -0.02em; color: var(--oc-ink); display: inline-block; padding: 6px 10px; border: 2px solid var(--oc-rule); border-radius: var(--oc-radius-stamp); background: var(--oc-paper); line-height: 1; min-width: 56px; text-align: center; transition: background var(--oc-dur-stamp) var(--oc-ease-stamp), color var(--oc-dur-stamp) var(--oc-ease-stamp), border-color var(--oc-dur-stamp) var(--oc-ease-stamp), transform var(--oc-dur-stamp) var(--oc-ease-stamp); } [data-design="b"] .oc-docket__row[data-stamped="true"] .oc-docket__num { background: var(--oc-stamp); color: var(--oc-stamp-on); border-color: var(--oc-stamp); transform: scale(1.06); } [data-design="b"] .oc-docket__name { font-family: var(--oc-font-display); font-weight: 700; font-size: clamp(20px, 2.4vw, 26px); letter-spacing: -0.01em; line-height: 1.18; color: var(--oc-ink); } [data-design="b"] .oc-docket__meta { font-family: var(--oc-font-mono); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--oc-muted); } @keyframes oc-docket-breathe-rule { 0%, 100% { border-bottom-color: var(--oc-rule); } 50% { border-bottom-color: var(--oc-soft); } } /* ════════════════════════════════════════════════════════════ FOOTER / IMPRINT ════════════════════════════════════════════════════════════ */ [data-design="b"] .oc-footer { background: var(--oc-canvas); padding: clamp(56px, 9vw, 80px) clamp(20px, 4vw, 48px) clamp(40px, 6vw, 56px); } [data-design="b"] .oc-footer__top { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: clamp(28px, 5vw, 56px); padding-bottom: var(--oc-space-bay); border-bottom: 2px solid var(--oc-rule); } [data-design="b"] .oc-footer__name { font-family: var(--oc-font-display); font-weight: 800; font-size: clamp(28px, 4.5vw, 44px); letter-spacing: -0.025em; line-height: 1.04; color: var(--oc-ink); } [data-design="b"] .oc-footer__col-head { font-family: var(--oc-font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oc-muted); margin-bottom: var(--oc-space-stub); } [data-design="b"] .oc-footer__address { font-style: normal; font-size: 17px; line-height: 1.6; color: var(--oc-ink-2); } [data-design="b"] .oc-footer__phone { display: inline-block; margin-top: var(--oc-space-gap); font-family: var(--oc-font-display); font-weight: 800; font-size: 20px; letter-spacing: -0.01em; color: var(--oc-ink); text-decoration: none; border-bottom: 3px solid var(--oc-stamp); padding-bottom: 2px; } [data-design="b"] .oc-footer__phone:hover { color: var(--oc-stamp); } [data-design="b"] .oc-footer__nav { display: flex; flex-direction: column; gap: var(--oc-space-gap); } [data-design="b"] .oc-footer__nav a { font-size: 17px; color: var(--oc-ink-2); text-decoration: none; width: max-content; max-width: 100%; transition: color var(--oc-dur-snap) var(--oc-ease-decide); } [data-design="b"] .oc-footer__nav a:hover { color: var(--oc-stamp); } [data-design="b"] .oc-footer__imprint { padding-top: var(--oc-space-bay); display: flex; flex-direction: column; gap: var(--oc-space-gap); } [data-design="b"] .oc-footer__disclaimer { font-family: var(--oc-font-body); font-size: 15px; line-height: 1.6; color: var(--oc-ink-2); max-width: 78ch; } [data-design="b"] .oc-footer__responsible, [data-design="b"] .oc-footer__jurisdiction { font-family: var(--oc-font-mono); font-size: 13px; letter-spacing: 0.04em; line-height: 1.55; color: var(--oc-ink-2); } [data-design="b"] .oc-footer__copy { font-family: var(--oc-font-mono); font-size: 13px; letter-spacing: 0.04em; color: var(--oc-muted); margin-top: var(--oc-space-bite); } /* ════════════════════════════════════════════════════════════ REDUCED MOTION ════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { [data-design="b"] .oc-scrubber__head { animation: none; transform: translateX(40%); } [data-design="b"] .oc-drawer { transition: none; } [data-design="b"] .oc-nav-link::after { transition: none; } [data-design="b"] .oc-cta { animation: none; } [data-design="b"] .oc-cta:hover { transform: none; } [data-design="b"] .oc-cta__arrow { transition: none; } [data-design="b"] .oc-hero__block { animation: none; opacity: 0.34; transform: translateY(0) scale(1); } [data-design="b"] .oc-pointer__chev { animation: none; } [data-design="b"] .oc-funnel__step { animation: none; } [data-design="b"] .oc-funnel__progress-bar { transition: none; } [data-design="b"] .oc-tile-radio__face, [data-design="b"] .oc-tile-radio__face::after { transition: none; } [data-design="b"] .oc-strip__rule { animation: none; width: 60%; } [data-design="b"] .oc-strip__dot, [data-design="b"] .oc-strip__cell[data-rhythm="years"] .oc-strip__digit { animation: none; } [data-design="b"] .oc-practice-card { transition: none; } [data-design="b"] .oc-docket__row { animation: none; } [data-design="b"] .oc-docket__num { transition: none; } } /* ════════════════════════════════════════════════════════════ RESPONSIVE ════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { [data-design="b"] .oc-about__grid { grid-template-columns: 1fr; } [data-design="b"] .oc-about__monolith { aspect-ratio: 16 / 9; max-width: 420px; } } @media (max-width: 768px) { [data-design="b"] .oc-strip { grid-template-columns: 1fr; } } @media (max-width: 560px) { [data-design="b"] .oc-header__bar { padding: 12px 16px; } [data-design="b"] .oc-funnel__tiles { grid-template-columns: 1fr; } [data-design="b"] .oc-funnel__form { padding: 20px; } [data-design="b"] .oc-docket__row { grid-template-columns: 56px 1fr; row-gap: 4px; column-gap: var(--oc-space-stub); } [data-design="b"] .oc-docket__meta { grid-column: 1 / -1; } [data-design="b"] .oc-docket__num { font-size: 24px; min-width: 44px; } [data-design="b"] .oc-about__meta-row { grid-template-columns: 1fr; gap: var(--oc-space-tick); } } @media (max-width: 380px) { [data-design="b"] .oc-logo__mark { font-size: 18px; } [data-design="b"] .oc-funnel__nav { gap: var(--oc-space-bite); } } /* ════════════════════════════════════════════════════════════ DEFENSIVE OVERFLOW BLOCK (mandatory — bottom of file) ════════════════════════════════════════════════════════════ */ [data-design="b"].dq-design, [data-design="b"] .dq-design { max-width: 100%; overflow-x: clip; } [data-design="b"] * { min-width: 0; } [data-design="b"] img, [data-design="b"] svg:not([data-keep-size]) { max-width: 100%; height: auto; }