/* ========================================================================== Axiom Law — Big Bang Visibility Showcase Self-contained stylesheet. No dependencies on site.css or any shared file. Direction: "Monument" (design canvas, 2026-09-05) — one headline at architectural scale, chapter numerals on a left rail, an oversized practice accordion, numerals at 200px, and a cobalt block that breaks the photo grid. This demo is exempt from the house design and coding standards and holds to the floor in knowledge/system/showcase-demo-conventions.md instead. The one rule from that floor worth restating here: no text colour below the contrast floor — 0.5 alpha is the minimum for off-white on charcoal, 0.6 for charcoal on off-white (both clear 4.5:1). The pre-2026-09-05 sheet used 0.3 and 0.4 and failed axe on every engine. ========================================================================== */ /* ========================================================================== FONT DECLARATIONS — self-hosted latin subsets (process: css-conventions.md § Font Self-Hosting) ========================================================================== */ /* FONT Playfair Display - latin - variable 700-900 */ @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 700 900; font-display: swap; src: url('fonts/PlayfairDisplay-normal-700-900.woff2') format('woff2'); } /* FONT Playfair Display - latin - italic variable 700-900 Added 2026-09-05: the testimonial had been rendering a synthesised oblique. */ @font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 700 900; font-display: swap; src: url('fonts/PlayfairDisplay-italic-700-900.woff2') format('woff2'); } /* FONT Roboto Mono - latin */ @font-face { font-family: 'Roboto Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/RobotoMono-normal-400.woff2') format('woff2'); } /* ========================================================================== RESET ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } img, picture { display: block; max-width: 100%; } blockquote, figure { margin: 0; padding: 0; } ul[role="list"] { list-style: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } /* ========================================================================== CUSTOM PROPERTIES ========================================================================== */ :root { /* Colors */ --color-charcoal: #121212; --color-off-white: #F9F9F7; --color-cobalt: #2E5BFF; --color-cobalt-light: #4A75FF; /* Muted text — the contrast floor (see file header) */ --ink-muted-on-dark: rgba(249, 249, 247, 0.6); /* 6.9:1 on charcoal */ --ink-muted-on-light: rgba(18, 18, 18, 0.6); /* 4.8:1 on off-white */ --ink-soft-on-dark: rgba(249, 249, 247, 0.7); /* body copy on charcoal */ /* Hairlines */ --hairline-on-dark: rgba(249, 249, 247, 0.125); --hairline-on-light: rgba(18, 18, 18, 0.15); /* Type */ --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-mono: 'Roboto Mono', 'Courier New', monospace; /* Layout */ --rail-width: 120px; --space-x: 64px; --nav-height: 64px; --silo-height: 40px; /* Motion — every transition and animation reads these, so the two reduced-motion gates below zero them in one place. */ --dur: 0.25s; --dur-slow: 0.35s; } @media (prefers-reduced-motion: reduce) { :root { --dur: 0s; --dur-slow: 0s; } } /* The main site's stored toggle, stamped on by axiom-law.js */ .motion-reduce { --dur: 0s; --dur-slow: 0s; } /* ========================================================================== BASE ========================================================================== */ @media (prefers-reduced-motion: no-preference) { html:not(.motion-reduce) { scroll-behavior: smooth; } } body { background: var(--color-charcoal); color: var(--color-off-white); font-family: var(--font-mono); font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding-top: calc(var(--nav-height) + var(--silo-height)); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ========================================================================== FOCUS STATES ========================================================================== */ a:focus-visible, button:focus-visible { outline: 2px solid var(--color-cobalt); outline-offset: 4px; } /* ========================================================================== GRAIN OVERLAY Covers the viewport including the fixed nav — intentional editorial texture. z-index 200 sits above the nav (100); pointer-events: none keeps it inert. ========================================================================== */ body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 200; pointer-events: none; opacity: 0.04; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 256px 256px; } /* ========================================================================== SKIP LINK ========================================================================== */ .skip-link { position: absolute; top: -100%; left: 8px; z-index: 1000; padding: 8px 16px; background: var(--color-charcoal); color: var(--color-off-white); font-family: var(--font-mono); font-size: 14px; text-decoration: none; white-space: nowrap; } .skip-link:focus { top: 8px; } /* ========================================================================== PRIMARY NAVIGATION ========================================================================== */ .nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-height); background: var(--color-charcoal); z-index: 100; border-bottom: 1px solid var(--hairline-on-dark); } .nav__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; padding: 0 var(--space-x); } .nav__logo { font-family: var(--font-serif); font-weight: 700; font-size: 18px; color: var(--color-off-white); text-decoration: none; letter-spacing: 0.05em; } .nav__links { display: flex; align-items: center; gap: 40px; } .nav__link { position: relative; font-family: var(--font-mono); font-size: 13px; color: var(--color-off-white); text-decoration: none; text-transform: uppercase; letter-spacing: 0.05em; } /* Underline slide-in on hover */ .nav__link::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 1px; background: var(--color-off-white); transform: scaleX(0); transform-origin: left center; transition: transform var(--dur) ease; } .nav__link:hover::after, .nav__link:focus::after { transform: scaleX(1); } .nav__cta { font-family: var(--font-mono); font-size: 13px; color: var(--color-off-white); text-decoration: none; text-transform: uppercase; letter-spacing: 0.05em; background: var(--color-cobalt); padding: 12px 24px; transition: background var(--dur) ease; } .nav__cta:hover, .nav__cta:focus { background: var(--color-cobalt-light); } /* Hamburger button — mobile only */ .nav__hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; padding: 6px; flex-shrink: 0; } .nav__hamburger-line { display: block; width: 22px; height: 1px; background: var(--color-off-white); transition: transform var(--dur) ease, opacity var(--dur) ease; } /* Hamburger → X when menu is open */ .nav__hamburger[aria-expanded="true"] .nav__hamburger-line:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nav__hamburger[aria-expanded="true"] .nav__hamburger-line:nth-child(2) { opacity: 0; } .nav__hamburger[aria-expanded="true"] .nav__hamburger-line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* ========================================================================== MOBILE DROPDOWN ========================================================================== */ /* Hidden on desktop */ .mobile-dropdown { display: none; } .mobile-dropdown__link { display: block; font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft-on-dark); text-decoration: none; padding: 16px 20px; border-bottom: 1px solid var(--hairline-on-dark); transition: color var(--dur) ease; } .mobile-dropdown__link:hover, .mobile-dropdown__link:focus { color: var(--color-off-white); } .mobile-dropdown__link--cta { color: var(--color-cobalt-light); } .mobile-dropdown__link--cta:hover, .mobile-dropdown__link--cta:focus { color: var(--color-off-white); } /* ========================================================================== SILO NAVIGATION BAR — the site's touchpoint, identical across the demos ========================================================================== */ @keyframes silo-slide-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .silo-bar { position: fixed; top: var(--nav-height); left: 0; right: 0; height: var(--silo-height); display: flex; align-items: center; justify-content: center; gap: 40px; background: rgba(18, 18, 18, 0.8); z-index: 1; border-bottom: 1px solid var(--hairline-on-dark); animation: silo-slide-in var(--dur-slow) cubic-bezier(0.4, 0, 0.2, 1) 0.2s both; } .silo-bar__link { font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted-on-dark); text-decoration: none; text-transform: uppercase; letter-spacing: 0.08em; transition: color var(--dur) ease, background-color var(--dur) ease; padding: 4px 8px; border-radius: 4px; } .silo-bar__link:hover, .silo-bar__link:focus { color: var(--color-off-white); background-color: rgba(249, 249, 247, 0.08); } /* Current page — non-interactive; visually distinct from nav links */ .silo-bar__current { font-family: var(--font-mono); font-size: 11px; color: var(--color-off-white); text-transform: uppercase; letter-spacing: 0.08em; padding-bottom: 2px; border-bottom: 1px solid var(--color-cobalt); } /* Default: show full text, hide short text */ .silo-bar__short { display: none; } .silo-bar__full { display: inline; } /* ========================================================================== SHARED — the chapter rail and the section head ========================================================================== */ /* Left rail: a hairline column carrying the chapter numeral, read bottom-up */ .rail { border-right: 1px solid var(--hairline-on-dark); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 64px; } .rail__label { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-muted-on-dark); writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; } /* Section head: eyebrow left, aside right, one rule beneath */ .section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding-bottom: 32px; border-bottom: 1px solid var(--color-charcoal); } .section-head__eyebrow, .section-head__aside { font-family: var(--font-mono); font-weight: 400; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-muted-on-light); } /* ========================================================================== I. HERO ========================================================================== */ .hero { position: relative; display: grid; grid-template-columns: var(--rail-width) minmax(0, 1fr); min-height: clamp(640px, calc(100vh - var(--nav-height) - var(--silo-height)), 900px); background: var(--color-charcoal); overflow: hidden; } .hero__body { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; padding: 96px 0 80px var(--space-x); } .hero__headline { font-family: var(--font-serif); font-weight: 900; font-size: clamp(52px, 12.2vw, 176px); line-height: 0.9; letter-spacing: -0.02em; color: var(--color-off-white); max-width: 900px; text-wrap: balance; } .hero__headline em { font-style: italic; font-weight: 700; } .hero__lede { display: flex; align-items: center; gap: 24px; max-width: 560px; } .hero__rule { display: block; width: 80px; height: 1px; background: var(--color-cobalt); flex-shrink: 0; } .hero__sub { font-size: 16px; line-height: 1.6; color: var(--ink-soft-on-dark); } /* The portrait sits behind the headline and runs off the right edge. A gradient on its left flank keeps the headline's contrast wherever the two overlap. */ .hero__figure { position: absolute; top: 0; right: -120px; width: 720px; height: 100%; z-index: 1; } .hero__figure::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--color-charcoal) 0%, rgba(18, 18, 18, 0.55) 30%, rgba(18, 18, 18, 0) 60%); } .hero__image { width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: grayscale(100%) contrast(1.1) brightness(0.85); } /* ========================================================================== II. PRACTICE AREAS — the oversized accordion ========================================================================== */ .practice { background: var(--color-off-white); color: var(--color-charcoal); padding: 120px var(--space-x) 160px; } .practice__item { border-bottom: 1px solid var(--hairline-on-light); } .practice__item:last-child { border-bottom: 1px solid var(--color-charcoal); } /* The row is one button: index, name, icon */ .practice__toggle { width: 100%; display: grid; grid-template-columns: 96px minmax(0, 1fr) 48px; align-items: center; gap: 16px; min-height: 128px; padding: 24px 0; text-align: left; } .practice__index { font-family: var(--font-mono); font-size: 14px; color: var(--ink-muted-on-light); transition: color var(--dur) ease; } .practice__name { font-family: var(--font-serif); font-weight: 700; font-size: clamp(26px, 3.9vw, 56px); line-height: 1; transition: transform var(--dur) ease; } /* Plus that becomes a minus: two bars, the vertical one collapses when open */ .practice__icon { position: relative; width: 24px; height: 24px; justify-self: end; } .practice__icon::before, .practice__icon::after { content: ''; position: absolute; top: 50%; left: 50%; background: currentColor; transition: transform var(--dur) ease, background-color var(--dur) ease; } .practice__icon::before { width: 24px; height: 1.5px; transform: translate(-50%, -50%); } .practice__icon::after { width: 1.5px; height: 24px; transform: translate(-50%, -50%) scaleY(1); } .practice__toggle[aria-expanded="true"] .practice__icon::after { transform: translate(-50%, -50%) scaleY(0); } .practice__toggle[aria-expanded="true"] .practice__index, .practice__toggle[aria-expanded="true"] .practice__icon, .practice__toggle:hover .practice__icon, .practice__toggle:focus-visible .practice__icon { color: var(--color-cobalt); } .practice__toggle:hover .practice__name { transform: translateX(8px); } /* Panel: two columns of copy, aligned to the name column */ @keyframes panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .practice__panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; max-width: 1040px; padding: 0 48px 56px 112px; animation: panel-in var(--dur-slow) ease both; } .practice__panel[hidden] { display: none; } .practice__lead { font-size: 16px; line-height: 1.7; } .practice__detail { font-size: 14px; line-height: 1.7; color: var(--ink-muted-on-light); } /* ========================================================================== III. RECORD — three numerals at monument scale ========================================================================== */ .record { display: grid; grid-template-columns: var(--rail-width) minmax(0, 1fr); padding: 160px var(--space-x); background: var(--color-charcoal); } .record .rail { align-items: flex-start; padding-top: 8px; padding-bottom: 0; } .record__body { padding-left: var(--space-x); } .record__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px; } .record__item { border-top: 1px solid var(--hairline-on-dark); padding-top: 32px; } .record__figure { font-family: var(--font-serif); line-height: 0.85; letter-spacing: -0.03em; color: var(--color-off-white); display: flex; align-items: flex-start; } .record__numeral { font-weight: 900; font-size: clamp(88px, 13.9vw, 200px); } .record__affix { font-weight: 700; font-size: clamp(36px, 5vw, 72px); line-height: 1.1; } .record__label { margin-top: 32px; max-width: 240px; font-family: var(--font-mono); font-size: 12px; line-height: 1.6; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-muted-on-dark); } /* ========================================================================== PROOF — the office at full bleed; a cobalt block overhangs the next section ========================================================================== */ .proof { position: relative; height: clamp(360px, 44vw, 640px); background: var(--color-charcoal); } .proof__figure, .proof__image { width: 100%; height: 100%; } .proof__image { object-fit: cover; filter: brightness(0.8); } .proof__card { position: absolute; left: var(--rail-width); bottom: -64px; z-index: 2; width: 480px; padding: 40px; background: var(--color-cobalt); color: var(--color-off-white); } .proof__meta { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; } .proof__line { margin-top: 20px; font-family: var(--font-serif); font-weight: 700; font-size: 32px; line-height: 1.2; } /* ========================================================================== IV. COUNSEL — three partners in a row ========================================================================== */ .counsel { background: var(--color-off-white); color: var(--color-charcoal); padding: 200px var(--space-x) 160px; /* 200 clears the proof card's 64px overhang */ } .counsel .section-head { margin-bottom: 64px; } .counsel__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } .counsel__portrait { width: 100%; aspect-ratio: 4 / 5; background: var(--color-charcoal); } .counsel__image { width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: grayscale(100%); } /* Stand-in tile for a portrait not yet produced: a monogram at the scale of the page's numerals, so the row reads as composed rather than incomplete. */ .counsel__portrait--pending { display: grid; place-items: center; } .counsel__monogram { font-family: var(--font-serif); font-weight: 900; font-size: clamp(56px, 7.8vw, 112px); letter-spacing: -0.02em; color: var(--color-off-white); } .counsel__name { margin-top: 20px; font-family: var(--font-serif); font-weight: 700; font-size: 28px; line-height: 1.2; } .counsel__role { margin-top: 6px; font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-muted-on-light); } /* ========================================================================== V. TESTIMONIAL ========================================================================== */ .testimonial { background: var(--color-charcoal); padding: 160px var(--space-x); text-align: center; border-bottom: 1px solid var(--hairline-on-dark); } .testimonial__inner { max-width: 1040px; margin: 0 auto; } .testimonial__rule { width: 80px; height: 1px; background: var(--color-cobalt); margin: 0 auto 56px auto; } .testimonial__quote p { font-family: var(--font-serif); font-weight: 700; font-style: italic; font-size: clamp(28px, 3.3vw, 48px); line-height: 1.3; color: var(--color-off-white); margin-bottom: 40px; } .testimonial__attribution { font-family: var(--font-mono); font-size: 13px; color: var(--ink-muted-on-dark); text-transform: uppercase; letter-spacing: 0.08em; } /* ========================================================================== CLOSER ========================================================================== */ .closer { background: var(--color-off-white); color: var(--color-charcoal); padding: 200px var(--space-x); text-align: center; } .closer__inner { max-width: 1100px; margin: 0 auto; } .closer__headline { font-family: var(--font-serif); font-weight: 900; font-size: clamp(36px, 6.7vw, 96px); line-height: 1; letter-spacing: -0.02em; text-wrap: balance; } .closer__benefit { margin: 24px 0 48px; font-size: 16px; color: var(--ink-muted-on-light); } /* Visual-only CTA — not a link, not focusable */ .closer__cta { display: inline-block; font-family: var(--font-mono); font-size: 28px; color: var(--color-cobalt); letter-spacing: 0.02em; } /* ========================================================================== FOOTER ATTRIBUTION ========================================================================== */ .attribution { background: var(--color-charcoal); padding: 24px var(--space-x); text-align: center; border-top: 1px solid var(--hairline-on-dark); } .attribution__text { font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted-on-dark); text-transform: uppercase; letter-spacing: 0.08em; } /* Underlined: inside a sentence, colour alone cannot mark the link (axe link-in-text-block) */ .attribution__link { color: rgba(249, 249, 247, 0.8); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(249, 249, 247, 0.4); transition: color var(--dur) ease, text-decoration-color var(--dur) ease; } .attribution__link:hover, .attribution__link:focus { color: var(--color-off-white); text-decoration-color: var(--color-off-white); } /* ========================================================================== RESPONSIVE — 1024px (tablet landscape) ========================================================================== */ @media (max-width: 1024px) { :root { --space-x: 32px; } .hero__body { padding-top: 64px; padding-bottom: 64px; } .hero__figure { width: 560px; right: -160px; } .practice { padding-top: 96px; padding-bottom: 120px; } .practice__toggle { grid-template-columns: 64px minmax(0, 1fr) 40px; min-height: 104px; } .practice__panel { padding-left: 80px; padding-right: 0; gap: 40px; } .record { padding-top: 120px; padding-bottom: 120px; } .record__list { gap: 40px; } .proof__card { left: var(--space-x); width: 420px; padding: 32px; } .counsel { padding-top: 160px; padding-bottom: 120px; } .testimonial { padding-top: 120px; padding-bottom: 120px; } .closer { padding-top: 160px; padding-bottom: 160px; } } /* ========================================================================== RESPONSIVE — 768px (tablet portrait / mobile landscape) ========================================================================== */ @media (max-width: 768px) { :root { --space-x: 20px; } /* Nav: hide text links and CTA, show logo and hamburger */ .nav__links { display: none; } .nav__hamburger { display: flex; } /* Mobile dropdown */ .mobile-dropdown { display: block; position: fixed; top: var(--nav-height); left: 0; right: 0; z-index: 250; /* Above grain overlay (200) and silo bar (1) */ background: var(--color-charcoal); border-bottom: 1px solid var(--hairline-on-dark); max-height: 0; overflow: hidden; visibility: hidden; transition: max-height var(--dur) ease, visibility var(--dur) ease; } .mobile-dropdown.is-open { max-height: 300px; visibility: visible; } /* The rail has no room; the chapter numerals go with it */ .rail { display: none; } /* Hero: portrait on top, headline beneath, no overlap to protect */ .hero { display: flex; flex-direction: column; min-height: 0; } .hero__figure { position: static; width: 100%; height: 56vh; order: -1; } .hero__figure::after { display: none; } .hero__image { object-position: center 20%; } .hero__body { padding: 48px var(--space-x) 64px; gap: 32px; } .practice { padding-top: 80px; padding-bottom: 96px; } .section-head { flex-direction: column; align-items: flex-start; gap: 8px; padding-bottom: 24px; } .practice__toggle { grid-template-columns: 44px minmax(0, 1fr) 32px; min-height: 88px; padding: 20px 0; } .practice__toggle:hover .practice__name { transform: none; } .practice__panel { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 0 0 40px 0; } .record { display: block; padding-top: 96px; padding-bottom: 96px; } .record__body { padding-left: 0; } .record__list { grid-template-columns: minmax(0, 1fr); gap: 48px; } .proof { height: 320px; } .proof__card { position: static; width: 100%; padding: 32px var(--space-x); } .counsel { padding-top: 96px; padding-bottom: 96px; } .counsel .section-head { margin-bottom: 40px; } /* The row survives at tablet width: three narrower portraits beat three stacked ones at 900px tall each. */ .counsel__grid { gap: 20px; } .counsel__name { font-size: 20px; margin-top: 16px; } .counsel__role { font-size: 11px; } .counsel__monogram { font-size: clamp(40px, 9vw, 72px); } .testimonial { padding-top: 96px; padding-bottom: 96px; } .closer { padding-top: 120px; padding-bottom: 120px; } .closer__cta { font-size: 20px; } } /* ========================================================================== RESPONSIVE — 480px (small mobile) ========================================================================== */ @media (max-width: 480px) { /* Silo bar: swap full text for abbreviated text */ .silo-bar__full { display: none; } .silo-bar__short { display: inline; } .silo-bar { gap: 24px; } .hero__figure { height: 48vh; } /* Phone: one column, square portraits so three of them stay a scroll, not a chapter */ .counsel__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; } .counsel__portrait { aspect-ratio: 1 / 1; } .counsel__name { font-size: 24px; } .counsel__monogram { font-size: 96px; } } /* ========================================================================== PRINT ========================================================================== */ @media print { body::before { display: none; /* Hide grain overlay */ } .nav, .silo-bar { display: none; /* Hide fixed navigation */ } body { padding-top: 0; } .hero__figure, .proof__card { position: static; } .practice__panel[hidden] { display: grid; /* Print every discipline's copy */ } }