/* ===================================================================== * Page-level overflow guard. * * Any single element wider than the viewport gives the whole document a * horizontal scrollbar, and once that happens section backgrounds only paint * to viewport width. Scrolling right then exposes the body background, which * reads as the page "breaking" into white bands even though every section is * styled correctly. * * `clip` rather than `hidden`: overflow:hidden on the root creates a scroll * container and silently kills position:sticky on the header. clip contains * the overflow without that side effect. * * Sections also get an explicit width so they span the full scroll area even * if something downstream does overflow. * ===================================================================== */ html { overflow-x: clip; } body { overflow-x: clip; max-width: 100%; } .vgs-section { width: 100%; } /* Media and embeds are the usual culprits. */ img, svg, video, canvas, iframe, table { max-width: 100%; } /* ===================================================================== * Valére — component CSS for the child-theme section types. * tokens.css is override-only by contract, so component rules live here. * * Mobile-first. Every grid uses minmax(0, 1fr) rather than 1fr, because a * bare 1fr track refuses to shrink below its content and produces horizontal * overflow on narrow screens instead of wrapping. * ===================================================================== */ /* ---------- Eyebrow with rule ---------- */ .vgs-eyebrow { display: flex; align-items: center; gap: 1rem; } .vgs-eyebrow__rule { width: 56px; height: 2px; flex: none; background: var(--gradient-primary); } .vgs-ground-page .vgs-eyebrow__rule, .vgs-ground-subtle .vgs-eyebrow__rule, .vgs-ground-surface .vgs-eyebrow__rule { background: linear-gradient(135deg, #007A50, #00786E); } /* ---------- Marquee ---------- */ .vgs-marquee__frame { overflow: hidden; } .vgs-marquee__track { display: flex; width: max-content; will-change: transform; } .vgs-marquee__unit { font-family: var(--font-display); font-size: clamp(3rem, 9vw, 8.25rem); line-height: 1; letter-spacing: -0.02em; white-space: nowrap; padding-right: 1.5rem; /* Was -webkit-text-stroke on transparent fill. At this size that renders stroke artifacts along the inner counters of round glyphs (visible as hairlines through e and l). A low-opacity fill gives the same recessive weight, renders clean, and gives SplitText real glyphs to animate. */ color: rgba(255,255,255,0.30); } .vgs-marquee__accent { font-style: normal; color: var(--color-brand-accent); } .vgs-marquee__caption { margin-top: 1.5rem; font-size: 0.9375rem; color: var(--color-text-inverse-secondary); } /* ---------- Exchange: stacked step cards ---------- * Large rounded cards, content one side and a media panel the other, stacked * with a small negative offset so the run reads as one sequence. * ------------------------------------------------------------------- */ .vgs-exchange__steps { margin-top: 3.5rem; display: grid; gap: 1.25rem; } .vgs-exchange__step { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: center; padding: 2.5rem; background: var(--color-surface-mid); border: 1px solid var(--color-border-mint); border-radius: 24px; } .vgs-ground-page .vgs-exchange__step, .vgs-ground-subtle .vgs-exchange__step { background: var(--color-bg-page); border-color: rgba(0,0,0,0.10); } .vgs-exchange__content { display: grid; gap: 1.1rem; align-content: start; } .vgs-exchange__label { display: flex; align-items: center; gap: 0.6rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-brand-accent); } .vgs-ground-page .vgs-exchange__label, .vgs-ground-subtle .vgs-exchange__label { color: #007A50; } .vgs-exchange__pair { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.06; letter-spacing: -0.03em; color: var(--color-text-inverse); } .vgs-ground-page .vgs-exchange__pair, .vgs-ground-subtle .vgs-exchange__pair { color: var(--color-text-primary); } .vgs-exchange__for { font-style: normal; font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.22em; color: var(--color-brand-accent); vertical-align: middle; padding-inline: 0.35rem; } .vgs-ground-page .vgs-exchange__for, .vgs-ground-subtle .vgs-exchange__for { color: #007A50; } .vgs-exchange__get { color: var(--color-text-inverse-secondary); } .vgs-ground-page .vgs-exchange__get, .vgs-ground-subtle .vgs-exchange__get { color: var(--color-text-secondary); } .vgs-exchange__note { font-size: 1rem; line-height: 1.66; color: var(--color-text-inverse-secondary); } /* Media panel: fills its half, like the Function imagery block. */ .vgs-exchange__media { border-radius: 16px; overflow: hidden; min-height: 13rem; display: grid; place-items: stretch; } .vgs-exchange__shape { display: block; width: 100%; height: 100%; background: var(--gradient-primary); border-radius: 16px; } .vgs-exchange__step:nth-child(2) .vgs-exchange__shape { background: linear-gradient(200deg, #00E5D4, #00E297); } .vgs-exchange__step:nth-child(3) .vgs-exchange__shape { background: linear-gradient(120deg, #00E297, #4DD9E8); } .vgs-exchange__step:nth-child(4) .vgs-exchange__shape { background: linear-gradient(300deg, #00A878, #00E5D4); } .vgs-exchange__rebuttal { margin-top: 4rem; display: grid; gap: 2rem; } .vgs-exchange__line { font-family: var(--font-display); font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.14; letter-spacing: -0.02em; background: var(--gradient-primary); -webkit-background-clip: text; background-clip: text; color: transparent; } @supports not ((-webkit-background-clip: text) or (background-clip: text)) { .vgs-exchange__line { background: none; color: var(--color-brand-accent); } } @media (min-width: 900px) { .vgs-exchange__steps { gap: 1.5rem; } .vgs-exchange__step { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 3.5rem; padding: 3.25rem; min-height: 20rem; } .vgs-exchange__media { min-height: 100%; } .vgs-exchange__rebuttal { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 5rem; } } /* ---------- Split ---------- */ .vgs-split { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 3.5rem; } .vgs-split__panel { padding: 3rem 1.5rem; background: var(--color-bg-subtle); } .vgs-split__panel.is-dark { background: var(--color-bg-inverse); } .vgs-split__title { font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 1.875rem); letter-spacing: -0.02em; margin-bottom: 1.5rem; color: var(--color-text-primary); } .vgs-split__panel.is-dark .vgs-split__title { color: var(--color-text-inverse); } .vgs-split__list { list-style: none; margin: 0; padding: 0; } .vgs-split__list li { position: relative; padding: 1.1rem 0 1.1rem 1.5rem; border-top: 1px solid rgba(0,0,0,0.10); font-size: 1.0625rem; line-height: 1.6; color: var(--color-text-secondary); } .vgs-split__panel.is-dark .vgs-split__list li { border-top-color: rgba(255,255,255,0.12); color: var(--color-text-inverse-secondary); } .vgs-split__list li::before { content: ""; position: absolute; left: 0; top: 1.65rem; width: 6px; height: 6px; border-radius: 50%; background: #007A50; } .vgs-split__panel.is-dark .vgs-split__list li::before { background: var(--color-brand-accent); } @media (min-width: 860px) { .vgs-split { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } .vgs-split__panel { padding: 4.5rem 5.5rem; } } /* ---------- Ruled list ---------- */ .vgs-ruled__list { margin-top: 3rem; } .vgs-ruled__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; padding: 1.6rem 0; border-top: 1px solid rgba(0,0,0,0.10); align-items: baseline; } .vgs-ground-inverse .vgs-ruled__row { border-top-color: rgba(255,255,255,0.12); } .vgs-ruled__tag { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.18em; font-weight: 600; color: var(--color-brand-primary); } .vgs-ruled__text { font-family: var(--font-display); font-size: clamp(1.35rem, 3.2vw, 2rem); line-height: 1.22; letter-spacing: -0.02em; color: var(--color-text-primary); } .vgs-ground-inverse .vgs-ruled__text { color: var(--color-text-inverse); } .vgs-ruled__closing { margin-top: 2.5rem; font-size: 1.125rem; color: var(--color-text-secondary); } @media (min-width: 720px) { .vgs-ruled__row { grid-template-columns: 5rem minmax(0, 1fr); gap: 1.75rem; } /* No tag means no tag rail. Without this the text sits in the 5rem column and wraps one word per line while 1092px of the row stays empty. */ .vgs-ruled__row--untagged { grid-template-columns: minmax(0, 1fr); } } /* ---------- Track: centred card grid ---------- */ .vgs-track { display: grid; gap: 1.5rem; margin-top: 3.5rem; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); } .vgs-track__card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.65rem; padding: 2.5rem 2rem 0; background: var(--color-surface-mid); border: 1px solid var(--color-border-mint); border-radius: 18px; overflow: hidden; } .vgs-track__index { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.14em; color: var(--color-brand-accent); } .vgs-track__title { font-family: var(--font-display); font-size: 1.65rem; letter-spacing: -0.02em; line-height: 1.14; color: var(--color-text-inverse); } .vgs-track__body { font-size: 0.9375rem; line-height: 1.62; color: var(--color-text-inverse-secondary); max-width: 22rem; } /* Art sits at the foot of the card and bleeds to the edges, the way the reference illustrations do. margin-top:auto keeps every figure on a common baseline even when the copy above differs in length. */ .vgs-track__art { margin-top: auto; width: 100%; padding: 1.75rem 0 2rem; } .vgs-art { width: 100%; height: auto; max-height: 8.25rem; overflow: visible; } /* Mesh sits under everything and never takes pointer or a11y weight. Its colour comes from the pattern in , so no fill is set here: a fill declaration would beat the inline url() reference and flatten it. */ .vgs-art__grid { pointer-events: none; } .vgs-ground-page .vgs-track__card, .vgs-ground-subtle .vgs-track__card { background: var(--color-bg-page); border-color: rgba(0,0,0,0.10); } .vgs-ground-page .vgs-track__index, .vgs-ground-subtle .vgs-track__index { color: #007A50; } .vgs-ground-page .vgs-track__title, .vgs-ground-subtle .vgs-track__title { color: var(--color-text-primary); } .vgs-ground-page .vgs-track__body, .vgs-ground-subtle .vgs-track__body { color: var(--color-text-secondary); } /* ---------- Pullquote ---------- */ .vgs-pullquote__rule { display: block; width: 72px; height: 3px; margin-bottom: 2rem; background: linear-gradient(135deg, #007A50, #00786E); } .vgs-pullquote__quote { margin: 0; font-family: var(--font-display); font-size: clamp(1.5rem, 4vw, 2.5rem); line-height: 1.24; letter-spacing: -0.02em; color: var(--color-text-primary); } .vgs-pullquote__cite { display: block; margin-top: 2rem; font-style: normal; } .vgs-pullquote__name { display: block; font-weight: 600; font-size: 0.9375rem; color: var(--color-text-primary); } .vgs-pullquote__role { display: block; font-size: 0.9375rem; color: var(--color-text-secondary); } /* ---------- Comparison table ---------- */ .vgs-comparison__scroll { margin-top: 3rem; overflow-x: auto; } .vgs-comparison__table { width: 100%; min-width: 44rem; border-collapse: collapse; text-align: left; } .vgs-comparison__table th, .vgs-comparison__table td { padding: 1.6rem 1.75rem; vertical-align: top; border-top: 1px solid rgba(0,0,0,0.10); } .vgs-comparison__table thead th { border-top: 0; font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-brand-primary); } /* Deep end of the ramp: mint on a light ground measures 1.7:1. */ .vgs-comparison__table thead th.is-ours { color: #007A50; } .vgs-comparison__table tbody th { font-family: var(--font-display); font-weight: 500; font-size: 1.1875rem; letter-spacing: -0.01em; line-height: 1.26; color: var(--color-text-primary); width: 17rem; } .vgs-comparison__table td { font-size: 1rem; line-height: 1.68; color: var(--color-text-secondary); } .vgs-comparison__table .is-ours { background: rgba(0,122,80,0.045); color: var(--color-text-primary); } .vgs-comparison__table tbody tr:first-child .is-ours { border-radius: 12px 12px 0 0; } .vgs-comparison__table tbody tr:last-child .is-ours { border-radius: 0 0 12px 12px; } .vgs-comparison__note { margin-top: 1.75rem; font-size: 0.875rem; line-height: 1.6; color: var(--color-text-secondary); } /* ---------- Columns ---------- */ .vgs-columns { display: grid; gap: 1.25rem; margin-top: 3rem; grid-template-columns: minmax(0, 1fr); } .vgs-columns__col { padding: 1.9rem; border-radius: 14px; background: var(--color-bg-page); border: 1px solid rgba(0,0,0,0.10); } .vgs-columns__col.is-dark { background: var(--color-bg-inverse); border-color: transparent; } .vgs-columns__title { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: -0.01em; color: var(--color-text-primary); } .vgs-columns__col.is-dark .vgs-columns__title { color: var(--color-text-inverse); } .vgs-columns__sub { margin-top: 0.35rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: #007A50; } .vgs-columns__col.is-dark .vgs-columns__sub { color: var(--color-brand-accent); } .vgs-columns__list { list-style: none; margin: 1.25rem 0 0; padding: 0; } .vgs-columns__list li { padding: 0.8rem 0; border-top: 1px solid rgba(0,0,0,0.08); font-size: 0.9375rem; line-height: 1.58; color: var(--color-text-secondary); } .vgs-columns__col.is-dark .vgs-columns__list li { border-top-color: rgba(255,255,255,0.14); color: var(--color-text-inverse-secondary); } .vgs-columns__note { margin-top: 2rem; font-size: 1.0625rem; line-height: 1.7; color: var(--color-text-secondary); } @media (min-width: 720px) { .vgs-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .vgs-columns { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* --------------------------------------------------------------------- * Reveal safety net. Base hides .is-reveal unconditionally; re-show it and * re-hide only when the flag proves scripting is available. Higher * specificity than base's .is-reveal (0,1,0) and .is-reveal.is-in-view (0,2,0). * ------------------------------------------------------------------- */ .is-reveal { opacity: 1; transform: none; } /* The SECTION never animates. Its CONTENT does. * * base puts opacity + translateY + will-change on the section element itself, * which for a full-bleed band means animating its background. That caused the * hairline between two dark sections two ways at once: while the lower band was * still 16px down there was a strip its background had not reached yet, and * `will-change: transform` promoted the section to its own compositing layer, * which leaves a subpixel seam at the join even once it has settled. * * Overriding will-change back to auto is the half that fixes the resting seam; * moving the motion onto the inner wrapper is the half that fixes the gap. */ .vgs-js .is-reveal { opacity: 1; transform: none; will-change: auto; } .vgs-js .is-reveal > .container, .vgs-js .is-reveal > .vgs-steptrack__viewport, .vgs-js .is-reveal > .vgs-split__grid { opacity: 0; transform: translateY(16px); will-change: opacity, transform; } .vgs-js .is-reveal.is-in-view > .container, .vgs-js .is-reveal.is-in-view > .vgs-steptrack__viewport, .vgs-js .is-reveal.is-in-view > .vgs-split__grid { opacity: 1; transform: none; transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease); will-change: auto; } @media (prefers-reduced-motion: reduce) { .vgs-js .is-reveal, .vgs-js .is-reveal > .container, .vgs-js .is-reveal > .vgs-steptrack__viewport, .vgs-js .is-reveal > .vgs-split__grid { opacity: 1; transform: none; } } /* ---------- People ---------- */ .vgs-people__grid { display: grid; gap: 2rem; margin-top: 3.5rem; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); } .vgs-people__card { display: grid; gap: 0.55rem; align-content: start; } .vgs-people__portrait { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; margin-bottom: 0.75rem; } /* Placeholder keeps the grid rhythm before photography exists, rather than collapsing every card to a different height. */ .vgs-people__portrait.is-empty { display: block; background: linear-gradient(135deg, rgba(0,226,151,0.16), rgba(0,229,212,0.06)); border: 1px solid var(--color-border-mint); } .vgs-ground-page .vgs-people__portrait.is-empty, .vgs-ground-subtle .vgs-people__portrait.is-empty { background: linear-gradient(135deg, rgba(0,122,80,0.10), rgba(0,120,110,0.04)); border-color: rgba(0,0,0,0.10); } .vgs-people__name { font-family: var(--font-display); font-size: 1.375rem; letter-spacing: -0.01em; color: var(--color-text-primary); } .vgs-people__role { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: #007A50; } .vgs-people__bio { font-size: 0.9375rem; line-height: 1.66; color: var(--color-text-secondary); } .vgs-ground-inverse .vgs-people__name { color: var(--color-text-inverse); } .vgs-ground-inverse .vgs-people__role { color: var(--color-brand-accent); } .vgs-ground-inverse .vgs-people__bio { color: var(--color-text-inverse-secondary); } .vgs-people__note { margin-top: 2.5rem; font-size: 0.875rem; color: var(--color-text-secondary); } /* ---------- Glass surface ---------- * Applied to buttons and cards. Two guards matter: * * 1. backdrop-filter is not universal, so the translucent background only * applies inside @supports. Without that guard the fallback is a * near-invisible panel on unsupported engines. * 2. Glass lowers effective text contrast because the backdrop shows * through. Tints are kept dense enough (0.10 on dark, 0.68 on light) * that body text still clears AA against the composited result. * ------------------------------------------------------------------- */ .vgs-track__card, .vgs-exchange__step, .vgs-columns__col, .vgs-split__panel, .vgs-services__card { position: relative; isolation: isolate; } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .vgs-ground-inverse .vgs-track__card, .vgs-ground-inverse .vgs-exchange__step, .vgs-ground-inverse .vgs-columns__col, .vgs-ground-inverse .vgs-services__card { background: rgba(255, 255, 255, 0.055); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); border-color: rgba(255, 255, 255, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 12px 36px rgba(0, 0, 0, 0.30); } .vgs-ground-page .vgs-track__card, .vgs-ground-subtle .vgs-track__card, .vgs-ground-page .vgs-exchange__step, .vgs-ground-subtle .vgs-exchange__step, .vgs-ground-page .vgs-columns__col, .vgs-ground-subtle .vgs-columns__col, .vgs-ground-page .vgs-services__card, .vgs-ground-subtle .vgs-services__card { background: rgba(255, 255, 255, 0.68); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); border-color: rgba(0, 0, 0, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 10px 30px rgba(0, 0, 0, 0.06); } } /* Buttons: glass on the ghost variant only. The accent button stays a solid gradient, because a translucent primary CTA reads as disabled. */ @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .vgs-btn--ghost, .vgs-btn--secondary { background: rgba(255, 255, 255, 0.10); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); border-color: rgba(255, 255, 255, 0.28); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22); } .vgs-ground-page .vgs-btn--ghost, .vgs-ground-subtle .vgs-btn--ghost, .vgs-ground-page .vgs-btn--secondary, .vgs-ground-subtle .vgs-btn--secondary { background: rgba(255, 255, 255, 0.55); border-color: rgba(0, 0, 0, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9); } .vgs-btn--ghost:hover, .vgs-btn--secondary:hover { background: rgba(255, 255, 255, 0.18); } .vgs-ground-page .vgs-btn--ghost:hover, .vgs-ground-subtle .vgs-btn--ghost:hover { background: rgba(255, 255, 255, 0.78); } } /* backdrop-filter forces compositing; on a long page that is a lot of layers. Honour reduced-transparency the way we honour reduced-motion. */ @media (prefers-reduced-transparency: reduce) { .vgs-track__card, .vgs-exchange__step, .vgs-columns__col, .vgs-services__card, .vgs-btn--ghost, .vgs-btn--secondary { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } } /* ---------- Media: editorial image + copy ---------- */ .vgs-media__inner { display: grid; gap: 2.5rem; align-items: center; } .vgs-media__copy { display: grid; gap: 1.5rem; align-content: start; } .vgs-media__figure { margin: 0; width: 100%; } .vgs-media__figure img, .vgs-media__slot { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; } /* Aspect ratios are declared on the figure, so the box is reserved before any image loads and nothing reflows when it arrives. */ .vgs-media__figure--portrait { aspect-ratio: 3 / 4; } .vgs-media__figure--landscape { aspect-ratio: 16 / 10; } .vgs-media__figure--arch { aspect-ratio: 3 / 4; } .vgs-media__figure--arch img, .vgs-media__figure--arch .vgs-media__slot { border-radius: 50vw 50vw 6px 6px; } .vgs-media__slot { position: relative; background: linear-gradient(140deg, #4C4F4E 0%, #292B2B 100%); } .vgs-media__slot-label { position: absolute; left: 1rem; bottom: 0.9rem; font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(255,255,255,0.78); } @media (min-width: 900px) { .vgs-media__inner { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 5rem; } /* align controls which side the picture lands on; copy takes the other. */ .vgs-media--left .vgs-media__figure { order: -1; } .vgs-media--right .vgs-media__figure { order: 1; } } /* ---------- Orbit: gradient blobs on a ring ---------- */ .vgs-orbit { position: relative; width: 100%; max-width: 46rem; margin: 3rem auto 0; aspect-ratio: 1 / 1; } /* The fields are 53% wide pinned at a 34% radius, so the assembly spreads to ~1.21x the box and is MEANT to bleed past it. Between the 700px cutoff and about 890px that bleed is wider than the viewport, which would put a horizontal scrollbar on the page. * * overflow-x: clip rather than hidden: `hidden` on one axis forces the other * axis to `auto`, which would turn this section into a scroll container and * break the pinned/reveal behaviour above it. `clip` leaves overflow-y visible. */ .vgs-orbit-section { overflow-x: clip; } .vgs-orbit__ring { position: absolute; inset: 16%; border: 1px solid rgba(0,122,80,0.16); border-radius: 50%; } .vgs-orbit__centre-dot { position: absolute; left: 50%; top: 50%; z-index: 2; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; background: var(--color-brand-primary); border-radius: 50%; } .vgs-orbit__centre { position: absolute; left: 50%; top: 50%; z-index: 2; /* orbs now sweep past the middle */ transform: translate(-50%, 10%); width: 12rem; text-align: center; font-family: var(--font-display); font-size: clamp(1.1rem, 2.4vw, 1.6rem); line-height: 1.16; letter-spacing: -0.01em; color: var(--color-text-primary); } /* The arm is the orbital path. It fills the square and turns about its own centre, which is also the assembly's centre, so a rotation on the arm sweeps the orb around the middle. It is inert until JS drives it and it never contains the centre type. */ /* Orbs are placed by the renderer with left/top on the ring radius; this only centres each one on its own point. No arm, no rotation, so the label is never counter-rotated and can never end up upside down. */ /* The arm is the orbital path: it fills the square and turns about its own centre, so a rotation on it sweeps the orb around the middle. */ .vgs-orbit__arm { position: absolute; inset: 0; transform-origin: 50% 50%; pointer-events: none; } /* Pinned to the top of the arm at the ring radius (inset 16% => r = 34%). */ .vgs-orbit__orb { position: absolute; left: 50%; top: 16%; /* Measured off the design: the coloured field is ~78% of the ring diameter, and the ring is 68% of the box, so the orb is 0.78 x 68% = 53%. The old 21% read as a bead on a wire rather than as three overlapping fields. */ margin-left: -26.5%; margin-top: -26.5%; width: 53%; aspect-ratio: 1 / 1; display: grid; place-items: center; transform-origin: 50% 50%; } /* Soft fields, on a LIGHT ground. * * The earlier note here argued for crisp shapes, and it was right for the * ground it was written against: on near-black, a blurred field washed the * panel out and buried white labels. This section is now on #F8F8F8 with dark * ink, which inverts that constraint. Measured against the sampled colours, * #1A1A1A reads 10.9:1 on the mint field, 7.5:1 on the deepest core and 16.5:1 * on bare ground, so the label survives wherever the rotation puts it. * * The softness is the gradient's own alpha falloff, not filter: blur. Three * overlapping blurred layers is a compositing cost paid on every animation * frame, and these fields rotate continuously. * * Colours sampled from the design render: * importance #2BE6C1 risk #2DE4DC participation #1EC08F */ .vgs-orbit__blob { position: absolute; inset: 0; border-radius: 50%; } .vgs-orbit__blob--1 { background: radial-gradient(circle at 50% 50%, rgba(43,230,193,0.92) 0%, rgba(43,230,193,0.72) 24%, rgba(43,230,193,0.34) 47%, rgba(43,230,193,0.10) 68%, rgba(43,230,193,0) 80%); } .vgs-orbit__blob--2 { background: radial-gradient(circle at 50% 50%, rgba(45,228,220,0.88) 0%, rgba(45,228,220,0.68) 24%, rgba(45,228,220,0.32) 47%, rgba(45,228,220,0.09) 68%, rgba(45,228,220,0) 80%); } /* The third field carries a denser core in the design, so it keeps one extra inner stop rather than a flat ramp. */ .vgs-orbit__blob--3 { background: radial-gradient(circle at 50% 50%, rgba(21,168,124,0.95) 0%, rgba(30,192,143,0.80) 20%, rgba(30,192,143,0.44) 44%, rgba(30,192,143,0.12) 67%, rgba(30,192,143,0) 80%); } /* Dark ink everywhere. #1A1A1A measures 11.7:1 on mint and 16:1 on the subtle band, so the word holds whether it lands on the dense centre of a blob or on bare ground. White would fail on both. */ /* The label sits ON the orb, and the orb is a saturated mint gradient. Ink at #1A1A1A measured 2.1:1 against the lighter stops: unreadable. Moving the label OUT of the orb and onto the section ground fixes it at the layout level rather than by hunting a colour that survives a gradient. */ /* Centred in the field. It was moved out below the orb when this section was on a dark ground and the label could not clear a saturated gradient; on the light ground the measured ratios above make the centre safe again, and the design puts it there. */ .vgs-orbit__label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max-content; max-width: 15ch; font-family: var(--font-body); font-size: clamp(0.8rem, 1.3vw, 0.95rem); font-weight: 500; letter-spacing: 0.01em; color: var(--color-text-primary); text-align: center; z-index: 3; } .vgs-ground-inverse .vgs-orbit__label { color: var(--color-text-inverse); } /* The centre label sits behind the orbs, so it needs to clear them too. */ .vgs-ground-inverse .vgs-orbit__centre { color: var(--color-text-inverse); } .vgs-ground-inverse .vgs-orbit__ring { border-color: rgba(255,255,255,0.22); } .vgs-ground-inverse .vgs-orbit__centre-dot { background: var(--color-brand-accent); } .vgs-orbit__legend { display: grid; gap: 2rem; margin-top: 3rem; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); } .vgs-orbit__legend-index { font-family: var(--font-display); font-size: 0.9rem; letter-spacing: 0.14em; color: #007A50; } .vgs-orbit__legend-title { font-family: var(--font-display); font-size: 1.2rem; margin-top: 0.4rem; color: var(--color-text-primary); } .vgs-orbit__legend-body { margin-top: 0.5rem; font-size: 0.9375rem; line-height: 1.62; color: var(--color-text-secondary); } /* Below 700px the ring collapses; the legend already carries every word, so the decorative diagram is simply dropped rather than squashed. */ @media (max-width: 700px) { .vgs-orbit { display: none; } } /* ---------- Stacked headline ---------- * One word per line, paired with the diagram. The words are the only thing * that changes: the orbit, its legend and its motion are untouched. * line-height drops below 1 because stacked display words at normal leading * read as a list rather than as one held phrase. */ .vgs-display--stack { line-height: 0.9; letter-spacing: -0.025em; } .vgs-display--stack span { display: block; } @media (min-width: 1040px) { /* Two columns only where there is room for both. Below this the head and the orbit simply stack, which is the layout that already shipped. */ .vgs-orbit-section__top { display: grid; /* minmax(0, ...) rather than 1fr: a bare 1fr floors at min-content, and the longest word here ("standardization") would push the column wider than its share and overflow the container. */ grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; } .vgs-orbit-section--stack .vgs-orbit { margin: 0; max-width: none; } } /* ---------- Argument: headline over a two-column brief ---------- * Proportions come from the supplied reference, measured rather than eyeballed: * headline to ~69% of the measure, columns 676 / 550 at a 1290px measure, * 30px/34px row padding, 96px marks, hairline rules top and bottom of the * stack. Everything here is expressed relatively so it holds at other widths. */ .vgs-argument .vgs-display--section { font-size: clamp(2.25rem, 4.4vw, 3.5rem); line-height: 1.06; letter-spacing: -0.03em; /* em, not rem: the headline should keep the same line count as it scales. */ max-width: 16em; } .vgs-argument__split { margin-top: clamp(2.75rem, 6vw, 5.5rem); display: grid; gap: 3rem; grid-template-columns: minmax(0, 1fr); } @media (min-width: 980px) { .vgs-argument__split { /* 1.23:1 reproduces the reference's 676/550 split once the gap is taken out of the measure. minmax(0,*) so a long unbroken word cannot push a track past its share. */ grid-template-columns: minmax(0, 1.23fr) minmax(0, 1fr); column-gap: 4rem; } } /* Left column: the argument itself. The link is pushed to the bottom edge the way the reference anchors its own, so the two columns close together. */ .vgs-argument__lede { display: flex; flex-direction: column; } .vgs-argument__body { max-width: 34rem; } .vgs-argument__body p + p { margin-top: 1.15rem; } .vgs-argument__link { margin-top: auto; padding-top: 2.5rem; align-self: start; font-family: var(--font-display); font-size: 1rem; font-weight: 500; color: var(--color-text-primary); text-decoration: underline; text-underline-offset: 0.35em; text-decoration-thickness: 1px; text-decoration-color: rgba(0, 0, 0, 0.3); transition: text-decoration-color 0.25s ease; } .vgs-argument__link:hover, .vgs-argument__link:focus-visible { text-decoration-color: currentColor; } .vgs-ground-inverse .vgs-argument__link { color: var(--color-text-inverse); text-decoration-color: rgba(255, 255, 255, 0.4); } .vgs-argument__label { margin: 0 0 1.25rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.22em; color: var(--color-brand-primary); } .vgs-ground-inverse .vgs-argument__label { color: var(--color-brand-accent); } .vgs-argument__rows { margin: 0; padding: 0; list-style: none; } .vgs-argument__row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: clamp(1.25rem, 2.6vw, 2.75rem); padding: 1.875rem 0 2.125rem; border-bottom: 1px solid rgba(0, 0, 0, 0.12); } /* The reference rules the stack closed at the top as well as between rows. */ .vgs-argument__row:first-child { border-top: 1px solid rgba(0, 0, 0, 0.12); } .vgs-ground-inverse .vgs-argument__row { border-color: rgba(255, 255, 255, 0.14); } /* Sized up in step with the padded viewBox below, so the MARK renders at the same visual size while gaining room inside its own box. */ .vgs-argument__figure { width: clamp(80px, 8.7vw, 128px); } /* overflow:visible is insurance, not the fix. The padded viewBox is what stops the curves reaching an edge; this only means an extreme excursion drifts out softly instead of meeting a hard line. */ .vgs-argument__figure svg { display: block; width: 100%; height: auto; overflow: visible; } .vgs-argument__row-title { margin: 0; font-family: var(--font-display); font-size: clamp(1.2rem, 1.7vw, 1.5rem); font-weight: 500; letter-spacing: -0.015em; line-height: 1.08; color: var(--color-text-primary); } .vgs-argument__row-body { margin-top: 0.7rem; font-size: 1rem; line-height: 1.6; color: var(--color-text-secondary); } .vgs-ground-inverse .vgs-argument__row-title { color: var(--color-text-inverse); } .vgs-ground-inverse .vgs-argument__row-body { color: var(--color-text-inverse-secondary); } /* Narrow: the mark stops earning its column and moves above the copy. */ @media (max-width: 560px) { .vgs-argument__row { grid-template-columns: minmax(0, 1fr); row-gap: 1.1rem; } .vgs-argument__figure { width: 80px; } } /* ---------- SplitText line masks ---------- * The mask is the clipping box each line rises out of. It must be block-level * with hidden overflow; the line inside stays inline-block so transforms apply. * Bottom padding stops descenders (g, y, p) being shaved by the clip. * ------------------------------------------------------------------- */ .vgs-line-mask { display: block; overflow: hidden; padding-bottom: 0.08em; } .vgs-line { display: block; will-change: transform; } /* ---------- Footer ---------- */ /* Explicit overrides of vgs-base's footer, which was written for different * markup. Each line below undoes a specific inherited rule: * margin-top -> base adds 4rem, painting a white band between the CTA * band and the footer. * border-top -> base draws a light rule that reads as a seam on dark. * __inner display -> base makes it a 1fr/1fr/auto grid, which turned the * three stacked children into three side-by-side columns. * __meta -> base spans it across the grid and gives it its own * border, both meaningless once __inner is not a grid. */ .vgs-footer { position: relative; overflow: hidden; background: var(--color-bg-inverse); color: var(--color-text-inverse); padding-block: 5.5rem 0; margin-top: 0; border-top: 0; } .vgs-footer__inner { display: block; } .vgs-footer__meta { grid-column: auto; padding-top: 0; border-top: 0; } .vgs-footer__list { display: grid; } .vgs-footer__edge { position: absolute; inset: 0 0 auto; height: 3px; background: var(--gradient-primary); } .vgs-footer__top { display: grid; gap: 3rem; } .vgs-footer__statement { font-family: var(--font-body); font-variation-settings: "opsz" 32; font-weight: 600; font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.03em; background: var(--gradient-primary); -webkit-background-clip: text; background-clip: text; color: transparent; } @supports not ((-webkit-background-clip: text) or (background-clip: text)) { .vgs-footer__statement { background: none; color: var(--color-brand-accent); } } .vgs-footer__tagline { margin-top: 1rem; max-width: 24rem; font-size: 1rem; line-height: 1.65; color: var(--color-text-inverse-secondary); } .vgs-footer__nav { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); } .vgs-footer__label { font-family: var(--font-display); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-text-inverse); margin-bottom: 1.1rem; } /* WCAG 2.2 AA, SC 2.5.8 Target Size (Minimum): 24x24 CSS px. These links sat at 20px. They are a link LIST, not prose, so the "inline" exception does not cover them the way it covers the Privacy Policy link inside the consent sentence. * * The gap drops by what the link gains, so the row pitch is unchanged. Measured * rather than assumed: base.css also puts an 8px margin-bottom on every li, so * the real pitch is link + gap + 8. It was 20 + 12 + 8 = 40; the link now * measures 26 (min-height 24 plus its line box), so the gap goes to 6 and the * pitch stays 40. */ .vgs-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.375rem; } .vgs-footer__list a { font-size: 1rem; color: var(--color-text-inverse-secondary); text-decoration: none; display: inline-flex; align-items: center; min-height: 24px; width: fit-content; } .vgs-footer__list a:hover, .vgs-footer__list a:focus-visible { color: var(--color-brand-accent); } .vgs-footer__base { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid rgba(255,255,255,0.14); display: grid; gap: 1.5rem; } .vgs-footer__contact { font-style: normal; display: grid; gap: 0.4rem; } .vgs-footer__contact span, .vgs-footer__meta { font-size: 0.9375rem; color: var(--color-text-inverse-secondary); } .vgs-footer__contact a { color: inherit; text-decoration: none; } .vgs-footer__contact a:hover { color: var(--color-brand-accent); } .vgs-footer__meta { margin: 0; } /* Outlined wordmark, bled off the bottom. Sized in vw so the crop stays proportional instead of swallowing the mark on small screens. */ .vgs-footer__wordmark { margin: 3.5rem 0 0; padding-inline: 5.5rem; font-family: var(--font-body); font-variation-settings: "opsz" 32; font-weight: 600; font-size: clamp(4rem, 17vw, 16rem); line-height: 0.78; letter-spacing: 0.02em; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.16); white-space: nowrap; } @media (min-width: 860px) { .vgs-footer__top { grid-template-columns: minmax(0, 0.9fr) minmax(0, 2.1fr); gap: 4rem; } .vgs-footer__base { grid-template-columns: 1fr auto; align-items: end; } .vgs-footer__meta { text-align: right; } } /* ---------- Card art ---------- * One stroke weight for everything. The earlier set mixed 1.5 and 2 and used * three different greys, which is why it read as sketchy rather than drawn. * Now: structure is a single hairline, the accent line is the only coloured * stroke, and fills are strong enough to be seen rather than washed out. * ------------------------------------------------------------------- */ .vgs-card__art { margin-top: auto; padding-top: 1.75rem; } .vgs-card__art svg { display: block; width: 100%; max-width: 15rem; height: auto; overflow: visible; shape-rendering: geometricPrecision; /* keeps hairlines from going soft */ } .vgs-art__line, .vgs-art__ring, .vgs-art__rule { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; /* hairline stays 1.5 at any card width */ stroke-linecap: round; stroke-linejoin: round; } .vgs-art__line { stroke: #007A50; } .vgs-art__ring { stroke: rgba(26,26,26,0.32); } .vgs-art__rule { stroke: rgba(26,26,26,0.20); } .vgs-art__bars rect { fill: rgba(26,26,26,0.13); } .vgs-art__overlap { fill: rgba(0,122,80,0.16); } .vgs-art__dot { fill: #007A50; } .vgs-ground-inverse .vgs-art__line { stroke: var(--color-brand-accent); } .vgs-ground-inverse .vgs-art__ring { stroke: rgba(255,255,255,0.34); } .vgs-ground-inverse .vgs-art__rule { stroke: rgba(255,255,255,0.22); } .vgs-ground-inverse .vgs-art__bars rect { fill: rgba(255,255,255,0.15); } .vgs-ground-inverse .vgs-art__overlap { fill: rgba(0,226,151,0.20); } .vgs-ground-inverse .vgs-art__dot { fill: var(--color-brand-accent); } .vgs-grid--cards .vgs-card { display: flex; flex-direction: column; } /* ---------- Footer ---------- * The stylesheet for the FORMER footer used to live here: __headline, __pill, * __lede, __row, __block, __legal. That markup was replaced when the footer was * rebuilt, but its CSS was left behind, and because it sat LATER in the file it * kept winning: its `.vgs-footer__inner { display: grid }` silently reinstated * the exact base-theme grid the override ~100 lines above exists to cancel, * which is what collapsed the four link columns into one and threw the contact * block up beside the nav. * * Removed. The live footer rules are the block above, and there is now exactly * one of them. If a footer rule is not there, it does not exist. */ /* ---------- Card art ---------- */ .vgs-card__art { margin-top: auto; padding-top: 2rem; } .vgs-card__art svg { display: block; width: 100%; height: auto; overflow: visible; } /* Line work. Structural strokes stay quiet; the accent stroke is the one carrying meaning, so it is the only one at full brand colour. */ .vgs-art__line, .vgs-art__ring { fill: none; stroke: #007A50; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .vgs-art__line--faint { stroke: rgba(26,26,26,0.22); } .vgs-art__line--accent { stroke: #007A50; stroke-width: 2; } .vgs-art__ring { stroke: rgba(26,26,26,0.28); } .vgs-art__bars rect { fill: rgba(26,26,26,0.10); } .vgs-art__overlap { fill: rgba(0,122,80,0.14); } .vgs-art__dot { fill: #007A50; } /* On inverse grounds the deep green drops below 3:1, so the whole figure switches to the bright signal colour. */ .vgs-ground-inverse .vgs-art__line, .vgs-ground-inverse .vgs-art__line--accent { stroke: var(--color-brand-accent); } .vgs-ground-inverse .vgs-art__line--faint, .vgs-ground-inverse .vgs-art__ring { stroke: rgba(255,255,255,0.26); } .vgs-ground-inverse .vgs-art__bars rect { fill: rgba(255,255,255,0.12); } .vgs-ground-inverse .vgs-art__overlap { fill: rgba(0,226,151,0.18); } .vgs-ground-inverse .vgs-art__dot { fill: var(--color-brand-accent); } /* Cards become equal-height columns so the figures align on a common baseline across the row instead of floating at different heights. */ .vgs-grid--cards .vgs-card { display: flex; flex-direction: column; } /* ===================================================================== * Glass surfaces * * backdrop-filter blurs what is BEHIND an element. On a flat section ground * there is nothing to blur, so glass renders as a plain translucent panel. * The ambient field below is therefore load-bearing, not decoration: it is * what the blur actually refracts. * * Alphas are kept low on purpose. Card text sits on top of whatever the orb * contributes, so a strong field would swing local contrast per card. * ===================================================================== */ .vgs-section { position: relative; isolation: isolate; } .vgs-ambient { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; } .vgs-ambient span { position: absolute; display: block; border-radius: 50%; filter: blur(70px); opacity: 0.5; } .vgs-ambient span:nth-child(1) { width: 32rem; height: 32rem; top: -8rem; right: -6rem; background: radial-gradient(circle, rgba(0,226,151,0.30), transparent 68%); } /* The lower-left blob is gone deliberately. * * It sat at the BOTTOM edge of every section that carries the ambient, so where * two dark bands met, the upper one arrived at the join carrying a green cast * and the lower one did not. Both grounds are the same #0A0A0A, so that glow was * the only thing drawing a line between them. Removing it is what makes the two * read as one continuous field. The top-right blob stays: it sits away from the * join and does not describe an edge. */ .vgs-ground-page .vgs-ambient span, .vgs-ground-subtle .vgs-ambient span { opacity: 0.34; } /* --- The surface itself --- */ .vgs-glass { background: rgba(255,255,255,0.62); border: 1px solid rgba(15,23,42,0.14); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), /* top specular edge */ 0 10px 30px rgba(15,23,42,0.07); } .vgs-ground-inverse .vgs-glass { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.16); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 10px 34px rgba(0,0,0,0.34); } /* Cards and buttons opt in. */ .vgs-card, .vgs-track__card, .vgs-columns__col, .vgs-exchange__step, .vgs-people__card, .vgs-split__panel { background: rgba(255,255,255,0.62); border: 1px solid rgba(15,23,42,0.14); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), 0 10px 30px rgba(15,23,42,0.07); } .vgs-ground-inverse .vgs-card, .vgs-ground-inverse .vgs-track__card, .vgs-ground-inverse .vgs-columns__col, .vgs-ground-inverse .vgs-exchange__step, .vgs-ground-inverse .vgs-people__card, .vgs-ground-inverse .vgs-split__panel { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.16); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 10px 34px rgba(0,0,0,0.34); } /* Buttons. The accent fill stays opaque: it is the primary action and must not vary with whatever happens to sit behind it. Only the secondary and ghost variants become glass. */ .vgs-btn--secondary, .vgs-btn--ghost, .vgs-footer__pill { background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.28); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18); } .vgs-ground-page .vgs-btn--secondary, .vgs-ground-subtle .vgs-btn--secondary, .vgs-ground-page .vgs-btn--ghost, .vgs-ground-subtle .vgs-btn--ghost { background: rgba(255,255,255,0.55); border-color: rgba(15,23,42,0.16); box-shadow: inset 0 1px 0 rgba(255,255,255,0.8); } /* No backdrop-filter (older Firefox, some embedded webviews): fall back to a near-opaque surface so text contrast never depends on what is behind. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .vgs-card, .vgs-track__card, .vgs-columns__col, .vgs-exchange__step, .vgs-people__card, .vgs-split__panel, .vgs-glass { background: rgba(255,255,255,0.96); } .vgs-ground-inverse .vgs-card, .vgs-ground-inverse .vgs-track__card, .vgs-ground-inverse .vgs-columns__col, .vgs-ground-inverse .vgs-exchange__step, .vgs-ground-inverse .vgs-people__card, .vgs-ground-inverse .vgs-split__panel, .vgs-ground-inverse .vgs-glass { background: rgba(17,17,17,0.96); } .vgs-btn--secondary, .vgs-btn--ghost, .vgs-footer__pill { background: rgba(255,255,255,0.14); } } /* ---------- Crosscurrent ---------- */ .vgs-cross { overflow: hidden; } .vgs-cross__head { text-align: center; } .vgs-cross__head .vgs-display--section { margin-inline: auto; max-width: 60rem; } .vgs-cross__head .vgs-eyebrow { justify-content: center; } .vgs-cross__field { position: relative; margin-top: 4rem; display: grid; gap: 1.25rem; } .vgs-cross__row { overflow: hidden; } .vgs-cross__track { display: flex; align-items: center; gap: 1.75rem; width: max-content; will-change: transform; } .vgs-cross__term { font-family: var(--font-body); font-variation-settings: "opsz" 32; font-size: clamp(1.25rem, 2.6vw, 2rem); font-weight: 500; letter-spacing: -0.02em; white-space: nowrap; color: var(--color-text-secondary); } .vgs-cross__sep { color: var(--color-brand-accent); font-size: 0.85rem; } .vgs-ground-inverse .vgs-cross__term { color: var(--color-text-inverse-secondary); } /* The card sits over the drift, so it needs its own opaque-enough surface or the terms read straight through the text behind it. */ .vgs-cross__card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(30rem, calc(100% - 3rem)); padding: 2.25rem 2rem; border-radius: 16px; text-align: center; background: rgba(255,255,255,0.86); border: 1px solid rgba(15,23,42,0.12); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 16px 44px rgba(15,23,42,0.10); } .vgs-ground-inverse .vgs-cross__card { background: rgba(14,14,14,0.86); border-color: rgba(255,255,255,0.16); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 16px 44px rgba(0,0,0,0.45); } .vgs-cross__card-text { font-family: var(--font-body); font-variation-settings: "opsz" 32; font-size: 1.0625rem; line-height: 1.6; font-weight: 500; color: var(--color-text-primary); } .vgs-ground-inverse .vgs-cross__card-text { color: var(--color-text-inverse); } .vgs-cross__controls { margin-top: 2.5rem; text-align: center; } .vgs-cross__pause { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.6rem 1.1rem; background: none; border: 1px solid rgba(15,23,42,0.16); border-radius: 999px; font-family: var(--font-display); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-text-secondary); cursor: pointer; } .vgs-ground-inverse .vgs-cross__pause { border-color: rgba(255,255,255,0.22); color: var(--color-text-inverse-secondary); } .vgs-cross__pause:focus-visible { outline: 2px solid var(--color-brand-accent); outline-offset: 3px; } .vgs-cross__pause-icon { width: 9px; height: 11px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; } /* Paused state swaps the glyph to a play triangle. */ .vgs-cross__pause[aria-pressed="true"] .vgs-cross__pause-icon { width: 0; height: 0; border-left: 9px solid currentColor; border-right: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; } /* ---------- Categories ---------- */ .vgs-cats__head { text-align: center; } .vgs-cats__head .vgs-display--section { margin-inline: auto; max-width: 62rem; } .vgs-cats__head .vgs-eyebrow { justify-content: center; } .vgs-cats__quote { margin: 2.5rem auto 0; max-width: 46rem; display: grid; gap: 1.25rem; align-items: center; text-align: left; } .vgs-cats__quote blockquote p { font-size: 1.0625rem; line-height: 1.6; color: var(--color-text-secondary); } .vgs-cats__quote figcaption { display: grid; gap: 0.1rem; } .vgs-cats__quote-name { font-weight: 600; font-size: 0.9375rem; color: var(--color-text-primary); } .vgs-cats__quote-role { font-size: 0.875rem; color: var(--color-text-secondary); } /* Rules live on the cells so the whole thing reads as one table. */ .vgs-cats__grid { margin-top: 3.5rem; display: grid; gap: 0; } .vgs-cats__cell { padding: 2.5rem 2rem; border-top: 1px solid rgba(15,23,42,0.12); } .vgs-ground-inverse .vgs-cats__cell { border-top-color: rgba(255,255,255,0.14); } .vgs-cats__title { font-family: var(--font-body); font-variation-settings: "opsz" 32; font-weight: 600; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.12; letter-spacing: -0.03em; color: var(--color-text-primary); } .vgs-ground-inverse .vgs-cats__title { color: var(--color-text-inverse); } .vgs-cats__count { margin-top: 0.9rem; display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 500; color: #007A50; } .vgs-ground-inverse .vgs-cats__count { color: var(--color-brand-accent); } .vgs-cats__count-mark { width: 10px; height: 12px; border-radius: 2px; background: currentColor; opacity: 0.85; } .vgs-cats__list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.55rem; } .vgs-cats__list li { font-size: 1rem; line-height: 1.5; color: var(--color-text-secondary); } /* Last item fades, signalling the list continues. */ .vgs-cats__list li:last-child { opacity: 0.45; } .vgs-ground-inverse .vgs-cats__list li { color: var(--color-text-inverse-secondary); } .vgs-cats__cell--more { display: grid; place-items: center; background: rgba(15,23,42,0.03); } .vgs-ground-inverse .vgs-cats__cell--more { background: rgba(255,255,255,0.04); } .vgs-cats__more { font-family: var(--font-accent); font-style: italic; font-size: clamp(1.5rem, 2.4vw, 2rem); color: #007A50; } .vgs-ground-inverse .vgs-cats__more { color: var(--color-brand-accent); } @media (min-width: 760px) { .vgs-cats__quote { grid-template-columns: 1fr auto; gap: 2.5rem; } .vgs-cats__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Vertical rules between columns, none on the leading edge. */ .vgs-cats__cell + .vgs-cats__cell { border-left: 1px solid rgba(15,23,42,0.12); } .vgs-cats__cell:nth-child(3n+1) { border-left: 0; } .vgs-ground-inverse .vgs-cats__cell + .vgs-cats__cell { border-left-color: rgba(255,255,255,0.14); } } /* Words need to be inline-block for transforms to apply. */ .vgs-word { display: inline-block; will-change: transform; } /* ---------- Feature: asymmetric editorial field ---------- */ .vgs-feature { position: relative; overflow: hidden; } /* Faint vertical rules. They are what let the uneven zones still read as a grid; without them the offsets look like a mistake. */ .vgs-feature__rules { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .vgs-feature__rules span { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,0.06); } .vgs-feature__rules span:nth-child(1) { left: 22%; } .vgs-feature__rules span:nth-child(2) { left: 50%; } .vgs-feature__rules span:nth-child(3) { left: 78%; } .vgs-ground-page .vgs-feature__rules span, .vgs-ground-subtle .vgs-feature__rules span { background: rgba(15,23,42,0.06); } .vgs-feature .container { position: relative; z-index: 1; } .vgs-feature__head .vgs-display--section { font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 0.98; max-width: 60rem; } .vgs-feature__field { margin-top: 3.5rem; display: grid; gap: 2.5rem; } .vgs-feature__slot { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 6px; font-family: var(--font-display); font-size: 0.625rem; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255,255,255,0.5); background: linear-gradient(140deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03)); border: 1px solid rgba(255,255,255,0.10); } .vgs-ground-page .vgs-feature__slot, .vgs-ground-subtle .vgs-feature__slot { color: rgba(15,23,42,0.45); background: linear-gradient(140deg, rgba(15,23,42,0.07), rgba(15,23,42,0.02)); border-color: rgba(15,23,42,0.10); } .vgs-feature__media--lg { aspect-ratio: 4 / 5; } .vgs-feature__media--sm { aspect-ratio: 1 / 1; } .vgs-feature__copy .vgs-prose p { font-size: 1.0625rem; line-height: 1.75; } .vgs-feature__copy .vgs-cta-row { margin-top: 2rem; } @media (min-width: 960px) { .vgs-feature__field { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) minmax(0, 0.7fr); gap: 3.5rem; align-items: start; } /* The offsets. Large block drops low, small block lifts high, copy sits between them so the eye travels diagonally rather than in a straight row. */ .vgs-feature__media--lg { margin-top: 6rem; } .vgs-feature__copy { margin-top: 2.5rem; } .vgs-feature__media--sm { margin-top: -4rem; } .vgs-feature--flip .vgs-feature__field { direction: rtl; } .vgs-feature--flip .vgs-feature__field > * { direction: ltr; } } /* ---------- Stats ---------- */ .vgs-stats__head { text-align: center; } .vgs-stats__head .vgs-display--section { margin-inline: auto; max-width: 54rem; } .vgs-stats__head .vgs-eyebrow { justify-content: center; } .vgs-stats__grid { margin-top: 4rem; display: grid; gap: 0; border-top: 1px solid rgba(15,23,42,0.12); } .vgs-ground-inverse .vgs-stats__grid { border-top-color: rgba(255,255,255,0.14); } .vgs-stats__cell { padding: 2.5rem 2rem 2.5rem 0; } .vgs-stats__value { font-family: var(--font-body); font-variation-settings: "opsz" 32; font-weight: 600; font-size: clamp(3rem, 7vw, 5rem); line-height: 0.92; letter-spacing: -0.045em; color: var(--color-text-primary); } .vgs-ground-inverse .vgs-stats__value { color: var(--color-text-inverse); } /* Pending figures read as visibly unset, never as a value. */ .vgs-stats__cell.is-pending .vgs-stats__value { color: rgba(15,23,42,0.18); letter-spacing: -0.02em; } .vgs-ground-inverse .vgs-stats__cell.is-pending .vgs-stats__value { color: rgba(255,255,255,0.18); } .vgs-stats__label { margin-top: 1.25rem; font-size: 1.0625rem; font-weight: 600; color: var(--color-text-primary); } .vgs-ground-inverse .vgs-stats__label { color: var(--color-text-inverse); } .vgs-stats__note { margin-top: 0.5rem; font-size: 0.9375rem; line-height: 1.6; color: var(--color-text-secondary); } .vgs-ground-inverse .vgs-stats__note { color: var(--color-text-inverse-secondary); } .vgs-stats__flag { margin-top: 2.5rem; font-size: 0.8125rem; line-height: 1.6; color: #007A50; } .vgs-ground-inverse .vgs-stats__flag { color: var(--color-brand-accent); } @media (min-width: 860px) { .vgs-stats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .vgs-stats__cell { padding-left: 2rem; border-left: 1px solid rgba(15,23,42,0.12); } .vgs-stats__cell:first-child { padding-left: 0; border-left: 0; } .vgs-ground-inverse .vgs-stats__cell { border-left-color: rgba(255,255,255,0.14); } } /* ---------- Interlude: full-bleed image break ---------- */ .vgs-interlude { padding: 0; overflow: hidden; } .vgs-interlude__frame { position: relative; overflow: hidden; width: 100%; } .vgs-interlude--sm .vgs-interlude__frame { height: 42vh; min-height: 20rem; } .vgs-interlude--lg .vgs-interlude__frame { height: 68vh; min-height: 26rem; } /* Oversized so the parallax has travel without exposing an edge. */ .vgs-interlude__slot { position: absolute; inset: -12% 0; display: grid; place-items: center; background: linear-gradient(140deg, #2A2C2B, #141615); } .vgs-interlude__slot span { font-family: var(--font-display); font-size: 0.625rem; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(255,255,255,0.55); } /* ---------- Hero: full-bleed media ---------- */ .vgs-heromedia { position: relative; min-height: min(92vh, 54rem); display: flex; align-items: flex-end; padding: 0 0 3.5rem; overflow: hidden; background: var(--color-bg-inverse); } .vgs-heromedia__media { position: absolute; inset: 0; z-index: 0; } .vgs-heromedia__slot { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(150deg, #2E3130, #131514); } .vgs-heromedia__slot span { font-family: var(--font-display); font-size: 0.625rem; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(255,255,255,0.45); } /* Fixed scrim: guarantees the contrast floor regardless of which photograph is dropped in. Every value below is measured against this, not the image. */ .vgs-heromedia__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,8,7,0.92) 0%, rgba(6,8,7,0.72) 38%, rgba(6,8,7,0.28) 70%, rgba(6,8,7,0.10) 100%); } .vgs-heromedia__inner { position: relative; z-index: 1; width: 100%; } .vgs-heromedia__badge { display: inline-block; margin-bottom: 1.75rem; /* The badge is a lockup, not a sentence: broken across two lines it reads as two fragments inside one pill. It needs 235px and wraps below roughly 280px of available width, which is a 320px phone once the gutters are taken out. 235px still fits inside that 272px, so holding it on one line cannot overflow the viewport. */ white-space: nowrap; padding: 0.5rem 1rem; border-radius: 999px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.24); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-family: var(--font-display); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #FFFFFF; } .vgs-heromedia__headline { max-width: 20ch; font-size: clamp(2.75rem, 7.5vw, 6rem); line-height: 0.98; color: #FFFFFF; } .vgs-heromedia__lede { margin-top: 1.5rem; max-width: 40rem; font-size: clamp(1rem, 1.5vw, 1.1875rem); line-height: 1.65; color: rgba(255,255,255,0.82); } .vgs-heromedia .vgs-cta-row { margin-top: 2.25rem; } .vgs-heromedia__facts { list-style: none; margin: 3.5rem 0 0; padding: 0; display: grid; gap: 1.25rem; } .vgs-heromedia__facts li { display: grid; gap: 0.2rem; } .vgs-heromedia__fact-label { font-family: var(--font-body); font-variation-settings: "opsz" 32; font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.01em; color: #FFFFFF; } .vgs-heromedia__fact-note { font-size: 0.875rem; color: rgba(255,255,255,0.72); } @media (min-width: 820px) { .vgs-heromedia { padding-bottom: 4.5rem; } .vgs-heromedia__facts { grid-template-columns: repeat(3, auto); justify-content: start; gap: 0 2.75rem; } /* Divider between facts, not before the first. */ .vgs-heromedia__facts li + li { padding-left: 2.75rem; border-left: 1px solid rgba(255,255,255,0.22); } } /* ===================================================================== * Styling pass: comparison, people, FAQ * ===================================================================== */ /* --- Comparison: raise the brand column into a panel --- */ .vgs-comparison__table { border-spacing: 0; } .vgs-comparison__table thead th { padding-bottom: 1.5rem; font-family: var(--font-display); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; } /* Rounded top on the header cell + tinted body cells reads as one raised column rather than a shaded table row. */ .vgs-comparison__table thead th.is-ours { background: var(--color-bg-inverse); color: var(--color-brand-accent); border-radius: 14px 14px 0 0; padding: 1.5rem 1.75rem; } .vgs-comparison__table tbody .is-ours { background: rgba(0,122,80,0.07); box-shadow: inset 1px 0 0 rgba(0,122,80,0.14), inset -1px 0 0 rgba(0,122,80,0.14); } .vgs-comparison__table tbody tr:last-child .is-ours { border-radius: 0 0 12px 12px; box-shadow: inset 1px 0 0 rgba(0,122,80,0.14), inset -1px 0 0 rgba(0,122,80,0.14), inset 0 -1px 0 rgba(0,122,80,0.14); } .vgs-comparison__table th, .vgs-comparison__table td { padding: 1.35rem 1.75rem; } .vgs-comparison__table tbody th { padding-left: 0; font-size: 1.0625rem; } .vgs-comparison__table tbody tr + tr th, .vgs-comparison__table tbody tr + tr td:not(.is-ours) { border-top: 1px solid rgba(15,23,42,0.10); } .vgs-comparison .vgs-cta-row { margin-top: 2.5rem; } /* --- People: give the empty portrait a real presence --- */ .vgs-people__card { padding: 0; overflow: hidden; border-radius: 16px; transition: transform .35s ease, box-shadow .35s ease; } .vgs-people__card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(15,23,42,0.12); } .vgs-people__portrait { border-radius: 0; margin-bottom: 0; aspect-ratio: 4/5; } /* Monogram stands in for the missing photograph instead of an empty box. */ .vgs-people__portrait.is-empty { position: relative; background: linear-gradient(150deg, rgba(0,122,80,0.16), rgba(0,120,110,0.05)); border: 0; border-bottom: 1px solid rgba(15,23,42,0.10); } .vgs-people__portrait.is-empty::after { content: attr(data-initials); position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-body); font-variation-settings: "opsz" 32; font-weight: 600; font-size: 2.5rem; letter-spacing: -0.02em; color: rgba(0,122,80,0.32); } .vgs-people__card > :not(.vgs-people__portrait) { padding-inline: 1.5rem; } .vgs-people__card > .vgs-people__name { padding-top: 1.5rem; } .vgs-people__card > .vgs-people__bio { padding-bottom: 1.75rem; } .vgs-ground-inverse .vgs-people__portrait.is-empty::after { color: rgba(0,226,151,0.34); } /* --- FAQ: real rows with an animated marker --- */ .vgs-faq__list { margin-top: 3rem; border-top: 1px solid rgba(15,23,42,0.12); } .vgs-faq__item { border-bottom: 1px solid rgba(15,23,42,0.12); } .vgs-faq__item summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; padding: 1.6rem 0; cursor: pointer; list-style: none; } .vgs-faq__item summary::-webkit-details-marker { display: none; } .vgs-faq__q { font-family: var(--font-body); font-variation-settings: "opsz" 32; font-weight: 600; font-size: clamp(1.0625rem, 1.6vw, 1.25rem); letter-spacing: -0.015em; color: var(--color-text-primary); } .vgs-faq__toggle { flex: 0 0 auto; width: 1.75rem; height: 1.75rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(15,23,42,0.18); font-size: 1rem; line-height: 1; color: var(--color-text-secondary); transition: transform .3s ease, background-color .3s ease, color .3s ease; } .vgs-faq__item[open] .vgs-faq__toggle { transform: rotate(45deg); background: var(--color-brand-accent); border-color: var(--color-brand-accent); color: #1A1A1A; } .vgs-faq__a { padding: 0 0 1.75rem; max-width: 52rem; } .vgs-faq__a p { font-size: 1rem; line-height: 1.7; color: var(--color-text-secondary); } .vgs-faq__item summary:focus-visible { outline: 2px solid var(--color-brand-accent); outline-offset: 4px; } .vgs-ground-inverse .vgs-faq__list, .vgs-ground-inverse .vgs-faq__item { border-color: rgba(255,255,255,0.14); } .vgs-ground-inverse .vgs-faq__q { color: var(--color-text-inverse); } .vgs-ground-inverse .vgs-faq__a p { color: var(--color-text-inverse-secondary); } /* ===================================================================== * Buttons + CTA * ===================================================================== */ /* Pill geometry sitewide. Square buttons were reading as default browser chrome against an otherwise editorial page. */ .vgs-btn { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.95rem 1.75rem; border-radius: 999px; font-family: var(--font-body); font-variation-settings: "opsz" 20; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.005em; text-decoration: none; transition: transform .25s ease, background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease; } .vgs-btn:hover, .vgs-btn:focus-visible { transform: translateY(-2px); } .vgs-btn:active { transform: translateY(0); } /* The generated chevron is gone. Every button carried it, so it marked nothing, and once the arrow-ne glyph arrived each primary button had two arrows pointing different directions. The real mark is now drawn once, in markup, and only on the button that leads. */ .vgs-btn.vgs-btn--accent { box-shadow: 0 8px 24px rgba(0,226,151,0.22); } .vgs-btn.vgs-btn--accent:hover { box-shadow: 0 12px 30px rgba(0,226,151,0.30); } /* SCOPED to dark grounds. Unscoped, this rule's white text also landed on the page and subtle bands, where the ghost button already carries a light glass fill from the rule above: white label on a near-white pill, an invisible call to action. The earlier rule sets a background but no colour, so the white here won on specificity order alone. The hero is listed explicitly because vgs_render_section_heromedia() emits no ground class; it is dark by construction, not by data. */ .vgs-ground-inverse .vgs-btn--ghost, .vgs-heromedia .vgs-btn--ghost { background: rgba(255,255,255,0.06); /* 0.42, not 0.28. A button border is a UI component boundary and owes 3:1 under WCAG 1.4.11. At 0.28 it measured 2.39:1 against the CTA gradient wash. 0.36 is the computed minimum across both the wash and a plain inverse band; 0.42 keeps headroom once a photo sits behind it. */ border: 1px solid rgba(255,255,255,0.42); color: #FFFFFF; } .vgs-ground-inverse .vgs-btn--ghost:hover, .vgs-ground-inverse .vgs-btn--ghost:focus-visible, .vgs-heromedia .vgs-btn--ghost:hover, .vgs-heromedia .vgs-btn--ghost:focus-visible { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.68); } /* Light grounds: the label has to be stated, not inherited. */ .vgs-ground-page .vgs-btn--ghost, .vgs-ground-subtle .vgs-btn--ghost { color: var(--color-text-primary); border-color: rgba(15,23,42,0.22); } .vgs-ground-page .vgs-btn--ghost:hover, .vgs-ground-page .vgs-btn--ghost:focus-visible, .vgs-ground-subtle .vgs-btn--ghost:hover, .vgs-ground-subtle .vgs-btn--ghost:focus-visible { background: rgba(255,255,255,0.85); border-color: rgba(15,23,42,0.42); } /* --- CTA band --- */ .vgs-cta { position: relative; overflow: hidden; text-align: center; } .vgs-cta .container { position: relative; z-index: 1; } /* Gradient wash so the closing band is a moment rather than another dark box. */ .vgs-cta::before { content: ""; position: absolute; z-index: 0; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(64rem, 120%); aspect-ratio: 1; background: radial-gradient(circle, rgba(0,226,151,0.20), rgba(0,229,212,0.06) 45%, transparent 68%); filter: blur(30px); pointer-events: none; } .vgs-cta .vgs-display--section, .vgs-cta .vgs-display { margin-inline: auto; max-width: 22ch; font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 0.98; } .vgs-cta__body, .vgs-cta p:not(.vgs-eyebrow) { margin: 1.75rem auto 0; max-width: 40rem; font-size: 1.0625rem; line-height: 1.7; } .vgs-cta .vgs-cta-row { margin-top: 2.75rem; justify-content: center; } .vgs-cta-row { display: flex; flex-wrap: wrap; gap: 1rem; } /* --- Footer statement wrapping --- */ /* The brand column was 0.9fr, which broke "Scale Without Surrender" onto three lines. Widen it and stop the statement wrapping mid-phrase. */ @media (min-width: 860px) { .vgs-footer__top { grid-template-columns: minmax(18rem, 1.15fr) minmax(0, 2fr); } } .vgs-footer__statement { text-wrap: balance; max-width: 16ch; } /* ---------- Structures: centre media, panels either side ---------- */ .vgs-structures__head { text-align: center; } .vgs-structures__head .vgs-display--section { margin-inline: auto; max-width: 46rem; } .vgs-structures__head .vgs-eyebrow { justify-content: center; } .vgs-structures__field { margin-top: 4rem; display: grid; gap: 1.5rem; } .vgs-structures__media { position: relative; overflow: hidden; border-radius: 18px; min-height: 18rem; display: grid; place-items: center; background: linear-gradient(150deg, #2E3130, #131514); } /* With a photograph in it the slot stops being a labelled placeholder: the gradient would otherwise show through any letterboxing, and the centring grid would shrink-wrap the image instead of filling the column. */ .vgs-structures__media--photo { background: var(--color-bg-subtle); display: block; } /* Absolutely positioned, not height:100%. * * The slot takes its height from min-height, and a percentage height only * resolves against a DEFINITE parent height. At the middle breakpoint the row * did not hand the slot a definite height, so height:100% fell back to auto and * the picture sat 81px short of the bottom with the slot's own background * showing under it. inset:0 fills the padding box however the height was * arrived at. The parent is already position:relative with overflow:hidden. */ .vgs-structures__media--photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } .vgs-structures__media span { font-family: var(--font-display); font-size: 0.625rem; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(255,255,255,0.45); } .vgs-structures__panel { padding: 2.25rem; border-radius: 18px; background: rgba(255,255,255,0.62); border: 1px solid rgba(15,23,42,0.14); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), 0 12px 34px rgba(15,23,42,0.08); } .vgs-ground-inverse .vgs-structures__panel { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.16); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 12px 34px rgba(0,0,0,0.34); } .vgs-structures__title { font-family: var(--font-body); font-variation-settings: "opsz" 32; font-weight: 600; font-size: clamp(1.375rem, 2.2vw, 1.75rem); letter-spacing: -0.025em; color: var(--color-text-primary); } .vgs-ground-inverse .vgs-structures__title { color: var(--color-text-inverse); } .vgs-structures__list { list-style: none; margin: 1.5rem 0 0; padding: 0; } .vgs-structures__list li { position: relative; padding: 0.85rem 0 0.85rem 1.4rem; font-size: 0.9875rem; line-height: 1.6; color: var(--color-text-secondary); border-top: 1px solid rgba(15,23,42,0.10); } .vgs-structures__list li::before { content: ""; position: absolute; left: 0; top: 1.3rem; width: 5px; height: 5px; border-radius: 50%; background: #007A50; } .vgs-ground-inverse .vgs-structures__list li { color: var(--color-text-inverse-secondary); border-top-color: rgba(255,255,255,0.14); } .vgs-ground-inverse .vgs-structures__list li::before { background: var(--color-brand-accent); } .vgs-structures__link { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.75rem; font-size: 0.9375rem; font-weight: 600; text-decoration: none; color: #007A50; } .vgs-structures__link::after { content: ""; width: 0.45rem; height: 0.45rem; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .25s ease; } .vgs-structures__link:hover::after { transform: rotate(45deg) translate(2px,-2px); } .vgs-ground-inverse .vgs-structures__link { color: var(--color-brand-accent); } @media (min-width: 1000px) { .vgs-structures__field { grid-template-columns: minmax(0,1fr) minmax(0,0.85fr) minmax(0,1fr); gap: 2rem; align-items: center; } /* Explicit column placement keeps DOM order (left, media, right) intact while putting the media visually in the middle. */ .vgs-structures__panel--left { grid-column: 1; } .vgs-structures__media { grid-column: 2; min-height: 26rem; } .vgs-structures__panel--right { grid-column: 3; } } /* ---------- Hero: match the reference composition ---------- */ /* Slot label was centred over the whole hero and collided with the headline. Park it in a corner where a real photograph would not be judged by it. */ .vgs-heromedia__slot { place-items: end start; padding: 1.5rem; } .vgs-heromedia__slot span { opacity: 0.5; } /* Headline is tight and bottom-anchored so the media reads above it. */ .vgs-heromedia__headline { max-width: 20ch; font-size: clamp(2.5rem, 6vw, 5rem); } .vgs-heromedia__lede { max-width: 34rem; } .vgs-heromedia__foot { margin-top: 2.5rem; display: grid; gap: 2rem; align-items: end; } .vgs-heromedia__facts { margin-top: 0; } .vgs-heromedia .vgs-cta-row { margin-top: 0; } @media (min-width: 900px) { /* One row: actions left, facts right, baselines aligned. */ .vgs-heromedia__foot { grid-template-columns: auto 1fr; justify-content: space-between; gap: 3rem; } .vgs-heromedia__facts { justify-self: end; } /* Measure is tuned to the headline, not the other way round. At 14ch the six words set 7/13/13: a hanging article, a hollow top and a bottom-heavy wedge. At 21ch it breaks once, after "that", leaving the emphasis phrase whole on a line of its own, which is the only placement where a single accented phrase reads as a deliberate beat rather than a coloured word. */ .vgs-heromedia__headline { max-width: 21ch; } } /* ---------- Hero: let the media breathe ---------- * Measured against the reference hero this was built from: there the content * block occupies 238px of an 860px frame and the top 63% is pure photograph. * Ours had grown to 694px of 828px, leaving about 86px of visible media, which * is the inversion that made the whole bottom edge feel packed. * * Two levers, applied together: a shorter H1 (the copy change) and a lighter * fact rail (below). Nothing here changes the hero's height; it reduces what * has to fit inside it. */ /* The facts are a footnote to the hero, not a second headline. At 17px/600 the * labels sat within two points of the lede, so the eye read them as equal * content. The reference keeps its rail to roughly a third of the frame, hard * right; ours was sprawling across 713px of a 1200px row. */ .vgs-heromedia__fact-label { font-size: 0.875rem; letter-spacing: 0.005em; /* opsz belongs to Inter and is set for display sizes elsewhere. At 14px the display cut is wrong: it is spaced for 80px type and reads loose here. */ font-variation-settings: "opsz" 20; } .vgs-heromedia__fact-note { font-size: 0.8125rem; line-height: 1.45; color: rgba(255, 255, 255, 0.62); } @media (min-width: 900px) { .vgs-heromedia__facts { /* Separation is gap PLUS the divider padding below, so 1.5rem here reads as 3rem between items. Kept small because the padding is charged to the track: every rem here costs the labels room to sit on one line. */ gap: 0 1.5rem; /* Equal tracks, not auto. With auto the longest NOTE wins the width and starves the other columns, which wrapped "Doctor-partner equity" onto two lines and left the rail ragged against its neighbours. Equal tracks guarantee every label the same room. */ grid-template-columns: repeat(3, minmax(0, 1fr)); /* Hard stop. Without it a long note pushes the rail back across the row and undoes the alignment the reference depends on. */ /* Sized from the longest label, not picked. Tracks are (37rem - 2 gaps)/3; columns 2 and 3 are charged the divider padding, leaving ~157px of content against a 151px longest label. Narrower and they wrap. */ max-width: 37rem; } .vgs-heromedia__facts li { align-content: start; } .vgs-heromedia__facts li + li { padding-left: 1.5rem; } /* Air between the argument and the rail. The rail loses more height than this adds, so the block still nets shorter. */ .vgs-heromedia__foot { margin-top: 3rem; } } /* ===================================================================== * Exchange: the cards fold into one another. * * LAST in the file on purpose. Two earlier rules defeat this one wherever it * is placed above them: * - the glass pass sets `position: relative; isolation: isolate` * - the glass pass sets a translucent background * Both win on source order, so the stack lives at the end rather than fighting * them with escalating selectors. * * Sticky, not a ScrollTrigger pin. A pin inserts a spacer and converts scroll * distance into travel, which is what got the earlier horizontal track reverted * on this project. Sticky adds no scroll length and survives resize without a * ScrollTrigger.refresh(). * * Below 900px the cards stay a plain list: stacking on a short viewport just * hides content behind content. * ===================================================================== */ @media (min-width: 900px) { .vgs-exchange__steps { /* Normal flow, not grid. `gap` would add space on top of the sticky offsets, and each card needs to own its own scroll length. */ display: block; gap: 0; } .vgs-exchange__step { position: sticky; /* Each card parks 1.25rem below the one before, so the stack shows the edges of everything beneath it instead of burying them. */ top: calc(5.5rem + var(--vgs-stack-i, 0) * 1.25rem); margin-bottom: 4.5rem; will-change: transform; } .vgs-exchange__step:last-child { margin-bottom: 0; } /* OPAQUE, and this is the one real trade in the feature: glass and stacking are incompatible. A translucent card lets the card beneath print straight through it, and a stack of four reads as a rendering fault rather than as depth. The glass LANGUAGE is kept, since the border, inset highlight and drop shadow all survive from the pass above; only the transparency and the backdrop-filter are dropped, and the filter would have been wasted work on an opaque surface anyway. */ .vgs-exchange__step, .vgs-ground-inverse .vgs-exchange__step { background: linear-gradient(155deg, #1B1D1C, #121413); backdrop-filter: none; -webkit-backdrop-filter: none; } .vgs-ground-page .vgs-exchange__step, .vgs-ground-subtle .vgs-exchange__step { background: linear-gradient(155deg, #FFFFFF, #F6F8F7); } /* The pillars section opts into the same stack with layout:"stack". It reuses the machinery above rather than repeating it, so there is one sticky-stack behaviour on the site and not two that drift apart. */ .vgs-caps-grid--stack .vgs-caps-grid__grid { display: block; gap: 0; } .vgs-caps-grid--stack .vgs-caps-grid__card { position: sticky; top: calc(5.5rem + var(--vgs-stack-i, 0) * 1.25rem); margin-bottom: 4.5rem; will-change: transform; /* These cards carry about thirty words each. Left at content height they stack into slivers, so the effect reads as a glitch rather than depth. A floor gives each card enough face to be worth covering. */ min-height: clamp(17rem, 34vh, 22rem); justify-content: center; padding: 3rem 2.75rem; border-radius: 20px; } .vgs-caps-grid--stack .vgs-caps-grid__card:last-child { margin-bottom: 0; } /* Opaque, for the same reason the exchange cards are. */ .vgs-caps-grid--stack .vgs-caps-grid__card, .vgs-ground-inverse .vgs-caps-grid--stack .vgs-caps-grid__card { background: linear-gradient(155deg, #1B1D1C, #121413); backdrop-filter: none; -webkit-backdrop-filter: none; } .vgs-ground-page .vgs-caps-grid--stack .vgs-caps-grid__card, .vgs-ground-subtle .vgs-caps-grid--stack .vgs-caps-grid__card { background: linear-gradient(155deg, #FFFFFF, #F6F8F7); } /* At panel width the number and title belong beside the body, not stacked above it with the rest of the card empty. */ .vgs-caps-grid--stack .vgs-caps-grid__card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 3rem; align-items: start; } .vgs-caps-grid--stack .vgs-caps-grid__num { grid-column: 1; } .vgs-caps-grid--stack .vgs-caps-grid__title { grid-column: 1; align-self: start; margin-top: 0.35rem; } .vgs-caps-grid--stack .vgs-caps-grid__body { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 1.0625rem; } } /* ===================================================================== * Hero background video. * ===================================================================== */ .vgs-heromedia__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* The poster paints here too, so the frame is filled before a single byte of video is fetched. */ object-position: center; display: block; z-index: 0; } /* Pause control. Deliberately quiet: it is a conformance requirement, not a feature, so it sits in the corner at low contrast until focused or hovered. It still clears 4.5:1 against the scrim at its resting state. */ /* A utility, not an action. * * The outlined pill read as a call to action sitting in the hero, competing * with the actual one. What made it look like a button was the 1px ring, the * full pill radius and the padding around it, so those go. * * It keeps a soft dark backing rather than sitting bare on the footage: this is * a control over moving video, and its label has to hold a contrast floor on * every frame, which nothing sitting directly on the picture can promise. */ .vgs-heromedia__toggle { position: absolute; right: clamp(1rem, 3vw, 2.5rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 3; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.5rem; border-radius: 6px; border: 0; background: rgba(10, 12, 11, 0.42); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: rgba(255, 255, 255, 0.78); font-family: var(--font-display); font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: color 0.2s ease, background 0.2s ease; } .vgs-heromedia__toggle:hover, .vgs-heromedia__toggle:focus-visible { color: #FFFFFF; background: rgba(10, 12, 11, 0.66); } /* Two bars for pause; one triangle would need a second shape, and the bars invert to a single filled block for play without changing the box. */ .vgs-heromedia__toggle-icon { width: 8px; height: 9px; border-left: 2.5px solid currentColor; border-right: 2.5px solid currentColor; } .vgs-heromedia__toggle[aria-pressed="true"] .vgs-heromedia__toggle-icon { border: 0; background: currentColor; width: 9px; height: 10px; clip-path: polygon(0 0, 100% 50%, 0 100%); } @media (max-width: 600px) { .vgs-heromedia__toggle-text { /* Keep the accessible name, drop the visible text at small sizes. */ position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } } /* The script never starts the video under reduced motion, so there is nothing to pause and the control would be a dead end. */ @media (prefers-reduced-motion: reduce) { .vgs-heromedia__toggle { display: none; } } /* ---------- Brand lockup ---------- * One inlined asset serves both grounds. The supplied file sets the wordmark * in #002b1f, which is legible on white and all but invisible on the inverse * footer, so the wordmark is the one part CSS recolours. The graphic mark * keeps the client's own greens everywhere: those are the logo, not a theme * token, and must not drift toward the site palette. */ .vgs-logo { display: block; width: auto; height: 100%; } .vgs-logo__word { fill: #002b1f; } .vgs-logo__mark-a { fill: #01c993; } .vgs-logo__mark-b { fill: #029f81; } .vgs-header__brand { display: flex; align-items: center; height: 2.25rem; } .vgs-header__brand .vgs-logo { height: 2.25rem; } /* Inverse grounds: only the wordmark flips. */ .vgs-ground-inverse .vgs-logo__word, .vgs-footer .vgs-logo__word { fill: #FFFFFF; } .vgs-footer__logo { margin-bottom: 1.25rem; } .vgs-footer__logo .vgs-logo { height: 2.75rem; } @media (max-width: 600px) { .vgs-header__brand, .vgs-header__brand .vgs-logo { height: 1.85rem; } } /* ---------- Real photography inside the media slots ---------- * The slots were built to hold a labelled gradient placeholder. When an actual * photograph arrives it has to fill the same box exactly, or the section's * rhythm changes depending on whether art exists yet. object-fit:cover keeps * the crop decision in CSS, per breakpoint, which is why nothing is cropped * during export. */ .vgs-interlude__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } .vgs-feature__slot--img { /* The label variant is a span with text padding. Once it holds an image that padding would letterbox the photograph inside its own frame. */ display: block; padding: 0; overflow: hidden; } .vgs-feature__slot--img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* The editorial figure already sized its ; this only guarantees the crop behaviour matches the other two slots. */ .vgs-media__figure img { object-fit: cover; object-position: center; } /* ---------- Capabilities: card over the rails ---------- * The rails are absolutely positioned and the card is relative with a z-index, * so the words run BEHIND it and the card occludes the middle of the band. * That occlusion is the whole composition, which is why the card background is * fully opaque: any translucency and the words show through it. */ .vgs-caps { overflow: hidden; } .vgs-caps__stage { position: relative; margin-top: 3.25rem; min-height: clamp(300px, 34vw, 400px); display: grid; place-items: center; } .vgs-caps__rails { position: absolute; inset: 0; display: grid; align-content: center; gap: 1.5rem; /* Fade both ends so the loop has no hard entry or exit. */ -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); } .vgs-caps__rail { overflow: hidden; } .vgs-caps__track { display: flex; width: max-content; will-change: transform; } .vgs-caps__term { font-family: var(--font-body); font-variation-settings: "opsz" 32; font-weight: 600; font-size: clamp(1.05rem, 2.1vw, 1.6rem); letter-spacing: -0.02em; white-space: nowrap; color: rgba(255, 255, 255, 0.62); } /* Drawn, not typed. Punctuation here would be announced between every name. */ .vgs-caps__sep { flex: none; width: 5px; height: 5px; margin: 0 1.9rem; border-radius: 50%; background: var(--color-brand-accent); align-self: center; } .vgs-caps__card { position: relative; z-index: 1; width: clamp(230px, 26vw, 330px); padding: 2rem 2rem 1.75rem; border-radius: 22px; /* Opaque by design. See the note above. */ background: #101312; border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55); } .vgs-eight { display: block; width: 100%; height: auto; overflow: visible; } .vgs-caps__foot { display: flex; justify-content: center; margin-top: 1.75rem; } .vgs-caps__pause { display: inline-flex; align-items: center; gap: 0.6rem; background: none; border: 0; cursor: pointer; padding: 0.5rem 0.75rem; font-family: var(--font-display); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: rgba(255, 255, 255, 0.66); transition: color .25s ease; } .vgs-caps__pause:hover, .vgs-caps__pause:focus-visible { color: var(--color-text-inverse); } /* Two bars while running, one triangle when paused. Drawn from borders so the control needs no icon font and no second asset. */ .vgs-caps__pause-glyph { width: 9px; height: 11px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; } .vgs-caps__pause[aria-pressed="true"] .vgs-caps__pause-glyph { width: 0; height: 0; border-left: 9px solid currentColor; border-right: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; } .vgs-caps__actions { margin-top: 2.5rem; display: flex; justify-content: center; } @media (max-width: 720px) { .vgs-caps__sep { margin: 0 1.1rem; } .vgs-caps__card { padding: 1.5rem; border-radius: 18px; } } /* ---------- Fit grid ---------- */ .vgs-fitgrid__grid { margin-top: 3.5rem; display: grid; grid-template-columns: 1fr; /* Hairlines are drawn by the cells, not by the grid, so an incomplete final row cannot leave a rule hanging in empty space. */ border-top: 1px solid var(--color-border-default); } .vgs-fitgrid__cell { padding: 2.25rem 0; border-bottom: 1px solid var(--color-border-default); } .vgs-fitgrid__title { font-family: var(--font-body); font-variation-settings: "opsz" 32; font-weight: 600; font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.14; letter-spacing: -0.025em; color: var(--color-text-primary); margin: 0; text-wrap: balance; } .vgs-fitgrid__body { margin: 0.85rem 0 0; font-size: 0.9375rem; line-height: 1.66; color: var(--color-text-secondary); max-width: 34ch; } .vgs-ground-inverse .vgs-fitgrid__grid, .vgs-ground-inverse .vgs-fitgrid__cell { border-color: rgba(255,255,255,0.14); } .vgs-ground-inverse .vgs-fitgrid__title { color: var(--color-text-inverse); } .vgs-ground-inverse .vgs-fitgrid__body { color: var(--color-text-inverse-secondary); } /* The promo cell reverses the ground so it reads as an exit, not an item. */ .vgs-fitgrid__cell--promo { display: flex; flex-direction: column; gap: 0.6rem; text-decoration: none; background: var(--color-bg-inverse); color: var(--color-text-inverse); padding: 2.25rem 1.75rem; transition: background-color .3s ease; } .vgs-fitgrid__cell--promo:hover, .vgs-fitgrid__cell--promo:focus-visible { background: #16211D; } .vgs-fitgrid__promo-kicker { font-family: var(--font-display); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-brand-accent); } .vgs-fitgrid__promo-title { font-family: var(--font-body); font-variation-settings: "opsz" 32; font-weight: 600; font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.14; letter-spacing: -0.025em; } .vgs-fitgrid__promo-link { margin-top: auto; padding-top: 1.25rem; font-size: 0.875rem; font-weight: 600; color: var(--color-brand-accent); } @media (min-width: 700px) { .vgs-fitgrid__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .vgs-fitgrid__grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 700px) { /* Vertical rules between columns only. :not(:last-child) would rule the final cell of a short row against nothing. */ .vgs-fitgrid__cell { padding-inline: 1.75rem; border-right: 1px solid var(--color-border-default); } .vgs-fitgrid__cell:first-child { padding-left: 0; } .vgs-ground-inverse .vgs-fitgrid__cell { border-right-color: rgba(255,255,255,0.14); } } /* ---------- Batch: header centring, hover lift, parallax prose ---------- */ /* Capabilities header sits over a centred composition, so left-aligned type left the whole block hanging off one edge of its own card. */ .vgs-caps .vgs-eyebrow, .vgs-caps .vgs-display--section, .vgs-caps .vgs-section-intro { text-align: center; } .vgs-caps .vgs-section-intro { margin-inline: auto; max-width: 46rem; } /* The eyebrow's leading rule is drawn with ::before, which does not centre with text-align alone once the element is a block. */ .vgs-caps .vgs-eyebrow { display: flex; align-items: center; justify-content: center; } /* Fit cells: lift and highlight. transform and box-shadow only, both compositor properties, so the hover never triggers layout on a 8-cell grid. */ .vgs-fitgrid__cell { position: relative; transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease, background-color .35s ease; } @media (hover: hover) { .vgs-fitgrid__cell:hover { transform: translateY(-6px); background: var(--color-bg-page); box-shadow: 0 18px 40px rgba(15, 23, 42, 0.10); z-index: 1; } .vgs-fitgrid__cell--promo:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38); } } .vgs-fitgrid__cell--promo { transition: transform .35s cubic-bezier(.2,.7,.3,1), background-color .3s ease, box-shadow .35s ease; } /* Prose on a photograph. */ .vgs-prosemedia { position: relative; overflow: hidden; } .vgs-prosemedia__bg { position: absolute; inset: 0; z-index: 0; } .vgs-prosemedia__img { position: absolute; inset: -12% 0; width: 100%; height: 124%; object-fit: cover; object-position: center; /* Oversized on purpose: the parallax drifts it, and a frame-sized image would show its own edge as soon as it moved. */ } /* Fixed scrim. The contrast floor cannot depend on which photograph is used, so this is opaque enough to carry white type over any of them. */ .vgs-prosemedia__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,8,7,0.94) 0%, rgba(6,8,7,0.86) 46%, rgba(6,8,7,0.62) 100%); } .vgs-prosemedia__inner { position: relative; z-index: 1; max-width: 46rem; } .vgs-prosemedia .vgs-prose { margin-top: 1.5rem; } .vgs-prosemedia .vgs-prose p { color: rgba(255,255,255,0.86); } /* ================= A. Step rows ================= */ .vgs-steprows__list { list-style: none; margin: 3rem 0 0; padding: 0; } .vgs-steprows__row { border-top: 1px solid var(--color-border-default); } .vgs-steprows__row:last-child { border-bottom: 1px solid var(--color-border-default); } .vgs-steprows__hit { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; align-items: center; gap: 1.5rem; padding: 2rem 1.25rem; text-decoration: none; color: inherit; /* Only transform and colour animate. Padding or width here would relayout every sibling row on each hover. */ transition: transform .35s cubic-bezier(.2,.7,.3,1), background-color .35s ease, box-shadow .35s ease; } .vgs-steprows__num { font-family: var(--font-display); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.14em; color: #007A50; } .vgs-steprows__copy { display: grid; gap: 0.5rem; } .vgs-steprows__title { font-family: var(--font-body); font-variation-settings: "opsz" 32; font-weight: 600; font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.16; letter-spacing: -0.025em; color: var(--color-text-primary); } .vgs-steprows__body { font-size: 0.9375rem; line-height: 1.65; color: var(--color-text-secondary); max-width: 58ch; } .vgs-steprows__arrow { flex: none; width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--color-border-strong); color: var(--color-text-primary); transition: background-color .35s ease, border-color .35s ease, color .35s ease, transform .45s cubic-bezier(.2,.7,.3,1); } .vgs-steprows__arrow svg { width: 1.15rem; height: 1.15rem; } @media (hover: hover) { .vgs-steprows__hit:hover, .vgs-steprows__hit:focus-visible { transform: translateY(-4px); background: var(--color-bg-page); box-shadow: 0 16px 38px rgba(15, 23, 42, 0.10); } /* Fills, and turns to point along the travel. */ .vgs-steprows__hit:hover .vgs-steprows__arrow, .vgs-steprows__hit:focus-visible .vgs-steprows__arrow { background: var(--color-brand-accent); border-color: var(--color-brand-accent); color: #1A1A1A; transform: rotate(45deg); } .vgs-steprows__hit:hover .vgs-steprows__title { color: #0B6B49; } } .vgs-ground-inverse .vgs-steprows__row { border-color: rgba(255,255,255,0.14); } .vgs-ground-inverse .vgs-steprows__title { color: var(--color-text-inverse); } .vgs-ground-inverse .vgs-steprows__body { color: var(--color-text-inverse-secondary); } @media (max-width: 700px) { .vgs-steprows__hit { grid-template-columns: 2.5rem minmax(0,1fr); padding: 1.5rem 0; } .vgs-steprows__arrow { display: none; } } /* ================= Step track: flat cards on a native rail ================= * Proportions taken from the reference, converted to brand colour: * card 347x413, radius 12, padding 38.8/19.4, 31px gap * number 19.7px/600 accent, title ~33px, subtitle 14px, all centred * Its card tint is a slightly deeper wash of its own page ground, so ours is * the same move against white rather than a grey borrowed from nowhere. */ .vgs-steptrack__viewport { margin-top: 3rem; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .vgs-steptrack__viewport::-webkit-scrollbar { display: none; } /* The focus ring belongs on the scroller: it is a tabbable region, and without a visible ring a keyboard user cannot tell they have landed on it. */ .vgs-steptrack__viewport:focus-visible, .vgs-steptrack__rail:focus-visible { outline: 2px solid #007A50; outline-offset: 4px; } .vgs-steptrack__rail { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.9rem; /* Align the first and last card to the text column rather than the viewport edge, so the rail starts where the headline starts. */ padding-inline: max(1.5rem, calc((100vw - 76rem) / 2)); width: max-content; } .vgs-steptrack__card { flex: none; width: clamp(270px, 27vw, 347px); min-height: 413px; scroll-snap-align: start; /* justify-content centres the stack in the card's own height. Without it the group sat at the top and every card carried a different amount of dead space underneath, because the copy lengths differ. */ display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2.4rem 1.2rem; border-radius: 12px; /* Same glass as the capability cards and the buttons: one surface language across the site rather than a third card treatment. */ background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(15, 23, 42, 0.16); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8); } /* Without backdrop-filter, 55% white over a photograph is a smear. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .vgs-steptrack__card { background: rgba(255, 255, 255, 0.94); } } /* The number is the loudest thing on the card in the reference, so it carries the gradient rather than the heading. background-clip needs a real colour underneath it: unsupported engines and forced-colors mode would otherwise render the digits invisible rather than merely unstyled. */ .vgs-steptrack__num { font-family: var(--font-body); font-variation-settings: "opsz" 32; font-size: clamp(1.9rem, 3.4vw, 2.75rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1; color: #007A50; background: linear-gradient(135deg, #007A50, #00786E); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } @supports not ((-webkit-background-clip: text) or (background-clip: text)) { .vgs-steptrack__num { background: none; -webkit-text-fill-color: currentColor; } } @media (forced-colors: active) { .vgs-steptrack__num { background: none; -webkit-text-fill-color: CanvasText; forced-color-adjust: none; } } .vgs-steptrack__num { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 0.26em 0.6em; border-radius: 999px; } .vgs-steptrack__num::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; /* Denser than the card it sits on, so glass-on-glass reads as hierarchy rather than as a smudge. */ background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(15, 23, 42, 0.14); backdrop-filter: blur(10px) saturate(150%); -webkit-backdrop-filter: blur(10px) saturate(150%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 1px 2px rgba(15, 23, 42, 0.06); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .vgs-steptrack__num::before { background: rgba(255, 255, 255, 0.92); } } .vgs-ground-inverse .vgs-steptrack__num::before { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .vgs-ground-inverse .vgs-steptrack__num::before { background: rgba(255, 255, 255, 0.14); } } /* The pill is decoration; in forced colours it would just box the digits. */ @media (forced-colors: active) { .vgs-steptrack__num::before { display: none; } } /* Centre stage. JS writes --d (0 at the middle of the rail, 1 at the edges) and the card reads it for BOTH scale and opacity, so the two cannot disagree. Transform and opacity only: this updates on every scroll frame. */ .vgs-steptrack__card { --d: 0; /* --d is now how far the card runs PAST the viewport edge, not its distance from the middle, so a fully visible card is always at full strength and only the one sliding off gets touched. Scale barely moves: shrinking a card at the edge reads as a bug, the fade is what says "not yet". */ transform: scale(calc(1 - 0.03 * var(--d))); opacity: calc(1 - 0.45 * var(--d)); transition: transform .35s ease-out, opacity .35s ease-out; } /* Reduced motion gets every card at full size and opacity rather than a rail that reshapes under them. */ @media (prefers-reduced-motion: reduce) { .vgs-steptrack__card { transform: none; opacity: 1; transition: none; } } .vgs-steptrack__title { margin: 0.9rem 0 0; font-family: var(--font-body); font-variation-settings: "opsz" 32; font-weight: 500; font-size: clamp(1.5rem, 2.6vw, 2.06rem); line-height: 1.14; letter-spacing: -0.025em; color: var(--color-text-primary); text-wrap: balance; } .vgs-steptrack__body { margin: 0.7rem 0 0; font-size: 0.875rem; line-height: 1.55; color: var(--color-text-secondary); max-width: 30ch; } /* ---- Infinite loop mode ---- Added by JS only when GSAP + Draggable are present and motion is allowed. Everything above stays the native scroller, which is what a visitor without JS, without the plugin, or on reduced motion actually gets. */ .vgs-steptrack__viewport.is-loop { /* clip, not hidden: overflow-x:hidden on a box whose other axis is visible silently promotes that axis to auto, which would re-introduce a scroll container here. clip refuses to scroll on either count. */ overflow-x: clip; scroll-snap-type: none; /* The gutter moves off the rail and onto the viewport so the rail's content edge, where the loop recycles a card, lands on the clip edge. */ margin-inline-start: max(1.5rem, calc((100vw - 76rem) / 2)); } .vgs-steptrack__viewport.is-loop .vgs-steptrack__rail { padding-inline: 0; cursor: grab; /* The rail is dragged, so the browser must not claim the horizontal gesture for a pan it is no longer able to perform. */ touch-action: pan-y; } .vgs-steptrack__viewport.is-loop .vgs-steptrack__rail.is-dragging { cursor: grabbing; } .vgs-steptrack__viewport.is-loop .vgs-steptrack__card { scroll-snap-align: none; /* No transition in loop mode. GSAP rewrites transform on every frame and JS rewrites --d alongside it, so both are already frame-accurate; a .35s curve on top would try to ease each individual frame and the rail would rubber-band behind the pointer. The scale in the rule above is dead here regardless, because GSAP's inline transform outranks it: stage() reapplies it through GSAP so it composes with the loop's x instead of fighting it. */ transition: none; } .vgs-steptrack__nav { display: flex; gap: 0.75rem; margin-top: 2rem; } .vgs-steptrack__btn { width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; background: none; cursor: pointer; border: 1px solid var(--color-border-strong); color: var(--color-text-primary); transition: background-color .25s ease, border-color .25s ease, color .25s ease; } .vgs-steptrack__btn svg { width: 1.1rem; height: 1.1rem; } .vgs-steptrack__btn:hover, .vgs-steptrack__btn:focus-visible { background: var(--color-brand-accent); border-color: var(--color-brand-accent); color: #1A1A1A; } .vgs-steptrack__btn[disabled] { opacity: 0.35; cursor: default; } .vgs-steptrack__btn[disabled]:hover { background: none; border-color: var(--color-border-strong); color: var(--color-text-primary); } .vgs-ground-inverse .vgs-steptrack__card { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); } .vgs-ground-inverse .vgs-steptrack__num { color: var(--color-brand-accent); background: var(--gradient-primary); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .vgs-ground-inverse .vgs-steptrack__title { color: var(--color-text-inverse); } .vgs-ground-inverse .vgs-steptrack__body { color: var(--color-text-inverse-secondary); } .vgs-ground-inverse .vgs-steptrack__btn { border-color: rgba(255,255,255,0.28); color: #FFFFFF; } /* ---------- Capabilities card: size from the MARK's height ---------- * The ribbon 8 has a 120x186 viewBox, so an aspect ratio near 0.65. Sizing the * card by width and letting the SVG fill it meant a 330px card produced a * ~510px tall mark, which is what made this section tower over everything * around it. Drive the height instead and let the width follow. */ .vgs-caps__card { width: auto; padding: 1.75rem 2.25rem; } .vgs-eight { display: block; margin: 0 auto; width: auto; height: clamp(170px, 19vw, 230px); } .vgs-caps__stage { min-height: clamp(260px, 28vw, 340px); } /* ---------- Argument: sticky lede column ---------- * The left column holds the whole claim; the right column is the evidence for * it. Letting the claim scroll away means the reader loses the question while * they are still reading the answers. * * position:sticky, NOT a pinned ScrollTrigger. Sticky is handled by the browser * on the compositor, releases itself at the end of its own container with no * distance to compute, and cannot leave the dead scroll space a mis-measured * pin does. The section IS the container, so it stops of its own accord at the * next section without anything needing to name that section. */ /* 980px, matching the breakpoint where __split actually becomes two columns. Sticking a single-column lede to the top of its own stack does nothing but look broken. */ @media (min-width: 980px) { .vgs-argument__lede { position: sticky; /* Clears the fixed header, plus a little breathing room. */ top: calc(var(--vgs-header-h, 5rem) + 2.5rem); align-self: start; /* Now that the heading rides along, the column is taller. Cap it to the viewport so a long lede can still scroll past its own container rather than sticking forever. overflow stays visible: clipping would cut the link off the bottom. */ max-height: calc(100vh - var(--vgs-header-h, 5rem) - 3rem); } } /* ---------- Pullquote on dark ground ---------- * The quote, the name and the role all carried light-ground colours with no * inverse variant, so on an inverse band the quote rendered #1A1A1A on #0A0A0A: * 1.14:1, which is not "hard to read", it is invisible. The section had been * used only on light grounds until now, which is why it went unnoticed. */ .vgs-ground-inverse .vgs-pullquote__quote { color: var(--color-text-inverse); } .vgs-ground-inverse .vgs-pullquote__name { color: var(--color-text-inverse); } .vgs-ground-inverse .vgs-pullquote__role { color: var(--color-text-inverse-secondary); } .vgs-ground-inverse .vgs-pullquote__rule { background: rgba(255,255,255,0.28); } /* ---------- Button hover: never remove the label ---------- * Reported as "hover effects disappear". On the light grounds the secondary and * ghost buttons brighten their background on hover but inherited no hover * colour, so the label could end up light-on-light for the length of the * transition. Every hover state below states its own colour rather than * trusting what it inherits. */ @media (hover: hover) { .vgs-ground-page .vgs-btn--secondary:hover, .vgs-ground-page .vgs-btn--secondary:focus-visible, .vgs-ground-subtle .vgs-btn--secondary:hover, .vgs-ground-subtle .vgs-btn--secondary:focus-visible { background: rgba(255,255,255,0.92); border-color: rgba(15,23,42,0.42); color: var(--color-text-primary); } .vgs-ground-inverse .vgs-btn--secondary:hover, .vgs-ground-inverse .vgs-btn--secondary:focus-visible { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.66); color: var(--color-text-inverse); } } /* The heading now lives inside the sticky column, so its section-level top margin would push the whole column down away from its sticky offset. */ .vgs-argument__lede .vgs-eyebrow { margin-top: 0; } .vgs-argument__lede .vgs-display--section { margin-top: 0.9rem; } .vgs-argument__lede .vgs-argument__body { margin-top: 1.5rem; } /* ---------- Photo and text grid ---------- */ .vgs-photogrid__grid { margin-top: 3.25rem; display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); } @media (min-width: 760px) { .vgs-photogrid__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1080px) { .vgs-photogrid__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .vgs-photogrid__cell { border-radius: 16px; overflow: hidden; /* Every cell shares one height so the grid keeps its rhythm whether the cell holds four list items or a photograph. */ min-height: clamp(300px, 26vw, 380px); } .vgs-photogrid__cell--text { background: var(--color-bg-page); border: 1px solid var(--color-border-default); padding: 1.75rem 1.6rem; display: flex; flex-direction: column; } .vgs-photogrid__cell--photo { margin: 0; position: relative; background: var(--color-bg-subtle); } .vgs-photogrid__cell--photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } .vgs-photogrid__cell--photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.5rem 1.25rem 1.1rem; font-family: var(--font-display); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: #FFFFFF; /* The caption sits on a photograph, so it carries its own scrim rather than trusting whatever happens to be in the bottom of the frame. * * The stop at 62% is not decorative. Measured, the glyph band sits between * 32% and 59% up this box, and a straight 0.82-to-0 ramp is only 0.34 alpha * that high: over a light patch of photograph the white caption composited * to 2.30:1 and failed. Holding the scrim near full strength to just above * the text puts it at 12.6:1 over white and 16.4:1 over mid grey, so the * caption is legible over ANY frame, which is what this scrim is for. It * still fades out above the text rather than reading as a black bar. */ background: linear-gradient(to top, rgba(6,8,7,0.88) 0%, rgba(6,8,7,0.82) 62%, rgba(6,8,7,0) 100%); } .vgs-photogrid__title { font-family: var(--font-body); font-variation-settings: "opsz" 32; font-weight: 600; font-size: clamp(1.15rem, 1.9vw, 1.4rem); line-height: 1.15; letter-spacing: -0.025em; color: var(--color-text-primary); margin: 0; } .vgs-photogrid__sub { margin: 0.7rem 0 0; font-family: var(--font-display); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: #007A50; } .vgs-photogrid__list { list-style: none; margin: 1.25rem 0 0; padding: 0; } .vgs-photogrid__list li { padding: 0.7rem 0; border-top: 1px solid var(--color-border-default); font-size: 0.9375rem; line-height: 1.55; color: var(--color-text-secondary); } .vgs-ground-inverse .vgs-photogrid__cell--text { background: #101312; border-color: rgba(255,255,255,0.14); } .vgs-ground-inverse .vgs-photogrid__title { color: var(--color-text-inverse); } .vgs-ground-inverse .vgs-photogrid__sub { color: var(--color-brand-accent); } .vgs-ground-inverse .vgs-photogrid__list li { border-top-color: rgba(255,255,255,0.14); color: var(--color-text-inverse-secondary); } /* Inline video fills the figure exactly as the image would, so a section reads the same whether its slot holds a photograph or a clip. */ .vgs-media__video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 6px; } /* ================= Header: three links, a CTA, a hamburger ================= */ .vgs-header__inner { display: flex; align-items: center; gap: 2rem; } .vgs-header__brand { margin-right: auto; } .vgs-nav__list { display: flex; align-items: center; gap: 2.25rem; list-style: none; margin: 0; padding: 0; } /* base.css sets `li { margin-bottom: var(--space-xs) }` for prose lists, and it reaches this one too. align-items centres the MARGIN box, so that stray 8px under each item pushed the words 4px above the true centre while the logo, the CTA and the burger all sat at 40.2. Measured, not guessed. */ .vgs-nav__list li { margin-bottom: 0; } .vgs-nav__list a { font-size: 0.9375rem; font-weight: 500; color: var(--color-text-primary); text-decoration: none; transition: color .25s ease; } .vgs-nav__list a:hover, .vgs-nav__list a:focus-visible { color: #0B6B49; } .vgs-header__actions { display: flex; align-items: center; gap: 1rem; } /* The CTA is the only filled control in the bar, so it reads as the one thing to do. Mint with dark ink: mint on white is 1.7:1 and cannot carry a label. */ .vgs-header__cta { display: inline-flex; align-items: center; padding: 0.8rem 1.5rem; border-radius: 999px; background: var(--color-brand-accent); color: #1A1A1A; font-size: 0.875rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color .25s ease, transform .25s ease; } .vgs-header__cta:hover, .vgs-header__cta:focus-visible { background: #00C985; transform: translateY(-1px); color: #1A1A1A; } .vgs-burger { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; background: none; border: 0; cursor: pointer; padding: 0; color: var(--color-text-primary); } .vgs-burger__box { display: grid; gap: 6px; width: 22px; } .vgs-burger__box span { display: block; height: 2px; width: 100%; background: currentColor; border-radius: 2px; transition: transform .3s cubic-bezier(.2,.7,.3,1), opacity .2s ease; } /* Two bars, not three: they cross into an X with no third bar to hide. */ .vgs-burger[aria-expanded="true"] .vgs-burger__box span:first-child { transform: translateY(4px) rotate(45deg); } .vgs-burger[aria-expanded="true"] .vgs-burger__box span:last-child { transform: translateY(-4px) rotate(-45deg); } /* ---------- Mega panel ---------- */ .vgs-mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--color-bg-page); border-top: 1px solid var(--color-border-default); box-shadow: 0 24px 60px rgba(15,23,42,0.10); z-index: 60; overflow: hidden; } /* [hidden] is the closed state and it is honoured, so the panel is out of the accessibility tree and untabbable while shut. JS removes it to open. */ .vgs-mega[hidden] { display: none; } .vgs-mega__inner { display: grid; gap: 2.5rem; padding-block: 2.75rem 3rem; grid-template-columns: minmax(0, 1fr); } @media (min-width: 900px) { .vgs-mega__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) auto; align-items: start; } } .vgs-mega__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; } .vgs-mega__list a { font-family: var(--font-body); font-variation-settings: "opsz" 32; font-weight: 600; font-size: clamp(1.1rem, 1.8vw, 1.35rem); letter-spacing: -0.02em; color: var(--color-text-primary); text-decoration: none; transition: color .25s ease; } .vgs-mega__list a:hover, .vgs-mega__list a:focus-visible { color: #0B6B49; } .vgs-mega__card { display: flex; flex-direction: column; gap: 0.65rem; padding: 1.75rem; border-radius: 18px; background: var(--color-bg-inverse); color: var(--color-text-inverse); text-decoration: none; transition: background-color .3s ease; } .vgs-mega__card:hover, .vgs-mega__card:focus-visible { background: #16211D; } .vgs-mega__card-kicker { font-family: var(--font-display); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-brand-accent); } .vgs-mega__card-title { font-family: var(--font-body); font-variation-settings: "opsz" 32; font-weight: 600; font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.16; letter-spacing: -0.025em; } .vgs-mega__card-link { margin-top: auto; padding-top: 1rem; font-size: 0.875rem; font-weight: 600; color: var(--color-brand-accent); } .vgs-mega__contact { display: grid; gap: 0.5rem; align-content: start; } .vgs-mega__contact a { font-size: 0.9375rem; color: var(--color-text-secondary); text-decoration: none; } .vgs-mega__contact a:hover { color: var(--color-text-primary); } /* Below the breakpoint the three primary links fold into the panel, so the bar keeps only the brand, the CTA and the control. */ @media (max-width: 860px) { .vgs-nav { display: none; } .vgs-header__cta { padding: 0.7rem 1.1rem; font-size: 0.8125rem; } } /* ---------- Footer creed rail ---------- * Replaces the oversized outlined wordmark. Outlined type at 218px was a very * large piece of furniture saying only the name, which the lockup above already * says. The definition is the part worth the space. */ .vgs-footer__creed { margin-top: 3.5rem; overflow: hidden; padding-block: 1.25rem 0; border-top: 1px solid rgba(255, 255, 255, 0.12); } .vgs-footer__creed-track { display: flex; width: max-content; will-change: transform; } .vgs-footer__creed-unit { flex: none; white-space: nowrap; font-family: var(--font-body); font-variation-settings: "opsz" 32; font-weight: 600; font-size: clamp(2.25rem, 7vw, 5rem); line-height: 1.1; letter-spacing: -0.03em; /* Filled rather than outlined. A 1px stroke at this size reads as wireframe at any distance, and the counters fill in on smaller screens. The fill is held just above the footer ground so the rail still reads as texture and not as a second headline: white at 0.20 over the near black ground lands around #383838, roughly 1.8:1. That is deliberately low. The line's MEANING is carried by the accent phrase below, which is solid and clears the large text floor on its own. */ color: rgba(255, 255, 255, 0.20); -webkit-text-stroke: 0; } /* The one solid phrase. 4.05:1 against the footer ground, so it clears the large-text floor rather than relying on the stroke to carry it. */ .vgs-footer__creed-unit em { font-style: normal; color: var(--color-brand-accent); -webkit-text-stroke: 0; } /* The -webkit-text-stroke fallback is gone with the stroke it backed up. */ /* ================= Header ================= * No backdrop-filter anywhere. A translucent bar over a photograph needs blur * to stay legible, and that blur is what read as a smeared shadow. Solid ground * plus a real shadow is the cleaner answer and costs nothing to composite. * * Two states, matching the reference's own behaviour, which turns out to be * page-dependent rather than scroll-dependent: over a media hero its bar is * inset and rounded; on an ordinary page the bar has radius 0, no background * and no shadow, and simply sits on the page ground. * * .is-top only while at the very top of a page that HAS a media hero: * inset, rounded, floating over the artwork. * default flush, square, full width, hairline and shadow. This is the * scrolled state and the resting state of every inner page. */ .vgs-header { position: sticky; top: 0; z-index: 60; padding-block: 0; padding-inline: 0; background: var(--color-bg-page); /* The parent theme puts `backdrop-filter: saturate(140%) blur(10px)` on this element. The note below always said there should be no backdrop-filter here, but the child only ever overrode the parent's BACKGROUND, so the filter kept painting a full width blurred, over-saturated band across the top of every page, over the hero, outside the floating bar. Only the inner pill is glass; the outer strip is not. */ backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid rgba(15, 23, 42, 0.08); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.05); transition: padding .3s ease, background-color .3s ease, box-shadow .3s ease; } .vgs-header__inner.container { min-height: 76px; border-radius: 0; background: none; border: 0; transition: border-radius .3s ease, background-color .3s ease, box-shadow .3s ease; } /* Floating state: only at the top of a page that has artwork to float over. */ .vgs-header.is-top { background: none; border-bottom-color: transparent; box-shadow: none; padding-block: 0.9rem; padding-inline: clamp(0.75rem, 4.5vw, 3.6rem); } .vgs-header.is-top .vgs-header__inner.container { max-width: none; margin-inline: 0; padding-inline: 1.5rem; border-radius: 12px; /* reference value */ /* Glass, so the hero reads through the bar. Alpha is 0.62 rather than the 0.55 used on cards because this bar floats over near-black video: at 0.55 the composite is ~#919191 and the nav's dark text lands at ~4.6:1, one rounding error off failing AA. 0.62 composites to ~#A2A2A2 and holds ~7.3:1, and is still plainly translucent. The highlight is an INSET shadow, not a border: a real border would add 2px to the box and the bar would jump by that much every time the class toggles. */ background: rgba(255, 255, 255, 0.62); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); /* NO drop shadow. Read off the reference rather than guessed: its floating bar computes to box-shadow: none, background rgba(0,0,0,0.07), backdrop-filter blur(20px), radius 12px. The bar is defined by tint and blur alone. The 0 10px 30px it used to carry was a 30px-radius halo the reference has nothing like, and at this size a shadow that soft reads as a blurred smudge around the bar rather than as lift. * * One deliberate divergence: the reference tints DARK (7% black) and runs * WHITE nav text. Ours is dark type on a light tint, so it keeps the light * tint; at 0.62 the nav measures 6.8:1 over the dark hero, and adopting the * dark tint would mean recolouring the wordmark and every nav item. */ box-shadow: none; } /* Without backdrop-filter, 62% white over video is a smear, not glass. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .vgs-header.is-top .vgs-header__inner.container { background: rgba(255, 255, 255, 0.94); } } .vgs-heromedia { margin-top: calc(-1 * (76px + 1.8rem)); } .vgs-heromedia__inner { padding-top: calc(76px + 1.8rem); } /* The admin bar is 32px of extra html margin that the pull-up above does not know about, so for a logged-in user the hero slid down and left a white band of body background above it. Visitors never saw this; editors always did. WordPress switches the bar to 46px at 782px and below, so the offset does too. The sticky header gets the same treatment or it slides under the fixed bar. */ .admin-bar .vgs-heromedia { margin-top: calc(-1 * (76px + 1.8rem) - 32px); } .admin-bar .vgs-header { top: 32px; } @media screen and (max-width: 782px) { .admin-bar .vgs-heromedia { margin-top: calc(-1 * (64px + 1.8rem) - 46px); } .admin-bar .vgs-header { top: 46px; } } /* The same pull-up for an ordinary page's hero. Without it the floating bar has nothing beneath it and reads as a detached pill on the page ground. pad-2xl is --space-5xl (8rem); we re-add the bar's height on top of it so hero copy still clears the bar by the full 8rem it was designed for. */ .vgs-main > .vgs-section.vgs-pad-2xl:first-child { margin-top: calc(-1 * (76px + 1.8rem)); padding-top: calc(var(--space-5xl) + 76px + 1.8rem); } .vgs-mega { left: 0; right: 0; transform: none; width: auto; border-radius: 0; border-top: 1px solid var(--color-border-default); margin-top: 0; } .vgs-header.is-top .vgs-mega { left: 50%; transform: translateX(-50%); width: min(100% - 3rem, 76rem); border-radius: 0 0 12px 12px; border-top: 0; margin-top: -14px; } @media (max-width: 700px) { .vgs-header__inner.container { min-height: 64px; } .vgs-heromedia { margin-top: calc(-1 * (64px + 1.8rem)); } .vgs-heromedia__inner { padding-top: calc(64px + 1.8rem); } .vgs-main > .vgs-section.vgs-pad-2xl:first-child { margin-top: calc(-1 * (64px + 1.8rem)); padding-top: calc(var(--space-5xl) + 64px + 1.8rem); } } /* ================= Capability cards ================= * The reference card: radius 12, a tinted wash of its own page ground, a * visual anchored at the foot. Ours is the same move against white. */ .vgs-caps-grid__grid { margin-top: 3rem; display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); } @media (min-width: 640px) { .vgs-caps-grid__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1040px) { .vgs-caps-grid__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .vgs-caps-grid__card { display: flex; flex-direction: column; padding: 1.9rem 1.6rem 1.6rem; border-radius: 12px; text-decoration: none; color: inherit; /* The glass treatment already used by the secondary and ghost buttons, so the cards belong to the same surface language rather than inventing a second one. The inset highlight along the top edge is what reads as a lit edge; without it the panel is just a translucent rectangle. */ background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(15, 23, 42, 0.16); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8); /* Compositor properties only, so hovering a grid of eight never relayouts. */ transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease, background-color .35s ease; } /* Without backdrop-filter the panel is 55% white over whatever sits behind it, which on a photograph is a smear. Go near-opaque instead. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .vgs-caps-grid__card { background: rgba(255, 255, 255, 0.94); } } @media (hover: hover) { a.vgs-caps-grid__card:hover, a.vgs-caps-grid__card:focus-visible { transform: translateY(-5px); background: rgba(255, 255, 255, 0.78); box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 16px 38px rgba(15, 23, 42, 0.12); } } .vgs-caps-grid__num { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.16em; color: #007A50; } .vgs-caps-grid__title { margin: 0.9rem 0 0; font-family: var(--font-body); font-variation-settings: "opsz" 32; font-weight: 600; font-size: clamp(1.1rem, 1.7vw, 1.3rem); line-height: 1.16; letter-spacing: -0.025em; color: var(--color-text-primary); text-wrap: balance; } .vgs-caps-grid__body { margin: 0.7rem 0 0; font-size: 0.875rem; line-height: 1.58; color: var(--color-text-secondary); } /* auto margin pins the mark to the foot, so a four-line card and a seven-line card still align their visuals across the row. */ .vgs-caps-grid__note { margin-top: 2.25rem; max-width: 60ch; font-size: 0.9375rem; line-height: 1.65; color: var(--color-text-secondary); } .vgs-ground-inverse .vgs-caps-grid__card { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); } .vgs-ground-inverse .vgs-caps-grid__num { color: var(--color-brand-accent); } .vgs-ground-inverse .vgs-caps-grid__title { color: var(--color-text-inverse); } .vgs-ground-inverse .vgs-caps-grid__body { color: var(--color-text-inverse-secondary); } .vgs-ground-inverse .vgs-caps-grid__note { color: var(--color-text-inverse-secondary); } /* ================= Evidence: argument left, sourced stats right ================= */ .vgs-evidence__split { display: grid; gap: 3rem; grid-template-columns: minmax(0, 1fr); } @media (min-width: 980px) { .vgs-evidence__split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: 4rem; align-items: start; } } .vgs-evidence__lede { display: flex; flex-direction: column; } .vgs-evidence__body { margin-top: 1.4rem; max-width: 38ch; } .vgs-evidence__link { margin-top: 1.75rem; align-self: start; font-size: 0.9375rem; font-weight: 600; color: #007A50; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgba(0,122,80,0.35); transition: text-decoration-color .25s ease; } .vgs-evidence__link:hover { text-decoration-color: currentColor; } .vgs-evidence__cards { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); } @media (min-width: 620px) { .vgs-evidence__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .vgs-evidence__card { margin: 0; display: flex; flex-direction: column; padding: 1.6rem 1.5rem 1.4rem; border-radius: 14px; background: var(--color-bg-page); border: 1px solid var(--color-border-default); } .vgs-evidence__lead { font-size: 0.9375rem; line-height: 1.5; color: var(--color-text-secondary); } .vgs-evidence__lead strong { color: var(--color-text-primary); font-weight: 600; } .vgs-evidence__chart { margin: 1.5rem 0 0; color: #007A50; } .vgs-evidence__chart svg { display: block; width: 100%; height: 92px; } .vgs-evidence__ticks { display: flex; justify-content: space-between; margin-top: 0.45rem; font-family: var(--font-display); font-size: 0.625rem; letter-spacing: 0.12em; color: var(--color-text-secondary); } /* The figure is the loud element; auto margin pins it to the foot so two cards with different amounts of caption still align their numbers. */ .vgs-evidence__figure { margin: auto 0 0; padding-top: 1.25rem; font-family: var(--font-body); font-variation-settings: "opsz" 32; font-weight: 600; font-size: clamp(2.5rem, 5vw, 3.75rem); line-height: 1; letter-spacing: -0.04em; color: var(--color-text-primary); } .vgs-evidence__note { margin: 0.75rem 0 0; font-size: 0.75rem; line-height: 1.5; color: var(--color-text-secondary); } /* Attribution is never smaller than 11px and never lighter than the body secondary. A source line nobody can read is not a source line. */ .vgs-evidence__source { margin: 0.6rem 0 0; padding-top: 0.6rem; border-top: 1px solid var(--color-border-default); font-size: 0.6875rem; line-height: 1.45; color: var(--color-text-secondary); } .vgs-ground-inverse .vgs-evidence__card { background: #101312; border-color: rgba(255,255,255,0.14); } .vgs-ground-inverse .vgs-evidence__figure { color: var(--color-text-inverse); } .vgs-ground-inverse .vgs-evidence__lead strong { color: var(--color-text-inverse); } .vgs-ground-inverse .vgs-evidence__lead, .vgs-ground-inverse .vgs-evidence__note, .vgs-ground-inverse .vgs-evidence__source, .vgs-ground-inverse .vgs-evidence__ticks { color: var(--color-text-inverse-secondary); } .vgs-ground-inverse .vgs-evidence__source { border-top-color: rgba(255,255,255,0.14); } .vgs-ground-inverse .vgs-evidence__chart { color: var(--color-brand-accent); } /* ================= Art cards ================= */ .vgs-artcards__grid { margin-top: 3rem; display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); } @media (min-width: 760px) { .vgs-artcards__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .vgs-artcards__card { display: flex; flex-direction: column; padding: 2rem 1.75rem 1.75rem; border-radius: 14px; background: var(--color-bg-page); border: 1px solid var(--color-border-default); text-decoration: none; color: inherit; transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease; } @media (hover: hover) { a.vgs-artcards__card:hover, a.vgs-artcards__card:focus-visible { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(15, 23, 42, 0.10); } } .vgs-artcards__title { margin: 0; font-family: var(--font-body); font-variation-settings: "opsz" 32; font-weight: 600; font-size: clamp(1.15rem, 1.9vw, 1.4rem); line-height: 1.16; letter-spacing: -0.025em; color: var(--color-text-primary); } .vgs-artcards__body { margin: 0.85rem 0 0; font-size: 0.9375rem; line-height: 1.6; color: var(--color-text-secondary); } /* The diagram sits between the copy and the link, pinned down by auto margin so three cards of unequal copy still align their diagrams and their links. */ .vgs-artcards__art { margin: auto 0 0; padding: 2rem 0 1.5rem; } .vgs-artcards__art svg { display: block; width: 100%; height: auto; max-height: 96px; } .vgs-artcards__link { font-size: 0.875rem; font-weight: 600; color: #007A50; } .vgs-ground-inverse .vgs-artcards__card { background: #101312; border-color: rgba(255,255,255,0.14); } .vgs-ground-inverse .vgs-artcards__title { color: var(--color-text-inverse); } .vgs-ground-inverse .vgs-artcards__body { color: var(--color-text-inverse-secondary); } .vgs-ground-inverse .vgs-artcards__link { color: var(--color-brand-accent); } /* ---------- Step diagrams ---------- */ .vgs-steptrack__viz { /* auto margin pins the diagram to the foot, so cards with three lines of copy and cards with six still align their visuals across the rail. */ margin: auto auto 0; padding-top: 1.75rem; width: 100%; max-width: 168px; color: #007A50; } .vgs-ground-inverse .vgs-steptrack__viz { color: var(--color-brand-accent); } .vgs-viz { display: block; width: 100%; height: auto; overflow: visible; } /* ================= Intake form ================= */ .vgs-intake__form { margin-top: 2.5rem; max-width: 46rem; } .vgs-intake__grid { display: grid; gap: 1.25rem; grid-template-columns: minmax(0,1fr); } @media (min-width: 680px) { .vgs-intake__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } } .vgs-intake__field { display: flex; flex-direction: column; gap: 0.4rem; margin: 0; } .vgs-intake__field--wide { margin-top: 1.75rem; } .vgs-intake__field label, .vgs-intake__set legend { font-size: 0.875rem; font-weight: 600; color: var(--color-text-primary); } /* The asterisk is decorative; `required` on the control is what actually conveys the requirement to assistive tech. */ .vgs-intake__req { color: #B4342B; } .vgs-intake__hint { font-size: 0.8125rem; color: var(--color-text-secondary); } .vgs-intake__field input, .vgs-intake__field textarea { width: 100%; padding: 0.8rem 0.9rem; border: 1px solid var(--color-border-strong); border-radius: 10px; background: var(--color-bg-page); color: var(--color-text-primary); font: inherit; font-size: 0.9375rem; transition: border-color .2s ease, box-shadow .2s ease; } .vgs-intake__field input:focus-visible, .vgs-intake__field textarea:focus-visible { outline: none; border-color: #007A50; box-shadow: 0 0 0 3px rgba(0,122,80,0.18); } .vgs-intake__set { border: 0; padding: 0; margin: 2rem 0 0; } .vgs-intake__opts { display: grid; gap: 0.6rem; margin-top: 0.9rem; } @media (min-width: 680px) { .vgs-intake__opts { grid-template-columns: repeat(2, minmax(0,1fr)); } } .vgs-intake__opt { display: flex; align-items: center; gap: 0.6rem; } .vgs-intake__opt label { font-weight: 400; font-size: 0.9375rem; color: var(--color-text-secondary); } .vgs-intake__opt input { accent-color: #007A50; width: 1.05rem; height: 1.05rem; } .vgs-intake__consent { display: flex; align-items: flex-start; gap: 0.7rem; margin-top: 1.75rem; font-size: 0.875rem; line-height: 1.55; color: var(--color-text-secondary); } .vgs-intake__consent input { accent-color: #007A50; margin-top: 0.15rem; width: 1.05rem; height: 1.05rem; flex: none; } .vgs-intake__consent a { color: #007A50; } .vgs-intake__submit { margin-top: 2rem; } .vgs-intake__ok { margin-top: 1.75rem; padding: 1rem 1.15rem; border-radius: 10px; background: rgba(0,122,80,0.10); border: 1px solid rgba(0,122,80,0.30); color: var(--color-text-primary); font-size: 0.9375rem; } /* Hidden from sight AND from assistive tech, and never focusable. */ .vgs-intake__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ================= Routed intake: pathpicker + formpanel ================= * Step 1 offers four routes; step 2 shows the chosen one and the form. * Proportions and colours follow the supplied design: light rows on white, * a dark pill per row, and a black sensitivity note with a mint edge. */ /* No visually-hidden utility existed in either theme. The route buttons all read "Choose ..." and need the route name appended for anyone listening to a list of links out of context. clip-path over the old clip: rect() so the text is not read out as a single run-together word by some engines. */ .vgs-u-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .vgs-pathpicker__intro-copy { max-width: 46ch; margin: 1.4rem 0 0; font-size: 1.0625rem; color: var(--color-text-inverse-secondary); } .vgs-pathpicker__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; } .vgs-pathpicker__row { display: flex; align-items: center; gap: 1.5rem; padding: 1.6rem 1.8rem; background: #F4F5F4; border-radius: 10px; margin: 0; } .vgs-pathpicker__body { flex: 1 1 auto; min-width: 0; } .vgs-pathpicker__title { margin: 0; font-family: var(--font-body); font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.01em; color: #1A1A1A; display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; } .vgs-pathpicker__badge { display: inline-block; padding: 0.28rem 0.6rem; border-radius: 4px; background: #0A0A0A; color: var(--color-brand-accent); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .vgs-pathpicker__desc { margin: 0.5rem 0 0; font-size: 0.9375rem; line-height: 1.6; color: #4A4A4A; } .vgs-pathpicker__cta { flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0.8rem 1.15rem; border-radius: 6px; background: #1F2421; color: #FFFFFF; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em; text-decoration: none; transition: background-color .2s ease, transform .2s ease; } .vgs-pathpicker__cta:hover, .vgs-pathpicker__cta:focus-visible { background: #0A0A0A; transform: translateY(-1px); } @media (max-width: 700px) { .vgs-pathpicker__row { flex-direction: column; align-items: flex-start; } .vgs-pathpicker__cta { width: 100%; } } /* ---------- Step 2 ---------- */ .vgs-formpanel__chip-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.8rem; } .vgs-formpanel__chip { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.5rem 0.9rem; border-radius: 999px; background: #0A0A0A; color: #FFFFFF; font-size: 0.8125rem; font-weight: 500; } .vgs-formpanel__chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-brand-accent); } .vgs-formpanel__change { font-size: 0.8125rem; color: #1A1A1A; text-underline-offset: 3px; } .vgs-formpanel__lede { max-width: 68ch; margin-top: 1.1rem; color: var(--color-text-secondary); } .vgs-formpanel__lede p { margin: 0 0 0.8rem; font-size: 0.9375rem; line-height: 1.65; } .vgs-formpanel__note { margin: 1.8rem 0 2.4rem; padding: 1.1rem 1.3rem; background: #0A0A0A; border-left: 3px solid var(--color-brand-accent); border-radius: 4px; } .vgs-formpanel__note-title { margin: 0; color: #FFFFFF; font-size: 0.875rem; font-weight: 600; } .vgs-formpanel__note-body { margin: 0.4rem 0 0; color: rgba(255,255,255,0.72); font-size: 0.8125rem; line-height: 1.6; } /* ---------- Fluent Forms, restyled to the site ---------- * Scoped to .vgs-formpanel so the plugin's own styling is untouched anywhere * else it might be used. */ .vgs-formpanel .fluentform .ff-el-group { margin-bottom: 1.25rem; } .vgs-formpanel .fluentform .ff-el-input--label label { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 500; color: #1A1A1A; margin-bottom: 0.4rem; } .vgs-formpanel .fluentform .ff-el-input--content input[type="text"], .vgs-formpanel .fluentform .ff-el-input--content input[type="email"], .vgs-formpanel .fluentform .ff-el-input--content input[type="tel"], .vgs-formpanel .fluentform .ff-el-input--content input[type="url"], .vgs-formpanel .fluentform .ff-el-input--content select, .vgs-formpanel .fluentform .ff-el-input--content textarea { width: 100%; padding: 0.72rem 0.85rem; border: 1px solid rgba(15, 23, 42, 0.22); border-radius: 6px; background: #FFFFFF; font-family: var(--font-body); font-size: 0.9375rem; color: #1A1A1A; transition: border-color .2s ease, box-shadow .2s ease; } .vgs-formpanel .fluentform .ff-el-input--content input:focus, .vgs-formpanel .fluentform .ff-el-input--content select:focus, .vgs-formpanel .fluentform .ff-el-input--content textarea:focus { outline: none; border-color: #007A50; /* A ring rather than a colour swap alone: colour on its own is not a sufficient focus indicator. */ box-shadow: 0 0 0 3px rgba(0, 122, 80, 0.18); } .vgs-formpanel .fluentform .ff-el-form-hide_label .ff-el-input--label { display: none; } /* Section breaks carry the per-route heading. */ .vgs-formpanel .fluentform .ff-el-section-break { margin: 2.2rem 0 1rem; padding-top: 1.4rem; border-top: 1px solid rgba(15, 23, 42, 0.1); } .vgs-formpanel .fluentform .ff-el-section-break .ff-el-section-title { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #4A4A4A; margin: 0; } .vgs-ff-consent { font-size: 0.8125rem; line-height: 1.6; color: #4A4A4A; margin: 1.4rem 0 0; } .vgs-ff-consent a { color: #007A50; text-underline-offset: 3px; } .vgs-formpanel .fluentform .ff-btn-submit { margin-top: 1.4rem; padding: 0.95rem 1.5rem; border: 0; border-radius: 999px; background: var(--color-brand-accent); color: #0A0A0A; font-family: var(--font-body); font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: transform .2s ease, filter .2s ease; } .vgs-formpanel .fluentform .ff-btn-submit:hover, .vgs-formpanel .fluentform .ff-btn-submit:focus-visible { transform: translateY(-1px); filter: brightness(0.96); } /* ---------- SC 2.5.8 target size, remaining controls ---------- * Same 24px floor for the other standalone controls that measured under it. * width: fit-content keeps the hit area on the words rather than stretching it * across the column, which would make neighbouring targets ambiguous. * The Privacy Policy link in the consent sentence is deliberately NOT included: * it is inline in a block of text and is exempt. */ .vgs-nav__list a, .vgs-mega__list a, .vgs-footer__contact a, .vgs-formpanel__change { display: inline-flex; align-items: center; min-height: 24px; width: fit-content; } /* ---------- Cohort labels under the ownership chart ---------- * A grid of equal columns rather than space-between, so each label sits under * its own bar. space-between is right for the two end-ticks on the left card * and wrong here, where there is one label per bar. */ .vgs-evidence__cohorts { display: grid; /* auto-flow, so the row adapts to however many cohorts a card carries. The first build hardcoded three and a card with two would have left an empty column with the labels off their bars. */ grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); /* Percentage, not pixels. The chart is drawn in a 260-unit viewBox with a 12-unit gap and preserveAspectRatio="none", so its gap STRETCHES with the card while a pixel gap here would not, and the labels would walk off their bars as the card grows. 12/260 = 4.615%, which tracks the bars exactly. */ gap: 4.615%; margin-top: 0.5rem; } .vgs-evidence__cohorts span { display: flex; flex-direction: column; gap: 0.1rem; font-family: var(--font-display); font-size: 0.625rem; letter-spacing: 0.1em; color: var(--color-text-secondary); text-align: center; } .vgs-evidence__cohorts b { font-family: var(--font-body); font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; color: #007A50; } .vgs-ground-inverse .vgs-evidence__cohorts { color: var(--color-text-inverse-secondary); } .vgs-ground-inverse .vgs-evidence__cohorts b { color: var(--color-brand-accent); } /* ================= Accordion ================= */ .vgs-accordion__split { display: grid; gap: 3rem; grid-template-columns: minmax(0, 1fr); } @media (min-width: 960px) { .vgs-accordion__split { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(3rem, 6vw, 6rem); align-items: end; } /* The lede sits at the FOOT of its column, so the headline opposite it can start at the top and the two columns are not two stacks of the same shape. */ .vgs-accordion__lede { padding-bottom: 0.5rem; } } .vgs-accordion__body-copy { max-width: 46ch; margin-top: 1.4rem; } .vgs-accordion__body-copy p { font-size: 0.9375rem; line-height: 1.7; } .vgs-accordion__link { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 24px; width: fit-content; margin-top: 1.6rem; font-size: 0.875rem; font-weight: 600; color: #0B6B49; text-underline-offset: 4px; } .vgs-ground-inverse .vgs-accordion__link { color: var(--color-brand-accent); } .vgs-accordion__list { margin-top: 2.5rem; border-top: 1px solid rgba(15, 23, 42, 0.12); } .vgs-ground-inverse .vgs-accordion__list { border-top-color: rgba(255, 255, 255, 0.16); } .vgs-accordion__item { border-bottom: 1px solid rgba(15, 23, 42, 0.12); } .vgs-ground-inverse .vgs-accordion__item { border-bottom-color: rgba(255, 255, 255, 0.16); } .vgs-accordion__summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.35rem 0; cursor: pointer; list-style: none; /* Firefox */ min-height: 24px; } .vgs-accordion__summary::-webkit-details-marker { display: none; } /* Safari/Chrome */ .vgs-accordion__summary:focus-visible { outline: 2px solid #007A50; outline-offset: 4px; } .vgs-ground-inverse .vgs-accordion__summary:focus-visible { outline-color: var(--color-brand-accent); } .vgs-accordion__title { font-family: var(--font-body); font-variation-settings: "opsz" 32; font-size: clamp(1.0625rem, 1.6vw, 1.25rem); font-weight: 600; letter-spacing: -0.01em; color: var(--color-text-primary); } .vgs-ground-inverse .vgs-accordion__title { color: var(--color-text-inverse); } /* A drawn plus, rotated to a cross when the panel opens. Two spans would be one more element per row for a mark that carries no meaning; pseudo elements keep the row to what it actually contains. */ .vgs-accordion__mark { position: relative; flex: none; width: 18px; height: 18px; transition: transform .3s ease; } .vgs-accordion__mark::before, .vgs-accordion__mark::after { content: ''; position: absolute; left: 50%; top: 50%; background: currentColor; transform: translate(-50%, -50%); } .vgs-accordion__mark::before { width: 100%; height: 1.5px; } .vgs-accordion__mark::after { width: 1.5px; height: 100%; } .vgs-accordion__item[open] .vgs-accordion__mark { transform: rotate(45deg); } .vgs-accordion__panel { padding: 0 0 1.5rem; max-width: 58ch; } .vgs-accordion__panel p { margin: 0; font-size: 0.9375rem; line-height: 1.7; color: var(--color-text-secondary); } .vgs-ground-inverse .vgs-accordion__panel p { color: var(--color-text-inverse-secondary); } /* Native
cannot transition its own height, so the panel fades and lifts in on open rather than pretending to slide. */ @media (prefers-reduced-motion: no-preference) { .vgs-accordion__item[open] .vgs-accordion__panel { animation: vgs-acc-in .32s ease-out both; } } @keyframes vgs-acc-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } /* ================= prosepanel: prose over a photograph ================= */ .vgs-prosepanel { position: relative; overflow: hidden; } .vgs-prosepanel__bg { position: absolute; inset: 0; z-index: 0; } .vgs-prosepanel__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* The scrim, and the reason the copy on this section is measurable at all. 0.90 over the near-black ground composites to about #1D1F1E whatever the photograph does underneath, so the body copy holds its ratio on every frame rather than on the lucky ones. */ .vgs-prosepanel--photo .vgs-prosepanel__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,10,9,0.86) 0%, rgba(8,10,9,0.92) 100%); } .vgs-prosepanel > .container { position: relative; z-index: 1; } .vgs-prosepanel__inner { max-width: 62ch; } .vgs-prosepanel__body { margin-top: 1.6rem; } .vgs-prosepanel--photo .vgs-prosepanel__inner .vgs-display, .vgs-prosepanel--photo .vgs-prosepanel__inner .vgs-eyebrow { color: var(--color-text-inverse); } .vgs-prosepanel--photo .vgs-prosepanel__body, .vgs-prosepanel--photo .vgs-prosepanel__body p { color: rgba(255,255,255,0.82); } /* ================= columns: offset composition ================= */ .vgs-columns-section--offset .vgs-columns__field { position: relative; margin-top: 2.5rem; } .vgs-columns-section--offset .vgs-columns__media { margin: 0; border-radius: 14px; overflow: hidden; } .vgs-columns-section--offset .vgs-columns__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Stacked on small screens: the photographs lead, then the two lists. The staggered composition only exists where there is width to stagger into. */ .vgs-columns-section--offset .vgs-columns__field { display: grid; gap: 1.5rem; } .vgs-columns-section--offset .vgs-columns__media--a { aspect-ratio: 4 / 3; } .vgs-columns-section--offset .vgs-columns__media--b { aspect-ratio: 4 / 3; } @media (min-width: 1040px) { .vgs-columns-section--offset .vgs-columns__field { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr) minmax(0, 0.7fr); grid-template-rows: auto auto; gap: clamp(1.5rem, 3vw, 3rem); align-items: start; } /* Large plate low on the left, lists in the middle, small plate high on the right. The two photographs never share a row, which is what makes it read as offset rather than as a three-up. */ .vgs-columns-section--offset .vgs-columns__media--a { grid-column: 1; grid-row: 2; aspect-ratio: 4 / 5; margin-top: -6rem; } .vgs-columns-section--offset .vgs-columns { grid-column: 2; grid-row: 1 / span 2; } .vgs-columns-section--offset .vgs-columns__media--b { grid-column: 3; grid-row: 1; aspect-ratio: 1 / 1; } } /* ---------- Argument rows numbered instead of drawn ---------- */ .vgs-argument__figure--num { display: flex; align-items: flex-start; justify-content: center; } .vgs-argument__figure--num span { font-family: var(--font-body); font-variation-settings: "opsz" 32; font-size: clamp(1.75rem, 3.4vw, 2.75rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: #007A50; } .vgs-ground-inverse .vgs-argument__figure--num span { color: var(--color-brand-accent); } /* ================= Collage ================= */ .vgs-collage__head { max-width: 60ch; } .vgs-collage__body { margin-top: 1.2rem; } .vgs-collage__wall { margin-top: 3rem; display: grid; gap: 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } .vgs-collage__plate { margin: 0; overflow: hidden; border-radius: 12px; background: var(--color-bg-subtle); } .vgs-collage__plate img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } .vgs-collage__plate--1 { aspect-ratio: 3 / 4; } .vgs-collage__plate--2 { aspect-ratio: 3 / 4; } .vgs-collage__plate--3 { aspect-ratio: 4 / 3; } .vgs-collage__plate--4 { aspect-ratio: 4 / 3; } @media (min-width: 900px) { /* Four plates, four different sizes, three different baselines. The offsets are what stop this reading as a gallery row. */ .vgs-collage__wall { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); align-items: start; } .vgs-collage__plate--1 { grid-column: 1 / span 3; aspect-ratio: 3 / 4; margin-top: 4.5rem; } .vgs-collage__plate--2 { grid-column: 4 / span 5; aspect-ratio: 4 / 3; margin-top: 0; } .vgs-collage__plate--3 { grid-column: 9 / span 4; aspect-ratio: 4 / 3; margin-top: 2rem; } .vgs-collage__plate--4 { grid-column: 9 / span 4; aspect-ratio: 16 / 10; margin-top: 0; } } /* ---------- Comparison: the final column as a raised dark panel ---------- * Only under --feature, so the filter table on /platform/ keeps the quiet * even-weight treatment it was designed with. * * The panel is painted on the CELLS rather than on a column element, because a * table has no column box to style; each cell carries the ground and only the * first and last round their corners, which is what makes the run read as one * slab instead of eight stacked chips. */ .vgs-comparison--feature .vgs-comparison__table { border-collapse: separate; border-spacing: 0; } .vgs-comparison--feature .vgs-comparison__table thead th.is-ours, .vgs-comparison--feature .vgs-comparison__table tbody .is-ours { background: #0A0A0A; color: var(--color-text-inverse); } .vgs-comparison--feature .vgs-comparison__table thead th.is-ours { color: var(--color-brand-accent); border-radius: 14px 14px 0 0; padding-top: 1.6rem; } .vgs-comparison--feature .vgs-comparison__table tbody tr:last-child .is-ours { border-radius: 0 0 14px 14px; padding-bottom: 1.8rem; } .vgs-comparison--feature .vgs-comparison__table tbody tr:first-child .is-ours { border-radius: 0; } /* The hairline between rows has to change sides inside the panel: a dark rule is invisible on #0A0A0A, so it inverts there and stays dark outside it. */ .vgs-comparison--feature .vgs-comparison__table tbody tr + tr .is-ours { border-top: 1px solid rgba(255, 255, 255, 0.10); } .vgs-comparison--feature .vgs-comparison__table tbody th { color: var(--color-text-primary); } .vgs-comparison--feature .vgs-comparison__table thead th { font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; } /* ================= Trades: the false bargain ================= */ .vgs-trades__grid { display: grid; gap: 3rem; grid-template-columns: minmax(0, 1fr); } @media (min-width: 1040px) { .vgs-trades__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: start; } } .vgs-trades__media { margin: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 5; background: rgba(255,255,255,0.04); } .vgs-trades__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } .vgs-trades__list { margin: 3rem 0 0; border-top: 1px solid rgba(255,255,255,0.14); } .vgs-trades__row { display: grid; align-items: baseline; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 1rem; padding: 1.35rem 0; border-bottom: 1px solid rgba(255,255,255,0.14); } .vgs-trades__give, .vgs-trades__get { margin: 0; font-family: var(--font-body); font-variation-settings: "opsz" 32; font-size: clamp(1.125rem, 2vw, 1.5rem); letter-spacing: -0.02em; } .vgs-trades__give { font-weight: 600; color: var(--color-text-inverse); } .vgs-trades__get { font-weight: 400; color: var(--color-text-inverse-secondary); } /* The joiner is the quiet part of the sentence on purpose: it is the word that makes the trade sound reasonable, so it should not carry weight. */ .vgs-trades__for { font-size: 0.625rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-brand-accent); } .vgs-trades__resolve { margin-top: 3rem; display: grid; gap: 2rem; } @media (min-width: 760px) { .vgs-trades__resolve { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 3rem; } } .vgs-trades__lead { margin: 0; font-family: var(--font-accent); font-size: clamp(1.375rem, 2.6vw, 1.875rem); line-height: 1.2; color: var(--color-brand-accent); } .vgs-trades__body p { font-size: 0.9375rem; line-height: 1.72; color: var(--color-text-inverse-secondary); } .vgs-trades__body p + p { margin-top: 1rem; } /* light-ground fallback, so the type never inherits inverse colours by accident */ .vgs-ground-page .vgs-trades__list, .vgs-ground-subtle .vgs-trades__list { border-top-color: rgba(15,23,42,0.12); } .vgs-ground-page .vgs-trades__row, .vgs-ground-subtle .vgs-trades__row { border-bottom-color: rgba(15,23,42,0.12); } .vgs-ground-page .vgs-trades__give, .vgs-ground-subtle .vgs-trades__give { color: var(--color-text-primary); } .vgs-ground-page .vgs-trades__get, .vgs-ground-subtle .vgs-trades__get, .vgs-ground-page .vgs-trades__body p, .vgs-ground-subtle .vgs-trades__body p { color: var(--color-text-secondary); } .vgs-ground-page .vgs-trades__lead, .vgs-ground-subtle .vgs-trades__lead { color: #0B6B49; } /* ================= Watermark word ================= */ .vgs-section { position: relative; } .vgs-watermark { /* Anchored LEFT. On the right it sat behind the photograph, where the image covered most of it and only a stray tail of letterforms showed past the edge, which read as a rendering artefact rather than as a mark. On the left it runs under the copy column, where nothing occludes it and the whole word is legible as texture. */ position: absolute; left: 0; right: auto; bottom: 6%; z-index: 0; pointer-events: none; user-select: none; font-family: var(--font-body); font-variation-settings: "opsz" 32; font-weight: 600; letter-spacing: -0.04em; line-height: 0.78; font-size: clamp(7rem, 22vw, 20rem); /* FILLED, not outlined. * * The stroke version was the problem: at this size the letters overlap, and * -webkit-text-stroke does not reliably let a later glyph's fill occlude an * earlier glyph's stroke, so the outlines cross through each other and read * as a wireframe tangle rather than as a word. A solid fill has no such * failure mode. * * The tone is carried in the colour's own alpha rather than by opacity on * the element, so there is one number to reason about and no extra * compositing layer behind live copy. */ color: rgba(15, 23, 42, 0.05); -webkit-text-stroke: 0; white-space: nowrap; } .vgs-ground-subtle .vgs-watermark { color: rgba(15, 23, 42, 0.05); } .vgs-ground-inverse .vgs-watermark { color: rgba(255, 255, 255, 0.05); } @media (max-width: 760px) { .vgs-watermark { display: none; } } /* ================= Statement: pull quote + two drifting plates ================= */ .vgs-statement > .container { position: relative; z-index: 1; } .vgs-statement__grid { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); align-items: center; } @media (min-width: 1000px) { .vgs-statement__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(2.5rem, 5vw, 5rem); } /* Copy leads, plates follow. The DOM keeps the media first so the parallax pair is read as one unit; the columns are swapped here rather than in the markup so reading order is untouched. */ .vgs-statement__copy { grid-column: 1; grid-row: 1; } .vgs-statement__media { grid-column: 2; grid-row: 1; } } .vgs-statement__media { position: relative; min-height: 22rem; } @media (min-width: 1000px) { .vgs-statement__media { min-height: 34rem; } } .vgs-statement__plate { margin: 0; overflow: hidden; background: var(--color-bg-subtle); } .vgs-statement__plate img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* The arch is the larger plate and sits back; the rectangle overlaps its lower right corner and is the nearer of the two, which is why it drifts faster. */ /* One plate, carrying the section on its own, so it takes the full column. */ .vgs-statement__plate--a { width: 100%; aspect-ratio: 3 / 4; border-radius: 999px 999px 12px 12px; } .vgs-statement__quote { margin: 1.4rem 0 0; font-family: var(--font-body); font-variation-settings: "opsz" 32; font-size: clamp(1.5rem, 3vw, 2.375rem); font-weight: 500; line-height: 1.24; letter-spacing: -0.025em; color: var(--color-text-primary); text-wrap: pretty; } .vgs-ground-inverse .vgs-statement__quote { color: var(--color-text-inverse); } /* The follow line is the quiet half of the pull quote, so it takes the rule rather than the weight. */ .vgs-statement__follow { margin: 2rem 0 0; padding-left: 1.1rem; border-left: 2px solid var(--color-brand-primary); font-size: 1rem; line-height: 1.7; color: var(--color-text-secondary); max-width: 52ch; } .vgs-ground-inverse .vgs-statement__follow { border-left-color: var(--color-brand-accent); color: var(--color-text-inverse-secondary); } /* The icon takes the diagram's slot, so it is drawn at diagram scale and in the same mint, not at the small muted size it had when it sat above the number. */ .vgs-steptrack__viz--icon { max-width: 96px; } .vgs-steptrack__viz--icon .vgs-icon { width: 100%; height: auto; stroke-width: 1.1; } .vgs-ground-inverse .vgs-steptrack__viz { color: var(--color-brand-accent); } /* ---------- Icons ---------- * Monoline and quiet. These sit BESIDE content, they are not the content, so * they are small and carry a muted tone rather than the brand accent: a mint * glyph at card size competes with the number and the title next to it, and the * number is the thing that should win. */ .vgs-icon { width: 100%; height: 100%; display: block; } /* Stacked and centred, not pushed to opposite corners. * * width:auto matters here: at 100% the flex line spanned the card and * space-between threw the icon and the number to the edges, which is what put * them off the card's centre line while the title and body below were centred. */ .vgs-steptrack__head { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; width: auto; } .vgs-steptrack__icon { /* Scales on the same curve as the number above it. A fixed 18px looked fine on a narrow card and shrank away against a 44px numeral at desktop, since only one of the two was growing. Held at roughly 60% of the number so it stays the quieter mark rather than competing with it. */ display: inline-flex; width: clamp(1.15rem, 2.05vw, 1.65rem); height: clamp(1.15rem, 2.05vw, 1.65rem); color: rgba(15, 23, 42, 0.48); } .vgs-ground-inverse .vgs-steptrack__icon { color: rgba(255, 255, 255, 0.42); } /* ---------- The arrow on a primary action ---------- */ .vgs-btn { display: inline-flex; align-items: center; gap: 0.55rem; } .vgs-btn__icon { display: inline-flex; flex: none; width: 15px; height: 15px; /* Nudged to sit on the cap line rather than the baseline of the label. */ margin-top: -1px; transition: transform .25s ease; } /* The arrow leans out on hover, which is the direction it already points. */ .vgs-btn:hover .vgs-btn__icon, .vgs-btn:focus-visible .vgs-btn__icon { transform: translate(2px, -2px); } @media (prefers-reduced-motion: reduce) { .vgs-btn__icon { transition: none; } .vgs-btn:hover .vgs-btn__icon, .vgs-btn:focus-visible .vgs-btn__icon { transform: none; } } /* ================= Quadrants: four cards, even field ================= */ .vgs-quadrants__grid { margin-top: 3.5rem; display: grid; gap: clamp(1rem, 1.8vw, 1.5rem); grid-template-columns: minmax(0, 1fr); } @media (min-width: 760px) { .vgs-quadrants__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .vgs-quadrants__card { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: clamp(1.75rem, 3vw, 2.75rem); min-height: clamp(15rem, 22vw, 19rem); border-radius: 16px; background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(15, 23, 42, 0.14); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8); transition: transform .3s ease, box-shadow .3s ease; } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .vgs-quadrants__card { background: rgba(255, 255, 255, 0.94); } } .vgs-ground-inverse .vgs-quadrants__card { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10); } .vgs-quadrants__card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(15, 23, 42, 0.10); } @media (prefers-reduced-motion: reduce) { .vgs-quadrants__card { transition: none; } .vgs-quadrants__card:hover { transform: none; } } /* The number leads and the icon answers it, on one baseline. */ .vgs-quadrants__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1.25rem; border-bottom: 1px solid rgba(15, 23, 42, 0.10); } .vgs-ground-inverse .vgs-quadrants__top { border-bottom-color: rgba(255, 255, 255, 0.12); } .vgs-quadrants__num { font-family: var(--font-body); font-variation-settings: "opsz" 32; font-size: clamp(2.25rem, 4.2vw, 3.5rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1; background: linear-gradient(135deg, #007A50, #00786E); -webkit-background-clip: text; background-clip: text; color: #007A50; -webkit-text-fill-color: transparent; } .vgs-ground-inverse .vgs-quadrants__num { background: var(--gradient-primary); -webkit-background-clip: text; background-clip: text; color: var(--color-brand-accent); -webkit-text-fill-color: transparent; } @supports not ((-webkit-background-clip: text) or (background-clip: text)) { .vgs-quadrants__num { background: none; -webkit-text-fill-color: currentColor; } } .vgs-quadrants__icon { display: inline-flex; flex: none; width: clamp(1.4rem, 2.4vw, 1.9rem); height: clamp(1.4rem, 2.4vw, 1.9rem); color: rgba(15, 23, 42, 0.42); } .vgs-ground-inverse .vgs-quadrants__icon { color: rgba(255, 255, 255, 0.40); } .vgs-quadrants__title { margin: 1.5rem 0 0; font-family: var(--font-body); font-variation-settings: "opsz" 32; font-size: clamp(1.25rem, 2.1vw, 1.6rem); font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; color: var(--color-text-primary); text-wrap: balance; } .vgs-ground-inverse .vgs-quadrants__title { color: var(--color-text-inverse); } .vgs-quadrants__body { margin: 0.75rem 0 0; max-width: 40ch; font-size: 0.9375rem; line-height: 1.65; color: var(--color-text-secondary); } .vgs-ground-inverse .vgs-quadrants__body { color: var(--color-text-inverse-secondary); } .vgs-quadrants__rule { margin-top: auto; height: 2px; width: 2.5rem; background: var(--color-brand-primary); transition: width .3s ease; } .vgs-ground-inverse .vgs-quadrants__rule { background: var(--color-brand-accent); } .vgs-quadrants__card:hover .vgs-quadrants__rule { width: 4.5rem; } @media (prefers-reduced-motion: reduce) { .vgs-quadrants__rule { transition: none; } .vgs-quadrants__card:hover .vgs-quadrants__rule { width: 2.5rem; } } /* --------------------------------------------------------------------------- Insights: index cards, article, pagination ------------------------------------------------------------------------- */ .vgs-insights-head__intro { margin-top: 1.25rem; max-width: 46ch; color: rgba(255, 255, 255, 0.78); } /* auto-fit + minmax(min(22rem, 100%), 1fr): the min() is what stops the track from demanding 22rem on a 320px screen, which would otherwise overflow the viewport rather than collapsing to one column. */ .vgs-postgrid { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.5rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); } .vgs-postgrid > li { margin-bottom: 0; } .vgs-postcard { display: flex; flex-direction: column; gap: 1rem; } .vgs-postcard__media { display: block; overflow: hidden; border-radius: 12px; aspect-ratio: 16 / 10; background: var(--color-border, rgba(15, 23, 42, 0.08)); } .vgs-postcard__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.22,.61,.36,1); } .vgs-postcard:hover .vgs-postcard__img { transform: scale(1.03); } .vgs-postcard__meta { font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted, rgba(15, 23, 42, 0.6)); margin: 0; } .vgs-postcard__sep { margin: 0 0.5rem; opacity: 0.5; } .vgs-postcard__title { margin: 0; font-size: clamp(1.25rem, 1.6vw, 1.5rem); line-height: 1.25; } .vgs-postcard__title a { color: inherit; text-decoration: none; /* The underline is the affordance; it is drawn on hover and focus rather than removed on hover, so a keyboard user gets the same signal. */ background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .3s ease; } .vgs-postcard__title a:hover, .vgs-postcard__title a:focus-visible { background-size: 100% 1px; } .vgs-postcard__excerpt { margin: 0; color: var(--color-text-secondary, rgba(15, 23, 42, 0.72)); max-width: 42ch; } .vgs-postgrid__empty { color: var(--color-text-muted, rgba(15, 23, 42, 0.6)); font-size: 1.125rem; } /* ---- Article ---- */ .vgs-article__figure { margin: 0; } .vgs-article__img { width: 100%; height: auto; display: block; max-height: 34rem; object-fit: cover; } .vgs-article__caption { max-width: 68rem; margin: 0.75rem auto 0; padding-inline: max(1.5rem, calc((100vw - 76rem) / 2)); font-size: 0.875rem; color: var(--color-text-muted, rgba(15, 23, 42, 0.6)); } .vgs-article__body > * + * { margin-top: 1.25em; } .vgs-article__body h2 { margin-top: 2.25em; } .vgs-article__body h3 { margin-top: 1.75em; } .vgs-article__body img { max-width: 100%; height: auto; border-radius: 12px; } /* A long code block or wide table must scroll inside itself rather than widening the page and forcing horizontal scroll on the whole document. */ .vgs-article__body pre, .vgs-article__body table { display: block; overflow-x: auto; max-width: 100%; } .vgs-article__back { margin-top: 3rem; } .vgs-article__pages { margin-top: 2rem; display: flex; gap: 0.5rem; flex-wrap: wrap; } .vgs-article__navlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); } .vgs-article__navlist > li { margin-bottom: 0; } .vgs-article__navitem--next { text-align: right; } @media (max-width: 40rem) { .vgs-article__navitem--next { text-align: left; } } .vgs-article__navlabel { display: block; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted, rgba(15, 23, 42, 0.6)); margin-bottom: 0.35rem; } .vgs-article__navitem a { color: inherit; font-size: 1.125rem; } /* ---- Pagination ---- */ .vgs-pagination { margin-top: 4rem; } .vgs-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .vgs-pagination .page-numbers { /* 2.75rem square: SC 2.5.8 wants a 24x24 CSS px target minimum and these are standalone controls, not inline-in-sentence links, so the exemption does not apply. */ min-width: 2.75rem; min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; padding: 0 0.75rem; border: 1px solid var(--color-border-strong, rgba(15, 23, 42, 0.24)); border-radius: 999px; text-decoration: none; color: inherit; transition: background-color .25s ease, border-color .25s ease, color .25s ease; } .vgs-pagination .page-numbers:hover, .vgs-pagination .page-numbers:focus-visible { background: var(--color-brand-accent, #007A50); border-color: var(--color-brand-accent, #007A50); color: #1A1A1A; } .vgs-pagination .page-numbers.current { background: var(--color-text-primary, #1A1A1A); border-color: var(--color-text-primary, #1A1A1A); color: #FFFFFF; } .vgs-pagination .page-numbers.dots { border-color: transparent; min-width: 1.5rem; padding: 0; } /* --------------------------------------------------------------------------- Parallax layer promotion ------------------------------------------------------------------------- These elements are transformed on every scroll frame. Without promotion the browser repaints the photograph, the scrim above it and the type above that once per frame, which is what read as stuttering at the section seams. Promoting only the moving element keeps the work on the compositor. Scoped deliberately: only when JS is running (otherwise nothing moves) and only when motion is allowed. This is NOT applied to section elements. Putting will-change on a whole section is what produced the resting compositing seam between two dark grounds, which is why .is-reveal explicitly sets it back to auto above. Promote the thing that moves, never its container. */ @media (prefers-reduced-motion: no-preference) { .vgs-js [data-valere-parallax], .vgs-js [data-valere-track-media] { will-change: transform; } }