/* Runa — manifesto page styles. Edit freely; there is no build step. */ /* Brand typefaces */ @font-face { font-family: "KMR Waldenburg"; src: url("fonts/kmrwaldenburg-regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "KMR Waldenburg"; src: url("fonts/kmrwaldenburg-italic.otf") format("opentype"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "KMR Waldenburg"; src: url("fonts/kmrwaldenburg-medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "KMR Waldenburg"; src: url("fonts/kmrwaldenburg-bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "ABC Marist"; src: url("fonts/ABCMarist-Book.woff2") format("woff2"); font-weight: 350; font-style: normal; font-display: swap; } @font-face { font-family: "ABC Marist"; src: url("fonts/ABCMarist-BookItalic.woff2") format("woff2"); font-weight: 350; font-style: italic; font-display: swap; } @font-face { font-family: "ABC Marist"; src: url("fonts/ABCMarist-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "ABC Marist"; src: url("fonts/ABCMarist-RegularItalic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "ABC Marist"; src: url("fonts/ABCMarist-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "ABC Marist"; src: url("fonts/ABCMarist-Semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "ABC Marist"; src: url("fonts/ABCMarist-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } :root { --blue: #2d4998; --white: #ffffff; } * { box-sizing: border-box; } body { margin: 0; background: var(--blue); color: var(--white); font-family: "KMR Waldenburg", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; overflow-x: hidden; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .manifesto { max-width: 504px; /* 456px column + side padding */ margin: 0 auto; padding: 194px 24px 194px; } .manifesto-text p { margin: 0; font-size: 16px; line-height: 1.5; letter-spacing: -0.005em; } .manifesto-text p + p { margin-top: 24px; } .signature { display: block; width: 138px; height: auto; margin-top: 64px; } .contact-line { display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 60px 0 0; font-size: 14px; line-height: 16px; letter-spacing: -0.005em; } .contact-logo { display: block; width: 46px; height: 24px; } @media (max-width: 720px) { .manifesto { padding-top: 112px; padding-bottom: 112px; } .contact-line { flex-wrap: nowrap; font-size: 11px; } .contact-sep { display: none; } } /* --------------------------------------------------------------------------- Load-in sequence (Figma storyboard, frame 53:2) Hand + timestamp hold → first scroll plays the hand, blurs out, brings the question, then the logo, then the page rises. Scrolling up at the top blurs and fades back to the held hand. Only runs when JS adds .js-intro to ; reduced-motion and no-JS visitors get the finished page immediately. --------------------------------------------------------------------------- */ html.intro-lock, html.intro-lock body { overflow: hidden; height: 100%; } .intro { display: none; } html.js-intro .intro { display: block; position: fixed; inset: 0; z-index: 100; background: var(--blue); } html.js-intro .intro.is-done { display: none; } /* Scene: video frame + timestamp, blurred and faded out together */ .intro-scene { position: absolute; inset: 0; transition: filter 1.2s ease, opacity 1.2s ease; } .intro-video-frame { position: absolute; left: 50%; top: 50%; width: min(1168px, calc(100vw - 48px)); aspect-ratio: 1168 / 730; background: var(--blue); transform: translate(-50%, calc(-50% + 30px)); transition: transform 3.8s cubic-bezier(0.33, 1, 0.68, 1); -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent), linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent), linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent); -webkit-mask-composite: source-in; mask-composite: intersect; } @media (min-width: 721px) and (max-width: 1024px) { .intro-video-frame { width: min(1402px, calc((100vw - 48px) * 1.2)); } } @media (max-width: 720px) { .intro-video-frame { width: min(2336px, calc((100vw - 48px) * 2)); } } .intro-video { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 1; transition: opacity 2s ease; } .intro.is-video-fade .intro-video { opacity: 0; } .intro-timestamp { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; font-family: "ABC Marist", Georgia, serif; font-weight: 350; font-size: clamp(24px, 2.78vw, 40px); letter-spacing: -0.01em; color: var(--white); white-space: nowrap; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* Drift: video settles from 30px below centre to dead centre */ .intro.is-started .intro-video-frame { transform: translate(-50%, -50%); } /* Blur out: scene softens and sinks into the blue */ .intro.is-blur .intro-scene { filter: blur(26px); opacity: 0.5; } .intro.is-clear .intro-scene { opacity: 0; } /* The question: fades in while gliding up to centre */ .intro-caption { position: absolute; left: 50%; top: calc(50% - 11px); width: min(520px, calc(100vw - 48px)); margin: 0; transform: translate(-50%, 28.8vh); font-size: 14px; line-height: 1.5; letter-spacing: -0.005em; text-align: center; opacity: 0; transition: opacity 0.9s ease, transform 1.8s cubic-bezier(0.65, 0, 0.35, 1); } .intro.is-blur .intro-caption { opacity: 1; transform: translate(-50%, 0); } .intro.is-logo .intro-caption { opacity: 0; transition: opacity 0.6s ease; } /* The logo moment */ .intro-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 139px; height: 72px; opacity: 0; transition: opacity 0.7s ease 0.3s; } .intro.is-logo .intro-logo { opacity: 1; } .intro.is-fade .intro-logo { opacity: 0; transition: opacity 0.6s ease; } /* Page content rises into place beneath the overlay */ html.js-intro main { transform: translateY(500px); transition: transform 1.5s cubic-bezier(0.22, 1, 0.36, 1); } html.js-intro .manifesto { opacity: 0.5; transition: opacity 1.5s ease; } html.js-intro.rise main { transform: translateY(0); } html.js-intro.rise .manifesto { opacity: 1; } html.js-intro .manifesto-text p { opacity: 0; transform: translateY(24px); transition: opacity 1.1s ease, transform 1.1s cubic-bezier(0.22, 1, 0.36, 1); } html.js-intro.rise .manifesto-text p { opacity: 1; transform: translateY(0); } html.js-intro.rise .manifesto-text p:nth-child(1) { transition-delay: 0s; } html.js-intro.rise .manifesto-text p:nth-child(2) { transition-delay: 0.1s; } html.js-intro.rise .manifesto-text p:nth-child(3) { transition-delay: 0.2s; } html.js-intro.rise .manifesto-text p:nth-child(4) { transition-delay: 0.3s; } html.js-intro.rise .manifesto-text p:nth-child(5) { transition-delay: 0.4s; } html.js-intro.rise .manifesto-text p:nth-child(6) { transition-delay: 0.5s; } html.js-intro.rise .manifesto-text p:nth-child(7) { transition-delay: 0.6s; } html.js-intro.rise .manifesto-text p:nth-child(8) { transition-delay: 0.7s; } html.js-intro.rise .manifesto-text p:nth-child(9) { transition-delay: 0.8s; } /* Return: scrolling up at the top blurs + fades the overlay (in its held-hand state) back in over the page — the same feeling as landing, no reverse play. .no-anim snaps the reset into place while the overlay is invisible so the storyboard never flickers through. (.intro-scene already transitions filter, so the blur eases out.) */ html.js-intro .intro.is-return { opacity: 0; transition: opacity 0.9s ease; } html.js-intro .intro.is-return .intro-scene { filter: blur(26px); } html.js-intro .intro.is-return.is-return-in { opacity: 1; } html.js-intro .intro.is-return.is-return-in .intro-scene { filter: none; } html.js-intro .intro.no-anim, html.js-intro .intro.no-anim * { transition: none !important; } /* Scroll reveal: the signature and closing line fade in as they enter view. Hidden state only applies when the intro is armed (JS on, motion OK), so no-JS and reduced-motion visitors always see them. */ html.js-intro .reveal { opacity: 0; transform: translateY(24px); transition: opacity 1.1s ease, transform 1.1s cubic-bezier(0.22, 1, 0.36, 1); } html.js-intro .contact-line.reveal { transition-delay: 0.2s; } html.js-intro .reveal.is-visible { opacity: 1; transform: translateY(0); }