/* ===================================================================== Hayley Bance — site system The homepage is the source of truth; this file is that homepage's language, extracted. Every page loads site.css + site.js, then a thin page file for its own compositions (e.g. styles/home.css). Two systems run at once: SURFACE type · colour · grid · space · imagery · composition RELATIONSHIP connector lines · nodes · labels · project navigation Index 1 Tokens 7 Connector primitives 2 Base 8 Motion primitives 3 Environments 9 Links & project links 4 Grid & layout 10 Case-study components 5 Typography roles 11 Accessibility & states 6 Global header 12 Responsive + reduced motion ===================================================================== */ /* 1 ─ Tokens ─────────────────────────────────────────────────────────── */ :root { /* colour: environments */ --cream: #F3ECDE; /* primary editorial ground */ --paper: #EBE4D5; /* quiet neutral */ --sage: #CBD5C6; /* StreamLine */ --lime: #D9EE78; /* ReusePass */ --forest: #0C2A28; /* AI — matches the product video ground */ --coral: #E0583A; /* contact, strong punctuation */ --ink: #1D1A15; /* text, dark ground */ --ink-2: #514A40; /* secondary text (re-set per environment) */ /* colour: relationship system */ --conn: #C3E05A; /* connector on dark grounds + photography */ --conn-deep: #45590E; /* connector on pale grounds (≥5:1 on sage) */ /* type */ --serif: 'Newsreader', Georgia, serif; --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace; --t-display: clamp(3.2rem, 7.1vw, 9.2rem); /* hero / case-study title */ --t-section: clamp(2.6rem, 6.4vw, 8rem); /* project section headline */ --t-section-s: clamp(2.3rem, 4.8vw, 5.6rem); /* interlude headline */ --t-number: clamp(5rem, 11vw, 12rem); /* 01 / 02 / 03 */ --t-statement: clamp(1.9rem, 3.4vw, 3.6rem); /* editorial sentence */ --t-subhead: clamp(1.2rem, 1.6vw, 1.55rem); --t-lede: clamp(1.3rem, 1.8vw, 1.7rem); --t-body: 19px; --t-body-s: 17px; --t-meta: 11.5px; /* mono labels */ --t-caption: 11px; --t-metric: clamp(2.2rem, 3.2vw, 3.4rem); --lh-display: .9; --tr-display: -0.042em; /* space */ --m: clamp(20px, 4vw, 64px); /* page margin */ --g: clamp(14px, 1.6vw, 24px); /* gutter */ --col: calc((100vw - 2 * var(--m) - 11 * var(--g)) / 12); --s-1: 6px; --s-2: 12px; --s-3: 18px; --s-4: 28px; --s-5: 44px; --s-6: clamp(56px, 7vw, 110px); /* block gap */ --s-7: clamp(72px, 9vw, 140px); /* section padding */ --s-8: clamp(110px, 14vw, 210px); /* chapter gap */ --measure: 34ch; /* body text column */ --measure-wide: 46ch; /* motion */ --ease: cubic-bezier(.2,.7,.2,1); --ed: cubic-bezier(.22,.61,.36,1); /* editorial ease-out, no overshoot */ --dur-micro: .25s; --dur-type: .7s; --dur-img: 1s; --dur-line: 1.2s; } /* 2 ─ Base ───────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { overflow-x: clip; -webkit-text-size-adjust: 100%; background: linear-gradient(var(--cream) 50%, var(--coral) 50%); } /* overscroll: cream above the header, coral below the footer */ body { position: relative; margin: 0; font-family: var(--serif); font-size: var(--t-body); line-height: 1.5; -webkit-font-smoothing: antialiased; } img, video { display: block; max-width: 100%; } a { color: inherit; } p { margin: 0; } h1, h2, h3 { margin: 0; font-weight: 400; } figure { margin: 0; } /* 3 ─ Environments ────────────────────────────────────────────────────── One field for the whole page. Sections declare data-env; site.js sets body[data-env] to whichever section crosses the viewport's middle. Hard change — never interpolated. */ body, body[data-env="cream"] { --bg: var(--cream); --fg: var(--ink); --ink-2: #514A40; --bgn: var(--cream); } body[data-env="paper"] { --bg: var(--paper); --fg: var(--ink); --ink-2: #514A40; --bgn: var(--paper); } body[data-env="sage"] { --bg: var(--sage); --fg: var(--ink); --ink-2: #464C44; --bgn: var(--sage); } body[data-env="lime"] { --bg: var(--lime); --fg: var(--ink); --ink-2: #474C27; --bgn: var(--lime); } body[data-env="forest"] { --bg: var(--forest); --fg: var(--cream); --ink-2: rgba(243,236,222,.7); --bgn: var(--forest); } body[data-env="coral"] { --bg: var(--coral); --fg: var(--ink); --ink-2: rgba(29,26,21,.78); --bgn: var(--coral); } body { background: var(--bg); color: var(--fg); } [data-env]:not(body) { background: transparent; color: var(--fg); } .rule { border-color: color-mix(in srgb, currentColor 26%, transparent); } /* 4 ─ Grid & layout ─────────────────────────────────────────────────── */ .pad { padding-left: var(--m); padding-right: var(--m); } .grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--g); } .bleed { margin-left: calc(var(--m) * -1); margin-right: calc(var(--m) * -1); } /* inside .pad → edge to edge */ /* column spans: .c-{start}-{span} e.g. .c-4-6 = column 4, 6 wide */ .c-full { grid-column: 1 / -1; } .c-1-3 { grid-column: 1 / span 3; } .c-1-4 { grid-column: 1 / span 4; } .c-1-5 { grid-column: 1 / span 5; } .c-1-6 { grid-column: 1 / span 6; } .c-1-7 { grid-column: 1 / span 7; } .c-1-8 { grid-column: 1 / span 8; } .c-4-6 { grid-column: 4 / span 6; } .c-4-9 { grid-column: 4 / span 9; } .c-5-8 { grid-column: 5 / span 8; } .c-7-6 { grid-column: 7 / span 6; } .c-8-5 { grid-column: 8 / span 5; } .c-9-4 { grid-column: 9 / span 4; } /* Section label — the running head every chapter opens with */ .run { display: flex; justify-content: space-between; gap: 24px; padding-top: 14px; padding-bottom: 14px; opacity: .75; } .run b { font-weight: 500; } /* 5 ─ Typography roles ─────────────────────────────────────────────── */ .mono, .t-meta { font-family: var(--mono); font-size: var(--t-meta); letter-spacing: 0.02em; line-height: 1.5; } .t-display { font-size: var(--t-display); font-weight: 330; letter-spacing: var(--tr-display); line-height: var(--lh-display); } .t-display em, .t-section em { font-weight: 300; letter-spacing: -0.035em; } .t-section { font-size: var(--t-section); font-weight: 340; letter-spacing: -0.04em; line-height: .88; } .t-section-s{ font-size: var(--t-section-s); letter-spacing: -0.03em; line-height: .96; } .t-statement{ font-size: var(--t-statement); letter-spacing: -0.025em; line-height: 1.08; font-weight: 350; } .t-subhead { font-size: var(--t-subhead); font-style: italic; line-height: 1.35; color: var(--ink-2); max-width: var(--measure); } .t-lede { font-size: var(--t-lede); line-height: 1.32; letter-spacing: -0.01em; } .t-body { font-size: var(--t-body); line-height: 1.55; max-width: 60ch; } .t-body p + p { margin-top: 1em; } .t-caption { font-family: var(--mono); font-size: var(--t-caption); line-height: 1.45; letter-spacing: .02em; color: var(--ink-2); } .num { font-style: italic; font-weight: 300; letter-spacing: -0.05em; line-height: .78; } .t-number { font-size: var(--t-number); } /* 6 ─ Global header ─────────────────────────────────────────────────── */ .nav { position: absolute; top: 0; left: 0; right: 0; z-index: 4; display: flex; justify-content: space-between; padding-top: 26px; padding-bottom: 26px; } .nav a { text-decoration: none; padding: 6px 0; } .nav__id b { font-weight: 500; } .nav__id span { opacity: .7; margin-left: 14px; } .nav nav { display: flex; gap: 28px; } .nav nav a:hover { color: var(--ink-2); } .nav nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; } /* 7 ─ Connector primitives ────────────────────────────────────────────── One SVG layer (#thread, injected by site.js) draws lines between nodes. A line is declared on its start node: data-to="id" data-shape="h|v" data-tone="deep|lime" data-o=".9" data-delay="ms" data-dash data-fade="ends" data-desk (desktop only) data-group="name" (else closest [data-rel]) It draws when its group's [data-rel] block is first in view. */ #thread { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 2; overflow: visible; } #thread path { fill: none; stroke-width: 1; stroke-linecap: round; transition-property: opacity, stroke-dashoffset; transition-duration: .5s, var(--dur-line); transition-timing-function: ease, var(--ed); } #thread path.dash { stroke-dasharray: 2 5; } /* node */ .nd { position: absolute; width: 0; height: 0; z-index: 3; pointer-events: none; --c: var(--conn-deep); --bg: transparent; --tx: var(--conn-deep); } .nd::before { content: ""; position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--bgn); border: 1.25px solid var(--c); } .nd.fill::before { background: var(--c); } .nd.dot::before { width: 6px; height: 6px; left: -3px; top: -3px; background: var(--c); } /* label (on the node) */ .nd[data-label]::after { content: attr(data-label); position: absolute; left: 11px; top: -9px; padding: 3px 6px 2px; background: var(--bg); font: 400 10.5px/1.1 var(--mono); letter-spacing: .02em; color: var(--tx); white-space: nowrap; } .nd.l::after { left: auto; right: 11px; } .nd.t::after { left: 50%; transform: translateX(-50%); top: -26px; } .nd.b::after { left: 50%; transform: translateX(-50%); top: 10px; } /* tone: on photography or dark grounds */ .nd.on-img { --c: var(--conn); --bgn: var(--ink); --bg: var(--ink); --tx: var(--conn); } .nd.on-img::before { background: var(--ink); } body[data-env="forest"] .nd:not(.on-img) { --c: var(--conn); --bg: var(--forest); --tx: var(--conn); } /* callout — boxed label a line runs to; anchors (.a) are the line ends */ .callout { position: absolute; z-index: 2; transform: translateY(-50%); font: 500 11px/1.25 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--conn-deep); border: 1px solid var(--conn-deep); padding: 11px 16px; white-space: nowrap; background: var(--bg); } .callout.is-end { background: var(--conn-deep); color: var(--bg); } .callout .a { position: absolute; width: 0; height: 0; top: 50%; left: 0; } .callout .a.r { left: 100%; } .callout .a.b { top: 100%; left: 22px; } .callout .a.t { top: 0; left: 22px; } /* states: dormant until the relationship is in view */ [data-rel] .nd, .callout { transition: opacity .5s var(--ed); transition-delay: var(--d, 0ms); } .js [data-rel]:not(.seen) .nd, .js [data-rel]:not(.seen) .callout, .js [data-rel-also]:not(.seen) .callout { opacity: 0; } /* 8 ─ Motion primitives ───────────────────────────────────────────────── Colour = chapter · Type = reveal · Imagery = presence · Connector = relationship · Video = interaction · Hover = discovery. Blocks with [data-in] resolve once when in view (site.js adds .in); children opt in. Stagger with style="--d:120ms". */ .js .rv { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-type) var(--ed), transform var(--dur-type) var(--ed); transition-delay: var(--d, 0ms); } .js .rv-soft { transform: translateY(8px); } .js .rv-img { transform: translateY(28px); transition-duration: .9s, 1s; } .js .in .rv, .js .rv.in, .js .in.rv { opacity: 1; transform: none; } /* masked line reveal: One line */ .js .ln { display: block; overflow: hidden; padding: .12em .12em .18em; margin: -.12em -.12em -.18em; } .js .ln > span { display: block; transform: translateY(135%); transition: transform .8s var(--ed); transition-delay: var(--d, 0ms); } .js .in .ln > span { transform: none; } /* image presence: settles from a slight scale */ .img-reveal { overflow: hidden; } .js .img-reveal img, .js .img-reveal video { opacity: 0; transform: scale(var(--from, 1.04)); transform-origin: var(--origin, 50% 50%); transition: opacity .9s var(--ed) var(--d, .3s), transform 1.4s var(--ed) var(--d, .3s); } .js .in .img-reveal img, .js .in .img-reveal video, .js .img-reveal.in img { opacity: 1; transform: none; } .img-reveal.no-clip { overflow: visible; } /* 9 ─ Links & project links ─────────────────────────────────────────── */ /* text link */ .go { font-family: var(--mono); font-size: 12px; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; white-space: nowrap; } .go span { display: inline-block; transition: transform var(--dur-micro) var(--ease); } .go:hover span, .go:focus-visible span { transform: translateX(4px); } /* project link: image + name + one line. One hover language everywhere. */ .fx { text-decoration: none; display: block; } .fx .im { display: block; overflow: hidden; background: #ddd5c4; } .fx .im img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ed); } .fx .cap { display: grid; grid-template-columns: 1fr; margin-top: 18px; } .fx .cap b { display: inline-block; position: relative; justify-self: start; font-weight: 400; font-size: clamp(1.8rem, 2.6vw, 2.6rem); letter-spacing: -0.03em; line-height: 1; transition: transform var(--dur-micro) var(--ed); } .fx .cap b::before { content: ""; position: absolute; left: -14px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--conn-deep); opacity: 0; transform: scale(.4); transition: opacity .2s var(--ed), transform var(--dur-micro) var(--ed); } .fx .cap i { margin-top: 8px; font-style: normal; font-size: 16px; color: var(--ink-2); max-width: 40ch; } .fx.sm .cap { margin-top: 12px; } .fx.sm .cap b { font-size: 1.15rem; letter-spacing: -0.01em; line-height: 1.15; } .fx.sm .cap i { margin-top: 4px; font-family: var(--mono); font-size: 11px; } @media (hover: hover) { .fx:hover .im img { transform: scale(1.02); } .fx:hover .cap b { transform: translateX(10px); color: var(--ink-2); } .fx:hover .cap b::before { opacity: 1; transform: none; } } .fx:focus-visible .im img { transform: scale(1.02); } .fx:focus-visible .cap b { transform: translateX(10px); } .fx:focus-visible .cap b::before { opacity: 1; transform: none; } .fx:active .im img { transform: scale(1.01); transition-duration: .1s; } /* 10 ─ Case-study components ─────────────────────────────────────────── */ /* Back link (top of a case study) */ .back { display: inline-flex; gap: 10px; align-items: baseline; text-decoration: none; } .back span { display: inline-block; transition: transform var(--dur-micro) var(--ease); } .back:hover span, .back:focus-visible span { transform: translateX(-4px); } /* Case-study header: number · title · descriptor · metadata. Components are fixed; composition is per project (add a modifier). */ .cs-head { padding-top: 140px; padding-bottom: var(--s-7); } .cs-head__kicker { display: flex; gap: 14px; align-items: baseline; margin-bottom: var(--s-4); } .cs-head__num { font-size: var(--t-number); } .cs-head__title { font-size: var(--t-display); font-weight: 330; letter-spacing: var(--tr-display); line-height: var(--lh-display); max-width: 14ch; } .cs-head__title em { font-weight: 300; } .cs-head__desc { margin-top: var(--s-5); max-width: var(--measure-wide); } .cs-head__meta { margin-top: var(--s-6); } /* Metadata list — only facts supplied for the project */ .meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-3) var(--g); margin: 0; padding-top: var(--s-2); border-top: 1px solid color-mix(in srgb, currentColor 26%, transparent); } .meta div { min-width: 0; } .meta dt { font-family: var(--mono); font-size: var(--t-caption); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 6px; } .meta dd { margin: 0; font-size: var(--t-body-s); line-height: 1.4; } /* Editorial blocks — choose the ones the story needs */ .blk { margin-top: var(--s-6); } .blk--chapter { margin-top: var(--s-8); } .statement { font-size: var(--t-statement); letter-spacing: -0.025em; line-height: 1.08; font-weight: 350; max-width: 22ch; } .statement em { font-weight: 300; } .pull { font-size: var(--t-statement); font-style: italic; line-height: 1.12; letter-spacing: -0.02em; max-width: 24ch; } .pull cite { display: block; margin-top: var(--s-3); font: normal var(--t-caption)/1.4 var(--mono); color: var(--ink-2); } /* figure — standard, contained, full-bleed; captions are restrained */ .fig { position: relative; } .fig img, .fig video { width: 100%; height: auto; } .fig--crop img { aspect-ratio: var(--ratio, 16 / 9); object-fit: cover; object-position: var(--focus, 50% 50%); } .fig--contain { max-width: var(--fig-max, 950px); } .fig--object img { mix-blend-mode: multiply; } /* isolated product on its environment */ .fig figcaption { margin-top: var(--s-2); font-family: var(--mono); font-size: var(--t-caption); line-height: 1.45; color: var(--ink-2); max-width: 60ch; } .fig--bleed figcaption { padding: 0 var(--m); } .two-up { display: grid; grid-template-columns: 1fr 1fr; gap: var(--g); align-items: start; } .two-up--offset > :last-child { margin-top: var(--s-6); } .text-img { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--g); align-items: start; } .text-img > .text-img__t { grid-column: 1 / span 4; } .text-img > .text-img__i { grid-column: 6 / span 7; } .text-img--flip > .text-img__t { grid-column: 9 / span 4; grid-row: 1; } .text-img--flip > .text-img__i { grid-column: 1 / span 7; grid-row: 1; } /* metrics — number + concise explanation; never animated counters */ .metrics { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: var(--g); } .metric { border-top: 1px solid color-mix(in srgb, currentColor 40%, transparent); padding-top: 12px; } .metric__k { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--ink-2); margin-bottom: 8px; } .metric b { display: block; font-weight: 300; font-size: var(--t-metric); line-height: .95; letter-spacing: -0.035em; } .metric span:last-child { display: block; margin-top: 8px; font-family: var(--mono); font-size: var(--t-meta); line-height: 1.45; letter-spacing: .02em; color: var(--ink-2); max-width: 26ch; } /* video — product behaviour as motion; no chrome, poster first */ .vid { position: relative; background: var(--vid-ground, var(--forest)); overflow: hidden; } .vid video { width: 100%; aspect-ratio: var(--ratio, 16 / 9); object-fit: cover; } .vid--framed { border-radius: 14px; } .vid__toggle { position: absolute; right: 14px; bottom: 14px; z-index: 2; font: 500 11px var(--mono); letter-spacing: .04em; color: var(--cream); background: rgba(12,42,40,.72); border: 1px solid rgba(243,236,222,.3); border-radius: 999px; padding: 8px 12px; cursor: pointer; } .vid:not(.has-toggle) .vid__toggle { display: none; } /* Case-study navigation — chapters in one publication */ .cs-next { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--g); padding-top: var(--s-7); padding-bottom: var(--s-7); text-decoration: none; } .cs-next__k { grid-column: 1 / span 3; } .cs-next__num { font-size: var(--t-number); } .cs-next__t { grid-column: 4 / span 9; } .cs-next__t b { display: block; font-weight: 340; font-size: var(--t-section); letter-spacing: -0.04em; line-height: .88; transition: transform .35s var(--ed); } .cs-next__t i { display: block; margin-top: var(--s-3); font-size: var(--t-subhead); color: var(--ink-2); } .cs-next:hover .cs-next__t b, .cs-next:focus-visible .cs-next__t b { transform: translateX(14px); } .all-work { display: inline-flex; gap: 10px; align-items: baseline; margin-bottom: var(--s-6); text-decoration: none; font-size: var(--t-meta); letter-spacing: .04em; } .all-work span { display: inline-block; transition: transform var(--dur-micro) var(--ease); } .all-work:hover span, .all-work:focus-visible span { transform: translateX(-4px); } /* Contact — the shared ending */ .end { padding-bottom: calc(26px + env(safe-area-inset-bottom)); } .end__big { padding-top: clamp(64px, 9vw, 150px); padding-bottom: clamp(64px, 9vw, 150px); align-items: end; } .end__big h2 { grid-column: 1 / span 8; font-size: clamp(3rem, 7.2vw, 9rem); line-height: 0.88; letter-spacing: -0.045em; font-weight: 320; } .end__big h2 em { display: block; color: var(--cream); font-weight: 300; } .end__big ul { grid-column: 9 / span 4; list-style: none; margin: 0; padding: 0; } .end__big li a { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; border-top: 1px solid color-mix(in srgb, currentColor 26%, transparent); text-decoration: none; font-size: 1.5rem; transition: color .2s, padding .3s var(--ease); } .end__big li:last-child a { border-bottom: 1px solid color-mix(in srgb, currentColor 26%, transparent); } .end__big li:first-child a { font-size: 1.9rem; } .end__big li a:hover, .end__big li a:focus-visible { color: var(--cream); padding-left: 8px; } .end__big li a:focus-visible span { transform: translateX(4px); } .end__base { display: flex; justify-content: space-between; opacity: .75; } /* 11 ─ Accessibility & states ─────────────────────────────────────── */ .skip { position: absolute; left: var(--m); top: -60px; z-index: 20; padding: 10px 14px; background: var(--ink); color: var(--cream); font: 500 12px var(--mono); text-decoration: none; } .skip:focus { top: 12px; } a { -webkit-tap-highlight-color: transparent; } a:focus { outline: none; } a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 2px; } .fx:focus-visible { outline-offset: 8px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* 12 ─ Responsive ─────────────────────────────────────────────────────── Same system, different composition. Desktop: asymmetric, expansive, layered. Mobile: editorial, focused, sequential. */ @media (max-width: 860px) { :root { --m: 20px; --t-body: 17px; --t-number: 5.2rem; } body { font-size: 17px; } .nav { padding-top: 18px; padding-bottom: 18px; } .nav a { padding: 10px 0; } .nav__id span { display: none; } .nav nav { gap: 18px; } .run { padding-top: 12px; padding-bottom: 12px; } .run > span:last-child { display: none; } .go { display: inline-block; padding: 10px 0 4px; } .grid > [class^="c-"], .grid > [class*=" c-"] { grid-column: 1 / -1; } /* spans collapse; recompose per page */ .two-up { grid-template-columns: 1fr; } .two-up--offset > :last-child { margin-top: 0; } .text-img > .text-img__t, .text-img > .text-img__i, .text-img--flip > .text-img__t, .text-img--flip > .text-img__i { grid-column: 1 / -1; grid-row: auto; } .text-img > .text-img__i { margin-top: var(--s-4); } .metrics { grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: var(--s-4); } .cs-head { padding-top: 96px; } .cs-head__title { font-size: clamp(2.6rem, 11.6vw, 3.6rem); line-height: .94; } .cs-next { grid-template-columns: auto 1fr; column-gap: 14px; } .cs-next__k, .cs-next__t { grid-column: auto; } .cs-next__t b { font-size: 2.35rem; } /* motion: fewer, faster */ .js .ln, .js .ln > span { display: inline; overflow: visible; padding: 0; margin: 0; transform: none; } .js .ln > span { opacity: 0; transition: opacity .6s var(--ed); transition-delay: var(--d, 0ms); } .js .in .ln > span { opacity: 1; } .js .rv { transform: translateY(8px); transition-duration: .5s; } .js .img-reveal img { transition-delay: .1s; } /* contact */ .end__big { padding-top: 44px; padding-bottom: 52px; } .end__big h2 { grid-column: 1 / -1; font-size: 3.1rem; } .end__big ul { grid-column: 1 / -1; margin-top: 36px; } .end__big li a, .end__big li:first-child a { font-size: 1.4rem; padding: 18px 0; min-height: 56px; } .end__base { flex-direction: column; gap: 6px; } } @media (prefers-reduced-motion: reduce) { .js .rv, .js .ln > span, .js .img-reveal img, .js .img-reveal video, [data-rel] .nd, .callout, #thread path { opacity: 1 !important; transform: none !important; transition: none !important; } } /* no orphans: balance headlines, keep the last line of copy from stranding a single word */ h1, h2, h3, .t-display, .t-section, .t-section-s, .statement, .pull, .cs-next__t b { text-wrap: balance; } p, li, dd, figcaption, .t-lede, .t-body, .t-subhead { text-wrap: pretty; } @media (max-width: 860px) { /* headline and its intro line stack on phones — keep a gap between them */ .grid > h2 + p, .grid > h2 + .t-lede { margin-top: var(--s-4); } } /* connector lines measure final positions (site.js adds this class for one frame) */ .measuring .rv, .measuring .rv-img, .measuring .rv-soft { transform: none !important; transition: none !important; } /* sparkle after the name in the nav (matches the favicon) */ .nav__spark { display: inline-block; width: .95em; height: .95em; margin-left: .35em; vertical-align: -0.12em; fill: #F5AA00; } /* home StreamLine callouts: quicker lines so each one finishes before its box appears */ #thread path[data-g="sl"] { transition-duration: .4s, .7s; }