/* ==========================================================================
FONTS — Neue Haas Unica, self-hosted from the project's licensed files.
This is the ONLY typeface the site uses; the cloned Clarkson family has been
removed entirely. Weights 100-900 plus italics are available.
========================================================================== */
@font-face { font-family: "Neue Haas Unica"; src: url(/fonts/unica/NeueHaasUnica-Thin.woff2) format("woff2"), url(/fonts/unica/NeueHaasUnica-Thin.woff) format("woff"); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Neue Haas Unica"; src: url(/fonts/unica/NeueHaasUnica-ThinItalic.woff2) format("woff2"), url(/fonts/unica/NeueHaasUnica-ThinItalic.woff) format("woff"); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: "Neue Haas Unica"; src: url(/fonts/unica/NeueHaasUnica-ExtraLight.woff2) format("woff2"), url(/fonts/unica/NeueHaasUnica-ExtraLight.woff) format("woff"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Neue Haas Unica"; src: url(/fonts/unica/NeueHaasUnica-Light.woff2) format("woff2"), url(/fonts/unica/NeueHaasUnica-Light.woff) format("woff"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Neue Haas Unica"; src: url(/fonts/unica/NeueHaasUnica-LightItalic.woff2) format("woff2"), url(/fonts/unica/NeueHaasUnica-LightItalic.woff) format("woff"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Neue Haas Unica"; src: url(/fonts/unica/NeueHaasUnica-Regular.woff2) format("woff2"), url(/fonts/unica/NeueHaasUnica-Regular.woff) format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Neue Haas Unica"; src: url(/fonts/unica/NeueHaasUnica-Italic.woff2) format("woff2"), url(/fonts/unica/NeueHaasUnica-Italic.woff) format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Neue Haas Unica"; src: url(/fonts/unica/NeueHaasUnica-Medium.woff2) format("woff2"), url(/fonts/unica/NeueHaasUnica-Medium.woff) format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Neue Haas Unica"; src: url(/fonts/unica/NeueHaasUnica-MediumItalic.woff2) format("woff2"), url(/fonts/unica/NeueHaasUnica-MediumItalic.woff) format("woff"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Neue Haas Unica"; src: url(/fonts/unica/NeueHaasUnica-Bold.woff2) format("woff2"), url(/fonts/unica/NeueHaasUnica-Bold.woff) format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Neue Haas Unica"; src: url(/fonts/unica/NeueHaasUnica-BoldItalic.woff2) format("woff2"), url(/fonts/unica/NeueHaasUnica-BoldItalic.woff) format("woff"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Neue Haas Unica"; src: url(/fonts/unica/NeueHaasUnica-ExtraBold.woff2) format("woff2"), url(/fonts/unica/NeueHaasUnica-ExtraBold.woff) format("woff"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Neue Haas Unica"; src: url(/fonts/unica/NeueHaasUnica-ExtraBoldItalic.woff2) format("woff2"), url(/fonts/unica/NeueHaasUnica-ExtraBoldItalic.woff) format("woff"); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Neue Haas Unica"; src: url(/fonts/unica/NeueHaasUnica-Black.woff2) format("woff2"), url(/fonts/unica/NeueHaasUnica-Black.woff) format("woff"); font-weight: 900; font-style: normal; font-display: swap; }
/* ==========================================================================
DESIGN TOKENS
Grid, spacing and nav-height values are inherited from the reference
design; the colour ramp is this site's own warm palette (see below).
========================================================================== */
:root {
/* ------------------------------------------------------------------
WARM PALETTE
`--warm-800` is lifted verbatim from the reference design; the mid
and light steps are sampled from the reference photography itself
(its dominant tones were #482808 / #5d4b40 / #826057 / #916b58 /
#b9a193), with the remaining steps interpolated to complete the ramp.
Contrast is verified by `scripts/check-contrast.mjs` — every text
pairing used below clears WCAG AA. Re-run it if you retune these.
------------------------------------------------------------------ */
--warm-950: #140f0b;
--warm-900: #1c1510;
--warm-850: #241b14;
--warm-800: #34281d; /* reference ground */
--warm-700: #4a3828;
--warm-600: #5d4b40;
--warm-500: #7d5c50;
--warm-400: #916b58;
--warm-300: #b9a193;
--warm-200: #d5c6ba;
--warm-100: #eae0d8;
--warm-50: #f7f2ee;
--copper: #b06a3c; /* accent — large text and decoration only, not body copy */
/* Ground for the work carousel (#templates), which used to be plain white.
Dark enough that everything on it is set in the light palette. */
--bordeaux: #510819;
/* ------------------------------------------------------------------
The reference palette, restored verbatim so the layout matches 1:1.
The warm ramp above is deliberately NOT wired into these — the brown
already appears in the layout natively, on the bento section.
To warm the whole site instead, repoint these six at the ramp:
--primitive-white: var(--warm-50); --primitive-black: var(--warm-800);
--color-gray-900: var(--warm-850); --color-gray-800: var(--warm-600);
--color-gray-500: var(--warm-500); --color-gray-200: var(--warm-200);
------------------------------------------------------------------ */
--primitive-white: #fff;
--primitive-black: #000;
--color-gray-900: #1a1a1a;
--color-gray-800: #5a5a5a;
--color-gray-500: #898989;
--color-gray-200: #ddd;
/* Muted text that sits on a dark ground (the gray ramp is tuned for light). */
--muted-on-dark: var(--warm-300);
--color-blue: #0072f0;
/* Focus stays blue on purpose: it is the one colour that must read as
"system UI" rather than brand, and it clears 3:1 on the cream ground. */
--color-focus: #087bb5;
--color-red: #db3642;
--color-red-vibrant: red;
--color-pink: #ff9898;
--color-shade-t-black-50: #00000008;
--color-shade-t-black-100: #0000000d;
--color-shade-t-white-50: #ffffff14;
--color-shade-t-white-100: #ffffff1f;
--promo-banner-height: 48px;
--global-nav-height: 64px;
--grid-gutter-width: 16px;
--grid-column-width: calc((100vw - 208px) / 12);
/* page-specific */
--bento-bg: var(--warm-800);
/* ------------------------------------------------------------------
MOTION
One curve and one duration for every text entrance on the site, so
nothing arrives with its own personality. Elegance here is a short
travel over a long settle — not a bigger move.
------------------------------------------------------------------ */
--anim-ease: cubic-bezier(.22, 1, .36, 1);
--anim-duration: 1.2s;
--anim-rise: 20px;
}
@media (width >= 375px) { :root { --global-nav-height: 68px; } }
@media (width >= 600px) { :root { --global-nav-height: 72px; } }
@media (width >= 744px) { :root { --grid-gutter-width: 24px; --grid-column-width: calc((100vw - 312px) / 12); } }
@media (width >= 1280px) { :root { --global-nav-height: 80px; --grid-gutter-width: 40px; --grid-column-width: calc((100vw - 520px) / 12); } }
/* ==========================================================================
RESET / BASE
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
/* Neue Haas Unica is set at the root so that elements without a `.text--*`
class inherit it too — nothing on the page should fall back to a system font.
`line-height: normal` also overrides Tailwind preflight's `1.5`: that strut
silently inflates every line box that has no explicit line-height (it made
the footer's link grid 42px too tall), so keep it at the browser default. */
html {
-webkit-text-size-adjust: 100%;
scroll-padding-top: var(--global-nav-height);
font-family: "Neue Haas Unica", Helvetica, Arial, sans-serif;
line-height: normal;
}
/* Set the inherited colour too, not just the ground — otherwise anything
without a `.text` class falls back to pure black and reads cold against
the warm palette. */
body {
background-color: var(--primitive-white);
color: var(--primitive-black);
width: 100%;
margin: 0;
}
li { list-style: none; }
a { color: inherit; text-decoration: none; background-color: transparent; }
img { border-style: none; max-width: 100%; }
button { font: inherit; margin: 0; padding: 0; border: 0; background: none; }
body :focus { outline: 2px solid var(--color-focus); outline-offset: 2px; }
body :focus:not(:focus-visible) { outline: none; }
/* ==========================================================================
TYPOGRAPHY SCALE (verbatim clamp() values from source)
========================================================================== */
.text { color: var(--primitive-black); font-family: "Neue Haas Unica", Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; }
.text--light { color: var(--primitive-white); }
.text--font-clarkson-serif { font-family: "Neue Haas Unica", Helvetica, Arial, sans-serif; font-style: normal; font-weight: 300; }
.text--title1 { letter-spacing: -.05em; font-size: clamp(48px, 2.27273rem + 3.63636vw, 50px); font-weight: 300; line-height: 1.04; }
@media (width >= 375px) { .text--title1 { font-size: clamp(50px, 2.23577rem + 3.79404vw, 64px); } }
@media (width >= 744px) { .text--title1 { font-size: clamp(64px, 9.42029vw - .380435rem, 90px); } }
@media (width >= 1020px) { .text--title1 { font-size: clamp(90px, 3.17308rem + 3.84615vw, 100px); } }
@media (width >= 1280px) { .text--title1 { font-size: 100px; } }
@media (width >= 1440px) { .text--title1 { font-size: clamp(100px, 2.5rem + 4.16667vw, 120px); } }
.text--title2 { letter-spacing: -.05em; font-size: clamp(44px, 2.02273rem + 3.63636vw, 46px); font-weight: 300; line-height: 1.04; }
@media (width >= 375px) { .text--title2 { font-size: clamp(46px, 2.4939rem + 1.62602vw, 52px); } }
@media (width >= 744px) { .text--title2 { font-size: clamp(52px, 2.57609rem + 1.44928vw, 56px); } }
@media (width >= 1020px) { .text--title2 { font-size: clamp(56px, .0673077rem + 5.38462vw, 70px); } }
@media (width >= 1280px) { .text--title2 { font-size: clamp(70px, 3.375rem + 1.25vw, 72px); } }
@media (width >= 1440px) { .text--title2 { font-size: clamp(72px, 7.08333vw - 1.875rem, 106px); } }
.text--title3 { letter-spacing: -.06em; font-size: clamp(38px, .920455rem + 7.27273vw, 42px); font-weight: 300; line-height: 1.04; }
@media (width >= 375px) { .text--title3 { font-size: clamp(42px, 1.98984rem + 2.71003vw, 52px); } }
@media (width >= 744px) { .text--title3 { font-size: clamp(52px, 2.57609rem + 1.44928vw, 56px); } }
@media (width >= 1020px) { .text--title3 { font-size: clamp(56px, 2.51923rem + 1.53846vw, 60px); } }
@media (width >= 1280px) { .text--title3 { font-size: clamp(60px, 1.75rem + 2.5vw, 64px); } }
@media (width >= 1440px) { .text--title3 { font-size: clamp(64px, 2.5rem + 1.66667vw, 72px); } }
.text--title4 { letter-spacing: -.04em; font-size: clamp(34px, 10.9091vw - .0568182rem, 40px); line-height: 1.08; }
@media (width >= 375px) { .text--title4 { font-size: 40px; } }
@media (width >= 1020px) { .text--title4 { font-size: clamp(40px, .0480769rem + 3.84615vw, 50px); } }
@media (width >= 1280px) { .text--title4 { font-size: clamp(50px, .125rem + 3.75vw, 56px); font-weight: 300; } }
@media (width >= 1440px) { .text--title4 { font-size: clamp(56px, .125rem + 3.75vw, 74px); } }
.text--subtitle1 { letter-spacing: -.04em; font-size: 22px; line-height: 1.08; }
@media (width >= 375px) { .text--subtitle1 { font-size: 26px; } }
@media (width >= 1020px) { .text--subtitle1 { font-size: 32px; } }
@media (width >= 1280px) { .text--subtitle1 { font-size: 36px; } }
@media (width >= 1440px) { .text--subtitle1 { font-size: 40px; } }
@media (width >= 1920px) { .text--subtitle1 { font-size: 50px; } }
.text--subtitle2 { letter-spacing: -.02em; font-size: 20px; line-height: 1.08; }
@media (width >= 744px) { .text--subtitle2 { font-size: 24px; } }
@media (width >= 1020px) { .text--subtitle2 { font-size: 26px; } }
@media (width >= 1920px) { .text--subtitle2 { font-size: 34px; } }
.text--subtitle3 { letter-spacing: -.01em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 18px; font-weight: 500; line-height: 1.2; }
@media (width >= 744px) { .text--subtitle3 { font-size: 20px; } }
@media (width >= 1920px) { .text--subtitle3 { font-size: 24px; } }
.text--font-clarkson-serif.text--subtitle3 { font-weight: 400; }
.text--body { letter-spacing: -.001em; font-size: 15px; line-height: 1.4; }
.text--body-medium { letter-spacing: -.001em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 15px; font-weight: 500; line-height: 1.4; }
.text--eyebrow { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-transform: uppercase; font-size: 14px; font-weight: 500; line-height: 1; }
/* ==========================================================================
CTA SYSTEM (verbatim from source)
========================================================================== */
.cta--primary,
.cta--primary-subtle,
.cta--secondary {
--cta-arrow-gap: 8px;
--cta-arrow-margin-right: -4px;
--cta-hover-offset: 2px;
appearance: none;
cursor: pointer;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-transform: uppercase;
background-color: var(--primitive-black);
color: var(--primitive-white);
border: none;
border-radius: 4px;
justify-content: center;
align-items: center;
padding: 23px 28px;
font-family: "Neue Haas Unica", Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 1em;
display: inline-flex;
overflow: hidden;
transition: color .2s cubic-bezier(.645,.045,.355,1), background-color .2s cubic-bezier(.645,.045,.355,1);
}
/* Secondary is outline-only, sits on light backgrounds by default, and uses a
WIDER arrow gap (17px) than primary — verbatim from source. */
.cta--secondary {
--cta-arrow-gap: 17px;
color: var(--primitive-black);
background-color: transparent;
box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primitive-black) 20%, transparent);
transition: color .2s cubic-bezier(.645,.045,.355,1), background-color .2s cubic-bezier(.645,.045,.355,1), box-shadow .2s cubic-bezier(.645,.045,.355,1);
}
.cta--primary.cta--light,
.cta--primary-subtle.cta--light { background-color: var(--primitive-white); color: var(--primitive-black); }
.cta--secondary.cta--light { color: var(--primitive-white); background-color: transparent; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primitive-white) 20%, transparent); }
.cta--primary:hover { color: var(--primitive-black); background-color: var(--color-gray-200); }
.cta--primary-subtle:hover { background-color: var(--color-gray-800); }
.cta--primary-subtle.cta--light:hover { color: var(--primitive-black); background-color: var(--color-gray-200); }
.cta--secondary:hover { color: var(--primitive-black); background-color: transparent; box-shadow: inset 0 0 0 2px var(--primitive-black); }
.cta--secondary.cta--light:hover { color: var(--primitive-black); background-color: var(--primitive-white); box-shadow: inset 0 0 0 2px var(--primitive-white); }
.cta__label { align-items: center; line-height: 1; display: inline-flex; transition: transform .35s cubic-bezier(.645,.045,.355,1); }
.cta__arrow-wrapper { display: flex; align-items: center; overflow: hidden; width: 1em; margin: 0 var(--cta-arrow-margin-right) 0 var(--cta-arrow-gap); }
.cta__arrow-icon { line-height: 1; display: block; transform: translateX(-100%); transition: transform .25s cubic-bezier(.645,.045,.355,1); }
.cta--has-arrow .cta__label { transform: translateX(calc(var(--cta-arrow-gap) / 2 + .5em + var(--cta-arrow-margin-right) / 2)); }
.cta--has-arrow:hover .cta__label { transform: translateX(calc(-6px + var(--cta-hover-offset))); }
.cta--has-arrow:hover .cta__arrow-icon { transition: transform .35s cubic-bezier(.645,.045,.355,1); transform: translateX(0); }
.cta--inline {
appearance: none; cursor: pointer; font-size: inherit; line-height: inherit;
text-transform: inherit; background-color: transparent; justify-content: flex-start;
align-items: stretch; padding: 0; display: inline;
}
.cta--has-inline-underline {
background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
background-position: 0 100%, 100% 100%;
background-repeat: no-repeat;
background-size: 51% 1px, 50% 1px;
}
.cta--has-inline-underline:hover { animation: .35s cubic-bezier(.645,.045,.355,1) forwards ctaUnderlineSlideIn; }
/* ==========================================================================
KEYFRAMES (extracted verbatim from source)
========================================================================== */
/* The reference entered text with a rotateY(-24deg) rotate(-8deg) flip. It
read as an effect rather than as composure, so every entrance now uses the
same quiet rise. The class name `.anim-skew` is kept because it is applied
across the components; it no longer skews anything. */
@keyframes riseIn {
0% { opacity: 0; transform: translateY(var(--anim-rise)); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeUp {
0% { opacity: 0; transform: translateY(var(--anim-rise)); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes ctaUnderlineSlideIn {
0% { background-size: 51% 1px, 50% 1px; background-position: 0 100%, 100% 100%; }
50% { background-size: 0 1px, 0 1px; background-position: 0 100%, 100% 100%; }
51% { background-size: 0 1px, 0 1px; background-position: 100% 100%, 0 100%; }
to { background-size: 51% 1px, 50% 1px; background-position: 100% 100%, 0 100%; }
}
/* Animation helpers driven by IntersectionObserver via `data-in-view` */
.anim-skew { opacity: 0; }
.anim-skew[data-in-view="true"] {
animation: var(--anim-duration) var(--anim-ease) .08s forwards riseIn;
}
.anim-fade-up { opacity: 0; }
.anim-fade-up[data-in-view="true"] {
animation: var(--anim-duration) var(--anim-ease) forwards riseIn;
}
@media (prefers-reduced-motion: reduce) {
.anim-skew, .anim-fade-up { opacity: 1 !important; animation: none !important; transform: none !important; }
}
/* ==========================================================================
SITE WORDMARK — portfolio branding in place of the original logo lockup.
Sized to occupy the same optical slot the 208x30 wordmark did, and set in
the uppercase/letterspaced idiom the rest of the nav already uses.
========================================================================== */
.site-wordmark {
display: inline-flex;
align-items: center;
white-space: nowrap;
font-family: "Neue Haas Unica", Helvetica, Arial, sans-serif;
font-weight: 500;
font-size: 17px;
line-height: 1;
letter-spacing: .12em;
text-transform: uppercase;
/* The mark this replaces was an SVG with a hardcoded `fill="white"`, so it
never took part in the cascade. `.global-navigation__logo-link` sets
`color: inherit` at a higher specificity than `.cta--light`, which would
otherwise render this black on the dark nav — so state white explicitly. */
color: var(--primitive-white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.site-wordmark--compact { font-size: 14px; letter-spacing: .1em; }
/* utility */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Appended by Footer — `.text--footnote` from the source text scale
(index.f9761eab.pretty.css). The `a` rule reinstates the two-segment
inline underline that the base `.text` scale gives footnote links. */
.text--footnote { font-size: 12px; line-height: 1.4; }
.text--footnote a {
background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
background-position: 0 100%, 100% 100%;
background-repeat: no-repeat;
background-size: 51% 1px, 50% 1px;
}
/* ==========================================================================
ACCORDION SECTIONS — #how-to, #portfolios-faq, #portfolios-support
Extracted verbatim from docs/research/css/index.f9761eab.pretty.css
(appended block — do not interleave with the rules above)
========================================================================== */
/* Inline links inside body copy use the same two-segment gradient underline
as `.cta--has-inline-underline`, but without the hover slide. */
.text--body a {
background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
background-position: 0 100%, 100% 100%;
background-repeat: no-repeat;
background-size: 51% 1px, 50% 1px;
}
/* --- .accordion-headline ------------------------------------------------- */
.accordion-headline__title {
text-align: left; width: 100%; padding: 24px var(--grid-gutter-width);
cursor: pointer; color: inherit; background: 0 0;
justify-content: space-between; align-items: center; display: flex;
}
@media (width >= 744px) { .accordion-headline__title { padding: 32px var(--grid-gutter-width); } }
@media (width >= 1440px) { .accordion-headline__title { padding: 40px var(--grid-gutter-width); } }
.accordion-headline__icon { margin-left: 16px; }
@media (width >= 744px) { .accordion-headline__icon { margin-left: 40px; } }
.accordion-headline__icon svg { display: block; }
.accordion-headline__item { width: 100%; padding: 0; position: relative; }
.accordion-headline__item::before {
content: " "; height: 1px; left: var(--grid-gutter-width); top: 0; right: var(--grid-gutter-width);
width: calc(100% - calc(var(--grid-gutter-width) * 2));
background-color: #e0e0e0; display: block; position: absolute;
}
.accordion-headline__item--light::before { background-color: var(--color-gray-800); }
.accordion-headline__content-wrapper { overflow: hidden; }
.accordion-headline__content-wrapper[hidden] { display: block; }
/* --- .steps (#how-to body) ----------------------------------------------- */
.steps {
padding-right: var(--grid-gutter-width); padding-left: var(--grid-gutter-width);
flex-direction: column; padding-top: 80px; padding-bottom: 80px; display: flex;
}
@media (width >= 744px) { .steps { flex-direction: row; padding-top: 120px; padding-bottom: 120px; } }
.steps--no-padding-top { padding-top: 0; }
.steps__list { counter-reset: listCounter; }
@media (width >= 744px) {
.steps__list { width: calc((var(--grid-column-width) * 6) + (var(--grid-gutter-width) * 5)); }
}
.steps__list-item { counter-increment: listCounter; display: flex; }
.steps__list-item:not(:first-child) { margin-top: 40px; }
.steps__list-item::before {
content: counters(listCounter, "", decimal-leading-zero);
letter-spacing: -.01em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
font-family: "Neue Haas Unica", Helvetica, Arial, sans-serif; font-size: 18px; font-style: normal;
font-weight: 500; line-height: 1.2em;
}
@media (width >= 744px) { .steps__list-item::before { font-size: 20px; } }
@media (width >= 1280px) { .steps__list-item::before { font-size: 22px; } }
@media (width >= 1920px) { .steps__list-item::before { font-size: 26px; } }
.steps__list-item--light::before { color: var(--primitive-white); }
.steps__list-text { flex-direction: column; gap: 12px; margin-left: 32px; display: flex; }
@media (width >= 744px) { .steps__list-text { margin-left: 24px; } }
@media (width >= 1020px) { .steps__list-text { margin-left: 32px; } }
@media (width >= 1440px) { .steps__list-text { margin-left: 48px; } }
.steps__list-header a { text-decoration: underline; }
.how-to { background-color: var(--primitive-black); margin-top: 80px; }
.how-to__steps { justify-content: flex-end; }
/* --- .faq (#portfolios-faq body) ----------------------------------------- */
.faq { padding: 80px var(--grid-gutter-width); }
@media (width >= 1020px) { .faq { justify-content: space-between; align-items: flex-start; display: flex; } }
@media (width >= 1280px) { .faq { padding: 120px var(--grid-gutter-width); } }
.faq--no-padding-top { padding-top: 0; }
@media (width >= 1020px) {
.faq__accordion { width: calc((var(--grid-column-width) * 6) + (var(--grid-gutter-width) * 5)); }
}
.faq__accordion-item { width: 100%; padding: 0; position: relative; }
.faq__accordion-item::before {
content: " "; background-color: #e0e0e0; height: 1px;
display: block; position: absolute; top: 0; left: 0; right: 0;
}
.faq__accordion-item--light::before { background-color: var(--color-gray-800); }
.faq__accordion-title {
text-align: left; cursor: pointer; width: 100%; color: inherit; background: 0 0;
justify-content: space-between; align-items: center; padding: 24px 0; display: flex;
}
@media (width >= 744px) { .faq__accordion-title { padding: 32px 0; } }
.faq__more-icon { margin-left: 16px; }
@media (width >= 744px) { .faq__more-icon { margin-left: 40px; } }
.faq__more-icon-svg { display: block; }
/* NOTE: the source ships `padding:0 var(--grid-column-width)20px 0` on
.faq__accordion-body — a missing space makes the shorthand invalid, so browsers
drop it entirely. Reproducing the *rendered* result: no padding, plus the 32px
bottom padding that the 744px media query adds as its own declaration. */
.faq__accordion-body-wrapper { overflow: hidden; }
.faq__accordion-body-wrapper[hidden] { display: block; }
.faq__accordion-body-wrapper[hidden] .cta { visibility: hidden; }
@media (width >= 744px) { .faq__accordion-body { padding-bottom: 32px; } }
.portfolios-faq { background-color: var(--primitive-black); }
.portfolios-faq__accordion { justify-content: flex-end; }
.portfolios-faq__accordion-item-body { margin-bottom: 24px; }
/* --- .support (#portfolios-support body) --------------------------------- */
.support { background-color: var(--primitive-black); padding: 80px var(--grid-gutter-width); }
@media (width >= 1280px) { .support { padding: 120px var(--grid-gutter-width); } }
.support--no-padding-top { padding-top: 0; }
.support__links { grid-gap: 40px; grid-template-columns: 1fr; padding-top: 64px; display: grid; }
@media (width >= 744px) {
.support__links { grid-gap: var(--grid-gutter-width); grid-template-columns: 1fr 1fr; }
.support__links--three-columns { grid-template-columns: 1fr 1fr 1fr; }
}
@media (width >= 1280px) { .support__links { padding-top: 80px; } }
.support__links-cta.cta.cta--inline {
border: 1px solid var(--color-gray-800); z-index: 1; border-radius: 8px;
flex-direction: column; justify-content: space-between; align-items: stretch;
width: 100%; padding: 30px; transition: border-color .3s; display: flex;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.support__links-cta.cta.cta--inline:hover { border: 1px solid var(--primitive-white); }
}
.support__links-cta-inner {
flex-direction: column; justify-content: space-between; width: 100%; height: 100%; display: flex;
}
.support__links-cta-body { padding-top: 16px; }
@media (width >= 744px) { .support__links-cta-body { max-width: 18em; } }
.support__links-cta-arrow {
justify-content: flex-end; align-self: flex-end; padding-top: 80px;
font-size: 26px; line-height: 120%; display: flex;
}
@media (width >= 744px) { .support__links-cta-arrow { padding-top: 120px; } }
@media (prefers-reduced-motion: no-preference) {
.support__links-cta-arrow--hovered { animation: 1.1s linear infinite supportHoverArrow; }
}
@keyframes supportHoverArrow {
0% { transform: translate(0); }
20%, 30% { transform: translate(2px); }
70%, 80% { transform: translate(-2px); }
to { transform: translate(0); }
}
.portfolios-support { background-color: var(--primitive-black); }
.portfolios-support .support__links { padding-top: 0; }
/* --- expand/collapse motion ---------------------------------------------
The source animates the wrapper's `height` in JS (it ships inline
`style="height:0px;overflow:hidden"` and declares no CSS transition), so the
easing below is an approximation using the page's recurring curve. */
@media (prefers-reduced-motion: no-preference) {
.accordion-headline__content-wrapper,
.faq__accordion-body-wrapper {
transition: height .3s cubic-bezier(.455, .03, .515, .955);
}
.accordion-headline__icon svg,
.faq__more-icon-svg {
transition: transform .3s cubic-bezier(.455, .03, .515, .955);
}
}
/* ==========================================================================
„Über mich" — prose inside the `#how-to` accordion. The section keeps the
reference's `.steps` shell (and therefore its padding), so these rules only
govern the measure and rhythm of the text itself.
========================================================================== */
/* Prose left, portrait right from 1020px; stacked below that. `.steps` is a
flex column in the reference, so the grid is declared on `.about` itself. */
.about {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
align-items: start;
}
.about__body {
display: flex;
flex-direction: column;
/* ~68 characters is the comfortable measure for sustained reading; the
reference's step list was short enough not to need one. */
max-width: 68ch;
}
.about__portrait {
margin: 0;
order: -1;
justify-self: start;
width: min(320px, 72%);
}
.about__portrait img { display: block; width: 100%; height: auto; }
@media (width >= 1020px) {
.about {
grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
column-gap: 64px;
}
.about__body { grid-column: 1; }
.about__portrait { grid-column: 2; grid-row: 1; order: 0; width: 100%; justify-self: end; }
}
.about__paragraph { margin: 0 0 20px; }
.about__paragraph:last-of-type { margin-bottom: 0; }
.about__paragraph--lead {
margin-bottom: 28px;
}
.about__outro {
margin: 40px 0 0;
text-transform: uppercase;
letter-spacing: .12em;
}
@media (width >= 1020px) {
.about__paragraph { margin-bottom: 24px; }
.about__outro { margin-top: 56px; }
}
/* Black ground for the lower block (showreel, accordions, closing CTA),
mirroring the reference's wrapper. The sections inside are transparent or
set the same colour, so this only fills the gaps between them. */
.page-dark { background-color: var(--primitive-black); }
/* ==========================================================================
TEMPORARY — images are not clickable.
Requested while the card destinations are still placeholder anchors.
`pointer-events: none` on the ![]()
alone would not work: the click would
simply pass through to the wrapping and still navigate. The anchor
itself has to stop receiving pointer events, so this targets links that
contain an image (the work-carousel and card-carousel cards) and leaves
every text link, CTA and control untouched.
Caveat: this disables the POINTER only. The anchors remain in the tab order
and can still be activated with Enter. Removing the wrappers is the
complete fix once the real destinations are decided.
To restore: delete this block.
========================================================================== */
a:has(img) {
pointer-events: none;
cursor: default;
}
/* Any genuinely interactive child inside such a link stays usable. */
a:has(img) button,
a:has(img) [role="button"] {
pointer-events: auto;
}
/* ==========================================================================
Splash handoff. While the opening screen is up, the hero headline is pinned
at its final position with its own entrance suppressed — the loading screen
measures it as a fixed target to fly onto. It stays invisible until the two
coincide, otherwise both copies would be on screen mid-flight.
`animation: none` stays in force afterwards on purpose: restoring the
entrance at that point would rerun it from opacity 0 and flash the headline.
========================================================================== */
html[data-splash] [data-hero-title] {
animation: none !important;
transform: none !important;
}
html[data-splash="active"] [data-hero-title] { opacity: 0 !important; }
html[data-splash="done"] [data-hero-title] { opacity: 1 !important; }