/* ===== The Bosoka Company — motion layer (progressive enhancement) ===== Without JS, has no .js-motion class, so the reveals below are inert and the page renders fully visible. motion.js adds .js-motion only when motion is allowed (not prefers-reduced-motion). */ /* in-page anchor smoothing is handled in motion.js (capture-phase, preempts webflow.js). No CSS scroll-behavior here — it would run a second, conflicting scroll animation. */ /* text selection picks up the live mouse-driven accent colour (theme.js keeps --tbc-accent-rgb updated as "r, g, b") */ ::selection { background: rgba(var(--tbc-accent-rgb, 184, 255, 128), .9); color: #0c0c0c; } ::-moz-selection { background: rgba(var(--tbc-accent-rgb, 184, 255, 128), .9); color: #0c0c0c; } /* hide the fading light-glow at the top of the nav (not wanted for now) */ .light-fx { display: none !important; } /* remove the 1px outline ring around the game-card video */ .gc-video-outlinefix { display: none !important; } /* drop the blurred glow behind the script words — it re-renders a 20px blur every frame as the rainbow colour cycles, which looks janky. Keep the coloured text. */ .txtgrad::before, .txtgrad::after { content: none !important; } /* ---------- Entrance reveals — original-style "pop" with a scale overshoot ---------- Cards spring past their scale and settle; headlines pop word-by-word. */ .js-motion [data-reveal] { opacity: 0; transform: scale(.8); transition: opacity .4s ease, transform .62s cubic-bezier(.34, 1.56, .64, 1); will-change: opacity, transform; } .js-motion [data-reveal].in-view { opacity: 1; transform: none; } /* stagger the team cards; let each section heading lead its card */ .js-motion .team-cards-wrap > [data-reveal]:nth-child(2) { transition-delay: .1s; } .js-motion .team-cards-wrap > [data-reveal]:nth-child(3) { transition-delay: .2s; } .js-motion .game-card[data-reveal] { transition-delay: .1s; } /* word-by-word headline pop. white-space:pre keeps the trailing space inside each word span, so inline-block never collapses the spacing. */ .js-motion [data-reveal-words] .title-word, .js-motion [data-reveal-words] .txtgrad { display: inline-block; white-space: pre; opacity: 0; transform: translateY(.42em) scale(.86); transform-origin: bottom; transition: opacity .38s ease, transform .58s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(var(--wi, 0) * 38ms); } .js-motion [data-reveal-words].in-view .title-word, .js-motion [data-reveal-words].in-view .txtgrad { opacity: 1; transform: none; } /* the handwritten gradient words (love / talent / makers / brilliant) land a touch later */ .js-motion [data-reveal-words] .txtgrad { transition-delay: calc(var(--wi, 0) * 38ms + 80ms); } /* ---------- Staggered children — card content reveals one element at a time ---------- Each direct child of a [data-stagger] container gets an incremental --si (set in motion.js) so they cascade up into place when the container scrolls into view. */ .js-motion [data-stagger] > * { opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .6s cubic-bezier(.22, .7, .3, 1); transition-delay: calc(var(--si, 0) * 80ms); will-change: opacity, transform; } .js-motion [data-stagger].in-view > * { opacity: 1; transform: none; } /* ---------- Hero CTA: light up the green glow that's already defined ---------- */ .hero-cta { transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease; } .hero-cta:hover { box-shadow: 0 0 28px rgba(184, 255, 128, .42); } .hero-cta:active { transform: scale(.97); } /* Failsafe: if motion.js never runs, reveal everything (class added by the bootstrap) */ .motion-failsafe [data-reveal], .motion-failsafe [data-reveal-words] .title-word, .motion-failsafe [data-reveal-words] .txtgrad, .motion-failsafe [data-stagger] > * { opacity: 1 !important; transform: none !important; filter: blur(0) !important; } .motion-failsafe .nav-wrap, .motion-failsafe .svg-b, .motion-failsafe .scroll-wrap { opacity: 1 !important; } /* ============================================================ Intro handoff — above-the-fold content is hidden while the 3D intro plays over the live (dots + fluid) background, then window.tbcReveal adds .tbc-revealed and it fades in. (Headlines/cards are already hidden by their own reveal rules.) ============================================================ */ .js-motion .nav-wrap, .js-motion .svg-b, .js-motion .scroll-wrap { opacity: 0; } .js-motion.tbc-revealed .nav-wrap { opacity: 1; transition: opacity .55s ease; } .js-motion.tbc-revealed .scroll-wrap { opacity: 1; transition: opacity .55s ease .25s; } /* hero logo swaps in instantly when the 3D logo lands (no fade → seamless handoff) */ .js-motion.tbc-logo-in .svg-b { opacity: 1; } /* ============================================================ Hero — fill the viewport and truly center the content ============================================================ */ .hero { display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; min-height: 100vh; /* bottom padding > top so the centered block sits a touch above the geometric middle (reads as centered to the eye, given the top nav) */ padding: 48px 0 150px; } .hero > .v2container { width: 100%; } .h-wrap { padding-top: 0; } .scroll-wrap { position: absolute; left: 50%; bottom: 54px; transform: translateX(-50%); margin: 0; } @media (max-width: 767px) { .hero { padding-top: 90px; padding-bottom: 120px; } .scroll-wrap { bottom: 40px; } } /* ============================================================ Fluid background — fluid.js renders a small canvas into #dotsBg and we upscale it with hard pixels for the retro dithered look. ============================================================ */ #dotsBg canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; image-rendering: crisp-edges; } /* ============================================================ Footer — mini, structured (brand + links + baseline) ============================================================ */ .footer { padding-top: clamp(72px, 10vw, 120px); padding-bottom: 0; } .footer-top { display: flex; justify-content: space-between; align-items: center; gap: 28px; padding: 26px 0 22px; border-top: 1px solid rgba(255, 255, 255, .10); } .footer-brand { display: flex; align-items: center; gap: 14px; } .footer-logo { display: inline-block; cursor: pointer; transition: opacity .15s ease; } .footer-logo:hover { opacity: .7; } .footer-logo svg { width: 24px; height: auto; display: block; } .footer-name { margin: 0; font-size: 15px; font-weight: 700; color: #fff; line-height: 1.15; letter-spacing: -.01em; } .footer-tag { margin: 3px 0 0; font-size: 12.5px; font-weight: 500; color: var(--color--grey-txt, #9f9f9f); line-height: 1.3; letter-spacing: -.005em; /* override .bodyv2's global -1px which is far too tight here */ } .footer-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; } .footer-nav .footer-link { font-size: 13px; font-weight: 600; color: #cfcfd2; text-decoration: none; letter-spacing: -.01em; transition: color .18s ease; } .footer-nav .footer-link:hover { color: var(--color--green, #b8ff80); } .footer-base { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0 30px; } .footer-copy, .footer-credit { font-size: 11.5px; font-weight: 600; color: #82828a; letter-spacing: 0; } @media (max-width: 600px) { .footer-top { flex-direction: column; align-items: flex-start; gap: 18px; } .footer-base { flex-direction: column; align-items: flex-start; gap: 6px; padding-bottom: 26px; } } /* ============================================================ Reduced motion: freeze JS-driven loops + show everything instantly ============================================================ */ @media (prefers-reduced-motion: reduce) { .light-fx.top { opacity: .5 !important; transition: none !important; } .light-fx.top._2 { opacity: 0 !important; } .scroll-arrow { opacity: 1 !important; transform: none !important; transition: none !important; } [data-reveal], [data-reveal].in-view, [data-reveal-words] .title-word, [data-reveal-words] .txtgrad, [data-stagger] > * { opacity: 1 !important; transform: none !important; filter: blur(0) !important; transition: none !important; } #tbc-preloader { display: none !important; } #dotsBg { display: none !important; } }