/* ========================================================================= SHARDLAB — Design 2 Light, editorial, architectural-grid direction adapted from the CURA Climate reference (hairline vertical rails, thin large type, corner-bracket buttons, counting loader, sticky text crossfade, marquee, fade carousel, partner hover grid, news grid, giant footer). ShardLab brand colours (purple / lime) + ShardLab content. Self-contained: no external CSS/JS/CDN. ========================================================================= */ :root { --paper: #f4f2ec; /* warm paper base */ --paper-2: #eceae2; --ink: #17151f; /* near-black with a faint purple bias */ --muted: #6b6875; --muted-2: #96929e; --line: rgba(23,21,31,.12); --line-2: rgba(23,21,31,.07); --accent: #7b68fc; /* ShardLab purple */ --accent-ink: #4f3ccf;/* darker purple for text on light */ --lime: #a2e435; /* ShardLab lime */ --card: #fbfaf7; --maxw: 1360px; --pad: clamp(1.1rem, 4vw, 4rem); --ease: cubic-bezier(.5,.05,0,1); --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; /* ShardLab symbol (two-triangle shard mark) as a mask, so it can be tinted */ --shard-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 18'%3E%3Cpath d='M1.997 13.794L0.084 17.961L17.034 17.961L10.85 14.411ZM15.835 15.55L8.359 0.003L3.555 10.331L10.85 14.411Z' fill='%23000'/%3E%3C/svg%3E"); } * { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-snap-type: y proximity; } body { background: var(--paper); color: var(--ink); font-family: var(--font); font-weight: 400; line-height: 1.45; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } html.preloader-init body > *:not(.loader):not(.intro):not(.rails) { opacity: 0; } html.preloader-init { overflow: hidden; } /* no page scroll while the intro gate is up */ html.intro-leaving { overflow: hidden; scroll-behavior: auto; } /* stay pinned to top while the intro curtain slides */ img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } sub { font-size: .7em; } /* ------------------------------------------------------------------ shared */ .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); position: relative; } .wrap { position: relative; z-index: 1; } .page { position: relative; z-index: 1; } /* sits above the fixed rails; opaque sections mask the rails */ .h1 { font-size: clamp(2.6rem, 7.2vw, 7rem); line-height: .98; font-weight: 500; letter-spacing: -.03em; text-wrap: balance; } .h2 { font-size: clamp(1.9rem, 4.6vw, 4rem); line-height: 1.03; font-weight: 500; letter-spacing: -.025em; text-wrap: balance; } .h3 { font-size: clamp(1.3rem, 2.4vw, 2rem); line-height: 1.1; font-weight: 500; letter-spacing: -.015em; } .big { font-size: clamp(1.5rem, 3.4vw, 2.9rem); line-height: 1.18; font-weight: 500; letter-spacing: -.02em; } .body { font-size: clamp(1rem, 1.25vw, 1.15rem); color: var(--muted); line-height: 1.55; } /* Highlighter-style label — highlight hugs the text only (never a full-width bar) */ .pill { display: inline-block; align-self: flex-start; width: fit-content; max-width: 100%; padding: .1em .32em; border-radius: 6px; font-size: clamp(1.2rem, 2vw, 1.55rem); font-weight: 600; letter-spacing: -.01em; text-transform: none; color: var(--ink); background: rgba(123, 104, 252, .30); line-height: 1.28; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .pill::before { content: none; } .pill.is-lime { background: rgba(162, 228, 53, .5); } .eyebrow { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); } /* ------------------------------------------------------------------ vertical rails (fixed, shared across all sections) */ .rails { position: fixed; inset: 0; z-index: 0; pointer-events: none; max-width: var(--maxw); margin: 0 auto; left: 0; right: 0; padding: 0 var(--pad); display: flex; justify-content: space-between; } .rails span { width: 1px; height: 100%; background: var(--line-2); } .rails span:first-child, .rails span:last-child { background: var(--line); } @media (max-width: 767px) { .rails span:nth-child(2), .rails span:nth-child(4) { display: none; } } /* ------------------------------------------------------------------ button (shard + sweep-fill) Distinct from Ledger's static corner-bracket frame: a squared hairline button with a leading shard (triangle) marker and a purple fill that wipes in on hover. */ .btn2 { position: relative; display: inline-flex; align-items: center; gap: .7rem; padding: .9rem 1.5rem; color: var(--ink); font-weight: 500; font-size: .95rem; background: transparent; cursor: pointer; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; isolation: isolate; transition: color .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease); } .btn2::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--accent); transform: translateX(-101%); transition: transform .55s var(--ease); } .btn2:hover { color: #fff; border-color: var(--accent); } .btn2:hover::before { transform: translateX(0); } .btn2:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* leading marker — the ShardLab symbol (two-triangle shard mark) */ .btn2 .dot { width: 13px; height: 15px; flex: none; background: var(--lime); border: 0; border-radius: 0; -webkit-mask: var(--shard-symbol) center / contain no-repeat; mask: var(--shard-symbol) center / contain no-repeat; transition: transform .45s var(--ease); } .btn2:hover .dot { transform: translateX(4px); } .btn2 .c { display: none; } /* retire the corner-bracket frame */ .btn2--solid { background: var(--accent); color: #fff; padding: .85rem 1.4rem; border-color: var(--accent); } .btn2--solid::before { background: var(--accent-ink); } .btn2--solid .dot { background: #fff; } /* Shared CTA style (Get in touch, card Back, View all press): solid purple by default, flips to white on hover */ .btn2--cta { background: var(--accent); color: #fff; border-color: var(--accent); } .btn2--cta::before { display: none; } .btn2--cta .dot { background: #fff; } .btn2--cta:hover { background: #fff; color: var(--accent-ink); border-color: var(--accent); transform: translateY(-2px); } .btn2--cta:hover .dot { background: var(--accent); } /* Floating "TOP" button — always docked bottom-right */ .totop { position: fixed; right: clamp(1rem, 3vw, 2.2rem); bottom: clamp(1rem, 3vw, 2.2rem); z-index: 45; width: 54px; height: 54px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; font-size: .68rem; font-weight: 600; letter-spacing: .12em; border: 1px solid var(--accent); box-shadow: 0 8px 24px rgba(79, 60, 207, .34); transition: background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease); } .totop:hover { background: #fff; color: var(--accent-ink); transform: translateY(-3px); } .totop:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .btn2--solid:hover { color: #fff; transform: translateY(-2px); } /* ================================================================== LOADER */ .loader { position: fixed; inset: 0; z-index: 1000; background: var(--paper); display: flex; align-items: center; justify-content: center; transition: opacity .8s var(--ease), visibility .8s var(--ease); } .loader.is--done { opacity: 0; visibility: hidden; pointer-events: none; } .loader__inner { display: flex; flex-direction: column; align-items: center; gap: 1.4rem; } .loader__mark { width: 40px; color: var(--accent); } .loader__count { font-variant-numeric: tabular-nums; font-size: clamp(3rem,11vw,6rem); font-weight: 500; letter-spacing: -.03em; line-height: 1; } .loader__count i { color: var(--muted-2); font-style: normal; font-size: .32em; vertical-align: super; margin-left: .1em; } .loader__bar { width: min(260px,64vw); height: 2px; background: var(--line); overflow: hidden; } .loader__bar span { display: block; height: 100%; width: 0; background: var(--accent); } /* ================================================================== INTRO GATE (homepage) Full-screen motion piece: the black shard symbol assembles as a true 3D object (stacked-layer extrusion, slow oscillating rotation, floating over its own shadow), the wordmark rises, then a hint invites scroll/click. Dismissing slides the curtain up to reveal the landing page. */ .intro { position: fixed; inset: 0; z-index: 1000; background: var(--paper); color: var(--ink); overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: pointer; border-bottom: 1px solid var(--line); box-shadow: 0 24px 60px rgba(23,21,31,.18); transition: transform 1s cubic-bezier(.76,0,.24,1), visibility 1s; } .intro.is--done { transform: translateY(-101%); visibility: hidden; pointer-events: none; } .intro__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(23,21,31,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(23,21,31,.05) 1px, transparent 1px); background-size: 72px 72px; } .intro__glow { position: absolute; inset: 0; background: radial-gradient(44% 40% at 50% 44%, rgba(123,104,252,.16), transparent 70%); } .intro__center { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; padding: 0 var(--pad); } /* --- 3D object: perspective stage > oscillating spinner > extrusion layers */ .intro__obj { position: relative; width: clamp(120px, 17vw, 190px); aspect-ratio: 17/18; perspective: 900px; } .intro__tilt { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; } .intro__spin { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(14deg) rotateY(-26deg); } .intro.is-play .intro__spin { animation: obj-float 7s ease-in-out .2s infinite; } @keyframes obj-float { 0%, 100% { transform: rotateX(14deg) rotateY(-26deg) translateY(0); } 50% { transform: rotateX(9deg) rotateY(26deg) translateY(-12px); } } .intro__layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: translateZ(calc(var(--z) * -2.4px)); } .intro__layer path { transform-box: fill-box; transform-origin: center; opacity: 0; fill: var(--accent-ink); } /* extrusion body: deep purple core */ .intro__layer--face path { fill: var(--ink); } /* front face: black symbol */ .intro.is-play .intro__p2 { animation: shard-in-a 1.15s cubic-bezier(.22,1,.36,1) .2s forwards; } .intro.is-play .intro__p1 { animation: shard-in-b 1.15s cubic-bezier(.22,1,.36,1) .38s forwards; } @keyframes shard-in-a { 0% { opacity: 0; transform: translate(9px,-12px) rotate(26deg) scale(.6); } 55% { opacity: 1; } 100% { opacity: 1; transform: none; } } @keyframes shard-in-b { 0% { opacity: 0; transform: translate(-9px,8px) rotate(-30deg) scale(.6); } 55% { opacity: 1; } 100% { opacity: 1; transform: none; } } /* floating ground shadow under the object */ .intro__shadow { position: absolute; left: 50%; bottom: -17%; width: 74%; height: 16px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(23,21,31,.3), transparent 70%); filter: blur(3px); opacity: 0; } .intro.is-play .intro__shadow { animation: shadow-float 7s ease-in-out .2s infinite; } @keyframes shadow-float { 0%, 100% { opacity: .8; transform: translateX(-50%) scale(1); } 50% { opacity: .45; transform: translateX(-50%) scale(.82); } } .intro__word { width: clamp(230px, 34vw, 430px); margin-top: clamp(2rem,4.5vh,3.2rem); fill: var(--ink); opacity: 0; transform: translateY(16px); } .intro.is-play .intro__word { animation: intro-rise .9s var(--ease) 1.25s forwards; } .intro__hint { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-top: clamp(2rem,6vh,3.4rem); font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); opacity: 0; } .intro.is-play .intro__hint { animation: intro-rise .9s var(--ease) 1.9s forwards; } @keyframes intro-rise { to { opacity: 1; transform: none; } } .intro__hint-line { width: 1px; height: 36px; background: rgba(23,21,31,.14); position: relative; overflow: hidden; } .intro__hint-line::after { content: ""; position: absolute; left: 0; top: -100%; width: 100%; height: 100%; background: var(--accent); animation: hint-drop 1.7s ease-in-out 2.4s infinite; } @keyframes hint-drop { 0% { top: -100%; } 60% { top: 100%; } 100% { top: 100%; } } /* faint drifting shard fragments around the mark */ .intro__shards { position: absolute; inset: 0; pointer-events: none; } .intro__shards svg { position: absolute; opacity: 0; fill: currentColor; } .intro.is-play .intro__shards svg { animation: ghost-float 7s ease-in-out infinite; } .intro__shards svg:nth-child(1) { width: 30px; top: 18%; left: 14%; color: var(--ink); animation-delay: .6s; } .intro__shards svg:nth-child(2) { width: 20px; top: 68%; left: 22%; color: var(--accent); animation-delay: 1.4s; transform: rotate(18deg); } .intro__shards svg:nth-child(3) { width: 42px; top: 24%; right: 16%; color: var(--accent); animation-delay: 1s; transform: rotate(-14deg); } .intro__shards svg:nth-child(4) { width: 18px; top: 74%; right: 24%; color: var(--lime); animation-delay: 1.9s; } .intro__shards svg:nth-child(5) { width: 24px; top: 46%; left: 7%; color: var(--lime); animation-delay: 2.4s; transform: rotate(30deg); } .intro__shards svg:nth-child(6) { width: 26px; top: 56%; right: 8%; color: var(--ink); animation-delay: .2s; transform: rotate(-24deg); } @keyframes ghost-float { 0%, 100% { opacity: .07; translate: 0 0; } 50% { opacity: .16; translate: 0 -18px; } } /* ================================================================== NAV */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 900; padding: 1.5rem var(--pad); transition: opacity .5s var(--ease); } html.preloader-init .nav { opacity: 0; } .nav__bar { position: relative; z-index: 810; /* keep logo + close button above the open menu overlay */ max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.05rem 1.1rem 1.05rem 1.3rem; background: rgba(244,242,236,.72); backdrop-filter: blur(12px); border: 1px solid var(--line); border-radius: 4px; } .nav__logo { display: inline-flex; align-items: center; color: var(--ink); } .nav__logo-full { height: 40px; width: auto; display: block; fill: currentColor; } .nav__right { display: flex; align-items: center; gap: clamp(1.5rem,2.5vw,2.4rem); } .nav__links { display: flex; gap: 1.9rem; } /* desktop: horizontal links */ .nav__links a { display: inline-block; font-size: 1rem; font-weight: 500; color: var(--ink); transition: transform .25s var(--ease), color .25s var(--ease); } /* readability-first: dark by default, hover scales up (not a faint colour shift) */ .nav__links a:hover, .nav__links a.is-active { color: var(--accent-ink); transform: scale(1.1); } .nav__hamburger { display: none; width: 40px; height: 40px; border: 0; background: transparent; cursor: pointer; position: relative; } .nav__hamburger span { position: absolute; left: 9px; right: 9px; height: 1.5px; background: var(--ink); transition: transform .4s var(--ease), opacity .3s; } .nav__hamburger span:nth-child(1){ top: 15px; } .nav__hamburger span:nth-child(2){ top: 20px; } .nav__hamburger span:nth-child(3){ top: 25px; } .nav__overlay { position: fixed; inset: 0; z-index: -1; background: var(--paper); clip-path: inset(0 0 100% 0); transition: clip-path .8s var(--ease); display: flex; flex-direction: column; justify-content: center; padding: var(--pad); } .nav__overlay a { display: inline-block; font-size: clamp(2rem,9vw,4.5rem); font-weight: 500; letter-spacing: -.02em; padding: .08em 0; } .nav[data-nav="open"] .nav__overlay { clip-path: inset(0 0 0 0); z-index: 800; } .nav[data-nav="open"] .nav__hamburger span:nth-child(1){ top: 20px; transform: rotate(45deg); } .nav[data-nav="open"] .nav__hamburger span:nth-child(2){ opacity: 0; } .nav[data-nav="open"] .nav__hamburger span:nth-child(3){ top: 20px; transform: rotate(-45deg); } /* ================================================================== HERO */ .hero { position: relative; padding: clamp(9rem,16vh,12rem) 0 0; } .hero__title { padding-bottom: clamp(2rem,5vw,4rem); } .hero__title .h1 { max-width: 15ch; } .hero__title .h1 em { font-style: normal; color: var(--accent-ink); } .hero__sub { margin-top: clamp(1rem,2.4vw,1.6rem); font-size: clamp(1.1rem,2vw,1.7rem); font-weight: 500; letter-spacing: -.01em; color: var(--muted); } .hero__rule { height: 1px; background: var(--line); } .hero__bottom { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem,5vw,4rem); align-items: end; padding: clamp(2rem,4vw,3rem) 0 clamp(3rem,6vw,5rem); } .hero__lead { max-width: 46ch; } .hero__lead .body { font-size: clamp(1.05rem,1.5vw,1.35rem); color: var(--ink); } .hero__cta { margin-top: 1.8rem; display: flex; gap: 1rem; flex-wrap: wrap; } .hero__decor { position: relative; aspect-ratio: 4/3; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: radial-gradient(90% 90% at 70% 20%, rgba(123,104,252,.35), transparent 60%), radial-gradient(80% 80% at 20% 90%, rgba(162,228,53,.28), transparent 60%), #ecebe4; } .hero__decor .grid { position: absolute; inset: 0; background-image: linear-gradient(var(--line-2) 1px, transparent 1px), linear-gradient(90deg, var(--line-2) 1px, transparent 1px); background-size: 34px 34px; mask-image: radial-gradient(120% 120% at 60% 30%, #000 40%, transparent 80%); } .hero__decor .glyph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(23,21,31,.14); } .hero__decor .glyph svg { width: 44%; } /* ================================================================== ABOUT (sticky crossfade) */ .about { position: relative; } .about__pin { height: 400vh; position: relative; } /* 3 blocks + lead-in/out hold */ /* snap stops (one per block) so a fast scroll lands on a block instead of blowing past */ .about__snap { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; scroll-snap-align: start; scroll-snap-stop: always; } .about__sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; } .about__inner { position: relative; width: 100%; } .about__label { margin-bottom: clamp(1.5rem,4vw,2.5rem); } /* three blocks crossfade sequentially on scroll; a single-cell grid stacks them so the cell auto-reserves the height of the tallest block */ .about__stack { display: grid; } .about__block { grid-area: 1 / 1; align-self: start; will-change: opacity, transform; } .about__eyebrow { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--accent-ink); margin-bottom: clamp(.8rem,1.6vw,1.1rem); } .about__p { max-width: 30ch; } .about__p strong { font-weight: 500; color: var(--accent-ink); } .about__stat { display: flex; gap: 2.5rem; margin-top: clamp(2.5rem,5vw,4rem); flex-wrap: wrap; } .about__stat b { display: block; font-size: clamp(2rem,4vw,3.2rem); font-weight: 500; letter-spacing: -.02em; } .about__stat span { font-size: .85rem; color: var(--muted); } /* ================================================================== MARQUEE band */ .band { position: relative; padding: clamp(3rem,6vw,5rem) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; } /* spacing lives on the separators (not flex gap) so each duplicated set is a self-contained tile and the -50% loop is perfectly seamless */ .band__loop { display: inline-flex; align-items: center; white-space: nowrap; animation: loop 34s linear infinite; will-change: transform; } .band__loop span { font-size: clamp(1.8rem,4.5vw,3.6rem); font-weight: 500; letter-spacing: -.02em; } .band__loop i { display: inline-block; margin: 0 clamp(1.1rem,2.4vw,2.2rem); background: var(--accent); width: clamp(1rem,1.9vw,1.6rem); height: clamp(1rem,1.9vw,1.6rem); -webkit-mask: var(--shard-symbol) center / contain no-repeat; mask: var(--shard-symbol) center / contain no-repeat; } @keyframes loop { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ================================================================== FEATURE carousel */ .feature { padding: clamp(4rem,9vw,8rem) 0; position: relative; } .feature__head { display: flex; flex-direction: column; gap: 1.2rem; margin-bottom: clamp(2.5rem,5vw,4rem); } .feature__head .h2 { max-width: 18ch; } /* wider breathing room between the section pill and its heading */ .feature__head .pill, .work__head-main .pill { margin-bottom: clamp(.6rem, 1.8vw, 1.3rem); } .feature__stage { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,4vw,3.5rem); align-items: center; } /* fixed autoplaying video on the left */ .feature__media { aspect-ratio: 5/4; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; position: relative; background: radial-gradient(90% 90% at 40% 30%, rgba(123,104,252,.28), transparent 60%), #ecebe4; } .feature__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* right column: the cycling text slides fade over one another */ .feature__slides { position: relative; } .fcard { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .6s var(--ease); } .fcard.is-active { opacity: 1; visibility: visible; position: relative; } .fcard__inner { max-width: 44ch; } .fcard__ic { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: 1.1rem; margin-bottom: 1.4rem; } .fcard__h { overflow: hidden; } .fcard__h .h3 { transition: transform .5s var(--ease), opacity .5s var(--ease); } .fcard:not(.is-active) .fcard__h .h3 { transform: translateY(100%); opacity: 0; } .fcard p { margin-top: 1rem; } .feature__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; } .dots { display: flex; gap: .5rem; } .dots b { width: 8px; height: 8px; border-radius: 50%; background: var(--line); cursor: pointer; transition: background .3s, transform .3s; } .dots b.is-active { background: var(--accent); transform: scale(1.25); } .arrows { display: flex; gap: .6rem; } .arrows button { width: 46px; height: 46px; border: 1px solid var(--line); background: transparent; border-radius: 50%; cursor: pointer; color: var(--ink); display: flex; align-items: center; justify-content: center; transition: border-color .3s, color .3s, background .3s; } .arrows button:hover { border-color: var(--accent); color: var(--accent-ink); } .arrows svg { width: 18px; } /* ================================================================== PARTNERS hover grid */ .partners { padding: clamp(4rem,9vw,8rem) 0; position: relative; } .partners__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem,5vw,4rem); align-items: stretch; } .partners__head { display: flex; flex-direction: column; gap: clamp(1.1rem,2.2vw,1.6rem); } .partners__head .body { max-width: 42ch; margin-top: clamp(.8rem, 2.5vw, 2rem); } /* desktop: pin the eyebrow pill to the cards' top edge, centre the heading+body */ @media (min-width: 992px) { .partners__head { position: relative; justify-content: center; } .partners__head .pill { position: absolute; top: 0; left: 0; } } /* 6-col grid: two lead partners span half the row on top, the rest span thirds */ .partners__cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; } .pcard2 { position: relative; grid-column: span 2; background: var(--card); aspect-ratio: 3/2; display: flex; align-items: center; justify-content: center; overflow: hidden; } .pcard2--lead { grid-column: span 3; aspect-ratio: 12/5; } /* top-tier: wider, banner-like */ .pcard2 .ekraf-logo { width: 62%; max-width: 196px; } .pcard2 .name { position: relative; z-index: 2; font-weight: 500; letter-spacing: .02em; transition: color .4s var(--ease); } .pcard2 .plogo { position: relative; z-index: 2; width: 58%; max-width: 148px; height: auto; transition: filter .4s var(--ease); } .pcard2 .plogo--wide { width: 66%; max-width: 172px; } .plogo--mono { filter: brightness(0); } /* render a coloured raster logo as a black silhouette to match the others */ .pcard2:hover .plogo { filter: brightness(0) invert(1); } /* dark logo → white silhouette over the hover fill */ .pcard2:hover .plogo--keep { filter: none; } /* two-tone logos (own white parts) stay as-is on hover */ /* KCD: swap to its own white logo on hover instead of inverting (invert broke the symbol) */ .pcard2--swap .plogo { filter: none !important; } .pcard2--swap .plogo--white { display: none; } .pcard2--swap:hover .plogo--dark { display: none; } .pcard2--swap:hover .plogo--white { display: inline-block; } .pcard2 .fill { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity .5s var(--ease); } .pcard2:hover .fill { opacity: 1; } .pcard2:hover .name { color: #fff; } .fill--a { background: radial-gradient(120% 120% at 30% 20%, #7b68fc, #4f3ccf); } .fill--b { background: radial-gradient(120% 120% at 70% 30%, #9e8fff, #4f3ccf); } .fill--c { background: radial-gradient(120% 120% at 40% 80%, #a2e435, #4f8f14); } /* per-cell hover colour (checkerboard) — dark enough for white content */ .pcard2.hov-purple .fill { background: radial-gradient(120% 120% at 30% 20%, #7b68fc, #4f3ccf); } .pcard2.hov-green .fill { background: radial-gradient(120% 120% at 30% 20%, #6bbf3a, #256e25); } /* ================================================================== DIVIDER plus */ .divider { display: flex; justify-content: center; align-items: center; height: 1px; background: var(--line); margin: 0 var(--pad); position: relative; } .divider span { position: absolute; width: 34px; height: 34px; background: var(--paper); display: flex; align-items: center; justify-content: center; color: var(--muted-2); } /* ================================================================== WORK (Venture + Ecosystem) */ .work { padding: clamp(4rem,9vw,8rem) 0; position: relative; } .work__head { margin-bottom: clamp(2rem,4vw,3.2rem); } /* stacked eyebrow + heading, left-aligned like other sections */ .work__index { font-variant-numeric: tabular-nums; font-size: .82rem; letter-spacing: .18em; color: var(--muted-2); padding-top: .55rem; } .work__head-main { display: flex; flex-direction: column; gap: 1rem; } .work__head-main .h2 { max-width: 18ch; } .work__head-main .body { max-width: 52ch; } .work__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.2rem,2.2vw,1.8rem); } .work__rule { height: 1px; background: var(--line); margin: clamp(3rem,6vw,5rem) 0; } .ncard { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--card); display: flex; flex-direction: column; transition: transform .5s var(--ease), border-color .5s var(--ease); } .ncard:hover { transform: translateY(-4px); border-color: var(--accent); } .ncard__img { display: block; aspect-ratio: 16/9; position: relative; overflow: hidden; } .ncard__body { padding: 1.5rem; display: flex; flex-direction: column; gap: .9rem; flex: 1; } .ncard__title { font-size: clamp(1.05rem,1.6vw,1.35rem); font-weight: 500; letter-spacing: -.01em; line-height: 1.2; } .ncard__excerpt { color: var(--muted); font-size: .92rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ncard__more { margin-top: auto; padding: .58rem 1.1rem; font-size: .86rem; } .ncard__more.btn2--solid { border: 0; } /*