/* VEL-293 landing CRITICAL css: header, type, buttons, hero + skeleton, tour intro. Loaded from index.html for the public shell (first paint without JS) and imported by Chrome.jsx. The rest of the landing styles are in landing.css. Split moved verbatim, order kept. */ /* VEL-293 landing styles. Generated from Yui's prototype css (projects/vel-293/prototype/css/landing.css), scoped under .vl so nothing leaks into the app. Colours resolve from tailwind.config.js via theme(). */ @font-face { font-family: 'VL Geist'; src: url('/assets/landing/fonts/Geist-var.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'VL Inter'; src: url('/assets/landing/fonts/Inter-var.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'VL Mono'; src: url('/assets/landing/fonts/JetBrainsMono-var.woff2') format('woff2'); font-weight: 100 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'VL Inter Fallback'; src: local('Arial'); size-adjust: 107.4%; ascent-override: 90.2%; descent-override: 22.48%; line-gap-override: 0%; } @font-face { font-family: 'VL Geist Fallback'; src: local('Arial'); size-adjust: 104%; ascent-override: 92%; descent-override: 22%; line-gap-override: 0%; } @font-face { font-family: 'VL Mono Fallback'; src: local('Courier New'); size-adjust: 99%; ascent-override: 102%; descent-override: 30%; line-gap-override: 0%; } /* VEL-293 landing prototype — Velta tokens (app/tailwind.config.js) + landing extensions. Every colour pair used for text is measured in spec §7. */ /* Self-hosted variable fonts (latin subset), preloaded in . Metric-matched fallbacks keep the swap from shifting layout. */ /* ── Root: tokens, page defaults, resets the app's preflight does not cover ── */ .vl { --bg: theme('colors.bg'); --bg-deep: theme('colors.bgDeep'); --surface: theme('colors.surface'); --surface-hi: theme('colors.surfaceHi'); --border: theme('colors.border'); --border-soft: theme('colors.borderSoft'); --primary: theme('colors.primary.DEFAULT'); --primary-hover: theme('colors.primary.hover'); --primary-light: theme('colors.primary.light'); --ink-on-primary: theme('colors.inkOnPrimary'); --text: #fff; --muted: theme('colors.muted'); --muted-2: theme('colors.muted2'); --line: theme('colors.mutedDim'); --success: theme('colors.success'); --gold: theme('colors.gold'); --font-display: 'VL Geist', 'VL Geist Fallback', system-ui, sans-serif; --font-body: 'VL Inter', 'VL Inter Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'VL Mono', 'VL Mono Fallback', ui-monospace, monospace; --ease-out: cubic-bezier(.2, .8, .2, 1); --ease-io: cubic-bezier(.65, 0, .35, 1); --header-h: 64px; --gutter: clamp(16px, 4vw, 48px); --maxw: 1320px; --radius-card: 20px; --radius-btn: 14px; min-height: 100vh; background: var(--bg-deep); color: var(--text); font: 400 17px/1.55 var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } @media (max-width: 639px) { .vl { --header-h: 56px; font-size: 16px; } } /* --env-h is published on by EnvBanner (UAT bar height), 0 elsewhere. */ body:has(.vl) { margin: 0; } /* the shell paints before the app's preflight resets the default 8px body margin */ html:has(.vl) { scroll-padding-top: calc(var(--env-h, 0px) + 64px + 16px); -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: no-preference) { html:has(.vl) { scroll-behavior: smooth; } } .vl *, .vl *::before, .vl *::after { box-sizing: border-box; } .vl svg, .vl video { display: block; max-width: 100%; } .vl ul, .vl ol { list-style: none; margin: 0; padding: 0; } .vl :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; } .vl .btn:focus-visible { outline-offset: 3px; box-shadow: 0 0 0 2px var(--bg-deep); } .vl *, .vl *::before, .vl *::after { box-sizing: border-box; } .vl svg, .vl video { display: block; max-width: 100%; } /* Same values as Tailwind's preflight: the shell paints before index.css (which carries it) arrives. */ .vl h1, .vl h2, .vl h3, .vl h4, .vl p, .vl figure { margin: 0; } .vl h1, .vl h2, .vl h3, .vl h4 { font-size: inherit; font-weight: inherit; } .vl a { color: inherit; text-decoration: inherit; } .vl img, .vl picture { display: block; max-width: 100%; height: auto; } .vl ol { margin: 0; padding: 0; list-style: none; } /* Focus: 2px orange ring + 2px deep-navy gap (orange 6.66:1 on bg-deep) */ .vl .skip { position: fixed; left: 12px; top: -100px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--primary); color: var(--ink-on-primary); font-weight: 700; text-decoration: none; } .vl .skip:focus { top: 12px; } .vl .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); } /* ── Type ─────────────────────────────────────────────── */ .vl .eyebrow { font: 600 12px/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--primary); display: inline-flex; align-items: center; gap: 10px; } .vl .eyebrow::before { content: ""; width: 24px; height: 2px; background: currentColor; border-radius: 2px; } .vl .display { font: 800 clamp(2.75rem, 1.5rem + 5.4vw, 5.75rem)/.96 var(--font-display); letter-spacing: -.04em; } .vl .h2 { font: 700 clamp(2rem, 1.35rem + 2.7vw, 3.4rem)/1.02 var(--font-display); letter-spacing: -.03em; } .vl .h3 { font: 700 clamp(1.25rem, 1.1rem + .6vw, 1.6rem)/1.15 var(--font-display); letter-spacing: -.015em; } .vl .lede { color: var(--muted); font-size: clamp(1.02rem, .95rem + .35vw, 1.2rem); line-height: 1.55; max-width: 58ch; } .vl .accent { color: var(--primary-light); } .vl .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* ── Buttons ──────────────────────────────────────────── */ .vl .btn { --h: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--h); padding: 0 22px; border-radius: var(--radius-btn); font: 700 16px/1 var(--font-body); letter-spacing: -.005em; text-decoration: none; white-space: nowrap; border: 1px solid transparent; cursor: pointer; transition: background .2s, border-color .2s, transform .12s, box-shadow .2s; } .vl .btn:active { transform: scale(.97); } .vl .b-primary { background: var(--primary); color: var(--ink-on-primary); box-shadow: 0 10px 30px -12px rgba(249,115,22,.7); } .vl .b-primary:hover { background: var(--primary-light); } .vl .b-ghost { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.22); color: var(--text); } .vl .b-ghost:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.4); } .vl .btn-text { background: none; border: 0; padding: 0 6px; color: var(--text); } .vl .btn-text:hover { color: var(--primary-light); } .vl .btn .arrow { transition: transform .25s var(--ease-out); } .vl .btn:hover .arrow { transform: translateX(3px); } .vl .btn-sm { --h: 40px; padding: 0 16px; font-size: 14px; border-radius: 999px; } @media (max-width: 399px) { .vl .btn-sm { padding: 0 13px; font-size: 13.5px; } } /* ── Header ───────────────────────────────────────────── */ .vl .site-header { position: fixed; inset: var(--env-h, 0px) 0 auto 0; z-index: 50; height: var(--header-h); transition: background .2s, border-color .2s, transform .35s var(--ease-out), backdrop-filter .2s; border-bottom: 1px solid transparent; } .vl .site-header.solid { background: rgba(8,19,32,.84); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border-color: var(--border-soft); } .vl .site-header .wrap { height: 100%; display: flex; align-items: center; gap: 12px; } .vl .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; min-height: 40px; } .vl .brand img { height: 22px; width: auto; } .vl .brand .word { font: 800 19px/1 var(--font-display); letter-spacing: .14em; } @media (max-width: 399px) { .vl .brand .word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } } .vl .nav { display: none; gap: 4px; margin: 0 auto; } .vl .nav a { padding: 10px 14px; border-radius: 10px; text-decoration: none; color: var(--muted); font-weight: 500; font-size: 15px; } .vl .nav a:hover, .vl .nav a[aria-current="page"] { color: var(--text); } .vl .nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--primary); border-radius: 0; } @media (min-width: 1024px) { .vl .nav { display: flex; } } .vl .auth { margin-left: auto; display: flex; align-items: center; gap: 6px; } @media (min-width: 1024px) { .vl .auth { margin-left: 0; gap: 10px; } } .vl .auth .login { min-height: 40px; padding: 0 12px; display: inline-flex; align-items: center; font-weight: 600; font-size: 15px; text-decoration: none; border-radius: 999px; } .vl .auth .login:hover { background: rgba(255,255,255,.07); } @media (max-width: 399px) { .vl .auth .login { padding: 0 8px; font-size: 14px; } } /* ── Reveal system (JS adds .js to ; without JS everything is visible) ── */ .vl.js [data-reveal] { opacity: 0; transform: translateY(22px); } .vl.js [data-reveal].in { opacity: 1; transform: none; transition: opacity .6s var(--ease-out), transform .7s var(--ease-out); transition-delay: calc(var(--d, 0) * 80ms); } .vl.rm [data-reveal], .vl.rm [data-reveal].in { opacity: 1 !important; transform: none !important; transition: none !important; } /* ── HERO ─────────────────────────────────────────────── */ .vl .hero { position: relative; isolation: isolate; padding: calc(var(--env-h, 0px) + var(--header-h) + 8px) 0 24px; overflow: clip; background: var(--bg); min-height: 100svh; } .vl .hero::before { /* warm glow behind the portrait */ content: ""; position: absolute; z-index: -1; right: -10%; top: 5%; width: min(70vw, 900px); aspect-ratio: 1; background: radial-gradient(closest-side, rgba(249,115,22,.20), rgba(249,115,22,.06) 55%, transparent 72%); } .vl .hero::after { /* grain */ content: ""; position: absolute; inset: 0; z-index: -1; opacity: .06; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .vl .hero h1 .line { display: block; } .vl .hero h1 .name { color: var(--primary-light); display: inline-block; padding-right: .06em; } .vl .hero-sub { color: var(--muted); font-size: clamp(1rem, .92rem + .4vw, 1.2rem); max-width: 46ch; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .vl .hero-sub strong { color: var(--text); font-weight: 600; } .vl .chips { display: flex; flex-wrap: wrap; gap: 8px; } /* Mobile: only the two decisive chips (rating, price). Languages and members are repeated in "Meet". Long values wrap to two rows at most, so the CTA stays above the fold (AC-04, long-value state). */ @media (max-width: 639px) { .vl .hero .chips li:nth-child(n+3) { display: none; } } .vl .p-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 12px; border-radius: 999px; background: rgba(26,42,58,.72); border: 1px solid var(--border); color: var(--text); font-size: 13.5px; font-weight: 500; white-space: nowrap; } .vl .p-chip svg { width: 15px; height: 15px; flex: none; } .vl .p-chip .star { color: var(--gold); } .vl .p-chip .dim { color: var(--muted); } .vl .cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .vl .portrait { position: relative; border-radius: 28px; overflow: hidden; background: var(--surface); aspect-ratio: 4 / 5; box-shadow: 0 40px 80px -40px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.06); } .vl .portrait picture, .vl .portrait img { width: 100%; height: 100%; } .vl .portrait img { object-fit: cover; object-position: var(--focal, 50% 22%); transform: scale(var(--drift, 1)); transform-origin: 50% 30%; will-change: transform; } .vl .portrait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,19,32,0) 45%, rgba(8,19,32,.55) 72%, rgba(8,19,32,.92) 100%); pointer-events: none; } .vl .quote-chip { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 18px; padding: 16px 18px; border-radius: 18px; background: rgba(8,19,32,.78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.1); } .vl .quote-chip q { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font: 600 16px/1.4 var(--font-display); letter-spacing: -.01em; quotes: "“" "”"; } .vl .quote-chip .by { margin-top: 8px; font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 8px; } .vl .quote-chip .by::before { content: ""; width: 18px; height: 2px; background: var(--primary); border-radius: 2px; } .vl .cred-chip { position: absolute; z-index: 2; top: 16px; right: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: rgba(8,19,32,.78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.12); font-size: 13px; font-weight: 600; } .vl .cred-chip svg { width: 16px; height: 16px; color: var(--primary); } .vl .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0 rgba(34,197,94,.6); } @media (prefers-reduced-motion: no-preference) { .vl .live-dot { animation: vl-pulse 2.4s infinite; } } @keyframes vl-pulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); } 70% { box-shadow: 0 0 0 9px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } } /* Solo hero — one H1 at every width. Mobile: title overlaps the portrait's lower third (same grid cell). Desktop: title + body in column 1, portrait spans column 2. */ .vl .hero-solo { display: grid; grid-template-areas: "stack" "body"; gap: 16px; } .vl .hero-solo > * { min-width: 0; } .vl .hero-solo .portrait { grid-area: stack; } .vl .hero-solo .hero-title { grid-area: stack; align-self: end; z-index: 2; display: flex; flex-direction: column; gap: 10px; padding: 0 18px 18px; pointer-events: none; } .vl .hero-solo .hero-body { grid-area: body; display: flex; flex-direction: column; gap: 16px; } .vl .hero-solo .quote-chip { display: none; } @media (max-width: 1023px) { .vl .hero-solo .portrait { aspect-ratio: auto; height: min(60svh, 118vw, 560px); min-height: 320px; border-radius: 24px; } .vl .hero-solo .portrait::after { background: linear-gradient(180deg, rgba(8,19,32,0) 28%, rgba(8,19,32,.72) 60%, rgba(8,19,32,.97) 100%); } .vl .hero-solo .hero-title .display { font-size: clamp(2.6rem, 1.1rem + 7.6vw, 4.2rem); } /* Eyebrow over a photo: measured 3.3:1 bare. On a navy pill it reads 6.6:1 regardless of the photo. */ .vl .hero-solo .hero-title .eyebrow { align-self: flex-start; background: rgba(8,19,32,.88); padding: 6px 10px; border-radius: 999px; } .vl .hero-solo .hero-title .eyebrow::before { display: none; } .vl .hero-empty .hero-title .display { font-size: clamp(2.2rem, .9rem + 6.6vw, 3.6rem); } .vl .hero-solo .cred-chip { top: 12px; right: 12px; } .vl .hero-solo .hero-sub { display: none; } .vl .hero-solo .cta-row .b-primary { flex: 1 1 100%; } .vl .hero-solo .cta-row .b-ghost { flex: 1 1 100%; background: none; border-color: transparent; min-height: 44px; } } @media (min-width: 640px) and (max-width: 1023px) { .vl .hero-solo .hero-sub { display: block; } .vl .hero-solo .cta-row .btn { flex: 0 1 auto; } .vl .hero-solo .cta-row .b-ghost { border-color: rgba(255,255,255,.22); } } @media (min-width: 1024px) { .vl .hero { padding-top: calc(var(--header-h) + 24px); padding-bottom: 12px; min-height: calc(100svh - 62px); } .vl .hero-solo { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); grid-template-rows: 1fr auto auto 1fr; grid-template-areas: ". stack" "title stack" "body stack" ". stack"; column-gap: clamp(40px, 5vw, 96px); row-gap: 26px; min-height: calc(100svh - var(--header-h) - 104px); } .vl .hero-solo .portrait { grid-area: stack; align-self: center; max-height: calc(100svh - var(--header-h) - 104px); margin-left: auto; width: 100%; max-width: 560px; } .vl .hero-solo .hero-title { grid-area: title; padding: 0; gap: 22px; pointer-events: auto; } .vl .hero-solo .hero-body { gap: 24px; } .vl .hero-solo .quote-chip { display: block; } } .vl .hero-solo .hero-title .display { text-wrap: balance; } .vl .quote-chip { margin: 0; } /* Coach grid (2+ coaches) */ .vl .hero-grid-state > * { min-width: 0; } .vl .hero-grid-state .hero-head { display: flex; flex-direction: column; gap: 18px; max-width: 760px; } .vl .coach-row { display: grid; gap: 16px; margin-top: 36px; } @media (min-width: 768px) { .vl .coach-row { grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); } } @media (max-width: 767px) { .vl .coach-row { grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px var(--gutter) 12px; margin-inline: calc(var(--gutter) * -1); scrollbar-width: none; } .vl .coach-row::-webkit-scrollbar { display: none; } .vl .coach-row > * { scroll-snap-align: start; } } .vl .coach-card { position: relative; display: block; text-decoration: none; border-radius: 22px; overflow: hidden; background: var(--surface); aspect-ratio: 4/5; box-shadow: 0 0 0 1px rgba(255,255,255,.06); } .vl .coach-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); } .vl .coach-card:hover img { transform: scale(1.04); } .vl .coach-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(8,19,32,.82) 62%, rgba(8,19,32,.97) 100%); } .vl .coach-card .meta { position: absolute; z-index: 1; left: 18px; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 6px; } .vl .coach-card .nm { font: 700 22px/1.1 var(--font-display); letter-spacing: -.02em; } .vl .coach-card .hl { color: #D7DDE4; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vl .coach-card .row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; margin-top: 4px; } .vl .coach-card .go { color: var(--primary-light); font-weight: 600; } .vl .coach-card .sample { position: absolute; z-index: 1; top: 12px; left: 12px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 5px 8px; border-radius: 6px; background: rgba(8,19,32,.85); color: var(--muted); } .vl .coach-card.featured { grid-column: span 2; aspect-ratio: auto; } @media (max-width: 767px) { .vl .coach-card.featured { grid-column: auto; aspect-ratio: 4/5; } } .vl .skeleton { background: linear-gradient(100deg, var(--surface) 30%, var(--surface-hi) 50%, var(--surface) 70%) 0 0 / 300% 100%; } @media (prefers-reduced-motion: no-preference) { .vl .skeleton { animation: vl-shimmer 1.4s linear infinite; } } @keyframes vl-shimmer { to { background-position: -150% 0; } } @media (min-width: 1024px) { .vl .hero-grid-state { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(40px, 5vw, 80px); align-items: center; min-height: calc(100svh - var(--header-h) - 96px); padding-bottom: 24px; } .vl .hero-grid-state .coach-row { margin-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); } .vl .hero-grid-state .coach-row.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .vl .hero-grid-state .coach-card, .vl .hero-grid-state .coach-card.featured { grid-column: auto; aspect-ratio: 3 / 4; max-height: calc(100svh - var(--header-h) - 120px); } .vl .hero-grid-state .coach-row.n3 .coach-card { aspect-ratio: 5 / 8; } .vl .hero-grid-state .coach-row.n3 .row { flex-direction: column; align-items: flex-start; gap: 4px; } .vl .hero-grid-state .coach-row.n3 .nm { font-size: 19px; } .vl .hero-grid-state .coach-row.n4 .coach-card { aspect-ratio: 5 / 4; max-height: calc((100svh - var(--header-h) - 136px) / 2); } .vl .hero-grid-state .coach-row.n4 .coach-card .hl { display: none; } } /* ── HOW IT WORKS ─────────────────────────────────────── */ .vl .tour-intro { padding: calc(var(--header-h) + clamp(40px, 6vw, 96px)) 0 clamp(40px, 5vw, 72px); background: var(--bg); position: relative; overflow: clip; isolation: isolate; } .vl .tour-intro::before { content: ""; position: absolute; z-index: -1; left: -15%; top: -10%; width: 70vw; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(249,115,22,.14), transparent 70%); } .vl .tour-intro .grid { display: grid; gap: 32px; align-items: center; } @media (min-width: 1024px) { .vl .tour-intro .grid { grid-template-columns: 1.15fr .85fr; gap: 72px; } } .vl .tour-intro .display { font-size: clamp(2.6rem, 1.4rem + 5vw, 5.5rem); } .vl .tour-intro .copy { display: flex; flex-direction: column; gap: 22px; } .vl .intro-photo { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 4/3; box-shadow: 0 0 0 1px rgba(255,255,255,.06); } .vl .intro-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 40%; } .vl .intro-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(8,19,32,.85)); } .vl .intro-photo figcaption { position: absolute; z-index: 1; left: 18px; bottom: 16px; right: 18px; font-size: 14px; color: #D7DDE4; } .vl .feature-list { display: flex; flex-wrap: wrap; gap: 8px; }