/* * Inly — Sales deck theme * Mirrors the Inly brand guide (apps/brand) and inly.se: * - Paper canvas (#fbfaf6) with warm ink (#1a1916) * - Nyght Serif for display headlines, Geist for body, Aeonik for product marks * - Em dashes for asides, sentence case, hairline borders, generous whitespace * - English hero tagline, Swedish body — per the reference sales deck * * Layered on top of reveal.js at a fixed 1920 × 1080 canvas — no Reveal theme. */ /* ── Fonts ─────────────────────────────────────────────────────────────── */ @font-face { font-family: "Aeonik"; src: url("../assets/fonts/Aeonik-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Aeonik"; src: url("../assets/fonts/Aeonik-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Aeonik"; src: url("../assets/fonts/Aeonik-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Aeonik"; src: url("../assets/fonts/Aeonik-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Nyght Serif"; src: url("../assets/fonts/NyghtSerif-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Nyght Serif"; src: url("../assets/fonts/NyghtSerif-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Nyght Serif"; src: url("../assets/fonts/NyghtSerif-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Nyght Serif"; src: url("../assets/fonts/NyghtSerif-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Geist"; src: url("../assets/fonts/Geist[wght].woff2") format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Geist Mono"; src: url("../assets/fonts/GeistMono[wght].woff2") format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; } /* ── Tokens (mirrors src/app/globals.css + brand guide) ─────────────────── */ :root { --paper: #fbfaf6; --canvas: #ffffff; --ink: #1a1916; --body-muted: #5c4d3c; --body-soft: #847463; --body-subtle: #a89a8a; --btn-dark: #272520; --card-fill: #faf6f0; --card-border: #f2ede5; --accent: #185edf; --hairline: rgba(26, 25, 22, 0.08); --hairline-strong: rgba(26, 25, 22, 0.14); --serif: "Nyght Serif", ui-serif, Georgia, serif; --sans: "Geist", -apple-system, system-ui, sans-serif; --heading: "Aeonik", -apple-system, system-ui, sans-serif; --mono: "Geist Mono", ui-monospace, monospace; } /* ── Reveal.js base overrides ──────────────────────────────────────────── */ html, body, .reveal-viewport, .reveal { background: var(--paper); color: var(--ink); transition: background 240ms cubic-bezier(0.16, 1, 0.3, 1); } /* Per-slide viewport background — JS toggles theme-* on on slide change. */ html.theme-white, html.theme-white body, html.theme-white .reveal-viewport, html.theme-white .reveal { background: var(--canvas); } html.theme-dark, html.theme-dark body, html.theme-dark .reveal-viewport, html.theme-dark .reveal { background: var(--ink); } .reveal { font-family: var(--sans); font-weight: 400; font-size: 22px; line-height: 1.6; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; } .reveal .slides { text-align: left; } .reveal .slides > section { height: 100%; box-sizing: border-box; padding: 0; overflow: hidden; } /* Standard text slides get an inner frame; bleed slides (hero, contact) manage their own padding. */ .slide { height: 100%; box-sizing: border-box; padding: 168px 112px 200px; display: flex; flex-direction: column; position: relative; } .reveal h1, .reveal h2, .reveal h3, .reveal h4 { color: var(--ink); text-transform: none; font-weight: 400; margin: 0; } .reveal p, .reveal li { color: var(--ink); } .reveal a { color: inherit; text-decoration: none; } /* ── Per-slide chrome (classes live directly on the ) ─────────────── */ img.wordmark-top { position: absolute; top: 56px; left: 112px; height: 30px; width: auto; z-index: 5; } /* ── Type primitives ───────────────────────────────────────────────────── */ .display { font-family: var(--serif); font-weight: 400; font-size: 108px; line-height: 1.02; letter-spacing: -0.025em; margin: 0; text-wrap: balance; } .headline { font-family: var(--serif); font-weight: 400; font-size: 76px; line-height: 1.02; letter-spacing: -0.025em; margin: 0; text-wrap: balance; } .note { font-family: var(--sans); font-size: 19px; line-height: 1.55; letter-spacing: -0.01em; color: var(--body-muted); margin: 0; max-width: 42ch; } .muted { color: var(--body-muted); } .subtle { color: var(--body-subtle); } /* Heading + supporting note paired at the top of a content slide */ .slide-head { display: grid; grid-template-columns: 1fr minmax(360px, 440px); gap: 72px; align-items: start; } .slide-head .headline { align-self: start; } .slide-head .note { padding-top: 14px; } /* Product lockup ("Core.") inline */ .product-mark { display: inline-flex; align-items: center; } .product-mark img { height: 26px; width: auto; } /* ── 01 · Hero ─────────────────────────────────────────────────────────── */ .slide-hero { height: 100%; display: grid; grid-template-rows: auto 1fr auto 486px; background: var(--paper); } .hero-wordmark { padding: 56px 112px 0; } .hero-wordmark img { height: 30px; width: auto; } .hero-title { align-self: center; text-align: center; padding: 0 80px; } .hero-title .display { font-size: 80px; line-height: 1.02; letter-spacing: -0.025em; white-space: nowrap; } .hero-lockup { display: flex; align-items: center; justify-content: space-between; padding: 0 112px 36px; gap: 48px; } .hero-lockup .product-mark img { height: 30px; } .hero-lockup .subtitle { font-family: var(--sans); font-size: 19px; line-height: 1.55; color: var(--body-muted); letter-spacing: -0.01em; margin: 0; text-align: right; } .hero-shot { position: relative; overflow: hidden; background: var(--paper); } .hero-shot .hero-landscape { position: absolute; top: 0; left: 40px; width: calc(100% - 80px); height: 100%; object-fit: cover; display: block; } .hero-shot .hero-product { position: absolute; left: 120px; top: 72px; width: calc(100% - 240px); height: auto; display: block; } /* ── 02 · Problem (4 cards) ────────────────────────────────────────────── */ .slide.slide-white { background: var(--canvas); } .card-grid { display: grid; grid-template-columns: repeat(4, 1fr); align-items: stretch; justify-items: center; gap: 28px; margin-top: 112px; margin-bottom: auto; flex: 0 0 auto; } .brand-card { display: flex; flex-direction: column; width: 100%; max-width: 340px; aspect-ratio: 1 / 1; padding: 28px; background: var(--paper); border: 1px solid var(--hairline); border-radius: 4px; overflow: hidden; } .brand-card .figure { flex: 1; display: flex; align-items: center; justify-content: center; padding: 0; min-height: 0; } .brand-card .figure img, .brand-card .figure svg { width: 100%; max-width: 200px; max-height: 100%; height: auto; } .brand-card h3 { font-family: var(--sans); font-size: 18px; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; margin: auto 0 10px; padding-top: 24px; line-height: 1.25; } .brand-card p { font-size: 15px; line-height: 1.6; letter-spacing: -0.01em; color: var(--body-muted); margin: 0; } /* ── 03 · Solution (convergence illustration) ──────────────────────────── */ .converge { margin: 48px 0 auto; display: flex; align-items: center; justify-content: center; pointer-events: none; } .converge img { display: block; width: 100%; height: auto; } .parts-rows { margin: 56px 0; display: flex; flex-direction: column; flex: 1; justify-content: center; } .part-row { display: grid; grid-template-columns: 260px minmax(280px, 360px) 1fr; column-gap: 64px; align-items: center; padding: 28px 0; border-bottom: 1px solid var(--hairline-strong); } .part-row:last-child { border-bottom: none; } .part-row-mark { display: flex; align-items: center; } .part-row-mark img { display: block; height: 26px; width: auto; } .part-row h3 { font-family: var(--sans); font-size: 17px; font-weight: 500; letter-spacing: -0.005em; line-height: 1.3; margin: 0; } .part-row p { font-size: 17px; line-height: 1.55; letter-spacing: -0.01em; color: var(--body-muted); margin: 0; max-width: 54ch; text-wrap: balance; } .tier-card .part-label { display: inline-block; font-family: var(--heading); font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--ink); margin: 0 0 16px; padding-bottom: 6px; border-bottom: 1px solid var(--hairline-strong); } /* ── 02 · Problem closer (full-width divider + horizontal foot row) ─────── */ .slide-foot { position: absolute; left: 112px; right: 112px; bottom: 112px; margin: 0; padding: 0; display: flex; align-items: center; justify-content: space-between; gap: 56px; } .slide-foot-mark { height: 24px; width: auto; flex: 0 0 auto; } .slide-foot.no-mark .slide-foot-mark { display: none; } .slide-closer { font-family: var(--sans); font-size: 15px; line-height: 1.5; letter-spacing: -0.01em; color: var(--ink); margin: 0; max-width: 90ch; text-align: right; flex: 1; } .slide-closer strong { font-weight: 500; color: var(--ink); } .slide-closer .muted-soft { color: var(--body-muted); } .slide-fineprint { position: absolute; left: 112px; right: 112px; bottom: 56px; margin: 0; padding-top: 20px; display: grid; grid-template-columns: auto auto 1fr; column-gap: 240px; align-items: center; font-family: var(--sans); font-size: 13px; line-height: 1.5; letter-spacing: -0.005em; color: var(--body-subtle); } .slide-fineprint::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--hairline); } .slide-fineprint > * { margin: 0; } /* .reveal p sets color: var(--ink), which on dark .slide-contact slides renders the fineprint dark-on-dark and invisible. Inherit so the container's color (light on dark, muted on cream) actually applies. */ .slide-fineprint > p { color: inherit; } .slide-fineprint .fineprint-center { text-align: left; } .slide-fineprint .fineprint-right { text-align: right; } .slide-fineprint a { color: inherit; text-decoration: none; } .slide-fineprint a:hover { color: var(--body-muted); } /* Dark variant for contact / fineprint slides — light text on dark canvas, hairline tuned to the dark background. Flows as a grid row inside .slide-contact (which uses grid layout) instead of absolute-positioning, so it sits below .contact-foot instead of overlapping it. */ .slide-contact .slide-fineprint { position: relative; left: auto; right: auto; bottom: auto; margin-top: 40px; color: rgba(251, 250, 246, 0.62); } .slide-contact .slide-fineprint::before { background: rgba(251, 250, 246, 0.22); } .slide-contact .slide-fineprint a:hover { color: var(--paper); } /* ── 05 · Why Core (philosophy) ────────────────────────────────────────── */ .philosophy-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 96px; align-items: center; margin-top: 64px; flex: 1; } .philosophy-figure { display: flex; align-items: center; justify-content: center; } .philosophy-figure img { display: block; width: 100%; max-width: 720px; height: auto; } .philosophy-list { display: flex; flex-direction: column; } .philosophy-list article { margin: 0; } .philosophy-list article + article { margin-top: 36px; padding-top: 36px; border-top: 1px solid var(--hairline-strong); } .reveal .philosophy-list h3 { font-family: var(--serif); font-size: 32px; font-weight: 400; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); margin: 0 0 14px; } .philosophy-list p { font-family: var(--sans); font-size: 18px; line-height: 1.6; letter-spacing: -0.01em; color: var(--body-muted); margin: 0; max-width: 56ch; } /* ── 08 · Tier grid ────────────────────────────────────────────────────── */ .tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 56px; } .tier-card { background: var(--canvas); border: 1px solid var(--hairline); border-radius: 4px; padding: 36px 36px 32px; display: flex; flex-direction: column; } .tier-card p { font-size: 17px; line-height: 1.55; letter-spacing: -0.01em; color: var(--body-muted); margin: 0; } .tier-card .tier-price { font-family: var(--sans); font-size: 15px; font-weight: 500; letter-spacing: -0.005em; color: var(--ink); margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--hairline); } /* ── 11 · Det finstilta (dark, mirrors slide 10 contact chrome) ────────── */ .slide-contact .fineprint-body { align-self: center; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 120px; align-items: start; } .reveal .slide-contact .fineprint-title { font-family: var(--serif); font-weight: 400; font-size: 48px; line-height: 1.05; letter-spacing: -0.02em; color: var(--paper); margin: 0; text-wrap: balance; max-width: 14ch; } .slide-contact .fineprint-list { display: flex; flex-direction: column; gap: 28px; } .slide-contact .fineprint-list article { margin: 0; } .reveal .slide-contact .fineprint-list h3 { font-family: var(--sans); font-size: 18px; font-weight: 500; letter-spacing: -0.01em; color: var(--paper); margin: 0 0 6px; line-height: 1.2; } .reveal .slide-contact .fineprint-list p { font-family: var(--sans); font-size: 16px; line-height: 1.55; letter-spacing: -0.01em; color: rgba(251, 250, 246, 0.62); margin: 0; max-width: 56ch; } /* ── Slide-contact meta row (© Inly 2026 inly.se ─── All rights reserved) ─ Mirrors the 2-element flex layout of .slide-foot on slides 2-9 (mark left, closer text right) — copyright + domain bundle sit on the left, "All rights reserved" on the right. In-flow (not absolute) so it doesn't overlap .contact-foot above; 56px margin-bottom lifts its bottom edge to ~112px from the slide edge, matching slide-foot's bottom: 112px on other slides. Hairline separates it from .contact-foot. */ .slide-contact .slide-foot { position: static; margin-top: 40px; margin-bottom: 56px; padding-top: 20px; border-top: 1px solid rgba(251, 250, 246, 0.14); display: flex; align-items: center; justify-content: space-between; gap: 24px; font-family: var(--sans); font-size: 14px; letter-spacing: -0.005em; color: rgba(251, 250, 246, 0.62); } .slide-contact .slide-foot-meta { display: inline-flex; align-items: center; gap: 16px; margin: 0; color: inherit; } .slide-contact .slide-foot a { color: inherit; transition: color 240ms cubic-bezier(0.16, 1, 0.3, 1); } .slide-contact .slide-foot a:hover { color: var(--paper); } /* ── 05 · Process row (mirrors web Solutions tile on a canvas-white slide: * bordered paper-bg frame with bare illustration inside, h3 + p below. * Single scrollable row within the slide content area, with edge * gradients hinting that more tiles continue offscreen.) ───────────── */ /* Slide 6 trims outer padding so the wider scroller has vertical room. */ section[data-slide="06"] .slide { padding-top: 120px; padding-bottom: 80px; } /* Center the card row vertically between the slide-head and the slide-foot — equal margins above and below so the cards feel anchored in the middle. */ section[data-slide="06"] .process-scroll { margin: 46px 0; } section[data-slide="06"] .slide-foot { margin-top: 0; } /* Row sizing is exposed as CSS variables so the gradient overlay can match the bordered card area exactly — without spilling onto the text below or the slide-foot/fineprint underneath. */ .process-scroll { /* 4 tiles × 380 + 3 × 28 gap = 1604 px — fills most of the slide content area (1696), leaving the 5th tile to peek in ~64 px on the right so it's visually obvious the row keeps going. The peek is faded by the gradient. */ --tile-width: 380px; /* 5:6 aspect — slightly shorter than the SVG's native 4:5 so the bordered card feels less tall while still leaving the illustration almost edge-to-edge horizontally. */ --mock-height: calc(var(--tile-width) * 6 / 5); position: relative; flex: 0 0 auto; margin: auto 0; width: 100%; } .process-scroll::before, .process-scroll::after { content: ""; position: absolute; /* Match the row's padding-top so the gradient lines up with the top of the bordered card; height matches the mock so text labels below stay clean. */ top: 4px; height: var(--mock-height); width: 28px; z-index: 2; pointer-events: none; opacity: 1; transition: opacity 200ms cubic-bezier(0.16, 1, 0.3, 1); } .process-scroll::before { left: 0; background: linear-gradient(to right, var(--canvas), rgba(255, 255, 255, 0)); } .process-scroll::after { right: 0; background: linear-gradient(to left, var(--canvas), rgba(255, 255, 255, 0)); } /* Gradients only appear when there is content offscreen in that direction. */ .process-scroll.is-start::before { opacity: 0; } .process-scroll.is-end::after { opacity: 0; } .process-row { display: flex; align-items: stretch; gap: 28px; width: 100%; padding: 4px 0; overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; } .process-row::-webkit-scrollbar { display: none; } .process-tile { /* 4 tiles × 380 + 3 × 28 gap = 1604 px — fits inside the slide content area (1696) and gives each description room to live on a single line. */ flex: 0 0 var(--tile-width); scroll-snap-align: start; display: flex; flex-direction: column; } /* Bordered paper-bg frame with white space around the illustration — mirrors the inly.se Solutions tile where the mockup is scaled with a container-query inset. */ .process-tile .mock { position: relative; width: 100%; aspect-ratio: 5 / 6; border-radius: 4px; border: 1px solid var(--hairline); background: var(--paper); overflow: hidden; padding: 28px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; } .process-tile .mock img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; } .process-tile h3 { font-family: var(--sans); font-size: 15px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); line-height: 1.3; /* Tight to the card; minimal gap to the description so they read as a pair. */ margin: 16px 0 4px; } .process-tile p { font-family: var(--sans); font-size: 14px; line-height: 1.5; letter-spacing: -0.01em; color: var(--body-muted); margin: 0; white-space: nowrap; } /* ── 06 · Customers & results ──────────────────────────────────────────── */ .results-stack { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0; } .stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 22px; } .stat-item { display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 40px 32px 32px; background: var(--paper); border: 1px solid var(--hairline); border-radius: 4px; min-width: 0; } .stat-item .figure-num { font-family: var(--serif); font-weight: 400; font-size: 84px; line-height: 1; letter-spacing: -0.025em; margin: 0; color: var(--ink); } .stat-item .rule { display: block; width: 40px; height: 1px; background: var(--ink); margin: 24px 0 20px; opacity: 0.7; } .stat-item p { font-family: var(--sans); font-size: 15px; line-height: 1.5; letter-spacing: -0.01em; color: var(--body-muted); margin: 0 0 32px; text-wrap: balance; } .stat-item .cust { margin-top: auto; height: 40px; display: flex; align-items: center; } .stat-item .cust img { width: auto; filter: brightness(0); opacity: 0.82; max-width: 120px; } .stat-item .cust img.l-sds { height: 40px; } .stat-item .cust img.l-7a { height: 40px; } .stat-item .cust img.l-visita { height: 20px; } .stat-item .cust img.l-gotain { height: 14px; } .testimonial { margin: 40px 0 0; padding: 32px 56px 28px; background: var(--paper); border: 1px solid var(--hairline); border-radius: 4px; text-align: center; display: flex; flex-direction: column; align-items: center; } .testimonial::before { content: "\201C"; display: block; font-family: var(--serif); font-weight: 400; font-size: 60px; line-height: 0.5; letter-spacing: 0; color: var(--body-subtle); margin: 0 0 6px; } .testimonial blockquote { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.3; letter-spacing: -0.02em; color: var(--ink); margin: 0 auto; max-width: 50ch; text-wrap: balance; } .testimonial figcaption { margin-top: 18px; font-family: var(--sans); font-size: 15px; letter-spacing: -0.01em; color: var(--body-muted); } .testimonial figcaption strong { font-weight: 500; color: var(--ink); } /* ── 07 · Platform + Delivery ──────────────────────────────────────────── */ /* Slide 8 has no foot mark — reclaim that vertical space for the platform image, but keep enough bottom clearance to mirror the headline-to-image margin. */ section[data-slide="08"] .slide { padding-bottom: 132px; } .platform-grid { display: grid; grid-template-columns: 0.95fr 1fr; gap: 64px; align-items: stretch; margin-top: 48px; flex: 1; min-height: 0; } .platform-image { margin: 0; overflow: hidden; border-radius: 4px; background: var(--card-fill); box-shadow: inset 0 0 0 1px rgba(26, 25, 22, 0.04); display: flex; align-items: flex-start; justify-content: center; min-height: 0; height: 100%; } .platform-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 30% top; } .platform-copy { display: flex; flex-direction: column; justify-content: flex-start; gap: 32px; padding: 4px 0; } .platform-block { padding: 0; } .platform-block .block-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 14px; } .platform-block .product-mark { display: flex; } .platform-block .product-mark img { height: 24px; } .platform-block--delivery .product-mark img { height: 22px; } .platform-block .block-meta { font-family: var(--sans); font-style: italic; font-size: 15px; font-weight: 400; letter-spacing: -0.005em; color: var(--body-muted); } .platform-block p { font-size: 16px; line-height: 1.55; letter-spacing: -0.01em; color: var(--body-muted); margin: 0; max-width: 44ch; } .platform-block .platform-eyebrow { font-family: var(--sans); font-style: normal; font-size: 16px; font-weight: 500; line-height: 1.4; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 10px; } .platform-block--delivery { padding-top: 28px; border-top: 1px solid var(--hairline-strong); } /* Compliance row — mirrors web's ComplianceRow (src/components/compliance-row.tsx) */ .compliance-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin: 4px 0 0; padding-top: 28px; border-top: 1px solid var(--hairline-strong); } .compliance-list--inline { gap: 20px 28px; margin-top: auto; padding-top: 0; border-top: none; } .compliance-item dt { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 8px; } .compliance-seal { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 34px; color: rgba(26, 25, 22, 0.8); } .compliance-seal svg { width: 100%; height: 100%; } .compliance-name { font-family: var(--sans); font-size: 16px; font-weight: 500; letter-spacing: -0.005em; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; } .compliance-verified { display: inline-flex; width: 18px; height: 18px; color: var(--ink); } .compliance-verified svg { width: 100%; height: 100%; } .compliance-pill { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: -0.005em; color: var(--body-muted); border: 1px solid var(--hairline-strong); border-radius: 4px; padding: 3px 8px; } .compliance-item dd { margin: 0; font-family: var(--sans); font-size: 14px; line-height: 1.5; letter-spacing: -0.01em; color: var(--body-muted); max-width: 38ch; text-wrap: pretty; } .timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--hairline-strong); position: relative; } .timeline .step { position: relative; padding-top: 6px; } .timeline .step::before { content: ""; position: absolute; top: -47px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--ink); outline: 5px solid var(--paper); } .timeline .step h4 { font-family: var(--sans); font-size: 21px; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 10px; } .timeline .step p { font-size: 17px; line-height: 1.55; letter-spacing: -0.01em; color: var(--body-muted); margin: 0; max-width: 34ch; } /* ── 07 · Contact (dark) ───────────────────────────────────────────────── */ .slide-contact { height: 100%; box-sizing: border-box; background: var(--ink); color: var(--paper); padding: 56px 112px; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; position: relative; } .slide-contact .wordmark img { height: 30px; width: auto; } .slide-contact .display { color: var(--paper); font-size: 68px; line-height: 1.04; letter-spacing: -0.025em; max-width: none; } .contact-body { align-self: center; display: flex; flex-direction: column; gap: 112px; min-height: 0; } .contact-body:not(:has(.contact-process)) .display { align-self: center; } .contact-process { display: flex; flex-direction: column; } .slide-contact .contact-process-label { font-family: var(--sans); font-style: italic; font-size: 16px; font-weight: 400; letter-spacing: -0.005em; color: rgba(251, 250, 246, 0.7); margin: 0 0 28px; } .contact-process .timeline { margin-top: 0; padding-top: 44px; border-top: 1px solid rgba(251, 250, 246, 0.22); } .timeline--dark .step::before { background: var(--paper); outline-color: var(--ink); } .timeline--dark .step h4 { color: var(--paper); } .timeline--dark .step p { color: rgba(251, 250, 246, 0.62); } .contact-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; } .contact-foot .symbol img { height: 56px; width: auto; } .contact-cols { display: grid; grid-template-columns: auto auto auto; gap: 72px; } .contact-cols h4 { font-family: var(--sans); font-size: 16px; font-weight: 500; letter-spacing: -0.01em; color: var(--paper); margin: 0 0 16px; } .contact-cols p { font-family: var(--sans); font-size: 16px; line-height: 1.6; letter-spacing: -0.01em; color: rgba(251, 250, 246, 0.62); margin: 0; } .contact-cols a:hover { color: var(--paper); } /* ── Reveal chrome ─────────────────────────────────────────────────────── */ .reveal .progress { background: var(--hairline); height: 2px; color: var(--ink); } .reveal .progress span { background: var(--ink); } .reveal .controls { color: var(--ink); top: 56px; right: 112px; bottom: auto; left: auto; } .reveal .controls.on-dark { color: var(--paper); } /* Persistent CTA button (mirrors web header — ContactCTA, default variant). Lives in .slides so it scales with the deck. z-index sits above reveal's section z-index (10/11); pointer-events restored from .slides. */ .reveal .deck-cta { position: absolute; top: 56px; right: 264px; z-index: 20; pointer-events: auto; display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 4px; background: var(--ink); color: var(--paper); font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; opacity: 1 !important; visibility: visible !important; transition: background 240ms cubic-bezier(0.16, 1, 0.3, 1), color 240ms cubic-bezier(0.16, 1, 0.3, 1); } .reveal .deck-cta:hover { background: var(--btn-dark); } html.theme-dark .reveal .deck-cta { background: var(--paper); color: var(--ink); } html.theme-dark .reveal .deck-cta:hover { background: rgba(251, 250, 246, 0.88); } /* Presentation toggle — sits between the CTA pill and the nav arrows. Icon-only button styled to match the nav arrows (30×30, no chrome, 2px-equivalent stroke). Eye / eye-slash communicates "CTA visible" vs "CTA hidden". Toggling it adds .presentation-mode to , which hides the CTA and acts as a hook for future content variants. */ .reveal .deck-toggle { position: absolute; top: 56px; right: 204px; z-index: 20; pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; background: transparent; color: var(--ink); border: 0; cursor: pointer; font: inherit; opacity: 0.7; transition: color 240ms cubic-bezier(0.16, 1, 0.3, 1), opacity 240ms cubic-bezier(0.16, 1, 0.3, 1); } .reveal .deck-toggle:hover, .reveal .deck-toggle[aria-pressed="true"] { opacity: 1; } .reveal .deck-toggle .deck-toggle-icon { width: 100%; height: 100%; display: block; } .reveal .deck-toggle .deck-toggle-icon--eye-slash { display: none; } .reveal .deck-toggle[aria-pressed="true"] .deck-toggle-icon--eye { display: none; } .reveal .deck-toggle[aria-pressed="true"] .deck-toggle-icon--eye-slash { display: block; } html.theme-dark .reveal .deck-toggle { color: var(--paper); } html.presentation-mode .reveal .deck-cta { display: none; } .reveal .controls .navigate-left, .reveal .controls .navigate-right, .reveal .controls .navigate-up, .reveal .controls .navigate-down { top: 0 !important; bottom: auto !important; width: 30px; height: 30px; transform: none; } .reveal .controls .navigate-right { right: 0 !important; } .reveal .controls .navigate-left { right: 46px !important; } /* Replace reveal's chevron pseudo-elements with inline sharp angle SVGs (injected via JS so fill="currentColor" inherits theme color) */ .reveal .controls .controls-arrow::before, .reveal .controls .controls-arrow::after { display: none; } .reveal .controls .controls-arrow { width: 30px; height: 30px; transform: none !important; } .reveal .controls .controls-arrow svg { width: 100%; height: 100%; display: block; } /* Brand-consistent interactions — easing matches the Core symbol intro ("out-expo-soft": cubic-bezier(0.16, 1, 0.3, 1)). Subtle directional nudge on hover instead of reveal's default 0.2s ease. */ .reveal .controls button { transition: color 240ms cubic-bezier(0.16, 1, 0.3, 1), opacity 240ms cubic-bezier(0.16, 1, 0.3, 1), transform 360ms cubic-bezier(0.16, 1, 0.3, 1) !important; } /* Keep the back/forward arrows visible on the first/last slides, just faded — so the chrome row stays balanced with the eye toggle next to it. Reveal's base rule on .controls button hides disabled buttons (opacity 0, visibility hidden); we override only for the horizontal navigators. */ .reveal .controls .navigate-left, .reveal .controls .navigate-right { visibility: visible; opacity: 0.2; transform: none; cursor: default; } .reveal .controls .navigate-left.enabled, .reveal .controls .navigate-right.enabled { opacity: 0.7; cursor: pointer; } .reveal .controls .navigate-left.enabled:hover, .reveal .controls .navigate-right.enabled:hover { opacity: 1; } .reveal .controls .navigate-left.enabled:hover { transform: translateX(-4px) !important; } .reveal .controls .navigate-right.enabled:hover { transform: translateX(4px) !important; } .reveal .controls .navigate-left.enabled:active { transform: translateX(-2px) !important; } .reveal .controls .navigate-right.enabled:active { transform: translateX(2px) !important; } /* Soft drift in place of reveal's jumpy 2s × 50 bounce highlight. */ .reveal .controls .navigate-left.highlight { animation: bounce-left 1600ms cubic-bezier(0.16, 1, 0.3, 1) 2 both; } .reveal .controls .navigate-right.highlight { animation: bounce-right 1600ms cubic-bezier(0.16, 1, 0.3, 1) 2 both; } @keyframes bounce-left { 0%, 100% { transform: translateX(0); } 45% { transform: translateX(-5px); } } @keyframes bounce-right { 0%, 100% { transform: translateX(0); } 45% { transform: translateX(5px); } }