/* ========================================================================== VELLA pitch deck — deck.vella.care Slides are authored at a fixed 1920x1080 and scaled to fit the viewport, so type and layout stay in exact proportion at any screen size and in print. ========================================================================== */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/assets/fonts/montserrat-latin-var.woff2') format('woff2'); 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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* Type scale, in slide pixels (1920x1080 canvas). */ --t-mega: 128px; --t-hero: 82px; --t-title: 64px; --t-sub: 44px; --t-body: 34px; --t-small: 28px; --t-kicker: 24px; --pad-x: 100px; --pad-top: 96px; --pad-bottom: 84px; --gap-title: 48px; --gap-item: 28px; --cream: #F6F2EC; --paper: #FCFAF7; --ink: #23272A; --ink-soft: #4A5250; --euc: #4C6B58; --euc-pale: #E4EBE4; --sand: #C4AC90; --line: #E0D9CE; --faint: #6E685C; /* darkened from #8A8377 for AA contrast */ --dark-line: #3C4143; --dark-body: #C9C6C0; --dark-muted: #9EA5A2; --accent-light: #A9C0B0; --stage: #1A1D1F; --disp: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif; } * { box-sizing: border-box; } body { margin: 0; background: var(--stage); color: var(--ink); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; } a { color: var(--euc); } :focus-visible { outline: 3px solid var(--euc); outline-offset: 3px; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- Deck shell --------------------------------------------------- */ .deck { display: grid; gap: 28px; padding: 84px 24px 120px; justify-items: center; /* The deck itself must never be wider than the viewport. */ max-width: 100%; overflow-x: clip; } /* Each slide is authored at a fixed 1920x1080 and scaled down to fit. `zoom` (rather than a transform) scales the *layout box* too, so the page never gains a horizontal scrollbar and slides never overlap. */ .slide { position: relative; width: 1920px; height: 1080px; flex: none; overflow: hidden; background: var(--cream); border-radius: 6px; zoom: var(--deck-scale, 1); box-shadow: 0 18px 60px rgba(0, 0, 0, 0.4); } .slide__num { position: absolute; right: 44px; bottom: 36px; font-family: var(--disp); font-size: 22px; letter-spacing: 0.18em; color: var(--faint); z-index: 2; } .slide--dark .slide__num { color: var(--dark-muted); } /* ---------- Slide backgrounds -------------------------------------------- */ .slide--cream { background: var(--cream); } .slide--paper { background: var(--paper); } .slide--dark { background: var(--ink); color: #F1EEE9; } .slide--pale { background: var(--euc-pale); } /* ---------- Slide layout primitives -------------------------------------- */ /* min-height:0 + explicit height keeps .pad inside the 1080px slide even when it is a grid child — otherwise it grows to its content and the slide's own overflow:hidden silently clips the bottom. */ .pad { padding: var(--pad-top) var(--pad-x) var(--pad-bottom); height: 100%; min-height: 0; display: flex; flex-direction: column; gap: var(--gap-title); } /* The main content block of a slide absorbs leftover height, so blocks sit against the slide edges rather than bunching at the top. */ .pad > .cols-3, .pad > .cols-4, .pad > .panel-grid, .pad > .phase-grid, .pad > .miles, .pad > .quad-wrap, .pad > .reg-table, .pad > .tam { flex: 1 1 auto; min-height: 0; } /* No height here: .split is applied to the .slide element itself on several slides, and `height:100%` would resolve against and blow past the fixed 1080px slide box. .slide already sets the height. */ .split { display: grid; min-height: 0; } .split > * { min-height: 0; } .split--title { grid-template-columns: 1.08fr 0.92fr; } .split--device { grid-template-columns: 0.95fr 1.05fr; } .split--beach { grid-template-columns: 0.9fr 1.1fr; } .split--ask { grid-template-columns: 1.1fr 0.9fr; } .split--moat { grid-template-columns: 1.15fr 0.85fr; gap: 80px; align-items: center; } .split--funds { grid-template-columns: 0.8fr 1.2fr; gap: 80px; align-items: center; } .kicker { font-family: var(--disp); font-size: var(--t-kicker); letter-spacing: 0.26em; text-transform: uppercase; color: var(--euc); margin: 0 0 24px; } .kicker--light { color: var(--accent-light); } .kicker--deep { color: #3F5C4C; } .s-title { font-family: var(--disp); font-weight: 400; font-size: var(--t-title); line-height: 1.14; margin: 0; color: var(--ink); } .slide--dark .s-title { color: var(--paper); } .slide--pale .s-title { color: #1F2623; } .s-hero { font-family: var(--disp); font-weight: 400; font-size: var(--t-hero); line-height: 1.08; letter-spacing: -0.015em; margin: 0 0 36px; color: var(--ink); } .slide--dark .s-hero { color: var(--paper); } .s-body { font-size: var(--t-body); line-height: 1.5; color: var(--ink-soft); margin: 0; } .slide--dark .s-body { color: var(--dark-body); } .s-small { font-size: var(--t-small); line-height: 1.5; color: var(--ink-soft); margin: 0; } .s-note { font-size: var(--t-small); color: var(--faint); margin: 0; } .slide--dark .s-note { color: var(--dark-muted); } .wordmark { font-family: var(--disp); font-size: 52px; letter-spacing: 0.36em; color: var(--ink); } .slide--dark .wordmark { color: var(--paper); font-size: 44px; } .media { overflow: hidden; background: #EFE9E0; } .media img { width: 100%; height: 100%; object-fit: cover; display: block; } .slide--dark .media { background: #2E3335; } /* .flow is only ever applied to .pad, which already sets height/display. Re-declaring height here made the box 100% of an already-padded parent. */ .flow { justify-content: space-between; } .grow { flex: 1; } /* ---------- Slide-specific ------------------------------------------------ */ .stat-row { display: flex; gap: 56px; border-top: 1px solid var(--line); padding-top: 36px; } .stat-row p:first-child { font-size: var(--t-small); color: var(--faint); margin: 0 0 8px; } .stat-row p:last-child { font-family: var(--disp); font-size: 40px; margin: 0; color: var(--ink); } .cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; flex: 1; } .cols-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; flex: 1; } .rule-col { border-top: 3px solid var(--ink); padding-top: 32px; } .rule-col h3 { font-family: var(--disp); font-weight: 400; font-size: 56px; margin: 0 0 20px; color: var(--ink); } .panel-grid { display: grid; gap: 1px; background: var(--dark-line); border: 1px solid var(--dark-line); border-radius: 20px; overflow: hidden; flex: 1; } .panel-grid--3 { grid-template-columns: repeat(3, 1fr); } .panel { background: var(--ink); padding: 48px 44px; display: flex; flex-direction: column; } .panel h3 { font-family: var(--disp); font-weight: 400; font-size: 64px; line-height: 1.1; margin: 0; color: var(--paper); min-height: 150px; } .panel p { font-size: var(--t-small); line-height: 1.5; color: var(--dark-body); margin: 0; } .spec-2 { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; } .spec-2 > div { background: var(--paper); padding: 30px 34px; } .spec-2 dt { font-size: var(--t-small); color: var(--faint); margin: 0 0 10px; } .spec-2 dd { margin: 0; font-family: var(--disp); font-size: 38px; color: var(--ink); } .card { background: var(--cream); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; } .card__media { height: 240px; flex: none; overflow: hidden; background: #EFE9E0; } .card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .card__body { padding: 36px 34px 40px; } .card__kicker { font-family: var(--disp); font-size: 24px; letter-spacing: 0.2em; color: var(--faint); margin: 0 0 16px; } .card__body h3 { font-family: var(--disp); font-weight: 500; font-size: 38px; line-height: 1.2; margin: 0 0 16px; color: var(--ink); } .seg { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--cream); } .seg__media { height: 280px; flex: none; overflow: hidden; background: #EFE9E0; } .seg__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .seg__body { padding: 30px 28px 34px; } .seg__body h3 { font-family: var(--disp); font-weight: 500; font-size: 34px; margin: 0 0 14px; color: var(--ink); } .seg__body p { font-size: var(--t-small); line-height: 1.45; color: var(--ink-soft); margin: 0; } .moat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap-item); } .moat-list li { display: grid; grid-template-columns: 64px 1fr; gap: 28px; align-items: start; } .moat-list .n { font-family: var(--disp); font-size: 36px; color: var(--euc); } .moat-list .t { font-size: var(--t-body); line-height: 1.45; color: #243029; } .tam { flex: 1; display: grid; gap: 26px; align-content: center; } .tam__row { display: grid; grid-template-columns: 220px 1fr; gap: 36px; align-items: center; } .tam__row > p { font-family: var(--disp); font-size: 34px; margin: 0; color: var(--ink); } .tam__bar { border-radius: 14px; padding: 30px 40px; display: flex; justify-content: space-between; align-items: center; gap: 32px; } .tam__bar .v { font-family: var(--disp); font-size: 56px; } .tam__bar .l { font-size: var(--t-small); white-space: nowrap; } .tam__bar--tam { background: var(--ink); color: var(--paper); } .tam__bar--tam .l { color: var(--dark-body); } .tam__bar--sam { background: var(--euc); color: var(--paper); width: 62%; } .tam__bar--sam .l { color: #DCE6DC; } .tam__bar--som { background: var(--sand); color: #2A241C; width: 26%; } .bullets { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; } .bullets li { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: start; border-top: 1px solid var(--line); padding-top: 24px; font-size: var(--t-body); line-height: 1.4; color: var(--ink); } .bullets .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--euc); margin-top: 14px; } .phase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; flex: 1; } .phase { background: var(--paper); padding: 52px 44px; display: flex; flex-direction: column; gap: 24px; } .phase__label { font-family: var(--disp); font-size: 26px; letter-spacing: 0.18em; color: var(--faint); margin: 0; } .phase h3 { font-family: var(--disp); font-weight: 500; font-size: 42px; line-height: 1.2; margin: 0; color: var(--ink); } .phase__goal { font-size: var(--t-small); color: var(--euc); margin: auto 0 0; } .reg-table { width: 100%; border-collapse: collapse; flex: 1; } .reg-table th { text-align: left; font-size: var(--t-small); font-weight: 600; color: var(--dark-muted); padding: 0 24px 20px 0; border-bottom: 1px solid var(--dark-line); } .reg-table td { font-size: var(--t-small); line-height: 1.5; color: var(--dark-body); padding: 30px 24px; border-bottom: 1px solid #2E3335; } .reg-table tr:last-child td { border-bottom: 0; } .reg-table .stage { font-family: var(--disp); font-size: 32px; color: var(--paper); padding-left: 0; } .reg-table .gate { color: var(--accent-light); padding-right: 0; } .quad-wrap { flex: 1; display: grid; grid-template-columns: 64px 1fr; gap: 24px; } .quad-axis { display: flex; align-items: center; justify-content: center; } .quad-axis p { font-family: var(--disp); font-size: var(--t-small); letter-spacing: 0.2em; color: var(--faint); margin: 0; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; } .quad { display: grid; grid-template-rows: 1fr 1fr; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; } .quad__cell { background: var(--cream); padding: 40px 44px; display: flex; flex-direction: column; justify-content: space-between; } .quad__cell h3 { font-family: var(--disp); font-weight: 400; font-size: 40px; margin: 0 0 12px; color: var(--ink); } .quad__cell p { font-size: var(--t-small); line-height: 1.45; color: var(--ink-soft); margin: 0; } .quad__cell .tag { font-size: var(--t-small); color: var(--faint); margin: 0; } .quad__cell--us { background: var(--euc); color: var(--paper); } .quad__cell--us h3 { color: var(--paper); } .quad__cell--us p { color: #E4EBE4; } .quad__cell--us .tag { color: #DCE6DC; } .funds { display: grid; gap: 30px; } .funds__row { display: grid; grid-template-columns: 1fr 140px; gap: 32px; align-items: end; } .funds__row p:first-child { font-size: var(--t-small); color: #243029; margin: 0 0 14px; } .funds__bar { height: 52px; border-radius: 10px; } /* Proportional to the $300K top line, so the bars read as a real breakdown. */ .funds__bar--1 { width: 100%; background: var(--ink); } .funds__bar--2 { width: 50%; background: var(--euc); } .funds__bar--3 { width: 40%; background: var(--sand); } .funds__bar--4 { width: 30%; background: #8FA79A; } .funds__bar--5 { width: 30%; background: #C7CFC5; } .funds__amt { font-family: var(--disp); font-size: 42px; margin: 0; text-align: right; color: #1F2623; } .mega { font-family: var(--disp); font-size: var(--t-mega); line-height: 1; margin: 0 0 20px; color: #1F2623; } .miles { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; align-items: stretch; } .mile { border-top: 4px solid var(--ink); padding-top: 32px; display: flex; flex-direction: column; gap: 18px; } .mile--last { border-top-color: var(--euc); } .mile__q { font-family: var(--disp); font-size: 30px; letter-spacing: 0.16em; color: var(--faint); margin: 0; } .mile--last .mile__q { color: var(--euc); } .mile h3 { font-family: var(--disp); font-weight: 500; font-size: 40px; line-height: 1.18; margin: 0; color: var(--ink); } .ask-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; border-top: 1px solid var(--dark-line); padding-top: 36px; } .ask-foot p:first-child { font-size: var(--t-small); color: var(--dark-muted); margin: 0 0 10px; } .ask-foot p:last-child { font-size: var(--t-small); line-height: 1.45; color: var(--paper); margin: 0; } /* ---------- Toolbar ------------------------------------------------------- */ .toolbar { position: fixed; top: 0; left: 0; right: 0; z-index: 60; display: flex; align-items: center; gap: 16px; padding: 14px 22px; background: rgba(26, 29, 31, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid #2E3335; color: #F1EEE9; } .toolbar__brand { font-family: var(--disp); font-size: 17px; letter-spacing: 0.3em; color: #F1EEE9; text-decoration: none; } .toolbar__sep { color: #5A6163; } .toolbar__meta { font-size: 14px; color: #9EA5A2; } .toolbar__spacer { margin-left: auto; } .tbtn { font-family: inherit; font-size: 14px; padding: 9px 16px; min-height: 40px; border-radius: 999px; border: 1px solid #3C4143; background: transparent; color: #F1EEE9; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; } .tbtn:hover { background: #2E3335; } .tbtn--primary { background: var(--euc); border-color: var(--euc); } .tbtn--primary:hover { background: #3B5445; } /* ---------- Print / PDF --------------------------------------------------- */ @page { size: 1920px 1080px; margin: 0; } @media print { html, body { background: #fff; margin: 0; padding: 0; width: 1920px; } .toolbar, .deck__hint { display: none !important; } .deck { display: block; padding: 0; gap: 0; margin: 0; } /* The on-screen scale factor must not leak into pagination. */ :root { --deck-scale: 1 !important; } .slide { /* Print at true size — the @page box matches exactly. Height is pinned so a slide can never spill a sliver onto a following page. */ transform: none !important; margin: 0 !important; width: 1920px !important; height: 1080px !important; max-height: 1080px !important; overflow: hidden !important; border-radius: 0; box-shadow: none; break-after: page; page-break-after: always; break-inside: avoid; page-break-inside: avoid; } .slide:last-child { break-after: auto; page-break-after: auto; } /* Backgrounds and images must survive the print pipeline. */ * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } } .deck__hint { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); font-size: 13px; color: #7C8385; background: rgba(26, 29, 31, 0.9); padding: 8px 16px; border-radius: 999px; z-index: 55; } @media (max-width: 700px) { .toolbar__meta, .toolbar__sep { display: none; } .deck__hint { display: none; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* ========================================================================== Utilities — replace inline style attributes, which the site's CSP blocks. ========================================================================== */ .mw-18 { max-width: 18em; } .mw-22 { max-width: 22em; } .mw-24 { max-width: 24em; } .mw-26 { max-width: 26em; } .mw-28 { max-width: 28em; } .mb-28 { margin-bottom: 28px; } .mb-32 { margin-bottom: 32px; } .mb-44 { margin-bottom: 44px; } .gap-36 { gap: 36px; } .gap-40 { gap: 40px; } .pad--inset { padding: var(--pad-top) var(--pad-x) var(--pad-bottom); } .pad--right72 { padding-right: 72px; } .pad--center { justify-content: center; } .pad--beach { justify-content: center; gap: 40px; padding-left: 80px; } .op-52-42 img { object-position: 52% 42%; } .op-50-45 img { object-position: 50% 45%; } .op-50-50 img { object-position: 50% 50%; } .op-50-40 img { object-position: 50% 40%; } .media--contain img { object-fit: contain; padding: 24px; } .media--rounded { border-radius: 20px; height: 100%; } .on-dark { color: var(--paper); } .on-pale { color: #243029; } .axis-x { text-align: right; font-family: var(--disp); letter-spacing: 0.2em; } .reg-table .col-stage { width: 26%; } .reg-table .col-gate { width: 22%; padding-right: 0; } /* ========================================================================== Layout corrections — blocks must fill the 1080px slide, not bunch at top. ========================================================================== */ /* Cards stretch to their grid row and push body text to a common baseline. */ .cols-3 > .card, .cols-4 > .seg { height: 100%; } .card__body, .seg__body { flex: 1; display: flex; flex-direction: column; } /* Headings wrap to different line counts ("Perineal wounds" is two lines, "MASD" is one). A fixed heading block starts every body paragraph on the same baseline without pushing text to the panel floor. */ .panel h3 { min-height: 0; height: 150px; display: flex; align-items: flex-start; margin: 0 0 8px; } /* Panels are tall; centre the pair vertically rather than stranding the paragraph against the top with empty space beneath. */ .panel { justify-content: center; } /* Milestone and phase columns fill their row. */ .miles > .mile, .phase-grid > .phase { height: 100%; } /* The moat cutaway should fill its column like every other slide image. */ .split--moat > .media { align-self: stretch; } /* Market-size bars spread across the available height instead of clustering. */ .tam { align-content: space-evenly; } /* Title and ask slides: the middle block takes the slack, so the wordmark sits at the top and the stat row at the bottom, as designed. */ .pad.flow > :nth-child(2) { flex: 1; display: flex; flex-direction: column; justify-content: center; } /* Status-quo columns: heading at the rule, body directly under it, and the column itself stretches so the row reads as one band. */ .cols-3 > .rule-col { display: flex; flex-direction: column; } /* The three technical illustrations (angles, nozzle, cutaway) only exist at ~300px. Letterboxing them at native size on the panel colour keeps them crisp instead of blowing them up to fill a 560px card. */ .card__media--art { display: flex; align-items: center; justify-content: center; } .card__media--art img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; } /* The cutaway illustration is only 351px wide; centre it at native size on the panel rather than doubling it into a blurry fill. */ .media--contain { display: flex; align-items: center; justify-content: center; } .media--contain img { width: auto; height: auto; /* 1.6x is the most this 351px illustration takes before it visibly softens; smaller than that and it floats lost in the column. */ max-width: min(100%, 560px); max-height: 100%; object-fit: contain; padding: 0; }