@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap'); /* --------------------------------------------------------------------------- Vestiaire Collective case study. Inherits the portfolio design language set in css/mycarddeck.css. THEME dark and paper chapters alternate, the same device mycarddeck.html uses. Colour is expressed only through semantic tokens, so adding `vc-paper` to a block re-themes everything nested inside it, including the decrypted private content. ACCENT LOCK one accent, two values so it stays legible on both grounds: --blue (#91adff) on dark, --navy (#263b87) on paper, which is the same pairing mycarddeck uses. The Vestiaire orange appears only inside the brand wordmark and product screenshots. RADIUS RULE layout surfaces 0 · interactive controls pill (999px) · device frames use their physical radii (browser 12, phone 44). --------------------------------------------------------------------------- */ :root { /* Raw palette */ --ink: #0b0c10; --ink-2: #111218; --ink-3: #16181f; --paper: #f3f1ed; --blue: #91adff; --blue-bright: #b5c7ff; --navy: #263b87; --content: min(1180px, calc(100% - 64px)); --ease: cubic-bezier(.16, 1, .3, 1); /* Semantic tokens. Dark is the default chapter. */ --surface: var(--ink); --surface-2: var(--ink-2); --text: var(--paper); --text-2: #c7c9d2; --text-3: #aeb1bc; --text-4: #8e919b; --rule: rgba(255, 255, 255, .12); --rule-soft: rgba(255, 255, 255, .07); --accent: var(--blue); --accent-strong: var(--blue-bright); --accent-line: rgba(145, 173, 255, .34); --accent-dim: rgba(145, 173, 255, .07); --tint: rgba(145, 173, 255, .09); --tint-2: rgba(255, 255, 255, .05); --field-bg: rgba(5, 6, 10, .55); --field-border: rgba(255, 255, 255, .22); --btn-bg: var(--paper); --btn-text: var(--ink); --btn-bg-hover: #fff; --danger: #ffa8a0; --delta-down: #d9b8a0; } /* ===== Per-project accent ============================================== Each case study carries its own colour. Every brand value below passes 4.5:1 on the dark chapter as given, and every one fails on paper (the lightest, Sodexo's #F0F2FA, sits at 1.01:1 there), so each has a darker relative of the same hue for the paper chapter. Measured, not guessed: brand on dark paper value on paper #FF5B29 6.31 #CC3000 4.67 #0E99FF 6.53 #006FC1 4.60 #FFBC03 11.59 #8D6700 4.57 #F0F2FA 17.49 #4F67C4 4.57 #7AD6FE 11.99 #0174A6 4.60 A page opts in with data-brand on . Without it the portfolio's own blue and navy stay in place, which is what About and any new page get. */ body[data-brand="vestiaire"] { --brand: #FF5B29; --brand-lift: #FF8A63; --brand-rgb: 255,91,41; --brand-ink: #CC3000; --brand-ink-deep: #992400; --brand-ink-rgb: 204,48,0; } body[data-brand="bim"] { --brand: #0E99FF; --brand-lift: #6CBFFC; --brand-rgb: 14,153,255; --brand-ink: #006FC1; --brand-ink-deep: #00528E; --brand-ink-rgb: 0,111,193; } body[data-brand="saint-gobain"]{ --brand: #FFBC03; --brand-lift: #FFD255; --brand-rgb: 255,188,3; --brand-ink: #8D6700; --brand-ink-deep: #644900; --brand-ink-rgb: 141,103,0; } /* Sodexo's #F0F2FA is a surface, not an accent: against the page's own text colour it measures 1.01:1, so on the dark chapter it would be invisible as a highlight. It is used as the paper chapter's ground instead, which is the job it was made for, and the accent is a readable relative of the same family: #9FB0EE at 9.23:1 on dark, #4F67C4 at 4.62:1 on that ground. */ body[data-brand="sodexo"] { --brand: #9FB0EE; --brand-lift: #C3CDF6; --brand-rgb: 159,176,238; --brand-ink: #4F67C4; --brand-ink-deep: #34499D; --brand-ink-rgb: 79,103,196; } body[data-brand="sodexo"] .vc-paper { --surface: #F0F2FA; --surface-2: #fff; } body[data-brand="safeland"] { --brand: #7AD6FE; --brand-lift: #B3E7FF; --brand-rgb: 122,214,254; --brand-ink: #0174A6; --brand-ink-deep: #015478; --brand-ink-rgb: 1,116,166; } body[data-brand] { --accent: var(--brand); --accent-strong: var(--brand-lift); --accent-line: rgba(var(--brand-rgb), .34); --accent-dim: rgba(var(--brand-rgb), .07); --tint: rgba(var(--brand-rgb), .09); } /* Outranks .vc-paper below, which would otherwise put the navy back. */ body[data-brand] .vc-paper { --accent: var(--brand-ink); --accent-strong: var(--brand-ink-deep); --accent-line: rgba(var(--brand-ink-rgb), .32); --accent-dim: rgba(var(--brand-ink-rgb), .05); --tint: rgba(var(--brand-ink-rgb), .07); } /* Paper chapter. Re-themes every descendant, private content included. */ .vc-paper { --surface: var(--paper); --surface-2: #fff; --text: var(--ink); --text-2: #3a3c44; --text-3: #4c4e57; --text-4: #64666f; --rule: rgba(11, 12, 16, .2); --rule-soft: rgba(11, 12, 16, .11); --accent: var(--navy); --accent-strong: #16255c; --accent-line: rgba(38, 59, 135, .32); --accent-dim: rgba(38, 59, 135, .05); --tint: rgba(38, 59, 135, .07); --tint-2: rgba(11, 12, 16, .035); --field-bg: #fff; --field-border: rgba(11, 12, 16, .25); --btn-bg: var(--ink); --btn-text: var(--paper); --btn-bg-hover: #2b2d36; --danger: #b03024; --delta-down: #8a552f; background: var(--surface); color: var(--text); } * { box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: hidden; } body.vc-page { margin: 0; background: var(--ink); color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 16px; line-height: 1.55; overflow-x: hidden; -webkit-font-smoothing: antialiased; } .vc-page a { color: inherit; text-decoration: none; } .vc-body a, .vc-lead a, .vc-note a, .vc-unlock__copy a, .vc-qa dd a { color: var(--accent-strong); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .2s var(--ease); } .vc-body a:hover, .vc-lead a:hover, .vc-note a:hover, .vc-unlock__copy a:hover, .vc-qa dd a:hover { color: var(--text); } .vc-page img { display: block; max-width: 100%; height: auto; } .vc-page :focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; } .vc-wrap { width: var(--content); margin: 0 auto; } .vc-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Reveal on scroll ------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal.is-visible { opacity: 1; transform: none; } /* Shared type ------------------------------------------------------------ */ .vc-eyebrow { margin: 0 0 14px; color: var(--accent); font-size: 14px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; } .vc-h2 { max-width: 24ch; margin: 0 0 20px; font-family: 'Space Grotesk', sans-serif; font-size: var(--h2-size); font-weight: 500; letter-spacing: var(--h2-tracking); line-height: var(--h2-leading); } .vc-h3 { margin: 0 0 10px; font-family: 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 500; letter-spacing: -.03em; line-height: 1.25; } .vc-lead { max-width: 62ch; margin: 0; color: var(--text-2); font-size: 18px; line-height: 1.65; } .vc-body { max-width: 62ch; margin: 0 0 16px; color: var(--text-3); font-size: 16px; line-height: 1.7; } .vc-body:last-child { margin-bottom: 0; } .vc-section { padding: 92px 0; background: var(--surface); color: var(--text); } .vc-section:not(.vc-paper) + .vc-section:not(.vc-paper), .vc-paper + .vc-paper { border-top: 1px solid var(--rule-soft); } /* ===== Hero ============================================================= */ .vc-hero { position: relative; padding: 132px 0 44px; background: var(--ink); color: var(--paper); } .vc-hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr); gap: 56px; align-items: center; } .vc-hero h1 { max-width: 15ch; margin: 0 0 22px; font-family: 'Space Grotesk', sans-serif; font-size: var(--hero-size); font-weight: 500; letter-spacing: var(--hero-tracking); line-height: var(--hero-leading-tight); } .vc-hero h1 em { font-style: normal; color: var(--accent-strong); } /* bim's primary is a gradient, but its own system uses it on badges and challenges, never on type, and gradient text is a poor idea besides. It goes on the pull quote's rule, which is the nearest thing this layout has to a badge, and the emphasis stays a solid colour. */ body[data-brand="bim"] .vc-pull { border-image: linear-gradient(90deg, var(--brand), var(--brand-lift)) 1; } .vc-hero__intro { max-width: 52ch; margin: 0; color: #c7c9d2; font-size: 18px; line-height: 1.6; } /* Second line carries the squad detail, so it steps down a level. */ .vc-hero__intro--2 { max-width: 62ch; margin-top: 16px; color: #aeb1bc; font-size: 15.5px; line-height: 1.65; } .vc-hero__mark { justify-self: end; width: min(100%, 340px); } .vc-hero__mark img { width: 100%; } /* Saint-Gobain's hero art is the product itself, two phones showing glass placed in a room, so it earns the room MyCardDeck's hero gives its pack shot rather than the narrow column a wordmark needs. */ /* Only above the width where the hero stops being two columns. These carry an attribute and a class, so they outrank the plain .vc-hero__inner in the responsive block below, and without the query they held the hero in two columns on a phone with the art crushed in beside the text. */ @media (min-width: 1025px) { body[data-brand="saint-gobain"] .vc-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(320px, .95fr); } body[data-brand="saint-gobain"] .vc-hero__mark { width: min(100%, 540px); } } /* ===== Tabs ============================================================= */ .vc-tabbar { position: sticky; z-index: 60; top: 72px; background: rgba(11, 12, 16, .88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid rgba(255,255,255,.07); border-bottom: 1px solid rgba(255,255,255,.07); } .vc-tabbar__inner { display: flex; gap: 6px; width: var(--content); margin: 0 auto; padding: 12px 0; overflow-x: auto; scrollbar-width: none; } .vc-tabbar__inner::-webkit-scrollbar { display: none; } .vc-tab { display: inline-flex; gap: 10px; align-items: baseline; flex: 0 0 auto; padding: 10px 20px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: #a9acb6; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; cursor: pointer; transition: color .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease), transform .12s var(--ease); } .vc-tab:hover { color: var(--text); background: rgba(255, 255, 255, .05); } .vc-tab:active { transform: scale(.98); } .vc-tab__i { color: #7e828e; font-family: 'Space Grotesk', sans-serif; font-size: 14px; letter-spacing: .04em; } .vc-tab[aria-selected="true"] { border-color: var(--accent-line); background: var(--accent-dim); color: var(--accent-strong); } .vc-tab[aria-selected="true"] .vc-tab__i { color: var(--accent); } .vc-panel[hidden] { display: none; } .vc-panel { animation: vc-panel-in .45s var(--ease) both; } @keyframes vc-panel-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* ===== Facts strip ====================================================== */ .vc-facts--two { grid-template-columns: repeat(2, 1fr) !important; } .vc-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 40px 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .vc-facts > div { padding: 24px; border-right: 1px solid var(--rule-soft); } .vc-facts > div + div { padding-left: 24px; } .vc-facts > div:last-child { border-right: 0; } .vc-facts__wide { grid-column: 1 / -1; border-right: 0 !important; border-top: 1px solid var(--rule-soft); } .vc-facts__wide dd { max-width: 70ch; } .vc-facts dt { margin-bottom: 8px; color: var(--text-4); font-size: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } .vc-facts dd { margin: 0; color: var(--text); font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 500; letter-spacing: -.02em; line-height: 1.35; } /* ===== Split (context) ================================================== */ .vc-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 72px; align-items: start; } .vc-pull { padding: 34px 0 0; border-top: 2px solid var(--accent); } .vc-pull p { margin: 0; color: var(--text); font-family: 'Space Grotesk', sans-serif; font-size: clamp(1.4rem, 2.1vw, 1.95rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.3; } .vc-pull span { display: block; margin-top: 18px; color: var(--accent); font-size: 14px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; } /* ===== Findings (numbered, grouped, no boxes) =========================== */ .vc-findings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 64px; margin: 54px 0 0; padding: 0; list-style: none; } .vc-findings li { position: relative; padding-top: 22px; border-top: 1px solid var(--rule); } .vc-findings strong { display: block; margin-bottom: 7px; color: var(--text); font-family: 'Space Grotesk', sans-serif; font-size: 17px; font-weight: 500; letter-spacing: -.025em; } .vc-findings p { margin: 0; color: var(--text-3); font-size: 16px; line-height: 1.65; } /* Numbered findings. The count comes from the list counter, not from the copy, so the numbers cannot drift out of step if one is added or removed. */ .vc-findings--numbered { counter-reset: finding; } .vc-findings--numbered > li { counter-increment: finding; } .vc-findings--numbered > li > strong::before { content: counter(finding, decimal-leading-zero); display: block; margin-bottom: 9px; color: var(--accent); font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 500; letter-spacing: .04em; } /* ===== Disclosure (out of scope) ======================================== */ .vc-disclosure { margin-top: 56px; border-top: 1px solid var(--rule); } .vc-disclosure > summary { display: flex; gap: 14px; align-items: center; justify-content: space-between; padding: 22px 0; color: var(--text); font-family: 'Space Grotesk', sans-serif; font-size: 17px; font-weight: 500; letter-spacing: -.02em; cursor: pointer; list-style: none; transition: color .2s var(--ease); } .vc-disclosure > summary::-webkit-details-marker { display: none; } .vc-disclosure > summary:hover { color: var(--accent-strong); } .vc-disclosure > summary::after { content: '+'; flex: 0 0 auto; color: var(--accent); font-family: 'Space Grotesk', sans-serif; font-size: 22px; line-height: 1; transition: transform .3s var(--ease); } .vc-disclosure[open] > summary::after { transform: rotate(45deg); } .vc-disclosure__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 64px; padding: 6px 0 34px; } .vc-disclosure__intro { grid-column: 1 / -1; max-width: 72ch; margin: 0 0 6px; color: var(--text-3); font-size: 15px; line-height: 1.65; } .vc-disclosure__body div strong { display: block; margin-bottom: 7px; color: var(--text); font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 500; letter-spacing: -.02em; } .vc-disclosure__body div p { margin: 0; color: var(--text-3); font-size: 14.5px; line-height: 1.6; } /* ===== Statement ======================================================== */ .vc-statement { padding: 104px 0; background: linear-gradient(180deg, var(--accent-dim), transparent 78%), var(--ink); color: var(--paper); } .vc-statement blockquote { max-width: 22ch; margin: 0; font-family: 'Space Grotesk', sans-serif; font-size: clamp(2rem, 4.6vw, 4rem); font-weight: 500; letter-spacing: -.05em; line-height: 1.1; } .vc-statement blockquote + p { max-width: 54ch; margin: 30px 0 0; color: #aeb1bc; font-size: 16px; line-height: 1.65; } /* ===== Flow track ======================================================= */ .vc-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0; margin: 52px 0 0; padding: 0; list-style: none; counter-reset: vcflow; } .vc-flow li { position: relative; padding: 30px 26px 30px 0; border-top: 2px solid var(--rule); } .vc-flow li::before { content: ''; position: absolute; top: -2px; left: 0; width: 100%; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left center; transition: transform .9s var(--ease); } .vc-flow.is-visible li::before { transform: scaleX(1); } .vc-flow li:nth-child(2)::before { transition-delay: .14s; } .vc-flow li:nth-child(3)::before { transition-delay: .28s; } .vc-flow li:nth-child(4)::before { transition-delay: .42s; } .vc-flow b { display: block; margin-bottom: 14px; color: var(--accent); font-family: 'Space Grotesk', sans-serif; font-size: 34px; font-weight: 500; letter-spacing: -.04em; line-height: 1; } .vc-flow strong { display: block; margin-bottom: 9px; color: var(--text); font-family: 'Space Grotesk', sans-serif; font-size: 19px; font-weight: 500; letter-spacing: -.03em; } .vc-flow span { display: block; color: var(--text-3); font-size: 14.5px; line-height: 1.55; } /* ===== Compare (before / after) ========================================= */ .vc-compare__head { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-end; justify-content: space-between; margin-bottom: 40px; } .vc-switch { display: inline-flex; flex: 0 0 auto; gap: 4px; padding: 4px; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface-2); } .vc-switch button { padding: 9px 20px; border: 0; border-radius: 999px; background: transparent; color: var(--text-3); font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500; cursor: pointer; transition: color .25s var(--ease), background-color .25s var(--ease); } .vc-switch button:hover { color: var(--text); } .vc-switch button[aria-pressed="true"] { background: var(--btn-bg); color: var(--btn-text); } .vc-compare__view[hidden] { display: none; } .vc-compare__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; align-items: start; } .vc-compare__grid--mobile { max-width: 760px; margin: 0 auto; justify-items: center; } .vc-figure { margin: 0; } .vc-figure figcaption { display: grid; gap: 6px; margin-top: 18px; } .vc-figure figcaption b { color: var(--accent); font-size: 14px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; } .vc-figure figcaption strong { color: var(--text); font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 500; letter-spacing: -.03em; } .vc-figure figcaption span { color: var(--text-3); font-size: 14.5px; line-height: 1.55; } /* Browser frame ---------------------------------------------------------- */ .vc-browser { overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: var(--ink-2); box-shadow: 0 28px 60px rgba(0, 0, 0, .45); } .vc-browser__chrome { display: flex; gap: 14px; align-items: center; padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,.07); background: var(--ink-3); } .vc-browser__dots { display: flex; flex: 0 0 auto; gap: 6px; } .vc-browser__dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .16); } .vc-browser__url { flex: 1 1 auto; overflow: hidden; padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,.05); color: #a9acb6; font-family: 'Space Grotesk', sans-serif; font-size: 14px; letter-spacing: .01em; text-overflow: ellipsis; white-space: nowrap; } .vc-browser__screen { position: relative; height: clamp(360px, 46vh, 480px); overflow-x: hidden; overflow-y: auto; background: #fff; scrollbar-width: thin; scrollbar-color: rgba(11, 12, 16, .3) transparent; -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 52px), transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 52px), transparent 100%); } .vc-browser__screen::-webkit-scrollbar { width: 8px; } .vc-browser__screen::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: rgba(11, 12, 16, .28); background-clip: content-box; } .vc-browser__screen img { width: 100%; } /* A single screenshot that fits the frame: no scrolling, so no fixed height and no fade at the bottom edge. */ .vc-browser__screen--fit { height: auto; overflow: visible; -webkit-mask-image: none; mask-image: none; } .vc-browser__screen img + img { border-top: 1px solid rgba(11, 12, 16, .1); } /* Phone frame ------------------------------------------------------------ */ .vc-phone { position: relative; width: min(100%, 290px); padding: 11px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 44px; background: linear-gradient(160deg, #26282f, #14151a 42%); box-shadow: 0 30px 62px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .13); } .vc-phone video { width: 100%; aspect-ratio: 1180 / 2556; border-radius: 34px; background: #05060a; object-fit: cover; } /* Screenshots keep their own height rather than being cropped to the frame. */ .vc-phone img { display: block; width: 100%; height: auto; border-radius: 34px; background: #fff; } /* Full-length homepage captures are thousands of pixels tall, so the phone scrolls its own screen rather than the page stretching to fit them. */ .vc-phone__screen { height: 672px; overflow-x: hidden; overflow-y: auto; border-radius: 34px; background: #fff; scrollbar-width: thin; scrollbar-color: rgba(11, 12, 16, .3) transparent; -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 46px), transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 46px), transparent 100%); } .vc-phone__screen::-webkit-scrollbar { width: 6px; } .vc-phone__screen::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(11, 12, 16, .28); } .vc-phone__screen img { border-radius: 0; } /* An 840px screen in the standard 290px frame would read as a stretched phone, so the tall variant widens to match: 374px of screen over 840px is 0.445, against 0.46 for the real device. */ /* The homepage mockups, a touch smaller, with the frame kept in proportion: 320px wide to 280px is 0.875, and the screen inside goes from 296x672 to 258x586, which is the same 2.27 tall as before. The padding, both radii and the fade at the foot are scaled by the same amount. */ .vc-phone--tall { width: min(100%, 280px); padding: 10px; border-radius: 38px; } .vc-phone--tall .vc-phone__screen { height: 586px; border-radius: 30px; -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 40px), transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 40px), transparent 100%); } #panel-homepage .vc-compare__grid--mobile { max-width: 700px; justify-items: stretch; } #panel-homepage .vc-phone--tall { margin-left: auto; margin-right: auto; } /* Four phone frames across, for a flow shown screen by screen. The frames are narrower than the standard .vc-phone so four fit the content width, and the screen keeps roughly the 0.46 width-to-height of a real handset. */ .vc-phones--four { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 44px; } .vc-phones--four figure { margin: 0; } /* The screen is shaped, not fixed. It used to be a flat 540px tall whatever the frame was wide, so as the row went four up, two up, then one up the frame grew and the screen did not, and the phone ended up wide and squat. 258 by 586 is the screen the tall frames on the Vestiaire homepage use, so these now match those at any width, and the frame is capped so a single column does not produce an enormous phone. */ .vc-phones--four .vc-phone { width: min(100%, 300px); margin-inline: auto; padding: 8px; border-radius: 34px; } .vc-phones--four .vc-phone__screen { aspect-ratio: 258 / 586; height: auto; border-radius: 27px; } .vc-phones--four figcaption { margin-top: 13px; color: var(--text-3); font-size: 14px; line-height: 1.55; } .vc-phones--four figcaption strong { display: block; color: var(--text); font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 500; letter-spacing: -.025em; } @media (max-width: 900px) { .vc-phones--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .vc-phones--four { grid-template-columns: minmax(0, 1fr); justify-items: center; } } /* Mixed-ratio image set, each with its own label. */ .vc-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 32px 24px; align-items: start; margin: 44px 0 0; padding: 0; list-style: none; } .vc-gallery figure { margin: 0; } .vc-gallery img { display: block; width: 100%; height: auto; border: 1px solid var(--rule-soft); background: var(--surface-2); } .vc-gallery figcaption { margin-top: 13px; } .vc-gallery figcaption strong { display: block; color: var(--text); font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 500; letter-spacing: -.025em; } .vc-gallery figcaption span { display: block; margin-top: 5px; color: var(--text-3); font-size: 14px; line-height: 1.55; } /* ===== Principles (scroll-snap track) =================================== */ .vc-track { display: grid; grid-auto-columns: minmax(258px, 1fr); grid-auto-flow: column; gap: 18px; margin: 50px 0 0; padding: 0 0 20px; overflow-x: auto; list-style: none; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--rule) transparent; } .vc-track::-webkit-scrollbar { height: 6px; } .vc-track::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--rule); } .vc-track li { display: flex; flex-direction: column; padding: 28px 26px 30px; border: 1px solid var(--rule-soft); background: linear-gradient(170deg, var(--tint), transparent 58%); scroll-snap-align: start; } .vc-track li:nth-child(even) { background: linear-gradient(170deg, var(--tint-2), transparent 58%); } .vc-track strong { margin-bottom: 12px; color: var(--text); font-family: 'Space Grotesk', sans-serif; font-size: 19px; font-weight: 500; letter-spacing: -.03em; line-height: 1.2; } .vc-track p { margin: 0; color: var(--text-3); font-size: 14.5px; line-height: 1.6; } /* On a wide screen all five principles fit, so show them rather than leaving the fifth behind a horizontal scroll that macOS hides until you scroll. */ @media (min-width: 1080px) { /* auto-fit rather than a fixed five, so the same component works for a row of three cards as well as a row of five. */ .vc-track { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(195px, 1fr)); gap: 14px; padding-bottom: 0; overflow-x: visible; } } /* ===== Change pairs (prototype learnings) =============================== */ .vc-sub { margin: 0 0 6px; color: var(--accent); font-size: 14px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; } .vc-sub + .vc-changes { margin-top: 18px; } .vc-changes { margin: 50px 0 0; padding: 0; list-style: none; } .vc-changes li { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 12px 40px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--rule-soft); } .vc-changes li:first-child { border-top: 1px solid var(--rule); } .vc-changes strong { color: var(--text); font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 500; letter-spacing: -.025em; } .vc-changes p { position: relative; margin: 0; padding-left: 26px; color: var(--text-3); font-size: 15px; line-height: 1.6; } .vc-changes p::before { content: '\2192'; position: absolute; left: 0; color: var(--accent); } /* Prototype screens behind the learnings. Full width one per row: these are wide comparison shots and two across would render them too small to read. */ .vc-learnings { display: grid; gap: 34px; margin-top: 40px; } .vc-learnings figure { margin: 0; } .vc-learnings img { display: block; width: 100%; height: auto; border: 1px solid var(--rule-soft); background: var(--surface-2); } .vc-learnings figcaption { margin-top: 12px; color: var(--text-4); font-size: 14px; line-height: 1.55; } /* ===== Timeline ========================================================= */ .vc-timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 50px 0 0; padding: 0; list-style: none; } .vc-timeline li { position: relative; padding: 32px 24px 32px 0; } .vc-timeline li::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: var(--rule); } .vc-timeline li::after { content: ''; position: absolute; top: -3px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } .vc-timeline b { display: block; margin-bottom: 9px; color: var(--accent); font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 500; letter-spacing: .04em; } .vc-timeline strong { display: block; margin-bottom: 8px; color: var(--text); font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 500; letter-spacing: -.03em; } .vc-timeline p { margin: 0; color: var(--text-3); font-size: 14.5px; line-height: 1.6; } /* ===== Impact =========================================================== */ .vc-impact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 50px 0 0; padding: 0; list-style: none; } .vc-impact li { padding: 32px 28px 34px; border: 1px solid var(--rule-soft); background: linear-gradient(175deg, var(--tint), transparent 62%); } .vc-impact__dir { display: inline-flex; gap: 8px; align-items: center; margin-bottom: 22px; padding: 6px 13px; border: 1px solid var(--accent-line); border-radius: 999px; color: var(--accent-strong); font-size: 14px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; } .vc-impact__dir i { flex: 0 0 auto; font-size: 14px; } .vc-impact strong { display: block; margin-bottom: 10px; color: var(--text); font-family: 'Space Grotesk', sans-serif; font-size: clamp(1.3rem, 1.9vw, 1.6rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.15; } .vc-impact p { margin: 0; color: var(--text-3); font-size: 14.5px; line-height: 1.6; } .vc-note { margin: 26px 0 0; color: var(--text-4); font-size: 14px; } /* ===== Unlock + locked slots ============================================ */ .vc-unlock { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, auto); gap: 28px 44px; align-items: center; margin: 0 0; padding: 30px 32px; border: 1px solid var(--accent-line); background: linear-gradient(120deg, var(--tint), transparent 88%); } .vc-unlock__copy strong { display: block; margin-bottom: 7px; color: var(--text); font-family: 'Space Grotesk', sans-serif; font-size: 19px; font-weight: 500; letter-spacing: -.03em; } .vc-unlock__copy p { max-width: 58ch; margin: 0; color: var(--text-3); font-size: 14.5px; line-height: 1.6; } .vc-unlock__form { display: grid; gap: 8px; } .vc-unlock__row { display: flex; gap: 8px; } .vc-unlock label { color: var(--text-4); font-size: 14px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; } .vc-unlock input { width: 190px; padding: 12px 16px; border: 1px solid var(--field-border); border-radius: 999px; background: var(--field-bg); color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 15px; transition: border-color .2s var(--ease); } .vc-unlock input::placeholder { color: var(--text-4); } .vc-unlock input:hover { border-color: var(--accent-line); } .vc-unlock input:focus { border-color: var(--accent-strong); outline: none; } .vc-btn { flex: 0 0 auto; padding: 12px 24px; border: 0; border-radius: 999px; background: var(--btn-bg); color: var(--btn-text); font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color .2s var(--ease), transform .12s var(--ease); } .vc-btn:hover { background: var(--btn-bg-hover); } .vc-btn:active { transform: translateY(1px) scale(.99); } .vc-btn[disabled] { opacity: .55; cursor: progress; } /* When the button is a link, .vc-page a { color: inherit } outranks .vc-btn on specificity and the label inherits the page text colour, which on the dark chapter is the same near-white as the button's own background. This rule outranks it back. A variant that needs a different label colour sets --btn-fg on itself rather than trying to outrank this selector too. */ .vc-page a.vc-btn { color: var(--btn-fg, var(--btn-text)); } .vc-unlock__msg { min-height: 18px; color: var(--danger); font-size: 14px; } .vc-unlock__msg:empty { min-height: 0; } .vc-unlock__blocked { max-width: 34ch; margin: 0; color: var(--text-3); font-size: 14px; line-height: 1.6; } .vc-unlock--done { grid-template-columns: 1fr; border-color: var(--accent-line); } /* Local preview is marked with a dashed edge so it can never be mistaken for what a visitor sees. This state only exists on localhost. */ .vc-unlock--local { border-style: dashed; } .vc-unlock--local .vc-unlock__copy strong::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--accent); vertical-align: middle; } .vc-unlock--done .vc-unlock__form { display: none; } /* Inline locked placeholders */ .vc-locked { margin-top: 44px; } .vc-locked__stub { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; width: 100%; padding: 26px 28px; border: 1px dashed var(--accent-line); border-radius: 0; background: var(--accent-dim); color: var(--text-3); font-family: 'DM Sans', sans-serif; font-size: 14.5px; text-align: left; cursor: pointer; transition: background-color .25s var(--ease), border-color .25s var(--ease); } .vc-locked__stub:hover { border-color: var(--accent); background: var(--tint); } .vc-locked__stub i { flex: 0 0 auto; color: var(--accent); font-size: 15px; } .vc-locked__stub b { color: var(--text); font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 500; letter-spacing: -.02em; } .vc-locked__stub span { color: var(--accent); font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; } .vc-locked[data-state="open"] .vc-locked__stub { display: none; } /* ===== Private content blocks =========================================== */ .vc-locked .vc-h3 { margin-bottom: 14px; } .vc-locked .vc-scroller, .vc-locked .vc-qa, .vc-locked .vc-bench { margin-top: 26px; } .vc-locked .vc-body + .vc-bench { margin-top: 30px; } .vc-table { width: 100%; margin: 0; border-collapse: collapse; font-size: 14.5px; } .vc-table caption { caption-side: top; margin-bottom: 18px; color: var(--text-3); font-size: 14.5px; line-height: 1.6; text-align: left; } .vc-table th, .vc-table td { padding: 15px 20px 15px 0; text-align: left; vertical-align: top; } .vc-table thead th { white-space: nowrap; border-bottom: 1px solid var(--rule); color: var(--text-4); font-size: 14px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; } .vc-table tbody tr + tr td { border-top: 1px solid var(--rule-soft); } .vc-table tbody th { min-width: 170px; border-top: 1px solid var(--rule-soft); color: var(--text); font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 500; letter-spacing: -.02em; } .vc-table tbody tr:first-child th { border-top: 0; } .vc-table td { color: var(--text-3); } .vc-table .vc-num { color: var(--text); font-family: 'Space Grotesk', sans-serif; font-size: 17px; font-weight: 500; letter-spacing: -.02em; white-space: nowrap; } .vc-table .vc-delta { color: var(--accent-strong); font-family: 'Space Grotesk', sans-serif; font-weight: 500; white-space: nowrap; } .vc-table .vc-delta--down { color: var(--delta-down); } .vc-scroller { overflow-x: auto; } .vc-bench { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; } .vc-bench li { display: grid; grid-template-columns: minmax(280px, .82fr) minmax(0, 1.18fr); gap: 34px; align-items: center; padding: 24px; border: 1px solid var(--rule-soft); background: var(--surface-2); } .vc-bench li:nth-child(even) { direction: rtl; } .vc-bench li:nth-child(even) > * { direction: ltr; } .vc-bench strong { display: block; margin-bottom: 12px; color: var(--text); font-family: 'Space Grotesk', sans-serif; font-size: 22px; font-weight: 500; letter-spacing: -.035em; } .vc-bench p { margin: 0 0 10px; color: var(--text-3); font-size: 14.5px; line-height: 1.6; } .vc-bench p:last-child { margin-bottom: 0; } .vc-bench img { width: 100%; border: 1px solid var(--rule-soft); } .vc-qa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 56px; margin: 0; } .vc-qa dt { margin-bottom: 9px; color: var(--text); font-family: 'Space Grotesk', sans-serif; font-size: 17px; font-weight: 500; letter-spacing: -.03em; } .vc-qa dd { margin: 0 0 6px; color: var(--text-3); font-size: 15px; line-height: 1.62; } /* ===== Empty state (design system tab) ================================== */ .vc-empty { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr); gap: 60px; align-items: center; padding: 88px 0 100px; } .vc-empty__visual { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .vc-empty__visual i { display: block; height: 58px; border: 1px solid var(--rule-soft); background: var(--tint-2); } .vc-empty__visual i:nth-child(3n+1) { background: var(--tint); } .vc-empty__visual i:nth-child(4) { grid-column: span 2; } .vc-empty__visual i:nth-child(8) { grid-column: span 2; } .vc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 30px 0 0; padding: 0; list-style: none; } .vc-chips li { padding: 8px 16px; border: 1px solid var(--rule); border-radius: 999px; color: var(--text-3); font-size: 14px; } /* ===== Project dossiers (other work tab) ================================ */ .vc-dossier { padding: 78px 0; border-top: 1px solid var(--rule-soft); } .vc-dossier:first-of-type { border-top: 0; padding-top: 56px; } .vc-dossier__head { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: baseline; margin-bottom: 26px; } .vc-dossier__head h3 { margin: 0; font-family: 'Space Grotesk', sans-serif; font-size: clamp(1.6rem, 3vw, 2.5rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.05; } .vc-dossier__head span { color: var(--text-4); font-size: 14px; } .vc-dossier__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 48px; } .vc-dossier__grid > div > h4 { margin: 0 0 10px; color: var(--accent); font-size: 14px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; } .vc-dossier__grid > div > p { max-width: 46ch; margin: 0; color: var(--text-3); font-size: 15px; line-height: 1.65; } .vc-dossier__grid ul { max-width: 46ch; margin: 0; padding: 0; list-style: none; } .vc-dossier__grid li { position: relative; padding-left: 18px; color: var(--text-3); font-size: 15px; line-height: 1.6; } .vc-dossier__grid li + li { margin-top: 10px; } .vc-dossier__grid li::before { content: ''; position: absolute; top: .62em; left: 0; width: 8px; height: 1px; background: var(--accent); } .vc-dossier .vc-locked { margin-top: 36px; } .vc-media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 38px; } .vc-media figure { margin: 0; } .vc-media img, .vc-media video { width: 100%; border: 1px solid var(--rule-soft); } .vc-media figcaption { margin-top: 10px; color: var(--text-4); font-size: 14px; } /* One per row, for wide screen recordings that are unreadable at half width. */ .vc-media__label { margin: 38px 0 14px; } .vc-dossier .vc-compare__grid--mobile { margin-left: 0; } .vc-dossier .vc-compare__grid { margin-bottom: 8px; align-items: stretch; } /* The two screenshots in a pair differ slightly in height, which left the captions on different lines. Equal-height figures put them back in step. */ .vc-dossier .vc-figure { display: flex; flex-direction: column; } .vc-dossier .vc-figure figcaption { margin-top: auto; padding-top: 18px; } /* Subgrid lets the image row and the caption row line up across a pair, so both the frames and the captions start on the same line even when one caption wraps further than the other. The flex rule above stays as the fallback, which bottom-aligns instead. */ @supports (grid-template-rows: subgrid) { .vc-dossier .vc-compare__grid { grid-template-rows: auto auto; } .vc-dossier .vc-figure { display: grid; grid-row: span 2; grid-template-rows: subgrid; } .vc-dossier .vc-figure figcaption { margin-top: 0; } } .vc-media__label + .vc-media { margin-top: 0; } /* Phone screenshots: held to a phone-ish width instead of filling the column. */ .vc-media--stack { grid-template-columns: 1fr; gap: 42px; } .vc-media--stack .vc-eyebrow { margin-bottom: 10px; } .vc-media--stack video { display: block; height: auto; background: var(--surface-2); } .vc-todo { display: inline-block; padding: 10px 14px; border: 1px dashed var(--rule); background: var(--tint-2); color: var(--text-4); font-size: 14px; } .vc-slot { display: grid; place-items: center; aspect-ratio: 16 / 10; padding: 20px; border: 1px dashed var(--rule); background: var(--tint-2); color: var(--text-4); font-size: 14px; text-align: center; } /* ===== Footer =========================================================== */ .vc-footer { background: var(--ink); color: #7e828e; } .vc-footer__inner { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; justify-content: space-between; width: var(--content); margin: 0 auto; padding: 44px 0 56px; font-size: 14px; } .vc-footer a { color: var(--paper); font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 500; letter-spacing: -.02em; } .vc-footer a:hover { color: var(--accent-strong); } /* ===== Responsive ======================================================= */ @media (max-width: 1024px) { :root { --content: min(1180px, calc(100% - 44px)); } .vc-hero__inner { grid-template-columns: 1fr; gap: 42px; } .vc-hero__mark { justify-self: start; width: min(100%, 300px); } .vc-split { grid-template-columns: 1fr; gap: 44px; } .vc-facts { grid-template-columns: repeat(2, 1fr); } .vc-facts > div:nth-child(2n) { border-right: 0; } .vc-facts > div:nth-child(3), .vc-facts > div:nth-child(4) { border-top: 1px solid var(--rule-soft); } .vc-flow, .vc-timeline, .vc-impact { grid-template-columns: repeat(2, 1fr); } .vc-dossier__grid { grid-template-columns: 1fr; gap: 26px; } .vc-bench li { grid-template-columns: 1fr; gap: 22px; } .vc-bench li:nth-child(even) { direction: ltr; } .vc-empty { grid-template-columns: 1fr; gap: 44px; } } @media (max-width: 767px) { :root { --content: calc(100% - 40px); } .vc-section { padding: 68px 0; } .vc-hero { padding: 116px 0 44px; } .vc-tabbar { top: 64px; } .vc-tabbar__inner { padding: 10px 0; } .vc-tab { padding: 9px 16px; font-size: 14px; } .vc-facts { grid-template-columns: 1fr; } .vc-facts > div { padding: 20px 0; border-right: 0; border-top: 1px solid var(--rule-soft); } .vc-facts > div + div { padding-left: 0; } .vc-facts > div:first-child { border-top: 0; } .vc-findings { grid-template-columns: 1fr; gap: 30px; } .vc-disclosure__body { grid-template-columns: 1fr; gap: 24px; } .vc-statement { padding: 76px 0; } .vc-flow, .vc-timeline, .vc-impact { grid-template-columns: 1fr; gap: 0; } .vc-flow li, .vc-timeline li { padding-right: 0; } .vc-impact li { margin-top: -1px; } .vc-compare__grid { grid-template-columns: 1fr; gap: 42px; } .vc-changes li { grid-template-columns: 1fr; gap: 8px; padding: 18px 0; } .vc-unlock { grid-template-columns: 1fr; padding: 26px 22px; } .vc-unlock__row { flex-wrap: wrap; } .vc-unlock input { width: 100%; } .vc-btn { width: 100%; } .vc-qa { grid-template-columns: 1fr; gap: 26px; } .vc-media { grid-template-columns: 1fr; } .vc-dossier { padding: 56px 0; } .vc-browser__screen { height: 340px; } .vc-empty__visual i { height: 46px; } } /* ===== Reduced motion =================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } .vc-panel { animation: none; } .vc-flow li::before { transform: none; transition: none; } .vc-page *, .vc-page *::before, .vc-page *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }