/* ========================================================================== Avvy — page composition The design system (tokens, base, components) is imported first; this file only arranges those pieces into pages. No new colours or type sizes here. ========================================================================== */ @import url("design-system/tokens.css"); @import url("design-system/base.css"); @import url("design-system/components.css"); /* -------------------------------------------------------------------------- Shell Figma frame 2:644 is 1440x1024: a 953px column with the dock filling the remaining 71px flush to the bottom edge. Reproduced as a viewport-height shell so the dock stays pinned while long sections scroll behind it. -------------------------------------------------------------------------- */ .page { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; } .page__main { display: flex; flex-direction: column; flex: 1; min-height: 0; } /* -------------------------------------------------------------------------- Background — node 3:14. A full-bleed photograph anchored to its bottom edge, with the radial scrim laid over it. -------------------------------------------------------------------------- */ .page__bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; transition-property: opacity; transition-duration: var(--duration-state); transition-timing-function: var(--ease-out); } /* The photograph is the hero's signature. Every other section drops it and sits on the flat page colour (#202020, --color-bg, already on ) so long-form copy is read against a single flat surface. Fading the layer out rather than painting a panel over it means the change covers the whole viewport, including the margins either side of the 1200px column. */ body:not([data-section="overview"]) .page__bg { opacity: 0; } .page__bg__image { width: 100%; height: 100%; object-fit: cover; /* Centre, not `bottom`. Figma anchors this fill to the bottom edge, which only has one meaning at the single frame size it was drawn at. On a fluid page that anchor is a pivot: with `cover`, resizing scales the image and crops it around whatever `object-position` pins down. Pinned to the bottom, every pixel of growth pushes upward and the picture appears to unfold out of the lower corner. Centred, the crop grows evenly on all four sides, so the image reads as zooming from the middle. */ object-position: center; /* The outline in base.css is for content images; this one is scenery. */ outline: none; } .page__bg::after { content: ""; position: absolute; inset: 0; background-image: url("assets/hero-scrim.svg"); background-size: 100% 100%; background-repeat: no-repeat; } /* -------------------------------------------------------------------------- Panels — one section visible at a time, driven by the dock. -------------------------------------------------------------------------- */ .panels { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } .panels__frame { display: flex; flex-direction: column; min-height: 100%; } .panel { display: none; flex-direction: column; } /* `flex: 1 0 auto` rather than `min-height: 100%`: the frame is an auto-height flex container, and a percentage min-height against an auto-height parent resolves to `auto` — the hero would collapse to its content. Growing as a flex item fills the column reliably, and `flex-shrink: 0` keeps long sections at their natural height so they scroll instead of being squashed. */ .panel.is-active { display: flex; flex: 1 0 auto; } /* -------------------------------------------------------------------------- 01 — Hero. Node 5:45. Content is pinned to the bottom of the column: 24px between the copy block and the stat banner, 75px of clearance below it. -------------------------------------------------------------------------- */ .panel--hero { justify-content: flex-end; gap: var(--space-24); padding-bottom: var(--space-75); } /* Node 3:13 */ .hero__intro { display: flex; flex-direction: column; gap: var(--space-19); padding-inline: var(--layout-gutter); } /* -------------------------------------------------------------------------- Content sections (02-04) These have no Figma frame of their own. They are composed from the hero's own vocabulary — the bordered column, ruled rows, cells split by vertical rules — so nothing new is invented, only recombined. -------------------------------------------------------------------------- */ .panel--content { padding-block: var(--space-44) var(--space-75); /* Bottom-anchored, matching the hero: content rises from the same 75px baseline so the eye finds every section in the same place. `margin-block-start: auto` on the first child rather than `justify-content: flex-end` — with flex-end, a section taller than the column overflows past the TOP of the scroll container and those first rows become unreachable. An auto margin collapses to zero once the content fills the space, so tall sections still scroll normally. */ } .panel--content > :first-child { margin-block-start: auto; } .section__header { display: flex; flex-direction: column; gap: var(--space-19); padding-inline: var(--layout-gutter); padding-bottom: var(--space-24); } /* The label belongs to the heading, so it sits closer to it than the heading sits to the paragraph below. Equal gaps left all three floating as unrelated lines; pulling this one in groups the pair by proximity. */ .section__header > .ds-eyebrow { margin-block-end: calc(var(--space-10) - var(--space-19)); } /* A row whose contents run edge to edge inside the column (marquees). */ .ds-row--bleed, .ds-row--bleed > .ds-row__cell { padding-inline: 0; } /* -------------------------------------------------------------------------- 02 — Track Record -------------------------------------------------------------------------- */ .logo-strip img { width: auto; height: 24px; /* These client PNGs arrive in assorted brand colours. Flattening them to white silhouettes is the treatment the previous build already used and it holds up: the strip reads as one row instead of a ransom note. */ filter: brightness(0) invert(1); opacity: 0.45; object-fit: contain; outline: none; transition-property: opacity; transition-duration: var(--duration-state); transition-timing-function: var(--ease-out); } .logo-strip img:hover { opacity: 1; } .testimonial { display: flex; flex-direction: column; gap: var(--space-10); } .testimonial p { color: var(--color-text-secondary); font-size: var(--text-caption-size); line-height: 1.5; } .testimonial cite { color: var(--color-text-tertiary); font-size: var(--text-caption-size); font-style: normal; line-height: 1.35; } .partner-logo { display: inline-flex; align-items: center; gap: var(--space-8); color: var(--color-text-tertiary); font-size: var(--text-ui-size); letter-spacing: var(--text-ui-tracking); white-space: nowrap; } .partner-logo svg { flex-shrink: 0; } /* -------------------------------------------------------------------------- 03 — Events -------------------------------------------------------------------------- */ .callout { display: flex; align-items: center; gap: var(--space-14); color: var(--color-text-primary); font-size: var(--text-body-size); font-weight: var(--weight-medium); line-height: 1.4; } /* A short accent rule rather than a filled panel — this design expresses emphasis with lines, so the callout uses the same device. */ .callout::before { content: ""; flex-shrink: 0; width: 3px; align-self: stretch; min-height: 1.4em; background-color: var(--color-accent); } .event-card { display: flex; flex-direction: column; gap: var(--space-10); width: 260px; flex-shrink: 0; } .event-card img { width: 100%; height: 156px; object-fit: cover; filter: saturate(0.72) contrast(1.08); } .event-card figcaption { color: var(--color-text-tertiary); font-size: var(--text-ui-size); letter-spacing: var(--text-ui-tracking); } /* -------------------------------------------------------------------------- 04 — Process -------------------------------------------------------------------------- */ .stage { display: flex; flex-direction: column; gap: var(--space-10); } .stage p { color: var(--color-text-secondary); font-size: var(--text-caption-size); line-height: 1.45; } .stage__head { display: flex; align-items: baseline; gap: var(--space-8); } .legend { display: flex; flex-direction: column; gap: var(--space-10); } .legend span { display: flex; align-items: center; gap: var(--space-8); color: var(--color-text-tertiary); font-size: var(--text-ui-size); letter-spacing: var(--text-ui-tracking); } .legend .dot { width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; } .dot--origin { background-color: var(--color-accent); } .dot--reach { background-color: var(--color-text-tertiary); } /* -------------------------------------------------------------------------- Responsive Figma provides desktop only. Below the column width the grid keeps its logic: cells stack and their dividing rule turns from vertical to horizontal, so the structure reads the same at every size. -------------------------------------------------------------------------- */ @media (max-width: 900px) { .ds-row { flex-wrap: wrap; gap: 0; } .ds-row__cell { flex-basis: 100%; padding-inline-end: 0; border-inline-end: 0; border-block-start: 1px solid var(--color-rule); } .ds-row__cell:first-child { border-block-start: 0; } .ds-row__cell--lead { padding-inline-start: 0; } .ds-marquee { mask-image: linear-gradient( to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100% ); } } @media (max-width: 620px) { .panel--hero { padding-bottom: var(--space-41); } .ds-dock { gap: var(--space-10); padding-inline: var(--space-14); } .event-card { width: 208px; } .event-card img { height: 124px; } }