/* Faithful replica of centripetal.vc (Easyweb) design Palette and metrics extracted from the live site's CSS. */ :root { --main-text-color: #ffffff; --secondary-text-color: #0a0a0a; --main-background-color: #5b6495; --secondary-background-color: #ebebeb; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; padding: 0; font-family: 'Inter', sans-serif; font-weight: 300; font-size: calc(18px + 2 * ((100vw - 320px) / 1280)); line-height: 1.5; color: #000; background-color: #fff; overflow-x: hidden; } @media screen and (min-width: 1600px) { body { font-size: 20px; } } @media screen and (max-width: 320px) { body { font-size: 18px; } } img { border: 0; } a { color: var(--secondary-text-color); text-decoration: none; } h1, h2, h3 { font-family: 'DM Sans', sans-serif; line-height: 1.3; letter-spacing: -0.02em; } figure { margin: 0; } address { font-style: normal; } /* ============ Header ============ */ header { position: fixed; top: 0; width: 100%; max-width: 100vw; z-index: 99; padding: 44px 15px 0; transition: padding 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease; } /* Scrolled state: slim white bar, smaller dark logo */ header.scrolled { padding: 12px 15px; background-color: rgba(255, 255, 255, 0.96); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.07); backdrop-filter: blur(8px); } header.scrolled .logo { width: 100px; } header.scrolled .logo img { filter: brightness(0); } .header-inner { display: flex; justify-content: center; align-items: center; } .logo { width: 170px; display: flex; align-items: center; transition: all 0.3s linear; } .logo img { transition: filter 0.3s ease; } .logo img { width: 100%; height: auto; display: block; } /* ============ Hero ============ */ .hero { height: calc(100vh - 40px); margin: 20px; position: relative; overflow: hidden; border-radius: 14px; background-color: #000; /* shown behind the video while it loads */ display: flex; flex-direction: column; align-items: center; justify-content: center; flex-wrap: wrap; transition: margin 0.8s cubic-bezier(0.65, 0, 0.35, 1), border-radius 0.8s cubic-bezier(0.65, 0, 0.35, 1), height 0.8s cubic-bezier(0.65, 0, 0.35, 1); } /* Intro: hero starts as a full-bleed black cover; removing .intro from lets the white frame eat its way in to the normal look */ html.intro .hero { margin: 0; border-radius: 0; height: 100vh; height: 100svh; } @media screen and (min-width: 1600px) { .hero { height: 840px; } } /* Phones: fill the screen so the white frame is even on all four sides. svh = viewport minus the browser toolbars, so the bottom is never cut off. */ @media screen and (max-width: 640px) { .hero { height: calc(100vh - 40px); height: calc(100svh - 40px); } } .bg-media { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0; } .bg-media video { width: 100%; height: 100%; position: absolute; left: 0; top: 0; object-fit: cover; transition: opacity 0.8s ease; /* Slight oversize so subpixel rounding on phones never exposes a hairline of the black backing along the clipped edges */ transform: scale(1.01); } /* Intro: video hidden (pure black) until the frame reveal */ html.intro .bg-media video { opacity: 0; } .hero-content { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 0 48px 42px; text-align: left; color: var(--main-text-color); } /* Phones: extra bottom room so the text clears the scroll-down arrow */ @media screen and (max-width: 760px) { .hero-content { padding: 0 30px 76px; } } .hero h1 { margin: 10px 0; font-size: calc(34px + 26 * ((100vw - 320px) / 1280)); font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; color: var(--main-text-color); } @media screen and (min-width: 1600px) { .hero h1 { font-size: 60px; } } /* Phones: smaller headline so both lines fit with a comfortable side margin */ @media screen and (max-width: 640px) { .hero h1 { font-size: 26px; font-size: clamp(21px, 6.5vw, 30px); } } .scroll-down-link { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 9; } .scroll-down { display: flex; flex-direction: column; cursor: pointer; } .scroll-down svg { display: block; animation: arrowBob 2.6s ease-in-out infinite; } @media screen and (max-width: 760px) { .scroll-down svg { width: 28px; } } @keyframes arrowBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } } /* ============ Section intro (statement text inside Portfolio) ============ */ .section-intro { width: 100%; max-width: 1380px; margin-top: 30px; } .section-intro .lede { margin: 0; max-width: 900px; font-family: 'DM Sans', sans-serif; font-size: calc(20px + 8 * ((100vw - 320px) / 1280)); line-height: 1.4; font-weight: 500; letter-spacing: -0.01em; color: var(--secondary-text-color); } @media screen and (min-width: 1600px) { .section-intro .lede { font-size: 28px; } } .section-intro .sub { margin: 20px 0 0; max-width: 640px; color: #555; } /* Mobile: size the lede off the viewport so each sentence stays on one line */ @media screen and (max-width: 640px) { .section-intro .lede { font-size: calc((100vw - 52px) / 25); } .section-intro .sub { font-size: 13px; } } /* ============ Logo sections (Portfolio / Exits) ============ */ .logo-section { padding: 100px 40px; background-color: #fff; display: flex; flex-direction: column; align-items: center; } @media screen and (max-width: 1024px) { .logo-section { padding: 80px 30px; } } @media screen and (max-width: 640px) { .logo-section { padding: 60px 25px; } } /* Portfolio: tighter gap down to the Exits stripe */ #portfolio { padding-bottom: 40px; position: relative; overflow: hidden; } /* Thin vertical hairlines behind the portfolio and team (Altor-style structure) */ #portfolio > :not(.bg-lines), .team-section > :not(.bg-lines) { position: relative; z-index: 1; } .bg-lines { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(to right, rgba(15, 23, 42, 0.055) 1px, transparent 1px); background-size: calc(100% / 6) 100%; box-shadow: inset -1px 0 rgba(15, 23, 42, 0.055); } @media screen and (max-width: 640px) { .bg-lines { background-size: calc(100% / 3) 100%; } } .pf-cards { width: 100%; max-width: 1380px; margin-top: 30px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } @media screen and (max-width: 1024px) { .pf-cards { grid-template-columns: repeat(2, 1fr); } } @media screen and (max-width: 520px) { .pf-cards { gap: 10px; } } .pf-card { position: relative; aspect-ratio: 1; display: flex; align-items: flex-end; padding: 24px; border-radius: 14px; overflow: hidden; } /* Hover: the photo zooms gently inside the frame (the frame itself stays put). The image is mirrored onto ::after so it can scale independently. */ .pf-card.has-photo::after { content: ''; position: absolute; inset: 0; background: inherit; z-index: 0; transition: transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1); } .pf-card:hover::after { transform: scale(1.06); } /* Photo cards: company imagery with a dark base for text legibility */ .pf-card.has-photo::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(8, 10, 25, 0.05) 35%, rgba(8, 10, 25, 0.72) 100%); transition: background-color 0.35s ease; } /* Hover: overlay deepens so the text reads clearly over the zoomed photo */ .pf-card.has-photo:hover::before { background-color: rgba(8, 10, 25, 0.35); } .pf-card-text { position: relative; z-index: 2; } .pf-airmee { background: #10122B url('../assets/portfolio/airmee.png') center / cover no-repeat; } .pf-bolt { background: #0D1B2A url('../assets/portfolio/bolt.png') 100% 50% / 108% no-repeat; } .pf-clar { background: #2ac768 url('../assets/portfolio/clar.png') center / cover no-repeat; } .pf-doktorse { background: #141426 url('../assets/portfolio/doktorse.png') center / cover no-repeat; } .pf-einride { background: #7C8B7A url('../assets/portfolio/einride.png') center / cover no-repeat; } .pf-meds { background: #14090A url('../assets/portfolio/meds.png') center / cover no-repeat; } .pf-mindler { background: #F0AFFA url('../assets/portfolio/mindler.png') center / cover no-repeat; } .pf-nextory { background: #2A231C url('../assets/portfolio/nextory.png') center / cover no-repeat; } .pf-novedo { background: #3C332F url('../assets/portfolio/novedo.png') center / cover no-repeat; } .pf-occlutech { background: #10122B url('../assets/portfolio/occlutech.png') center / cover no-repeat; } .pf-voi { background: #10122B url('../assets/portfolio/voi.png') center / cover no-repeat; } .pf-workaround { background: #0D1B2A url('../assets/portfolio/workaround.png') center / cover no-repeat; } .pf-theworks { background: #3A3A3C url('../assets/portfolio/theworks.png') center / cover no-repeat; } .pf-card h3 { margin: 0 0 6px; font-size: calc(20px + 6 * ((100vw - 320px) / 1280)); font-weight: 600; color: #fff; } .pf-card p { margin: 0; font-size: 14px; line-height: 1.45; font-weight: 300; color: rgba(255, 255, 255, 0.82); } /* Mobile: text starts at the top of the card, description flows below; the readability gradient flips to darken the top instead */ @media screen and (max-width: 520px) { .pf-card { padding: 16px; align-items: flex-start; } .pf-card p { font-size: 12px; } .pf-card.has-photo::before { background: linear-gradient(180deg, rgba(8, 10, 25, 0.85) 0%, rgba(8, 10, 25, 0.55) 45%, rgba(8, 10, 25, 0) 85%); } /* Text block spans the whole card so the arrow can anchor to the card's own bottom-left corner without covering the text */ .pf-card-text { position: absolute; inset: 0; padding: 16px; } .pf-card h3::after { position: absolute; left: 16px; bottom: 16px; margin-left: 0; } } /* Statement card in the footer's style — small setup line, then the point in large type. Sits before Doktor.se in the markup (that's the phone/tablet order); on 3-column desktop it swaps to AFTER Doktor.se: grid auto-placement follows `order`, so the statement steps over Doktor.se while every later card moves behind both. */ @media screen and (min-width: 1025px) { .pf-statement { order: 2; } .pf-statement ~ .pf-card:not(.pf-doktorse) { order: 3; } } .pf-statement { background: #000; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; } /* .ps-small inherits the portfolio description style (Inter 300 14px); its height is reserved because the typing starts from empty */ .pf-statement .ps-small { min-height: 1.45em; } @media screen and (max-width: 520px) { .pf-statement .ps-small { min-height: 2.9em; } } .pf-statement .ps-big { margin: 0; font: 500 clamp(24px, 3.2vw, 44px)/1.15 'DM Sans', sans-serif; letter-spacing: -0.02em; color: #fff; /* always exactly two lines — height reserved so the card never jumps */ min-height: 2.3em; } /* "Leaders in" / "their niche" break over two rows at every width; the phrases themselves never wrap mid-word, and the type steps down on narrow phones so both lines always fit their column */ .pf-statement .tt { white-space: nowrap; } @media screen and (max-width: 400px) { .pf-statement .ps-big { font-size: 22px; } } @media screen and (max-width: 350px) { .pf-statement .ps-big { font-size: 19px; } } /* "(local or global)" gets its own row on phones only */ .pf-statement .br-m { display: none; } @media screen and (max-width: 520px) { .pf-statement .br-m { display: inline; } } /* Typing cursor: a blinking block after whichever span is being typed */ .pf-statement .tt.typing::after { content: ''; display: inline-block; width: 0.5em; height: 0.95em; margin-left: 2px; vertical-align: -0.12em; background: currentColor; animation: psCaret 0.8s step-end infinite; } @keyframes psCaret { 50% { opacity: 0; } } /* Hand-drawn pen loops around the headline: one continuous stroke that circles the text twice, revealed by animating the dash offset. Hidden outright until JS starts the drawing — after the typing finishes. */ .pf-statement .circ { position: relative; display: inline-block; } .pf-statement .circ svg { position: absolute; left: -10%; top: -14%; width: 120%; height: 130%; overflow: visible; pointer-events: none; } .pf-statement .circ svg path { fill: none; stroke: #DF7A55; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; visibility: hidden; } .pf-statement .circ.drawn svg path { visibility: visible; transition: stroke-dashoffset 1.4s cubic-bezier(0.4, 0.1, 0.3, 1); stroke-dashoffset: 0; } /* Reduced motion: no typing (JS skips it), loops simply present */ @media (prefers-reduced-motion: reduce) { .pf-statement .circ svg path { visibility: visible; stroke-dashoffset: 0; transition: none; } } /* Hover: small arrow appears beside the company name */ .pf-card h3::after { content: '\2192'; display: inline-block; margin-left: 8px; opacity: 0; transform: translateX(-6px); transition: opacity 0.3s ease, transform 0.3s ease; } .pf-card:hover h3::after { opacity: 1; transform: translateX(0); } /* Exits: framed rounded block like the hero and footer, in a soft gradient of the brand blue-purple */ #exits { position: relative; background: linear-gradient(160deg, #494F7D 0%, #6E77A8 100%); padding: 50px 40px; margin: 20px; border-radius: 14px; overflow: hidden; } #exits h2 { color: #fff; position: absolute; top: 39px; left: 50%; transform: translateX(-50%); width: calc(100% - 80px); max-width: 1380px; } #exits .logo-grid { margin-top: 0; } /* Uniform exit logos: same height, same flat dark-grey tone */ #exits .logo-grid a img { height: 26px; width: auto; max-width: 160px; max-height: none; filter: brightness(0) invert(1); opacity: 0.92; } #exits .logo-grid a img[alt="Bricknode"] { height: 46px; } #exits .logo-grid a img[alt="Tipser"] { height: 44px; } /* Mobile: slightly larger exit logos */ @media screen and (max-width: 760px) { #exits .logo-grid a img { height: 32px; } #exits .logo-grid a img[alt="Bricknode"] { height: 56px; } #exits .logo-grid a img[alt="Tipser"] { height: 53px; } } @media screen and (max-width: 640px) { #exits { padding: 55px 25px 40px; } #exits h2 { top: 18px; transform: translateX(-50%); width: calc(100% - 50px); } /* always two columns — auto-fit collapses to one on narrow phones */ #exits .logo-grid { grid-template-columns: repeat(2, 1fr); } #exits .logo-grid a img { max-width: 100%; } } h2 { margin: 0; width: 100%; max-width: 1380px; font-size: 16px; font-weight: 600; letter-spacing: 0; text-align: left; color: var(--secondary-text-color); } .logo-grid { width: 100%; max-width: 1380px; margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-gap: 20px; } @media screen and (max-width: 760px) { .logo-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } } .logo-grid a { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; padding: 20px; position: relative; overflow: hidden; transition: all 0.4s cubic-bezier(0, 0.6, 0.76, 1); } .logo-grid a img { max-width: 140px; max-height: 50px; display: block; object-fit: contain; filter: grayscale(100%) brightness(120%); transition: transform 0.5s cubic-bezier(0, 0.58, 0.6, 1); transition-delay: 0.1s; } .logo-grid a:hover { transform: scale(1.05); } .logo-grid a:hover img { transform: scale(1.05); transition-delay: 0s; } /* ============ Team / Board ============ */ .team-section { /* slim bottom padding: the footer hugs the caption's LinkedIn link */ padding: 100px 40px 24px; background-color: #fff; display: flex; flex-direction: column; align-items: center; color: var(--secondary-text-color); position: relative; overflow: hidden; } @media screen and (max-width: 1024px) { .team-section { padding: 80px 30px 20px; } } @media screen and (max-width: 640px) { .team-section { padding: 60px 25px 16px; } } /* Editorial section head: eyebrow + big title */ .team-head { width: 100%; max-width: 1380px; margin-bottom: 60px; } .team-head h2 { margin-bottom: 14px; } /* Sized identically to the Portfolio lede so the two statements rhyme */ .team-title { margin: 0; font-family: 'DM Sans', sans-serif; font-size: calc(20px + 8 * ((100vw - 320px) / 1280)); font-weight: 500; line-height: 1.4; letter-spacing: -0.01em; color: var(--secondary-text-color); } @media screen and (min-width: 1600px) { .team-title { font-size: 28px; } } @media screen and (max-width: 640px) { .team-title { font-size: calc((100vw - 52px) / 25); } } @media screen and (max-width: 760px) { .team-head { margin-bottom: 40px; } } /* Team mosaic: 4x2 grid where the left 2x2 block is one big featured face; the other four fill the right half. JS rotates people into the big tile. Cards styled like the portfolio cards. */ .team-grid { width: 100%; max-width: 1380px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; position: relative; /* anchors the flying photo clones */ } /* Desktop only: a footer-style contact bar as a fifth column on the grid's right edge — it also slims the whole photo mosaic down. Tablets and phones keep the plain 4-column mosaic without it. */ .team-bar { display: none; } @media screen and (min-width: 1025px) { .team-grid { grid-template-columns: repeat(4, 1fr) 0.9fr; } .team-bar { grid-column: 5; grid-row: 1 / 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 36px; background: #000; color: #fff; border-radius: 14px; padding: 30px 18px; text-align: center; } .tb-heading { margin: 0; font: 500 clamp(21px, 2.2vw, 30px)/1.2 'DM Sans', sans-serif; letter-spacing: -0.02em; } /* Same voice as the portfolio card descriptions */ .tb-mail { max-width: 100%; font: 300 14px/1.45 'Inter', sans-serif; color: rgba(255, 255, 255, 0.82); text-decoration: none; transition: color 0.2s; } .tb-mail:hover { color: #fff; } } /* Flying photo clones: temporary elements that slide/grow from one tile to the next during a carousel step */ .tm-fly { position: absolute; z-index: 5; border-radius: 14px; overflow: hidden; pointer-events: none; transition: transform 0.65s cubic-bezier(0.65, 0, 0.35, 1), width 0.65s cubic-bezier(0.65, 0, 0.35, 1), height 0.65s cubic-bezier(0.65, 0, 0.35, 1); } .tm-fly img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter 0.65s ease; } /* while a photo flies: the real photo, name and scrim hide instantly — the flying clone covers the tile exactly and carries all three with it */ .tm-card.tm-flying img { opacity: 0; transition: none; } .tm-card.tm-flying .tm-text { opacity: 0; transition: none; } .tm-card.tm-flying::after { opacity: 0; transition: none; } /* an empty tile disappears completely while its photo is airborne — no backdrop, no gray box, just the white page behind the moving photos */ .tm-card.tm-flying { background: transparent; } /* the instant after landing: the real photo, name and scrim replace the clone with no transition, so the handover is invisible (no blink) */ .tm-card.tm-settle img { transition: none; } .tm-card.tm-settle .tm-text { transition: none; } .tm-card.tm-settle::after { transition: none; } /* flying clones carry the same scrim as the tiles at constant strength — the dark bottom travels with each photo (into the big tile too), so nothing flips on at the end of a rotation */ .tm-fly .tm-fly-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 58%, rgba(0, 0, 0, 0.5) 100%); } .tm-card { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; display: block; cursor: pointer; /* the portraits' own empty studio backdrop sits behind every tile, so the tone is identical before and after a photo loads — no pop */ background: #dedede url('../assets/team/backdrop.webp') center / cover no-repeat; } .tm-big { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; cursor: default; /* not clickable — the caption's LinkedIn link is */ } /* the featured tile shows only the photo; its text is mirrored into the caption below the grid */ .tm-big .tm-text { display: none; } .tm-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter 0.4s ease, transform 0.4s ease, opacity 0.35s ease; } /* Colour-on-hover only on devices with a real cursor — on touch screens the hover state sticks after a tap, leaving small tiles in colour */ @media (hover: hover) { .tm-card:not(.tm-big):hover img { filter: grayscale(0); transform: scale(1.04); } } /* The featured person shows in colour; the small tiles stay black & white */ .tm-big img { filter: grayscale(0); } /* soft scrim on every tile (the big one included): keeps names readable over light clothing and gives all photos one constant bottom tone */ .tm-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 58%, rgba(0, 0, 0, 0.5) 100%); pointer-events: none; transition: opacity 0.25s ease; } .tm-card .tm-text { z-index: 2; } .tm-text { position: absolute; left: 18px; right: 18px; bottom: 14px; z-index: 1; color: #fff; transition: opacity 0.8s ease; } .tm-text h3 { margin: 0; font-size: 19px; font-weight: 600; } .tm-text p { margin: 2px 0 0; font-size: 13px; font-weight: 300; color: rgba(255, 255, 255, 0.82); } /* Featured person's name, title and LinkedIn: below the whole grid, on the big picture's side */ .team-caption { width: 100%; max-width: 1380px; margin-top: 18px; opacity: 1; transition: opacity 0.8s ease; } .tc-name-row { display: flex; align-items: center; gap: 12px; } /* Small pause/play dial after the name, the 6s countdown filling around it */ .tc-ctrl { flex: none; position: relative; width: 24px; height: 24px; padding: 0; border: 0; background: none; border-radius: 50%; color: var(--secondary-text-color); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .tc-ring { position: absolute; inset: 0; transform: rotate(-90deg); } .tc-ring circle { fill: none; stroke-width: 2.6; } .tc-ring-track { stroke: rgba(10, 10, 10, 0.12); } .tc-ring-fill { stroke: currentColor; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; /* driven by JS as the countdown fills */ } .tc-icon { display: block; width: 7px; height: 8px; } .tc-ctrl .tc-i-play { display: none; } .tc-ctrl.paused .tc-i-pause { display: none; } .tc-ctrl.paused .tc-i-play { display: block; margin-left: 2px; } /* optical centering */ .team-caption.tm-fading { opacity: 0; transition-duration: 0.45s; } .team-caption h3 { margin: 0; font-size: 24px; font-weight: 600; color: var(--secondary-text-color); } .team-caption p { margin: 2px 0 0; font-size: 14px; color: #555; } /* Short bio for the featured person (hidden for members without one) */ .team-caption .tc-bio { margin: 10px 0 0; max-width: 560px; font-weight: 300; line-height: 1.6; } /* Links inside a bio flow with the text (unlike the LinkedIn link below) */ .team-caption .tc-bio a { display: inline; margin: 0; font-size: inherit; color: inherit; text-decoration: underline; text-underline-offset: 2px; transition: color 0.2s ease; } .team-caption .tc-bio a:hover { color: var(--secondary-text-color); } .team-caption a { display: inline-block; margin-top: 8px; font-size: 12px; color: #999; transition: color 0.2s ease; } .team-caption a:hover { color: var(--secondary-text-color); } .team-caption a svg { margin-left: 4px; } /* crossfade while JS swaps a person into the big tile */ .tm-card.tm-fading img, .tm-card.tm-fading .tm-text { opacity: 0; } /* Phones: same mosaic as desktop, just tighter. The small tiles are too tiny for text there — the rotating big tile shows everyone's name. No tile text also means no need for the dark scrim. */ @media screen and (max-width: 760px) { .team-grid { gap: 8px; } .tm-card:not(.tm-big) .tm-text { display: none; } .tm-card::after { content: none; } .tm-fly .tm-fly-scrim { display: none; } .tm-fly .tm-text { display: none; } /* tiles show no names on phones */ .team-caption { margin-top: 12px; } .team-caption h3 { font-size: 17px; } .team-caption p { font-size: 12px; } } /* Inline SVG arrow renders identically on all devices (the ↗ character turns into an emoji on many phones) */ .fv3-meta a svg { margin-left: 4px; } /* ============ Footer: dark statement in a white frame with soft corners ============ */ .footer-v3 { background: #000; color: #fff; padding: 90px 40px 0; margin: 20px; border-radius: 14px; overflow: hidden; } .fv3-inner { max-width: 1380px; margin: 0 auto; } .fv3-big { margin: 0; font: 500 clamp(30px, 4.5vw, 56px)/1.15 'DM Sans', sans-serif; letter-spacing: -0.02em; max-width: 700px; } .fv3-meta { display: flex; flex-wrap: wrap; gap: 40px; margin: 60px 0 70px; font-size: 14px; color: rgba(255, 255, 255, 0.65); } .fv3-meta p { margin: 0; line-height: 1.7; } .fv3-meta a { color: rgba(255, 255, 255, 0.85); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.3); padding-bottom: 2px; transition: border-color 0.2s; } .fv3-meta a:hover { border-color: #fff; } .fv3-bottom { border-top: 1px solid rgba(255, 255, 255, 0.12); padding: 22px 0; max-width: 1380px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: rgba(255, 255, 255, 0.45); } .fv3-bottom p { margin: 0; } .fv3-logo { display: inline-flex; } .fv3-bottom img { height: 16px; width: auto; opacity: 0.9; } @media screen and (max-width: 760px) { .footer-v3 { padding: 70px 25px 0; } /* Copyright above the divider line so it fits on one line; logo below */ .fv3-bottom { flex-direction: column; align-items: flex-start; gap: 20px; border-top: 0; } .fv3-bottom p { order: -1; width: 100%; padding-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } } /* ============ Above-the-fold intro: pure CSS fade so the logo and headline appear as soon as the page paints, never waiting for scripts or the hero video ============ */ .fade-boot { opacity: 0; animation: fadeBoot 0.9s cubic-bezier(0.2, 0.6, 0.3, 1) forwards; } /* Intro choreography: logo, then headline, then arrow with the frame reveal */ .logo.fade-boot { animation-delay: 0.3s; } .hero h1.fade-boot { animation-delay: 1s; } .scroll-down.fade-boot { animation-delay: 1.9s; } @keyframes fadeBoot { to { opacity: 1; } } /* ============ In-view animations: pure fade-in, no movement ============ */ .slide-from-bottom { opacity: 0; transition: opacity 0.9s cubic-bezier(0.2, 0.6, 0.3, 1); } .slide-from-bottom.inview { opacity: 1; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .slide-from-bottom { opacity: 1; transition: none; } .fade-boot { animation: none; opacity: 1; } .scroll-down svg { animation: none; } }