/* ============================================================ Day Zero (DZ) Attorneys — editorial redesign ------------------------------------------------------------ Direction: an editorial "origin" system. Deep navy is the full-bleed brand field; copper is the single bright accent. Structure is carried by hairline rules, oversized display type, and a mono coordinate/label language that treats "day zero" as the origin point a company is built from. Type roles display Bricolage Grotesque headline statements sans Spline Sans body + interface mono Spline Sans Mono labels, coordinates, meta serif Spectral (roman) pull-quotes ============================================================ */ :root { /* --- brand navy (the field) --- */ --abyss: #080f1c; /* deepest — hero / footer base */ --ink-deep: #0d1729; --ink: #14203a; /* primary navy */ --ink-soft: #26324c; /* --- copper (the accent) --- */ --copper: #de8a2c; --copper-bright: #f4ab4f; --copper-deep: #a5610f; /* --- gold: retained only for the home-page hero (first layer) --- */ --gold: #de8a2c; --gold-bright: #f4ab4f; --gold-deep: #a5610f; /* --- neutrals --- */ --paper: #ffffff; --paper-2: #f6f6f7; /* faint neutral (interior pages only) */ --paper-3: #eef0f2; --line: #d9dde0; /* soft neutral hairline */ --rule: rgba(51, 51, 51, 0.15); /* editorial hairline on light */ --rule-strong: #333333; /* --- new brand accents: cyan + grey (header, footer, dividers) --- */ --cyan: #52909b; --cyan-bright: #74aeb8; --cyan-deep: #3c7883; --grey: #333333; --grey-2: #3c4245; /* --- text --- */ --text: #26324a; --text-soft: #566074; --text-faint: #8894a6; --on-dark: #e9eef6; --on-dark-soft: #9aabc4; --on-dark-faint: #63728c; /* --- type --- */ --display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif; --sans: "Spline Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: "Spline Sans Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --serif: "Spectral", Georgia, "Times New Roman", serif; /* --- scale --- */ --maxw: 1280px; --gutter: clamp(22px, 5vw, 68px); --shadow-lift: 0 18px 50px rgba(9, 16, 30, 0.14); } /* ---------- reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* kill the default coloured box mobile browsers paint over a tapped link/button — feedback is handled with :active states instead */ -webkit-tap-highlight-color: transparent; } body { margin: 0; font-family: var(--sans); color: var(--text); background: var(--paper); line-height: 1.62; font-size: 17px; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* belt-and-suspenders: no tap box on any interactive element */ a, button, input, textarea, select, label, .post-card, .nav__toggle, [role="button"] { -webkit-tap-highlight-color: transparent; } /* ---------- flash-free font load (prevents FOUT) ---------- The page is held invisible until the web fonts are ready (or a short safety timeout fires), then fades in — so text is never painted in a fallback face first. The `fonts-loading` class is added by an inline script in each page's ; if JS is off, nothing is hidden. */ html.fonts-loading body { opacity: 0; } body { opacity: 1; transition: opacity 0.28s ease; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { font-family: var(--display); color: var(--ink); font-weight: 600; line-height: 1.04; margin: 0; letter-spacing: -0.02em; } p { margin: 0 0 1.15em; } ::selection { background: var(--cyan); color: var(--abyss); } .wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); } /* ---------- the label / coordinate language ---------- */ .eyebrow { font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cyan-deep); margin: 0 0 1.4rem; display: inline-block; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--sans); font-weight: 600; font-size: 0.92rem; line-height: 1; padding: 1.05rem 1.75rem; border-radius: 2px; border: 1px solid transparent; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; letter-spacing: 0.005em; } .btn .arr { transition: transform 0.22s ease; } .btn:hover .arr { transform: translateX(4px); } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--cyan); color: #fff; } .btn-primary:hover { background: var(--cyan-bright); } .hero .btn-primary { background: var(--gold); color: var(--abyss); } .hero .btn-primary:hover { background: var(--gold-bright); } .btn-ghost { background: transparent; color: var(--cyan-deep); border-color: var(--cyan); } .btn-ghost:hover { background: var(--cyan); color: #fff; border-color: var(--cyan) } .btn-on-dark { background: transparent; color: var(--on-dark); border-color: rgba(82, 144, 155, 0.55); } .btn-on-dark:hover { background: var(--cyan); color: var(--abyss); border-color: var(--cyan); } /* text-link button used inline in editorial contexts */ .btn-ghost.link, a.link { padding: 0; border: 0; background: none; font-family: var(--mono); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); border-radius: 0; } .btn-ghost.link:hover, a.link:hover { background: none; color: var(--cyan-deep); } /* ---------- header / nav ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--grey); border-bottom: 1px solid rgba(255, 255, 255, 0.06); transition: box-shadow 0.3s ease, border-color 0.3s ease; } .site-header.scrolled { border-bottom-color: rgba(255, 255, 255, 0.09); box-shadow: 0 10px 34px rgba(0, 0, 0, 0.2); } .nav { display: flex; align-items: center; justify-content: space-between; height: 82px; } .nav__logo img { height: 40px; width: auto; } .nav__links { display: flex; align-items: center; gap: 2.1rem; list-style: none; margin: 0; padding: 0; } /* Six items and a button need more room than five did. The gap tightens before the layout runs out of space, so that "Get in touch" is never the thing that falls off the end. */ @media (max-width: 1180px) { .nav__links { gap: 1.5rem; } } @media (max-width: 1020px) { .nav__links { gap: 1.1rem; } .nav__links a { font-size: 0.72rem; letter-spacing: 0.08em; } } /* Below this the six items plus the button genuinely do not fit, so the whole menu folds into the toggle. This is deliberately separate from the main responsive block: the nav needs to collapse earlier than the page layout needs to change. */ @media (max-width: 920px) { .nav__links { position: fixed; inset: 82px 0 auto 0; background: var(--grey); flex-direction: column; align-items: flex-start; gap: 0; padding: 1rem var(--gutter) 1.4rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); box-shadow: var(--shadow-lift); transform: translateY(-12px); opacity: 0; pointer-events: none; transition: 0.22s; z-index: 30; } .nav__links.open { transform: none; opacity: 1; pointer-events: auto; } .nav__links li { opacity: 0; transform: translateY(-8px); transition: opacity 0.28s ease, transform 0.28s ease; } .nav__links.open li { opacity: 1; transform: none; } .nav__links.open li:nth-child(1) { transition-delay: 0.05s; } .nav__links.open li:nth-child(2) { transition-delay: 0.10s; } .nav__links.open li:nth-child(3) { transition-delay: 0.15s; } .nav__links.open li:nth-child(4) { transition-delay: 0.20s; } .nav__links.open li:nth-child(5) { transition-delay: 0.25s; } .nav__links.open li:nth-child(6) { transition-delay: 0.30s; } .nav__links a { width: 100%; padding: 0.85rem 0; font-size: 0.78rem; letter-spacing: 0.11em; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .nav__links a::after { display: none; } .nav__links a[aria-current="page"] { color: var(--cyan-bright); } .nav__links .nav__cta { margin: 0.9rem 0 0; } .nav__links .nav__cta a { border-bottom: 0; } .nav__links .nav__cta .btn { width: 100%; justify-content: center; } .nav__toggle { display: block; } } .nav__links a { font-family: var(--sans); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: rgba(255, 255, 255, 0.82); position: relative; padding: 0.4rem 0; transition: color 0.18s ease; } .nav__links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px; background: var(--cyan-bright); transition: right 0.24s ease; } .nav__links a:hover, .nav__links a[aria-current="page"] { color: #fff; } .nav__links a:hover::after, .nav__links a[aria-current="page"]::after { right: 0; } /* touch feedback: colour shift on tap instead of a filled box */ .nav__links a:active { color: #fff; } .nav__links a:active::after { right: 0; } .nav__cta { margin-left: 0.4rem; } .nav__cta a { text-transform: none; letter-spacing: 0.005em; } .nav__cta a::after { display: none; } .nav__cta .btn-primary { background: var(--cyan); color: #fff; } .nav__cta .btn-primary:hover { background: var(--cyan-bright); } .nav__toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; } .nav__toggle span { display: block; width: 24px; height: 2px; background: #fff; margin: 5px 0; transition: transform 0.28s ease, opacity 0.2s ease; transform-origin: center; } /* morph the three bars into an X when the menu is open */ .nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0.4); } .nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ---------- hero ---------- */ .hero { position: relative; overflow: hidden; background: var(--cyan-deep); color: var(--on-dark); isolation: isolate; } .hero__sky, .hero__grain { position: absolute; inset: 0; z-index: -2; background: /* subtle top-highlight (unchanged) */ radial-gradient(130% 100% at 86% 118%, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 55%), /* cyan field — kept prominent, slight alpha so the skyline just reads through */ linear-gradient(178deg, rgba(86, 148, 159, 0.90) 0%, rgba(76, 136, 146, 0.88) 52%, rgba(63, 123, 135, 0.85) 100%), /* original license-free skyline, anchored to the bottom edge */ url("assets/hero-bg.svg") center bottom / cover no-repeat, #3f7b87; } .hero__sun { position: absolute; z-index: -1; right: 4%; bottom: -120px; width: 400px; height: auto; opacity: 0.92; } .hero__inner { display: grid; gap: 1.5rem; padding: clamp(84px, 13vw, 156px) 0 clamp(72px, 10vw, 120px); max-width: 900px; } .hero h1 { color: #fff; font-size: clamp(2.65rem, 6.4vw, 5rem); font-weight: 600; line-height: 0.98; letter-spacing: -0.03em; max-width: 17ch; } .hero h1 .accent { color: var(--gold-bright); font-weight: 600; letter-spacing: -0.02em; } .hero__tagline { display: block; margin-top: 0.18em; } .hero h1 .accent.typing::after { content: ""; display: inline-block; width: 3px; height: 0.82em; background: var(--gold-bright); margin-left: 5px; vertical-align: -0.06em; animation: caretBlink 0.85s step-end infinite; } @keyframes caretBlink { 50% { opacity: 0; } } .hero__lede { font-size: clamp(1.06rem, 2vw, 1.3rem); color: var(--on-dark-soft); max-width: 56ch; margin: 0.5rem 0 0; line-height: 1.55; } .hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.9rem; } .hero__eyebrow { color: var(--cyan-bright); } /* ---------- generic section ---------- */ .section { padding: clamp(70px, 9vw, 128px) 0; } .section--mist { background: var(--paper-2); } .section--ink { background: var(--ink-deep); color: var(--on-dark); } .section__head { max-width: 66ch; margin-bottom: clamp(2.4rem, 5vw, 3.8rem); } .section__head h2 { font-size: clamp(2rem, 4.4vw, 3.3rem); font-weight: 600; letter-spacing: -0.025em; } .section__head p { color: var(--text-soft); font-size: 1.12rem; margin-top: 1.2rem; max-width: 60ch; } .section--ink .section__head h2 { color: #fff; } .section--ink .section__head p { color: var(--on-dark-soft); } .lead { font-family: var(--serif); font-size: clamp(1.3rem, 2.6vw, 1.7rem); line-height: 1.42; color: var(--ink); font-weight: 500; } /* ---------- split (premise / teaser) ---------- */ .split { display: grid; grid-template-columns: 4.4fr 7.6fr; gap: clamp(2rem, 6vw, 5.5rem); align-items: start; } .split__aside { position: sticky; top: 108px; } .split__aside .eyebrow { margin-bottom: 1.6rem; } .split__aside h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 600; letter-spacing: -0.025em; } .split__aside p { color: var(--text-soft); margin-top: 1rem; } .split__main > p { font-size: 1.06rem; } .premise-quote { font-family: var(--serif); font-size: clamp(1.4rem, 2.8vw, 1.95rem); line-height: 1.34; color: var(--ink); font-weight: 500; border-left: 2px solid var(--cyan); padding-left: 1.5rem; margin: 0 0 1.6rem; letter-spacing: -0.01em; } /* ---------- compact approach triad (homepage) ---------- */ .approach { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 4vw, 3rem); margin-top: clamp(2.8rem, 6vw, 4.4rem); padding-top: clamp(2.2rem, 5vw, 3rem); border-top: 1px solid var(--rule-strong); } .approach__no { font-family: var(--mono); font-size: 0.9rem; font-weight: 500; color: var(--cyan-deep); letter-spacing: 0.1em; text-transform: uppercase; display: block; margin-bottom: 0.9rem; } .approach__item h3 { font-size: clamp(1.2rem, 2vw, 1.4rem); font-weight: 600; letter-spacing: -0.015em; margin-bottom: 0.5rem; } .approach__item p { color: var(--text-soft); font-size: 0.96rem; margin: 0; } /* ---------- publications strip (homepage) ---------- */ .pub-strip { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(1.2rem, 4vw, 3rem); margin-top: clamp(2rem, 4vw, 3rem); padding: clamp(1.6rem, 3vw, 2.3rem) clamp(1.5rem, 3vw, 2rem); background: var(--paper); border: 1px solid var(--line); border-left: 2px solid var(--cyan); border-radius: 2px; transition: transform 0.28s cubic-bezier(0.19, 1, 0.22, 1), box-shadow 0.28s ease; } .pub-strip:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); } .pub-strip__label .eyebrow { margin: 0; } .pub-strip__title { display: block; font-family: var(--display); font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 600; letter-spacing: -0.015em; color: var(--ink); margin-bottom: 0.35rem; } .pub-strip__text { display: block; color: var(--text-soft); font-size: 0.95rem; max-width: 62ch; } .pub-strip__cta { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; } .pub-strip:hover .pub-strip__cta { color: var(--cyan-deep); } .pub-strip__cta .arr { transition: transform 0.2s ease; } .pub-strip:hover .pub-strip__cta .arr { transform: translateX(4px); } /* ---------- homepage resources split (insights | publications) ---------- */ .res-split { display: grid; grid-template-columns: 1fr 1px 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; } .res-split__divider { align-self: stretch; width: 1px; background: linear-gradient(180deg, transparent, var(--cyan) 12%, var(--cyan) 88%, transparent); } .res-split__divider.reveal { opacity: 1; transform: scaleY(0); transform-origin: top center; } .res-split__divider.in { transform: scaleY(1); } .res-col__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: 1.3rem; margin-bottom: 1.9rem; border-bottom: 1px solid var(--rule-strong); } .res-col__head .eyebrow { margin: 0; } .res-col__head h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 600; letter-spacing: -0.015em; } .res-col__link { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; align-self: flex-end; } .res-col__link .arr { transition: transform 0.2s ease; } .res-col__link:hover { color: var(--cyan-deep); } .res-col__link:hover .arr { transform: translateX(4px); } .res-col .posts-grid { grid-template-columns: 1fr; gap: 0; } .res-col .post-card { border-top: 0; padding-top: 0; } .res-col .post-card + .post-card { border-top: 1px solid var(--rule); padding-top: clamp(1.4rem, 2.5vw, 1.8rem); margin-top: clamp(1.4rem, 2.5vw, 1.8rem); } .res-pub { padding: clamp(1.6rem, 3vw, 2.2rem); border: 1px solid var(--line); border-left: 2px solid var(--cyan); border-radius: 2px; background: var(--paper); } .res-pub .coming-soon__badge { margin-bottom: 1rem; color: var(--cyan-deep); } .res-pub p { color: var(--text-soft); margin: 0; max-width: 48ch; } @media (max-width: 820px) { .res-split { grid-template-columns: 1fr; gap: 2.6rem; } .res-split__divider { width: auto; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan) 15%, var(--cyan) 85%, transparent); } .res-split__divider.reveal { transform: scaleX(0); transform-origin: center; } .res-split__divider.in { transform: scaleX(1); } } /* ---------- three relationships (editorial index) ---------- */ .areas { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--rule-strong); } .area { display: grid; grid-template-columns: clamp(3.5rem, 7vw, 6rem) 1fr; grid-template-areas: "no head" "no body"; column-gap: clamp(1.4rem, 4vw, 3rem); align-items: baseline; padding: clamp(1.8rem, 4vw, 2.8rem) 0; border-bottom: 1px solid var(--rule); position: relative; background: transparent; transition: padding-left 0.28s cubic-bezier(0.2, 0.7, 0.2, 1); } .area:hover { padding-left: 0.6rem; } .area::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--cyan); transform: scaleY(0); transform-origin: top; transition: transform 0.3s ease; } .area:hover::before { transform: scaleY(1); } .area__no { grid-area: no; font-family: var(--mono); font-size: 1rem; font-weight: 500; color: var(--cyan-deep); letter-spacing: 0.1em; text-transform: uppercase; } .area h3 { grid-area: head; font-size: clamp(1.5rem, 2.8vw, 2.15rem); font-weight: 600; letter-spacing: -0.02em; transition: color 0.2s ease; } .area:hover h3 { color: var(--cyan-deep); } .area p { grid-area: body; color: var(--text-soft); font-size: 1.02rem; margin: 0.7rem 0 0; max-width: 62ch; } /* ---------- insights / editorial tiles ---------- */ .coming-soon { max-width: 660px; margin: 0 auto; text-align: center; padding: 2.5rem 0 1rem; } .coming-soon__badge { display: inline-block; font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cyan-deep); margin-bottom: 1.6rem; } .coming-soon h2 { font-size: clamp(2rem, 4vw, 2.7rem); margin: 0 0 1.2rem; letter-spacing: -0.025em; } .coming-soon p { color: var(--text-soft); margin: 0 auto 1rem; max-width: 600px; } .coming-soon a { color: var(--cyan-deep); text-decoration: underline; text-underline-offset: 3px; } .tag-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 3rem; } .tag-chip { font-family: var(--mono); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.55rem 1.05rem; border: 1px solid var(--cyan-deep); border-radius: 2px; background: var(--paper); color: var(--cyan-deep); cursor: pointer; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease; } .tag-chip:hover { border-color: var(--cyan); color: var(--cyan-deep); } .tag-chip.is-active { background: var(--cyan-deep); color: #fff; border-color: var(--cyan-deep); } .pagination { display: flex; justify-content: center; align-items: center; gap: 0.4rem; margin-top: 3.4rem; flex-wrap: wrap; } .page-btn { min-width: 44px; height: 44px; padding: 0 0.65rem; display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-weight: 500; font-size: 0.9rem; border: 1px solid var(--line); border-radius: 2px; background: var(--paper); color: var(--text-soft); cursor: pointer; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease; } .page-btn:hover:not(:disabled) { border-color: var(--ink-soft); color: var(--ink); } .page-btn.is-active { background: var(--cyan); border-color: var(--cyan); color: var(--abyss); } .page-btn:disabled { opacity: 0.4; cursor: not-allowed; } .page-arrow { font-size: 1.05rem; } .posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 3vw, 2.6rem) clamp(1.8rem, 3vw, 2.8rem); } .posts-grid--wide { grid-template-columns: repeat(3, 1fr); } .post-card { display: flex; flex-direction: column; height: 100%; background: transparent; border: 0; border-top: 2px solid var(--rule-strong); border-radius: 0; padding: 1.4rem 0 1.5rem; cursor: pointer; position: relative; transition: border-color 0.22s ease; } .post-card:hover { border-top-color: var(--cyan); } .post-card__meta { display: flex; gap: 0.7rem; align-items: center; font-family: var(--mono); font-size: 0.72rem; color: var(--text-faint); margin-bottom: 1rem; letter-spacing: 0.06em; text-transform: uppercase; } .post-card__tag { color: var(--cyan-deep); font-weight: 500; letter-spacing: 0.1em; } .post-card h3 { font-size: 1.42rem; font-weight: 600; line-height: 1.1; margin-bottom: 0.7rem; letter-spacing: -0.02em; transition: color 0.2s ease; } .post-card h3 a { color: inherit; } .post-card:hover h3 { color: var(--cyan-deep); } /* touch feedback on tap (no filled box) */ .post-card:active { border-top-color: var(--cyan); } .post-card:active h3 { color: var(--cyan-deep); } .post-card p { color: var(--text-soft); font-size: 0.98rem; margin: 0 0 1.3rem; } .post-card__more { margin-top: auto; font-family: var(--mono); font-weight: 500; font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); display: inline-flex; align-items: center; gap: 0.5rem; } .post-card:hover .post-card__more { color: var(--cyan-deep); } .post-card__more .arr { transition: transform 0.2s ease; } .post-card:hover .post-card__more .arr { transform: translateX(4px); } .post-card__link { color: inherit; } .post-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* ---------- article reader ---------- */ .article { max-width: 720px; margin: 0 auto; } .article__back { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; color: var(--text-soft); display: inline-flex; gap: 0.5rem; align-items: center; margin-bottom: 2.4rem; } .article__back:hover { color: var(--ink); } .article__meta { display: flex; gap: 0.7rem; align-items: center; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 1.4rem; } .article h1 { font-size: clamp(2.1rem, 5vw, 3.2rem); font-weight: 600; line-height: 1.03; margin-bottom: 1.6rem; letter-spacing: -0.03em; } .article__body { font-size: 1.13rem; line-height: 1.78; color: var(--text); } .article__body h2 { font-size: 1.75rem; font-weight: 600; margin: 2.4rem 0 0.9rem; letter-spacing: -0.02em; } .article__body h3 { font-size: 1.35rem; font-weight: 600; margin: 1.9rem 0 0.6rem; } .article__body p { margin: 0 0 1.35em; } .article__body ul, .article__body ol { margin: 0 0 1.35em; padding-left: 1.3em; } .article__body li { margin-bottom: 0.5em; } .article__body blockquote { border-left: 2px solid var(--cyan); padding-left: 1.4rem; margin: 1.8rem 0; font-family: var(--serif); font-size: 1.35rem; color: var(--ink-soft); } .is-hidden { display: none !important; } /* ---------- team ---------- */ .team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.8rem; } .member { background: var(--paper); border: 1px solid var(--line); border-radius: 2px; overflow: hidden; } .member__photo { aspect-ratio: 4 / 5; background: radial-gradient(120% 120% at 78% 118%, rgba(82, 144, 155, 0.32), rgba(82, 144, 155, 0) 55%), linear-gradient(160deg, #14203a, #0d1729); display: grid; place-items: center; color: var(--cyan-bright); font-family: var(--display); font-size: 3.4rem; letter-spacing: 0.02em; overflow: hidden; } .member__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; } .member--text { border-top: 2px solid var(--cyan); } .member--text .member__body { padding: 1.9rem 1.7rem 2rem; } .member--text h3 { font-size: 1.85rem; } /* ---------- flip card ---------- */ .member-flip { width: 100%; max-width: 360px; } .flip-card { perspective: 1400px; width: 100%; cursor: pointer; border: 0; background: transparent; } .flip-card__inner { position: relative; width: 100%; height: 320px; transition: transform 0.75s cubic-bezier(0.2, 0.7, 0.2, 1); transform-style: preserve-3d; } .flip-card.is-flipped .flip-card__inner { transform: rotateY(180deg); } .flip-card__face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 3px; overflow: hidden; display: flex; } .flip-card__front { background: var(--paper); border: 1px solid var(--line); border-top: 2px solid var(--cyan); flex-direction: column; justify-content: space-between; padding: 2rem 1.9rem; } .flip-card__front h3 { font-size: 2rem; margin: 0 0 0.35rem; letter-spacing: -0.02em; } .flip-card__quals { font-family: var(--mono); font-size: 0.85rem; letter-spacing: 0.06em; color: var(--text-soft); margin-top: 0.5rem; } .flip-card__hint { margin-top: auto; font-family: var(--mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan-deep); display: inline-flex; align-items: center; gap: 0.45rem; } .flip-card__hint--back { color: var(--cyan-bright); } .flip-card__back { transform: rotateY(180deg); background: var(--ink-deep); align-items: center; justify-content: center; text-align: center; padding: 2rem; } .flip-card__back-content { color: var(--on-dark); display: flex; flex-direction: column; align-items: center; gap: 0.6rem; } .flip-card__photo { width: 108px; height: 108px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(82, 144, 155, 0.6); margin-bottom: 0.25rem; } .flip-card__back-name { font-family: var(--display); font-size: 1.6rem; font-weight: 600; color: #fff; margin: 0; line-height: 1.08; letter-spacing: -0.02em; } .flip-card__quals-line { font-family: var(--mono); font-size: 0.85rem; letter-spacing: 0.08em; color: var(--cyan-bright); } .firm-members { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; width: 100%; } .firm-members .flip-card { max-width: none; } .member-flip .member__links { margin-top: 1.5rem; } /* icon links */ .icon-link { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.04em; color: var(--ink); transition: color 0.18s ease; } .icon-link svg { width: 18px; height: 18px; flex: none; } .icon-link:hover { color: var(--cyan-deep); } .member__body { padding: 1.6rem 1.6rem 1.8rem; } .member__body h3 { font-size: 1.45rem; font-weight: 600; } .member__role { color: var(--cyan-deep); font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; margin: 0.35rem 0 1rem; } .member__body p { color: var(--text-soft); font-size: 0.97rem; } .member__links { margin-top: 1rem; display: flex; gap: 1.3rem; } .member__links a { font-family: var(--mono); font-size: 0.8rem; color: var(--ink); display: inline-flex; gap: 0.4rem; align-items: center; } .member__links a:hover { color: var(--cyan-deep); } .bio { max-width: 720px; } .bio p { font-size: 1.12rem; line-height: 1.72; color: var(--text); } /* ---------- contact ---------- */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; } .field { margin-bottom: 1.3rem; } .field label { display: block; font-family: var(--mono); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.55rem; } .field input, .field textarea { width: 100%; font-family: var(--sans); font-size: 1rem; color: var(--ink); padding: 0.95rem 1.05rem; border: 1px solid var(--line); border-radius: 2px; background: var(--paper); transition: border-color 0.18s ease, box-shadow 0.18s ease; } .field textarea { resize: vertical; min-height: 160px; } .field input:focus, .field textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(82, 144, 155, 0.16); } .contact-detail { margin-bottom: 2rem; } .contact-detail .eyebrow { margin-bottom: 0.7rem; } .contact-detail a { color: var(--ink); font-weight: 500; } .contact-detail a:hover { color: var(--cyan-deep); } .form-note { font-family: var(--mono); font-size: 0.74rem; color: var(--text-faint); margin-top: 0.5rem; letter-spacing: 0.04em; } .form-status { margin-top: 1rem; font-size: 0.96rem; font-weight: 600; } .form-status.ok { color: #2c6e49; } .form-status.err { color: #b3402b; } /* ---------- CTA band ---------- */ .cta-band { background: var(--grey); color: rgba(255, 255, 255, 0.82); position: relative; overflow: hidden; border-top: 1px solid rgba(255, 255, 255, 0.08); } .cta-band__inner { padding: clamp(64px, 9vw, 108px) 0; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2.4rem 3rem; position: relative; z-index: 1; } .cta-band h2 { color: #fff; font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 600; max-width: 20ch; letter-spacing: -0.025em; } .cta-band__inner .btn { align-self: center; } .cta-band .btn-primary { background: var(--cyan); color: #fff; } .cta-band .btn-primary:hover { background: var(--cyan-bright); } .cta-band__rule { position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: radial-gradient(80% 120% at 88% 130%, rgba(82, 144, 155, 0.28), transparent 62%); z-index: 0; } .cta-band__glow { display: none; } /* ---------- footer ---------- */ .site-footer { background: var(--grey); color: rgba(255, 255, 255, 0.68); padding: clamp(56px, 7vw, 84px) 0 2.2rem; border-top: 1px solid rgba(255, 255, 255, 0.08); } .footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 2.6rem; padding-bottom: 2.8rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .footer-brand img { height: 42px; margin-bottom: 1.1rem; } .footer-brand p { font-size: 0.95rem; max-width: 36ch; color: rgba(255, 255, 255, 0.68); } .footer-col h4 { font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan-bright); margin-bottom: 1.1rem; } .footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; } .footer-col a { font-size: 0.94rem; color: rgba(255, 255, 255, 0.68); } .footer-col a:hover { color: var(--cyan-bright); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding-top: 1.8rem; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.42); } .footer-bottom a:hover { color: var(--cyan-bright); } /* ---------- interior page hero ---------- */ .page-hero { background: radial-gradient(120% 100% at 88% 120%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 55%), linear-gradient(178deg, rgba(86, 148, 159, 0.91) 0%, rgba(76, 136, 146, 0.89) 55%, rgba(63, 123, 135, 0.86) 100%), url("assets/hero-bg.svg") center bottom / cover no-repeat, #3f7b87; color: var(--on-dark); position: relative; overflow: hidden; } .page-hero__inner { padding: clamp(76px, 11vw, 138px) 0 clamp(56px, 8vw, 92px); max-width: 780px; position: relative; z-index: 1; } .page-hero h1 { color: #fff; font-size: clamp(2.4rem, 5.4vw, 4rem); font-weight: 600; line-height: 0.99; letter-spacing: -0.03em; } .page-hero p { color: var(--on-dark-soft); font-size: 1.16rem; margin-top: 1.2rem; max-width: 56ch; line-height: 1.55; } .page-hero__glow { position: absolute; right: -30px; bottom: -150px; width: 360px; height: auto; opacity: 0.5; } .page-hero__inner .eyebrow { color: rgba(255, 255, 255, 0.88); } /* ---------- reveal ---------- */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.95s cubic-bezier(0.19, 1, 0.22, 1), transform 0.95s cubic-bezier(0.19, 1, 0.22, 1); will-change: opacity, transform; } .reveal.in { opacity: 1; transform: none; } .areas .reveal:nth-child(2) { transition-delay: 0.08s; } .areas .reveal:nth-child(3) { transition-delay: 0.16s; } .approach .approach__item:nth-child(2) { transition-delay: 0.1s; } .approach .approach__item:nth-child(3) { transition-delay: 0.2s; } .split__aside .reveal:nth-child(2) { transition-delay: 0.06s; } .split__aside .reveal:nth-child(3) { transition-delay: 0.12s; } /* ---------- justified prose (no hyphenation, so no end-of-line hyphens) ---------- */ .split__main p, .section .wrap > p, .section__head p, .article__body p, .bio p { text-align: justify; text-justify: inter-word; -webkit-hyphens: none; hyphens: none; overflow-wrap: break-word; word-break: normal; } /* short or display text stays ragged-left */ .premise-quote, .lead, .approach__item p, .pub-strip__text, .post-card p, .form-note, .form-status, .contact-detail p, .member__role { text-align: left !important; } /* ---------- entrance + ambient motion ---------- */ @keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } .hero__inner > * { opacity: 0; animation: fadeUp 0.95s cubic-bezier(0.19, 1, 0.22, 1) forwards; } .hero__inner > *:nth-child(1) { animation-delay: 0.05s; } .hero__inner > *:nth-child(2) { animation-delay: 0.55s; } .hero__inner > *:nth-child(3) { animation-delay: 0.66s; } /* headline rises and unveils behind a wipe */ @keyframes heroReveal { from { opacity: 0; transform: translateY(30px); clip-path: inset(0 0 108% 0); } to { opacity: 1; transform: translateY(0); clip-path: inset(0 0 -8% 0); } } .hero h1 { animation: heroReveal 1.1s cubic-bezier(0.19, 1, 0.22, 1) both; } /* a single slow light sweep passes across the hero on load */ .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(72deg, transparent 34%, rgba(244, 171, 79, 0.09) 50%, transparent 66%); animation: heroSweep 2.9s cubic-bezier(0.19, 1, 0.22, 1) 0.35s both; } @keyframes heroSweep { 0% { transform: translateX(-45%); opacity: 0; } 35% { opacity: 1; } 100% { transform: translateX(45%); opacity: 0; } } /* the atmosphere breathes */ @keyframes skyBreath { 0%, 100% { opacity: 1; } 50% { opacity: 0.82; } } .hero__sky { animation: skyBreath 12s ease-in-out infinite; } /* the compass settles like a needle finding north, glowing softly */ @keyframes compassSettle { 0%, 100% { transform: rotate(-3.5deg); } 50% { transform: rotate(3.5deg); } } @keyframes compassGlow { 0%, 100% { opacity: 0.82; } 50% { opacity: 1; } } .hero__sun { animation: compassSettle 18s ease-in-out infinite, compassGlow 9s ease-in-out infinite; transform-origin: center; } .page-hero__glow { animation: compassSettle 22s ease-in-out infinite, compassGlow 11s ease-in-out infinite; transform-origin: center; } /* animated divider between the two middle sections */ .section-divider { padding: clamp(8px, 2vw, 20px) var(--gutter); } .section-divider.reveal { opacity: 1; transform: none; } .section-divider__inner { position: relative; max-width: var(--maxw); margin: 0 auto; height: 12px; display: flex; align-items: center; justify-content: center; } .section-divider__line { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan) 22%, var(--cyan) 78%, transparent); transform: scaleX(0); transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1); } .section-divider.in .section-divider__line { transform: scaleX(1); } .section-divider__dot { position: relative; z-index: 1; width: 8px; height: 8px; background: var(--cyan); transform: rotate(45deg) scale(0); transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1) 0.5s; } .section-divider.in .section-divider__dot { transform: rotate(45deg) scale(1); } .section-divider__dot::after { content: ""; position: absolute; inset: -6px; border: 1px solid var(--cyan); opacity: 0; animation: dividerPulse 3.4s ease-in-out 1.1s infinite; } @keyframes dividerPulse { 0%, 100% { opacity: 0; transform: scale(0.8); } 50% { opacity: 0.5; transform: scale(1.25); } } /* draw-in underline on inline content links */ .article__body a, .bio a { color: var(--cyan-deep); text-decoration: none; background-image: linear-gradient(var(--cyan), var(--cyan)); background-size: 0% 1.5px; background-repeat: no-repeat; background-position: left 100%; transition: background-size 0.3s ease; padding-bottom: 1px; } .article__body a:hover, .bio a:hover { background-size: 100% 1.5px; } /* ============================================================ Tap / press feedback (see .is-pressed in script.js) Applied instantly on pointerdown so a tap is acknowledged before the page navigates — no default highlight box. ============================================================ */ /* make the pressable elements animate colour + movement smoothly */ .btn, .post-card, .tag-chip, .page-btn, .nav__links a, .flip-card, .res-col__link, .article__back, .footer-col a, .footer-brand a { transition-property: color, background-color, border-color, transform, opacity, box-shadow; transition-duration: 0.2s; transition-timing-function: ease; } /* buttons — press in slightly, arrow nudges forward */ .btn.is-pressed { transform: translateY(1px) scale(0.98); } .btn.is-pressed .arr { transform: translateX(4px); } .btn-primary.is-pressed { background: var(--cyan-bright); } .hero .btn-primary.is-pressed { background: var(--gold-bright); } .btn-ghost.is-pressed { background: var(--cyan); color: #fff; border-color: var(--cyan); } .btn-on-dark.is-pressed { background: var(--cyan); color: var(--abyss); border-color: var(--cyan); } /* nav links — colour + a small nudge (no box) */ .nav__links a.is-pressed { color: #fff; transform: translateX(3px); } .nav__links a.is-pressed::after { right: 0; } /* article / insight cards — the whole card lifts and turns cyan */ .post-card.is-pressed { border-top-color: var(--cyan); transform: translateY(-3px); } .post-card.is-pressed h3 { color: var(--cyan-deep); } .post-card.is-pressed .post-card__more { color: var(--cyan-deep); } .post-card.is-pressed .post-card__more .arr { transform: translateX(5px); } /* filter chips + pagination */ .tag-chip.is-pressed { border-color: var(--cyan); color: var(--cyan-deep); transform: translateY(1px); } .page-btn.is-pressed { border-color: var(--cyan); color: var(--cyan-deep); transform: translateY(1px); } /* team flip cards */ .flip-card.is-pressed { transform: scale(0.99); } /* plain editorial + footer links */ .res-col__link.is-pressed, .article__back.is-pressed { color: var(--cyan-deep); } .res-col__link.is-pressed .arr { transform: translateX(4px); } .footer-col a.is-pressed, .footer-brand a.is-pressed { color: var(--cyan-bright); } .article__body a.is-pressed, .bio a.is-pressed { background-size: 100% 1.5px; } /* universal safety net: any other link still dims on tap (safe on any bg) */ a:not(.btn).is-pressed { opacity: 0.6; } /* ============================================================ A little more motion, used sparingly ============================================================ */ /* insight/article cards fade up as they render, with a gentle stagger */ @keyframes cardRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } .posts-grid .post-card { animation: cardRise 0.55s cubic-bezier(0.22, 0.7, 0.24, 1) both; } .posts-grid .post-card:nth-child(2) { animation-delay: 0.06s; } .posts-grid .post-card:nth-child(3) { animation-delay: 0.12s; } .posts-grid .post-card:nth-child(4) { animation-delay: 0.18s; } .posts-grid .post-card:nth-child(5) { animation-delay: 0.24s; } .posts-grid .post-card:nth-child(6) { animation-delay: 0.30s; } /* desktop hover: the card lifts a touch and its arrow leans in */ @media (hover: hover) { .post-card:hover { transform: translateY(-3px); } .post-card:hover .post-card__more .arr { transform: translateX(5px); } .res-col__link:hover .arr, .article__back:hover .arr { transform: translateX(4px); } } .post-card__more .arr, .res-col__link .arr, .article__back .arr { transition: transform 0.2s ease; } /* ---------- responsive ---------- */ @media (max-width: 1100px) { .hero__inner { padding-bottom: clamp(200px, 34vw, 300px); } .hero__sun { width: clamp(250px, 32vw, 330px); right: -60px; bottom: -140px; opacity: 0.6; } .split__aside { position: static; } } @media (max-width: 920px) { .split, .contact-grid { grid-template-columns: 1fr; } .posts-grid, .posts-grid--wide { grid-template-columns: 1fr 1fr; } .footer-top { grid-template-columns: 1fr 1fr; } .cta-band__inner { grid-template-columns: 1fr; } } @media (max-width: 680px) { .nav__links { position: fixed; inset: 82px 0 auto 0; background: var(--grey); flex-direction: column; align-items: flex-start; gap: 0; padding: 1rem var(--gutter) 1.4rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); box-shadow: var(--shadow-lift); transform: translateY(-12px); opacity: 0; pointer-events: none; transition: 0.22s; } .nav__links.open { transform: none; opacity: 1; pointer-events: auto; } /* each menu row eases in with a small stagger once the panel opens */ .nav__links li { opacity: 0; transform: translateY(-8px); transition: opacity 0.28s ease, transform 0.28s ease; } .nav__links.open li { opacity: 1; transform: none; } .nav__links.open li:nth-child(1) { transition-delay: 0.05s; } .nav__links.open li:nth-child(2) { transition-delay: 0.10s; } .nav__links.open li:nth-child(3) { transition-delay: 0.15s; } .nav__links.open li:nth-child(4) { transition-delay: 0.20s; } .nav__links.open li:nth-child(5) { transition-delay: 0.25s; } .nav__links.open li:nth-child(6) { transition-delay: 0.30s; } .nav__links a { width: 100%; padding: 0.85rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .nav__links a::after { display: none; } .nav__links a[aria-current="page"] { color: var(--cyan-bright); } .nav__links .nav__cta { margin: 0.9rem 0 0; } .nav__links .nav__cta .btn { width: 100%; justify-content: center; } .nav__toggle { display: block; } .posts-grid, .posts-grid--wide { grid-template-columns: 1fr; } .footer-top { grid-template-columns: 1fr; gap: 1.9rem; } body { font-size: 16px; } .hero__inner, .page-hero__inner, .cta-band__inner { padding-left: var(--gutter); padding-right: var(--gutter); } .hero__inner { padding-bottom: clamp(160px, 40vw, 210px); } .hero__sun { width: 290px; right: -60px; bottom: -140px; opacity: 0.82; } .page-hero__glow { width: 210px; right: -50px; bottom: -120px; opacity: 0.42; } .area { grid-template-columns: 1fr; grid-template-areas: "no" "head" "body"; row-gap: 0.5rem; } .area__no { margin-bottom: 0.2rem; } .section__head[style] { display: block !important; } .section__head[style] .btn { margin-top: 1.2rem; } } /* ---------- accessibility ---------- */ :focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } .hero__inner > * { opacity: 1; } .hero h1 { clip-path: none !important; opacity: 1 !important; } .hero::after { display: none; } .section-divider__line { transform: scaleX(1) !important; } .section-divider__dot { transform: rotate(45deg) scale(1) !important; } .section-divider__dot::after { display: none; } } /* ============================================================ Resources index: three stacked sections ------------------------------------------------------------ Tools, Insights and Publications each get a band rather than a card grid, so the page keeps the same three-level rhythm as the rest of the site instead of growing a long middle. ============================================================ */ .res-index { border-top: 1px solid var(--rule); margin-top: clamp(8px, 2vw, 20px); } .res-section { display: grid; grid-template-columns: 68px minmax(0, 1fr) auto; gap: clamp(18px, 3vw, 40px); align-items: start; padding: clamp(30px, 4.4vw, 52px) 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: inherit; transition: background 0.18s ease; } .res-section:hover { background: var(--paper-2); } .res-section:hover .res-section__go { color: var(--cyan-deep); } .res-section:hover .res-section__go span { transform: translateX(4px); } .res-section__index { font-family: var(--mono); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.16em; color: var(--text-faint); padding-top: 0.4rem; } .res-section__body { min-width: 0; } .res-section__body h2 { font-size: clamp(1.5rem, 3vw, 2.05rem); margin-bottom: 0.6rem; } .res-section__body p { color: var(--text-soft); max-width: 58ch; margin: 0; font-size: 0.97rem; } .res-section__aside { display: flex; flex-direction: column; align-items: flex-end; gap: 0.9rem; text-align: right; } .res-section__count { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan-deep); white-space: nowrap; } .res-section--soon .res-section__count { color: var(--copper-deep); } .res-section__go { font-family: var(--sans); font-weight: 500; font-size: 0.92rem; color: var(--ink); white-space: nowrap; transition: color 0.18s ease; } .res-section__go span { display: inline-block; transition: transform 0.18s ease; margin-left: 0.3rem; } .res-section--soon { cursor: default; } .res-section--soon:hover { background: transparent; } @media (max-width: 720px) { .res-section { grid-template-columns: minmax(0, 1fr); gap: 0.9rem; padding: 28px 0; } .res-section__index { padding-top: 0; } .res-section__aside { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; text-align: left; } } /* ---------- resources index: three parallel columns ---------- */ .res-split--three { grid-template-columns: 1fr 1px 1fr 1px 1fr; } @media (max-width: 980px) { .res-split--three { grid-template-columns: minmax(0, 1fr); gap: clamp(2.2rem, 6vw, 3rem); } .res-split--three .res-split__divider { width: 100%; height: 1px; align-self: auto; background: linear-gradient(90deg, transparent, var(--cyan) 12%, var(--cyan) 88%, transparent); } .res-split--three .res-split__divider.reveal { transform: scaleX(0); transform-origin: left center; } .res-split--three .res-split__divider.in { transform: scaleX(1); } } /* items in the tools column, matching the rhythm of the post cards sitting beside them */ .res-list { display: block; } .res-item { display: block; color: inherit; text-decoration: none; } .res-item + .res-item { border-top: 1px solid var(--rule); padding-top: clamp(1.4rem, 2.5vw, 1.8rem); margin-top: clamp(1.4rem, 2.5vw, 1.8rem); } .res-item__meta { display: flex; align-items: center; gap: 0.55rem; font-family: var(--mono); font-size: 0.72rem; color: var(--text-faint); margin-bottom: 0.7rem; } .res-item h3 { font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.25; margin-bottom: 0.5rem; transition: color 0.18s ease; } .res-item:hover h3 { color: var(--cyan-deep); } .res-item p { color: var(--text-soft); font-size: 0.94rem; margin: 0; line-height: 1.6; }