/* ============================================================ YACT Association — stylesheet ("Monumental Navy") One sheet, no build step. THE DESIGN IN FIVE RULES 1. Navy owns the page. The site opens dark and monumental; ivory paper bands carry the long reading. White exists only in the header, so the navy lockup is at full strength on the one surface that never scrolls away. 2. Band boundaries are the letterhead wave, not straight lines. The .edge element is the visual signature: navy flows into ivory the way the mark's crescent flows. 3. The only graphic is the wave from the firm's own mark, at four scales: the header lockup, the giant drifting crescents, the wave-shaped band edges, and the near-invisible line pattern behind the bands. 4. Nothing is rounded. Radius is zero everywhere; a page of type, rules and numerals reads as an institution, not an app. 5. Motion is earned, not ambient. Everything answers the reader — scroll, hover, focus. Nothing loops on a timer, and prefers-reduced-motion silences all of it. Typography: serif display in all three scripts (Trirong / Playfair Display / Noto Serif SC), sans body, set per language on . --navy and --wave are read out of the logo artwork by _build/make_logo.py. ============================================================ */ :root { --navy: #171a49; /* the dark bands */ --navy-2: #1b1e53; /* wordmark navy — headings on light, buttons */ --navy-3: #232759; /* raised surfaces on navy */ --deep: #101233; /* footer, the darkest step */ --ink: #2b3157; /* body text on ivory */ --mid: #5a6285; /* secondary text on ivory */ --soft: #8b93b4; /* tertiary on ivory */ --wave: #779ed3; /* the blue of the wave in the mark */ --wave-deep: #4d7ab8; /* the same blue, dark enough for links on ivory */ --num: rgba(119,158,211,.5); /* the big numerals on navy */ --num-lite: #c5d3e8; /* the big numerals on ivory */ --ivory: #f8f5ee; /* the paper bands */ --ivory-2: #f2eee3; /* a step warmer, for surfaces on paper */ --hair: #ddd5c3; /* rules on paper */ --hair-2: #e9e3d4; /* the quieter rule */ --hairw: rgba(255,255,255,.16); /* rules on navy */ --white-on: rgba(255,255,255,.78); /* body text on navy */ --dim-on: rgba(255,255,255,.55); /* secondary on navy */ --wrap: 1280px; --gut: clamp(22px, 5vw, 64px); --band: clamp(72px, 9vw, 128px); --ease: cubic-bezier(.22,.61,.36,1); --ease-out: cubic-bezier(.16,1,.3,1); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--navy); color: var(--white-on); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: clamp(16px, .5vw + 14.6px, 17.5px); line-height: 1.78; -webkit-font-smoothing: antialiased; overflow-x: hidden; /* the crescents overhang the viewport */ } body.lang-th { font-family: "IBM Plex Sans Thai", system-ui, sans-serif; line-height: 1.92; } body.lang-en { font-family: "IBM Plex Sans", system-ui, -apple-system, sans-serif; } body.lang-zh { font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; line-height: 1.88; } /* ---------------------------------------------------------------- headings */ h1, h2, h3, h4 { color: #fff; margin: 0; line-height: 1.22; font-weight: 500; } body.lang-th h1, body.lang-th h2, body.lang-th h3 { font-family: "Trirong", Georgia, serif; line-height: 1.42; } body.lang-en h1, body.lang-en h2, body.lang-en h3 { font-family: "Playfair Display", Georgia, serif; } body.lang-zh h1, body.lang-zh h2, body.lang-zh h3 { font-family: "Noto Serif SC", Georgia, serif; line-height: 1.4; letter-spacing: .01em; } p { margin: 0 0 1.15em; } p:last-child { margin-bottom: 0; } a { color: inherit; text-decoration-color: var(--hairw); text-underline-offset: .22em; } a:hover { text-decoration-color: var(--wave); } img { max-width: 100%; height: auto; display: block; } :focus-visible { outline: 2px solid var(--wave); outline-offset: 3px; } .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); } .skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--navy-2); color: #fff; padding: .8em 1.2em; text-decoration: none; } .skip:focus { left: 0; } .progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--wave); z-index: 120; } /* ---------------------------------------------------------------- statement One oversized sentence, standing alone. DLA Piper opens on this and PN1 Web puts it between the practice areas and the method; here it heads the languages band, because working in three languages at the level of drafting and advocacy is the thing this firm is actually claiming. Light weight and a short measure do the work — the size alone would just read as a heading. */ .statement { font-size: clamp(1.45rem, 3vw, 2.3rem); font-weight: 300; line-height: 1.62; max-width: 34ch; margin: clamp(26px, 3.2vw, 40px) 0 0; } body.lang-th .statement { line-height: 1.72; } .statement::before { content: ""; display: block; width: 56px; height: 2px; background: var(--wave); margin-bottom: clamp(20px, 2.4vw, 30px); } /* Following a section head the wave ornament has already drawn the lead-in mark, and two rules stacked read as an accident. The statement keeps its own rule only when it stands alone. */ .sechead + .statement::before { display: none; } .sechead + .statement { margin-top: 0; } .band.dark .statement { color: #fff; } .band.dark .statement::before { background: var(--wave); } /* ---------------------------------------------------------------- header The one white surface. The bar breathes at rest and tightens once the reader commits to the page — the logo scales down with it, which is the kind of detail that reads as engineering rather than decoration. */ header.site { position: sticky; top: 0; z-index: 100; background: #fff; box-shadow: 0 1px 0 rgba(23,26,73,.08); transition: box-shadow .3s var(--ease); } header.site.lift { box-shadow: 0 10px 34px -18px rgba(16,18,51,.5); } .bar { display: flex; align-items: center; gap: 24px; min-height: 104px; transition: min-height .35s var(--ease); } header.site.lift .bar { min-height: 70px; } .brand { display: flex; align-items: center; text-decoration: none; margin-right: auto; min-width: 0; } .brand picture { flex: none; display: block; } .brand .mark { flex: none; width: 196px; height: auto; transition: width .35s var(--ease); } header.site.lift .brand .mark { width: 148px; } .brand .btext { display: none; } header nav { display: flex; align-items: center; gap: clamp(14px, 1.5vw, 26px); } header nav > a { color: var(--ink); text-decoration: none; font-size: .94rem; padding: 8px 0; position: relative; white-space: nowrap; } header nav > a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 2px; background: var(--wave-deep); transition: right .3s var(--ease); } header nav > a:hover::after, header nav > a.now::after { right: 0; } header nav > a.now { color: var(--navy-2); font-weight: 600; } .langpick { position: relative; } .langbtn { font: inherit; font-size: .82rem; letter-spacing: .06em; border: 1px solid #d5d9e6; background: transparent; color: var(--navy-2); padding: 8px 15px; cursor: pointer; white-space: nowrap; transition: background .2s var(--ease), color .2s var(--ease); } .langbtn:hover { background: var(--navy-2); color: #fff; } .langmenu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 164px; background: #fff; border: 1px solid #d5d9e6; box-shadow: 0 22px 48px -20px rgba(16,18,51,.55); padding: 4px; display: none; z-index: 10; } .langpick.open .langmenu { display: block; } .langmenu a { display: block; padding: 10px 14px; font-size: .9rem; color: var(--ink); text-decoration: none; } .langmenu a:hover { background: var(--ivory); } .langmenu a.on { color: var(--navy-2); font-weight: 600; background: var(--ivory); } .navtoggle { display: none; } /* ---------------------------------------------------------------- the wave edge The signature. Emitted between bands by build.py: a full-width crescent silhouette whose fill is the colour of the band below, drawn over the tail of the band above. */ .edge { display: block; width: 100%; height: clamp(40px, 6vw, 84px); } .edge svg { width: 100%; height: 100%; display: block; } /* ---------------------------------------------------------------- bands */ /* overflow-x: clip, not hidden: the decorative wave crescents hang past the section's right edge (563px wide, they cleared a 375px phone by 112px and left the document computing wider than the viewport). `clip` cuts them off without creating a scroll container, so the sticky rail inside these same bands keeps working — `hidden` would have killed it. The hero clips itself already. */ .band { position: relative; padding: var(--band) 0; overflow-x: clip; } .band > .wrap { position: relative; z-index: 2; } .band.dark { background: var(--navy); color: var(--white-on); } .band.dark::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url("/images/wave-pattern.svg") repeat center / 720px 120px; opacity: .1; filter: brightness(3.4); } .band.paper { background: var(--ivory); color: var(--ink); } .band.paper::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url("/images/wave-pattern.svg") repeat center / 720px 120px; opacity: .05; } .band.paper h1, .band.paper h2, .band.paper h3, .band.paper h4 { color: var(--navy-2); } .band.paper .kick { color: var(--wave-deep); } .band.paper .lede, .band.paper .lead { color: var(--mid); } .band.paper a { text-decoration-color: var(--hair); } .band.paper a:hover { text-decoration-color: var(--wave-deep); } .band.grp { scroll-margin-top: 120px; } @media (max-width: 1080px) { .band.grp { scroll-margin-top: 84px; } } /* the drifting crescents */ .wavefig { position: absolute; pointer-events: none; z-index: 1; width: min(1080px, 96vw); } .wavefig img { width: 100%; } .wavefig.tr { top: -6%; right: -16%; opacity: .5; } .wavefig.bl { bottom: -14%; left: -20%; opacity: .22; transform: scaleX(-1); } .band.paper .wavefig { opacity: .16; } /* ---------------------------------------------------------------- shared bits */ .kick { font-size: .73rem; letter-spacing: .28em; text-transform: uppercase; color: var(--wave); font-weight: 600; margin: 0 0 1.4em; } body.lang-th .kick, body.lang-zh .kick { letter-spacing: .14em; text-transform: none; } .lede { color: var(--dim-on); font-size: 1.08rem; max-width: 58ch; } .lead { color: var(--dim-on); max-width: 66ch; margin-top: .8em; } .btn { display: inline-block; background: #fff; color: var(--navy-2); text-decoration: none; padding: 1em 2.3em; font-size: .95rem; font-weight: 500; letter-spacing: .01em; border: 1px solid #fff; position: relative; overflow: hidden; transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease); } .btn:hover { background: transparent; color: #fff; transform: translateY(-2px); } .btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); } .btn.ghost:hover { background: #fff; color: var(--navy-2); border-color: #fff; } .band.paper .btn, .paperbtn { background: var(--navy-2); color: #fff; border-color: var(--navy-2); } .band.paper .btn:hover { background: transparent; color: var(--navy-2); } .band.paper .btn.ghost { background: transparent; color: var(--navy-2); border-color: var(--hair); } .band.paper .btn.ghost:hover { background: var(--navy-2); color: #fff; border-color: var(--navy-2); } .btn.small { padding: .7em 1.4em; font-size: .88rem; } .cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2.4em; } /* section head, centred — the monumental register. The wave ornament under the kicker draws itself in as the heading enters the viewport (main.js + [data-draw]). */ .sechead { text-align: center; margin: 0 auto clamp(40px, 5.5vw, 72px); max-width: 74ch; } .sechead .kick { margin-bottom: 1.15em; } .sechead .orn { display: block; width: 92px; height: 12px; margin: 0 auto 1.5em; color: var(--wave); } .band.paper .sechead .orn { color: var(--wave-deep); } .sechead h2 { font-size: clamp(1.8rem, 3.1vw, 2.7rem); } .sechead .lead { margin: 1em auto 0; } /* inside a two-column main the monumental centring would fight the rail, so it lefts */ .col-main .sechead { text-align: left; margin-left: 0; } .col-main .sechead .orn, .col-main .sechead .lead { margin-left: 0; } /* The `left` flag on sechead() used to do nothing outside .col-main — it only carried a margin-top there — so a section asking for it in a full-width band still came out centred. It now lefts on its own, which is what a band carrying a .statement needs: a centred heading over a left-aligned statement reads as two unrelated blocks. */ .sechead.left { text-align: left; margin-left: 0; } .sechead.left .orn, .sechead.left .lead { margin-left: 0; } .secgap { height: clamp(56px, 7vw, 100px); } /* ---------------------------------------------------------------- hero */ .hero { background: var(--navy); color: var(--white-on); position: relative; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url("/images/wave-pattern.svg") repeat center / 720px 120px; opacity: .1; filter: brightness(3.4); } .hero .wrap { position: relative; z-index: 2; } /* Display discipline borrowed from PN1 Web (22 Aug 2026): the headline runs larger, the tracking goes negative, and the leading closes up so the lines stack into one block instead of drifting apart. The leading is set per language rather than copied from PN1's 1.1 — that number is safe for IBM Plex Sans Thai, which sets its vowel and tone marks compactly, but our Thai headings are Trirong, a serif whose marks sit higher. Each value below is the tightest that still clears the marks; measured, not guessed. See PN1-ALIGNMENT.md. */ .hero .heroh { font-size: clamp(2.5rem, 6.4vw, 5.25rem); letter-spacing: -.02em; max-width: 21ch; margin: 0 auto .5em; font-weight: 500; } /* Measured in the browser with canvas TextMetrics at the 84px display size, taking the worst realistic stack: a line ending in a low vowel sitting under a line whose tone mark rides a tall consonant. Ink floors came out th 1.464 (Trirong), en 0.905 (Playfair), zh 0.952 (Noto Serif SC). Thai needs roughly half again what Latin needs and simply cannot take PN1's 1.1 — that number is safe only because IBM Plex Sans Thai sets its marks compactly. Thai therefore gets its density from the larger size, the negative tracking instead of from the leading. Thai is set at 1.48 rather than the 1.42 it carried before: 1.42 is 4px under the measured floor at this size, and 'ทั้งนี้' — a double stack — is ordinary in legal Thai, not a contrived case. */ body.lang-th .hero .heroh { line-height: 1.48; } body.lang-en .hero .heroh { line-height: 1.08; max-width: 19ch; } body.lang-zh .hero .heroh { line-height: 1.24; max-width: 17ch; } body.lang-zh .hero .heroh { max-width: 19ch; } .hero .lede { margin: 0 auto; } .hero .cta { justify-content: center; } .hero .wavefig.tr { top: -10%; right: -18%; width: min(1180px, 92vw); opacity: .5; } .hero .wavefig.bl { bottom: -18%; left: -20%; opacity: .2; } /* ---------------------------------------------------------------- hero deck Two slides on the Thai page, one each elsewhere. Slides are stacked in a single grid cell rather than positioned absolutely, so the section is as tall as its tallest slide and nothing below it moves when the slide changes. visibility:hidden rather than opacity alone, so the inactive slide leaves the tab order and the accessibility tree. */ .heroslides { display: grid; } .heroslide { grid-area: 1 / 1; position: relative; opacity: 0; visibility: hidden; transition: opacity .55s var(--ease), visibility 0s linear .55s; } .heroslide.is-on { opacity: 1; visibility: visible; transition-delay: 0s, 0s; } .heroslide > .wrap { position: relative; z-index: 2; text-align: center; padding-top: clamp(76px, 10vw, 150px); padding-bottom: clamp(40px, 5vw, 72px); } /* Whose half of the practice this slide is. The point of splitting the hero was to put a name against the work, so the name is part of the slide, not decoration on it. */ .heroby { margin: clamp(20px, 2.4vw, 30px) 0 0; font-size: .9rem; } .heroby a { color: #fff; text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--wave); padding-bottom: 2px; } .heroby a:hover { color: var(--wave); } .heroby span { display: block; color: var(--dim-on); font-size: .82rem; margin-top: .45em; } .herofoot { position: relative; z-index: 3; padding-bottom: clamp(40px, 5vw, 64px); } /* Chapter tabs, not paging dots: number, subject, and the partner responsible. The rule above each tab is the state — wave blue on the active one, a faint hairline otherwise. */ .heronav { display: flex; justify-content: center; gap: clamp(16px, 2.4vw, 38px); margin-bottom: clamp(28px, 3.4vw, 44px); } .herotab { background: none; border: 0; border-top: 2px solid rgba(255,255,255,.22); /* 40vw, not 42: at 375px two 42vw tabs plus the gap and the page gutters came to 381px and gave the whole page a horizontal scroll. */ padding: 13px 0 0; width: min(300px, 40vw); text-align: left; cursor: pointer; color: rgba(255,255,255,.55); transition: color .25s var(--ease), border-color .25s var(--ease); } .herotab .tnum { display: block; font-size: .66rem; letter-spacing: .14em; font-variant-numeric: tabular-nums; } .herotab .ttl { display: block; font-size: .95rem; font-weight: 600; margin-top: 6px; line-height: 1.5; } .herotab .town { display: block; font-size: .76rem; margin-top: 4px; color: rgba(255,255,255,.4); } .herotab:hover { color: rgba(255,255,255,.85); } .herotab.is-on { color: #fff; border-top-color: var(--wave); } .herotab.is-on .tnum { color: #8fb2dd; } .herotab.is-on .town { color: var(--dim-on); } .herotab:focus-visible { outline: 2px solid var(--wave); outline-offset: 4px; } @media (prefers-reduced-motion: reduce) { .heroslide { transition: none; } } @media (min-width: 1200px) { .heroslide > .wrap { text-align: left; } .heronav { justify-content: flex-start; } } /* ---------------------------------------------------------------- hero sash PN1 Web's device: the photograph is not shown as a portrait but cut into a hard-edged panel on one side, toned into the brand navy, and faded out under a gradient so it reads as material behind the type. Made by make_sash.py. It only appears from 1200px, which is also where the hero text stops being centred and moves left to make room. Below that the hero is the plain navy band it has always been — the same fallback PN1 and the reference sites use on small screens, and it keeps a 90KB image off phones entirely. */ .hero-sash { display: none; } @media (min-width: 1200px) { .hero-sash { display: block; position: absolute; top: 0; right: 0; bottom: 0; width: 46%; z-index: 1; pointer-events: none; background-position: 58% 10%; background-size: cover; /* A gentler cut than the robe sash carried. The panel holds a person, and at 20% the diagonal ran through her head. */ clip-path: polygon(11% 0, 100% 0, 100% 100%, 0 100%); } /* Only enough gradient to lose the cut edge into the navy. The robe sash could take a scrim across most of its width because tinting cloth reads as material; tinting faces reads as a filter, which is what was turned down on the team portraits. */ .hero-sash::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, var(--navy) 0%, rgba(23,26,73,.62) 9%, rgba(23,26,73,0) 26%); } /* The headline steps down here. It is the same line of Thai as before, but it now has 60% of the width instead of all of it, and at 84px that broke into five lines — a stack too tall to sit beside anything. */ /* Sized so the whole slide plus the chapter tabs land inside the first screen on an 860px-tall viewport: measured, the old scale put the tabs 74px under the fold. The qticker and scroll hint stay below it — the first screen is claim, name, action. */ .hero .heroh { font-size: clamp(2.3rem, 3.9vw, 3.4rem); } .heroslide > .wrap { padding-top: clamp(56px, 5vw, 84px); padding-bottom: clamp(20px, 2.2vw, 32px); } .heroby { margin-top: 16px; } .hero .heroh, .hero .lede, .hero .kick { margin-left: 0; margin-right: 0; max-width: none; } .hero .cta { justify-content: flex-start; } .hero .kick { text-align: left; } /* Keep the type clear of the sash. */ .hero .wrap > * { max-width: min(100%, 60%); } /* The top-right crescent lives where the photo panel is. Hiding it (the first fix) lost the watermark from the whole corner; letting it run under the panel's cut edge is what read as a torn figure in the first place. So it stays, but dissolves into the navy before it reaches the panel: no hard edge, no missing motif. */ .hero .wavefig.tr { opacity: .3; -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 14%, transparent 28%); mask-image: linear-gradient(90deg, #000 0%, #000 14%, transparent 28%); } .heronav { justify-content: flex-start; } } .scrollhint { position: relative; z-index: 2; margin: clamp(40px, 5vw, 64px) auto 0; font-size: .66rem; letter-spacing: .26em; color: rgba(255,255,255,.4); text-transform: uppercase; text-align: center; width: fit-content; } body.lang-th .scrollhint, body.lang-zh .scrollhint { letter-spacing: .12em; text-transform: none; } .scrollhint::after { content: ""; display: block; width: 1px; height: 42px; margin: 12px auto 0; background: linear-gradient(rgba(255,255,255,.42), transparent); } .qticker { margin: clamp(44px, 5.5vw, 72px) auto 0; padding-top: 26px; max-width: 760px; border-top: 1px solid var(--hairw); display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; } .qlab { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.42); font-weight: 600; flex: none; } body.lang-th .qlab, body.lang-zh .qlab { letter-spacing: .08em; text-transform: none; } .qticker .slot { position: relative; display: block; flex: 1 1 320px; min-height: 2.6em; } .qticker .slot a { position: absolute; inset: 0; opacity: 0; visibility: hidden; color: #fff; text-decoration: none; font-size: 1.02rem; border-bottom: 1px solid transparent; width: fit-content; margin: 0 auto; transition: opacity .5s var(--ease), transform .5s var(--ease); transform: translateY(6px); } .qticker .slot a.on { opacity: 1; visibility: visible; transform: none; } .qticker .slot a:hover { border-bottom-color: var(--wave); } /* The reader advances the questions. Hidden until the script un-hides it, so a page without JS shows the first question as plain text and no dead controls. */ .qnav { display: flex; align-items: center; gap: 10px; flex: none; } .qnav[hidden] { display: none; } .qnav button { width: 30px; height: 30px; padding: 0; cursor: pointer; background: none; border: 1px solid rgba(255,255,255,.24); color: #fff; font-size: .82rem; transition: border-color .2s var(--ease), background .2s var(--ease); } .qnav button:hover { border-color: var(--wave); background: rgba(255,255,255,.06); } .qcount { font-size: .72rem; color: rgba(255,255,255,.45); font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: center; } @media (prefers-reduced-motion: reduce) { .qticker .slot { min-height: 0; } .qticker .slot a { position: static; opacity: 1; visibility: visible; transform: none; display: block; margin-bottom: .4em; } } /* ---------------------------------------------------------------- page head */ .phead { background: var(--navy); color: var(--white-on); position: relative; overflow: hidden; text-align: center; padding: clamp(56px, 7.5vw, 104px) 0 clamp(44px, 5.5vw, 72px); } .phead::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url("/images/wave-pattern.svg") repeat center / 720px 120px; opacity: .1; filter: brightness(3.4); } .phead .wrap { position: relative; z-index: 2; } .phead h1 { font-size: clamp(1.9rem, 3.8vw, 3.2rem); max-width: 24ch; margin: 0 auto .5em; } .phead .lede { margin: 0 auto; } .phead .wavefig.tr { top: -18%; right: -16%; opacity: .4; } .crumb { font-size: .85rem; color: var(--dim-on); margin-bottom: 1.4em; } .crumb a { color: rgba(255,255,255,.8); text-decoration-color: var(--hairw); } .crumb span { padding: 0 .45em; color: rgba(255,255,255,.3); } .jump { list-style: none; margin: 2.4em 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .jump a { display: block; font-size: .86rem; text-decoration: none; color: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.28); padding: 9px 18px; transition: background .2s var(--ease), color .2s var(--ease); } .jump a:hover { background: #fff; color: var(--navy-2); border-color: #fff; } /* ---------------------------------------------------------------- the index The four groups as monumental rows. The numeral is the design. */ .irow { display: grid; grid-template-columns: 150px minmax(0,1fr) 48px; gap: clamp(20px, 3vw, 46px); align-items: center; padding: clamp(28px, 3.4vw, 42px) 0; border-top: 1px solid var(--hairw); text-decoration: none; color: inherit; transition: padding-left .3s var(--ease); } .irow:last-of-type { border-bottom: 1px solid var(--hairw); } .irow:hover { padding-left: 18px; } .irow .n { font-family: "Trirong", Georgia, serif; font-variant-numeric: tabular-nums; font-size: clamp(2.6rem, 4.4vw, 4.3rem); color: var(--num); line-height: 1; transition: color .3s var(--ease); } body.lang-en .irow .n { font-family: "Playfair Display", Georgia, serif; } body.lang-zh .irow .n { font-family: "Noto Serif SC", Georgia, serif; } .irow:hover .n { color: var(--wave); } .irow h3 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); margin-bottom: .3em; font-weight: 500; transition: color .3s var(--ease); } .irow:hover h3 { color: var(--wave); } .irow p { margin: 0; color: var(--dim-on); font-size: .93rem; } .irow .go { font-size: 1.6rem; color: var(--wave); justify-self: end; transition: transform .3s var(--ease); } .irow:hover .go { transform: translateX(6px); } /* ---------------------------------------------------------------- steps (paper) */ .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--hair); grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); counter-reset: none; } .steps > li { background: var(--ivory); padding: clamp(24px, 3vw, 40px) clamp(20px, 2.4vw, 32px); } .steps .n { display: block; font-family: "Trirong", Georgia, serif; font-variant-numeric: tabular-nums; font-size: 2.7rem; color: var(--num-lite); line-height: 1; margin-bottom: .45em; font-variant-numeric: tabular-nums; } body.lang-en .steps .n { font-family: "Playfair Display", Georgia, serif; } body.lang-zh .steps .n { font-family: "Noto Serif SC", Georgia, serif; } .steps h3 { font-family: inherit !important; color: var(--navy-2); font-size: 1.03rem; font-weight: 600; margin-bottom: .55em; line-height: 1.5; } .steps p { margin: 0; color: var(--mid); font-size: .9rem; line-height: 1.75; } /* approach columns (paper) */ .grid4 { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(26px, 3.4vw, 48px); grid-template-columns: repeat(auto-fit, minmax(236px, 1fr)); } .grid4 h3 { font-family: inherit !important; color: var(--navy-2); font-size: 1.06rem; font-weight: 600; margin-bottom: .6em; padding-top: 18px; border-top: 2px solid var(--navy-2); line-height: 1.5; } .grid4 p { color: var(--mid); font-size: .93rem; } /* ---------------------------------------------------------------- languages (navy) */ .langband { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); } .langband > li { padding: 14px 40px 14px 0; } .langband > li + li { border-left: 1px solid var(--hairw); padding-left: 40px; } .langband .lbig { font-family: "Trirong", Georgia, serif; font-size: clamp(2rem, 3.4vw, 3rem); color: #fff; margin: 0 0 .35em; font-weight: 500; } body.lang-en .langband .lbig { font-family: "Playfair Display", Georgia, serif; } body.lang-zh .langband .lbig { font-family: "Noto Serif SC", Georgia, serif; } .langband p { margin: 0; color: var(--dim-on); font-size: .92rem; } /* ---------------------------------------------------------------- team Natural-colour portraits, all cut to the same 4:5 by make_team.py. 160px is what the weakest source (thitiwat, 326x401) can fill at 2x DPR; the two 768x1040 files could go larger, but one crop per lawyer reused everywhere beats several derived crops that advertise the gap between them. */ .pphoto, .tsphoto { position: relative; overflow: hidden; background: var(--navy-2); aspect-ratio: 4 / 5; } .pphoto img, .tsphoto img { width: 100%; height: 100%; object-fit: cover; } .teamstrip { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(16px, 2.2vw, 30px); grid-template-columns: repeat(auto-fit, minmax(132px, 160px)); justify-content: start; } .teamstrip .tsrole { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--wave-deep); font-weight: 600; margin: 15px 0 .25em; } body.lang-th .teamstrip .tsrole, body.lang-zh .teamstrip .tsrole { letter-spacing: .04em; text-transform: none; } .teamstrip .tsname { color: var(--navy-2); font-weight: 600; font-size: .95rem; margin: 0; } .tsphoto { max-width: 160px; } /* A person's own name is set in the display serif everywhere it appears — it is an identity, not a label. The /team/ page already did this (the name is an h3); the strip on the home and about pages was the one place it fell back to the body sans. Both Kirkland and White & Case reserve serif for headlines, section labels and a person's own name, and set everything structural in sans. */ body.lang-th .teamstrip .tsname { font-family: "Trirong", Georgia, serif; } body.lang-en .teamstrip .tsname { font-family: "Playfair Display", Georgia, serif; } body.lang-zh .teamstrip .tsname { font-family: "Noto Serif SC", Georgia, serif; } .team { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); } .team > li { display: grid; gap: clamp(22px, 3.5vw, 50px); align-items: start; grid-template-columns: minmax(0, 1fr); padding: clamp(30px, 4vw, 54px) 0; border-bottom: 1px solid var(--hair); } @media (min-width: 720px) { .team > li { grid-template-columns: 160px minmax(0, 1fr); } /* A partner row carries the 640x800 cut from the 2026 shoot and gets the wider column; the three lawyers' rows stay at 160 because their source files stop there. On a browser without :has() the photo simply renders at 160 too. */ .team > li:has(.pphoto.hi) { grid-template-columns: 300px minmax(0, 1fr); } } /* ---------------------------------------------------------------- team index cards The shape of DAP's team page, adopted at the user's direction (24 Aug 2026): white cards, the portrait filling the top, name / secondary name / role / view-profile under it. Partners carry the accent rule and a dress-swap on hover; the biography and credentials live on the profile pages the cards link to. */ .tcards { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(18px, 2.4vw, 30px); /* 300 minimum lands the three lawyers as exactly three columns on the full wrap. */ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } /* The partners are two, and two 300px cards on a full-width row left half of it empty. Their row is capped and its cards run larger — which also keeps the partner portraits at 2x from the 800px files while the tier difference stays visible in card size. */ .tcards.two { grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr)); max-width: 940px; } .tcard { display: block; background: #fff; border: 1px solid var(--hair); text-decoration: none; color: var(--ink); transition: border-color .25s var(--ease); } .tcard:hover { border-color: var(--wave-deep); } .tcards > li.partner .tcard { border-top: 3px solid var(--wave-deep); } .tphoto { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--navy-2); } .tphoto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s var(--ease-out); } .tphoto img.alt { position: absolute; inset: 0; opacity: 0; transition: opacity .45s var(--ease), transform 1.1s var(--ease-out); } .tcard:hover .tphoto img.alt, .tcard:focus-visible .tphoto img.alt { opacity: 1; } /* The slow settle. It runs under the wave edge below, which is what sells the depth. */ .tcard:hover .tphoto img { transform: scale(1.045); } .tphoto .tedge { position: absolute; left: -1%; bottom: -1px; width: 102%; height: 22px; z-index: 2; pointer-events: none; } .tbody { display: block; padding: 18px 20px 20px; } .tbody h3 { font-size: 1.22rem; margin: 0 0 .15em; } /* The site's wave ornament, drawing itself under the name when the card is hovered. pathLength=1 in the markup lets the dash animate without measuring the path. */ .tuline { display: block; width: 88px; height: 10px; color: var(--wave-deep); margin: 1px 0 7px; } .tuline path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .55s var(--ease); } .tcard:hover .tuline path, .tcard:focus-visible .tuline path { stroke-dashoffset: 0; } .tlat { color: var(--soft); font-size: .8rem; margin: 0 0 .55em; } .trole { color: var(--wave-deep); font-size: .78rem; font-weight: 600; margin: 0 0 .95em; } .tmore { font-size: .85rem; color: var(--navy-2); font-weight: 600; } .tmore .go { display: inline-block; transition: transform .25s var(--ease); } .tcard:hover .tmore .go { transform: translateX(5px); } /* The three cards of a row enter one after another — each li is its own .rise, and since a row crosses the viewport line together, nth-child delays read as a stagger. */ .tcards > li:nth-child(2) { transition-delay: 90ms; } .tcards > li:nth-child(3) { transition-delay: 180ms; } /* The tier numeral, behind the section head — the same monumental register as the service families on the home page, in the numeral tone the palette already carries. */ .tier { position: relative; } .tier .sechead, .tier .tcards { position: relative; z-index: 1; } .tier .gnum { position: absolute; top: -.18em; right: 0; z-index: 0; pointer-events: none; font-family: "Trirong", Georgia, serif; font-variant-numeric: tabular-nums; font-size: clamp(110px, 13vw, 190px); line-height: 1; color: var(--num-lite); } body.lang-en .tier .gnum { font-family: "Playfair Display", Georgia, serif; } body.lang-zh .tier .gnum { font-family: "Noto Serif SC", Georgia, serif; } @media (prefers-reduced-motion: reduce) { .tphoto img, .tphoto img.alt, .tmore .go, .tcard, .pphoto img.alt, .tuline path { transition: none; } .tcards > li { transition-delay: 0ms; } } .pphoto { max-width: 160px; } .pphoto.hi { max-width: 300px; } /* The team and profile portraits are framed like a print rather than left as bare rectangles: a white mat with a hairline, over a navy plate offset down-and-right. Depth comes from the two layers, not from shadows or rounded corners — the brand's zero-radius rule holds. The strips on the home and about pages (.tsphoto) stay unframed; at 160px in a row of five, frames would read as clutter. */ .pphoto { overflow: visible; background: #fff; padding: clamp(8px, 1vw, 12px); border: 1px solid var(--hair); } .pphoto img { position: relative; z-index: 1; } /* The dress swap on a partner's profile. The alt sits inside the mat (its inset is the mat's own padding value) and fades in over the base on hover. Decorative only. */ .pphoto img.alt { position: absolute; inset: clamp(8px, 1vw, 12px); width: auto; height: auto; z-index: 1; opacity: 0; object-fit: cover; transition: opacity .45s var(--ease); } .pphoto:hover img.alt { opacity: 1; } .pphoto::before { content: ""; position: absolute; z-index: 0; top: 16px; right: -16px; bottom: -16px; left: 16px; background: var(--navy-2) repeating-linear-gradient(135deg, rgba(255,255,255,.055) 0 1px, transparent 1px 7px); } @media (min-width: 700px) { .pcolumns:has(.pphoto.hi) { grid-template-columns: 300px minmax(0, 1fr); } } .prole { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--wave-deep); font-weight: 600; margin-bottom: .8em; } body.lang-th .prole, body.lang-zh .prole { letter-spacing: .05em; text-transform: none; } .team h3 { font-size: clamp(1.35rem, 2vw, 1.7rem); margin-bottom: .12em; } .palt { color: var(--soft); font-size: .88rem; margin-bottom: 1.2em; } .pbio { color: var(--ink); max-width: 72ch; margin-bottom: 1.8em; } .pmeta { display: grid; gap: clamp(18px, 2.4vw, 36px); grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); padding-top: 22px; border-top: 1px solid var(--hair-2); } .pmeta:empty { display: none; } .plab { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); font-weight: 600; margin-bottom: .8em; } body.lang-th .plab, body.lang-zh .plab { letter-spacing: .04em; text-transform: none; } .pblock ul { list-style: none; margin: 0; padding: 0; } .pblock li { color: var(--mid); font-size: .88rem; line-height: 1.62; margin-bottom: .55em; padding-left: 15px; position: relative; } .pblock li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 1px; background: var(--hair); } /* ---------------------------------------------------------------- Q&A (paper) */ .qa { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); } .qa > li { border-bottom: 1px solid var(--hair); padding: clamp(28px, 3.4vw, 42px) 0; } .qa h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); margin-bottom: .6em; max-width: 62ch; } .qa p { color: var(--mid); max-width: 78ch; } .qa.tight { max-width: 900px; margin: 0 auto; } /* The FAQ page only — .acc. Native

, so the answer is in the markup open or shut and no script is involved. The marker is drawn here because the browser default triangle is the one rounded, OS-styled thing that would appear on a site with no rounded corners anywhere. */ .qa.acc > li { padding: 0; } .qa.acc details { padding: clamp(22px, 2.6vw, 32px) 0; } .qa.acc summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; cursor: pointer; list-style: none; } .qa.acc summary::-webkit-details-marker { display: none; } .qa.acc summary h3 { margin: 0; transition: color .2s var(--ease); } .qa.acc summary:hover h3 { color: var(--wave-deep); } .qa.acc details[open] summary h3 { color: var(--navy-2); } .qa.acc summary:focus-visible { outline: 2px solid var(--wave-deep); outline-offset: 4px; } /* A plus that becomes a minus. Two bars, one rotated away when the panel opens. */ .qmark { position: relative; flex: none; width: 16px; height: 16px; margin-top: .35em; } .qmark::before, .qmark::after { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 2px; background: var(--wave-deep); transition: transform .25s var(--ease); } .qmark::after { transform: rotate(90deg); } .qa.acc details[open] .qmark::after { transform: rotate(0deg); } .qans { padding-top: .9em; } .qans p { margin: 0; } @media (prefers-reduced-motion: reduce) { .qmark::before, .qmark::after { transition: none; } } /* the silk banner above each service group — cut from the firm's own Canva artwork */ .gbanner { margin-bottom: clamp(28px, 3.6vw, 48px); border: 1px solid var(--hair); overflow: hidden; } .gbanner img { width: 100%; height: auto; display: block; } /* ---------------------------------------------------------------- services index rows */ .rows { list-style: none; margin: 0; padding: 0; } .rows > li { border-top: 1px solid var(--hair); } .rows > li:last-child { border-bottom: 1px solid var(--hair); } .rows a { display: grid; grid-template-columns: 96px minmax(0,1fr) 40px; gap: clamp(18px, 3vw, 40px); align-items: baseline; padding: clamp(28px, 3.4vw, 44px) 0; text-decoration: none; transition: background .25s var(--ease), padding-left .25s var(--ease); } .rows a:hover { background: rgba(255,255,255,.6); padding-left: 14px; } .rows .n { font-family: "Trirong", Georgia, serif; font-variant-numeric: tabular-nums; font-size: 2rem; color: var(--num-lite); line-height: 1; } body.lang-en .rows .n { font-family: "Playfair Display", Georgia, serif; } body.lang-zh .rows .n { font-family: "Noto Serif SC", Georgia, serif; } .rows h3 { font-size: clamp(1.3rem, 2vw, 1.75rem); margin-bottom: .35em; } .rows p { color: var(--mid); font-size: .95rem; max-width: 74ch; margin-bottom: .7em; } .rows .go { font-size: 1.4rem; color: var(--wave-deep); justify-self: end; transition: transform .3s var(--ease); } .rows a:hover .go { transform: translateX(5px); } .rows.plain a { display: block; } .chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; } .chips li { font-size: .8rem; color: var(--wave-deep); border: 1px solid var(--hair); padding: 5px 13px; line-height: 1.6; background: transparent; } /* ---------------------------------------------------------------- two columns (paper) */ .cols { display: grid; gap: clamp(36px, 5vw, 84px); grid-template-columns: minmax(0,1fr); } @media (min-width: 980px) { .cols { grid-template-columns: minmax(0,1fr) 284px; } } .col-main .sechead.left { margin-top: clamp(48px, 6vw, 80px); } .col-main .sechead.left:first-child { margin-top: 0; } .col-side { align-self: start; position: sticky; top: 128px; border: 1px solid var(--hair); border-top: 3px solid var(--navy-2); background: rgba(255,255,255,.55); padding: 26px 24px; } .shead { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--soft); font-weight: 600; margin-bottom: 1em; } body.lang-th .shead, body.lang-zh .shead { letter-spacing: .05em; text-transform: none; } .slist { list-style: none; margin: 0; padding: 0; } .slist li { border-top: 1px solid var(--hair-2); } .slist li:first-child { border-top: 0; } .slist a, .slist.plainlist li { display: block; padding: 10px 0; font-size: .92rem; color: var(--ink); text-decoration: none; } .slist a:hover { color: var(--wave-deep); } .scta { margin-top: 22px; } .shead.sp { margin-top: 1.8em; } /* ---------------------------------------------------------------- lists (paper) */ .ticks { list-style: none; margin: 0; padding: 0; } .ticks li { position: relative; padding: 0 0 1em 30px; color: var(--ink); max-width: 76ch; } .ticks li::before { content: ""; position: absolute; left: 2px; top: .84em; width: 13px; height: 2px; background: var(--wave-deep); } .matters { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 clamp(22px, 3vw, 46px); grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); } .matters li { border-bottom: 1px solid var(--hair-2); } .matters a, .matters span { display: block; padding: 14px 0; font-size: .95rem; text-decoration: none; color: var(--ink); } .matters a { position: relative; padding-right: 24px; transition: color .2s var(--ease); } .matters a::after { content: "→"; position: absolute; right: 4px; color: var(--hair); transition: transform .2s var(--ease), color .2s var(--ease); } .matters a:hover { color: var(--wave-deep); } .matters a:hover::after { color: var(--wave-deep); transform: translateX(4px); } .matters span { color: var(--mid); } .article .msec { margin-bottom: clamp(30px, 3.6vw, 50px); max-width: 74ch; } .article .msec h2 { font-size: clamp(1.25rem, 2vw, 1.55rem); margin-bottom: .65em; padding-top: 18px; border-top: 2px solid var(--navy-2); } .article .msec p { color: var(--ink); } .article .qa h3 { font-size: 1.08rem; } /* ---------------------------------------------------------------- insights */ .artcards { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(24px, 3vw, 42px); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .artcards a { display: block; text-decoration: none; height: 100%; background: rgba(255,255,255,.6); border: 1px solid var(--hair); transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .artcards a:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -24px rgba(16,18,51,.4); } .acover { display: block; overflow: hidden; border-bottom: 1px solid var(--hair); } .acover img { width: 100%; height: auto; transition: transform .6s var(--ease); } .artcards a:hover .acover img { transform: scale(1.03); } .abody { display: block; padding: clamp(20px, 2.4vw, 28px); } .atag { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--wave-deep); font-weight: 600; margin: 0 0 .7em; } body.lang-th .atag, body.lang-zh .atag { letter-spacing: .05em; text-transform: none; } .artcards h3 { font-size: 1.22rem; margin-bottom: .5em; line-height: 1.5; } .artcards .abody p { color: var(--mid); font-size: .92rem; margin-bottom: 1em; } .aby { font-size: .82rem; color: var(--soft); } /* the DAP-style byline, sitting on the navy page head */ .byline { display: inline-flex; align-items: center; gap: 14px; margin-top: 22px; text-align: left; } .bphoto { flex: none; width: 46px; height: 58px; overflow: hidden; background: var(--navy-3); } .bphoto img { width: 100%; height: 100%; object-fit: cover; } .bname { display: block; color: #fff; font-weight: 600; font-size: .95rem; text-decoration: none; } .bname:hover { color: var(--wave); } .brole { display: block; color: var(--dim-on); font-size: .8rem; margin-top: 2px; } .dateline { color: var(--dim-on); font-size: .8rem; margin: 10px 0 0; letter-spacing: .02em; } /* the judgments an article rests on */ .cites { list-style: none; margin: 0; padding: 0; max-width: 74ch; } .cites > li { border-left: 3px solid var(--navy-2); background: rgba(255,255,255,.6); padding: 20px 24px; margin-bottom: 16px; } .cites .cno { font-family: "Trirong", Georgia, serif; color: var(--navy-2); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 1.02rem; margin-bottom: .45em; } body.lang-en .cites .cno { font-family: "Playfair Display", Georgia, serif; } body.lang-zh .cites .cno { font-family: "Noto Serif SC", Georgia, serif; } .cites p { color: var(--mid); font-size: .93rem; margin: 0; } /* ---------------------------------------------------------------- glossary */ .ggroup + .ggroup { margin-top: clamp(52px, 6vw, 88px); } .ghead { font-size: clamp(1.4rem, 2.2vw, 1.9rem); color: var(--navy-2); padding-bottom: 16px; border-bottom: 2px solid var(--navy-2); margin-bottom: 4px; } .band.grp .ghead, .ggroup { scroll-margin-top: 120px; } .gterms { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 clamp(24px, 3vw, 52px); grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); } .gterms li { border-bottom: 1px solid var(--hair-2); } .gterms a { display: block; padding: 18px 0; text-decoration: none; transition: padding-left .25s var(--ease); } .gterms a:hover { padding-left: 10px; } .gt { display: block; color: var(--navy-2); font-weight: 600; font-size: 1.02rem; margin-bottom: .3em; } .gt abbr { color: var(--wave-deep); font-weight: 500; text-decoration: none; } .gd { display: block; color: var(--mid); font-size: .88rem; line-height: 1.7; } .habbr { color: var(--wave); font-weight: 400; } /* ---------------------------------------------------------------- fees */ .feesteps { list-style: none; margin: 0; padding: 0; max-width: 900px; } .feesteps > li { display: grid; grid-template-columns: 84px minmax(0,1fr); gap: clamp(18px, 2.4vw, 34px); padding: clamp(24px, 3vw, 36px) 0; border-top: 1px solid var(--hair); } .feesteps > li:last-child { border-bottom: 1px solid var(--hair); } .feesteps .n { font-family: "Trirong", Georgia, serif; font-variant-numeric: tabular-nums; font-size: 2.4rem; color: var(--num-lite); line-height: 1; } body.lang-en .feesteps .n { font-family: "Playfair Display", Georgia, serif; } body.lang-zh .feesteps .n { font-family: "Noto Serif SC", Georgia, serif; } .feesteps h3 { font-size: 1.2rem; margin-bottom: .5em; } .feesteps p { color: var(--mid); margin: 0; max-width: 70ch; } .seplist { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--hair); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .seplist li { background: var(--ivory); padding: clamp(20px, 2.4vw, 28px); } .seplist strong { display: block; color: var(--navy-2); font-weight: 600; margin-bottom: .4em; } .seplist span { color: var(--mid); font-size: .9rem; line-height: 1.7; } /* ---------------------------------------------------------------- person page */ .pcolumns { display: grid; grid-template-columns: 160px minmax(0,1fr); gap: clamp(24px, 3.4vw, 46px); align-items: start; } /* .big used to run larger; it now matches .pphoto — three of the five sources cannot fill anything wider without upscaling. Kept as a hook, not a size. */ @media (max-width: 700px) { .pcolumns { grid-template-columns: 1fr; } } .plink { text-decoration: none; color: inherit; } .plink:hover { color: var(--wave-deep); } .teamstrip a { text-decoration: none; display: block; } /* ---------------------------------------------------------------- contact (paper) */ .clines { list-style: none; margin: 0 0 clamp(28px, 3.4vw, 42px); padding: 0; display: grid; gap: 1px; background: var(--hair); grid-template-columns: repeat(auto-fit, minmax(256px, 1fr)); } .clines > li { background: var(--ivory); padding: clamp(24px, 3vw, 36px); } .clang { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--wave-deep); font-weight: 600; margin-bottom: .9em; } body.lang-th .clang, body.lang-zh .clang { letter-spacing: .05em; text-transform: none; } .cwho { color: var(--navy-2); font-weight: 600; margin-bottom: .8em; } .cwho span { color: var(--soft); font-weight: 400; font-size: .85rem; } .cnum { margin-bottom: .35em; } .cnum a { font-family: "Trirong", Georgia, serif; font-variant-numeric: tabular-nums; font-size: 1.5rem; color: var(--navy-2); text-decoration: none; font-variant-numeric: tabular-nums; } body.lang-en .cnum a { font-family: "Playfair Display", Georgia, serif; } body.lang-zh .cnum a { font-family: "Noto Serif SC", Georgia, serif; } .cnum a:hover { color: var(--wave-deep); } .cmail a { font-size: .92rem; color: var(--mid); word-break: break-all; } .qrs { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(22px, 3vw, 36px); grid-template-columns: repeat(auto-fit, minmax(190px, 220px)); } .qr { border: 1px solid var(--hair); background: #fff; padding: 12px; margin-bottom: 16px; } .qr img { width: 100%; height: auto; } .qapp { color: var(--navy-2); font-weight: 600; margin-bottom: .15em; } .quse { color: var(--soft); font-size: .82rem; margin-bottom: .3em; } .qid { font-size: .88rem; color: var(--mid); word-break: break-word; } #chat { scroll-margin-top: 120px; } @media (max-width: 1080px) { #chat { scroll-margin-top: 84px; } } .ctable { margin: 0; } .crow { display: grid; grid-template-columns: 152px 1fr; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--hair-2); } .crow:first-child { border-top: 1px solid var(--hair-2); } .crow dt { color: var(--mid); font-size: .9rem; } .crow dd { margin: 0; color: var(--navy-2); } @media (max-width: 560px) { .crow { grid-template-columns: 1fr; gap: 4px; } } /* ---------------------------------------------------------------- cta band */ .cta-band { background: var(--navy); color: #fff; position: relative; overflow: hidden; padding: clamp(84px, 10vw, 148px) 0; text-align: center; } .cta-band::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url("/images/wave-pattern.svg") repeat center / 720px 120px; opacity: .1; filter: brightness(3.4); } .cta-band .wavefig { left: 50%; top: 50%; transform: translate(-50%,-50%); width: 1100px; opacity: .1; bottom: auto; right: auto; } .cta-band .wrap { position: relative; z-index: 2; } .cta-band .kick { color: rgba(255,255,255,.5); } .cta-band h2 { color: #fff; font-size: clamp(1.8rem, 3.3vw, 2.9rem); max-width: 26ch; margin: 0 auto 1.2em; } .cta-band .cta { justify-content: center; margin-top: 0; } /* ---------------------------------------------------------------- footer */ footer.site { background: var(--deep); color: rgba(255,255,255,.65); padding: clamp(56px, 7vw, 92px) 0 34px; font-size: .92rem; position: relative; overflow: hidden; } footer.site::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url("/images/wave-pattern.svg") repeat center / 720px 120px; opacity: .08; filter: brightness(3.4); } footer.site > * { position: relative; z-index: 2; } footer.site a { color: rgba(255,255,255,.86); text-decoration-color: rgba(255,255,255,.24); } footer.site a:hover { color: #fff; text-decoration-color: var(--wave); } .fgrid { display: grid; gap: clamp(30px, 4vw, 64px); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); padding-bottom: clamp(34px, 4vw, 54px); border-bottom: 1px solid rgba(255,255,255,.12); } .fbrand { grid-column: span 1; } @media (min-width: 900px) { .fbrand { grid-column: span 2; max-width: 46ch; } } .fbrand .mark { width: 240px; height: auto; margin-bottom: 26px; } .fname { color: #fff; font-weight: 600; font-size: 1.02rem; margin-bottom: .35em; } .fkick { color: rgba(255,255,255,.55); font-size: .88rem; margin-bottom: 1.5em; } .flines { font-size: .92rem; margin-bottom: .4em; } .fline { display: block; margin-bottom: 1.05em; } .fline .flab { display: block; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.4); font-weight: 600; margin-bottom: .3em; } body.lang-th .fline .flab, body.lang-zh .fline .flab { letter-spacing: .05em; text-transform: none; } .fline a { display: block; text-decoration: none; } .fline a:hover { text-decoration: underline; } .fline > a:first-of-type { font-size: 1.05rem; color: #fff; font-variant-numeric: tabular-nums; } .fline .fmail { font-size: .86rem; color: rgba(255,255,255,.58); } .fhead { color: #fff; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; margin-bottom: 1.2em; } body.lang-th .fhead, body.lang-zh .fhead { letter-spacing: .06em; text-transform: none; } .flist { list-style: none; margin: 0; padding: 0; } .flist li { margin-bottom: .6em; } .flist a { font-size: .9rem; text-decoration: none; } .flist a:hover { text-decoration: underline; } .fine { color: rgba(255,255,255,.42); font-size: .8rem; line-height: 1.75; max-width: 92ch; margin-top: 28px; } /* ---------------------------------------------------------------- chat dock */ .chatdock { position: fixed; right: clamp(14px, 2vw, 28px); bottom: clamp(16px, 3vw, 32px); z-index: 90; display: flex; flex-direction: column; gap: 12px; align-items: flex-end; } .cd-item { position: relative; } .cd-btn { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; padding: 0; border: 0; cursor: pointer; background: var(--cd, var(--navy-2)); color: #fff; box-shadow: 0 12px 26px -10px rgba(0,0,0,.5); transition: transform .25s var(--ease); } .cd-btn svg { width: 28px; height: 28px; fill: #fff; } .cd-btn:hover, .cd-btn:focus-visible { transform: translateY(-3px); } .cd-tip { position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%); white-space: nowrap; background: var(--deep); color: #fff; font-size: .8rem; padding: 8px 14px; opacity: 0; pointer-events: none; transition: opacity .2s var(--ease); } .cd-btn:hover .cd-tip, .cd-btn:focus-visible .cd-tip { opacity: 1; } @media (hover: none) { .cd-tip { display: none; } } .cd-pop { position: absolute; right: calc(100% + 12px); bottom: 0; width: 216px; padding: 12px; background: #fff; text-align: center; border: 1px solid var(--hair); box-shadow: 0 20px 48px -18px rgba(16,18,51,.6); opacity: 0; visibility: hidden; transform: translateX(6px); transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s; } .cd-item.open .cd-pop { opacity: 1; visibility: visible; transform: none; } .cd-pop img { width: 100%; height: auto; } .cd-app { color: var(--navy-2); font-weight: 600; font-size: .86rem; margin: 10px 0 .1em; } .cd-note { color: var(--soft); font-size: .78rem; margin: 0; } @media (max-width: 780px) { .chatdock { bottom: 74px; } .cd-btn { width: 48px; height: 48px; } .cd-btn svg { width: 25px; height: 25px; } } @media print { .chatdock { display: none; } } /* ---------------------------------------------------------------- sticky bar */ .stickybar { display: none; } @media (max-width: 780px) { .stickybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 110; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-top: 1px solid #d5d9e6; background: rgba(255,255,255,.97); backdrop-filter: blur(8px); padding-bottom: env(safe-area-inset-bottom); } .stickybar.js-sb { transform: translateY(110%); transition: transform .3s var(--ease); } .stickybar.js-sb.on { transform: none; } .stickybar a { text-align: center; padding: 11px 6px; text-decoration: none; font-size: .9rem; font-weight: 500; line-height: 1.25; display: flex; flex-direction: column; justify-content: center; } .sb-main { background: var(--navy-2); color: #fff; } .sb-main + .sb-main { box-shadow: inset 1px 0 0 rgba(255,255,255,.18); } .sb-main span { display: block; font-size: .66rem; letter-spacing: .06em; color: rgba(255,255,255,.6); font-weight: 400; } .sb-alt { color: var(--navy-2); } footer.site { padding-bottom: 96px; } } /* ---------------------------------------------------------------- mobile nav The breakpoint is 1080px, not 900: the nav carries nine items now (the glossary and fees pages earn their place there for the internal links alone) and at 1000px the last of them would collide with the lockup. Better to hand the whole bar to the toggle a little early than to ship a header that overlaps. */ @media (max-width: 1080px) { .bar { min-height: 74px; flex-wrap: wrap; } header.site.lift .bar { min-height: 64px; } .brand .mark, header.site.lift .brand .mark { width: 130px; } .navtoggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 40px; padding: 0 9px; cursor: pointer; background: transparent; border: 1px solid #d5d9e6; } .navtoggle span { display: block; height: 1.5px; background: var(--navy-2); transition: transform .25s var(--ease), opacity .25s var(--ease); } .navtoggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .navtoggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .navtoggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } header nav { flex-basis: 100%; display: none; flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 14px; border-top: 1px solid #e3e6ef; margin-top: 6px; } header nav.open { display: flex; } header nav > a { padding: 14px 2px; border-bottom: 1px solid #eef0f7; font-size: 1rem; } header nav > a::after { display: none; } .langpick { margin-top: 16px; } .langbtn { display: none; } .langmenu { position: static; display: flex; gap: 8px; border: 0; box-shadow: none; padding: 0; background: transparent; } .langmenu a { flex: 1; text-align: center; border: 1px solid #d5d9e6; } .col-side { position: static; } .wavefig { width: 150vw; opacity: .25; } .irow { grid-template-columns: 64px 1fr; } .irow .go { display: none; } .irow .n { font-size: 2rem; } .rows a { grid-template-columns: 52px 1fr; } .rows .go { display: none; } .langband { grid-template-columns: 1fr; } .langband > li + li { border-left: 0; padding-left: 0; border-top: 1px solid var(--hairw); margin-top: 16px; padding-top: 18px; } .teamstrip { grid-template-columns: repeat(3, minmax(0, 160px)); } } @media (max-width: 560px) { .teamstrip { grid-template-columns: repeat(2, minmax(0, 160px)); } } /* ---------------------------------------------------------------- article TOC Injected by main.js when an article has three or more sections. A flat box in the site's grammar: hairline, accent rule, no radius. The anchors need scroll room under the fixed header or every jump lands with its heading hidden. */ .toc { border: 1px solid var(--hair); border-left: 3px solid var(--wave-deep); background: rgba(255,255,255,.55); padding: clamp(18px, 2.4vw, 26px) clamp(20px, 2.8vw, 30px); margin: clamp(28px, 3.4vw, 40px) 0; } .toclab { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--wave-deep); font-weight: 600; margin: 0 0 .8em; } body.lang-th .toclab, body.lang-zh .toclab { letter-spacing: .05em; text-transform: none; } .toc ol { margin: 0; padding: 0 0 0 1.2em; } .toc li { padding: .28em 0; } .toc li::marker { color: var(--wave-deep); font-variant-numeric: tabular-nums; font-size: .85em; } .toc a { text-decoration: none; color: var(--ink); font-size: .95rem; } .toc a:hover { color: var(--wave-deep); } .article h2 { scroll-margin-top: 96px; } /* ---------------------------------------------------------------- glossary filter Injected by main.js; without JS there is no dead control, just the whole glossary. */ .gfilter { display: flex; align-items: center; gap: 16px; margin: 0 0 clamp(28px, 3.4vw, 40px); } .gfilter input { flex: 1 1 auto; max-width: 460px; font: inherit; color: var(--ink); background: rgba(255,255,255,.7); border: 1px solid var(--hair); border-radius: 0; padding: 12px 16px; } .gfilter input:focus-visible { outline: 2px solid var(--wave-deep); outline-offset: 2px; } .gcount { color: var(--soft); font-size: .85rem; font-variant-numeric: tabular-nums; } /* ---------------------------------------------------------------- motion All of it scroll- or pointer-driven. The reveals rise once; the crescents drift with the scroll (JS, transform only); the wave ornaments draw themselves in as they enter; hover states answer the pointer. Reduced motion switches every one off. */ .reveal, .rise, .stagger { opacity: 0; transform: translateY(18px); } .reveal.in, .rise.in, .stagger.in { opacity: 1; transform: none; transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); } .rise:nth-child(2) { transition-delay: .07s; } .rise:nth-child(3) { transition-delay: .14s; } .rise:nth-child(4) { transition-delay: .21s; } .rise:nth-child(5) { transition-delay: .28s; } .rise:nth-child(6) { transition-delay: .35s; } .rise:nth-child(7) { transition-delay: .42s; } /* the self-drawing wave ornament: JS sets the dash length, .in releases it */ [data-draw] path { transition: stroke-dashoffset 1.4s var(--ease-out); } @media (prefers-reduced-motion: reduce) { .reveal, .rise, .stagger { opacity: 1 !important; transform: none !important; transition: none !important; } .progress, .scrollhint { display: none; } .wavefig { transform: none !important; } [data-draw] path { transition: none !important; stroke-dashoffset: 0 !important; } .bar, .brand .mark { transition: none !important; } } /* ---------------------------------------------------------------- print */ @media print { header.site, footer.site, .stickybar, .cta-band, .progress, .navtoggle, .wavefig, .edge, .scrollhint { display: none; } body { background: #fff; color: #000; font-size: 11pt; } .band, .band.dark, .band.paper, .phead, .hero { background: none; color: #000; padding: 12pt 0; } .phead h1, .hero h1, .band.dark h2, .band.dark h3 { color: #000; } a { text-decoration: none; color: #000; } }