/* Sydon brand overlay for the Marklab template. * * Loaded after the template stylesheet. The template routes every brand * colour through custom properties, so redefining the two ramps here * recolours the entire site -- layout, spacing, type and Webflow's * interactions are left exactly as they were. */ :root { /* Blue ramp, anchored on the Sydon primary. Replaces the template's indigo (#4555fd) ramp. */ --primary-color-50: #eff4ff; --primary-color-100: #dbe6fe; --primary-color-200: #bfd3fe; --primary-color-300: #93b4fd; --primary-color-400: #6090fa; --primary-color-500: #2563eb; /* Neutral ramp, anchored on the Sydon ink. Replaces the template's navy (#202342) ramp. */ --primary-black-50: #f5f7fa; --primary-black-100: #e2e4e9; --primary-black-200: #d0dce7; --primary-black-300: #a3aebd; --primary-black-400: #647183; --primary-black-500: #0f141a; /* The logo mark's gradient, reused for primary calls to action. */ --sydon-cyan: #22d3ee; /* Ambient wash — periwinkle at the top fading to pale blue-white, taken from the cube panel. One definition, referenced by every section that uses it, so the three cannot drift apart again. */ --amb-ground: #eef3fd; --amb-layers: linear-gradient(180deg, rgba(147, 166, 244, 0.58) 0%, rgba(186, 202, 250, 0.30) 46%, rgba(238, 243, 253, 0) 88%), radial-gradient(at 16% 14%, rgba(96, 144, 250, 0.30) 0, transparent 58%), radial-gradient(at 85% 18%, rgba(129, 152, 240, 0.36) 0, transparent 60%), radial-gradient(at 50% 82%, rgba(34, 211, 238, 0.18) 0, transparent 60%), radial-gradient(at 92% 86%, rgba(79, 70, 229, 0.18) 0, transparent 55%); --sydon-blue: #2563eb; } /* Primary CTA fill. Webflow animates this layer's width on hover, so only the paint is changed -- inset, radius and transition stay untouched. */ .primary-button-bg-2 { background-color: var(--sydon-blue); background-image: linear-gradient(90deg, var(--sydon-cyan), var(--sydon-blue)); } /* The template sizes the header mark by width alone. The CUBE lockup is nearly square, so driving it from width would grow the navbar; height wins. Scoped to the brand link so other .site-image uses are safe. */ .site-logo-link .site-image { width: auto; max-height: 38px; } /* The footer mark is an unclassed in the template, so it would render at the PNG's intrinsic size. apply-brand.js tags it with this class. Height-driven for the same reason as the header. */ .brand-footer-logo { width: auto; height: 60px; } /* The rebuilt footer signs off as Sydon, not CUBE -- the fine print beside it names the operating entity, so the CUBE mark there was the wrong signature. That asset is a wide wordmark (560x182) rather than the near-square cube, so 60px would set it three times the width; scoped here rather than on the shared class, which apply-brand.js still puts on the template's own mark. */ .syd-foot-brand .brand-footer-logo { height: 40px; } /* Webflow injects an attribution badge at runtime; this is a Sydon property. */ .w-webflow-badge { display: none !important; } /* ------------------------------------------------------------------ hero * The template's hero was built for a dark photograph: a white headline over * a full-bleed image. The CUBE hero is light, so the type flips to ink and * the glow moves onto the call to action instead. */ /* The section carries its own background photo underneath the backdrop. * Clear it, but set NO background-color: .banner-bg-image sits at z-index -1, * so any background painted on the section would cover the artwork. */ .section.home-banner { background-image: none; /* The beam below is wider than the viewport; contain it. */ overflow: hidden; } /* Stray 3D ornament from the template; the hero reads cleaner without it. */ .home-banner .noti-icon { display: none; } .home-banner .banner-wrap.v1 { max-width: 1200px; } /* Every banner heading in the template ships white, for the dark photo * backdrops the original design assumed. The CUBE site is light throughout, * so these need ink on every page -- scoping this to the home hero left the * about/project/blog/contact headings invisible. */ .banner-title { color: var(--primary-black-500); } .banner-short-text { color: var(--primary-black-400); } .home-banner .banner-title { font-size: clamp(34px, 4.8vw, 66px); line-height: 1.06; letter-spacing: -0.03em; } .home-banner .banner-short-text { max-width: 620px; margin-left: auto; margin-right: auto; } /* Dark CTA sitting in the beam, echoing the artwork behind it. */ .home-banner .banner-btn { background-color: var(--primary-black-500); box-shadow: 0 0 0 5px rgba(34, 211, 238, 0.16), 0 22px 60px -14px rgba(37, 99, 235, 0.55); } .home-banner .banner-btn .primary-button-text, .home-banner .banner-btn .primary-button-text.dark { color: #ffffff; } /* The arrow glyph is dark ink; force it white on the dark button. */ .home-banner .banner-btn .primary-button-icon { filter: brightness(0) invert(1); } /* Webflow slides this layer across on hover -- paint it brand blue. */ .home-banner .banner-btn-bg { background-color: var(--sydon-blue); } /* Secondary CTA is a ghost button with white type -- invisible on a light hero. Give it ink type and a hairline border so it reads as secondary. */ .home-banner .primary-btn.v1 { border: 1px solid var(--primary-black-200); background-color: rgba(255, 255, 255, 0.72); } .home-banner .primary-btn.v1 .primary-button-text, .home-banner .primary-btn.v1 .primary-button-text.white { color: var(--primary-black-500); } /* brightness(0) lands on black whichever way the glyph ships. */ .home-banner .primary-btn.v1 .primary-button-icon { filter: brightness(0); } .home-banner .primary-btn.v1:hover .primary-button-text, .home-banner .primary-btn.v1:hover .primary-button-text.white { color: #ffffff; } .home-banner .primary-btn.v1:hover .primary-button-icon { filter: brightness(0) invert(1); } /* The same ghost-button problem on the inner-page hero (about, timeline), where it is still live: the template gives this secondary CTA white type and a white arrow, both invisible on a light ground, so the button rendered as an empty ring with no label. The home rules above are NOT reused wholesale. They invert the label to white on hover, which only reads over a background that darkens on hover, and nothing darkens this one -- reusing them would hide the label again the moment the pointer landed on it. */ .banner-section .primary-btn.v1 { border: 1px solid var(--primary-black-200); background-color: rgba(255, 255, 255, 0.72); transition: background-color .2s ease, border-color .2s ease; } .banner-section .primary-btn.v1 .primary-button-text, .banner-section .primary-btn.v1 .primary-button-text.white { color: var(--primary-black-500); } /* brightness(0) lands on black whichever way the glyph ships. */ .banner-section .primary-btn.v1 .primary-button-icon { filter: brightness(0); } .banner-section .primary-btn.v1:hover { background-color: #ffffff; border-color: var(--primary-black-300); } /* The shared rule further down lightens the ring for a button that inverts on hover. This one stays light, so its ring has to stay dark. */ .banner-section .primary-btn.v1:hover .primary-icon { background-color: rgba(22, 25, 34, 0.06); border-color: rgba(22, 25, 34, 0.30); } /* Two template ornaments animate from opacity:0 into white arrows, which read as smudges on a light hero. */ .home-banner .home-icon, .home-banner .line-icon { display: none; } /* The beam is pinned to the button row rather than painted into the page * background. A background image is sized by object-fit, so its bright line * lands at a different height on every window size -- this keeps the glow * behind the call to action at any viewport. * * hero-beam.svg is 2600x820 with its bright bar at y=178, i.e. 21.71% down, * so shifting the element up by that fraction puts the bar on the row centre. */ .home-banner .footer-btn-wrap { position: relative; } .home-banner .footer-btn-wrap::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(2200px, 112vw); aspect-ratio: 2600 / 820; transform: translate(-50%, -21.71%); background: url("gen/hero-beam.svg") center / 100% 100% no-repeat; pointer-events: none; } /* Keep the buttons above the glow. */ .home-banner .footer-btn-wrap > * { position: relative; z-index: 1; } /* At >=1920px the template drops a dark header graphic onto .page-wrapper -- * the backdrop its white hero type was designed for. It is invisible at * smaller widths, which is why the hero only went dark on wide screens. */ .page-wrapper { background-image: none; } /* ============================================================== CUBE 3D * The "What is CUBE?" panel. The card, dot grid and diamonds stay as * generated artwork; the cube itself is real DOM so it can move. * * CSS 3D rather than Three.js: this is a static HTML site with no build * step and no React, so a WebGL runtime would be a large dependency for * one decorative panel. Six transformed faces give genuine 3D parallax. * * Every animation lives behind prefers-reduced-motion: no-preference, so * a reduced-motion visitor gets the same cube, composed and still. */ .cube-stage { position: relative; /* .growth-image-wrap is inline-block (shrink-to-fit), so a percentage width * collapses to nothing. The image this replaces carried max-width:542px. */ width: 542px; max-width: 100%; aspect-ratio: 1120 / 900; border-radius: 18px; overflow: hidden; background: url("gen/about-panel.svg") center / cover no-repeat; display: grid; place-items: center; perspective: 900px; } /* Soft emissive bloom behind the cube. */ .cube-glow { position: absolute; width: 52%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(34, 211, 238, 0.55), rgba(37, 99, 235, 0.18) 45%, transparent 70%); filter: blur(6px); } /* Mouse parallax target: cube.js writes --mx / --my in the range -1..1. */ .cube-parallax { transform: translate3d(calc(var(--mx, 0) * 12px), calc(var(--my, 0) * 9px), 0); transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1); transform-style: preserve-3d; } .cube-float { transform-style: preserve-3d; } .cube { --s: clamp(68px, 12vw, 128px); position: relative; width: var(--s); height: var(--s); transform-style: preserve-3d; /* Held at a fixed isometric tilt; only the yaw animates, and only a little. */ transform: rotateX(-24deg) rotateY(-38deg); will-change: transform; } /* Glass, not solid panels: a thin wireframe edge and a faint tint, so whatever a face carries (a letter, a word) reads as suspended inside the cube rather than printed on an opaque outer skin. */ .cf { position: absolute; inset: 0; border-radius: 4px; border: 1px solid rgba(125, 211, 252, 0.5); backface-visibility: hidden; } .cf-front { background: rgba(224, 242, 254, 0.14); transform: translateZ(calc(var(--s) / 2)); } .cf-right { background: rgba(224, 242, 254, 0.10); transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); } .cf-back { background: rgba(224, 242, 254, 0.08); transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); } .cf-left { background: rgba(224, 242, 254, 0.10); transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); } .cf-bottom { background: rgba(224, 242, 254, 0.06); transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); } .cf-top { background: rgba(224, 242, 254, 0.20); transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); overflow: hidden; } /* Specular sweep that crosses the lit face. */ .cf-top::after { content: ""; position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.55) 50%, transparent 58%); transform: translateX(-120%); } .cube-sparks { position: absolute; inset: 0; pointer-events: none; } .cube-sparks i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #7fe9fb; opacity: 0.5; } .cube-sparks i:nth-child(1) { left: 22%; top: 30%; } .cube-sparks i:nth-child(2) { left: 74%; top: 26%; } .cube-sparks i:nth-child(3) { left: 32%; top: 70%; } .cube-sparks i:nth-child(4) { left: 68%; top: 66%; } .cube-sparks i:nth-child(5) { left: 50%; top: 18%; width: 3px; height: 3px; } .cube-sparks i:nth-child(6) { left: 16%; top: 52%; width: 3px; height: 3px; } .cube-sparks i:nth-child(7) { left: 84%; top: 48%; width: 3px; height: 3px; } .cube-sparks i:nth-child(8) { left: 58%; top: 82%; width: 3px; height: 3px; } @media (prefers-reduced-motion: no-preference) { /* Entrance: settle into the resting tilt rather than spinning in. */ .cube-parallax { animation: cube-in 900ms cubic-bezier(0.22, 1, 0.36, 1) both; } .cube-float { animation: cube-bob 5s ease-in-out infinite; } /* A wider yaw swing plus the circular drift on .cube-float -- more visible movement than a strict in-place sway, still short of a full revolution. */ .cube { animation: cube-yaw 7s ease-in-out infinite; } .cube-glow { animation: cube-pulse 6s ease-in-out infinite; } .cf-top::after { animation: cube-sweep 7s ease-in-out infinite; } .cube-sparks i { animation: cube-spark 5s ease-in-out infinite; } .cube-sparks i:nth-child(2) { animation-delay: -1.4s; } .cube-sparks i:nth-child(3) { animation-delay: -2.6s; } .cube-sparks i:nth-child(4) { animation-delay: -0.7s; } .cube-sparks i:nth-child(5) { animation-delay: -3.3s; } .cube-sparks i:nth-child(6) { animation-delay: -1.9s; } .cube-sparks i:nth-child(7) { animation-delay: -4.1s; } .cube-sparks i:nth-child(8) { animation-delay: -2.2s; } } @keyframes cube-in { from { opacity: 0; transform: translate3d(0, 18px, 0) scale(0.86); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } @keyframes cube-bob { 0% { transform: translate3d(0, -10px, 0); } 25% { transform: translate3d(9px, 0, 0); } 50% { transform: translate3d(0, 10px, 0); } 75% { transform: translate3d(-9px, 0, 0); } 100% { transform: translate3d(0, -10px, 0); } } @keyframes cube-yaw { 0% { transform: rotateX(-20deg) rotateY(-56deg); } 50% { transform: rotateX(-30deg) rotateY(-16deg); } 100% { transform: rotateX(-20deg) rotateY(-56deg); } } @keyframes cube-pulse { 0%, 100% { opacity: 0.75; transform: scale(0.96); } 50% { opacity: 1; transform: scale(1.06); } } @keyframes cube-sweep { 0%, 62% { transform: translateX(-120%); } 92%, 100% { transform: translateX(120%); } } @keyframes cube-spark { 0%, 100% { opacity: 0.15; transform: translateY(4px); } 50% { opacity: 0.75; transform: translateY(-6px); } } /* ==================================================== CUBE FACE CYCLE * Three small additions to the existing layout -- the section structure is * untouched: * 1. the cube inside the blue panel gets a letter per face * 2. C/U/B/E buttons sit under the cube, inside that same panel * 3. the empty top of the right-hand card cycles the four concepts * faces.js keeps all three in step and stops on click. */ /* 1 + 2 -- stack the cube and the buttons inside the blue panel. */ .cube-stage { grid-template-rows: 1fr auto; align-content: stretch; padding: 18px 16px; } .cube-stage .cube-parallax { align-self: center; justify-self: center; } /* Letter + word, stacked -- both children of the (now glass) face, so both sit inside the cube rather than on its surface. Unscoped: both the home cube (JS-cycled) and the about cube (idling on its own CSS sway) carry the same four lettered faces. */ .cf { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; } .cf b { font-size: calc(var(--s) * 0.34); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: #38bdf8; } .cf i { font-style: normal; font-size: calc(var(--s) * 0.1); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #7dd3fc; opacity: 0.85; } /* Driven by faces.js; the idle sway keyframe must not fight it. */ .cube-faces-letters .cube { animation: none; /* A standing offset keeps a second face in view so it still reads solid. */ transform: rotateX(-16deg) rotateY(calc(var(--yaw, 0deg) - 16deg)); transition: transform 1000ms cubic-bezier(0.65, 0, 0.35, 1); } .faces-tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-self: end; } .faces-tab { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 70px; background: rgba(255, 255, 255, 0.06); color: #cbd8ec; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 240ms ease, color 240ms ease, border-color 240ms ease; } .faces-tab b { color: #7fe9fb; font-weight: 800; } .faces-tab:hover { background: rgba(255, 255, 255, 0.14); } .faces-tab.is-active { background: #ffffff; border-color: #ffffff; color: var(--primary-black-500); } .faces-tab.is-active b { color: var(--primary-color-500); } /* 3 -- the cycling concept, in the right card's empty top area. * All slides share one grid cell, so the container is exactly as tall as the * longest concept and nothing below it shifts as they swap. */ .faces-cycle { margin: 26px 0 10px; } .faces-cycle.is-live { display: grid; } .faces-cycle.is-live .faces-slide { grid-area: 1 / 1; opacity: 0; transform: translateY(16px); transition: opacity 560ms cubic-bezier(0.22, 1, 0.36, 1), transform 560ms cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; } .faces-cycle.is-live .faces-slide.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; } .faces-slide { display: grid; gap: 10px; align-content: start; } .faces-slide img { width: 46px; height: 46px; } .faces-slide h4 { margin: 0; font-size: clamp(20px, 1.9vw, 26px); letter-spacing: -0.02em; color: var(--primary-black-500); } .faces-slide p { margin: 0; color: var(--primary-black-400); } .faces-step { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--primary-color-500); } /* No JS: a plain readable list instead of a stack. */ .faces-cycle:not(.is-live) .faces-slide { margin-bottom: 22px; } /* Pillar copy: headline lands on its own line, values sit quietly beneath. */ .pillar-lead { display: block; margin-bottom: 5px; color: var(--primary-black-500); font-weight: 700; } .pillar-values { display: block; margin-top: 11px; font-size: 12px; line-height: 1.5; letter-spacing: 0.03em; color: var(--primary-black-300); } .faces-slide .pillar-values { margin-top: 6px; } /* Hero CTA: single button, sized to its label rather than the template's wide pill. The secondary "Explore CUBE" is dropped from the hero. */ .home-banner .primary-btn.v1 { display: none; } .home-banner .banner-btn { padding: 12px 13px 12px 22px; } /* ================================================== HERO (neural vortex) * A WebGL canvas fills the hero and the content sits on a glass card above * it. brand/vortex.js drives the canvas; if WebGL is missing the class is * never added and the gradient underneath stands in. */ .home-banner .footer-btn-wrap::before { content: none; } /* retire the beam */ .home-banner .banner-bg-image { display: none; } .section.home-banner { position: relative; overflow: hidden; /* Fallback ground, and what shows if WebGL is unavailable. */ background: radial-gradient(120% 80% at 50% 40%, #12224e 0%, #0a1024 45%, #05070f 100%); } .hero-vortex { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; opacity: 0; transition: opacity 700ms ease-out; pointer-events: none; } .hero-vortex.is-on { opacity: 0.95; } .home-banner .container.home { position: relative; z-index: 1; } /* Glass card around the hero copy. */ .home-banner .banner-wrap.v1 { position: relative; padding: 50px 60px 48px; border: 2px solid rgba(255, 255, 255, 0.10); border-radius: 28px; background: rgba(8, 12, 26, 0.28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } @media (max-width: 767px) { .home-banner .banner-wrap.v1 { padding: 38px 22px 36px; border-radius: 22px; } } .home-banner .banner-title { color: #ffffff; } .home-banner .banner-short-text { color: rgba(255, 255, 255, 0.62); } /* The headline's boxed phrase, on dark. */ .home-banner .banner-title .itlic { display: inline-block; padding: 0.02em 0.24em 0.12em; border-radius: 14px; background: linear-gradient(118deg, #1d4ed8 0%, var(--primary-color-500) 52%, #0ea5c4 100%); box-shadow: 0 12px 32px -14px rgba(37, 99, 235, 0.85); color: #ffffff; font-style: normal; font-family: inherit; } /* CUBE 2026 lockup, between the pill and the headline. This only ever had a phone override, so on every other width it inherited the template's paragraph style and rendered as 13px of grey body copy -- the event's own name, set smaller than its own footnotes. It is a wordmark now: uppercase, tracked out, with the year carrying the brand gradient. Sized to sit clearly under the headline rather than compete with it. */ .hero-wordmark { margin: 0 auto 12px; font-size: clamp(26px, 3.4vw, 44px); font-weight: 800; line-height: 1; letter-spacing: 0.16em; /* letter-spacing appends a trailing space to the last glyph, which throws a centred line off by half of it. */ text-indent: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.94); } .hero-wordmark span { background: linear-gradient(104deg, var(--sydon-cyan), var(--sydon-blue) 78%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Floating stat badges. * Rotation and drift are kept on separate CSS properties (`rotate` vs * `translate`) so the idle float can animate without clobbering each * badge's tilt, which a combined `transform` would. */ .hero-badge { position: absolute; z-index: 2; padding: 10px 18px; border-radius: 70px; background: var(--primary-color-500); color: #ffffff; font-size: 14px; font-weight: 700; white-space: nowrap; box-shadow: 0 16px 34px -12px rgba(37, 99, 235, 0.8); } .hero-badge-l1 { left: -118px; top: 26%; rotate: -4deg; } .hero-badge-l2 { left: -84px; top: 50%; rotate: -2deg; } .hero-badge-l3 { left: -132px; top: 74%; rotate: -5deg; } .hero-badge-r1 { right: -118px; top: 26%; rotate: 3deg; } .hero-badge-r2 { right: -88px; top: 50%; rotate: 2deg; } .hero-badge-r3 { right: -132px; top: 74%; rotate: 4deg; } /* The live one reads differently on purpose -- it is the "act now" cue. */ .hero-badge-live { display: inline-flex; align-items: center; gap: 9px; background: #ffffff; color: #0b1020; box-shadow: 0 16px 34px -12px rgba(0, 0, 0, 0.75); } .hero-badge-live::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #12b981; box-shadow: 0 0 0 0 rgba(18, 185, 129, 0.65); } @media (prefers-reduced-motion: no-preference) { .hero-badge { animation: badge-float 5.6s ease-in-out infinite; } .hero-badge-l2 { animation-delay: -0.9s; } .hero-badge-l3 { animation-delay: -2.1s; } .hero-badge-r1 { animation-delay: -1.4s; } .hero-badge-r2 { animation-delay: -3.0s; } .hero-badge-r3 { animation-delay: -0.4s; } .hero-badge-live::before { animation: badge-ping 2s ease-out infinite; } } @keyframes badge-float { 0%, 100% { translate: 0 -7px; } 50% { translate: 0 7px; } } @keyframes badge-ping { 0% { box-shadow: 0 0 0 0 rgba(18, 185, 129, 0.65); } 70% { box-shadow: 0 0 0 9px rgba(18, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(18, 185, 129, 0); } } /* Narrow viewports have no room beside the card; keep only two, then none. */ @media (max-width: 1319px) { .hero-badge-l2, .hero-badge-r2 { display: none; } } @media (max-width: 1199px) { .hero-badge-l1, .hero-badge-r1 { display: none; } } @media (max-width: 1023px) { .hero-badge { display: none; } } /* CTA reads as the one bright control on a dark ground. */ .home-banner .banner-btn { background-color: #ffffff; box-shadow: 0 18px 44px -16px rgba(0, 0, 0, 0.8); } .home-banner .banner-btn .primary-button-text, .home-banner .banner-btn .primary-button-text.dark { color: #0b1020; } .home-banner .banner-btn .primary-button-icon { filter: none; } .home-banner .primary-btn.v1 { display: none; } /* ================================================ WHY IT'S DIFFERENT * A frosted panel floating on a soft ground, with ambient gradient orbs * behind it. The comparison is the argument: the status-quo card is * deliberately flat and grey, the CUBE card carries the gradient. * * The supplied design used a warm orange -> coral -> purple -> blue mesh. * Driven from the brand cyan -> blue -> indigo instead, so it sits with the * rest of the site; swap --why-mesh below for the original warm values. */ .why-diff { --why-mesh: linear-gradient(135deg, #22d3ee 0%, #4f8dfb 34%, #2563eb 68%, #4338ca 100%); padding: 84px 20px 96px; /* Same ambient ground as the at-a-glance section, so the two light panels on this page read as one treatment rather than two. */ background-color: var(--amb-ground); background-image: var(--amb-layers); } .why-shell { position: relative; max-width: 1180px; margin: 0 auto; padding: clamp(26px, 4vw, 52px); border-radius: 40px; overflow: hidden; background: rgba(255, 255, 255, 0.65); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); border: 1px solid rgba(255, 255, 255, 0.85); box-shadow: 0 20px 40px -15px rgba(120, 110, 160, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.85), 0 1px 2px 0 rgba(0, 0, 0, 0.04); } /* Ambient lighting behind the frosted panel. */ .why-orb { position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; } .why-orb-a { top: -96px; left: -80px; width: 320px; height: 320px; background: linear-gradient(135deg, rgba(34, 211, 238, 0.36), rgba(96, 144, 250, 0.30) 50%, rgba(79, 70, 229, 0.20)); } .why-orb-b { top: 32%; right: -96px; width: 384px; height: 384px; background: linear-gradient(220deg, rgba(129, 152, 240, 0.34), rgba(37, 99, 235, 0.24)); } .why-orb-c { bottom: -96px; left: 34%; width: 320px; height: 320px; background: linear-gradient(0deg, rgba(147, 197, 253, 0.28), rgba(34, 211, 238, 0.22)); } .why-inner { position: relative; z-index: 1; display: grid; gap: clamp(38px, 5vw, 56px); } /* ---- header ---- */ .why-head { display: grid; justify-items: center; text-align: center; max-width: 780px; margin: 0 auto; } .why-eyebrow { display: inline-flex; align-items: center; padding: 6px 16px; margin-bottom: 18px; border-radius: 70px; background: rgba(255, 255, 255, 0.8); border: 1px solid #ffffff; font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #7c8293; } .why-title { margin: 0; font-size: clamp(28px, 4vw, 50px); font-weight: 500; line-height: 1.14; letter-spacing: -0.03em; color: #161922; } .why-accent { background: var(--why-mesh); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .why-sub { margin: 14px 0 0; max-width: 62ch; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.6; color: #5a6376; } /* ---- seven pillars ---- */ /* Matches .pg-head / .why-head: eyebrow pill, centred title at the section scale, centred lede. Previously this was a split row at two-thirds size, which is why it read as a different page. */ .wp-head { display: grid; justify-items: center; text-align: center; max-width: 780px; margin: 0 auto clamp(30px, 3.6vw, 44px); } .wp-kicker { display: inline-flex; align-items: center; padding: 6px 16px; margin: 0 0 18px; border-radius: 70px; background: rgba(255, 255, 255, 0.80); border: 1px solid rgba(255, 255, 255, 0.95); box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.9), 0 2px 8px -1px rgba(91, 97, 246, 0.10); font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #5c6577; } .wp-head h3 { margin: 0; font-size: clamp(28px, 4vw, 50px); font-weight: 500; line-height: 1.14; letter-spacing: -0.03em; color: #161922; } .wp-head p { margin: 14px 0 0; max-width: 62ch; text-align: center; font-size: clamp(15px, 1.25vw, 17px); line-height: 1.62; color: #5f6878; } .wp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } @media (max-width: 991px) { .wp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 599px) { .wp-grid { grid-template-columns: 1fr; } } .wp-card { padding: 26px 24px 24px; border-radius: 24px; background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: 0 6px 16px -10px rgba(120, 135, 165, 0.5); transition: background 200ms ease, box-shadow 200ms ease, transform 200ms ease; } .wp-card:hover { background: rgba(255, 255, 255, 0.96); box-shadow: 0 14px 30px -14px rgba(120, 135, 165, 0.6); transform: translateY(-2px); } .wp-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .wp-num { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 15px; background: var(--why-mesh); color: #ffffff; font-size: 14px; font-weight: 800; box-shadow: 0 8px 20px -4px rgba(37, 99, 235, 0.4); } .wp-cat { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #9aa1b1; } .wp-cat-brand { display: block; color: var(--primary-color-500); } /* Card titles sit at the site's card scale and weight, not bold-and-tight. */ .wp-card h4 { margin: 0 0 8px; font-size: clamp(17px, 1.5vw, 19px); font-weight: 500; letter-spacing: -0.02em; color: #151922; } .wp-card p { margin: 0; font-size: 14px; line-height: 1.62; color: #5f6878; } /* Seventh runs the full width of the grid. */ .wp-wide { grid-column: 1 / -1; display: flex; align-items: center; gap: 26px; background: rgba(255, 255, 255, 0.82); } @media (max-width: 767px) { .wp-wide { flex-direction: column; align-items: flex-start; gap: 14px; } } .wp-wide-head { display: flex; align-items: center; gap: 15px; flex: none; } .wp-wide p { flex: 1 1 auto; max-width: 62ch; } .wp-flag { flex: none; padding: 7px 14px; border-radius: 70px; background: #ffffff; border: 1px solid var(--primary-color-200); font-size: 11px; font-weight: 700; color: var(--primary-color-500); } /* ========================================================== EVENT TICKET * Boarding-pass layout ported from the supplied Tailwind design: main body * plus a 320px stub, split by a dashed perforation with semicircular * cut-outs punched at each end. * * Two deliberate departures from the source: * - the QR is the real Scanner.png, not the decorative inline SVG, so the * code under "scan to register" actually scans; * - the notches take their fill from --tkt-ground rather than a hard-coded * #EEF3FA, so they stay invisible if the section ground ever changes. */ .voucher { --tkt-blue: #2563eb; --tkt-edge: rgba(37, 99, 235, 0.18); --tkt-ground: #eef3fa; padding: 48px 24px 56px; background: var(--tkt-ground); } .voucher-inner { max-width: 1240px; margin: 0 auto; } .tkt { position: relative; display: flex; border-radius: 32px; overflow: hidden; background: #ffffff; border: 1px solid rgba(226, 232, 240, 0.8); box-shadow: 0 30px 60px -15px rgba(15, 23, 42, 0.12), 0 10px 25px -10px rgba(37, 99, 235, 0.08), 0 0 0 1px rgba(226, 232, 240, 0.9); } /* ---- main body ---- */ .tkt-main { position: relative; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(28px, 3.4vw, 48px); border-right: 2px dashed #cbd5e1; } /* The cut-outs that make it read as a torn ticket. */ .tkt-notch { position: absolute; right: -14px; width: 28px; height: 28px; border-radius: 50%; background: var(--tkt-ground); z-index: 3; } .tkt-notch-top { top: -14px; box-shadow: inset 0 -3px 5px rgba(0, 0, 0, 0.07); } .tkt-notch-bottom { bottom: -14px; box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.07); } /* ---- header ---- */ .tkt-head { display: flex; align-items: center; gap: 16px; margin-bottom: clamp(24px, 3vw, 40px); } /* Holds the CUBE lockup, not a line glyph. The mark is a cyan-to-blue gradient, so the badge's own blue gradient had to go -- one on the other is mud. White keeps the geometry and lets the mark supply the colour. */ .tkt-badge { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: #ffffff; border: 1px solid rgba(37, 99, 235, 0.16); box-shadow: 0 6px 16px -8px rgba(37, 99, 235, 0.45); } .tkt-badge-mark { display: block; width: 30px; height: auto; } .tkt-brand-text b { display: flex; align-items: center; gap: 6px; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: #0f172a; } .tkt-brand-text b i { font-style: normal; color: var(--tkt-blue); } .tkt-brand-text small { display: block; margin-top: 2px; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #94a3b8; } /* ---- rail + hero ---- */ .tkt-body { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: clamp(20px, 2.6vw, 40px); align-items: stretch; margin: auto 0; } /* Spread down the full height of the hero block, as in the source. */ .tkt-rail { list-style: none; margin: 0; padding: 8px 0; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; } .tkt-rail li { font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #94a3b8; white-space: nowrap; } .tkt-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; margin: 0 0 12px; font-size: clamp(44px, 6vw, 72px); font-weight: 900; letter-spacing: -0.035em; line-height: 1; color: #020617; } .tkt-hero span { color: var(--tkt-blue); } .tkt-sub { margin: 0 0 28px; font-size: clamp(11px, 1.05vw, 13px); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #64748b; } /* ---- prize banner ---- */ .tkt-prize { position: relative; overflow: hidden; display: flex; align-items: center; gap: clamp(18px, 2.2vw, 26px); padding: clamp(20px, 2.2vw, 28px); border-radius: 24px; background: linear-gradient(90deg, #1d4ed8, #2563eb 55%, #3b82f6); border: 1px solid rgba(96, 165, 250, 0.3); box-shadow: 0 20px 38px -10px rgba(37, 99, 235, 0.42), 0 4px 12px rgba(37, 99, 235, 0.2); color: #ffffff; } /* Security-print sheen, as in the source. */ .tkt-prize-sheen { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(37, 99, 235, 0.08) 50%, rgba(255, 255, 255, 0) 100%); } .tkt-prize-a, .tkt-prize-b { position: relative; z-index: 1; } .tkt-prize-a { flex: 1 1 0; min-width: 0; } .tkt-prize-label { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(219, 234, 254, 0.9); } .tkt-figure { margin: 0; font-size: clamp(28px, 3.4vw, 48px); font-weight: 900; letter-spacing: -0.03em; line-height: 1.1; color: #ffffff; } .tkt-words { display: block; margin-top: 4px; font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #bfdbfe; } .tkt-prize-div { width: 1px; height: 64px; background: rgba(96, 165, 250, 0.4); flex: none; } .tkt-prize-b { flex: 1 1 0; min-width: 0; max-width: 24rem; display: flex; align-items: center; gap: 16px; } .tkt-prize-ico { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.18); } .tkt-prize-b p { margin: 0; font-size: clamp(11px, 1vw, 12px); font-weight: 700; line-height: 1.45; letter-spacing: 0.04em; text-transform: uppercase; color: #ffffff; } /* ---- metadata row ---- */ .tkt-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 24px; padding-top: 32px; border-top: 1px solid #f1f5f9; } .tkt-fact { display: flex; align-items: center; gap: 14px; } .tkt-fact-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #eff6ff; color: var(--tkt-blue); border: 1px solid rgba(219, 234, 254, 0.6); } .tkt-fact-copy b { display: block; font-size: 13px; font-weight: 800; letter-spacing: -0.01em; text-transform: uppercase; color: #0f172a; } .tkt-fact-copy i { display: block; margin-top: 2px; font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #94a3b8; } .tkt-ico { width: 20px; height: 20px; } .tkt-prize-ico .tkt-ico { width: 24px; height: 24px; } /* ---- stub ---- */ .tkt-stub { flex: none; width: 320px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: clamp(24px, 2.6vw, 36px); text-align: center; background: #ffffff; } .tkt-stub-top { width: 100%; } .tkt-stub-brand { margin: 0 0 8px; font-size: 11px; font-weight: 900; letter-spacing: -0.01em; color: #0f172a; } .tkt-stub-brand i { font-style: normal; margin-left: 2px; color: var(--tkt-blue); } .tkt-admit { margin: 0 0 4px; font-size: clamp(22px, 2vw, 26px); font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tkt-blue); } .tkt-stub-tag { margin: 0 0 16px; font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #94a3b8; } .tkt-qr { display: inline-block; margin: auto 0; padding: 14px; border-radius: 16px; background: #ffffff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(226, 232, 240, 0.8); } .tkt-qr img { display: block; width: 132px; height: 132px; } .tkt-scan { margin: 8px 0 16px; font-size: 9px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #94a3b8; } .tkt-meta { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; border-top: 1px solid #f1f5f9; text-align: left; } .tkt-meta-div { width: 1px; height: 28px; background: #e2e8f0; flex: none; } .tkt-meta span { display: block; font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #94a3b8; } .tkt-meta b { font-size: 12px; font-weight: 900; letter-spacing: -0.01em; color: #0f172a; } .tkt-meta b.is-mono { font-family: 'Space Grotesk', ui-monospace, SFMono-Regular, Menlo, monospace; } .tkt-stub-foot { width: 100%; margin: 0; padding-top: 12px; border-top: 1px solid #f1f5f9; font-size: 8.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #94a3b8; } /* ---- responsive ---- */ /* Below the split the stub sits underneath, so the perforation and its notches move to the horizontal edge. */ @media (max-width: 1023px) { .tkt { flex-direction: column; } .tkt-main { border-right: 0; border-bottom: 2px dashed #cbd5e1; } .tkt-notch { right: auto; } .tkt-notch-top { top: auto; bottom: -14px; left: -14px; } .tkt-notch-bottom { bottom: -14px; right: -14px; left: auto; } .tkt-stub { width: 100%; } .tkt-qr { margin: 0 0 0; } } @media (max-width: 767px) { .voucher { padding: 32px 16px 40px; } .tkt { border-radius: 24px; } .tkt-body { grid-template-columns: minmax(0, 1fr); } .tkt-rail { flex-direction: row; flex-wrap: wrap; gap: 6px 16px; padding-top: 0; } .tkt-prize { flex-direction: column; align-items: flex-start; } .tkt-prize-div { width: 100%; height: 1px; } .tkt-prize-a, .tkt-prize-b { max-width: none; width: 100%; } .tkt-facts { grid-template-columns: 1fr; gap: 16px; padding-top: 24px; } } /* ============================================================ NAV CHROME * The template is an e-commerce theme: it ships a cart and a "Pages" * dropdown listing demo pages (Style Guide, License, 404...). Neither * belongs on an event site. Hidden rather than cut out, because Webflow's * markup for both is deeply nested and its scripts still reference it; * display:none also takes them out of the accessibility tree. */ .dropdown-v1.w-dropdown, .w-commerce-commercecartwrapper, [class*="commercecartopenlink"], [class*="commercecartcontainerwrapper"] { display: none !important; } /* .footer-text-link is white, for the template's dark footer variant. The contact email sits in the light footer, so it inherits instead. */ .footer-mail { color: inherit; text-decoration: none; } .footer-mail:hover { text-decoration: underline; } /* ==================================================== RESPONSIVE SYSTEM * Breakpoints, kept deliberately few and placed where the layout actually * breaks rather than per-device: * <=767px phone single column * <=1023px tablet two-up grids, decorative elements stand down * <=1279px small lap tighter gutters * >=1920px wide capped measures, no infinite stretch */ /* ---- 1. Hero fills the viewport ---- */ .section.home-banner { min-height: 100vh; min-height: 100svh; /* excludes mobile browser chrome */ display: grid; align-content: center; padding-top: clamp(104px, 14vh, 230px); padding-bottom: clamp(72px, 12vh, 190px); } /* ---- 2. Root causes of the sub-768px overflow ---- */ /* The marquee strip is intrinsically ~2000px; its wrappers must clip it. */ .section.home-slider, .marquee-wrapper { overflow: hidden; max-width: 100%; } /* .growth-image-wrap is inline-block, so a percentage max-width on the stage inside it resolves against a shrink-to-fit box and the fixed width wins. Making the wrapper a block gives the percentage something real to measure. */ .growth-image-wrap { display: block; width: 100%; } .cube-stage { width: 100%; max-width: 542px; margin-inline: auto; } /* ---- 3. Fluid gutters on the sections we added ---- */ .voucher { padding-inline: clamp(16px, 4vw, 24px); } .why-diff { padding-inline: clamp(14px, 3.5vw, 20px); } .cube-faces { padding-inline: clamp(16px, 4vw, 24px); } @media (max-width: 1023px) { .why-shell { padding: clamp(20px, 4vw, 32px); border-radius: 28px; } } /* ---- 4. Phone ---- */ @media (max-width: 767px) { /* Hero: the glass card and its type step down together. */ .home-banner .banner-wrap.v1 { padding: 32px 18px 30px; } .home-banner .banner-title { font-size: clamp(27px, 8vw, 40px); } .hero-wordmark { letter-spacing: 0.13em; text-indent: 0.13em; font-size: clamp(22px, 7vw, 30px); } .home-banner .banner-short-text { font-size: 14.5px; } /* Ticket: the padding that overflowed at 320. */ .tkt-main, .tkt-stub { padding: 20px 15px 18px; } .tkt-figure { font-size: clamp(26px, 8.5vw, 34px); } .voucher, .why-diff, .cube-faces { padding-block: 48px 52px; } /* Concept panel and cube stack rather than sit side by side. */ .faces-tabs { gap: 6px; } .faces-tab { padding: 6px 11px; font-size: 12px; } /* Section headings share one fluid scale. */ .voucher-title, .why-title, .faces-title { font-size: clamp(24px, 7vw, 34px); } /* Touch targets stay tappable. */ .faces-tab, .tk-cta, .faces-cta, .story-cta { min-height: 44px; } } /* Very small phones: the ticket's two-up meta grid becomes one. */ @media (max-width: 359px) { .tkt-meta { flex-direction: column; gap: 10px; } .tkt-meta div + div { border-left: 0; border-top: 1px solid rgba(120,165,230,.24); padding-top: 10px; } .home-banner .banner-wrap.v1 { padding: 26px 14px 24px; } } /* ---- 5. Tablet: two-up, not a stretched phone ---- */ @media (min-width: 768px) and (max-width: 1023px) { .wp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .voucher, .why-diff, .cube-faces { padding-block: 64px 70px; } } /* ---- 6. Small laptop: tighten gutters, keep the desktop structure ---- */ @media (min-width: 1024px) and (max-width: 1279px) { .voucher-inner, .why-shell, .faces-inner { padding-inline: 4px; } } /* ---- 7. Wide screens: cap the measure, do not stretch ---- */ @media (min-width: 1920px) { .voucher-inner { max-width: 1280px; } .why-shell { max-width: 1320px; } .faces-inner { max-width: 1320px; } .home-banner .banner-wrap.v1 { max-width: 1280px; } } /* ---- 8. Images never exceed their box ---- */ .cube-story img, .wp-card img, .faces-slide img { max-width: 100%; height: auto; } /* Ticket images are sized individually; a blanket height:auto here would override the wordmark and blow it up to natural size. */ .tkt-qr img { max-width: 100%; height: auto; } /* The badge hangs off the card at right:-40px. There is room for that on desktop; at tablet the card sits near the viewport edge, so it pushed the page 25px wide. Tuck it in rather than hide it. */ @media (max-width: 1023px) { .growth-image { right: -8px; } } @media (max-width: 767px) { .growth-image { right: 0; top: auto; bottom: 10px; } } /* ============================================ RESTORED + NAV GLOW * NOTE: the three scroll-section rules below were lost once already when an * earlier block was replaced by line range. They are appended at the end of * the file deliberately -- append, don't splice. */ /* The template gives this section a 400vh sticky-scroll track, leaving ~2300px of empty scrolling after its content. Collapse it. */ .scroll-section.propertie-v1 { height: auto; padding-top: 56px; padding-bottom: 56px; } .propertie-v1-sticky-wrap { position: static; } /* Webflow holds this at inline opacity:0 and reveals it via the scroll track above. With the track gone it would never fade in. */ .scroll-section.propertie-v1 .propertie-v1-wrap { opacity: 1 !important; } /* The strip above the marquee was removed, so its 150px top padding and the marquee's own 30px offset are dead space. */ .section.home-slider { padding-top: 26px; padding-bottom: 30px; } .section.home-slider .marquee-wrapper { margin-top: 0; } /* ---- nav glow ---- * A soft bloom sits behind the hovered / current item, the way the active * item lights up in the reference. Pure CSS: no JS, nothing to keep in sync. */ .nav-item-link { position: relative; z-index: 1; } .nav-item-link::before { content: ""; position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; background: radial-gradient(circle, rgba(64, 140, 255, 0.90) 0%, rgba(120, 96, 255, 0.55) 34%, rgba(34, 211, 238, 0.28) 58%, transparent 74%); filter: blur(11px); opacity: 0; transform: scale(0.55); transition: opacity 300ms ease, transform 380ms cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; z-index: -1; } .nav-item-link:hover::before, .nav-item-link:focus-visible::before { opacity: 1; transform: scale(1); } /* The current page keeps a quieter version of the same light. */ .nav-item-link.w--current::before { opacity: 0.55; transform: scale(0.9); } .nav-item-link:hover, .nav-item-link.w--current { color: #ffffff; } /* The nav's Register CTA carries a permanent bloom, like the lifted item in the reference. */ .navbar-wrapper-v1 a[href*="goavo"] { position: relative; } .navbar-wrapper-v1 a[href*="goavo"]::after { content: ""; position: absolute; inset: -7px -5px; border-radius: 70px; background: radial-gradient(circle at 50% 60%, rgba(64, 140, 255, 0.55), rgba(120, 96, 255, 0.28) 45%, transparent 70%); filter: blur(9px); opacity: 0.75; pointer-events: none; z-index: -1; } @media (prefers-reduced-motion: no-preference) { .navbar-wrapper-v1 a[href*="goavo"]::after { animation: cube-pulse 5s ease-in-out infinite; } } /* The template only sets width on these, so each card took its source image's own ratio -- one square and two portrait gave three different card heights. Pinning the ratio makes the row uniform and crops rather than distorts. */ .blog-image { width: 100%; height: auto; aspect-ratio: 4 / 3; /* Sources are square and portrait; cover was slicing them in half. Contain keeps the whole artwork legible. */ object-fit: contain; background: #f3f7fd; border-radius: 12px; } /* ============================================================== TIMELINE * A serpentine path weaves between two columns of milestones and draws * itself as the reader scrolls. Every milestone row is the same height, so * node i lands at (i + 0.5)/N of both the SVG viewBox and the layout and the * two line up without measuring anything at runtime. */ .tl-section { padding: 84px 24px 96px; background: #ffffff; } .tl-inner { max-width: 1080px; margin: 0 auto; } .tl-head { text-align: center; max-width: 720px; margin: 0 auto 56px; } .tl-eyebrow { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--primary-color-500); } .tl-heading { margin: 0; font-size: clamp(28px, 4vw, 50px); font-weight: 500; line-height: 1.08; letter-spacing: -0.03em; color: var(--primary-black-500); } .tl-lede { margin: 14px 0 0; color: var(--primary-black-400); } .tl { position: relative; } .tl-path { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .tl-items { position: relative; list-style: none; margin: 0; padding: 0; display: grid; } /* Equal rows are what keeps the dots on the path. */ .tl-item { position: relative; min-height: 190px; display: grid; align-items: center; } .tl-dot { position: absolute; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(140deg, #22d3ee, var(--primary-color-500)); box-shadow: 0 12px 30px -10px rgba(37, 99, 235, 0.75), 0 0 0 7px rgba(37, 99, 235, 0.10); z-index: 1; } .tl-dot b { font-size: 15px; font-weight: 800; color: #ffffff; letter-spacing: 0.02em; } .tl-left .tl-dot { left: 22%; } .tl-right .tl-dot { left: 78%; } .tl-card { max-width: 44ch; } .tl-left .tl-card { margin-left: 29%; margin-right: 3%; } .tl-right .tl-card { margin-right: 29%; margin-left: 3%; text-align: right; } .tl-date { margin: 0 0 5px; font-size: 12.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary-color-500); } .tl-title { margin: 0 0 7px; font-size: clamp(19px, 2vw, 25px); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; color: var(--primary-black-500); } /* Six of the nine milestones link to a post; three are dates with no write-up. A linked one has to read as the same heading as an unlinked one -- left to the template's anchor colour it came out bright blue, so the list looked like six links and three headings rather than one timeline. The affordance is a hairline rule that firms up on hover. */ .tl-link { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(37, 99, 235, 0.26); transition: color .2s ease, border-color .2s ease; } .tl-link:hover { color: #2563eb; border-bottom-color: #2563eb; } .tl-link:focus-visible { outline: 2px solid #2563eb; outline-offset: 3px; border-bottom-color: transparent; } .tl-note { margin: 0; font-size: 14px; line-height: 1.6; color: var(--primary-black-400); } /* Reveal — only once the driver is running, so no-JS shows everything. */ .tl-live .tl-item { opacity: 0; transform: translateY(24px); transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1), transform 620ms cubic-bezier(0.22, 1, 0.36, 1); } .tl-live .tl-item.is-in { opacity: 1; transform: none; } .tl-live .tl-dot { transition: scale 520ms cubic-bezier(0.34, 1.56, 0.64, 1) 120ms; scale: 0.5; } .tl-live .tl-item.is-in .tl-dot { scale: 1; } @media (prefers-reduced-motion: no-preference) { .tl-item.is-in .tl-dot { animation: cube-pulse 4.5s ease-in-out 700ms infinite; } } /* Tablet: pull the columns in so cards keep a usable measure. */ @media (max-width: 1023px) { .tl-left .tl-dot { left: 16%; } .tl-right .tl-dot { left: 84%; } .tl-left .tl-card { margin-left: 23%; } .tl-right .tl-card { margin-right: 23%; } } /* Phone: one column with a straight rail; the serpentine has no room. */ @media (max-width: 767px) { .tl-section { padding: 56px 18px 64px; } .tl-path { display: none; } .tl { padding-left: 6px; } .tl-items { border-left: 3px solid rgba(37, 99, 235, 0.16); } .tl-item { min-height: 0; padding: 18px 0 18px 0; } .tl-dot { left: 0; top: 26px; margin: 0 0 0 -25px; width: 46px; height: 46px; } .tl-left .tl-dot, .tl-right .tl-dot { left: 0; } .tl-left .tl-card, .tl-right .tl-card { margin: 0 0 0 42px; text-align: left; max-width: none; } } /* ========================================================================== PROGRAMME — event at a glance · kickoff agenda · prizes · defence Appended, never spliced. Typography deliberately matches the why-section scale (eyebrow 11/800/0.16em, title clamp 28–50 at weight 500) so these read as the same voice rather than a bolted-on block. ========================================================================== */ .pg { position: relative; } .pg .container { position: relative; z-index: 1; } .pg-head { display: grid; justify-items: center; text-align: center; max-width: 780px; margin: 0 auto clamp(34px, 4.4vw, 52px); } .pg-eyebrow { display: inline-flex; align-items: center; padding: 6px 16px; margin: 0 0 18px; border-radius: 70px; background: rgba(37, 99, 235, 0.07); border: 1px solid rgba(37, 99, 235, 0.14); font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #5c6577; } .pg-title { margin: 0; font-size: clamp(28px, 4vw, 50px); font-weight: 500; line-height: 1.14; letter-spacing: -0.03em; color: #161922; } .pg-lede { margin: 14px 0 0; max-width: 62ch; font-size: clamp(15px, 1.25vw, 17px); line-height: 1.62; color: #5f6878; } /* --------------------------------------------------------- at a glance --- */ /* Ethereal glass treatment, ported from the supplied Tailwind design. Light ambient ground with chromatic glows, a frosted panel, and frosted tiles inside it. The section title keeps the site's 500 weight rather than the design's extrabold, so it still matches every other heading. */ .pg-glance { position: relative; overflow: hidden; padding: clamp(64px, 7vw, 104px) 0; background-color: var(--amb-ground); background-image: var(--amb-layers); } /* Two blurred accents over the ground, as in the reference. */ .gl-orb { position: absolute; border-radius: 50%; filter: blur(64px); pointer-events: none; z-index: 0; } .gl-orb-a { top: -48px; left: 22%; width: 288px; height: 288px; background: linear-gradient(135deg, rgba(147, 197, 253, 0.42), rgba(129, 152, 240, 0.32) 50%, rgba(34, 211, 238, 0.22)); } .gl-orb-b { bottom: -64px; right: 20%; width: 320px; height: 320px; background: linear-gradient(45deg, rgba(147, 197, 253, 0.30), rgba(129, 152, 240, 0.30) 50%, rgba(34, 211, 238, 0.20)); } /* ---- eyebrow badge ---- */ .pg-eyebrow.gl-badge { gap: 8px; background: rgba(255, 255, 255, 0.70); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.90); box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.9), 0 2px 8px -1px rgba(91, 97, 246, 0.12); color: #334155; letter-spacing: 0.09em; } .gl-dot { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(90deg, #22d3ee, #60a5fa 50%, #4f46e5); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); } @media (prefers-reduced-motion: no-preference) { .gl-dot { animation: gl-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } } @keyframes gl-pulse { 50% { opacity: 0.45; } } .pg-glance .pg-title { color: #0f172a; } .pg-glance .pg-lede { color: #475569; } /* ---- frosted panel + tiles ---- */ .gl-panel { position: relative; z-index: 1; padding: clamp(12px, 1.6vw, 24px); border-radius: 40px; background: rgba(255, 255, 255, 0.65); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); border: 1px solid rgba(255, 255, 255, 0.85); box-shadow: 0 20px 40px -15px rgba(120, 110, 160, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.85), 0 1px 2px 0 rgba(0, 0, 0, 0.04); } .pg-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.1vw, 16px); } .gl-tile { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(26px, 2.4vw, 32px); border-radius: 24px; background: rgba(255, 255, 255, 0.45); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.75); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); transition: background .35s cubic-bezier(0.16, 1, 0.3, 1), transform .35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .35s cubic-bezier(0.16, 1, 0.3, 1); } .gl-tile:hover { background: rgba(255, 255, 255, 0.75); transform: translateY(-2px); box-shadow: 0 25px 45px -12px rgba(91, 97, 246, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.90); } /* Warm accent behind the prize figure only. */ .gl-glow { position: absolute; top: -44px; right: -44px; width: 168px; height: 168px; border-radius: 50%; /* Radial + blur, or the disc reads as a hard shape rather than a glow. */ background: radial-gradient(circle at 60% 40%, rgba(125, 211, 252, 0.55) 0%, rgba(147, 166, 244, 0.34) 45%, rgba(147, 166, 244, 0) 72%); filter: blur(18px); pointer-events: none; } .gl-tile-top { position: relative; z-index: 1; } .gl-num { margin: 0 0 16px; font-size: clamp(36px, 3.6vw, 48px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; /* Digits must not reflow the tile while the count runs. */ font-variant-numeric: tabular-nums; transform-origin: left center; transition: transform .3s ease; } .gl-tile:hover .gl-num { transform: scale(1.02); } .gl-num.is-blue { color: #2563eb; } .gl-num.is-indigo { color: #4f46e5; } .gl-num.is-slate { color: #1e293b; } .gl-num.is-grad-indigo, .gl-num.is-grad-accent { -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .gl-num.is-grad-indigo { background-image: linear-gradient(135deg, #2563eb 0%, #4361e8 50%, #4f46e5 100%); } .gl-num.is-grad-accent { background-image: linear-gradient(135deg, #22d3ee 0%, #3b82f6 55%, #4f46e5 100%); } .gl-label { margin: 0 0 4px; font-size: clamp(16px, 1.3vw, 18px); font-weight: 700; letter-spacing: -0.015em; color: #0f172a; } .gl-note { position: relative; z-index: 1; margin: 8px 0 0; padding-top: 8px; border-top: 1px solid rgba(226, 232, 240, 0.5); font-size: clamp(12px, 1vw, 14px); font-weight: 500; line-height: 1.6; color: #64748b; } /* ---- fact row ---- */ /* Shared: the explore-cube hero uses this row too, so it outlives the kickoff section it was written for. */ .pg-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0 0 clamp(28px, 3.4vw, 40px); } .pg-fact { padding: 16px 18px; border-radius: 14px; background: #ffffff; border: 1px solid #e4ebf4; } .pg-fact span { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #8b94a5; } .pg-fact b { display: block; margin-top: 6px; font-size: 15px; font-weight: 600; line-height: 1.4; color: #161922; } /* -------------------------------------------------------------- prizes --- */ /* Same glass vocabulary as "event at a glance", which was itself ported from the supplied Tailwind design: ambient ground, a frosted 40px shell, 24px tiles inside it. The radii are the section's, not the reference's 36/44 -- matching the page matters more than matching the mock. */ .pg-prizes { position: relative; overflow: hidden; padding: clamp(64px, 7vw, 100px) 0; background-color: var(--amb-ground); background-image: var(--amb-layers); } .pg-prizes .pg-title { color: #0f172a; } .pg-prizes .pg-lede { color: #475569; } .pg-prize-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(12px, 1.1vw, 16px); grid-template-columns: repeat(4, 1fr); align-items: stretch; } /* The tile. Mirrors .gl-tile so the two sections read as one system. */ .pg-prize { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; min-height: 260px; padding: clamp(22px, 2vw, 28px); border-radius: 24px; background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.8); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); transition: background .35s cubic-bezier(0.16, 1, 0.3, 1), transform .35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .35s cubic-bezier(0.16, 1, 0.3, 1); } .pg-prize:hover { background: rgba(255, 255, 255, 0.92); transform: translateY(-2px); box-shadow: 0 25px 45px -12px rgba(91, 97, 246, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.90); } .pg-prize-top { position: relative; z-index: 1; } /* The cash card. It used to be the one black card in a white row; the glance section states the same figure on a light tile with a glow behind it, so this now does too and the two agree. */ .pg-prize.is-lead { border-color: rgba(191, 211, 254, 0.8); } .pg-prize.is-lead .pg-prize-big { background-image: linear-gradient(135deg, #22d3ee 0%, #3b82f6 55%, #4f46e5 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Icon chip. The bare icon read as an afterthought at this card size. */ .pg-chip { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; } .pg-chip .pg-ico { width: 19px; height: 19px; color: inherit; } .pg-chip.is-blue { background: #eff4ff; color: #2563eb; } .pg-chip.is-indigo { background: #eef0fe; color: #4f46e5; } .pg-chip.is-sky { background: #ecf7fe; color: #0284c7; } .pg-chip.is-violet { background: #f3f0fe; color: #7c3aed; } .pg-prize-big { margin: 16px 0 0; font-size: clamp(26px, 2.8vw, 34px); font-weight: 700; letter-spacing: -0.035em; line-height: 1; color: #0f172a; } .pg-prize h3 { margin: 10px 0 0; font-size: 16px; font-weight: 600; letter-spacing: -0.015em; color: #0f172a; } /* Body sits at the foot of the tile behind a rule, as .gl-note does. */ .pg-prize-body { position: relative; z-index: 1; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid rgba(226, 232, 240, 0.7); font-size: 13px; line-height: 1.62; color: #64748b; } /* ------------------------------------------------- grand finale defence --- */ /* The last round should not look like the two that precede it. */ /* The card is painted by the link itself, not by the wrap inside it. */ .faq-v1-tabs-link-2.is-finale { position: relative; background: linear-gradient(96deg, rgba(37, 99, 235, 0.10), rgba(34, 211, 238, 0.05)) !important; box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.18); } .faq-v1-tabs-link-2.is-finale::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, #22d3ee, #2563eb); } .faq-v1-tabs-link-2.is-finale .faq-v1-question-2 { font-weight: 600; } /* --------------------------------- six capabilities instead of four ------ */ .feedback-block.is-six { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .feedback-block.is-six .pricing-left-block { width: auto; margin: 0; } /* ---------------------------------------------------------- responsive --- */ /* Four prize cards need more room than three of anything else. */ @media (max-width: 1199px) { .pg-prize-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 1023px) { .pg-stats, .feedback-block.is-six { grid-template-columns: repeat(2, 1fr); } .pg-facts { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 599px) { .pg-stats, .pg-prize-grid, .pg-facts, .feedback-block.is-six { grid-template-columns: 1fr; } .pg-glance, .pg-prizes { padding: 52px 0; } /* The frosted panel is the rounded element now, and it tightens up. */ .gl-panel { border-radius: 28px; padding: 10px; } } /* ========================================================================== ABOUT — programme figures and the "who runs CUBE" grid Appended, never spliced. The stats strip replaces the template's slot-machine odometers, which counted invented agency numbers. ========================================================================== */ .ab-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: clamp(24px, 3vw, 34px); } .ab-stat { padding: 22px 20px; border-radius: 16px; background: #ffffff; border: 1px solid #e4ebf4; } .ab-stat-num { margin: 0; font-size: clamp(26px, 3vw, 38px); font-weight: 600; letter-spacing: -0.035em; line-height: 1; background: linear-gradient(120deg, #22d3ee 0%, #2563eb 70%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .ab-stat-label { margin: 12px 0 0; font-size: 15px; font-weight: 600; color: #151922; } .ab-stat-note { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: #6b7486; } /* The template's social buttons held icon images; these hold short labels. */ .ab-social { display: inline-flex; align-items: center; padding: 0 12px; height: 30px; border-radius: 70px; border: 1px solid rgba(255, 255, 255, 0.28); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: inherit; white-space: nowrap; } @media (max-width: 767px) { .ab-stats { grid-template-columns: 1fr; } } /* Four principles where the template laid out three, so the divider lines are gone and the row becomes a real grid. */ .about-info-wrapper { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.4vw, 32px); } .about-info-wrapper .single-about-info { width: auto; max-width: none; } /* Cards aligned to a common image box, so the row does not stagger. */ .team-v1-single-img { aspect-ratio: 4 / 3; width: 100%; height: auto; object-fit: cover; border-radius: 14px; background: #eef3fb; } /* The template's social buttons were icon-sized; these carry a text label. */ .member-social-link:has(.ab-social) { width: auto; height: auto; min-width: 0; padding: 0; background: none; border: 0; } @media (max-width: 1023px) { .about-info-wrapper { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 599px) { .about-info-wrapper { grid-template-columns: 1fr; } } /* Brand band in place of the about page's stock video. */ /* Capability cards: the template centred a 132px logo here. These carry a drawn illustration instead, so it needs most of the panel. */ .pricing-logo.cap-art { width: min(82%, 340px); height: auto; max-height: 78%; object-fit: contain; } @media (max-width: 599px) { .pricing-logo.cap-art { width: min(88%, 300px); } } /* ========================================================================== EXPLORE CUBE — the page the secondary CTA always promised Reuses the .pg-* head/eyebrow/fact scale so it reads as the same voice as the home page rather than a separate microsite. Appended, never spliced. ========================================================================== */ /* Ambient ground, matching the at-a-glance and pillars sections. */ .xp-hero, .xp-rules { position: relative; overflow: hidden; background-color: var(--amb-ground); background-image: var(--amb-layers); } .xp-hero { padding: clamp(72px, 8vw, 128px) 0 clamp(56px, 6vw, 88px); } .xp-h1 { font-size: clamp(34px, 5.2vw, 66px); } .xp-hero .pg-head { max-width: 900px; } /* Frosted tiles on the ambient ground, same recipe as .gl-tile. */ .xp-hero .pg-fact, .xp-rule { background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.75); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); transition: background .35s cubic-bezier(0.16, 1, 0.3, 1), transform .35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .35s cubic-bezier(0.16, 1, 0.3, 1); } .xp-hero .pg-fact:hover, .xp-rule:hover { background: rgba(255, 255, 255, 0.80); transform: translateY(-2px); box-shadow: 0 25px 45px -12px rgba(91, 97, 246, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.90); } .xp-hero .pg-eyebrow, .xp-rules .pg-eyebrow { background: rgba(255, 255, 255, 0.80); border-color: rgba(255, 255, 255, 0.95); box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.9), 0 2px 8px -1px rgba(91, 97, 246, 0.10); } /* ---- four faces ---- */ .xp-faces { background: #0c1017; padding: clamp(64px, 7vw, 100px) 0; } .xp-faces .pg-title { color: #f3f6fb; } .xp-faces .pg-lede { color: #97a2b5; } .xp-faces .pg-eyebrow { background: rgba(34, 211, 238, 0.10); border-color: rgba(34, 211, 238, 0.24); color: #7fe6f6; } .xp-faces-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .xp-face { padding: 26px 24px 24px; border-radius: 18px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.09); } .xp-letter { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-bottom: 16px; border-radius: 12px; background: linear-gradient(135deg, #22d3ee, #2563eb); color: #06121f; font-size: 19px; font-weight: 700; } .xp-face h3 { margin: 0; font-size: 20px; font-weight: 500; letter-spacing: -0.02em; color: #f3f6fb; } .xp-face-head { margin: 6px 0 0; font-size: 14px; font-weight: 600; color: #7fe6f6; } .xp-face-body { margin: 10px 0 0; font-size: 14px; line-height: 1.62; color: #97a2b5; } .xp-face-values { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.09); font-size: 11.5px; letter-spacing: 0.04em; color: #6f7c92; } /* ---- three rounds ---- */ .xp-rounds { padding: clamp(64px, 7vw, 100px) 0; } .xp-rounds-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .xp-round { display: grid; grid-template-columns: 190px 1fr; gap: clamp(20px, 3vw, 44px); padding: clamp(24px, 3vw, 34px); background: #ffffff; border: 1px solid #e4ebf4; border-radius: 18px; } .xp-round-side { display: flex; flex-direction: column; gap: 10px; } .xp-round-n { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 13px; background: linear-gradient(135deg, #22d3ee, #2563eb); color: #ffffff; font-size: 14px; font-weight: 700; } .xp-round-when { font-size: 11.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #8b94a5; } .xp-round-main h3 { margin: 0; font-size: clamp(19px, 2vw, 24px); font-weight: 500; letter-spacing: -0.02em; color: #151922; } .xp-round-main p { margin: 10px 0 0; font-size: 15px; line-height: 1.66; color: #5f6878; } .xp-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; } .xp-tags li { padding: 5px 12px; border-radius: 70px; background: rgba(37, 99, 235, 0.07); border: 1px solid rgba(37, 99, 235, 0.14); font-size: 12.5px; font-weight: 600; color: #3f5878; } /* ---- five domains ---- */ .xp-domains { background: #f7f9fc; padding: clamp(64px, 7vw, 100px) 0; } .xp-domain-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .xp-domain { display: flex; flex-direction: column; overflow: hidden; background: #ffffff; border: 1px solid #e4ebf4; border-radius: 18px; } .xp-domain img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; } .xp-domain-copy { padding: 22px 22px 24px; } .xp-domain-copy h3 { margin: 0; font-size: 19px; font-weight: 500; letter-spacing: -0.02em; color: #151922; } .xp-domain-line { margin: 6px 0 0; font-size: 14px; font-weight: 600; color: #2563eb; } .xp-domain-body { margin: 10px 0 0; font-size: 14px; line-height: 1.62; color: #5f6878; } /* ---- key dates ---- */ .xp-dates { padding: clamp(64px, 7vw, 100px) 0; } .xp-dates-list { list-style: none; margin: 0 auto; padding: 0; max-width: 860px; border: 1px solid #e4ebf4; border-radius: 18px; overflow: hidden; } .xp-date { display: grid; grid-template-columns: 240px 1fr; gap: 20px; padding: 18px clamp(18px, 2.4vw, 28px); border-bottom: 1px solid #eef2f8; } .xp-date:last-child { border-bottom: 0; } .xp-date:nth-child(odd) { background: #fbfcfe; } .xp-date-when { font-size: 13px; font-weight: 700; letter-spacing: 0.01em; color: #2563eb; align-self: center; } .xp-date-what b { display: block; font-size: 15px; font-weight: 600; color: #151922; } .xp-date-what i { display: block; margin-top: 3px; font-size: 13.5px; font-style: normal; color: #6b7486; } /* ---- rules ---- */ .xp-rules { padding: clamp(64px, 7vw, 100px) 0; } .xp-rules-list { position: relative; z-index: 1; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .xp-rule { padding: 24px 24px 22px; border-radius: 20px; } .xp-rule dt { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.015em; color: #151922; } .xp-rule dd { margin: 8px 0 0; font-size: 14px; line-height: 1.62; color: #5f6878; } /* ---- shared footer CTA ---- */ /* Sits on the template's purple gradient, between headline and buttons. */ .cta-deadline { margin: 0 0 26px; font-size: clamp(14px, 1.15vw, 16px); font-weight: 500; line-height: 1.6; /* Sits on the darkest part of the gradient, so it needs the weight. */ color: rgba(18, 16, 38, 0.80); } /* ---- responsive ---- */ @media (max-width: 1023px) { .xp-faces-grid { grid-template-columns: repeat(2, 1fr); } .xp-domain-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .xp-round { grid-template-columns: 1fr; gap: 16px; } .xp-round-side { flex-direction: row; align-items: center; gap: 14px; } .xp-date { grid-template-columns: 1fr; gap: 6px; } .xp-rules-list { grid-template-columns: 1fr; } } @media (max-width: 599px) { .xp-faces-grid, .xp-domain-grid { grid-template-columns: 1fr; } } /* The template floats a stat badge over this panel ("4.9 Rataed agency", rewritten to the prize pool by brand/content.js). The prizes page and the at-a-glance counters both carry that figure already, and here it sat on top of the artwork beside a list of rounds that is not about money. Hidden rather than cut, the way the cart and the old navbar are: it is template furniture, and a fresh scrape would put it straight back. */ .works-bg-wrapper .top-image-wrap { display: none !important; } /* ========================================================================== ROUNDS PANEL ART The gradient panel beside "Your agent was never meant to work alone" used to float a small centred diagram. It now carries a full render, so the image becomes the panel rather than an object inside it; the white prize-pool card keeps its contrast against the darker ground. ========================================================================== */ .center-image.rounds-art { position: absolute; inset: 0; /* The template pins this at left:40% and caps it at 200px/140px on the narrower breakpoints; the class pair out-specifies all three. */ left: 0; width: 100%; height: 100%; max-width: none; /* The template centres this with translate(-50%, -50%); at full size that only drags it off the panel. */ transform: none; object-fit: cover; /* The focal point (the cart in the hand) sits a little above centre. */ object-position: 50% 47%; } /* ========================================================================== BOTTOM FOOTER The template's footer is a Webflow grid addressed through generated `#w-node-...` ids: four columns, fixed cells, and a `margin-top: 26px` on the last one. Once the demo columns were swapped for real Sydon links the cell map no longer matched the children, so the columns wrapped into a staircase and the copyright sat 220px below everything. apply-chrome.js now emits the whole subtree with no generated ids, which makes every one of those rules inert and leaves the layout here: one row of five columns -- brand, three link lists, socials -- over a rule, with the fine print beneath it. Each breakpoint restates gap/padding in full because the template sets them again at 991/767/479 and would otherwise win inside its own media query. ========================================================================== */ .footer-wrapper.v1 { display: grid; grid-template-columns: minmax(260px, 1.5fr) repeat(4, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 56px); row-gap: 48px; align-items: start; width: 100%; margin-bottom: 0; padding-top: clamp(48px, 6vw, 76px); } /* ---- brand column ---- */ .syd-foot-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; max-width: 360px; } .syd-foot-logo-link { display: inline-block; } .syd-foot-tagline { margin: 0; max-width: 30ch; font-size: 15px; line-height: 1.55; letter-spacing: -0.01em; color: var(--primary-black-500); } .syd-foot-meta { display: grid; gap: 16px; margin: 0; } .syd-foot-meta > div { display: grid; gap: 5px; } .syd-foot-meta dt { font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--primary-black-300); } .syd-foot-meta dd { margin: 0; font-size: 14px; line-height: 1.55; color: var(--primary-black-400); } /* ---- link columns ---- */ .syd-foot-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .footer-nav-title.v2.syd-foot-col-title { margin: 0; font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--primary-black-300); } .syd-foot-links { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; } .footer-text-link.syd-foot-link { font-size: 14px; line-height: 1.4; color: var(--primary-black-400); text-decoration: none; transition: color 0.18s ease; } .footer-text-link.syd-foot-link:hover { color: var(--primary-color-500); } /* ---- socials ---- */ /* The icon spans both rows so the network name and the handle stack beside it -- the handle is the part people search for, so it stays visible. */ .syd-foot-social-list { display: flex; flex-direction: column; gap: 14px; } .syd-foot-social-link { display: grid; grid-template-columns: 16px auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-decoration: none; color: var(--primary-black-400); transition: color 0.18s ease; } .syd-foot-social-icon { grid-row: 1 / 3; width: 16px; height: 16px; color: var(--primary-black-300); transition: color 0.18s ease; } .syd-foot-social-name { font-size: 14px; line-height: 1.25; } .syd-foot-social-handle { font-size: 12px; line-height: 1.3; color: var(--primary-black-300); } .syd-foot-social-link:hover { color: var(--primary-color-500); } .syd-foot-social-link:hover .syd-foot-social-icon { color: var(--primary-color-500); } /* ---- fine print ---- */ .footer-copy-wrap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; margin-top: clamp(40px, 5vw, 64px); padding-top: 22px; padding-bottom: 8px; border-top: 1px solid var(--primary-black-100); } .footer-copy-wrap .copy-text { margin: 0; font-size: 12.5px; font-weight: 300; line-height: 1.55; color: var(--primary-black-400); } .syd-foot-copy-legal { display: flex; gap: 20px; flex-shrink: 0; } .syd-foot-copy-legal .footer-text-link.syd-foot-link { font-size: 12.5px; } /* ---- responsive ---- */ /* Below the five-column width the brand block goes full width and lays its own contents out sideways, so the four link columns keep a full row. */ @media (max-width: 1199px) { .footer-wrapper.v1 { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; row-gap: 44px; margin-bottom: 0; padding-top: 56px; } .syd-foot-brand { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 20px 48px; max-width: 100%; } .syd-foot-brand .syd-foot-tagline { flex: 1 1 220px; } .syd-foot-meta { grid-auto-flow: column; gap: 48px; } } @media (max-width: 767px) { .footer-wrapper.v1 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 36px; margin-bottom: 0; padding-top: 44px; } .syd-foot-brand { flex-direction: column; gap: 18px; } .syd-foot-meta { grid-auto-flow: row; gap: 16px; } .footer-copy-wrap { flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 40px; } } @media (max-width: 479px) { .footer-wrapper.v1 { column-gap: 20px; row-gap: 32px; padding-top: 36px; } .syd-foot-social-list { gap: 12px; } } /* ========================================================================== LEGAL DOCUMENTS — /terms and /privacy A long document needs different typography from a marketing section: a measure that stays readable at 24 sections, a sticky index because nobody scrolls a policy looking for clause 17, and section numbers set outside the text column so the headings still scan as a list. Built by apply-legal.js from brand/legal.js. ========================================================================== */ .lg-hero { padding: clamp(72px, 8vw, 116px) 0 clamp(28px, 3vw, 44px); } .lg-head { justify-items: start; text-align: left; margin-left: 0; max-width: 760px; } .lg-head .pg-lede { margin-top: 18px; } .lg-updated { margin: 22px 0 0; font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--primary-black-300); } .lg-doc { padding: 0 0 clamp(72px, 8vw, 112px); } .lg-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; } /* ---- index ---- */ .lg-toc { position: sticky; top: 104px; padding: 22px 20px; border: 1px solid var(--primary-black-100); border-radius: 18px; background: #fff; max-height: calc(100vh - 140px); overflow-y: auto; } .lg-toc-title { margin: 0 0 14px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--primary-black-300); } .lg-toc-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; } .lg-toc-list a { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; font-size: 13px; line-height: 1.35; color: var(--primary-black-400); text-decoration: none; transition: color 0.18s ease; } .lg-toc-list a span { color: var(--primary-black-300); font-variant-numeric: tabular-nums; } .lg-toc-list a:hover, .lg-toc-list a:hover span { color: var(--primary-color-500); } /* ---- document ---- */ .lg-article { max-width: 72ch; } .lg-intro { margin: 0 0 clamp(32px, 4vw, 48px); padding-bottom: clamp(28px, 3.5vw, 40px); border-bottom: 1px solid var(--primary-black-100); font-size: clamp(15.5px, 1.3vw, 17.5px); line-height: 1.68; color: var(--primary-black-500); } .lg-section { scroll-margin-top: 104px; } .lg-section + .lg-section { margin-top: clamp(32px, 4vw, 44px); } .lg-h2 { display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: baseline; margin: 0 0 14px; font-size: clamp(18px, 1.7vw, 21px); font-weight: 500; line-height: 1.28; letter-spacing: -0.015em; color: #161922; } .lg-num { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--primary-color-500); font-variant-numeric: tabular-nums; } .lg-body { padding-left: 46px; display: grid; gap: 14px; } .lg-body p { margin: 0; font-size: 15px; line-height: 1.72; color: var(--primary-black-400); } .lg-body a, .lg-cross a { color: var(--primary-color-500); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .lg-cross { margin: clamp(36px, 4vw, 52px) 0 0; padding-top: 24px; border-top: 1px solid var(--primary-black-100); font-size: 14px; color: var(--primary-black-400); } @media (max-width: 991px) { .lg-layout { grid-template-columns: 1fr; gap: 32px; } .lg-toc { position: static; max-height: none; } .lg-toc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 599px) { .lg-toc-list { grid-template-columns: 1fr; } .lg-h2 { grid-template-columns: 34px minmax(0, 1fr); } .lg-body { padding-left: 34px; } } /* ---- footer CTA and wordmark ---- */ /* Same problem the hero had: the template's secondary CTA is a ghost button with white type, and the footer CTA gradient is light, so "Explore CUBE" was white on near-white. Ink type plus a hairline, matching the hero. Giving it a border and a fill turns a ghost button into a pill, and the template's `padding: 7px 0` leaves a pill with no horizontal padding at all -- label hard against the left edge, arrow against the right. Every place we do that has to pay for the padding too, so it lives here once. */ /* Sized to sit beside the primary CTA: same 70px height and pill radius, and the bare arrow glyph becomes a ringed badge answering the primary's filled one. Two buttons on one row should read as a pair. */ .primary-btn.v1 { display: inline-flex; align-items: center; min-height: 70px; padding: 15px 15px 15px 26px; border-radius: 70px; column-gap: 14px; } .primary-btn.v1 .primary-button-wrapper, .primary-btn.v1 .primary-button-wrapper.v1 { display: flex; align-items: center; column-gap: 14px; } /* .primary-icon is an overflow-hidden box holding TWO stacked arrows that trade places on hover. The flex version of this was tuned to the template's 24px box: Webflow's interaction slides both glyphs by one glyph-width, which lands the twin dead centre there. Growing the box into a 40px ring broke that -- the incoming arrow stopped one gap short of centre and the outgoing one hung at the rim, so a hover showed two half-arrows instead of one. Rather than re-tune a distance that depends on Webflow's own maths, the swap is done here: both glyphs are centred absolutely and translated diagonally, so the travel is defined by the glyph and cannot drift when the ring is resized. `!important` overrides the inline transform Webflow's interaction writes onto these images -- without it the two fight. */ .primary-btn.v1 .primary-icon { position: relative; width: 40px; height: 40px; flex: none; padding: 0; border-radius: 50%; border: 1px solid rgba(22, 25, 34, 0.18); overflow: hidden; transition: background-color .2s ease, border-color .2s ease; } .primary-btn.v1 .primary-button-icon { position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; flex: none; margin: -8px 0 0 -8px; transition: transform .34s cubic-bezier(0.22, 1, 0.36, 1); } /* The glyph points up and right, so it leaves that way and its twin follows in from the opposite corner. 190% of a 16px glyph is 30px of travel, which clears the 40px ring with room to spare -- at 170% the parked twin's edge landed exactly on the rim and showed as a sliver. */ .primary-btn.v1 .primary-button-icon:nth-of-type(1) { transform: translate(-190%, 190%) !important; } .primary-btn.v1 .primary-button-icon:nth-of-type(2) { transform: translate(0, 0) !important; } .primary-btn.v1:hover .primary-button-icon:nth-of-type(1) { transform: translate(0, 0) !important; } .primary-btn.v1:hover .primary-button-icon:nth-of-type(2) { transform: translate(190%, -190%) !important; } @media (prefers-reduced-motion: reduce) { .primary-btn.v1 .primary-button-icon { transition: none; } } /* The whole button inverts on hover, so the ring goes with it. */ .primary-btn.v1:hover .primary-icon { background-color: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.34); } .footer-top-wrap .primary-btn.v1 { border: 1px solid rgba(22, 25, 34, 0.16); background-color: rgba(255, 255, 255, 0.62); } .footer-top-wrap .primary-btn.v1 .primary-button-text, .footer-top-wrap .primary-btn.v1 .primary-button-text.white { color: var(--primary-black-500); } .footer-top-wrap .primary-btn.v1 .primary-button-icon { filter: brightness(0); } /* The "CUBE 2026" wordmark is a background on the footer section, sized `contain` and pinned to the bottom -- 280px of it. The template left room for it by pushing the copyright down 220px; the rebuilt footer does not, so it is scaled down and given a band of its own below the fine print rather than being allowed to sit behind the columns. */ .section.footer { background-size: min(880px, 74%) auto; padding-bottom: clamp(104px, 12vw, 184px); } @media (max-width: 767px) { .section.footer { background-size: min(520px, 86%) auto; padding-bottom: clamp(80px, 20vw, 120px); } } /* ========================================================================== PRIZES & OPPORTUNITIES — /prizes The home page carries a four-card teaser; this is the page it links to. Typography follows the programme sections (eyebrow 11/800/0.16em, title clamp 28–50 at weight 500) so it reads as the same voice. Built by apply-prizes.js from brand/prizes.js. ========================================================================== */ /* ---- band rhythm ---- The page shipped white top to bottom, which read as unfinished beside the rest of the site. It now follows the same alternation the explore page established -- ambient wash, white, dark, white, neutral, ambient, white -- using the shared --amb-* tokens rather than colours of its own, so the two pages cannot drift apart. */ /* ---- hero ---- */ .pz-hero { position: relative; overflow: hidden; padding: clamp(72px, 8vw, 116px) 0 clamp(52px, 6vw, 80px); background-color: var(--amb-ground); background-image: var(--amb-layers); } /* Frosted tiles and eyebrow on the wash, the .gl-tile recipe. */ .pz-hero .pg-eyebrow { background: rgba(255, 255, 255, 0.80); border-color: rgba(255, 255, 255, 0.95); box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.9), 0 2px 8px -1px rgba(91, 97, 246, 0.10); } /* Centred, like the explore and challenges heroes. The legal pages are the deliberate exception -- a policy is a document, not a landing page. */ .pz-head { max-width: 820px; } .pz-h1 { font-size: clamp(34px, 5vw, 60px); } .pz-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: clamp(36px, 4.5vw, 56px) 0 0; padding: 0; list-style: none; } .pz-fact { display: grid; gap: 6px; padding: 24px 22px 22px; border-radius: 18px; background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.75); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .pz-fact-big { font-size: clamp(26px, 3vw, 36px); font-weight: 500; line-height: 1.05; letter-spacing: -0.03em; color: #161922; } .pz-fact-label { font-size: 13.5px; font-weight: 600; color: var(--primary-black-500); } .pz-fact-note { font-size: 12.5px; line-height: 1.5; color: var(--primary-black-400); } /* ---- the cash ---- */ .pz-cash { padding: clamp(56px, 6.5vw, 92px) 0; } .pz-cash-layout { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: clamp(28px, 4vw, 60px); align-items: start; } .pz-cash-figure { position: sticky; top: 104px; display: grid; justify-items: start; gap: 8px; padding: 32px 30px 30px; border-radius: 24px; border: 1px solid rgba(37, 99, 235, 0.16); background: linear-gradient(150deg, #eff4ff 0%, #f8fafd 62%, #ffffff 100%); } .pz-cash-figure .pg-ico { width: 26px; height: 26px; color: var(--primary-color-500); margin-bottom: 8px; } .pz-cash-big { margin: 0; font-size: clamp(44px, 6vw, 68px); font-weight: 500; line-height: 1; letter-spacing: -0.04em; color: #161922; } .pz-cash-cap { margin: 0; font-size: 15px; font-weight: 600; color: var(--primary-black-500); } .pz-cash-when { margin: 4px 0 0; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary-color-500); } .pz-cash-points { margin: 0; display: grid; gap: 2px; } .pz-cash-point { padding: 22px 0; border-top: 1px solid var(--primary-black-100); } .pz-cash-point:first-child { border-top: 0; padding-top: 0; } .pz-cash-point dt { margin: 0 0 7px; font-size: 16px; font-weight: 600; letter-spacing: -0.015em; color: #151922; } .pz-cash-point dd { margin: 0; font-size: 14.5px; line-height: 1.68; color: #5f6878; } /* ---- opportunities: the dark beat, same ink as the explore page's faces --- */ .pz-opps { background: #0c1017; padding: clamp(64px, 7vw, 100px) 0; } .pz-opps .pg-title { color: #f3f6fb; } .pz-opps .pg-lede { color: #97a2b5; } .pz-opps .pg-eyebrow { background: rgba(34, 211, 238, 0.10); border-color: rgba(34, 211, 238, 0.24); color: #7fe6f6; } .pz-opp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; } .pz-opp { display: grid; align-content: start; gap: 12px; padding: 30px 28px 28px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.09); background: rgba(255, 255, 255, 0.04); } .pz-opp-top { display: flex; align-items: center; gap: 10px; } .pz-opp .pg-ico { width: 20px; height: 20px; color: #7fe6f6; } .pz-opp-kicker { font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #7fe6f6; } .pz-opp h3 { margin: 0; font-size: 19px; font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; color: #f3f6fb; } .pz-opp p { margin: 0; font-size: 14.5px; line-height: 1.68; color: #97a2b5; } /* ---- what everyone leaves with ---- */ .pz-everyone { padding: clamp(56px, 6.5vw, 92px) 0; } .pz-cap-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; } /* The cap-*.svg set is a 640x380 illustration shared with the home page, not a square glyph -- so it sits as a panel on top of the card rather than being cropped into an icon box. */ .pz-cap { display: grid; align-content: start; border: 1px solid var(--primary-black-100); border-radius: 20px; overflow: hidden; background: #fff; } .pz-cap img { display: block; width: 100%; height: auto; aspect-ratio: 640 / 380; object-fit: contain; padding: 16px; background: linear-gradient(160deg, #f2f6ff 0%, #fafcff 100%); border-bottom: 1px solid var(--primary-black-100); } .pz-cap > div { padding: 20px 22px 22px; } .pz-cap h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; letter-spacing: -0.015em; color: #151922; } .pz-cap p { margin: 0; font-size: 14px; line-height: 1.62; color: #5f6878; } /* ---- how it is decided ---- */ .pz-decided { background: #f7f9fc; padding: clamp(64px, 7vw, 100px) 0; } .pz-step-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; } .pz-step { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); padding: clamp(24px, 3vw, 34px); background: #ffffff; border: 1px solid #e4ebf4; border-radius: 18px; } .pz-step-side { display: flex; flex-direction: column; gap: 6px; } .pz-step-n { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; color: var(--primary-color-500); font-variant-numeric: tabular-nums; } .pz-step-when { font-size: 13px; color: var(--primary-black-300); } .pz-step-main h3 { margin: 0 0 8px; font-size: 19px; font-weight: 500; letter-spacing: -0.02em; color: #151922; } .pz-step-main p { margin: 0; font-size: 14.5px; line-height: 1.68; color: #5f6878; } .pz-more { margin: 28px 0 0; font-size: 14px; color: var(--primary-black-400); } .pz-more a, .pz-fine-link a, .pz-teaser-link a { color: var(--primary-color-500); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } /* ---- straight answers: ambient, like the explore page's rules list ---- */ .pz-faq { position: relative; overflow: hidden; padding: clamp(64px, 7vw, 100px) 0; background-color: var(--amb-ground); background-image: var(--amb-layers); } .pz-faq .pg-eyebrow { background: rgba(255, 255, 255, 0.80); border-color: rgba(255, 255, 255, 0.95); box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.9), 0 2px 8px -1px rgba(91, 97, 246, 0.10); } .pz-faq-list { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .pz-faq-item { position: relative; z-index: 1; padding: 24px 24px 22px; border-radius: 20px; background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.75); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .pz-faq-item dt { margin: 0 0 8px; font-size: 16px; font-weight: 600; letter-spacing: -0.015em; color: #151922; } .pz-faq-item dd { margin: 0; font-size: 14px; line-height: 1.66; color: #5f6878; } /* ---- fine print ---- */ .pz-fine { padding: clamp(64px, 7vw, 104px) 0; } .pz-fine-card { padding: clamp(28px, 3.5vw, 40px); border-radius: 24px; background: var(--primary-black-50); } .pz-fine-card h2 { margin: 0 0 18px; font-size: clamp(20px, 2.2vw, 26px); font-weight: 500; letter-spacing: -0.02em; color: #151922; } .pz-fine-card ul { margin: 0; padding: 0 0 0 20px; display: grid; gap: 10px; } .pz-fine-card li { font-size: 14px; line-height: 1.66; color: #5f6878; } .pz-fine-link { margin: 22px 0 0; font-size: 14px; } /* ---- home-page teaser link ---- */ .pz-teaser-link { margin: 34px 0 0; text-align: center; font-size: 15px; } /* ---- responsive ---- */ @media (max-width: 1023px) { .pz-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pz-cash-layout { grid-template-columns: 1fr; } .pz-cash-figure { position: static; } .pz-cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .pz-opp-grid, .pz-faq-list { grid-template-columns: 1fr; } .pz-step { grid-template-columns: 1fr; gap: 12px; } .pz-step-side { flex-direction: row; align-items: center; gap: 14px; } } @media (max-width: 599px) { .pz-facts { grid-template-columns: 1fr; } .pz-cap-grid { grid-template-columns: 1fr; } } /* ========================================================================== LOCKED DOMAINS — problem statements release 24 September 2026 Artwork and the descriptive copy are blurred behind a plate. Domain names stay sharp: they are published in the FAQ and the timeline already. ========================================================================== */ .lk-media { position: relative; display: block; overflow: hidden; } .lk-media > img, .lk-media > a > img, .lk-media > a { filter: blur(9px) saturate(0.85); transform: scale(1.06); /* hides the soft edge the blur leaves */ transition: filter .4s ease; } /* The plate itself stays crisp above the blur. */ .lk-plate { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px; text-align: center; background: linear-gradient(180deg, rgba(15, 23, 42, 0.30), rgba(15, 23, 42, 0.48)); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .lk-lock { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.32); color: #ffffff; } .lk-lock svg { width: 19px; height: 19px; } .lk-plate b { font-size: 13px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #ffffff; } .lk-plate i { font-style: normal; max-width: 26ch; font-size: 11px; font-weight: 600; line-height: 1.45; letter-spacing: 0.04em; color: rgba(226, 232, 240, 0.9); } /* The date owns its own line and never breaks across one. */ .lk-plate i em { display: block; font-style: normal; white-space: nowrap; margin-top: 2px; color: #ffffff; } /* Copy that stands in for the unreleased statement. Not selectable, so it cannot simply be highlighted and read. */ .lk-blur { filter: blur(4.5px); user-select: none; -webkit-user-select: none; pointer-events: none; } .lk-name { filter: none; } /* The explore card wraps its own image, so the radius has to be re-applied. */ .xp-domain .lk-media { border-radius: 18px 18px 0 0; } .xp-domain .lk-media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } @media (max-width: 599px) { .lk-plate b { font-size: 12px; } .lk-plate i { font-size: 10.5px; } } /* A blurred teaser is decoration, not information -- show it plainly to anyone who has asked for reduced motion/effects to be dialled down. */ @media (prefers-reduced-transparency: reduce) { .lk-plate { backdrop-filter: none; -webkit-backdrop-filter: none; } } /* ========================================================================== ABOUT — MISSION PANEL CUBE The same cube as the home page, in the blue mission card. It carries no .cube-faces-letters class, so the idle yaw keyframe drives it instead of faces.js and it turns on its own. The stage's own background is already about-panel.svg — the dot grid this replaced. ========================================================================== */ .cube-about { /* .cube-stage is sized for the home panel: a fixed 542px at a 1120/900 ratio. Here it is a flex child that fills the rest of the card. */ width: 100%; max-width: none; aspect-ratio: auto; flex: 1; min-height: 380px; /* Matches .about-left-image, the image this stands in for. */ border-radius: 30px; /* No button row under this one, so it does not need the split grid. */ grid-template-rows: 1fr; padding: 0; } /* No tab strip to cycle it here, so instead of the home cube's brief sway it turns all the way around, continuously, at a steady rate -- the one piece of unmissable motion on an otherwise static page. */ @media (prefers-reduced-motion: no-preference) { .cube-about .cube { animation: cube-spin 10s linear infinite; } } /* Negative direction so the faces come round in the same C -> U -> B -> E order faces.js steps the home cube in (it counts yaw down too), rather than the reverse. */ @keyframes cube-spin { from { transform: rotateX(-24deg) rotateY(0deg); } to { transform: rotateX(-24deg) rotateY(-360deg); } } @media (max-width: 767px) { .cube-about { min-height: 280px; border-radius: 16px; } } /* The domain cards no longer open anything, so the arrow affordance goes. */ .lk-dead { display: block; cursor: default; } .lk-gone { display: none !important; } /* ========================================================================== FLOATING DOCK NAV Replaces the template navbar. Aceternity's , rebuilt without Framer Motion: dock.js writes --w per item and the transition below does the easing. The dock renders and navigates correctly with no JS at all. The glass is layered rather than a single translucent fill, which is what separates it from a plain semi-transparent bar: - backdrop-filter blurs AND saturates, so colour behind it bleeds through instead of going grey - an inset hairline along the top edge reads as the lit rim - two shadows: a tight contact shadow and a wide soft one ========================================================================== */ /* The template's own navbar. Hidden, not removed -- Webflow's nav script still binds to it, and cutting it out mid-tree is the riskier edit. */ .navber { display: none !important; } /* In-page links (#challenges) must clear the dock. */ html { scroll-padding-top: 104px; } .dock { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 1000; display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 999px; /* --- the glass ------------------------------------------------------ */ background: rgba(255, 255, 255, 0.58); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), /* lit top rim */ inset 0 -1px 0 rgba(15, 20, 26, 0.04), /* grounded bottom */ 0 2px 6px rgba(15, 20, 26, 0.06), /* contact */ 0 12px 40px rgba(15, 20, 26, 0.16); /* ambient */ color: #0f141a; transition: background-color 400ms ease, border-color 400ms ease, box-shadow 400ms ease, color 400ms ease; } /* Over the dark hero. dock.js toggles this on scroll. */ .dock.is-dark { background: rgba(14, 20, 38, 0.44); border-color: rgba(255, 255, 255, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(0, 0, 0, 0.20), 0 2px 6px rgba(0, 0, 0, 0.20), 0 14px 44px rgba(0, 0, 0, 0.40); color: #f2f6fd; } /* Browsers without backdrop-filter get an opaque bar rather than unreadable text over the page behind it. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .dock { background: rgba(255, 255, 255, 0.94); } .dock.is-dark { background: rgba(14, 20, 38, 0.92); } } .dock-sep { width: 1px; height: 22px; margin: 0 4px; background: currentColor; opacity: 0.16; } /* --- items -------------------------------------------------------------- */ .dock-item { --w: 44px; position: relative; flex: 0 0 auto; width: var(--w); height: var(--w); display: grid; place-items: center; border-radius: 50%; color: inherit; text-decoration: none; /* The easing is the point: a short overshoot reads as weight. */ transition: width 260ms cubic-bezier(0.22, 1.4, 0.36, 1), height 260ms cubic-bezier(0.22, 1.4, 0.36, 1), background-color 220ms ease; } .dock-item:hover, .dock-item:focus-visible { background: rgba(127, 145, 175, 0.18); } .dock-item:focus-visible { outline: 2px solid #2563eb; outline-offset: 3px; } /* --- you are here ------------------------------------------------------- */ /* apply-nav.js marks the item for the page being written, so this is correct in the served HTML rather than painted in after load. It carries the hover fill plus a dot below the tile, because fill alone is ambiguous the moment the pointer is over a different item -- two tiles would read as lit with nothing to say which one is the page you are on. The CTA is excluded: it is already the one filled pill, and a grey wash under a blue gradient only muddies it. */ .dock-item[aria-current="page"]:not(.dock-cta) { background: rgba(127, 145, 175, 0.18); } .dock-item[aria-current="page"] .dock-ico { opacity: 1; } .dock-item[aria-current="page"]::after { content: ''; position: absolute; top: calc(100% + 3px); left: 50%; width: 4px; height: 4px; border-radius: 50%; background: #2563eb; transform: translateX(-50%); transition: opacity 180ms ease; } /* Over the dark hero the brand blue loses too much against the ink. */ .dock.is-dark .dock-item[aria-current="page"]::after { background: #7fe6f6; } /* The dot sits exactly where the hover label opens, so it steps aside. */ .dock-item[aria-current="page"]:hover::after, .dock-item[aria-current="page"]:focus-visible::after { opacity: 0; } .dock-ico { width: 46%; height: 46%; opacity: 0.82; transition: opacity 220ms ease; } .dock-item:hover .dock-ico { opacity: 1; } .dock-mark { /* The lockup is a detailed wordmark, not a round glyph: fitted inside the circle at the icon size it was reading as noise, so it takes most of the tile and loses the circular inset the icons keep. */ width: 86%; height: 86%; object-fit: contain; } /* The register item is the one call to action, so it is the one filled pill. */ .dock-cta { background: linear-gradient(160deg, #2563eb, #1d4ed8); color: #fff; box-shadow: 0 4px 14px rgba(37, 99, 235, 0.42); } .dock-cta:hover, .dock-cta:focus-visible { background: linear-gradient(160deg, #3b76ef, #2563eb); } .dock-cta .dock-ico { opacity: 1; } /* --- labels ------------------------------------------------------------- */ /* Below the dock, because the dock is pinned to the top of the window. */ .dock-label { position: absolute; top: calc(100% + 10px); left: 50%; transform: translate(-50%, -4px); padding: 5px 10px; border-radius: 8px; white-space: nowrap; font-size: 12px; font-weight: 500; letter-spacing: -0.01em; color: #f2f6fd; background: rgba(16, 22, 38, 0.88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 6px 18px rgba(15, 20, 26, 0.24); opacity: 0; pointer-events: none; transition: opacity 180ms ease, transform 180ms ease; } .dock-item:hover .dock-label, .dock-item:focus-visible .dock-label { opacity: 1; transform: translate(-50%, 0); } /* --- coarse pointers ---------------------------------------------------- */ /* No hover to track, so the dock sits at rest and the labels never fire. Seven items at 40px plus padding fits inside a 360px viewport. */ @media (hover: none), (pointer: coarse) { .dock-item { --w: 40px !important; } .dock-label { display: none; } } @media (max-width: 400px) { .dock { gap: 2px; padding: 6px 8px; } .dock-item { --w: 36px !important; } .dock-sep { margin: 0 2px; } } @media (prefers-reduced-motion: reduce) { .dock, .dock-item, .dock-label { transition: none; } } /* ========================================================================== "WHAT IS CUBE?" ROW — right card and the growth badge Two defects in the template's own layout, both visible once the cycling panel replaced the card's placeholder copy. ========================================================================== */ /* 1. The growth badge is `position: absolute; right: -40px` inside the LEFT card, so it deliberately overhangs the 16px gutter -- but the right card is a later sibling with a background and no z-index, so it painted over the badge's right half. Lifting the left card gives the badge the gutter back; the card's own background is clipped by its radius, so nothing else changes. */ .choose-left-wrap { position: relative; z-index: 2; } /* The text column butts straight against the cube panel above it: measured at 1440, 1100 and 758, the heading's top and the panel's bottom are the same pixel. The two are separate children of the card with nothing between them, so the display heading lands on the panel's edge at every width. */ .chosse-wrap { margin-top: clamp(20px, 2.4vw, 32px); } .growth-image { z-index: 3; } /* 2. The right card is full-height beside a tall cube panel and held a single four-line concept, so two thirds of it was empty. It now carries the round each face happens in, what the panel judges there, and a rail -- laid out as a column with the link anchored to the bottom edge. */ .choose-right-wrap { justify-content: flex-start; gap: 0; } .choose-right-wrap > img { flex: none; } /* The template leaves an empty div at the end of this card. */ .choose-right-wrap > div:empty { display: none; } /* The card's height is set by the tall cube panel opposite, so the concept block is centred in whatever space is left rather than being top-aligned with a void under it -- the deco mark anchors the top, the link the bottom. */ .faces-cycle { flex: 1 1 auto; width: 100%; margin: 22px 0; align-content: center; } /* All four slides share one grid cell, so the cell is as tall as the longest concept and the shorter three used to trail whitespace under their rail. A flex column with `margin-top: auto` on the rail pins it to the bottom of the cell instead, so the rail sits at the same height on every face. */ .faces-slide { display: flex; flex-direction: column; align-items: stretch; gap: 9px; } .faces-meta { margin: 16px 0 0; padding-top: 16px; border-top: 1px solid rgba(37, 99, 235, 0.14); display: grid; gap: 14px; } .faces-meta-row { display: grid; gap: 5px; } .faces-meta dt { font-size: 10.5px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--primary-black-300); } .faces-meta dd { margin: 0; display: grid; gap: 3px; } .faces-meta dd b { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--primary-black-500); } .faces-meta dd span { font-size: 13px; line-height: 1.6; color: var(--primary-black-400); } /* Progress rail. One per slide, with that slide's letter lit -- only the active slide is visible, so it advances without any script. */ .faces-rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 20px 0 0; margin-top: auto; padding: 20px 0 0; list-style: none; } .faces-rail-step { display: grid; gap: 6px; justify-items: center; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; color: var(--primary-black-300); } .faces-rail-step::before { content: ''; display: block; width: 100%; height: 3px; border-radius: 3px; background: rgba(37, 99, 235, 0.16); transition: background 400ms ease; } .faces-rail-step.is-on { color: var(--primary-color-500); } .faces-rail-step.is-on::before { background: var(--primary-color-500); } .faces-foot { flex: none; width: 100%; margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(37, 99, 235, 0.14); } .faces-foot a { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--primary-color-500); text-decoration: none; } .faces-foot a::after { content: '→'; transition: transform 220ms ease; } .faces-foot a:hover::after { transform: translateX(3px); } @media (max-width: 991px) { /* Single column: the badge no longer overhangs into anything. */ .faces-cycle { flex: none; } } /* ========================================================================== CHALLENGES — live before the problem statements are Built on the home hero's furniture so the page belongs to the same site: the deep navy ground, the hairline panel, the letterspaced wordmark, the floating badge pills and the dark pill CTA are all the home page's. ========================================================================== */ .ch-hero { position: relative; overflow: hidden; padding: clamp(96px, 10vw, 168px) 0 clamp(72px, 8vw, 120px); /* Matches the tone the hero vortex paints on the home page. */ background: radial-gradient(78% 62% at 50% 22%, #14203f 0%, rgba(10, 15, 30, 0) 68%), radial-gradient(120% 90% at 50% 0%, #0d1426 0%, #070c18 70%); } .ch-hero .container { position: relative; z-index: 1; } .ch-glow { position: absolute; border-radius: 50%; filter: blur(100px); pointer-events: none; } .ch-glow-a { top: -160px; left: 4%; width: 460px; height: 460px; background: linear-gradient(135deg, rgba(34, 211, 238, 0.22), rgba(37, 99, 235, 0.20)); } .ch-glow-b { bottom: -200px; right: 2%; width: 500px; height: 500px; background: linear-gradient(45deg, rgba(79, 70, 229, 0.22), rgba(96, 144, 250, 0.18)); } /* Same panel as .banner-wrap.v1 on the home hero. */ .ch-panel { position: relative; max-width: 1200px; margin: 0 auto; padding: clamp(38px, 4.6vw, 68px) clamp(20px, 3vw, 48px) clamp(34px, 4vw, 56px); text-align: center; border-radius: 28px; background: rgba(8, 12, 26, 0.28); border: 2px solid rgba(255, 255, 255, 0.1); } .ch-h1 { /* Wide enough that "yours." does not land alone on its own line. */ margin: 0 auto 16px; max-width: 26ch; font-size: clamp(34px, 4.8vw, 66px); font-weight: 500; line-height: 1.06; letter-spacing: -0.03em; color: #f3f6fb; } .ch-lede { margin: 0 auto; max-width: 62ch; font-size: clamp(15px, 1.25vw, 17px); line-height: 1.62; color: #97a2b5; } /* Badge pills, positioned off the panel edges the way the home hero does. */ .ch-badge-l1 { top: 16%; left: -34px; transform: rotate(-6deg); } .ch-badge-l2 { top: 42%; left: -14px; transform: rotate(-3deg); } .ch-badge-l3 { top: 68%; left: -40px; transform: rotate(-7deg); } .ch-badge-r1 { top: 14%; right: -38px; transform: rotate(6deg); } .ch-badge-r2 { top: 44%; right: -16px; transform: rotate(3deg); } .ch-badge-r3 { top: 70%; right: -30px; transform: rotate(7deg); } /* ---- countdown ---- */ .ch-count { margin-top: clamp(30px, 3.4vw, 44px); } .cd-caption { margin: 0 0 14px; font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: #8794aa; } .cd { display: inline-grid; grid-auto-flow: column; gap: clamp(8px, 1.1vw, 14px); padding: clamp(12px, 1.4vw, 16px); border-radius: 22px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.09); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .cd-cell { min-width: clamp(68px, 7.4vw, 100px); padding: clamp(11px, 1.3vw, 16px) clamp(8px, 1vw, 13px); border-radius: 15px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.07); } .cd-num { display: block; font-size: clamp(28px, 4vw, 50px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; /* Digits must not jitter the row as they change. */ font-variant-numeric: tabular-nums; background: linear-gradient(104deg, var(--sydon-cyan), var(--sydon-blue) 78%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .cd-label { display: block; margin-top: 7px; font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #7f8ca3; } .cd-date { margin: 14px 0 0; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; color: #9fb0c8; } .cd.is-open { border-color: rgba(34, 211, 238, 0.35); } /* Same dark pill as the home hero's Register Now. */ .ch-cta-btn { display: inline-flex; align-items: center; gap: 12px; margin-top: clamp(26px, 3vw, 38px); padding: 15px 18px 15px 30px; border-radius: 70px; background: var(--primary-black-500); box-shadow: 0 0 0 5px rgba(34, 211, 238, 0.16), 0 22px 60px -14px rgba(37, 99, 235, 0.55); font-size: 16px; font-weight: 600; color: #ffffff; text-decoration: none; transition: transform .2s ease, background .2s ease; } .ch-cta-btn:hover { transform: translateY(-2px); background: var(--sydon-blue); } .ch-cta-arrow { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #ffffff; color: var(--primary-black-500); font-size: 15px; line-height: 1; } /* ---- sealed grid ---- */ .ch-grid { background: var(--amb-ground); background-image: var(--amb-layers); } .ch-grid.xp-domains { padding: clamp(64px, 7vw, 100px) 0; } /* ---- what unlocks ---- */ .ch-unlocks { padding: clamp(64px, 7vw, 100px) 0; } .ch-unlock-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .ch-unlock { padding: 26px 24px 24px; border-radius: 18px; background: #ffffff; border: 1px solid #e4ebf4; transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; } .ch-unlock:hover { transform: translateY(-4px); border-color: rgba(37, 99, 235, 0.28); box-shadow: 0 18px 40px -24px rgba(15, 23, 42, 0.34); } .ch-n { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-bottom: 14px; border-radius: 10px; background: linear-gradient(135deg, #22d3ee, #2563eb); color: #ffffff; font-size: 12px; font-weight: 700; } .ch-unlock h3 { margin: 0; font-size: clamp(17px, 1.5vw, 19px); font-weight: 500; letter-spacing: -0.02em; color: #151922; } .ch-unlock p { margin: 8px 0 0; font-size: 14px; line-height: 1.62; color: #5f6878; } /* ---- prep ---- */ .ch-prep { background: #f7f9fc; padding: clamp(64px, 7vw, 100px) 0; } .ch-prep-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .ch-prep-item { padding: 24px 22px; border-radius: 16px; background: #ffffff; border: 1px solid #e4ebf4; } .ch-prep-item h3 { margin: 0; font-size: 17px; font-weight: 500; letter-spacing: -0.02em; color: #151922; } .ch-prep-item p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.6; color: #5f6878; } /* ---- responsive ---- */ @media (max-width: 1023px) { .ch-unlock-list { grid-template-columns: repeat(2, 1fr); } .ch-prep-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 1279px) { /* No room to float pills outside the panel; hide rather than overlap. */ .ch-panel .hero-badge { display: none; } } @media (max-width: 599px) { .ch-unlock-list, .ch-prep-grid { grid-template-columns: 1fr; } /* Four cells will not fit a phone in one row. */ .cd { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); } .ch-panel { border-radius: 20px; } } /* ---------------------------------------------------- certification --- */ /* Under the prize cards, in the same section and the same glass: the cash is one thing you leave with, the credential is the other. Ranked, so it reads as a climb rather than four equal options -- the rank numbers and the filled top rung carry that. */ .pg-cert { margin-top: clamp(36px, 4vw, 56px); } .pg-cert-head { margin-bottom: 22px; } .pg-cert-title { margin: 10px 0 0; font-size: clamp(22px, 2.2vw, 30px); font-weight: 600; letter-spacing: -0.025em; color: #0f172a; } .pg-cert-ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(12px, 1.1vw, 16px); grid-template-columns: repeat(4, 1fr); align-items: stretch; } .pg-cert-tier { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; min-height: 220px; padding: clamp(20px, 1.8vw, 26px); border-radius: 24px; background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.8); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); transition: background .35s cubic-bezier(0.16, 1, 0.3, 1), transform .35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .35s cubic-bezier(0.16, 1, 0.3, 1); } .pg-cert-tier:hover { background: rgba(255, 255, 255, 0.92); transform: translateY(-2px); box-shadow: 0 25px 45px -12px rgba(91, 97, 246, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.90); } .pg-cert-top { position: relative; z-index: 1; } .pg-cert-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .pg-cert-rank { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; color: #94a3b8; } .pg-cert-chip { padding: 3px 9px; border-radius: 999px; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; background: #dbe6fe; color: #1d4ed8; } .pg-cert-name { margin: 12px 0 0; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; color: #0f172a; } .pg-cert-body { position: relative; z-index: 1; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid rgba(226, 232, 240, 0.7); font-size: 12.5px; line-height: 1.62; color: #64748b; } /* The last rung: ringed and warmed, not blackened -- the prize tile beside it already owns the strongest treatment in this section. */ .pg-cert-tier.is-top { background: linear-gradient(150deg, rgba(255,255,255,0.92) 0%, rgba(233,240,255,0.88) 100%); border-color: rgba(147, 180, 253, 0.9); box-shadow: 0 0 0 1px rgba(96, 144, 250, 0.28), 0 12px 32px -12px rgba(37, 99, 235, 0.22); } .pg-cert-tier.is-top .pg-cert-rank { color: #2563eb; } .pg-cert-tier.is-top .pg-cert-body { color: #47566f; border-top-color: rgba(191, 211, 254, 0.9); } /* ---- responsive: prizes + certification ---- */ @media (max-width: 1023px) { .pg-prize-grid, .pg-cert-ladder { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 599px) { .pg-prize-grid, .pg-cert-ladder { grid-template-columns: 1fr; } .pg-prize, .pg-cert-tier { min-height: 0; } } /* The dock is translucent, so the mark has to answer the page beneath it: the ink logo on light pages, the original light one where the page opens on a dark hero. Both ship; only one is ever shown. */ .dock-mark-light { display: none; } [data-top="dark"] .dock-mark-light { display: block; } [data-top="dark"] .dock-mark-ink { display: none; } /* ========================================================================== REGISTER — replaces the template's contact page Shares the challenges hero furniture; the sections below run on the light rhythm the rest of the site uses. ========================================================================== */ .rg-note { margin: 14px 0 0; font-size: 12.5px; font-weight: 500; letter-spacing: 0.04em; color: #7f8ca3; } /* ---- three steps ---- */ .rg-steps { padding: clamp(64px, 7vw, 100px) 0; } .rg-step-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .rg-step { padding: 26px 24px 24px; border-radius: 18px; background: #ffffff; border: 1px solid #e4ebf4; transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; } .rg-step:hover { transform: translateY(-4px); border-color: rgba(37, 99, 235, 0.28); box-shadow: 0 18px 40px -24px rgba(15, 23, 42, 0.34); } .rg-step h3 { margin: 0; font-size: clamp(17px, 1.5vw, 19px); font-weight: 500; letter-spacing: -0.02em; color: #151922; } .rg-when { margin: 6px 0 0 !important; font-size: 11.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #2563eb; } .rg-step p { margin: 10px 0 0; font-size: 14px; line-height: 1.62; color: #5f6878; } /* ---- what to have ready ---- */ .rg-ready { background: var(--amb-ground); background-image: var(--amb-layers); padding: clamp(64px, 7vw, 100px) 0; } .rg-ready-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .rg-ready-item { padding: 24px 24px 22px; border-radius: 20px; background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.75); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); transition: background .35s cubic-bezier(0.16, 1, 0.3, 1), transform .35s cubic-bezier(0.16, 1, 0.3, 1); } .rg-ready-item:hover { background: rgba(255, 255, 255, 0.80); transform: translateY(-2px); } .rg-ready-item h3 { margin: 0; font-size: 17px; font-weight: 500; letter-spacing: -0.02em; color: #151922; } .rg-ready-item p { margin: 8px 0 0; font-size: 14px; line-height: 1.62; color: #5f6878; } /* ---- eligibility ---- */ .rg-who { padding: clamp(64px, 7vw, 100px) 0; } .rg-who-list { list-style: none; margin: 0 auto; padding: 0; max-width: 860px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .rg-who-list li { padding: 10px 18px; border-radius: 70px; background: rgba(37, 99, 235, 0.06); border: 1px solid rgba(37, 99, 235, 0.14); font-size: 14px; font-weight: 600; color: #3f5878; } /* ---- faq (reuses the explore rule cards) ---- */ .rg-faq { background: #f7f9fc; padding: clamp(64px, 7vw, 100px) 0; } .rg-faq .xp-rule { background: #ffffff; border: 1px solid #e4ebf4; } /* ---- help: what replaced the dead form ---- */ .rg-help { background: linear-gradient(150deg, #0c1017 0%, #16233c 100%); padding: clamp(64px, 7vw, 104px) 0; } .rg-help .pg-title { color: #f3f6fb; } .rg-help .pg-lede { color: #97a2b5; } .rg-help .pg-eyebrow { background: rgba(34, 211, 238, 0.10); border-color: rgba(34, 211, 238, 0.24); color: #7fe6f6; } .rg-help-inner { display: grid; justify-items: center; } .rg-mail { margin-top: 0; } .rg-facts { width: 100%; margin: clamp(30px, 3.4vw, 44px) 0 0; grid-template-columns: repeat(3, 1fr); } .rg-help .pg-fact { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.09); } .rg-help .pg-fact span { color: #7f8ca3; } .rg-help .pg-fact b { color: #eaeef6; } /* ---- responsive ---- */ @media (max-width: 1023px) { .rg-step-list { grid-template-columns: repeat(2, 1fr); } .rg-facts { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 599px) { .rg-step-list, .rg-ready-list, .rg-facts { grid-template-columns: 1fr; } } /* ====================================================================== PARTNERS Between the timeline and the footer. Same ambient ground and frosted vocabulary as the glance and prizes sections, so it reads as part of the same system rather than a logo strip bolted on. Sized for a short list rather than a wall: one managing partner today, and the row centres itself as more are added. ====================================================================== */ /* Dark, gridded ground -- the same "night sky" the CUBE 2026 partner announcement graphic uses, rather than the pale wash the rest of these utility sections share. It is the one place on the page introducing that partners live alongside the programme itself, not just as a footnote. */ .pg-partners { position: relative; overflow: hidden; padding: clamp(56px, 6vw, 88px) 0; background: #0c1017 url("gen/partners-bg.svg") center / cover no-repeat; } .pg-partners .pg-title { color: #f3f6fb; } .pg-partners .pg-lede { color: #97a2b5; } /* Same cyan-on-dark pill used for .xp-faces / .pz-opps / .rg-help, so this reads as the same system rather than a one-off treatment. */ .pg-partners .pg-eyebrow { padding: 8px 26px; border: 1px solid rgba(34, 211, 238, 0.24); border-radius: 999px; background: rgba(34, 211, 238, 0.10); color: #7fe6f6; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; text-transform: none; } .pt-group + .pt-group { margin-top: clamp(28px, 3vw, 40px); } /* Sits directly on the dark ground rather than on a card. #97a2b5 (the section's own lede colour) clears 4.5:1 there. */ .pt-label { margin: 0 0 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #97a2b5; text-align: center; } .pt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(12px, 1.2vw, 18px); } .pt-card { display: flex; align-items: center; gap: 20px; /* Caps the row at a readable measure when there is only one partner, and lets two sit side by side once there are. Widened alongside the logo box below, so the mark could grow without squeezing the copy beside it. */ flex: 0 1 clamp(340px, 46vw, 620px); padding: 22px 26px; border-radius: 20px; /* Solid, not frosted like the cards in the neighbouring sections: the supplied logo artwork is opaque on its own white ground, and over a translucent card that ground shows as a pale rectangle behind the mark. */ background: #ffffff; border: 1px solid rgba(226, 232, 240, 0.9); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); transition: background .35s cubic-bezier(0.16, 1, 0.3, 1), transform .35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .35s cubic-bezier(0.16, 1, 0.3, 1); } .pt-card:hover { background: #ffffff; transform: translateY(-2px); box-shadow: 0 25px 45px -12px rgba(91, 97, 246, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.90); } /* A sizing box, not a plate: the card is already white, so framing the logo again would nest one white box inside another. Sized off the widest mark in the set -- the CodeQuesters lockup is 3.5:1, and a squarer box shrinks it by its width until the wordmark stops being legible. The mark fills this box rather than sitting inside it, so the box IS the logo size: at 190x56 the artwork was already at its limit and the credit read as a footnote. Fluid so it keeps its presence on a narrow card without crowding the copy. */ .pt-logo { flex: none; display: grid; place-items: center; width: clamp(200px, 19vw, 270px); /* Height tracks the width at the lockup's own 3.5:1, so the box never letterboxes the mark. */ aspect-ratio: 190 / 56; height: auto; max-width: 100%; } .pt-logo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; } .pt-name { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.015em; color: #0f172a; } .pt-role { margin: 6px 0 0; font-size: 13px; line-height: 1.6; color: #64748b; } /* Stacks well above the phone breakpoint. Side by side, the logo reaches its floor while the card is still narrow, and the role text is left wrapping to four ragged lines in a ~100px column. Stacked, both get the full width. */ @media (max-width: 900px) { .pt-card { flex: 1 1 100%; flex-direction: column; align-items: flex-start; gap: 14px; } .pt-logo { width: min(270px, 100%); } } /* ====================================================================== BACK TO TOP Ported from the dashboard's : a 48px round blue button in the bottom-right, appearing once the reader is 200px down the page. Shipped visible so the no-JS fallback stays usable -- the runtime adds .is-in and takes it away, so the fade only exists where JS runs. ====================================================================== */ .to-top { position: fixed; right: clamp(16px, 2.5vw, 40px); bottom: clamp(16px, 2.5vw, 40px); z-index: 900; /* under the dock (1000), over the page */ display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #2563eb; color: #ffffff; text-decoration: none; box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.35), 0 4px 6px -4px rgba(37, 99, 235, 0.35); transition: background-color .3s ease, box-shadow .3s ease, opacity .3s ease, transform .3s ease; } .to-top:hover { background: #1d4ed8; box-shadow: 0 20px 25px -5px rgba(37, 99, 235, 0.42); } .to-top:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; } .to-top-ico { width: 22px; height: 22px; } /* With JS: hidden until scrolled, and inert while hidden so it cannot swallow a click meant for the page behind it. */ .to-top[aria-hidden="true"] { opacity: 0; transform: translateY(8px) scale(0.94); pointer-events: none; } .to-top.is-in { opacity: 1; transform: none; pointer-events: auto; } /* The original bounces the chevrons. Kept, but only where motion is welcome and only while the button is actually on screen. */ @media (prefers-reduced-motion: no-preference) { .to-top.is-in .to-top-ico { animation: to-top-bob 1.6s ease-in-out infinite; } } @keyframes to-top-bob { 0%, 100% { transform: translateY(1px); } 50% { transform: translateY(-2px); } } /* Phones put the thumb where this button sits, so it stands down a little. */ @media (max-width: 599px) { .to-top { width: 44px; height: 44px; } .to-top-ico { width: 20px; height: 20px; } }