/* ============================================================ QBod ambient background — carbon scrim + teal "flow-contours" helix. Web port of the app's lib/design_system/flow_contours_background.dart. Shared by the marketing site AND the trainer portal so both match the app. Pair with assets/qbod-helix-bg.js (the helix is drawn to a ). Drop-in: add to ============================================================ */ :root{ --qbod-carbon:#0A0A0A; /* app carbon base (colors_refined.dart carbonBlack) */ --qbod-teal:#26D0CE; /* primaryTeal */ --qbod-mint:#70F3D0; /* mint accent */ } /* The carbon base lives on ; the page body is made transparent so the fixed background layer shows through. Sections/cards with their OWN opaque background still cover it — exactly like the app's opaque cards over the helix. */ html{ background:var(--qbod-carbon); } body{ background:transparent !important; } /* Single fixed background layer, behind all page content (z-index:-1). */ #qbod-bg{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; background-color:var(--qbod-carbon); /* corner glows — same two radial gradients as the trainer portal --glow */ background-image: radial-gradient(1200px 600px at 100% -10%, rgba(38,208,206,.10), transparent 60%), radial-gradient(900px 500px at -10% 10%, rgba(112,243,208,.05), transparent 55%); } /* dot grid */ #qbod-bg::before{ content:""; position:absolute; inset:0; opacity:.5; background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.035) 1px, transparent 0); background-size:42px 42px; } /* fractal-noise grain */ #qbod-bg::after{ content:""; position:absolute; inset:0; opacity:.025; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } #qbod-bg canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; } /* ---- Brand pill shape ---------------------------------------------------- The app's buttons/chips are fully-round pills (LuxuryPill, 999px radius). The site was using 8px square corners. Force the pill shape on CTAs so the web matches the app. Loaded on every marketing page (this file is global). */ .btn, .btn-primary, .btn-secondary, button.btn, a.btn, .app-store-nav-badge { border-radius:999px !important; }