/* ===================================================================== GREEN CITY MARKETING — META ADS (Web3 / cinematic) Shared design-system foundation. Design authority: Emil Kowalski. Dual-mode (cinema/black <-> system/white), green "current" motion fingerprint. Tokens are 1:1 with the Video Production page so the two pages read as one elite ecosystem. Global primitives are `ma-` prefixed; each section owns its own `sN-` namespace. ===================================================================== */ /* ----- FONTS -------------------------------------------------------- */ /* PP Neue Montreal is NOT licensed here. To upgrade, drop the licensed files in: @font-face{font-family:"PP Neue Montreal";src:url(...) format("woff2");font-weight:700;} The --font-display stack already lists it first, so it auto-takes-over. */ /* ----- TOKENS ------------------------------------------------------- */ :root{ /* brand */ --green:#27F58C; --green-bright:#3BFF9C; --green-deep:#0A8A4F; --green-deep-2:#0FB866; --green-glow:rgba(39,245,140,.35); /* cinema (black) */ --void:#050505; --void-edge:#080A09; --void-panel:#0C0F0E; --void-panel-2:#121817; --void-line:rgba(255,255,255,.10); --void-line-green:rgba(39,245,140,.22); --void-ink:#FFFFFF; --void-ink-2:#C7D3CD; --void-ink-3:#7E8E87; /* system (white) */ --paper:#FFFFFF; --paper-edge:#F4F7F5; --paper-panel:#F6F9F7; --paper-panel-2:#EEF3F0; --paper-line:rgba(5,5,5,.10); --paper-line-green:rgba(10,138,79,.22); --paper-ink:#0A0C0B; --paper-ink-2:#2C3A33; --paper-ink-3:#6A7972; /* fonts */ --font-display:"Neue Haas Grotesk Display Pro","Helvetica Now Display","Helvetica Neue",Arial,sans-serif; --font-body:"Neue Haas Grotesk Text Pro","Helvetica Neue",Arial,sans-serif; --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace; /* layout */ --max:1320px; --max-wide:1440px; --max-text:780px; --gutter:clamp(20px,5vw,48px); /* radius / motion */ --r-sm:12px; --r:18px; --r-lg:26px; --r-pill:999px; --ease-out:cubic-bezier(.16,1,.3,1); --ease-snap:cubic-bezier(.2,.9,.25,1); --dur-micro:180ms; --dur-ui:320ms; --dur-reveal:700ms; --dur-cine:1100ms; color-scheme:dark; } /* contextual contract — components only read these */ .ma-cinema{ --c-bg:var(--void); --c-bg-edge:var(--void-edge); --c-panel:var(--void-panel); --c-panel-2:var(--void-panel-2); --c-line:var(--void-line); --c-line-green:var(--void-line-green); --c-ink:var(--void-ink); --c-ink-2:var(--void-ink-2); --c-ink-3:var(--void-ink-3); --c-accent:var(--green); --c-accent-soft:var(--green-glow); --c-on-accent:#04140C; --c-shadow:0 30px 80px -40px rgba(0,0,0,.9); color:var(--c-ink); background:var(--c-bg); } .ma-system{ --c-bg:var(--paper); --c-bg-edge:var(--paper-edge); --c-panel:var(--paper-panel); --c-panel-2:var(--paper-panel-2); --c-line:var(--paper-line); --c-line-green:var(--paper-line-green); --c-ink:var(--paper-ink); --c-ink-2:var(--paper-ink-2); --c-ink-3:var(--paper-ink-3); --c-accent:var(--green-deep); --c-accent-soft:rgba(10,138,79,.08); --c-on-accent:#04140C; --c-shadow:0 24px 60px -30px rgba(5,5,5,.14); color:var(--c-ink); background:var(--c-bg); } /* ----- RESET -------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} /* overflow-x on (root scroller) — NOT , which would break window scroll/spy. */ html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0;background:var(--void);color:var(--void-ink); font-family:var(--font-body);font-size:17px;line-height:1.6; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } img,svg{display:block;max-width:100%} a{color:inherit;text-decoration:none} ul,ol{margin:0;padding:0;list-style:none} h1,h2,h3,h4,p{margin:0} button{font:inherit;color:inherit;border:0;background:none;cursor:pointer} ::selection{background:var(--green);color:#04140C} :focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:6px} /* ----- GRAIN + AMBIENT --------------------------------------------- */ .ma-grain{ position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.05;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .ma-scrollbar{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;background:transparent;pointer-events:none} .ma-scrollbar__fill{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--green-deep),var(--green));box-shadow:0 0 12px var(--green-glow);transform-origin:left} /* ----- HEADER ------------------------------------------------------- */ .ma-header{position:fixed;top:0;left:0;right:0;z-index:50;padding:14px var(--gutter); transition:transform var(--dur-ui) var(--ease-out),background var(--dur-ui) ease,backdrop-filter var(--dur-ui) ease,border-color var(--dur-ui) ease; border-bottom:1px solid transparent} .ma-header.is-scrolled{background:rgba(5,6,5,.72);backdrop-filter:blur(16px) saturate(140%);border-bottom-color:var(--void-line)} .ma-header.is-hidden{transform:translateY(-110%)} .ma-header__inner{max-width:var(--max-wide);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:18px} .ma-brand{display:flex;align-items:center;color:#fff;flex:none} .ma-brand__logo{height:clamp(42px,4.4vw,54px);width:auto;display:block;filter:drop-shadow(0 5px 16px rgba(0,0,0,.55))} .ma-brand__logo--foot{height:48px} .ma-nav{flex:1 1 auto;display:flex;justify-content:center;min-width:0} .ma-nav__pill{display:flex;flex-direction:column;gap:4px;padding:6px 8px;border:1px solid var(--void-line);border-radius:22px;background:rgba(255,255,255,.04);backdrop-filter:blur(10px)} .ma-nav__row{display:flex;gap:3px;justify-content:center;list-style:none;margin:0;padding:0} .ma-nav__pill a{display:block;padding:6px 13px;border-radius:var(--r-pill);font-family:var(--font-mono);font-size:16px;letter-spacing:.03em;color:var(--void-ink-2);white-space:nowrap;transition:color var(--dur-micro) ease,background var(--dur-micro) ease} .ma-nav__pill a:hover{color:#fff} .ma-nav__pill a.is-active{color:var(--green);background:rgba(39,245,140,.1)} .ma-burger{display:none;width:42px;height:38px;border:1px solid var(--void-line);border-radius:10px;flex-direction:column;gap:5px;align-items:center;justify-content:center} .ma-burger span{width:18px;height:1.6px;background:#fff;transition:transform var(--dur-ui) var(--ease-snap)} .ma-burger[aria-expanded="true"] span:first-child{transform:translateY(3.3px) rotate(45deg)} .ma-burger[aria-expanded="true"] span:last-child{transform:translateY(-3.3px) rotate(-45deg)} /* ----- BUTTONS ------------------------------------------------------ */ .ma-btn{position:relative;display:inline-flex;align-items:center;gap:9px; padding:13px 22px;border-radius:var(--r-pill);font-family:var(--font-mono); font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase; transition:transform var(--dur-micro) var(--ease-snap),box-shadow var(--dur-ui) ease,background var(--dur-ui) ease,color var(--dur-ui) ease; will-change:transform} .ma-btn svg{transition:transform var(--dur-ui) var(--ease-snap)} .ma-btn:active{transform:scale(.97)} .ma-btn--cta{background:var(--green);color:#04140C;box-shadow:0 8px 30px -8px var(--green-glow),inset 0 0 0 1px rgba(255,255,255,.12)} .ma-btn--cta:hover{background:var(--green-bright);box-shadow:0 12px 40px -8px var(--green-glow)} .ma-btn--cta:hover svg{transform:translateX(3px)} .ma-btn--ghost{background:transparent;color:var(--c-ink,#fff);box-shadow:inset 0 0 0 1px var(--c-line,rgba(255,255,255,.18))} .ma-btn--ghost:hover{box-shadow:inset 0 0 0 1px var(--c-accent,var(--green));color:var(--c-accent,var(--green))} .ma-btn--lg{padding:16px 28px;font-size:15px} .ma-btn--sm{padding:11px 18px;font-size:14px} /* ----- SECTION SHELL ------------------------------------------------ */ .ma-sec{position:relative;padding:clamp(96px,12vw,160px) 0;overflow:clip;isolation:isolate} .ma-sec + .ma-sec{border-top:1px solid var(--c-line)} .ma-inner{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);position:relative;z-index:2} .ma-inner--wide{max-width:var(--max-wide)} .ma-page > .ma-sec:first-child{padding-top:0} /* the hero is the first section but must clear the fixed header and own the first viewport. Desktop header is a tall 2-row nav pill (~121px); below 1200px it collapses to a burger bar. */ .ma-page > .ma-sec.ma-hero{padding-top:clamp(136px,15vh,164px);min-height:100vh} @media (max-width:1199px){.ma-page > .ma-sec.ma-hero{padding-top:clamp(96px,12vh,124px)}} /* feather edges (seam system) */ .ma-cinema::before,.ma-system::before,.ma-cinema::after,.ma-system::after{content:"";position:absolute;left:0;right:0;height:12%;z-index:1;pointer-events:none} .ma-cinema::before{top:0;background:linear-gradient(var(--void-edge),transparent)} .ma-cinema::after{bottom:0;background:linear-gradient(transparent,var(--void-edge))} .ma-system::before{top:0;background:linear-gradient(var(--paper-edge),transparent)} .ma-system::after{bottom:0;background:linear-gradient(transparent,var(--paper-edge))} /* ----- TYPOGRAPHY --------------------------------------------------- */ .ma-eyebrow{font-family:var(--font-mono);font-size:14px;font-weight:600;letter-spacing:.16em; text-transform:uppercase;color:var(--c-accent);display:inline-flex;align-items:center;gap:9px;margin-bottom:22px} .ma-system .ma-eyebrow{color:var(--green-deep)} .ma-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);animation:maPulse 2.4s var(--ease-out) infinite} @keyframes maPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}} .ma-title{font-family:var(--font-display);font-weight:700;text-transform:uppercase; letter-spacing:.01em;line-height:.96;font-size:clamp(34px,5.4vw,64px);color:var(--c-ink)} .ma-title--hero{font-size:clamp(38px,4.8vw,66px);line-height:.94;letter-spacing:.01em} .ma-title--final{font-size:clamp(38px,6.6vw,82px);line-height:.94} .ma-title .ma-line{display:block} .ma-word{color:var(--c-accent);position:relative} .ma-system .ma-word{color:var(--green-deep)} /* animated gradient display word (use sparingly for marquee headline words) */ .ma-word--grad{-webkit-background-clip:text;background-clip:text;color:transparent; background-image:linear-gradient(120deg,#bff6d8,var(--green) 40%,#0a8a4f 75%,var(--green-bright)); background-size:220% 100%;animation:maGradWord 7s ease-in-out infinite; filter:drop-shadow(0 0 18px rgba(39,245,140,.35))} @keyframes maGradWord{0%,100%{background-position:0% 0}50%{background-position:100% 0}} .ma-lead{font-size:clamp(17px,2vw,20px);line-height:1.5;color:var(--c-ink-2);max-width:var(--max-text)} .ma-sub{font-size:clamp(15px,1.6vw,18px);line-height:1.55;color:var(--c-ink-2);max-width:560px} .ma-label{font-family:var(--font-mono);font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--c-ink-3)} .ma-proofline{margin:48px auto 0;max-width:760px;text-align:center;font-size:16px;color:var(--c-ink-2)} .ma-proofline strong{color:var(--c-accent);font-weight:600} .ma-system .ma-proofline strong{color:var(--green-deep)} .ma-banner{margin:64px auto 0;max-width:900px;text-align:center;font-family:var(--font-display); font-weight:700;text-transform:uppercase;font-size:clamp(22px,3.4vw,40px);line-height:1.05;letter-spacing:.01em;color:var(--c-ink)} /* ----- HEADS -------------------------------------------------------- */ .ma-head{margin-bottom:clamp(48px,6vw,80px)} .ma-head--center{text-align:center;max-width:900px;margin-left:auto;margin-right:auto} .ma-head--center .ma-eyebrow{justify-content:center} .ma-head--center .ma-lead{margin-left:auto;margin-right:auto} .ma-head--split{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:end} @media (max-width:900px){.ma-head--split{grid-template-columns:1fr;gap:28px;align-items:start}} /* ----- THE GREEN CURRENT (motion fingerprint) ---------------------- */ .ma-current__track{fill:none;stroke:var(--c-line);stroke-width:1.5} .ma-current__line{fill:none;stroke:var(--c-accent);stroke-width:1.5; stroke-dasharray:8 12;filter:drop-shadow(0 0 4px var(--green-glow)); stroke-dashoffset:200;animation:maFlow 3.4s linear infinite} .ma-system .ma-current__line{stroke:var(--green-deep-2)} @keyframes maFlow{to{stroke-dashoffset:0}} /* ----- REVEAL ------------------------------------------------------- */ /* BULLETPROOF reveal: content is ALWAYS fully visible (opacity 1, no blur). The only entrance motion is a small upward slide, driven by a pure-CSS animation that plays on load. Because nothing ever hides opacity or blurs, content CANNOT render dark/dim even if the animation is paused, frozen (background tab), throttled, or never runs — worst case it sits 18px lower, fully readable. No JS dependency. No-JS = fully visible. */ .js .ma-reveal{transform:translateY(18px); animation:maRevealIn var(--dur-reveal) var(--ease-out) both; animation-delay:calc((var(--d,0) - 1) * 60ms + 40ms)} @keyframes maRevealIn{from{transform:translateY(18px)}to{transform:none}} .ma-reveal[data-d="1"]{--d:1}.ma-reveal[data-d="2"]{--d:2}.ma-reveal[data-d="3"]{--d:3} .ma-reveal[data-d="4"]{--d:4}.ma-reveal[data-d="5"]{--d:5}.ma-reveal[data-d="6"]{--d:6} .ma-reveal[data-d="7"]{--d:7}.ma-reveal[data-d="8"]{--d:8} .is-revealed.ma-reveal,.is-revealed .ma-reveal{transform:none} /* ----- AMBIENT ORBS / GRID ----------------------------------------- */ .ma-orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;pointer-events:none} .ma-orb--1{width:600px;height:600px;top:-160px;left:-120px;background:radial-gradient(circle,rgba(39,245,140,.30),transparent 70%);animation:maDrift 22s ease-in-out infinite} .ma-orb--2{width:520px;height:520px;bottom:-160px;right:-100px;background:radial-gradient(circle,rgba(15,184,102,.22),transparent 70%);animation:maDrift 26s ease-in-out infinite reverse} .ma-orb--center{position:absolute;top:30%;left:50%;width:680px;height:680px;transform:translateX(-50%);background:radial-gradient(circle,rgba(39,245,140,.12),transparent 70%);filter:blur(90px);z-index:0;pointer-events:none} @keyframes maDrift{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,30px)}} .ma-grid-fade{position:absolute;inset:0; background-image:linear-gradient(var(--void-line) 1px,transparent 1px),linear-gradient(90deg,var(--void-line) 1px,transparent 1px); background-size:64px 64px;mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000,transparent 75%);opacity:.4} /* ----- SHARED ATOMS ------------------------------------------------- */ .ma-stars{color:var(--green);letter-spacing:2px;font-size:13px} .ma-stars--xs{font-size:10px;letter-spacing:1px} .ma-system .ma-stars{color:var(--green-deep)} .ma-num{font-family:var(--font-display);font-weight:700;line-height:1;color:var(--c-ink);font-variant-numeric:tabular-nums} /* play button */ .ma-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:4; width:74px;height:74px;border-radius:50%;display:grid;place-items:center;color:#04140C; background:var(--green);box-shadow:0 0 0 1px rgba(255,255,255,.2),0 10px 40px -8px var(--green-glow); transition:transform var(--dur-ui) var(--ease-snap),box-shadow var(--dur-ui) ease;animation:maBreath 3.4s var(--ease-out) infinite} .ma-play:hover{transform:translate(-50%,-50%) scale(1.08)} .ma-play:active{transform:translate(-50%,-50%) scale(.96)} @keyframes maBreath{0%,100%{box-shadow:0 0 0 1px rgba(255,255,255,.2),0 10px 40px -8px var(--green-glow)}50%{box-shadow:0 0 0 8px rgba(39,245,140,.08),0 10px 50px -6px var(--green-glow)}} .ma-play--sm{width:50px;height:50px} /* marquee (clone row injected by JS) */ .ma-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)} .ma-marquee__row{display:flex;gap:56px;width:max-content;animation:maMarq 32s linear infinite} .ma-marquee:hover .ma-marquee__row{animation-play-state:paused} @keyframes maMarq{to{transform:translateX(-50%)}} /* generic glass card (sections may extend) */ .ma-card{border-radius:var(--r);background:var(--c-panel);border:1px solid var(--c-line);position:relative;overflow:hidden; transition:border-color var(--dur-ui) ease,box-shadow var(--dur-ui) ease,transform var(--dur-ui) var(--ease-out)} @media (hover:hover){.ma-card--lift:hover{transform:translateY(-4px);border-color:var(--c-line-green);box-shadow:0 0 40px -16px var(--green-glow)}} /* generic chip / tag */ .ma-chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:13px;letter-spacing:.03em; padding:7px 13px;border-radius:var(--r-pill);background:var(--c-panel);border:1px solid var(--c-line);color:var(--c-ink-2)} /* ----- FILTER BAR (tabs / category filters) ------------------------ */ .ma-filterbar{display:flex;flex-wrap:wrap;gap:8px} .ma-filter{font-family:var(--font-mono);font-size:14px;letter-spacing:.06em;text-transform:uppercase; padding:9px 16px;border-radius:var(--r-pill);border:1px solid var(--c-line);background:transparent;color:var(--c-ink-3); transition:color var(--dur-micro) ease,border-color var(--dur-micro) ease,background var(--dur-micro) ease} .ma-filter:hover{color:var(--c-ink);border-color:var(--c-line-green)} .ma-filter.is-active{color:var(--c-on-accent);background:var(--green);border-color:transparent} .ma-system .ma-filter.is-active{background:var(--green-deep);color:#fff} /* ----- MODAL / LIGHTBOX (generic, JS-driven via [data-modal]) ------ */ .ma-modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:clamp(16px,4vw,48px); background:rgba(3,5,4,.82);backdrop-filter:blur(10px);opacity:0;visibility:hidden; transition:opacity var(--dur-ui) ease,visibility var(--dur-ui) ease} .ma-modal.is-open{opacity:1;visibility:visible} .ma-modal__dialog{position:relative;width:min(960px,100%);border-radius:var(--r-lg);overflow:hidden; background:var(--void-panel);border:1px solid var(--void-line-green);box-shadow:0 60px 140px -50px #000; transform:translateY(14px) scale(.98);transition:transform var(--dur-ui) var(--ease-out)} .ma-modal.is-open .ma-modal__dialog{transform:none} .ma-modal__close{position:absolute;top:14px;right:14px;z-index:3;width:40px;height:40px;border-radius:50%; display:grid;place-items:center;background:rgba(0,0,0,.5);border:1px solid var(--void-line);color:#fff;font-size:18px;backdrop-filter:blur(6px)} .ma-modal__close:hover{border-color:var(--green);color:var(--green)} .ma-modal__media{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden} .ma-modal__media img{width:100%;height:100%;object-fit:cover} /* ----- FOOTER ------------------------------------------------------- */ .ma-foot{padding:clamp(40px,5vw,64px) 0;border-top:1px solid var(--void-line);background:var(--void)} .ma-foot__inner{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center} .ma-foot__inner p{font-family:var(--font-mono);font-size:13px;letter-spacing:.03em;color:var(--void-ink-3);max-width:680px} /* ===================================================================== RESPONSIVE HEADER / NAV ===================================================================== */ @media (max-width:1199px){ .ma-nav{position:fixed;inset:78px 0 auto;padding:0 var(--gutter);transform:translateY(-130%);transition:transform var(--dur-ui) var(--ease-out);pointer-events:none;display:block} .ma-nav.is-open{transform:none;pointer-events:auto} .ma-nav__pill{flex-direction:column;gap:0;border-radius:var(--r-lg);background:rgba(5,6,5,.96);backdrop-filter:blur(18px);padding:10px} .ma-nav__row{flex-direction:column;gap:0;width:100%;align-items:stretch} .ma-nav__pill a{padding:14px 18px;font-size:16px} .ma-header__cta{display:none} .ma-burger{display:flex} } /* ===================================================================== REDUCED MOTION ===================================================================== */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} .ma-reveal{opacity:1!important;transform:none!important;filter:none!important} .ma-current__line{animation:none;stroke-dashoffset:0} .ma-marquee__row{animation:none} .ma-orb{animation:none} } /* touch: drop hover-only transforms */ @media (hover:none){ .ma-card--lift:hover{transform:none} } /* perf: skip painting offscreen sections (hero exempt) */ .ma-sec:not(.ma-hero){content-visibility:auto;contain-intrinsic-size:auto 900px} /* perf: pause decorative animations on sections far from the viewport. Only CSS `animation` (infinite glows/pulses/marquees) is affected — the reveal/counter system is transition + rAF based, so it is untouched. The .is-near flag is toggled by a rect poll in meta-ads.js; gated on .js so a no-JS visitor keeps every animation running. */ .js .ma-sec:not(.is-near), .js .ma-sec:not(.is-near) *, .js .ma-sec:not(.is-near) *::before, .js .ma-sec:not(.is-near) *::after{animation-play-state:paused!important} /* never pause the one-shot entrance reveal — it must always run so content can't get stuck hidden if a section is never flagged .is-near (JS slow/errored/throttled). */ .js .ma-sec:not(.is-near) .ma-reveal{animation-play-state:running!important} /* ============================================================================ REALISM KIT — shared, mode-aware components for the Meta Ads page. Reuses the contextual --c-* tokens (cinema/system) so every component adapts to dark and light sections automatically. Adds subtle platform brand colors. Namespaced .ma-* . Authored to read as REAL marketing proof, not vector UI. Loaded right after 00-foundation.css (see assemble.sh). ========================================================================== */ :root{ /* platform brand accents — used sparingly for color + credibility */ --fb:#1877F2; --ig:#E1306C; --msgr:#0084FF; --meta:#0064E0; --google:#4285F4; --yt:#FF0000; --ghl:#155EEF; --hubspot:#FF7A59; --monday:#FF3D57; --zapier:#FF4F00; --make:#8B3DFF; --openai:#10A37F; --calendly:#006BFF; --gmaps:#34A853; --star:#FBBC05; --map-land:#E9EDE3; --map-water:#A9D5F5; --map-park:#C6E7C1; --map-road:#ffffff; } /* ---- logo asset path token (sections reference assets/logos/.svg) ---- */ /* ============ 1 · PLATFORM LOGOS & CHIPS ============ */ .ma-logo{display:inline-block;width:24px;height:24px;object-fit:contain;vertical-align:middle} .ma-logo--sm{width:18px;height:18px} .ma-logo--lg{width:34px;height:34px} .ma-plat{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 9px; border-radius:var(--r-pill);background:var(--c-panel);border:1px solid var(--c-line); font:600 13px/1 var(--font-body);color:var(--c-ink);white-space:nowrap} .ma-plat img{width:19px;height:19px;object-fit:contain;flex:0 0 auto} /* a row of platform logos (e.g. "powered by") */ .ma-platrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px} .ma-platrow .ma-plat{box-shadow:var(--c-shadow)} /* overlapping logo cluster */ .ma-platstack{display:inline-flex;align-items:center} .ma-platstack img{width:34px;height:34px;border-radius:50%;background:#fff;padding:5px; border:2px solid var(--c-bg);box-shadow:0 4px 14px -6px rgba(0,0,0,.4);margin-left:-10px;object-fit:contain} .ma-platstack img:first-child{margin-left:0} /* tiny brand badge that tints to the platform colour */ .ma-pbadge{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:var(--r-pill); font:700 11px/1 var(--font-mono);letter-spacing:.04em;text-transform:uppercase} .ma-pbadge img{width:15px;height:15px} /* ============ 2 · CLIENT LOGO WALL ============ */ .ma-logowall{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px} .ma-logocard{display:flex;align-items:center;justify-content:center;height:90px;padding:18px 20px; background:#fff;border:1px solid var(--c-line);border-radius:var(--r); box-shadow:0 10px 30px -22px rgba(0,0,0,.55);transition:transform var(--dur-ui) var(--ease-out),box-shadow var(--dur-ui) var(--ease-out)} .ma-logocard:hover{transform:translateY(-3px);box-shadow:0 22px 44px -26px rgba(0,0,0,.6)} .ma-logocard img{max-width:100%;max-height:100%;object-fit:contain} /* light/white-ink logos that vanish on white -> dark backing */ .ma-logocard.is-darklogo{background:#0c1512;border-color:rgba(255,255,255,.1)} /* horizontal scrolling logo marquee (cards) */ .ma-logomarquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)} .ma-logomarquee__track{display:flex;gap:14px;width:max-content;animation:maLogoScroll 46s linear infinite} .ma-logomarquee:hover .ma-logomarquee__track{animation-play-state:paused} .ma-logomarquee .ma-logocard{width:168px;height:78px;flex:0 0 auto} @keyframes maLogoScroll{to{transform:translateX(-50%)}} /* ============ 3 · PHONE MOCKUP + FACEBOOK/INSTAGRAM AD ============ */ .ma-phone{position:relative;width:var(--pw,258px);aspect-ratio:9/19.2;border-radius:40px; background:linear-gradient(150deg,#1c2421,#05080700);background-color:#0a0d0c; padding:9px;border:1px solid rgba(255,255,255,.14); box-shadow:0 50px 90px -40px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.4),inset 0 0 0 2px #000} .ma-phone__screen{position:relative;width:100%;height:100%;border-radius:31px;overflow:hidden; background:#fff;display:flex;flex-direction:column} .ma-phone__notch{position:absolute;top:11px;left:50%;transform:translateX(-50%); width:34%;height:20px;background:#000;border-radius:0 0 13px 13px;z-index:5} .ma-phone__bar{display:flex;align-items:center;justify-content:space-between; padding:9px 16px 4px;font:700 11px/1 var(--font-body);color:#0a0c0b;flex:0 0 auto} .ma-phone__bar svg{width:15px;height:15px} /* a real-looking sponsored post inside the phone */ .ma-fbpost{flex:1;display:flex;flex-direction:column;background:#fff;color:#0a0c0b;min-height:0} .ma-fbpost__head{display:flex;align-items:center;gap:9px;padding:11px 12px 8px} .ma-fbpost__av{width:38px;height:38px;border-radius:50%;object-fit:contain;background:#fff; border:1px solid #e6ebe8;flex:0 0 auto} .ma-fbpost__id{flex:1;min-width:0} .ma-fbpost__name{font:700 13px/1.2 var(--font-body);display:flex;align-items:center;gap:5px} .ma-fbpost__name svg{width:13px;height:13px;color:var(--fb)} .ma-fbpost__meta{font:500 11px/1.3 var(--font-body);color:#65706b;display:flex;align-items:center;gap:4px} .ma-fbpost__copy{padding:0 12px 10px;font:500 12.5px/1.45 var(--font-body)} .ma-fbpost__media{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;background:#eef3f0} .ma-fbpost__media img{width:100%;height:100%;object-fit:cover;display:block} .ma-fbpost__price{position:absolute;left:10px;bottom:10px;padding:5px 10px;border-radius:8px; background:rgba(4,7,10,.82);color:#fff;font:700 11px/1 var(--font-mono);letter-spacing:.02em} .ma-fbpost__cta{display:flex;align-items:center;justify-content:space-between;gap:8px; padding:11px 12px;background:#f0f3f1;border-top:1px solid #e6ebe8} .ma-fbpost__cta b{font:700 12px/1.2 var(--font-body)} .ma-fbpost__cta span{font:500 10.5px/1.2 var(--font-body);color:#65706b} .ma-fbpost__cta a,.ma-fbpost__btn{padding:8px 14px;border-radius:8px;background:#1877F2;color:#fff; font:700 11.5px/1 var(--font-body);text-decoration:none;white-space:nowrap} .ma-fbpost__act{display:flex;justify-content:space-around;padding:8px 6px;border-top:1px solid #eef0ee; font:600 11px/1 var(--font-body);color:#65706b;margin-top:auto} .ma-fbpost__act span{display:inline-flex;align-items:center;gap:5px} /* ============ 4 · iOS NOTIFICATION CARD ============ */ .ma-noti{display:flex;gap:11px;align-items:flex-start;padding:12px 14px;border-radius:18px; background:rgba(255,255,255,.94);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px); box-shadow:0 22px 60px -24px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.6) inset; color:#0a0c0b;border:1px solid rgba(255,255,255,.5)} .ma-noti__icon{width:40px;height:40px;border-radius:11px;flex:0 0 auto;display:flex; align-items:center;justify-content:center;overflow:hidden;box-shadow:0 4px 12px -4px rgba(0,0,0,.4)} .ma-noti__icon img{width:100%;height:100%;object-fit:cover} .ma-noti__b{flex:1;min-width:0} .ma-noti__t{display:flex;justify-content:space-between;gap:8px;align-items:baseline} .ma-noti__t b{font:700 13px/1.2 var(--font-body)} .ma-noti__t time{font:500 11px/1 var(--font-body);color:#8a948f;flex:0 0 auto} .ma-noti__msg{font:500 12.5px/1.4 var(--font-body);color:#3a443f;margin-top:2px} /* ============ 5 · BOOKING / APPOINTMENT CARD (Calendly / GHL) ============ */ .ma-booking{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:var(--r); background:var(--c-panel);border:1px solid var(--c-line);box-shadow:var(--c-shadow);color:var(--c-ink)} .ma-booking__top{display:flex;align-items:center;gap:9px} .ma-booking__top img{width:22px;height:22px} .ma-booking__top b{font:700 13px/1 var(--font-body)} .ma-booking__top .ma-confirmed{margin-left:auto;display:inline-flex;align-items:center;gap:5px; padding:4px 9px;border-radius:var(--r-pill);background:rgba(16,163,127,.14);color:#0f9e6d; font:700 10px/1 var(--font-mono);letter-spacing:.05em;text-transform:uppercase} .ma-booking__row{display:flex;align-items:center;gap:11px} .ma-booking__cal{width:46px;height:50px;border-radius:10px;overflow:hidden;flex:0 0 auto; background:#fff;border:1px solid var(--c-line);text-align:center;box-shadow:0 6px 16px -10px rgba(0,0,0,.5)} .ma-booking__cal .m{background:var(--calendly);color:#fff;font:700 9px/1.7 var(--font-mono);letter-spacing:.08em} .ma-booking__cal .d{color:#0a0c0b;font:800 20px/2.1 var(--font-display)} .ma-booking__when b{font:700 14px/1.2 var(--font-body);display:block} .ma-booking__when span{font:500 12px/1.3 var(--font-body);color:var(--c-ink-2)} .ma-booking__who{display:flex;align-items:center;gap:8px;font:500 12px/1.2 var(--font-body);color:var(--c-ink-2)} .ma-booking__who .av{width:24px;height:24px;border-radius:50%;background:var(--c-accent);color:var(--c-on-accent); display:flex;align-items:center;justify-content:center;font:800 10px/1 var(--font-mono)} /* ============ 6 · GOOGLE REVIEW CARD ============ */ .ma-review{display:flex;flex-direction:column;gap:9px;padding:16px 17px;border-radius:var(--r); background:var(--c-panel);border:1px solid var(--c-line);box-shadow:var(--c-shadow);color:var(--c-ink)} .ma-review__head{display:flex;align-items:center;gap:10px} .ma-review__av{width:38px;height:38px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center; justify-content:center;font:800 13px/1 var(--font-mono);color:#fff;overflow:hidden} .ma-review__av img{width:100%;height:100%;object-fit:cover} .ma-review__id{flex:1;min-width:0} .ma-review__id b{font:700 13px/1.2 var(--font-body);display:block} .ma-review__id span{font:500 11px/1.2 var(--font-body);color:var(--c-ink-3)} .ma-review__g{width:20px;height:20px;flex:0 0 auto} .ma-stars{display:inline-flex;gap:2px} .ma-stars svg{width:15px;height:15px;color:var(--star)} .ma-review__q{font:500 13px/1.5 var(--font-body);color:var(--c-ink-2)} .ma-review__date{font:500 11px/1 var(--font-body);color:var(--c-ink-3)} /* ============ 7 · GOOGLE BUSINESS PROFILE CARD ============ */ .ma-gbp{display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden; background:var(--c-panel);border:1px solid var(--c-line);box-shadow:var(--c-shadow);color:var(--c-ink)} .ma-gbp__map{position:relative;height:96px;background:var(--map-land)} .ma-gbp__body{padding:13px 15px;display:flex;flex-direction:column;gap:7px} .ma-gbp__name{display:flex;align-items:center;gap:8px;font:700 14px/1.2 var(--font-body)} .ma-gbp__name img{width:18px;height:18px} .ma-gbp__rate{display:flex;align-items:center;gap:7px;font:600 12px/1 var(--font-body)} .ma-gbp__rate b{color:#e8910c;font-weight:800} .ma-gbp__cat{font:500 12px/1.3 var(--font-body);color:var(--c-ink-3)} .ma-gbp__row{display:flex;gap:8px;margin-top:3px} .ma-gbp__btn{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:var(--r-pill); border:1px solid var(--c-line);font:600 11px/1 var(--font-body);color:var(--google)} /* ============ 8 · GOOGLE-MAPS-STYLE SERVICE-AREA MAP ============ */ .ma-map{position:relative;width:100%;aspect-ratio:16/10;border-radius:var(--r);overflow:hidden; border:1px solid var(--c-line);box-shadow:var(--c-shadow);background:var(--map-land)} .ma-map--tall{aspect-ratio:4/3} /* base map layer is an (CSS url() can't be used: the stylesheet sits at a different depth in standalone vs WP, and only HTML src="assets/" gets tokenised) */ .ma-map__base{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} /* translucent service radius */ .ma-map__radius{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(39,245,140,.26),rgba(39,245,140,.08) 60%,transparent 72%); border:2px solid rgba(16,138,79,.55);box-shadow:0 0 0 1px rgba(255,255,255,.4) inset} /* heat blobs */ .ma-map__heat{position:absolute;width:120px;height:120px;border-radius:50%;pointer-events:none; background:radial-gradient(circle,rgba(234,67,53,.5),rgba(251,188,5,.25) 45%,transparent 70%);filter:blur(4px)} /* location pin (uses pin.svg) */ .ma-map__pin{position:absolute;width:26px;height:auto;transform:translate(-50%,-100%); filter:drop-shadow(0 5px 6px rgba(0,0,0,.35));animation:maPinDrop .5s var(--ease-snap) both} .ma-map__pin--home{width:34px} @keyframes maPinDrop{from{opacity:0;transform:translate(-50%,-140%)}to{opacity:1;transform:translate(-50%,-100%)}} /* google watermark + controls + label chips */ .ma-map__wm{position:absolute;left:10px;bottom:8px;display:flex;align-items:center;gap:5px; font:700 13px/1 var(--font-body);color:#5f6368;text-shadow:0 1px 2px rgba(255,255,255,.9)} .ma-map__wm img{width:16px;height:16px} .ma-map__zoom{position:absolute;right:10px;bottom:10px;display:flex;flex-direction:column; border-radius:8px;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.3);background:#fff} .ma-map__zoom button{width:30px;height:30px;border:0;background:#fff;color:#5f6368;font:400 18px/1 var(--font-body); cursor:pointer;border-bottom:1px solid #e6e6e6} .ma-map__chip{position:absolute;transform:translate(-50%,-50%);padding:4px 9px;border-radius:var(--r-pill); background:#fff;color:#0a0c0b;font:700 10px/1 var(--font-mono);letter-spacing:.02em; box-shadow:0 4px 12px -4px rgba(0,0,0,.4);white-space:nowrap} .ma-map__chip b{color:#0f9e6d} /* ============ 9 · CRM LEAD ROW (with platform chrome) ============ */ .ma-crm{display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden; background:var(--c-panel);border:1px solid var(--c-line);box-shadow:var(--c-shadow)} .ma-crm__row{display:flex;align-items:center;gap:11px;padding:11px 14px;border-top:1px solid var(--c-line)} .ma-crm__row:first-child{border-top:0} .ma-crm__av{width:30px;height:30px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center; justify-content:center;font:800 11px/1 var(--font-mono);background:var(--c-panel-2);color:var(--c-ink)} .ma-crm__id{flex:1;min-width:0} .ma-crm__id b{font:700 12.5px/1.2 var(--font-body);color:var(--c-ink);display:block} .ma-crm__id span{font:500 11px/1.2 var(--font-body);color:var(--c-ink-3)} .ma-crm__pill{padding:4px 9px;border-radius:var(--r-pill);font:700 9.5px/1 var(--font-mono); letter-spacing:.05em;text-transform:uppercase} .ma-crm__pill--new{background:rgba(24,119,242,.15);color:#1877F2} .ma-crm__pill--qual{background:rgba(251,188,5,.18);color:#b5820a} .ma-crm__pill--booked{background:rgba(16,163,127,.16);color:#0f9e6d} /* ============ 10 · WINDOW / APP CHROME BAR (with live badge + logo) ============ */ .ma-winchrome{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--c-line); background:var(--c-panel-2);font:600 12px/1 var(--font-body);color:var(--c-ink-2)} .ma-winchrome__dots{display:flex;gap:6px} .ma-winchrome__dots i{width:10px;height:10px;border-radius:50%;display:block} .ma-winchrome__dots i:nth-child(1){background:#ff5f57} .ma-winchrome__dots i:nth-child(2){background:#febc2e} .ma-winchrome__dots i:nth-child(3){background:#28c840} .ma-winchrome img{width:16px;height:16px} .ma-winchrome__live{margin-left:auto;display:inline-flex;align-items:center;gap:6px; font:700 10px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--c-accent)} .ma-winchrome__live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c-accent); box-shadow:0 0 0 0 var(--c-accent-soft);animation:maLivePulse 2s var(--ease-out) infinite} @keyframes maLivePulse{0%{box-shadow:0 0 0 0 rgba(39,245,140,.5)}70%{box-shadow:0 0 0 8px rgba(39,245,140,0)}100%{box-shadow:0 0 0 0 rgba(39,245,140,0)}} /* ============ 11 · FRAMED REAL SCREENSHOT (reusable across sections) ============ */ .ma-shot{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--c-line); background:#0c1512;box-shadow:var(--c-shadow); transition:transform var(--dur-ui) var(--ease-out),box-shadow var(--dur-ui) var(--ease-out)} @media (hover:hover){.ma-shot:hover{transform:translateY(-3px);box-shadow:0 30px 64px -34px rgba(0,0,0,.7)}} .ma-shot>img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center} .ma-shot--16x9{aspect-ratio:16/9} .ma-shot--wide{aspect-ratio:760/300}.ma-shot--wide>img{object-position:top left} .ma-shot__cap{position:absolute;left:9px;bottom:9px;z-index:2;display:inline-flex;align-items:center;gap:6px; padding:4px 10px;border-radius:var(--r-pill);background:rgba(4,7,10,.80);backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);font:600 9.5px/1 var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:#fff} .ma-shot__cap img{width:13px;height:13px;object-fit:contain} /* ============ 12 · BRAND-COLOR ACCENT GLOWS (reduce the black/white/green monochrome) ============ */ .ma-accent{position:absolute;border-radius:50%;filter:blur(64px);pointer-events:none;z-index:0;opacity:.7} .ma-accent--fb{background:radial-gradient(circle,rgba(24,119,242,.22),transparent 70%)} .ma-accent--ig{background:radial-gradient(circle,rgba(225,48,108,.18),transparent 70%)} .ma-accent--meta{background:radial-gradient(circle,rgba(0,114,241,.20),transparent 70%)} .ma-accent--violet{background:radial-gradient(circle,rgba(139,61,255,.16),transparent 70%)} /* a soft platform-tinted halo behind a logo cluster */ .ma-logohalo{position:relative;z-index:1} .ma-logohalo::before{content:"";position:absolute;inset:-30% -10%;z-index:-1;border-radius:50%; background:radial-gradient(circle,rgba(24,119,242,.16),rgba(225,48,108,.12) 55%,transparent 72%);filter:blur(22px)} /* ============ Emil press feedback on pressable kit elements ============ */ @media (hover:hover){ .ma-btn,.ma-gbp__btn{transition:transform var(--dur-micro) var(--ease-out),background var(--dur-ui) var(--ease-out),color var(--dur-ui) var(--ease-out)} .ma-btn:active,.ma-gbp__btn:active{transform:scale(.97)} } /* ============ misc: reduce-motion safety ============ */ @media (prefers-reduced-motion:reduce){ .ma-logomarquee__track,.ma-map__pin,.ma-winchrome__live::before{animation:none!important} .ma-shot{transition:none!important} } /* ===================================================================== S1 — META ADS HERO (cinema, full-height) Scoped to .s1 only. Reads contextual --c-* tokens from .ma-cinema. Motion = transform/opacity/filter only. Reveal/count/tilt/magnetic/ marquee/bars/ticker are wired through the foundation engine via data-attrs. ===================================================================== */ .s1{ /* hero owns top of page: clear the fixed header, breathe at the base */ padding-top:clamp(118px,15vh,176px); padding-bottom:clamp(40px,6vh,72px); } /* ----- AMBIENT BACKGROUND LAYER ------------------------------------ */ .s1-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden} .s1-orb--1{top:-220px;left:-160px;opacity:.55} .s1-orb--2{bottom:-180px;right:-140px;opacity:.4} .s1-grid{opacity:.32} /* soft directional light beams behind the stage */ .s1-beam{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;mix-blend-mode:screen} .s1-beam--a{width:560px;height:560px;top:-80px;right:6%; background:radial-gradient(circle,rgba(39,245,140,.16),transparent 68%)} .s1-beam--b{width:420px;height:420px;bottom:8%;left:8%; background:radial-gradient(circle,rgba(15,184,102,.12),transparent 70%)} /* ----- HERO SPLIT: centered to the viewport, proof/marquee flow after - */ .s1-inner{ min-height:calc(100svh - clamp(158px,21vh,248px)); display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,1fr); gap:clamp(32px,5vw,72px); align-items:center; } /* =================================================================== LEFT — COPY =================================================================== */ .s1-copy{max-width:620px} .s1-title{margin-top:6px} .s1-lead{margin-top:clamp(20px,2.6vw,30px);max-width:560px} .s1-cta{ margin-top:clamp(28px,3.4vw,40px); display:flex;flex-wrap:wrap;gap:14px;align-items:center; } .s1-trustline{ margin-top:clamp(26px,3vw,38px); display:flex;align-items:center;gap:12px;flex-wrap:wrap; padding-top:22px;border-top:1px solid var(--c-line); } .s1-stars{font-size:15px;flex:none;filter:drop-shadow(0 0 8px var(--green-glow))} .s1-trustline__txt{font-size:14px;line-height:1.5;color:var(--c-ink-3)} .s1-trustline__txt strong{color:var(--c-ink-2);font-weight:600} /* =================================================================== RIGHT — 3D STAGE =================================================================== */ .s1-stage{position:relative;perspective:1500px;min-height:520px} .s1-stage__inner{ position:relative; transform-style:preserve-3d; width:100%; max-width:520px; margin-left:auto; } /* ----- the green "current" wires linking the conversion journey ---- */ .s1-wires{position:absolute;inset:-6% -4%;width:108%;height:112%;z-index:1; overflow:visible;pointer-events:none;opacity:.9} .s1-wires .ma-current__track{stroke-width:1.2} .s1-wires .ma-current__line{stroke-width:1.4} .s1-wires__dot{fill:var(--green-bright);filter:drop-shadow(0 0 5px var(--green))} /* ----- floating-card shared base ----------------------------------- */ .s1-float{ position:absolute;z-index:3; border-radius:var(--r); background:color-mix(in srgb, var(--c-panel) 86%, transparent); border:1px solid var(--c-line); box-shadow:0 28px 70px -34px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.05); backdrop-filter:blur(14px) saturate(130%); -webkit-backdrop-filter:blur(14px) saturate(130%); will-change:transform; } /* =================================================================== DASHBOARD (Meta Ads Manager) =================================================================== */ /* ===== Brand film video card (the flagship commercial; replaces the dashboard mockup) ===== */ .s1-film{position:relative;z-index:2;width:100%;border-radius:var(--r-lg);overflow:hidden; background:linear-gradient(180deg,color-mix(in srgb,var(--c-panel-2) 94%,transparent),color-mix(in srgb,var(--c-panel) 92%,transparent)); border:1px solid var(--c-line-green); box-shadow:0 40px 90px -50px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.03)} .s1-film__bar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--c-line);background:rgba(255,255,255,.02)} .s1-film__name{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--c-ink-3);text-transform:uppercase;margin-right:auto;white-space:nowrap} .s1-film__screen{position:relative;aspect-ratio:341/180;background:#05080a;overflow:hidden} .s1-film__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#05080a} .s1-film__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6; width:76px;height:76px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;color:#04140C; background:radial-gradient(circle at 32% 30%,var(--green-bright),var(--green-deep-2)); box-shadow:0 16px 44px -10px rgba(39,245,140,.6);transition:transform .22s var(--ease-out)} .s1-film__play svg{margin-left:4px} .s1-film__play:hover{transform:translate(-50%,-50%) scale(1.08)} .s1-film__screen.is-playing .s1-film__play{display:none} .s1-film__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 16px} .s1-film__cap{font-size:12.5px;color:var(--c-ink-2)} .s1-film__watch{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.07em;color:var(--c-accent);white-space:nowrap} .s1-film__screen.is-playing ~ .s1-film__foot .s1-film__watch{opacity:0;transition:opacity .3s} .s1-dash{ position:relative;z-index:2; width:100%; border-radius:var(--r-lg); background:linear-gradient(180deg, color-mix(in srgb, var(--c-panel-2) 94%, transparent), color-mix(in srgb, var(--c-panel) 92%, transparent)); border:1px solid var(--c-line-green); box-shadow:var(--c-shadow), 0 0 64px -30px var(--green-glow), inset 0 1px 0 rgba(255,255,255,.06); overflow:hidden; transform-style:preserve-3d; will-change:transform; } .s1-dash::after{ /* glass sheen */ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(135deg, rgba(255,255,255,.07), transparent 36%); } .s1-dash__bar{ display:flex;align-items:center;gap:12px; padding:12px 16px; border-bottom:1px solid var(--c-line); background:rgba(255,255,255,.02); } .s1-dots{display:inline-flex;gap:6px;flex:none} .s1-dots i{width:10px;height:10px;border-radius:50%;background:var(--c-ink-3);opacity:.5} .s1-dots i:first-child{background:#FF5F57;opacity:.85} .s1-dots i:nth-child(2){background:#FEBC2E;opacity:.85} .s1-dots i:last-child{background:#28C840;opacity:.85} .s1-dash__name{ font-family:var(--font-mono);font-size:11px;letter-spacing:.14em; color:var(--c-ink-3);text-transform:uppercase;margin-right:auto; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .s1-live{ display:inline-flex;align-items:center;gap:6px;flex:none; font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.12em; color:var(--green);padding:3px 9px;border-radius:var(--r-pill); background:rgba(39,245,140,.1);border:1px solid var(--c-line-green); } .s1-live__dot{width:6px;height:6px;border-radius:50%;background:var(--green); box-shadow:0 0 8px var(--green);animation:s1Pulse 1.8s var(--ease-out) infinite} .s1-dash__body{padding:18px} .s1-dash__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px} .s1-dash__label{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;color:var(--c-ink-3);text-transform:uppercase} .s1-dash__camp{font-family:var(--font-display);font-weight:600;font-size:16px;color:var(--c-ink);margin-top:3px;letter-spacing:.01em} .s1-dash__pill{ flex:none;font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.04em; color:var(--green);padding:6px 11px;border-radius:var(--r-pill); background:rgba(39,245,140,.1);border:1px solid var(--c-line-green);white-space:nowrap; } /* audience reach ticker */ .s1-dash__reach{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:14px} .s1-dash__reachk{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--c-ink-3)} .s1-dash__reachv{font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--c-ink-2);font-variant-numeric:tabular-nums;letter-spacing:.01em} /* ----- chart ------------------------------------------------------- */ .s1-chart{position:relative;margin:0 0 16px;height:120px} .s1-spark{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .s1-chart__grid{stroke:var(--c-line);stroke-width:1;stroke-dasharray:2 5} .s1-area{opacity:0;transition:opacity 900ms var(--ease-out) 260ms} .s1.is-revealed .s1-area{opacity:1} .s1-line{ stroke-dasharray:1;stroke-dashoffset:1; transition:stroke-dashoffset 1300ms var(--ease-out) 120ms; filter:drop-shadow(0 2px 8px var(--green-glow)); } .s1.is-revealed .s1-line{stroke-dashoffset:0} .s1-line__cap{fill:var(--green-bright);opacity:0; transition:opacity 300ms ease 1300ms;filter:drop-shadow(0 0 6px var(--green))} .s1.is-revealed .s1-line__cap{opacity:1;animation:s1Pulse 2.2s var(--ease-out) 1500ms infinite} /* slim ghost bars under the line for texture */ .s1-bars{position:absolute;inset:auto 0 0;height:46px;display:flex;align-items:flex-end;gap:5px;opacity:.5;mix-blend-mode:screen} /* budget pacing bar */ .s1-pace{margin-bottom:14px} .s1-pace__k{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--c-ink-3);margin-bottom:6px} .s1-pace__bar{display:block;height:6px;border-radius:var(--r-pill);background:rgba(255,255,255,.05);overflow:hidden;border:1px solid var(--c-line)} .s1-pace__fill{display:block;height:100%;width:68%;border-radius:var(--r-pill); background:linear-gradient(90deg,var(--green-deep-2),var(--green)); box-shadow:0 0 12px -2px var(--green-glow); transform:scaleX(0);transform-origin:left; transition:transform 1100ms var(--ease-out) 360ms} .s1.is-revealed .s1-pace__fill{transform:scaleX(1)} /* ----- KPI tiles --------------------------------------------------- */ .s1-kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px} .s1-kpi{ padding:11px 13px;border-radius:var(--r-sm); background:rgba(255,255,255,.03);border:1px solid var(--c-line); } .s1-kpi--good{border-color:var(--c-line-green);background:rgba(39,245,140,.05)} .s1-kpi__k{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--c-ink-3)} .s1-kpi__v{font-family:var(--font-display);font-weight:700;font-size:clamp(17px,2.2vw,21px);color:var(--c-ink);margin-top:4px;font-variant-numeric:tabular-nums;letter-spacing:.01em} .s1-kpi--good .s1-kpi__v{color:var(--green)} /* =================================================================== FLOATING SATELLITE CARDS =================================================================== */ /* --- Ad creative card --- */ .s1-ad{ width:206px;left:-7%;top:-46px;z-index:4; padding:0;overflow:hidden; } .s1-ad__chrome{display:flex;align-items:center;gap:9px;padding:10px 11px} .s1-ad__avatar{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center; font-family:var(--font-display);font-weight:700;font-size:12px;color:var(--c-on-accent); background:linear-gradient(135deg,var(--green-bright),var(--green-deep-2));letter-spacing:.02em} .s1-ad__meta{display:flex;flex-direction:column;line-height:1.25;min-width:0} .s1-ad__meta b{font-size:12px;color:var(--c-ink);font-weight:600} .s1-ad__meta em{font-style:normal;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.04em;color:var(--c-ink-3);display:inline-flex;align-items:center;gap:4px} .s1-ad__more{margin-left:auto;color:var(--c-ink-3);font-size:14px;letter-spacing:1px;line-height:0} .s1-ad__media{position:relative;aspect-ratio:4/3;background:var(--c-panel-2);overflow:hidden} .s1-ad__media img{width:100%;height:100%;object-fit:cover} .s1-ad__media.is-fallback{background:linear-gradient(135deg,var(--c-panel-2),var(--green-deep))} .s1-ad__badge{position:absolute;top:8px;left:8px;font-family:var(--font-mono);font-size:9px;font-weight:600; letter-spacing:.08em;padding:4px 8px;border-radius:6px;color:var(--c-on-accent);background:var(--green); box-shadow:0 4px 14px -4px var(--green-glow)} .s1-ad__foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px; background:rgba(255,255,255,.03);border-top:1px solid var(--c-line)} .s1-ad__cta{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--c-ink)} .s1-ad__foot svg{color:var(--green);flex:none} /* --- New lead notification --- */ .s1-lead-card{ display:flex;align-items:flex-start;gap:11px; width:226px;right:-9%;top:20px;z-index:5; padding:13px 15px; } .s1-ping{position:relative;flex:none;width:11px;height:11px;margin-top:4px} .s1-ping__dot{position:absolute;inset:0;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)} .s1-ping::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--green); animation:s1Ping 1.8s var(--ease-out) infinite} .s1-lead-card__k{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;color:var(--green);text-transform:uppercase} .s1-lead-card__name{font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--c-ink);margin-top:3px} .s1-lead-card__sub{font-size:11px;color:var(--c-ink-3);margin-top:2px} /* --- Appointment booked --- */ .s1-appt{ display:flex;align-items:center;gap:11px; width:236px;left:-4%;bottom:-30px;z-index:5; padding:12px 14px; } .s1-appt__cal{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center; color:var(--green);background:rgba(39,245,140,.08);border:1px solid var(--c-line-green)} .s1-appt__k{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;color:var(--c-ink-3);text-transform:uppercase} .s1-appt__when{font-family:var(--font-display);font-weight:600;font-size:13px;color:var(--c-ink);margin-top:3px} /* --- Revenue counter --- */ .s1-rev{ right:-7%;bottom:18px;z-index:6; padding:14px 18px;min-width:172px; border-color:var(--c-line-green); background:color-mix(in srgb, var(--c-panel) 80%, transparent); box-shadow:0 28px 70px -34px rgba(0,0,0,.85), 0 0 50px -22px var(--green-glow), inset 0 1px 0 rgba(255,255,255,.06); } .s1-rev__k{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;color:var(--c-ink-3);text-transform:uppercase} .s1-rev__v{font-family:var(--font-display);font-weight:700;font-size:clamp(24px,3vw,30px);color:var(--c-ink); margin-top:5px;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:.01em} .s1-rev__trend{display:inline-flex;align-items:center;gap:5px;margin-top:7px; font-family:var(--font-mono);font-size:10.5px;font-weight:600;color:var(--green)} .s1-rev__trend svg{color:var(--green)} /* gentle idle bob — only when the card has fully revealed & on fine pointers. Layered AFTER the reveal so it never fights the entrance transform. */ @media (hover:hover){ .s1.is-revealed .s1-ad{animation:s1FloatA 8s ease-in-out infinite} .s1.is-revealed .s1-lead-card{animation:s1FloatB 9s ease-in-out infinite} .s1.is-revealed .s1-appt{animation:s1FloatA 10.5s ease-in-out infinite .6s} .s1.is-revealed .s1-rev{animation:s1FloatB 11s ease-in-out infinite .3s} } /* =================================================================== PROOF BAR =================================================================== */ .s1-proof{margin-top:clamp(48px,6vw,80px)} .s1-stats{ display:grid;grid-template-columns:repeat(4,1fr); gap:clamp(12px,2vw,28px); padding:clamp(22px,3vw,32px) clamp(20px,3vw,36px); border-radius:var(--r-lg); background:linear-gradient(180deg, color-mix(in srgb, var(--c-panel) 70%, transparent), color-mix(in srgb, var(--c-panel-2) 70%, transparent)); border:1px solid var(--c-line); box-shadow:var(--c-shadow); } .s1-stat{position:relative;text-align:center;padding:0 8px} .s1-stat + .s1-stat::before{content:"";position:absolute;left:0;top:8%;height:84%;width:1px;background:var(--c-line)} .s1-stat__n{display:block;font-size:clamp(28px,4.4vw,46px); background:linear-gradient(120deg,var(--c-ink),var(--green) 140%); -webkit-background-clip:text;background-clip:text;color:transparent} .s1-stat__l{display:block;margin-top:8px;font-family:var(--font-mono); font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--c-ink-3)} /* =================================================================== TRUSTED-BY MARQUEE =================================================================== */ .s1-trusted{margin-top:clamp(36px,4.5vw,56px)} .s1-trusted__lbl{text-align:center;margin-bottom:20px;color:var(--c-ink-3);font-size:11px;letter-spacing:.14em} .s1-marquee{padding:4px 0;display:flex;flex-wrap:nowrap} .s1-row{align-items:center;gap:30px;flex:0 0 auto} /* --- platform logos on the floating cards --- */ .s1-dash__logo{flex:0 0 auto} .s1-ad__plat{flex:0 0 auto;margin-left:auto} .s1-inlinelogo{width:13px;height:13px;object-fit:contain;vertical-align:-2px;margin-right:5px;display:inline-block} /* --- real client logo chips in the trusted-by marquee (white chips on dark) --- */ /* logo-wall: uniform logo HEIGHT, box hugs each logo's WIDTH — so square logos (Texans/Palms/Sky Clean) no longer float in a wide fixed box, and wide logos (Quartz/Attic Guard) still get room. Consistent optical size, zero dead space. */ .s1-logo{flex:0 0 auto;display:flex;align-items:center;justify-content:center; height:64px;width:auto;min-width:88px;max-width:230px;padding:9px 22px;background:#fff;border-radius:14px; border:1px solid rgba(255,255,255,.06);box-shadow:0 4px 14px -8px rgba(0,0,0,.5)} .s1-logo img{height:46px;max-height:46px;width:auto;max-width:184px;object-fit:contain;display:block} .s1-logo--dark{background:#0c1512;border:1px solid rgba(255,255,255,.12)} .s1-brand{ font-family:var(--font-display);font-weight:600; font-size:clamp(17px,2vw,22px);letter-spacing:.01em; color:var(--c-ink-2);white-space:nowrap; transition:color var(--dur-ui) var(--ease-out); } .s1-brand__sep{color:var(--green);opacity:.45;font-family:var(--font-display);font-weight:400} @media (hover:hover){ .s1-marquee:hover .s1-brand{color:var(--c-ink-3)} .s1-marquee .s1-brand:hover{color:var(--green)} } /* =================================================================== KEYFRAMES (decorative — transform/opacity only) =================================================================== */ @keyframes s1Pulse{0%,100%{opacity:1}50%{opacity:.35}} @keyframes s1Ping{0%{transform:scale(1);opacity:.9}80%,100%{transform:scale(2.6);opacity:0}} @keyframes s1FloatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} @keyframes s1FloatB{0%,100%{transform:translateY(0)}50%{transform:translateY(9px)}} /* =================================================================== RESPONSIVE =================================================================== */ /* large-but-narrow desktop: tighten the stage so floats don't escape */ @media (max-width:1180px){ .s1-stage__inner{max-width:460px} .s1-ad{width:188px;left:-3%} .s1-lead-card{width:212px;right:-4%} .s1-appt{width:222px;left:-2%} .s1-rev{right:-3%} } /* tablet / collapse the split to a single column */ @media (max-width:980px){ .s1-inner{grid-template-columns:1fr;gap:clamp(48px,8vw,72px);min-height:0} .s1-copy{max-width:640px;margin-inline:auto;text-align:center} .s1-title{margin-inline:auto} .s1-lead{margin-inline:auto} .s1-cta{justify-content:center} .s1-trustline{justify-content:center;text-align:center} .s1-stage{min-height:0;perspective:none} .s1-stage__inner{max-width:560px;margin-inline:auto} } /* mobile: float satellites become a clean stacked deck (no absolute / no wires) */ @media (max-width:860px){ .s1-stage__inner{max-width:440px} .s1-wires{display:none} .s1-dash{transform:none!important} /* kill any tilt residue on touch */ .s1-float{ position:relative;inset:auto;width:auto!important; margin-top:12px;animation:none!important; backdrop-filter:none;-webkit-backdrop-filter:none; background:var(--c-panel); } .s1-ad{max-width:300px;margin-inline:auto;margin-top:16px} .s1-lead-card,.s1-appt,.s1-rev{margin-top:10px} } @media (max-width:520px){ .s1{padding-top:clamp(104px,22vh,132px)} .s1-stats{grid-template-columns:1fr 1fr;gap:0} .s1-stat{padding:16px 8px} .s1-stat + .s1-stat::before{display:none} /* horizontal hairlines between rows on the 2x2 grid */ .s1-stat:nth-child(n+3){border-top:1px solid var(--c-line)} .s1-stat:nth-child(2n)::after{content:"";position:absolute;left:0;top:18%;height:64%;width:1px;background:var(--c-line)} .s1-trustline{flex-direction:column;gap:8px} .s1-ad{max-width:100%} } /* phones: CTAs go full-width so nothing crowds or clips */ @media (max-width:460px){ .s1-btn{width:100%;justify-content:center} } @media (max-width:360px){ .s1-dash__body{padding:15px} .s1-kpis{gap:6px} .s1-kpi{padding:10px 11px} } /* ----- reduced motion: engine still handles reveals; kill our loops --- */ @media (prefers-reduced-motion:reduce){ .s1-ad,.s1-lead-card,.s1-appt,.s1-rev{animation:none!important} .s1-live__dot,.s1-line__cap,.s1-ping::after{animation:none} .s1-wires__dot{display:none} .s1-area,.s1-line,.s1-pace__fill{transition:none} .s1.is-revealed .s1-line{stroke-dashoffset:0} .s1.is-revealed .s1-area{opacity:1} .s1.is-revealed .s1-pace__fill{transform:scaleX(1)} } /* ===================================================================== SECTION 02 — THE LEAD-TO-REVENUE SYSTEM (white / ma-system) 3D tapering 8-stage funnel on a green "current" spine, nested-bowl silhouette, floating KPI/feature rails, per-stage conversion reads, revenue payoff dashboard, 5-up stat row. Scoped: every selector starts with .s2 — colors via contextual --c-* tokens. ===================================================================== */ .s2{ --s2-pad-x:clamp(14px,2.4vw,30px); } /* ---------- ambient depth ------------------------------------------- */ .s2-amb{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden} .s2-amb__orb{position:absolute;border-radius:50%;filter:blur(90px)} .s2-amb__orb--1{width:560px;height:560px;top:-160px;left:-120px; background:radial-gradient(circle,rgba(15,184,102,.16),transparent 70%)} .s2-amb__orb--2{width:600px;height:600px;bottom:-200px;right:-160px; background:radial-gradient(circle,rgba(10,138,79,.12),transparent 70%)} .s2-amb__grid{position:absolute;inset:0; background-image:linear-gradient(var(--c-line) 1px,transparent 1px), linear-gradient(90deg,var(--c-line) 1px,transparent 1px); background-size:72px 72px;opacity:.5; -webkit-mask-image:radial-gradient(ellipse 75% 60% at 50% 32%,#000,transparent 78%); mask-image:radial-gradient(ellipse 75% 60% at 50% 32%,#000,transparent 78%)} /* ---------- header --------------------------------------------------- */ .s2-head{margin-bottom:clamp(42px,5vw,68px)} .s2-head .ma-lead{margin-top:18px} /* shared up/down arrow glyph */ .s2-arr{width:11px;height:11px;flex:none;margin-right:3px;vertical-align:-1px} /* ===================================================================== STAGE LAYOUT — left rail · funnel · right rail ===================================================================== */ .s2-stage{ display:grid; grid-template-columns:minmax(0,1fr) minmax(540px,2.05fr) minmax(0,1fr); gap:clamp(20px,2.4vw,40px); align-items:start; } /* ---------- side rails ---------------------------------------------- */ .s2-rail{display:flex;flex-direction:column;gap:16px;position:sticky;top:120px} .s2-rail--l{align-items:stretch;margin-top:34px} .s2-rail--r{align-items:stretch;margin-top:96px} /* contain the soft brand-colour accent glows within each rail */ .s2-rail{isolation:isolate} /* framed real screenshots tucked into the rails (kit .ma-shot handles the frame + hover lift); these sit ABOVE the accent glow but keep the funnel as the hero */ .s2-shot{position:relative;z-index:1} .s2-shot>img{object-position:top left} .s2-kpi{ background:var(--c-panel);border:1px solid var(--c-line);border-radius:var(--r); padding:18px 18px 16px;position:relative;overflow:hidden; box-shadow:0 18px 44px -34px rgba(5,5,5,.5); transition:transform var(--dur-ui) var(--ease-out),border-color var(--dur-ui) ease,box-shadow var(--dur-ui) ease; } .s2-kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px; background:linear-gradient(var(--green-deep-2),transparent)} @media (hover:hover){.s2-kpi:hover{transform:translateY(-3px);border-color:var(--c-line-green);box-shadow:0 26px 56px -34px rgba(10,138,79,.5)}} .s2-kpi__eye{display:flex;align-items:center;gap:7px;font-family:var(--font-mono); font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--c-ink-3)} .s2-kpi__val{display:block;font-size:clamp(26px,2.6vw,34px);letter-spacing:.01em;margin:8px 0 6px;color:var(--c-ink)} .s2-kpi__unit{font-size:.5em;font-weight:600;margin-left:4px;color:var(--c-ink-3);letter-spacing:0} .s2-kpi__sub{display:flex;align-items:center;font-size:12.5px;line-height:1.4;color:var(--c-ink-2)} .s2-up{color:var(--green-deep);font-weight:600} .s2-down{color:var(--green-deep);font-weight:600} .s2-live{width:7px;height:7px;border-radius:50%;background:var(--green-deep-2); box-shadow:0 0 0 0 rgba(15,184,102,.5);animation:s2live 2s ease-out infinite} @keyframes s2live{0%{box-shadow:0 0 0 0 rgba(15,184,102,.45)}70%{box-shadow:0 0 0 7px rgba(15,184,102,0)}100%{box-shadow:0 0 0 0 rgba(15,184,102,0)}} .s2-feat{display:flex;gap:14px;align-items:flex-start; background:var(--c-panel);border:1px solid var(--c-line);border-radius:var(--r); padding:18px;box-shadow:0 18px 44px -34px rgba(5,5,5,.5); transition:transform var(--dur-ui) var(--ease-out),border-color var(--dur-ui) ease,box-shadow var(--dur-ui) ease} @media (hover:hover){.s2-feat:hover{transform:translateY(-3px);border-color:var(--c-line-green);box-shadow:0 26px 56px -34px rgba(10,138,79,.45)}} .s2-feat__ico{flex:none;width:40px;height:40px;border-radius:11px;display:grid;place-items:center; background:var(--c-accent-soft);color:var(--green-deep);border:1px solid var(--c-line-green)} .s2-feat__ico svg{width:21px;height:21px} .s2-feat__h{font-family:var(--font-display);font-weight:700;text-transform:uppercase; font-size:14px;letter-spacing:.01em;color:var(--c-ink);margin-bottom:5px; display:flex;align-items:center;gap:8px;flex-wrap:wrap} .s2-feat__p{font-size:14px;line-height:1.5;color:var(--c-ink-2)} /* real platform logos beside the feature title (full-colour brand proof) */ .s2-feat__plats{display:inline-flex;align-items:center;gap:5px;margin-left:auto;padding-left:8px} .s2-feat__plats .ma-logo{width:16px;height:16px} /* real platform logos on the relevant funnel stages — tiny, do not disturb taper */ .s2-card__plats{display:inline-flex;align-items:center;gap:5px} .s2-card__plats .ma-logo{width:16px;height:16px} /* ===================================================================== THE FUNNEL (3D tapering stack on a vertical green current) ===================================================================== */ .s2-funnel{position:relative;padding:6px 0;perspective:1500px} .s2-scene{position:relative} /* nested-bowl silhouette backing — echoes the classic funnel shape */ .s2-silo{position:absolute;inset:0;width:100%;height:100%;z-index:0; opacity:0;transition:opacity 1s ease .25s} .is-revealed .s2-silo{opacity:.9} .s2-silo__shape{stroke-dasharray:3 9;opacity:.7} /* central spine — proportional viewBox so flowing dots stay circular */ .s2-spine{position:absolute;top:0;left:50%;transform:translateX(-50%); width:24px;height:100%;z-index:1;overflow:visible} .s2-spine .ma-current__track{stroke-width:2} .s2-spine .ma-current__line{stroke-width:2} /* the spine SVG is stretched on Y, so dots render as soft vertical light-streaks travelling the current — leaned into intentionally with a strong glow. */ .s2-spine__dot{fill:var(--green-deep-2);filter:drop-shadow(0 0 7px rgba(15,184,102,.85))} .s2-spine__dot--2{fill:var(--green-deep);filter:drop-shadow(0 0 6px rgba(10,138,79,.7))} .s2-spine__dot--3{fill:var(--green);filter:drop-shadow(0 0 6px rgba(39,245,140,.7))} @media (prefers-reduced-motion:reduce){.s2-spine__dot,.s2-spine__dot--2,.s2-spine__dot--3{display:none}} .s2-stages{position:relative;z-index:2;display:flex;flex-direction:column; align-items:center;gap:clamp(12px,1.5vw,18px); transform-style:preserve-3d} /* each row tapers — width shrinks per stage to draw the funnel */ .s2-stageRow{width:var(--w,100%);max-width:100%;position:relative} .s2-w1{--w:100%} .s2-w2{--w:93%} .s2-w3{--w:86%} .s2-w4{--w:79%} .s2-w5{--w:72%} .s2-w6{--w:65%} .s2-w7{--w:58%} .s2-w8{--w:82%} /* payoff tile widens back out */ /* per-stage conversion read — sits on the funnel edge, mono micro-label */ .s2-conv{position:absolute;top:50%;right:0;transform:translate(calc(100% + 12px),-50%); font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.1em; text-transform:uppercase;color:var(--green-deep);white-space:nowrap; display:inline-flex;align-items:center;gap:6px;pointer-events:none} .s2-conv::before{content:"";width:14px;height:1px;background:var(--c-line-green)} .s2-conv--end{color:var(--c-ink-3)} /* The conversion-rate connector labels are absolutely positioned outside the flow card's right edge; within the fixed 1320px content grid they collide with the right-hand feature column at every desktop width (and are illustrative numbers the owner asked to drop). Hidden so nothing clips/overlaps. */ .s2-conv{display:none} /* ---------- stage card ---------------------------------------------- */ .s2-card{ display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(14px,1.8vw,22px); padding:clamp(15px,1.7vw,20px) clamp(16px,1.9vw,24px); border-radius:var(--r);background:var(--c-panel);border:1px solid var(--c-line); box-shadow:0 22px 50px -36px rgba(5,5,5,.55); position:relative;overflow:hidden; transition:transform var(--dur-ui) var(--ease-out),border-color var(--dur-ui) ease,box-shadow var(--dur-ui) ease; } /* left green accent edge + faint inner glow */ .s2-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px; background:linear-gradient(180deg,var(--green-deep-2),var(--green-deep));opacity:.85} .s2-card::after{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(120% 80% at 0% 0%,rgba(15,184,102,.07),transparent 60%)} @media (hover:hover){ .s2-card:hover{transform:translateY(-3px);border-color:var(--c-line-green); box-shadow:0 30px 64px -34px rgba(10,138,79,.5)} } .s2-card:active{transform:translateY(-1px) scale(.992)} /* the WON stage glows a touch stronger to mark the payoff moment */ .s2-card--won{border-color:var(--c-line-green); background:linear-gradient(180deg,rgba(10,138,79,.06),transparent 55%),var(--c-panel)} .s2-card__num{font-size:clamp(24px,2.6vw,34px);letter-spacing:.005em; color:transparent;-webkit-text-stroke:1.4px var(--green-deep); text-stroke:1.4px var(--green-deep);opacity:.85;line-height:1;flex:none} .s2-card__body{min-width:0} .s2-card__top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:5px} .s2-card__ico{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center; background:var(--c-accent-soft);color:var(--green-deep);border:1px solid var(--c-line-green)} .s2-card__ico svg{width:17px;height:17px} .s2-card__label{font-family:var(--font-display);font-weight:700;text-transform:uppercase; font-size:clamp(15px,1.6vw,18px);letter-spacing:.01em;color:var(--c-ink);line-height:1} .s2-card__tag{font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.1em; color:var(--green-deep);background:var(--c-accent-soft);border:1px solid var(--c-line-green); padding:3px 8px;border-radius:var(--r-pill);white-space:nowrap} .s2-card__tag--won{color:var(--c-on-accent);background:var(--green-deep);border-color:var(--green-deep)} .s2-card__line{font-size:14px;line-height:1.45;color:var(--c-ink-2);max-width:46ch} .s2-card__metric{flex:none;text-align:right;min-width:96px;padding-left:14px; border-left:1px solid var(--c-line)} .s2-card__metric strong{display:block;font-size:clamp(17px,1.9vw,22px);letter-spacing:.01em; color:var(--green-deep);line-height:1.05} .s2-card__metric span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em; text-transform:uppercase;color:var(--c-ink-3)} /* ===================================================================== STAGE 08 — REVENUE PAYOFF DASHBOARD TILE ===================================================================== */ .s2-stageRow--pay{margin-top:6px} .s2-pay{ border-radius:var(--r-lg);overflow:hidden;position:relative; background: linear-gradient(180deg,rgba(10,138,79,.05),transparent 40%), var(--c-panel); border:1px solid var(--c-line-green); box-shadow:0 40px 90px -44px rgba(10,138,79,.45),0 0 0 1px rgba(10,138,79,.04); transition:transform var(--dur-ui) var(--ease-out),box-shadow var(--dur-ui) ease; } @media (hover:hover){.s2-pay:hover{box-shadow:0 50px 110px -44px rgba(10,138,79,.55)}} .s2-pay__chrome{display:flex;align-items:center;gap:12px;padding:11px 16px; border-bottom:1px solid var(--c-line);background:var(--c-panel-2)} .s2-dotrow{display:flex;gap:6px} .s2-dotrow i{width:9px;height:9px;border-radius:50%;background:var(--c-line);display:block} .s2-dotrow i:first-child{background:var(--green-deep-2)} .s2-pay__chip{font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.14em; color:var(--green-deep);display:inline-flex;align-items:center;gap:6px} .s2-pay__chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green-deep-2); box-shadow:0 0 0 0 rgba(15,184,102,.5);animation:s2live 2s ease-out infinite} .s2-pay__num{margin-left:auto;font-size:18px;color:transparent;-webkit-text-stroke:1.2px var(--green-deep); text-stroke:1.2px var(--green-deep);opacity:.7} .s2-pay__grid{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(16px,2.2vw,30px); align-items:center;padding:clamp(20px,2.4vw,30px)} .s2-pay__main{min-width:0} .s2-pay__eye{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--c-ink-3)} .s2-pay__big{display:block;font-size:clamp(22px,2.3vw,32px);letter-spacing:.01em;line-height:1;margin:10px 0 8px; color:var(--green-deep);white-space:nowrap;font-variant-numeric:tabular-nums;max-width:100%} .s2-pay__delta{display:flex;align-items:center;font-size:13px} .s2-spark{margin:0;grid-row:1 / span 2;align-self:stretch;display:flex;align-items:flex-end} .s2-spark svg{width:100%;height:100%;min-height:90px} .s2-spark__line{stroke:var(--green-deep-2);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round; filter:drop-shadow(0 4px 8px rgba(10,138,79,.3)); stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--ease-out) .25s} .is-revealed .s2-spark__line{stroke-dashoffset:0} .s2-spark__area{opacity:0;transition:opacity .8s ease .5s} .is-revealed .s2-spark__area{opacity:1} .s2-spark__tip{fill:var(--green-deep-2);opacity:0; transition:opacity .3s ease 1.5s} .is-revealed .s2-spark__tip{opacity:1;animation:s2tip 2.2s ease-out 1.6s infinite} @keyframes s2tip{0%{filter:drop-shadow(0 0 0 rgba(15,184,102,.6))}50%{filter:drop-shadow(0 0 8px rgba(15,184,102,.9))}100%{filter:drop-shadow(0 0 0 rgba(15,184,102,.6))}} .s2-pay__legs{display:flex;gap:8px;grid-column:1 / -1;flex-wrap:wrap} .s2-leg{flex:1 1 90px;background:var(--c-bg-edge);border:1px solid var(--c-line);border-radius:var(--r-sm); padding:11px 13px;display:flex;flex-direction:column;gap:4px} .s2-leg__k{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;color:var(--c-ink-3)} .s2-leg__v{font-size:18px;letter-spacing:.01em;color:var(--c-ink)} /* ===================================================================== 5-UP STAT ROW ===================================================================== */ .s2-bottom{margin-top:clamp(56px,7vw,90px);display:grid;grid-template-columns:repeat(5,1fr); gap:clamp(12px,1.4vw,20px)} .s2-stat{position:relative;text-align:center;padding:clamp(22px,2.6vw,34px) 16px; border-radius:var(--r);background:var(--c-panel);border:1px solid var(--c-line); box-shadow:0 18px 44px -36px rgba(5,5,5,.45); transition:transform var(--dur-ui) var(--ease-out),border-color var(--dur-ui) ease,box-shadow var(--dur-ui) ease} @media (hover:hover){.s2-stat:hover{transform:translateY(-4px);border-color:var(--c-line-green);box-shadow:0 28px 56px -34px rgba(10,138,79,.45)}} .s2-stat__n{display:block;font-size:clamp(32px,4vw,50px);letter-spacing:.005em;line-height:1;color:var(--c-ink)} .s2-stat__l{display:block;margin-top:12px;font-family:var(--font-mono);font-size:12px;font-weight:600; letter-spacing:.1em;color:var(--green-deep)} .s2-stat__d{display:block;margin-top:6px;font-size:14px;line-height:1.4;color:var(--c-ink-2)} .s2-stat--accent{background:linear-gradient(180deg,rgba(10,138,79,.07),transparent),var(--c-panel); border-color:var(--c-line-green)} .s2-stat--accent .s2-stat__n{color:var(--green-deep)} /* ===================================================================== RESPONSIVE ===================================================================== */ /* tablet: rails become a row below the funnel, funnel goes wider */ @media (max-width:1100px){ .s2-stage{grid-template-columns:1fr;gap:clamp(22px,4vw,36px)} .s2-rail{position:static;flex-direction:row;flex-wrap:wrap;margin:0} .s2-rail--l{order:3} .s2-funnel{order:2} .s2-rail--r{order:4} .s2-rail > *{flex:1 1 220px} .s2-stageRow{--w:100% !important} .s2-w2,.s2-w3,.s2-w4,.s2-w5,.s2-w6,.s2-w7{--w:100% !important} /* keep a gentle visual taper via inset padding so it still reads as a funnel */ .s2-w2{padding:0 3%}.s2-w3{padding:0 6%}.s2-w4{padding:0 9%} .s2-w5{padding:0 12%}.s2-w6{padding:0 15%}.s2-w7{padding:0 18%} .s2-stageRow--pay{padding:0} .s2-silo{display:none} /* silhouette only makes sense with the taper */ } /* below ~860: stack cleanly, kill the spine + 3D so nothing distorts */ @media (max-width:860px){ .s2-spine{display:none} .s2-stages{gap:12px} .s2-stageRow,.s2-w2,.s2-w3,.s2-w4,.s2-w5,.s2-w6,.s2-w7{--w:100% !important;padding:0 !important} .s2-bottom{grid-template-columns:repeat(2,1fr)} .s2-stat--accent{grid-column:1 / -1} .s2-pay__grid{grid-template-columns:1fr;gap:18px} .s2-spark{grid-row:auto;min-height:110px} } @media (max-width:560px){ .s2-card{grid-template-columns:auto 1fr;gap:12px;padding:16px} .s2-card__num{grid-row:1;font-size:24px} .s2-card__metric{grid-column:1 / -1;grid-row:2;text-align:left; border-left:0;border-top:1px solid var(--c-line);padding:10px 0 0;margin-top:4px; display:flex;align-items:baseline;gap:8px;min-width:0} .s2-card__metric span{font-size:11px} .s2-rail{flex-direction:column} .s2-rail > *{flex:1 1 auto} .s2-bottom{grid-template-columns:1fr 1fr;gap:10px} .s2-pay__legs{flex-direction:column} .s2-card__line{max-width:none} } @media (max-width:380px){ .s2-bottom{grid-template-columns:1fr} .s2-stat--accent{grid-column:auto} } /* reduced motion: disable the perspective tilt + live pulses (engine handles reveals/counters) */ @media (prefers-reduced-motion:reduce){ .s2-live,.s2-pay__chip::before{animation:none} .s2-spark__tip{animation:none} .s2-spark__line{stroke-dashoffset:0;transition:none} .s2-funnel{perspective:none} } /* ===================================================================== SECTION 03 — THE META ADS GROWTH ENGINE (dark / cinema) A radial operating-system showpiece: glowing multi-ring core + 12 orbiting glass nodes on two rings, SVG spokes with flowing green dots, an outcome rail and a CTA banner. Collapses to a designed mobile core + system grid under ~860px (the showpiece identity survives small). Scope: every selector begins with .s3 ===================================================================== */ .s3{ overflow:clip; } /* ambient field ----------------------------------------------------- */ .s3-orb{ top:38%; opacity:.55; } .s3-grid-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5; background-image: linear-gradient(var(--c-line) 1px,transparent 1px), linear-gradient(90deg,var(--c-line) 1px,transparent 1px); background-size:58px 58px; -webkit-mask-image:radial-gradient(ellipse 70% 58% at 50% 46%,#000,transparent 78%); mask-image:radial-gradient(ellipse 70% 58% at 50% 46%,#000,transparent 78%); } /* header ------------------------------------------------------------ */ .s3-head{ margin-bottom:clamp(34px,5vw,60px); } .s3-lead{ max-width:680px; } .s3-em{ color:var(--c-ink); font-style:normal; font-weight:600; } /* ===================================================================== CINEMATIC VIDEO BACKGROUND (replaces the orbit diagram) Full-bleed, full-brightness video that reads as the section background. A narrow platform-logo line sits across the top of the video and auto- hides after ~2s. No darkening overlay — the video stays bright & sharp. ===================================================================== */ .s3-video-stage{ position:relative; width:100vw; margin-left:calc(50% - 50vw); /* full-bleed background band */ margin-top:clamp(6px,1.4vw,18px); margin-bottom:clamp(40px,5vw,60px); } .s3-video-frame{ position:relative; isolation:isolate; width:100%; aspect-ratio:16 / 9; max-height:84vh; overflow:hidden; background:#050505; } .s3-video{ position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; object-position:center; display:block; opacity:1; background:#050505; /* full brightness — never dimmed */ } /* narrow platform-logo line across the very top of the video; fades after ~2s */ .s3-iconbar{ position:absolute; z-index:3; top:0; left:0; right:0; display:flex; justify-content:center; align-items:center; gap:clamp(14px,2.4vw,32px); height:46px; padding:0 18px; background:linear-gradient(180deg,rgba(4,7,6,.55),rgba(4,7,6,0)); opacity:1; pointer-events:none; animation:s3IconHide .6s var(--ease-out) 2.2s forwards; } .s3-iconbar__logo{ width:clamp(18px,2vw,22px); height:clamp(18px,2vw,22px); object-fit:contain; display:block; filter:drop-shadow(0 1px 3px rgba(0,0,0,.65)); } @keyframes s3IconHide{ to{ opacity:0; visibility:hidden; } } /* ===================================================================== OUTCOME RAIL (proof chips from the mockup) ===================================================================== */ .s3-rail{ margin:clamp(40px,5vw,64px) auto 0; display:grid; grid-template-columns:repeat(4,1fr); gap:12px; } .s3-rail__item{ display:flex; align-items:center; gap:12px; padding:16px 18px; border-radius:var(--r); background:var(--c-panel); border:1px solid var(--c-line); transition:border-color var(--dur-ui) ease,transform var(--dur-ui) var(--ease-out),box-shadow var(--dur-ui) ease; } @media (hover:hover){ .s3-rail__item:hover{ border-color:var(--c-line-green); transform:translateY(-3px); box-shadow:0 0 40px -18px var(--green-glow); } } .s3-rail__ic{ flex:none; width:40px; height:40px; border-radius:11px; display:grid; place-items:center; color:var(--c-accent); background:radial-gradient(circle at 50% 30%,rgba(39,245,140,.16),transparent 65%),var(--c-panel-2); border:1px solid var(--c-line-green); } .s3-rail__ic svg{ width:21px; height:21px; } .s3-rail__txt{ font-size:14px; line-height:1.35; color:var(--c-ink-2); } .s3-rail__txt strong{ color:var(--c-ink); font-weight:600; } /* ===================================================================== CTA BANNER ("MORE GROWTH. LESS GUESSWORK.") ===================================================================== */ .s3-cta{ position:relative; overflow:hidden; margin:clamp(20px,2.4vw,28px) 0 0; display:grid; grid-template-columns:1.25fr .9fr; gap:clamp(24px,4vw,56px); align-items:center; padding:clamp(28px,4vw,52px) clamp(24px,4vw,52px); border-radius:var(--r-lg); background: radial-gradient(120% 140% at 0% 0%,rgba(39,245,140,.10),transparent 55%), linear-gradient(180deg,var(--c-panel-2),var(--c-panel)); border:1px solid var(--c-line-green); box-shadow:0 40px 90px -50px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05); } .s3-cta__glow{ position:absolute; right:-120px; top:50%; transform:translateY(-50%); width:420px; height:420px; border-radius:50%; pointer-events:none; background:radial-gradient(circle,rgba(39,245,140,.16),transparent 68%); filter:blur(20px); } .s3-cta__copy{ position:relative; z-index:2; min-width:0; } .s3-cta__kicker{ font-family:var(--font-mono); font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--c-accent); margin-bottom:14px; } .s3-cta__title{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.01em; line-height:.96; color:var(--c-ink); font-size:clamp(30px,4.4vw,54px); } .s3-cta__title-em{ color:var(--c-accent); } .s3-cta__sub{ margin-top:16px; font-size:clamp(15px,1.5vw,17px); line-height:1.5; color:var(--c-ink-2); max-width:520px; } .s3-cta__side{ position:relative; z-index:2; display:flex; flex-direction:column; gap:20px; } .s3-cta__stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; } .s3-cta__stat{ padding:14px 12px; border-radius:var(--r-sm); text-align:center; background:rgba(39,245,140,.05); border:1px solid var(--c-line); } .s3-cta__num{ display:block; font-family:var(--font-display); font-weight:700; font-size:clamp(22px,2.6vw,32px); line-height:1; color:var(--c-ink); font-variant-numeric:tabular-nums; } .s3-cta__lab{ display:block; margin-top:7px; font-family:var(--font-mono); font-size:11px; letter-spacing:.02em; line-height:1.3; color:var(--c-ink-3); } .s3-cta__btn{ width:100%; justify-content:center; } /* proofline */ .s3-proof{ margin-top:clamp(34px,4vw,52px); } /* ===================================================================== RESPONSIVE ===================================================================== */ /* CTA: stack at narrow desktop / tablet */ @media (max-width:920px){ .s3-cta{ grid-template-columns:1fr; gap:26px; } .s3-cta__sub{ max-width:none; } .s3-cta__glow{ right:-180px; } } /* rail reflow on tablet */ @media (max-width:860px){ .s3-rail{ grid-template-columns:repeat(2,1fr); } } @media (max-width:600px){ .s3-video-frame{ aspect-ratio:4 / 3; max-height:78vh; } /* slightly taller so it stays readable full-width */ .s3-iconbar{ height:40px; gap:14px; } } @media (max-width:560px){ .s3-rail{ grid-template-columns:1fr; } .s3-cta__stats{ gap:8px; } } @media (max-width:400px){ .s3-cta{ padding:24px 18px; } .s3-cta__stat{ padding:12px 8px; } .s3-cta__lab{ font-size:10px; } } /* ===================================================================== SECTION 04 — CLIENT INTAKE PROCESS (white / ma-system) A bespoke onboarding SYSTEM: - split header: editorial copy + a floating live "intake console" (chrome bar, 0->14 day track, live metrics, drawn-in sparkline). - 8-step timeline on a green "current" rail, each card carrying a DAY chip + per-card progress bar that fills on reveal. - commitment dashboard strip with a CTA. Desktop: timeline = 2 rows of 4, each row carries a flowing rail. < ~900px: vertical timeline (left green spine, cards stacked). < ~560px: single column. White mode green = --green-deep / --green-deep-2. Colours read only from the contextual --c-* contract; no raw mode tokens, no #fff/#000. Every selector is scoped under .s4 ===================================================================== */ .s4{ --s4-node:16px; --s4-on-green:var(--paper); } /* ===================================================================== TOP — split: copy (left) + live console (right) ===================================================================== */ .s4-top{ margin-bottom:clamp(40px,5vw,72px); } .s4-head{ max-width:860px; margin:0 auto; } /* ----- KEY STRIP (guarantees under the lead) ----------------------- */ .s4-keystrip{ margin:30px 0 0; display:flex; flex-wrap:wrap; gap:10px 12px; } .s4-key{ display:inline-flex; align-items:center; gap:9px; padding:10px 15px; border-radius:var(--r-pill); background:var(--c-panel); border:1px solid var(--c-line); font-family:var(--font-body); font-size:14px; line-height:1; color:var(--c-ink-2); } .s4-key strong{ color:var(--c-ink); font-weight:600; } .s4-key__ic{ color:var(--green-deep); flex:none; } /* ===================================================================== LIVE INTAKE CONSOLE (floating dashboard) ===================================================================== */ .s4-console{ position:relative; border-radius:var(--r-lg); background: radial-gradient(120% 130% at 100% 0%, rgba(15,184,102,.07), transparent 58%), var(--c-bg); border:1px solid var(--c-line); box-shadow:0 30px 70px -34px rgba(10,138,79,.28), var(--c-shadow); overflow:hidden; transform-style:preserve-3d; will-change:transform; } .s4-console::before{ /* green hairline at very top */ content:""; position:absolute; left:0; right:0; top:0; height:2px; background:linear-gradient(90deg, transparent, var(--green-deep-2), transparent); opacity:.6; } .s4-console__chrome{ display:flex; align-items:center; gap:12px; padding:13px 16px; border-bottom:1px solid var(--c-line); background:var(--c-panel); } .s4-dotrow{ display:inline-flex; gap:6px; } .s4-dotrow i{ width:9px; height:9px; border-radius:50%; background:var(--c-line); display:block; } .s4-dotrow i:nth-child(1){ background:rgba(10,138,79,.30); } .s4-dotrow i:nth-child(2){ background:rgba(10,138,79,.20); } .s4-console__file{ font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; color:var(--c-ink-3); margin-right:auto; } /* CRM + bookings source logos in the chrome bar */ .s4-console__src{ display:inline-flex; align-items:center; gap:8px; padding-right:10px; margin-right:2px; border-right:1px solid var(--c-line); } .s4-console__src .ma-logo{ width:16px; height:16px; opacity:.9; } .s4-console__live{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.14em; color:var(--green-deep); padding:4px 10px; border-radius:var(--r-pill); background:var(--c-accent-soft); border:1px solid var(--c-line-green); } .s4-blip{ width:7px; height:7px; border-radius:50%; background:var(--green-deep-2); box-shadow:0 0 0 0 rgba(15,184,102,.5); animation:s4Blip 2s var(--ease-out) infinite; } @keyframes s4Blip{ 0%{ box-shadow:0 0 0 0 rgba(15,184,102,.5); } 70%,100%{ box-shadow:0 0 0 8px rgba(15,184,102,0); } } .s4-console__body{ padding:clamp(16px,1.6vw,22px); } .s4-console__row{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:8px 0; border-bottom:1px dashed var(--c-line); } .s4-console__row:first-child{ padding-top:0; } .s4-console__k{ font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); } .s4-console__v{ font-family:var(--font-body); font-size:14px; font-weight:600; color:var(--c-ink); text-align:right; } .s4-console__v--accent{ color:var(--green-deep); font-family:var(--font-mono); letter-spacing:.02em; } /* 0 -> 14 day track */ .s4-track{ margin:18px 0 6px; } .s4-track__head{ display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; color:var(--c-ink-3); margin-bottom:10px; } .s4-track__bar{ position:relative; height:8px; border-radius:var(--r-pill); background:var(--c-panel-2); border:1px solid var(--c-line); overflow:visible; } .s4-track__fill{ position:absolute; left:0; top:0; bottom:0; width:78%; /* day 11 of 14 */ border-radius:var(--r-pill); background:linear-gradient(90deg, var(--green-deep), var(--green-deep-2)); box-shadow:0 0 14px rgba(15,184,102,.45); transform:scaleX(0); transform-origin:left; transition:transform 1.2s var(--ease-out) .15s; } .is-revealed .s4-track__fill{ transform:scaleX(1); } .s4-track__pin{ position:absolute; top:50%; left:var(--at); width:7px; height:7px; margin:-3.5px 0 0 -3.5px; border-radius:50%; background:var(--c-bg); border:1.5px solid var(--green-deep); } .s4-track__pin--now{ width:11px; height:11px; margin:-5.5px 0 0 -5.5px; background:var(--green-deep-2); border-color:var(--c-bg); box-shadow:0 0 0 4px rgba(15,184,102,.16), 0 0 12px rgba(15,184,102,.5); } .s4-track__pin--now b{ position:absolute; left:50%; top:calc(100% + 7px); transform:translateX(-50%); font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:.06em; color:var(--green-deep); white-space:nowrap; } /* live metrics */ .s4-console__metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:30px; } .s4-console__metrics li{ padding:13px 12px; border-radius:var(--r-sm); background:var(--c-panel); border:1px solid var(--c-line); text-align:left; } .s4-metric__n{ display:block; font-family:var(--font-display); font-weight:700; font-size:clamp(20px,2.2vw,26px); line-height:1; color:var(--c-ink); font-variant-numeric:tabular-nums; letter-spacing:.01em; } .s4-metric__l{ display:block; margin-top:6px; font-family:var(--font-mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--c-ink-3); line-height:1.3; } /* sparkline */ .s4-spark{ width:100%; height:48px; margin-top:14px; display:block; overflow:visible; } .s4-spark__line{ stroke:var(--green-deep-2); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; filter:drop-shadow(0 1px 6px rgba(15,184,102,.4)); transition:stroke-dashoffset 1.4s var(--ease-out) .2s; } .is-revealed .s4-spark__line{ stroke-dashoffset:0; } .s4-spark__area{ opacity:0; transition:opacity .9s ease .5s; } .is-revealed .s4-spark__area{ opacity:1; } /* ===================================================================== FLOW — desktop: 2 rows of 4 (CSS grid), rails behind cards ===================================================================== */ .s4-flow{ position:relative; display:grid; grid-template-columns:repeat(4, 1fr); gap:clamp(20px,2.2vw,30px) clamp(16px,1.8vw,26px); align-items:stretch; } /* horizontal rails sit centred on each row of nodes (node row = card top) */ .s4-rail{ position:absolute; left:2%; right:2%; height:40px; z-index:0; overflow:visible; pointer-events:none; width:96%; } /* rail SVG is 40px tall, line at its vertical centre (viewBox y=20 -> +20px), so top = node-centre(30px) - 20px = 10px to land the line on the nodes. */ .s4-rail--top{ top:10px; } .s4-rail--bottom{ top:calc(50% + 10px); } .s4-spine{ display:none; } /* ----- STEP / CARD ------------------------------------------------- */ .s4-step{ position:relative; z-index:1; display:flex; transform-style:preserve-3d; border-radius:var(--r-lg); } .s4-step:focus-visible{ outline:2px solid var(--green-deep); outline-offset:4px; } /* node = glowing dot on the rail, sits at the card's top edge */ .s4-node{ position:absolute; top:30px; left:50%; width:var(--s4-node); height:var(--s4-node); margin:-8px 0 0 -8px; border-radius:50%; background:var(--c-bg); border:2px solid var(--green-deep); box-shadow:0 0 0 4px rgba(10,138,79,.10), 0 0 16px rgba(15,184,102,.35); z-index:2; } .s4-node::after{ content:""; position:absolute; inset:3px; border-radius:50%; background:var(--green-deep-2); animation:s4Pulse 2.6s var(--ease-out) infinite; } .s4-node--final{ border-color:var(--green-deep-2); box-shadow:0 0 0 4px rgba(10,138,79,.14), 0 0 22px rgba(15,184,102,.55); } @keyframes s4Pulse{ 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(.6);opacity:.45} } .s4-card{ position:relative; width:100%; margin-top:48px; /* clear the rail/node */ display:flex; flex-direction:column; padding:clamp(20px,1.7vw,26px) clamp(18px,1.6vw,24px) clamp(20px,1.7vw,24px); border-radius:var(--r-lg); background:var(--c-bg); border:1px solid var(--c-line); box-shadow:0 1px 0 rgba(5,5,5,.02), var(--c-shadow); transition:border-color var(--dur-ui) ease, box-shadow var(--dur-ui) ease, transform var(--dur-ui) var(--ease-out); } /* subtle green top hairline that brightens on hover */ .s4-card::before{ content:""; position:absolute; left:22px; right:22px; top:-1px; height:2px; border-radius:2px; background:linear-gradient(90deg, transparent, var(--green-deep-2), transparent); opacity:.35; transition:opacity var(--dur-ui) ease; } .s4-card__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; } .s4-num{ font-family:var(--font-display); font-weight:700; font-size:clamp(34px,3.6vw,46px); line-height:.85; letter-spacing:.01em; color:transparent; -webkit-text-stroke:1.4px var(--c-line); transition:color var(--dur-ui) ease, -webkit-text-stroke-color var(--dur-ui) ease; } .s4-ic{ flex:none; width:46px; height:46px; border-radius:14px; display:grid; place-items:center; color:var(--green-deep); background:var(--c-accent-soft); border:1px solid var(--c-line-green); transition:background var(--dur-ui) ease, color var(--dur-ui) ease, transform var(--dur-ui) var(--ease-snap), border-color var(--dur-ui) ease; } /* DAY chip (timecode-style, mono) */ .s4-day{ align-self:flex-start; font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--green-deep); padding:4px 10px; border-radius:var(--r-pill); background:var(--c-accent-soft); border:1px solid var(--c-line-green); margin-bottom:12px; } .s4-day--loop{ /* visual cue this stage repeats */ position:relative; } .s4-title{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.01em; font-size:clamp(17px,1.5vw,20px); line-height:1.05; color:var(--c-ink); margin-bottom:9px; } .s4-desc{ font-family:var(--font-body); font-size:14px; line-height:1.5; color:var(--c-ink-2); } /* small real photo on the Creative Direction step */ .s4-shot{ display:block; width:100%; height:84px; margin-top:14px; object-fit:cover; border-radius:var(--r-sm); border:1px solid var(--c-line); } /* framed real screenshots (Realism Kit .ma-shot) inside step cards + console */ .s4-cardshot{ margin-top:14px; } .s4-console__shot{ margin-top:16px; } /* per-step platform logos (real, full-colour) */ .s4-plats{ display:flex; align-items:center; gap:8px; margin-top:14px; } .s4-plats .ma-logo{ width:18px; height:18px; } /* per-card progress bar — fills to --w on reveal (where you are in 30 days) */ .s4-bar{ display:block; position:relative; height:4px; margin-top:16px; border-radius:var(--r-pill); background:var(--c-panel-2); overflow:hidden; } .s4-bar > span{ position:absolute; left:0; top:0; bottom:0; width:var(--w,40%); border-radius:var(--r-pill); background:linear-gradient(90deg, var(--green-deep), var(--green-deep-2)); transform:scaleX(0); transform-origin:left; transition:transform 1s var(--ease-out); } .is-revealed .s4-bar > span{ transform:scaleX(1); } /* hover reveal: extra detail line (collapsed by default). max-height collapse animates reliably without measuring content. */ .s4-more{ display:block; max-height:0; margin-top:0; padding-top:0; opacity:0; overflow:hidden; border-top:1px dashed transparent; transition:max-height var(--dur-ui) var(--ease-out), opacity var(--dur-ui) ease, margin-top var(--dur-ui) ease, padding-top var(--dur-ui) ease; } .s4-more span{ display:block; font-family:var(--font-mono); font-size:12px; letter-spacing:.02em; line-height:1.5; color:var(--green-deep); } .s4-more__dot{ display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--green-deep-2); margin-right:7px; margin-bottom:1px; vertical-align:middle; box-shadow:0 0 8px rgba(15,184,102,.5); } @media (hover:hover){ .s4-step:hover{ z-index:5; } .s4-step:hover .s4-card{ transform:translateY(-6px); border-color:var(--c-line-green); box-shadow:0 26px 60px -28px rgba(10,138,79,.30), 0 2px 0 rgba(5,5,5,.02); } .s4-step:hover .s4-card::before{ opacity:1; } .s4-step:hover .s4-num{ color:var(--green-deep); -webkit-text-stroke-color:transparent; } .s4-step:hover .s4-ic{ background:var(--green-deep); color:var(--s4-on-green); transform:translateY(-1px) scale(1.04); border-color:transparent; } .s4-step:hover .s4-node::after{ animation-play-state:paused; transform:scale(1); } .s4-step:hover .s4-more{ max-height:80px; opacity:1; margin-top:14px; padding-top:12px; border-top-color:var(--c-line-green); } } /* keyboard focus = same reveal (accessibility, no hover needed) */ .s4-step:focus-within .s4-card{ border-color:var(--c-line-green); } .s4-step:focus-within .s4-more{ max-height:80px; opacity:1; margin-top:14px; padding-top:12px; border-top-color:var(--c-line-green); } /* sequential card draw-in — staggered via nth-child once section reveals */ .js .s4-step{ opacity:0; transform:translateY(22px); } .is-revealed .s4-step{ opacity:1; transform:none; transition:opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); } .s4-step:nth-child(4){ transition-delay:.05s; } /* offset for rails being children 1-3 */ .s4-step:nth-child(5){ transition-delay:.10s; } .s4-step:nth-child(6){ transition-delay:.16s; } .s4-step:nth-child(7){ transition-delay:.22s; } .s4-step:nth-child(8){ transition-delay:.28s; } .s4-step:nth-child(9){ transition-delay:.34s; } .s4-step:nth-child(10){ transition-delay:.40s; } .s4-step:nth-child(11){ transition-delay:.46s; } /* ===================================================================== COMMITMENT STRIP ===================================================================== */ .s4-commit{ margin-top:clamp(44px,5vw,68px); padding:clamp(24px,2.6vw,34px) clamp(22px,2.6vw,38px); border-radius:var(--r-lg); background: radial-gradient(120% 160% at 0% 0%, rgba(10,138,79,.06), transparent 60%), var(--c-panel); border:1px solid var(--c-line); box-shadow:var(--c-shadow); } .s4-commit__head{ display:flex; align-items:center; gap:18px; margin-bottom:24px; } .s4-commit__label{ font-family:var(--font-mono); font-weight:600; font-size:14px; letter-spacing:.16em; text-transform:uppercase; color:var(--green-deep); flex:none; } .s4-commit__rule{ flex:1 1 auto; height:1px; background:linear-gradient(90deg, var(--c-line-green), transparent); } .s4-commit__cta{ flex:none; } .s4-commit__stats{ display:grid; grid-template-columns:repeat(4, 1fr); gap:clamp(18px,2vw,30px); } .s4-stat{ position:relative; padding-left:20px; } .s4-stat::before{ content:""; position:absolute; left:0; top:4px; bottom:4px; width:2px; border-radius:2px; background:linear-gradient(180deg, var(--green-deep-2), rgba(10,138,79,.15)); } .s4-stat__num{ display:block; font-family:var(--font-display); font-weight:700; font-size:clamp(26px,2.8vw,38px); line-height:1; letter-spacing:.01em; color:var(--c-ink); font-variant-numeric:tabular-nums; margin-bottom:8px; } .s4-stat__amp{ color:var(--green-deep); } .s4-stat__cap{ display:block; font-family:var(--font-body); font-size:14px; line-height:1.45; color:var(--c-ink-2); max-width:24ch; } /* ===================================================================== RESPONSIVE ===================================================================== */ /* tablet-wide: ease the 4-up grid spacing */ @media (max-width:1180px){ .s4-flow{ gap:24px 18px; } .s4-commit__stats{ gap:22px; } } /* ---- < 1024px : tighten the centered header ---------------------- */ @media (max-width:1024px){ .s4-head{ max-width:660px; } } /* ---- < 900px : VERTICAL TIMELINE (left green spine) ---------------- */ /* Geometry: --s4-pad = flow left padding (card starts here). --s4-spine = spine line x, measured from flow's left edge. Node sits ON the spine: its centre = --s4-spine, but it's positioned relative to the card box, so left = --s4-spine - --s4-pad (then -8px margin). */ @media (max-width:900px){ .s4-flow{ --s4-pad:clamp(40px,9vw,58px); --s4-spine:22px; grid-template-columns:1fr; gap:0; padding-left:var(--s4-pad); } /* swap rails for the vertical spine */ .s4-rail{ display:none; } .s4-spine{ display:block; position:absolute; top:18px; bottom:18px; left:calc(var(--s4-spine) - 20px); /* SVG line is at x=20 of a 40px-wide box */ width:40px; height:auto; z-index:0; overflow:visible; } .s4-step{ padding:14px 0; } .s4-step + .s4-step{ margin-top:0; } .s4-node{ top:50%; left:calc(var(--s4-spine) - var(--s4-pad)); margin:-8px 0 0 -8px; } .s4-card{ margin-top:0; } /* arrow notch pointing back to the spine */ .s4-card::after{ content:""; position:absolute; left:-7px; top:50%; transform:translateY(-50%) rotate(45deg); width:12px; height:12px; background:var(--c-bg); border-left:1px solid var(--c-line); border-bottom:1px solid var(--c-line); } .s4-card::before{ left:20px; right:auto; width:60px; top:18px; } .s4-card__top{ margin-bottom:12px; } } /* keep the per-card hover-lift on tablet pointers but reduce vertical travel */ @media (hover:hover) and (max-width:900px){ .s4-step:hover .s4-card{ transform:translateY(-3px); } } /* on no-hover (touch) screens, always show the detail line so nothing is hidden */ @media (hover:none){ .s4-more{ max-height:80px; opacity:1; margin-top:14px; padding-top:12px; border-top-color:var(--c-line-green); } .s4-step .s4-num{ color:var(--green-deep); -webkit-text-stroke-color:transparent; } } /* ---- < 720px : commitment to single column, stats to 2 cols ------- */ @media (max-width:720px){ .s4-commit__head{ flex-wrap:wrap; gap:14px; } .s4-commit__rule{ display:none; } .s4-commit__cta{ order:3; width:100%; justify-content:center; } .s4-commit__stats{ grid-template-columns:repeat(2, 1fr); gap:20px 18px; } } /* ---- < 560px : single column, tighter ----------------------------- */ @media (max-width:560px){ .s4-flow{ --s4-pad:38px; --s4-spine:18px; } .s4-node{ width:14px; height:14px; margin:-7px 0 0 -7px; } .s4-card{ padding:18px 16px; } .s4-num{ font-size:38px; } .s4-ic{ width:42px; height:42px; } .s4-console__metrics{ gap:8px; } .s4-console__metrics li{ padding:11px 9px; } .s4-commit__stats{ grid-template-columns:1fr; gap:18px; } .s4-stat__cap{ max-width:none; } .s4-keystrip{ gap:8px; } .s4-key{ font-size:13px; padding:9px 13px; } } /* ---- < 380px : guard against overflow ----------------------------- */ @media (max-width:380px){ .s4-flow{ --s4-pad:32px; --s4-spine:16px; } .s4-console__metrics{ grid-template-columns:1fr 1fr; } .s4-console__metrics li:last-child{ grid-column:1 / -1; } } /* ----- REDUCED MOTION ---------------------------------------------- */ @media (prefers-reduced-motion:reduce){ .js .s4-step{ opacity:1; transform:none; } .s4-node::after{ animation:none; } .s4-blip{ animation:none; } .s4-track__fill, .s4-bar > span{ transform:none; transition:none; } .s4-spark__line{ stroke-dashoffset:0; transition:none; } .s4-spark__area{ opacity:1; } } /* ===================================================================== S14 · CLIENT SUCCESS — isolated frame embed of client-success.html (kept on the reference's own dark background so the seam is invisible) ===================================================================== */ .s14{position:relative;background:#04070A;border-top:1px solid var(--void-line);border-bottom:1px solid var(--void-line);overflow:hidden} .s14-frame{display:block;width:100%;border:0;height:1600px;background:#04070A;color-scheme:dark} .s14-fallback{font-family:var(--font-mono);font-size:14px;color:var(--void-ink-2);text-align:center;padding:48px var(--gutter)} .s14-fallback a{color:var(--green);text-decoration:underline} /* ===================================================================== SECTION 05 — META ADS COMMAND CENTER (dark / cinema) The showpiece: an OS-chrome dashboard frame of live glass panels at varying depth, orbiting a pulsing "Growth Operating System" core, closed by an outcome rail of count-up results. All selectors are .s5-scoped. Uses foundation tokens via var(). ===================================================================== */ .s5{ overflow:clip; } .s5 .s5-grid{ opacity:.28; } /* ---------- HEADER -------------------------------------------------- */ .s5-head{ margin-bottom:clamp(40px,5vw,64px); } .s5-tag{ margin:22px auto 0; display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px; font-family:var(--font-mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-3); } .s5-tag span{ position:relative; } .s5-tag span + span::before{ content:""; position:absolute; left:-12px; top:50%; width:4px; height:4px; margin-top:-2px; border-radius:50%; background:var(--green); opacity:.7; } /* ---------- STAGE / PERSPECTIVE ------------------------------------- */ .s5-stage{ perspective:1700px; } /* ---------- OUTER FRAME (OS window) --------------------------------- */ .s5-frame{ position:relative; border-radius:var(--r-lg); background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 30%), linear-gradient(180deg, var(--c-panel-2), var(--c-bg)); border:1px solid var(--c-line); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 50px 120px -50px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.4); transform-style:preserve-3d; will-change:transform; } .s5-frame::before{ /* top edge sheen + corner glow */ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:radial-gradient(120% 60% at 50% -8%, rgba(39,245,140,.10), transparent 60%); } /* ---------- CHROME BAR --------------------------------------------- */ .s5-chrome{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:13px clamp(16px,2.4vw,26px); border-bottom:1px solid var(--c-line); background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border-radius:var(--r-lg) var(--r-lg) 0 0; } .s5-chrome__lights{ display:flex; gap:7px; flex:none; } .s5-light{ width:11px; height:11px; border-radius:50%; box-shadow:0 0 0 1px rgba(0,0,0,.3) inset; } .s5-light--r{ background:#FF5F57; } .s5-light--y{ background:#FEBC2E; } .s5-light--g{ background:#28C840; } .s5-chrome__title{ display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:13px; font-weight:600; letter-spacing:.1em; color:var(--c-ink); text-transform:uppercase; } .s5-chrome__title svg{ color:var(--green); } .s5-chrome__title em{ font-style:normal; color:var(--c-ink-3); letter-spacing:.06em; } /* faux OS tabs */ .s5-chrome__tabs{ display:flex; gap:5px; flex-wrap:wrap; } .s5-ctab{ font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:.07em; padding:4px 9px; border-radius:var(--r-pill); color:var(--c-ink-3); background:var(--c-panel-2); border:1px solid var(--c-line); } .s5-ctab.is-active{ color:var(--green); border-color:var(--c-line-green); background:rgba(39,245,140,.07); } .s5-chrome__status{ margin-left:auto; display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--green); padding:6px 13px; border-radius:var(--r-pill); background:rgba(39,245,140,.08); border:1px solid var(--c-line-green); } .s5-chrome__meta{ flex:none; } .s5-chrome__time{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; color:var(--c-ink-3); white-space:nowrap; } @media (max-width:920px){ .s5-chrome__tabs{ display:none; } } @media (max-width:560px){ .s5-chrome__meta{ display:none; } } /* live pulse dot */ .s5-pulse{ position:relative; width:9px; height:9px; border-radius:50%; flex:none; background:var(--green); box-shadow:0 0 8px var(--green); } .s5-pulse::after{ content:""; position:absolute; inset:-4px; border-radius:50%; border:1px solid var(--green); animation:s5pulse 2.2s var(--ease-out) infinite; } .s5-pulse--sm{ width:7px; height:7px; } @keyframes s5pulse{ 0%{transform:scale(.6);opacity:.9} 100%{transform:scale(1.9);opacity:0} } /* ---------- OS PANEL GRID ------------------------------------------ */ .s5-os{ display:grid; gap:clamp(12px,1.4vw,18px); grid-template-columns:repeat(12,1fr); grid-auto-rows:minmax(10px,auto); padding:clamp(16px,2.4vw,26px); transform-style:preserve-3d; } /* asymmetric editorial placement around the core (3 columns: 4 | 4 | 4) */ .s5-panel--chart { grid-column:span 7; } .s5-panel--ai { grid-column:span 5; grid-row:span 2; } .s5-panel--kpi { grid-column:span 7; } .s5-core { grid-column:span 4; grid-row:span 2; } .s5-panel--crm { grid-column:span 4; grid-row:span 2; } .s5-panel--cal { grid-column:span 4; } .s5-panel--health{ grid-column:span 4; } /* ---------- GLASS PANEL BASE --------------------------------------- */ .s5-panel{ --depth:24px; padding:clamp(13px,1.5vw,18px); background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)), var(--c-panel); border:1px solid var(--c-line); border-radius:var(--r); display:flex; flex-direction:column; gap:12px; transform:translateZ(var(--depth)); transition:border-color var(--dur-ui) ease, box-shadow var(--dur-ui) ease, transform var(--dur-ui) var(--ease-out); min-width:0; } @media (hover:hover){ .s5-panel:hover{ border-color:var(--c-line-green); box-shadow:0 0 50px -20px var(--green-glow), 0 24px 50px -36px rgba(0,0,0,.8); transform:translateZ(calc(var(--depth) + 16px)); } } .s5-panel__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; } .s5-panel__title{ display:flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--c-ink-2); min-width:0; } .s5-ico{ display:grid; place-items:center; width:24px; height:24px; flex:none; border-radius:7px; color:var(--green); background:rgba(39,245,140,.10); border:1px solid var(--c-line-green); } .s5-ico--ai{ animation:s5spin 9s linear infinite; } @keyframes s5spin{ to{ transform:rotate(360deg); } } .s5-accent{ color:var(--green); } /* chips inside panels */ .s5-chip{ display:inline-flex; align-items:center; gap:6px; flex:none; font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.06em; padding:5px 10px; border-radius:var(--r-pill); background:var(--c-panel-2); border:1px solid var(--c-line); color:var(--c-ink-3); white-space:nowrap; } .s5-chip strong{ color:var(--green); font-weight:700; } .s5-chip--up{ color:var(--green); border-color:var(--c-line-green); background:rgba(39,245,140,.07); } .s5-chip--live{ color:var(--green); border-color:var(--c-line-green); background:rgba(39,245,140,.07); } /* ---------- REAL PLATFORM LOGOS (credibility) ---------------------- */ /* chrome OS tabs: logo sits left of the label */ .s5-ctab{ display:inline-flex; align-items:center; gap:6px; } .s5-ctab__logo{ width:13px; height:13px; } /* panel-title platform logos sit just after the decorative glyph */ .s5-titlelogo{ width:16px; height:16px; flex:none; } .s5-panel__title .s5-titlelogo + .s5-titlelogo{ margin-left:-3px; } /* ---------- (1) CAMPAIGN PERFORMANCE CHART ------------------------- */ .s5-chart{ position:relative; } /* real screenshot inside a panel (Campaign Performance, Campaign Health) */ .s5-shot{ position:relative; margin:0; width:100%; aspect-ratio:16/9; border-radius:10px; overflow:hidden; border:1px solid var(--c-line); background:#0c1512; } .s5-shot img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; } .s5-shot--wide{ aspect-ratio:760/300; } .s5-shot--wide img{ object-position:top left; } .s5-shot__cap{ position:absolute; left:8px; bottom:8px; display:inline-flex; align-items:center; gap:6px; padding:4px 9px; border-radius:var(--r-pill); background:rgba(4,7,10,.80); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); font-family:var(--font-mono); font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; color:#fff; } .s5-shot__cap .ma-logo{ width:13px; height:13px; } /* small real "live ad" thumbnail floating in the chart corner */ .s5-adthumb{ position:absolute; top:6px; right:6px; z-index:3; margin:0; width:64px; border-radius:9px; overflow:hidden; border:1px solid var(--c-line); background:var(--c-panel-2); box-shadow:0 10px 26px -14px rgba(0,0,0,.85); } .s5-adthumb img{ display:block; width:100%; height:46px; object-fit:cover; } .s5-adthumb figcaption{ display:flex; align-items:center; gap:4px; padding:3px 6px; font-family:var(--font-mono); font-size:8px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--c-ink-2); background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)); } .s5-adthumb figcaption .ma-logo{ width:11px; height:11px; } @media (max-width:520px){ .s5-adthumb{ width:54px; } } .s5-spark{ width:100%; height:clamp(120px,15vw,150px); overflow:visible; display:block; } .s5-spark__grid line{ stroke:var(--c-line); stroke-width:1; stroke-dasharray:3 5; } .s5-spark__area{ opacity:0; transition:opacity 1.1s ease .25s; } .s5-spark__line{ fill:none; stroke:var(--green); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 6px var(--green-glow)); stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.4s var(--ease-out); vector-effect:non-scaling-stroke; } .s5-spark__dot{ fill:var(--green); opacity:0; transform-box:fill-box; transform-origin:center; filter:drop-shadow(0 0 6px var(--green-glow)); transition:opacity .4s ease 1.3s; } .s5.is-revealed .s5-spark__line{ stroke-dashoffset:0; } .s5.is-revealed .s5-spark__area{ opacity:1; } .s5.is-revealed .s5-spark__dot{ opacity:1; animation:s5dot 2.4s var(--ease-out) 1.6s infinite; } @keyframes s5dot{ 0%,100%{ r:3.4; } 50%{ r:4.6; } } .s5-chart__x{ display:flex; justify-content:space-between; margin-top:8px; font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; color:var(--c-ink-3); } .s5-panel__foot{ display:flex; gap:14px; flex-wrap:wrap; padding-top:12px; border-top:1px solid var(--c-line); margin-top:auto; } .s5-metric{ display:flex; flex-direction:column; gap:3px; flex:1 1 auto; min-width:120px; } .s5-metric--r{ text-align:right; align-items:flex-end; } .s5-metric__k{ font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; color:var(--c-ink-3); } .s5-metric__v{ font-size:clamp(20px,2.4vw,26px); } /* ---------- (2) KPI TILES ------------------------------------------ */ .s5-kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .s5-kpi{ position:relative; overflow:hidden; padding:12px 12px 11px; border-radius:var(--r-sm); background:var(--c-panel-2); border:1px solid var(--c-line); display:flex; flex-direction:column; gap:5px; transition:border-color var(--dur-ui) ease, background var(--dur-ui) ease; } @media (hover:hover){ .s5-kpi:hover{ border-color:var(--c-line-green); background:rgba(39,245,140,.05); } } .s5-kpi__k{ font-family:var(--font-mono); font-size:10px; letter-spacing:.09em; color:var(--c-ink-3); } .s5-kpi__v{ font-size:clamp(21px,2.6vw,28px); line-height:1; } .s5-kpi__d{ font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:.04em; } .s5-up{ color:var(--green); } .s5-down{ color:var(--green); } /* lower CPL/CPA is GOOD -> green */ .s5-kpi--hero{ background:linear-gradient(160deg, rgba(39,245,140,.13), rgba(39,245,140,.02)); border-color:var(--c-line-green); } .s5-kpi--hero::after{ content:""; position:absolute; right:-20px; bottom:-20px; width:70px; height:70px; border-radius:50%; background:radial-gradient(circle, var(--green-glow), transparent 70%); opacity:.6; pointer-events:none; } .s5-kpi--hero .s5-kpi__v{ color:var(--green); } /* ---------- (3) CRM LEAD FEED -------------------------------------- */ .s5-feed{ display:flex; flex-direction:column; gap:7px; } .s5-leads{ overflow:hidden; } .s5-lead{ display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:var(--r-sm); background:var(--c-panel-2); border:1px solid var(--c-line); transition:border-color var(--dur-ui) ease, transform var(--dur-ui) var(--ease-out); } @media (hover:hover){ .s5-lead:hover{ border-color:var(--c-line-green); transform:translateX(3px); } } .s5-lead__av{ width:30px; height:30px; flex:none; border-radius:9px; display:grid; place-items:center; font-family:var(--font-mono); font-size:11px; font-weight:600; color:var(--green); background:rgba(39,245,140,.10); border:1px solid var(--c-line-green); } .s5-lead__main{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1 1 auto; } .s5-lead__main strong{ font-size:13.5px; font-weight:600; color:var(--c-ink); } .s5-lead__main em{ font-style:normal; font-size:11.5px; color:var(--c-ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .s5-stat{ flex:none; font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:.06em; padding:4px 9px; border-radius:var(--r-pill); } .s5-stat--new{ color:var(--c-ink-2); background:var(--c-panel); border:1px solid var(--c-line); } .s5-stat--qual{ color:#FEBC2E; background:rgba(254,188,46,.10); border:1px solid rgba(254,188,46,.28); } .s5-stat--booked{ color:var(--c-on-accent); background:var(--green); border:1px solid transparent; } /* ---------- (4) AI FOLLOW-UP CHAT ---------------------------------- */ .s5-panel--ai{ background: radial-gradient(140% 80% at 100% 0, rgba(39,245,140,.06), transparent 55%), linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)), var(--c-panel); } .s5-feed--chat{ gap:9px; flex:1 1 auto; } .s5-msg{ display:flex; flex-direction:column; gap:4px; max-width:84%; } .s5-msg__b{ font-size:12.5px; line-height:1.5; color:var(--c-ink); padding:9px 12px; border-radius:14px; } .s5-msg__t{ font-family:var(--font-mono); font-size:10px; letter-spacing:.04em; color:var(--c-ink-3); } .s5-msg--out{ align-self:flex-start; } .s5-msg--out .s5-msg__b{ background:rgba(39,245,140,.10); border:1px solid var(--c-line-green); border-bottom-left-radius:5px; } .s5-msg--out .s5-msg__t{ text-align:left; } .s5-msg--in{ align-self:flex-end; align-items:flex-end; } .s5-msg--in .s5-msg__b{ background:var(--c-panel-2); border:1px solid var(--c-line); border-bottom-right-radius:5px; color:var(--c-ink-2); } .s5-msg--win .s5-msg__b{ background:rgba(39,245,140,.14); border-color:var(--green); } .s5-win{ color:var(--green); font-weight:600; } .s5-typing{ display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:10px; border-top:1px solid var(--c-line); font-family:var(--font-mono); font-size:10.5px; letter-spacing:.04em; color:var(--c-ink-3); } .s5-typing i{ width:5px; height:5px; border-radius:50%; background:var(--green); opacity:.5; animation:s5type 1.3s ease-in-out infinite; } .s5-typing i:nth-child(2){ animation-delay:.18s; } .s5-typing i:nth-child(3){ animation-delay:.36s; } @keyframes s5type{ 0%,100%{ opacity:.3; transform:translateY(0); } 50%{ opacity:1; transform:translateY(-3px); } } /* ---------- (5) APPOINTMENT CALENDAR ------------------------------- */ .s5-cal{ display:flex; flex-direction:column; gap:7px; } .s5-cal__head{ display:grid; grid-template-columns:repeat(6,1fr); gap:6px; } .s5-cal__head li{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.06em; text-align:center; color:var(--c-ink-3); } .s5-cal__grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:6px; } .s5-slot{ aspect-ratio:1.5/1; border-radius:8px; display:grid; place-items:center; font-family:var(--font-mono); font-size:10px; color:var(--c-ink-3); background:var(--c-panel-2); border:1px solid var(--c-line); } .s5-slot.is-book{ color:var(--c-on-accent); font-weight:600; background:linear-gradient(160deg, var(--green), var(--green-deep-2)); border-color:transparent; box-shadow:0 4px 14px -6px var(--green-glow); } .s5-slot.is-hold{ color:var(--c-ink-3); border-style:dashed; } .s5-cal__foot{ margin-top:2px; font-size:12px; color:var(--c-ink-2); } .s5-cal__foot strong{ font-weight:700; } /* ---------- (6) CAMPAIGN HEALTH ------------------------------------ */ .s5-health{ display:flex; flex-direction:column; gap:11px; } .s5-hrow{ display:grid; grid-template-columns:auto 1fr 64px auto; align-items:center; gap:10px; } .s5-hdot{ width:8px; height:8px; border-radius:50%; flex:none; } .s5-hdot--ok{ background:var(--green); box-shadow:0 0 8px var(--green-glow); } .s5-hdot--warn{ background:#FEBC2E; box-shadow:0 0 8px rgba(254,188,46,.45); } .s5-hrow__k{ font-size:12px; color:var(--c-ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .s5-bar{ height:6px; border-radius:var(--r-pill); background:var(--c-panel-2); overflow:hidden; border:1px solid var(--c-line); } .s5-bar i{ display:block; height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg, var(--green-deep), var(--green)); box-shadow:0 0 10px var(--green-glow); transition:width 1s var(--ease-out) .2s; } .s5.is-revealed .s5-bar i{ width:var(--w); } .s5-hrow__v{ font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--c-ink); text-align:right; } /* ---------- CENTER CORE -------------------------------------------- */ .s5-core{ position:relative; display:grid; place-items:center; min-height:260px; border-radius:var(--r); background: radial-gradient(circle at 50% 50%, rgba(39,245,140,.10), transparent 62%), var(--c-panel); border:1px solid var(--c-line); transform:translateZ(var(--depth)); overflow:hidden; } .s5-core::before{ /* faint scan grid behind the core */ content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; background: linear-gradient(transparent 95%, rgba(39,245,140,.06) 95%) 0 0 / 100% 26px, linear-gradient(90deg, transparent 95%, rgba(39,245,140,.05) 95%) 0 0 / 26px 100%; } .s5-core__rings{ position:absolute; inset:0; display:grid; place-items:center; } .s5-ring{ position:absolute; border-radius:50%; border:1px solid var(--c-line-green); animation:s5ring 4s var(--ease-out) infinite; } .s5-ring--1{ width:120px; height:120px; } .s5-ring--2{ width:174px; height:174px; animation-delay:.6s; opacity:.7; } .s5-ring--3{ width:228px; height:228px; animation-delay:1.2s; opacity:.45; } @keyframes s5ring{ 0%,100%{ transform:scale(.96); opacity:.5; } 50%{ transform:scale(1.04); opacity:1; } } .s5-core__spokes{ position:absolute; inset:0; width:100%; height:100%; } .s5-core__spokes .ma-current__track{ stroke-width:1; } .s5-core__spokes .ma-current__line{ stroke-width:1.4; } /* orbiting source nodes */ .s5-core__nodes{ position:absolute; inset:0; } .s5-node{ position:absolute; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:11px; line-height:1; color:var(--green); background:var(--c-panel-2); border:1px solid var(--c-line-green); box-shadow:0 0 16px -4px var(--green-glow); } .s5-node::after{ content:attr(data-l); position:absolute; top:calc(100% + 3px); left:50%; transform:translateX(-50%); font-family:var(--font-mono); font-size:8px; letter-spacing:.06em; color:var(--c-ink-3); white-space:nowrap; } .s5-node--1{ top:8px; left:50%; margin-left:-13px; } .s5-node--2{ top:50%; right:8px; margin-top:-13px; } .s5-node--3{ bottom:18px; left:50%; margin-left:-13px; } .s5-node--3::after{ top:auto; bottom:calc(100% + 3px); } .s5-node--4{ top:50%; left:8px; margin-top:-13px; } .s5-node--1{ animation:s5float 5s var(--ease-out) infinite; } .s5-node--2{ animation:s5float 5.6s var(--ease-out) .4s infinite; } .s5-node--3{ animation:s5float 5.2s var(--ease-out) .8s infinite; } .s5-node--4{ animation:s5float 5.8s var(--ease-out) 1.2s infinite; } @keyframes s5float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } } .s5-core__hub{ position:relative; z-index:2; width:128px; height:128px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; text-align:center; padding:10px; background:radial-gradient(circle at 50% 35%, rgba(39,245,140,.22), var(--c-panel) 72%); border:1px solid var(--green); box-shadow:0 0 0 1px rgba(39,245,140,.18), 0 0 40px -6px var(--green-glow), inset 0 0 24px -6px rgba(39,245,140,.3); animation:s5breath 3.6s var(--ease-out) infinite; } .s5-core__pulse{ position:absolute; inset:-1px; border-radius:50%; pointer-events:none; border:1px solid var(--green); opacity:.7; animation:s5halo 3.2s var(--ease-out) infinite; } @keyframes s5halo{ 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(1.5); opacity:0; } } @keyframes s5breath{ 0%,100%{ box-shadow:0 0 0 1px rgba(39,245,140,.18), 0 0 40px -6px var(--green-glow), inset 0 0 24px -6px rgba(39,245,140,.3); } 50%{ box-shadow:0 0 0 8px rgba(39,245,140,.06), 0 0 56px -4px var(--green-glow), inset 0 0 30px -4px rgba(39,245,140,.4); } } .s5-core__label{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:12px; line-height:1.06; letter-spacing:.01em; color:var(--c-ink); } .s5-core__sub{ font-family:var(--font-mono); font-size:7.5px; letter-spacing:.05em; color:var(--green); } /* ---------- OS STATUS FOOTER --------------------------------------- */ .s5-osfoot{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:12px clamp(16px,2.4vw,26px); border-top:1px solid var(--c-line); background:linear-gradient(180deg, rgba(255,255,255,.012), rgba(255,255,255,.04)); border-radius:0 0 var(--r-lg) var(--r-lg); } .s5-osfoot__k{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-3); } .s5-osfoot__live{ margin-left:auto; } .s5-osfoot__live strong{ color:var(--green); font-weight:700; } .s5-osfoot__sep{ width:1px; height:14px; background:var(--c-line); } @media (max-width:560px){ .s5-osfoot__sep{ display:none; } .s5-osfoot__live{ margin-left:0; } } /* ---------- OUTCOME RAIL ------------------------------------------- */ .s5-outcomes{ margin-top:clamp(28px,3.5vw,42px); display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.4vw,16px); } .s5-out{ position:relative; padding:clamp(16px,2vw,22px); border-radius:var(--r); background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)), var(--c-panel); border:1px solid var(--c-line); display:flex; flex-direction:column; gap:8px; transition:border-color var(--dur-ui) ease, transform var(--dur-ui) var(--ease-out); } @media (hover:hover){ .s5-out:hover{ border-color:var(--c-line-green); transform:translateY(-3px); } } .s5-out__ico{ display:grid; place-items:center; width:38px; height:38px; border-radius:11px; color:var(--green); background:rgba(39,245,140,.10); border:1px solid var(--c-line-green); } .s5-out__v{ font-size:clamp(26px,3.4vw,36px); line-height:1; } .s5-out__k{ font-family:var(--font-mono); font-size:11px; letter-spacing:.07em; color:var(--c-ink-3); text-transform:uppercase; } .s5-out--hero{ background:linear-gradient(160deg, rgba(39,245,140,.14), rgba(39,245,140,.02)); border-color:var(--c-line-green); } .s5-out--hero .s5-out__ico{ background:var(--green); color:var(--c-on-accent); border-color:transparent; } /* ---------- PROOF -------------------------------------------------- */ .s5-proof{ margin-top:clamp(30px,4vw,48px); } /* ===================================================================== RESPONSIVE ===================================================================== */ /* ~1080: calmer rhythm; pull core into its own row so no grid holes */ @media (max-width:1080px){ .s5-panel--chart { grid-column:span 7; grid-row:auto; } .s5-panel--ai { grid-column:span 5; grid-row:span 2; } .s5-panel--kpi { grid-column:span 7; grid-row:auto; } .s5-core { grid-column:span 5; grid-row:auto; min-height:210px; } .s5-panel--crm { grid-column:span 7; grid-row:auto; } .s5-panel--cal { grid-column:span 6; } .s5-panel--health{ grid-column:span 6; } } /* ~860: two-column, core becomes a full-width banner. Kill 3D depth. */ @media (max-width:860px){ .s5-frame{ transform:none !important; } .s5-os{ grid-template-columns:repeat(2,1fr); } .s5-panel,.s5-core{ transform:none !important; } .s5-panel--chart { grid-column:1 / -1; } .s5-panel--ai { grid-column:1 / -1; grid-row:auto; } .s5-panel--kpi { grid-column:1 / -1; } .s5-core { grid-column:1 / -1; grid-row:auto; order:-1; min-height:210px; } .s5-panel--crm { grid-column:1 / -1; grid-row:auto; } .s5-panel--cal { grid-column:1; } .s5-panel--health{ grid-column:2; } .s5-outcomes{ grid-template-columns:repeat(2,1fr); } } /* ~520: single column stack */ @media (max-width:520px){ .s5-os{ grid-template-columns:1fr; gap:12px; } .s5-panel--cal,.s5-panel--health{ grid-column:1 / -1; } .s5-kpis{ grid-template-columns:repeat(2,1fr); } .s5-chrome{ gap:10px 12px; } .s5-chrome__status{ margin-left:0; order:3; width:100%; justify-content:center; } .s5-msg{ max-width:92%; } .s5-hrow{ grid-template-columns:auto 1fr 52px auto; gap:8px; } .s5-core{ min-height:240px; } .s5-outcomes{ grid-template-columns:1fr 1fr; } } @media (max-width:380px){ .s5-kpis{ grid-template-columns:1fr; } .s5-cal__grid,.s5-cal__head{ gap:4px; } .s5-outcomes{ grid-template-columns:1fr; } } /* reduced motion: settle everything */ @media (prefers-reduced-motion:reduce){ .s5-ico--ai,.s5-ring,.s5-core__hub,.s5-core__pulse,.s5-node,.s5-typing i,.s5-pulse::after,.s5-spark__dot{ animation:none; } .s5-spark__line{ stroke-dashoffset:0; } .s5-spark__area,.s5-spark__dot{ opacity:1; } .s5-bar i{ width:var(--w); transition:none; } } /* ===================================================================== SECTION 15 — YOUR GROWTH STACK (white / ma-system) A clean gallery of the REAL marketing platforms Green City operates, each in a window-chrome frame with a real product-UI screenshot + platform logo + role. Honest framing: "the tools we run", not client data. ===================================================================== */ .s15-head{ margin-bottom:clamp(30px,4vw,52px); } .s15-head .ma-lead{ max-width:760px; } .s15-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,24px); } .s15-card{ display:flex; flex-direction:column; border:1px solid var(--c-line); border-radius:var(--r-lg); overflow:hidden; background:var(--c-panel); box-shadow:0 24px 60px -46px rgba(5,20,12,.42); transition:transform var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out); } .s15-card:hover{ transform:translateY(-4px); box-shadow:0 36px 72px -40px rgba(5,20,12,.5); } /* screenshot window */ .s15-shot{ margin:0; position:relative; aspect-ratio:16/10; overflow:hidden; background:#0c1512; border-top:1px solid var(--c-line); border-bottom:1px solid var(--c-line); } .s15-shot img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; } /* footer: logo + name + role */ .s15-foot{ display:flex; align-items:center; gap:11px; padding:13px 15px; } .s15-foot .ma-logo{ width:26px; height:26px; flex:0 0 auto; } .s15-foot__t{ display:flex; flex-direction:column; min-width:0; } .s15-foot__t b{ font:700 13px/1.2 var(--font-body); color:var(--c-ink); } .s15-foot__t em{ font-style:normal; font-size:11.5px; line-height:1.34; color:var(--c-ink-3); margin-top:2px; } .s15-proof{ margin-top:clamp(28px,3.6vw,46px); } @media (max-width:980px){ .s15-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .s15-grid{ grid-template-columns:1fr; } } /* ===================================================================== S13 · REAL AD ACCOUNT SCREENSHOTS — interlocking auto-shuffle wall ===================================================================== */ .s13{overflow:clip} .s13-orb{top:8%;opacity:.5} .s13-beam{position:absolute;top:0;left:50%;width:760px;max-width:100%;height:60%;transform:translateX(-50%);pointer-events:none;z-index:0; background:radial-gradient(ellipse 50% 60% at 50% 0%,rgba(39,245,140,.10),transparent 70%)} /* proof stats */ .s13-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:920px;margin:0 auto clamp(36px,4.5vw,56px); padding:22px 24px;border-radius:var(--r);background:var(--c-panel);border:1px solid var(--c-line)} .s13-stat{display:flex;flex-direction:column;gap:5px;text-align:center} .s13-stat__n{font-size:clamp(26px,3.2vw,40px);color:#fff} .s13-stat__l{font-family:var(--font-mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--c-ink-3)} @media (max-width:680px){.s13-stats{grid-template-columns:repeat(2,1fr);gap:22px 14px;padding:20px 16px}} /* Meta verified / pulled-live ribbon */ .s13-verify{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 18px; margin:-22px auto clamp(30px,4vw,48px);max-width:920px; font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--c-ink-2)} .s13-verify__src{display:inline-flex;align-items:center;gap:8px} .s13-verify__src strong{color:#fff;font-weight:600} .s13-verify__badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--r-pill); background:rgba(39,245,140,.10);border:1px solid var(--c-line-green);color:var(--c-accent)} /* the wall — 4 rows of 5 on desktop */ .s13-wall{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(8px,1vw,14px); perspective:1400px} .s13-noscript{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .s13-noscript img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top center;border-radius:var(--r-sm);border:1px solid var(--c-line)} @media (max-width:680px){.s13-noscript{grid-template-columns:repeat(2,1fr)}} .s13-slot{position:relative;aspect-ratio:3/4;border-radius:var(--r-sm);overflow:hidden; background:var(--c-panel-2);border:1px solid var(--c-line); box-shadow:0 18px 40px -28px rgba(0,0,0,.9); transition:transform var(--dur-ui) var(--ease-out),border-color var(--dur-ui) ease,box-shadow var(--dur-ui) ease; transform-style:preserve-3d;will-change:transform} /* entrance cascade tied to section reveal */ .js .s13-slot{opacity:0;transform:translateY(18px) scale(.97)} .s13.is-revealed .s13-slot{opacity:1;transform:none; transition:opacity .6s var(--ease-out) calc(var(--i,0) * 34ms),transform .6s var(--ease-out) calc(var(--i,0) * 34ms)} .s13-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center; opacity:0;transform:scale(1.05); transition:opacity .8s var(--ease-out),transform 1.1s var(--ease-out)} .s13-img.is-top{opacity:1;transform:scale(1)} /* glass sheen + LIVE tag */ .s13-slot__sheen{position:absolute;inset:0;z-index:2;pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 30%,transparent 78%,rgba(0,0,0,.34)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)} .s13-slot__tag{position:absolute;top:8px;left:8px;z-index:3;display:inline-flex;align-items:center;gap:5px; font-family:var(--font-mono);font-size:9.5px;font-weight:600;letter-spacing:.12em;color:#04140C; padding:3px 7px 3px 14px;border-radius:var(--r-pill);background:var(--green);opacity:0; transition:opacity var(--dur-ui) ease} .s13-slot__tag::before{content:"";position:absolute;left:6px;top:50%;transform:translateY(-50%); width:5px;height:5px;border-radius:50%;background:#04140C;box-shadow:0 0 0 0 rgba(4,20,12,.6);animation:s13ping 1.6s ease-out infinite} @keyframes s13ping{0%{box-shadow:0 0 0 0 rgba(4,20,12,.55)}100%{box-shadow:0 0 0 6px rgba(4,20,12,0)}} @media (hover:hover){ .s13-slot:hover{transform:translateY(-5px) scale(1.03);border-color:var(--c-line-green); box-shadow:0 30px 60px -30px #000,0 0 36px -14px var(--green-glow);z-index:4} .s13-slot:hover .s13-slot__tag{opacity:1} } /* ---- tablet: 4 across (still all 20 slots) ---- */ @media (max-width:1024px){.s13-wall{grid-template-columns:repeat(4,1fr)}} /* ---- mobile: 10 slots, 2 across (hide 11–20) ---- */ @media (max-width:680px){ .s13-wall{grid-template-columns:repeat(2,1fr);gap:10px} .s13-slot:nth-child(n+11){display:none} .s13-slot__tag{opacity:1} /* no hover on touch — keep the LIVE pulse visible */ } @media (max-width:380px){.s13-wall{gap:8px}} /* reduced motion: no crossfade / no entrance shuffle, just show the wall */ @media (prefers-reduced-motion:reduce){ .js .s13-slot{opacity:1;transform:none} .s13-img{transition:none} .s13-img.is-top{transform:none} .s13-slot__tag::before{animation:none} } /* ===================================================================== SECTION 06 — THE CREATIVE ARSENAL (white / system) Tab switcher · 6 Meta ad types · simulated ad creative + detail rail + green-current flow + live metrics + summary deck + conversion banner. Scope: every selector starts with .s6. Reads contextual tokens for all PAGE content; the simulated Facebook/Messenger cards use a scoped GRAPHIC-PROP palette (--fb-*) so device-UI colors are intentional, not rogue. No :root, no .ma-* overrides, no @import. ===================================================================== */ .s6{ background:var(--c-bg); } /* scoped graphic-prop palette — simulated social-UI chrome only. These render a real Facebook/Messenger surface, so they are deliberate props (like the device-UI micro text the brief allows), never page text. */ .s6{ --fb-surface:#ffffff; --fb-line:#e6ebe8; --fb-line-soft:#eef2f0; --fb-bar:#f0f3f1; --fb-ink:#1a241f; --fb-ink-2:#46544d; --fb-ink-3:#7c8b84; --fb-on-green:#ffffff; } .s6-head{ margin-bottom:clamp(40px,5vw,64px); } .s6-head .ma-lead{ color:var(--c-ink-2); } /* --------------------------------------------------------------------- TAB RAIL — 6 buttons --------------------------------------------------------------------- */ .s6-rail{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:clamp(22px,2.6vw,34px); } .s6-tab{ position:relative; display:flex; align-items:center; gap:11px; text-align:left; flex:0 1 auto; padding:13px 36px 13px 14px; border-radius:var(--r); background:var(--c-panel); border:1px solid var(--c-line); color:var(--c-ink-2); transition:border-color var(--dur-ui) var(--ease-out), background var(--dur-ui) ease, color var(--dur-ui) ease, box-shadow var(--dur-ui) ease, transform var(--dur-ui) var(--ease-out); overflow:visible; } .s6-tab::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:linear-gradient(90deg,var(--green-deep),var(--green-deep-2)); transform:scaleX(0); transform-origin:left; transition:transform var(--dur-ui) var(--ease-out); } .s6-tab__no{ font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.06em; color:var(--c-ink-3); position:absolute; top:10px; right:12px; transition:color var(--dur-ui) ease; } .s6-tab__ic{ flex:none; width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:var(--c-panel-2); border:1px solid var(--c-line); color:var(--c-ink-3); transition:color var(--dur-ui) ease, background var(--dur-ui) ease, border-color var(--dur-ui) ease; } .s6-tab__txt{ display:flex; flex-direction:column; gap:2px; min-width:0; } .s6-tab__name{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.01em; font-size:14px; line-height:1.05; color:var(--c-ink); white-space:nowrap; } .s6-tab__role{ font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--c-ink-3); } @media (hover:hover){ .s6-tab:hover{ border-color:var(--c-line-green); transform:translateY(-2px); box-shadow:0 14px 32px -22px rgba(10,138,79,.45); } .s6-tab:hover .s6-tab__ic{ color:var(--green-deep); border-color:var(--c-line-green); } .s6-tab:hover .s6-tab__name{ color:var(--green-deep); } } .s6-tab.is-active{ background:var(--c-bg); border-color:var(--green-deep); color:var(--c-ink); box-shadow:0 18px 40px -24px rgba(10,138,79,.55); } .s6-tab.is-active::after{ transform:scaleX(1); } .s6-tab.is-active .s6-tab__no{ color:var(--green-deep); } .s6-tab.is-active .s6-tab__ic{ background:var(--green-deep); border-color:transparent; color:var(--fb-on-green); box-shadow:0 8px 18px -8px rgba(10,138,79,.6); } .s6-tab:focus-visible{ outline:2px solid var(--green-deep); outline-offset:3px; } /* --------------------------------------------------------------------- PREVIEW PANEL (creative | detail) --------------------------------------------------------------------- */ .s6-panel[hidden]{ display:none; } .s6-panel{ display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:clamp(26px,3.4vw,52px); align-items:stretch; padding:clamp(22px,2.6vw,36px); border-radius:var(--r-lg); background: radial-gradient(120% 140% at 100% 0%, rgba(10,138,79,.05), transparent 55%), var(--c-bg); border:1px solid var(--c-line); box-shadow:var(--c-shadow); animation:s6PanelIn var(--dur-ui) var(--ease-out) both; } @keyframes s6PanelIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } } @media (prefers-reduced-motion:reduce){ .s6-panel{ animation:none; } } /* ====== CREATIVE COLUMN ====== */ .s6-creative{ display:flex; align-items:flex-start; justify-content:center; position:relative; } /* soft brand glow behind the floating ad card */ .s6-creative::before{ content:""; position:absolute; z-index:0; width:78%; height:64%; left:50%; top:8%; transform:translateX(-50%); background:radial-gradient(closest-side, rgba(15,184,102,.18), transparent 78%); filter:blur(34px); pointer-events:none; } /* mock ad shell (feed) — simulated social surface = graphic prop */ .s6-ad{ position:relative; z-index:1; width:100%; max-width:380px; margin:0; border-radius:16px; background:var(--fb-surface); border:1px solid var(--fb-line); box-shadow:0 30px 70px -34px rgba(10,30,20,.45), 0 4px 14px -6px rgba(5,5,5,.10); overflow:hidden; font-family:var(--font-body); } @media (hover:hover) and (pointer:fine){ .s6-ad{ transition:transform var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) ease; } .s6-creative:hover .s6-ad{ transform:translateY(-3px); box-shadow:0 38px 80px -34px rgba(10,30,20,.5); } } /* ad header */ .s6-ad__top{ display:flex; align-items:center; gap:9px; padding:11px 12px 9px; } .s6-ad__av{ flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--fb-on-green); background:linear-gradient(135deg,var(--green-deep-2),var(--green-deep)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.25); } .s6-ad__id{ display:flex; flex-direction:column; line-height:1.25; min-width:0; flex:1; } .s6-ad__id strong{ font-size:13.5px; font-weight:600; color:var(--fb-ink); } .s6-ad__id em{ font-style:normal; font-size:11.5px; color:var(--fb-ink-3); display:inline-flex; align-items:center; gap:4px; } .s6-ad__id em svg{ display:inline-block; color:var(--fb-ink-3); } .s6-ad__more{ color:var(--fb-ink-3); font-size:18px; letter-spacing:1px; flex:none; } /* platform logos: tab rail + ad mockup headers */ .s6-tab__ic img{ width:22px; height:22px; object-fit:contain; display:block; } .s6-ad__plat{ flex:none; width:18px; height:18px; object-fit:contain; margin-left:auto; } .s6-msg__plat{ flex:none; width:18px; height:18px; object-fit:contain; } /* real Meta lead-form screenshot stacked under the Lead Form mockup */ .s6-realform{ margin:14px 0 0; border-radius:12px; overflow:hidden; border:1px solid var(--c-line); background:var(--c-panel-2); box-shadow:0 18px 40px -24px rgba(0,0,0,.6); } .s6-realform img{ display:block; width:100%; height:auto; max-height:210px; object-fit:cover; object-position:top center; } .s6-realform figcaption{ display:flex; align-items:center; gap:7px; padding:8px 11px; font-family:var(--font-mono); font-size:9.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--c-ink-2); border-top:1px solid var(--c-line); } .s6-realform figcaption .ma-logo{ width:13px; height:13px; } /* --- real GC lead forms: two portrait forms side by side --- */ .s6-realform--pair{ background:transparent; border:0; box-shadow:none; overflow:visible; } .s6-realform--pair .s6-realform__row{ display:flex; gap:10px; } .s6-realform--pair .s6-realform__row img{ width:50%; height:auto; max-height:none; object-fit:contain; border-radius:10px; border:1px solid var(--c-line); background:#fff; box-shadow:0 14px 32px -22px rgba(0,0,0,.5); } .s6-realform--pair figcaption{ justify-content:center; border-top:0; padding:10px 0 0; color:var(--c-ink-3); } /* Lead Form Ads tab: FB mockup removed — wider creative column, larger phone forms */ @media (min-width:861px){ #s6panel-lead{ grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); align-items:center; } } .s6-creative--forms{ width:100%; } .s6-creative--forms .s6-realform--pair{ width:100%; } .s6-creative--forms .s6-realform__row{ gap:clamp(14px,1.8vw,22px); justify-content:center; } .s6-creative--forms .s6-realform__row img{ box-shadow:0 22px 50px -26px rgba(0,0,0,.55); } /* ====== LANDING PAGE ADS — full-width real-screenshot gallery ====== */ /* this tab drops the creative/detail split for one clean image gallery */ #s6panel-landing{ grid-template-columns:1fr; } .s6-lp-gallery{ columns:3; column-gap:16px; width:100%; } .s6-lp-tile{ display:block; width:100%; margin:0 0 16px; padding:0; border:1px solid var(--c-line); background:#fff; cursor:zoom-in; break-inside:avoid; border-radius:12px; overflow:hidden; line-height:0; box-shadow:0 18px 44px -28px rgba(5,20,12,.5); transition:transform var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out); } .s6-lp-tile img{ width:100%; height:auto; display:block; } @media (hover:hover){ .s6-lp-tile:hover{ transform:translateY(-4px); box-shadow:0 30px 62px -26px rgba(5,20,12,.6); border-color:var(--green-deep-2); } } .s6-lp-tile:focus-visible{ outline:2px solid var(--green-deep-2); outline-offset:3px; } @media (max-width:900px){ .s6-lp-gallery{ columns:2; } } @media (max-width:540px){ .s6-lp-gallery{ columns:1; } } /* lightbox variant that fits full landscape OR tall portrait screenshots */ .ma-modal--shot .ma-modal__dialog{ width:auto; max-width:min(1080px,96vw); background:#0a1310; border:1px solid var(--c-line); } .ma-modal--shot .ma-modal__media{ aspect-ratio:auto; background:#0a1310; display:flex; } .ma-modal--shot .ma-modal__media img{ width:auto; height:auto; max-width:100%; max-height:86vh; object-fit:contain; margin:auto; display:block; } .s6-ad__copy{ margin:0 12px 10px; font-size:13.5px; line-height:1.45; color:var(--fb-ink); } .s6-ad__copy strong{ color:var(--green-deep); font-weight:600; } /* media */ .s6-ad__media{ position:relative; aspect-ratio:1.25/1; overflow:hidden; background:#dde6e1; } .s6-ad__media img{ width:100%; height:100%; object-fit:cover; } .s6-ad__media--ph{ background:linear-gradient(135deg,#cfded6,#e7efea); } .s6-ad__media--ph::after{ content:"GREEN CITY"; position:absolute; inset:0; display:grid; place-items:center; font-family:var(--font-mono); font-size:12px; letter-spacing:.2em; color:#9aa7a0; } .s6-ad__badge{ position:absolute; top:10px; left:10px; z-index:2; font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:.08em; padding:5px 9px; border-radius:999px; background:rgba(8,18,13,.78); color:#dff7ea; backdrop-filter:blur(4px); } .s6-ad__badge--warn{ background:rgba(176,118,8,.9); color:#fff6e0; } /* link bar */ .s6-ad__bar{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px; padding:11px 12px; background:var(--fb-bar); border-top:1px solid var(--fb-line); } .s6-ad__site{ grid-column:1; grid-row:1; font-family:var(--font-mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--fb-ink-3); } .s6-ad__head{ grid-column:1; grid-row:2; font-size:13px; font-weight:600; color:var(--fb-ink); line-height:1.2; } .s6-ad__cta{ grid-column:2; grid-row:1 / span 2; font-family:var(--font-body); font-size:12.5px; font-weight:600; padding:9px 13px; border-radius:9px; white-space:nowrap; color:var(--fb-ink); background:#e2e8e4; border:1px solid #d3dbd6; transition:background var(--dur-micro) ease, color var(--dur-micro) ease, border-color var(--dur-micro) ease; } @media (hover:hover){ .s6-ad__cta:hover{ background:var(--green-deep); color:var(--fb-on-green); border-color:transparent; } } /* reactions */ .s6-ad__react{ display:flex; align-items:center; justify-content:space-between; padding:9px 12px; border-top:1px solid var(--fb-line-soft); font-size:11.5px; color:var(--fb-ink-3); } .s6-ad__likes{ display:inline-flex; align-items:center; gap:5px; font-weight:600; color:var(--fb-ink-2); } .s6-ad__emo{ font-style:normal; font-size:12px; } .s6-ad__meta{ font-size:11px; } /* video creative extras */ .s6-ad__media--video::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(0,0,0,.05), transparent 35%, transparent 60%, rgba(0,0,0,.45)); } .s6-ad__play{ position:absolute; top:50%; left:50%; z-index:3; width:54px; height:54px; } .s6-ad__time{ position:absolute; top:10px; right:10px; z-index:3; font-family:var(--font-mono); font-size:11px; font-weight:600; padding:3px 8px; border-radius:6px; background:rgba(8,18,13,.7); color:#eafff4; } .s6-ad__cap{ position:absolute; left:12px; bottom:14px; z-index:3; max-width:78%; font-size:12.5px; font-style:italic; font-weight:600; color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.6); } .s6-ad__progress{ position:absolute; left:0; right:0; bottom:0; z-index:3; height:3px; background:rgba(255,255,255,.3); } .s6-ad__progress i{ display:block; height:100%; width:38%; background:var(--green); box-shadow:0 0 8px var(--green-glow); transform-origin:left; animation:s6Prog 6s linear infinite; } @keyframes s6Prog{ 0%{ width:8%; } 92%{ width:96%; } 100%{ width:96%; } } @media (prefers-reduced-motion:reduce){ .s6-ad__progress i{ animation:none; width:46%; } } /* offer creative extras */ .s6-offer__tag{ position:absolute; right:12px; bottom:12px; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; width:74px; height:74px; border-radius:50%; background:linear-gradient(140deg,var(--green-deep-2),var(--green-deep)); color:var(--fb-on-green); box-shadow:0 12px 30px -10px rgba(10,138,79,.7), inset 0 0 0 2px rgba(255,255,255,.25); transform:rotate(-8deg); } .s6-offer__amt{ font-family:var(--font-display); font-weight:700; font-size:22px; line-height:1; } .s6-offer__sub{ font-family:var(--font-mono); font-size:10px; letter-spacing:.15em; } /* ---- Message creative (Messenger) ---- */ .s6-ad--msg{ display:flex; flex-direction:column; min-height:480px; } .s6-msg__top{ display:flex; align-items:center; gap:9px; padding:12px 14px; border-bottom:1px solid var(--fb-line-soft); } .s6-msg__id{ display:flex; flex-direction:column; line-height:1.25; flex:1; } .s6-msg__id strong{ font-size:13.5px; font-weight:600; color:var(--fb-ink); } .s6-msg__id em{ font-style:normal; font-size:11px; color:var(--green-deep); display:inline-flex; align-items:center; gap:5px; } .s6-msg__id em::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--green-deep-2); } .s6-msg__chev{ color:var(--fb-ink-3); font-size:16px; } .s6-msg__thread{ flex:1; display:flex; flex-direction:column; gap:8px; padding:16px 14px; background:#f7faf8; } .s6-bub{ max-width:78%; padding:9px 13px; font-size:13px; line-height:1.4; border-radius:16px; } .s6-bub--in{ align-self:flex-start; background:#eaf0ec; color:var(--fb-ink); border-bottom-left-radius:5px; } .s6-bub--out{ align-self:flex-end; background:var(--green-deep); color:var(--fb-on-green); border-bottom-right-radius:5px; } .s6-bub--typing{ align-self:flex-start; display:inline-flex; gap:4px; padding:12px 14px; background:#eaf0ec; border-bottom-left-radius:5px; } .s6-bub--typing i{ width:6px; height:6px; border-radius:50%; background:#9aa7a0; animation:s6Type 1.2s var(--ease-out) infinite; } .s6-bub--typing i:nth-child(2){ animation-delay:.18s; } .s6-bub--typing i:nth-child(3){ animation-delay:.36s; } @keyframes s6Type{ 0%,60%,100%{ opacity:.35; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-3px); } } .s6-msg__quick{ display:flex; gap:8px; padding:0 14px 10px; background:#f7faf8; flex-wrap:wrap; } .s6-msg__quick span{ font-size:12px; font-weight:600; padding:7px 13px; border-radius:999px; color:var(--green-deep); background:var(--fb-surface); border:1px solid rgba(10,138,79,.28); } .s6-msg__compose{ display:flex; align-items:center; gap:10px; padding:11px 12px; border-top:1px solid var(--fb-line-soft); background:var(--fb-surface); } .s6-msg__field{ flex:1; font-size:13px; color:var(--fb-ink-3); padding:9px 14px; background:var(--fb-bar); border-radius:999px; } .s6-msg__send{ flex:none; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; color:var(--fb-on-green); background:var(--green-deep); box-shadow:0 6px 14px -6px rgba(10,138,79,.6); } /* ====== DETAIL COLUMN ====== */ .s6-detail{ display:flex; flex-direction:column; gap:clamp(18px,2.2vw,26px); min-width:0; } .s6-detail__head{ display:flex; flex-direction:column; gap:10px; } .s6-kicker{ font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--green-deep); display:inline-flex; align-items:center; gap:8px; } .s6-kicker::before{ content:""; width:18px; height:1px; background:var(--green-deep); opacity:.55; } .s6-detail__title{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.01em; line-height:.98; font-size:clamp(28px,3.6vw,44px); color:var(--c-ink); } .s6-detail__lead{ font-size:clamp(15px,1.5vw,17px); line-height:1.55; color:var(--c-ink-2); max-width:54ch; } .s6-detail__lead em{ color:var(--green-deep); font-style:italic; } /* facts */ .s6-facts{ display:grid; gap:0; margin:0; border-top:1px solid var(--c-line); } .s6-fact{ display:grid; grid-template-columns:152px 1fr; gap:18px; padding:14px 0; border-bottom:1px solid var(--c-line); align-items:baseline; } .s6-fact dt{ font-family:var(--font-mono); font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--green-deep); } .s6-fact dd{ margin:0; font-size:14.5px; line-height:1.45; color:var(--c-ink-2); } .s6-fact dd strong{ color:var(--c-ink); font-weight:600; } /* CTA flow rail */ .s6-flow{ position:relative; padding:6px 4px 0; } .s6-flow__rail{ position:absolute; left:0; right:0; top:18px; width:100%; height:24px; } .s6-flow__steps{ display:grid; grid-template-columns:repeat(4,1fr); position:relative; z-index:2; gap:6px; } .s6-flow__steps li{ display:flex; flex-direction:column; align-items:center; gap:8px; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.02em; text-align:center; color:var(--c-ink-2); min-width:0; } .s6-flow__dot{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:600; background:var(--c-bg); color:var(--green-deep); border:1.5px solid var(--c-line-green); box-shadow:0 0 0 4px var(--c-bg); } .s6-flow__dot--end{ background:var(--green-deep); color:var(--fb-on-green); border-color:transparent; box-shadow:0 0 0 4px var(--c-bg),0 8px 18px -8px rgba(10,138,79,.6); } /* metrics row */ .s6-metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:auto; } .s6-metric{ position:relative; display:flex; flex-direction:column; gap:5px; padding:14px 16px; border-radius:var(--r-sm); background:var(--c-panel); border:1px solid var(--c-line); overflow:hidden; } .s6-metric::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg,var(--green-deep-2),var(--green-deep)); opacity:.85; } .s6-metric__val{ font-size:clamp(22px,2.6vw,30px); letter-spacing:.01em; color:var(--green-deep); } .s6-metric__live{ color:var(--green-deep); } .s6-metric__lab{ font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--c-ink-3); } /* --------------------------------------------------------------------- SUMMARY DECK (6 mini cards) + funnel ribbon --------------------------------------------------------------------- */ .s6-summary{ margin-top:clamp(40px,5vw,64px); } .s6-summary__head{ display:flex; align-items:baseline; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:20px; } .s6-summary__note{ font-size:15px; color:var(--c-ink-2); max-width:560px; } .s6-summary__note strong{ color:var(--green-deep); font-weight:600; } .s6-cards{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; } .s6-mini{ display:flex; flex-direction:column; gap:8px; padding:18px 16px 16px; background:var(--c-panel); border:1px solid var(--c-line); min-height:168px; } .s6-mini__no{ font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.06em; color:var(--green-deep); } .s6-mini h4{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.01em; font-size:15px; line-height:1.08; color:var(--c-ink); } .s6-mini p{ font-size:13px; line-height:1.45; color:var(--c-ink-2); flex:1; } .s6-mini__tag{ align-self:flex-start; font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:.1em; padding:4px 10px; border-radius:999px; color:var(--green-deep); background:var(--c-accent-soft); border:1px solid var(--c-line-green); } /* --------------------------------------------------------------------- CONVERSION BANNER — "THE RIGHT AD, THE RIGHT RESULT" --------------------------------------------------------------------- */ .s6-cta{ margin-top:clamp(34px,4.4vw,52px); position:relative; overflow:hidden; display:grid; grid-template-columns:1fr auto; align-items:center; gap:28px; padding:clamp(26px,3.4vw,44px) clamp(24px,3.4vw,48px); border-radius:var(--r-lg); background:linear-gradient(120deg,var(--green-deep) 0%,var(--green-deep-2) 100%); box-shadow:0 30px 70px -32px rgba(10,138,79,.6); isolation:isolate; } .s6-cta::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:.5; background: radial-gradient(60% 120% at 100% 0%, rgba(255,255,255,.22), transparent 60%), radial-gradient(50% 120% at 0% 100%, rgba(4,20,12,.4), transparent 60%); } .s6-cta__txt{ min-width:0; } .s6-cta__lab{ font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.82); } .s6-cta__title{ margin-top:10px; font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.01em; line-height:.98; font-size:clamp(24px,3.4vw,42px); color:var(--fb-on-green); } .s6-cta__title b{ color:#04140C; font-weight:700; } .s6-cta__sub{ margin-top:12px; max-width:48ch; font-size:clamp(14px,1.4vw,16px); line-height:1.5; color:rgba(255,255,255,.9); } .s6-cta__btn{ flex:none; align-self:center; display:inline-flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:14px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:15px 26px; border-radius:var(--r-pill); color:var(--green-deep); background:var(--fb-on-green); box-shadow:0 14px 34px -12px rgba(4,20,12,.5), inset 0 0 0 1px rgba(255,255,255,.5); transition:transform var(--dur-micro) var(--ease-snap), box-shadow var(--dur-ui) ease; } .s6-cta__btn svg{ transition:transform var(--dur-ui) var(--ease-snap); } @media (hover:hover){ .s6-cta__btn:hover{ transform:translateY(-2px); box-shadow:0 20px 44px -12px rgba(4,20,12,.6); } .s6-cta__btn:hover svg{ transform:translateX(3px); } } .s6-cta__btn:active{ transform:scale(.97); } .s6-cta__btn:focus-visible{ outline:2px solid #04140C; outline-offset:3px; } /* ===================================================================== RESPONSIVE ===================================================================== */ /* tab rail -> 3 cols then 2 */ @media (max-width:1080px){ .s6-rail{ grid-template-columns:repeat(3,1fr); } } @media (max-width:860px){ /* preview panel stacks: creative on top */ .s6-panel{ grid-template-columns:1fr; } .s6-creative{ order:0; } .s6-detail{ order:1; } .s6-creative::before{ width:62%; } .s6-ad{ max-width:360px; } .s6-metrics{ margin-top:6px; } } @media (max-width:680px){ .s6-summary__head{ flex-direction:column; gap:8px; align-items:flex-start; } .s6-cta{ grid-template-columns:1fr; gap:22px; } .s6-cta__btn{ justify-self:start; align-self:start; } } @media (max-width:560px){ /* tabs become a horizontal scroller (no page overflow: bleed is masked) */ .s6-rail{ display:flex; grid-template-columns:none; overflow-x:auto; gap:9px; margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter); scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .s6-rail::-webkit-scrollbar{ display:none; } .s6-tab{ flex:0 0 auto; scroll-snap-align:start; } .s6-fact{ grid-template-columns:1fr; gap:4px; } .s6-metrics{ grid-template-columns:1fr 1fr; } .s6-cards{ grid-template-columns:1fr 1fr; } .s6-mini{ min-height:0; } } @media (max-width:400px){ .s6-metrics{ grid-template-columns:1fr; } .s6-flow__steps li{ font-size:10.5px; } .s6-flow__steps{ gap:3px; } } /* ===================================================================== S7 · VIDEO CREATIVE THAT CONVERTS — per-industry YouTube showcase ===================================================================== */ .s7{overflow:clip} .s7-orb{opacity:.4} .s7 .ma-orb--1{top:-180px;left:-140px} .s7 .ma-orb--2{bottom:-160px;right:-120px} .s7-head{text-align:center;max-width:880px;margin:0 auto clamp(34px,4.5vw,56px)} .s7-head .ma-eyebrow{justify-content:center} .s7-sub{margin:18px auto 0;color:var(--c-ink-2)} .s7-wrap{position:relative} /* ---- industry filter tabs ---- */ .s7-filterbar{justify-content:center;gap:9px;margin-bottom:clamp(26px,3vw,40px);flex-wrap:wrap} .s7-filter{font-size:13px;padding:9px 15px} @media (max-width:680px){ .s7-filterbar{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start; -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); padding-bottom:4px;scrollbar-width:none} .s7-filterbar::-webkit-scrollbar{display:none} .s7-filter{flex:none} } /* ---- video grid (bigger thumbnails) ---- */ .s7-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,30px)} @media (min-width:1101px){.s7-grid{grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}} @media (max-width:1100px){.s7-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:760px){.s7-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}} @media (max-width:480px){.s7-grid{grid-template-columns:1fr}} .s7-card{display:flex;flex-direction:column;gap:13px;text-align:left;padding:0;background:none;cursor:pointer} .s7-card__media{position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden; border:1px solid var(--c-line);background:var(--c-panel-2); box-shadow:0 18px 40px -28px rgba(0,0,0,.9); transition:transform var(--dur-ui) var(--ease-out),border-color var(--dur-ui) ease,box-shadow var(--dur-ui) ease} .s7-card__thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transition:transform 1.1s var(--ease-out),filter var(--dur-ui) ease;filter:saturate(1.02)} .s7-card__media::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,transparent 45%,rgba(3,8,6,.66));z-index:1} .s7-card__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.9);z-index:3; width:64px;height:64px;border-radius:50%;display:grid;place-items:center;color:#04140C; background:var(--green);box-shadow:0 8px 26px -6px var(--green-glow),0 0 0 1px rgba(255,255,255,.18); opacity:.92;transition:transform var(--dur-ui) var(--ease-snap),opacity var(--dur-ui) ease;padding-left:3px} .s7-card__play svg{margin-left:1px;width:24px;height:24px} .s7-card__cat{position:absolute;left:10px;top:10px;z-index:3;font-family:var(--font-mono); font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#dffaec; padding:4px 9px;border-radius:var(--r-pill);background:rgba(4,12,9,.6);border:1px solid var(--c-line-green);backdrop-filter:blur(6px)} /* YouTube logo badge (top-right corner of every thumbnail) */ .s7-card__yt{position:absolute;right:10px;top:10px;z-index:3;width:22px;height:22px; padding:3px 4px;border-radius:7px;background:rgba(4,12,9,.55);backdrop-filter:blur(6px); box-shadow:0 4px 12px -4px rgba(0,0,0,.6); transition:transform var(--dur-ui) var(--ease-snap),opacity var(--dur-ui) ease} .s7-card__title{font-size:15px;line-height:1.4;color:var(--c-ink-2);font-weight:500; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; transition:color var(--dur-ui) ease} @media (hover:hover){ .s7-card:hover .s7-card__media{transform:translateY(-5px);border-color:var(--c-line-green);box-shadow:0 30px 60px -30px #000,0 0 36px -14px var(--green-glow)} .s7-card:hover .s7-card__thumb{transform:scale(1.06);filter:saturate(1.12)} .s7-card:hover .s7-card__play{transform:translate(-50%,-50%) scale(1.06);opacity:1} .s7-card:hover .s7-card__title{color:#fff} .s7-card:hover .s7-card__yt{transform:scale(1.08)} } /* ---- stronger active-tab treatment + per-category accent ---- */ .s7-filter.is-active{font-weight:600;box-shadow:0 6px 18px -8px var(--green-glow),inset 0 0 0 1px var(--c-line-green)} .s7-card__media::before{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:2; background:linear-gradient(90deg,var(--green),transparent);opacity:.9; transition:height var(--dur-ui) var(--ease-out),opacity var(--dur-ui) ease} @media (hover:hover){.s7-card:hover .s7-card__media::before{height:5px;opacity:1}} /* category-specific accent bar colour (subtle visual hierarchy by trade) */ .s7-card[data-cat="kitchenbath"] .s7-card__media::before{background:linear-gradient(90deg,#27F58C,transparent)} .s7-card[data-cat="hvac"] .s7-card__media::before{background:linear-gradient(90deg,#37C2FF,transparent)} .s7-card[data-cat="roofing"] .s7-card__media::before{background:linear-gradient(90deg,#FF8A4C,transparent)} .s7-card[data-cat="adu"] .s7-card__media::before{background:linear-gradient(90deg,#B58CFF,transparent)} .s7-card[data-cat="fencing"] .s7-card__media::before{background:linear-gradient(90deg,#E8C46A,transparent)} .s7-card[data-cat="landscaping"] .s7-card__media::before{background:linear-gradient(90deg,#5FE08A,transparent)} .s7-card[data-cat="airducts"] .s7-card__media::before{background:linear-gradient(90deg,#4CD7D0,transparent)} .s7-card[data-cat="garagedoors"] .s7-card__media::before{background:linear-gradient(90deg,#9AA7B2,transparent)} .s7-card[data-cat="concrete"] .s7-card__media::before{background:linear-gradient(90deg,#C7B299,transparent)} .s7-card[data-cat="chimney"] .s7-card__media::before{background:linear-gradient(90deg,#FF6B6B,transparent)} .s7-card[data-cat="attic"] .s7-card__media::before{background:linear-gradient(90deg,#F2A65A,transparent)} .s7-card[data-cat="damage"] .s7-card__media::before{background:linear-gradient(90deg,#FF5470,transparent)} .s7-card:focus-visible .s7-card__media{border-color:var(--green);box-shadow:0 0 0 2px var(--green)} /* ---- lightbox ---- */ .s7-lb{position:fixed;inset:0;z-index:140;display:grid;place-items:center;padding:clamp(16px,4vw,48px); background:rgba(3,6,5,.86);backdrop-filter:blur(12px);opacity:0;visibility:hidden; transition:opacity var(--dur-ui) ease,visibility var(--dur-ui) ease} .s7-lb.is-open{opacity:1;visibility:visible} .s7-lb__dialog{position:relative;width:min(1040px,100%)} .s7-lb__close{position:absolute;top:-46px;right:0;z-index:3;width:40px;height:40px;border-radius:50%; display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid var(--void-line);color:#fff;font-size:16px;backdrop-filter:blur(6px); transition:border-color var(--dur-ui) ease,color var(--dur-ui) ease} .s7-lb__close:hover{border-color:var(--green);color:var(--green)} .s7-lb__frame{position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;background:#000; border:1px solid var(--void-line-green);box-shadow:0 60px 140px -50px #000,0 0 90px -50px var(--green-glow); transform:translateY(14px) scale(.985);transition:transform var(--dur-ui) var(--ease-out)} .s7-lb.is-open .s7-lb__frame{transform:none} .s7-lb__embed{position:absolute;inset:0} .s7-lb__embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block} .s7-lb__title{margin-top:16px;text-align:center;font-family:var(--font-mono);font-size:13px;letter-spacing:.04em;color:var(--void-ink-2)} @media (max-width:560px){.s7-lb__close{top:0;right:0;background:rgba(0,0,0,.55)}} /* ===================================================================== SECTION 08 — WHY GREEN CITY (white / system) A bespoke "growth operating system" trust engine: a glowing layered CORE shield with orbiting satellites + a live ownership meter, wired by the green "current" out to 8 pillar cards (4 left / 4 right), closed by a count-up proof stat row. All selectors scoped to .s8. All colors read from contextual --c-* tokens; green text on white uses --green-deep (raw --green fails contrast on white). ===================================================================== */ .s8{ --s8-core-w:clamp(248px,26vw,340px); } /* soft brand wash so the white section reads as a lit "stage" (rendered on .s8-system::before — never touch .s8::after, the foundation owns it) */ .s8 .s8-system::before{ content:""; position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); width:min(780px,94%); aspect-ratio:1; border-radius:50%; z-index:0; pointer-events:none; background:radial-gradient(circle,rgba(39,245,140,.13),transparent 68%); filter:blur(10px); } /* head */ .s8-head{ margin-bottom:clamp(40px,5vw,68px); } .s8-head .ma-lead{ max-width:720px; } /* ============================ SYSTEM STAGE ============================ */ .s8-system{ position:relative; } /* connector mesh */ .s8-wires{ position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; overflow:visible; } .s8-wires__dots circle{ filter:drop-shadow(0 0 6px var(--green-glow)); } /* the 3-column orbit grid */ .s8-grid{ position:relative; z-index:2; display:grid; grid-template-columns:1fr var(--s8-core-w) 1fr; grid-template-rows:repeat(4,auto); gap:clamp(18px,2.4vw,40px); align-items:center; } /* explicit placement so left cards, core, right cards interleave cleanly (no display:contents — keeps tilt + DOM order intact at every breakpoint) */ .s8-pillar--p1{ grid-column:1; grid-row:1; } .s8-pillar--p2{ grid-column:1; grid-row:2; } .s8-pillar--p3{ grid-column:1; grid-row:3; } .s8-pillar--p4{ grid-column:1; grid-row:4; } .s8-core { grid-column:2; grid-row:1 / span 4; } .s8-pillar--p5{ grid-column:3; grid-row:1; } .s8-pillar--p6{ grid-column:3; grid-row:2; } .s8-pillar--p7{ grid-column:3; grid-row:3; } .s8-pillar--p8{ grid-column:3; grid-row:4; } /* ---------------------------- PILLAR CARD ---------------------------- */ .s8-pillar{ padding:clamp(16px,1.5vw,22px) clamp(16px,1.6vw,22px) clamp(15px,1.4vw,20px); background:var(--c-bg); border-color:var(--c-line); box-shadow:0 1px 0 rgba(5,5,5,.02), 0 18px 40px -32px rgba(5,5,5,.28); transform-style:preserve-3d; } .s8-pillar::before{ /* top hairline highlight */ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,.6),transparent 38%); opacity:.5; } /* faint green sweep that lights the card edge nearest the core on hover */ .s8-pillar::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:radial-gradient(120% 80% at 100% 50%,rgba(39,245,140,.10),transparent 60%); opacity:0; transition:opacity var(--dur-ui) ease; } .s8-pillar--p5::after,.s8-pillar--p6::after,.s8-pillar--p7::after,.s8-pillar--p8::after{ background:radial-gradient(120% 80% at 0% 50%,rgba(39,245,140,.10),transparent 60%); } .s8-pillar__ic{ position:relative; display:grid; place-items:center; width:42px; height:42px; border-radius:12px; margin-bottom:13px; color:var(--green-deep); background:linear-gradient(160deg,rgba(39,245,140,.16),rgba(10,138,79,.06)); border:1px solid var(--c-line-green); transition:transform var(--dur-ui) var(--ease-out), background var(--dur-ui) ease, box-shadow var(--dur-ui) ease; } .s8-pillar__ic svg{ width:22px; height:22px; } .s8-pillar__t{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.005em; line-height:1.04; font-size:clamp(15px,1.15vw,17px); color:var(--c-ink); margin-bottom:7px; } .s8-pillar__d{ font-size:14px; line-height:1.5; color:var(--c-ink-2); margin-bottom:13px; } /* real platform-logo cluster on a pillar (sits above the badge) */ .s8-pillar__stack{ margin-bottom:13px; } .s8-pillar__stack img{ width:30px; height:30px; } /* small real trade photo on the home-service pillar */ .s8-pillar__photo{ display:block; margin-bottom:13px; border-radius:10px; overflow:hidden; border:1px solid var(--c-line); box-shadow:0 10px 24px -18px rgba(5,5,5,.35); } .s8-pillar__photo img{ display:block; width:100%; height:88px; object-fit:cover; } .s8-pillar__badge{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--green-deep); padding:5px 10px; border-radius:var(--r-pill); background:rgba(39,245,140,.10); border:1px solid var(--c-line-green); } .s8-pillar__badge::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--green-deep-2); box-shadow:0 0 6px rgba(15,184,102,.7); } /* the little "port" where the current rail meets the card (decorative) */ .s8-pillar__node{ position:absolute; top:50%; right:-5px; transform:translateY(-50%); width:9px; height:9px; border-radius:50%; background:var(--c-bg); border:1.5px solid var(--green-deep-2); box-shadow:0 0 0 3px rgba(39,245,140,.10); } .s8-pillar__node--r{ right:auto; left:-5px; } @media (hover:hover){ .s8-pillar:hover{ border-color:var(--c-line-green); } .s8-pillar:hover::after{ opacity:1; } .s8-pillar:hover .s8-pillar__ic{ transform:translateZ(24px) scale(1.05); background:linear-gradient(160deg,rgba(39,245,140,.28),rgba(10,138,79,.1)); box-shadow:0 10px 26px -14px var(--green-glow); } .s8-pillar:hover .s8-pillar__node{ box-shadow:0 0 0 4px rgba(39,245,140,.16); } } /* ============================ CENTER CORE / ENGINE =================== */ .s8-core{ position:relative; z-index:3; display:grid; justify-items:center; align-content:center; gap:18px; } .s8-core__stage{ position:relative; width:var(--s8-core-w); aspect-ratio:1; display:grid; place-items:center; transform-style:preserve-3d; } /* concentric rings */ .s8-core__ring{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:50%; pointer-events:none; } .s8-core__ring--1{ width:100%; height:100%; border:1px dashed rgba(10,138,79,.30); animation:s8spin 38s linear infinite; } .s8-core__ring--2{ width:78%; height:78%; border:1px solid rgba(10,138,79,.22); } .s8-core__ring--3{ width:118%; height:118%; border:1px solid rgba(10,138,79,.12); background:radial-gradient(circle,transparent 60%,rgba(39,245,140,.05)); } @keyframes s8spin{ to{ transform:translate(-50%,-50%) rotate(360deg); } } /* orbiting satellite dots — three nodes circling the engine, offset 120deg in phase. Each satellite sits on its own full-size rotator so the orbit radius always tracks the stage size (no dependence on the --s8-core-w token, which keeps it correct across breakpoints). */ .s8-core__orbit{ position:absolute; inset:0; pointer-events:none; } .s8-core__sat{ position:absolute; inset:0; display:block; animation:s8orbit 24s linear infinite; } .s8-core__sat::after{ content:""; position:absolute; top:-4px; left:50%; transform:translateX(-50%); width:9px; height:9px; border-radius:50%; background:var(--green-deep-2); box-shadow:0 0 10px var(--green-glow), 0 0 0 3px rgba(39,245,140,.12); } .s8-core__sat--b{ animation-delay:-8s; } .s8-core__sat--c{ animation-delay:-16s; } @keyframes s8orbit{ to{ transform:rotate(360deg); } } /* outer breathing glow */ .s8-core__pulse{ position:absolute; left:50%; top:50%; width:128%; height:128%; transform:translate(-50%,-50%); border-radius:50%; pointer-events:none; z-index:-1; background:radial-gradient(circle,rgba(39,245,140,.4),transparent 62%); filter:blur(20px); animation:s8breath 4.4s var(--ease-out) infinite; } @keyframes s8breath{ 0%,100%{ opacity:.55; transform:translate(-50%,-50%) scale(1); } 50%{ opacity:.9; transform:translate(-50%,-50%) scale(1.06); } } /* shield emblem */ .s8-core__shield{ position:relative; width:84%; aspect-ratio:200/230; display:grid; place-items:center; } .s8-core__shieldsvg{ position:absolute; inset:0; width:100%; height:100%; } .s8-core__shieldfill{ filter:drop-shadow(0 24px 46px -18px rgba(10,138,79,.5)); } .s8-core__shieldstroke{ stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.4s var(--ease-out) .25s; } .is-revealed .s8-core__shieldstroke{ stroke-dashoffset:0; } /* face content */ .s8-core__face{ position:relative; z-index:2; display:grid; justify-items:center; text-align:center; padding:0 8%; gap:1px; transform:translateY(-2%); } .s8-core__cube{ width:clamp(32px,3vw,42px); margin-bottom:5px; filter:drop-shadow(0 6px 14px rgba(10,138,79,.3)); } .s8-core__cube svg{ width:100%; height:auto; } /* real brand logo at the heart of the core (replaces abstract cube glyph) */ .s8-core__brand{ width:clamp(40px,4vw,54px); } .s8-core__brand img{ display:block; width:100%; height:auto; object-fit:contain; } .s8-core__kicker{ font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.34em; color:var(--green-deep); text-indent:.34em; } .s8-core__title{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:clamp(17px,1.7vw,23px); line-height:.96; letter-spacing:.01em; color:var(--c-ink); margin:2px 0 8px; } /* live ownership meter inside the shield */ .s8-core__meter{ display:grid; justify-items:center; gap:2px; padding-top:8px; width:86%; border-top:1px solid var(--c-line-green); } .s8-core__meterval{ font-family:var(--font-display); font-weight:700; font-size:clamp(15px,1.5vw,20px); line-height:1; color:var(--green-deep); font-variant-numeric:tabular-nums; } .s8-core__meterlabel{ font-family:var(--font-mono); font-size:9.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); } /* live status strip below the engine */ .s8-core__tag{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); text-align:center; } .s8-core__live{ width:8px; height:8px; border-radius:50%; background:var(--green-deep-2); flex:none; box-shadow:0 0 0 0 rgba(15,184,102,.5); animation:s8live 2.2s ease-out infinite; } @keyframes s8live{ 0%{ box-shadow:0 0 0 0 rgba(15,184,102,.45); } 70%,100%{ box-shadow:0 0 0 9px rgba(15,184,102,0); } } /* ============================ STAT ROW ============================ */ .s8-stats{ margin-top:clamp(48px,6vw,76px); display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.6vw,22px); position:relative; z-index:2; } .s8-stat{ position:relative; text-align:center; padding:clamp(20px,2.4vw,30px) 16px; border-radius:var(--r); background:var(--c-bg); border:1px solid var(--c-line); box-shadow:0 20px 44px -34px rgba(5,5,5,.3); overflow:hidden; } .s8-stat::before{ content:""; position:absolute; left:0; right:0; top:0; height:2px; background:linear-gradient(90deg,transparent,var(--green-deep-2),transparent); opacity:.7; } .s8-stat__n{ display:flex; align-items:baseline; justify-content:center; font-size:clamp(30px,3.8vw,50px); letter-spacing:.01em; color:var(--c-ink); } .s8-stat__star{ color:var(--green-deep); font-size:.62em; margin-left:.08em; line-height:1; } .s8-stat__l{ display:block; margin-top:9px; font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); } .s8-proof{ margin-top:clamp(28px,3vw,40px); } /* ===================================================================== RESPONSIVE ===================================================================== */ /* tighten orbit gap a touch on mid-desktop */ @media (max-width:1180px){ .s8{ --s8-core-w:clamp(230px,24vw,300px); } } /* below ~900px: core on top spanning full width, pillars become a clean 2-col grid in source order, wires + connector ports hidden. Uses explicit grid placement (NOT display:contents) so tilt + order hold. */ @media (max-width:900px){ .s8-wires{ display:none; } .s8-pillar__node{ display:none; } .s8 .s8-system::before{ top:0; transform:translate(-50%,-20%); } .s8-grid{ grid-template-columns:repeat(2,1fr); grid-template-rows:none; gap:14px; align-items:stretch; } /* reset desktop column/row placement -> natural flow */ .s8-pillar--p1,.s8-pillar--p2,.s8-pillar--p3,.s8-pillar--p4, .s8-pillar--p5,.s8-pillar--p6,.s8-pillar--p7,.s8-pillar--p8{ grid-column:auto; grid-row:auto; } .s8-core{ grid-column:1 / -1; grid-row:1; margin-bottom:clamp(20px,4vw,34px); } .s8-core__stage{ width:clamp(240px,52vw,300px); } .s8-pillar{ height:100%; } } /* stats -> 2x2 */ @media (max-width:720px){ .s8-stats{ grid-template-columns:repeat(2,1fr); } } /* single column for cards on small phones */ @media (max-width:520px){ .s8-grid{ grid-template-columns:1fr; } .s8-core__stage{ width:clamp(220px,72vw,260px); } } @media (max-width:380px){ .s8-stats{ gap:10px; } .s8-stat{ padding:18px 10px; } .s8-stat__l{ font-size:11px; letter-spacing:.06em; } } /* touch: drop hover-only depth on the icon (handled in foundation for cards) */ @media (hover:none){ .s8-pillar:hover .s8-pillar__ic{ transform:none; } } /* reduced motion: kill decorative orbit/pulse spins; keep static layout intact */ @media (prefers-reduced-motion:reduce){ .s8-core__ring--1, .s8-core__pulse, .s8-core__live, .s8-core__sat{ animation:none; } .s8-core__shieldstroke{ stroke-dashoffset:0; } } /* ===================================================================== SECTION 09 — PACKAGES BUILT FOR GROWTH (dark / cinema) Scoped: every selector starts with .s9. Reads colors from --c-* + brand. A bespoke interactive SYSTEM: real tab-driven tier highlight + a live ROI estimator panel (slider -> count math) on a green "current" funnel. ===================================================================== */ .s9{ --s9-gap:clamp(18px,2vw,26px); } /* ambient orbs dialed back so cards stay the hero */ .s9-orb{ opacity:.32; } .s9 .ma-orb--1{ top:-220px; left:-160px; } .s9 .ma-orb--2{ bottom:-260px; right:-160px; } .s9-grid{ opacity:.2; } /* ---------------------------------------------------------------- HEAD */ .s9-head{ margin-bottom:clamp(40px,5vw,60px); } .s9-title{ margin-top:4px; } /* scale selector — segmented "stage" control (real tabs) */ .s9-modeline{ display:flex; flex-direction:column; align-items:center; gap:14px; margin:32px auto 0; } .s9-modeline__label{ font-family:var(--font-mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--c-ink-3); } .s9-seg{ display:inline-flex; padding:5px; gap:4px; border-radius:var(--r-pill); border:1px solid var(--c-line); background:rgba(255,255,255,.03); backdrop-filter:blur(8px); max-width:100%; } .s9-seg__btn{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 18px; border-radius:var(--r-pill); white-space:nowrap; transition:color var(--dur-micro) ease, background var(--dur-micro) ease, box-shadow var(--dur-micro) ease; } .s9-seg__name{ font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--c-ink-2); transition:color var(--dur-micro) ease; } .s9-seg__sub{ font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--c-ink-3); transition:color var(--dur-micro) ease; } .s9-seg__btn:hover .s9-seg__name{ color:var(--c-ink); } .s9-seg__btn:active{ transform:scale(.97); } .s9-seg__btn.is-active{ background:var(--green); box-shadow:0 6px 18px -8px var(--green-glow); } .s9-seg__btn.is-active .s9-seg__name, .s9-seg__btn.is-active .s9-seg__sub{ color:var(--c-on-accent); } /* ------------------------------------------------------------ CARD GRID */ .s9-grid-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s9-gap); align-items:stretch; perspective:1400px; } /* card shell — tilt happens on .s9-card, glass on .s9-card__inner */ .s9-card{ position:relative; border-radius:var(--r-lg); transform-style:preserve-3d; will-change:transform; } .s9-card__inner{ position:relative; z-index:1; height:100%; display:flex; flex-direction:column; padding:clamp(24px,2.4vw,34px); border-radius:var(--r-lg); background: linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0) 38%), var(--c-panel); border:1px solid var(--c-line); box-shadow:var(--c-shadow); overflow:hidden; transition:border-color var(--dur-ui) ease, box-shadow var(--dur-ui) ease, transform var(--dur-ui) var(--ease-out); } /* faint top hairline of light */ .s9-card__inner::before{ content:""; position:absolute; inset:0 0 auto 0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent); opacity:.7; pointer-events:none; } @media (hover:hover){ .s9-card:hover .s9-card__inner{ border-color:var(--c-line-green); box-shadow:0 30px 80px -44px rgba(0,0,0,.9), 0 0 50px -22px var(--green-glow); } } /* ---- the tier matched by the stage selector gets a focus ring ---- */ .s9-card[data-stage].is-stage .s9-card__inner{ border-color:var(--c-line-green); box-shadow:0 30px 80px -44px rgba(0,0,0,.92), 0 0 0 1px var(--c-line-green), 0 0 60px -22px var(--green-glow); } .s9-card[data-stage].is-stage::after{ content:"YOUR STAGE"; position:absolute; top:-9px; left:50%; transform:translateX(-50%); font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; font-weight:600; color:var(--c-on-accent); background:var(--green); padding:3px 11px; border-radius:var(--r-pill); z-index:3; white-space:nowrap; box-shadow:0 6px 16px -6px var(--green-glow); } /* the popular card already has its MOST POPULAR badge, so don't double-tag it */ .s9-card--pop.is-stage::after{ display:none; } /* ---- POPULAR / GROWTH — animated gradient border + glow + lift ---- */ .s9-card--pop{ transform:translateY(-14px); z-index:2; } .s9-card--pop .s9-card__inner{ background: radial-gradient(120% 80% at 50% -10%,rgba(39,245,140,.16),transparent 60%), linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 42%), var(--c-panel-2); border-color:transparent; box-shadow:0 40px 110px -50px #000, 0 0 70px -26px var(--green-glow); } /* the animated conic gradient ring sits behind the inner card */ .s9-borderglow{ position:absolute; inset:-1.5px; border-radius:calc(var(--r-lg) + 1.5px); z-index:0; pointer-events:none; background:conic-gradient(from 0deg, var(--green-deep) 0deg, var(--green) 70deg, var(--green-bright) 130deg, rgba(39,245,140,.25) 200deg, var(--green-deep-2) 280deg, var(--green-deep) 360deg); filter:blur(.3px); animation:s9Spin 6s linear infinite; } /* soft outer bloom of the same ring */ .s9-borderglow::after{ content:""; position:absolute; inset:0; border-radius:inherit; background:inherit; filter:blur(18px); opacity:.5; } @keyframes s9Spin{ to{ transform:rotate(360deg); } } @media (hover:hover){ .s9-card--pop:hover .s9-card__inner{ box-shadow:0 46px 120px -50px #000, 0 0 90px -22px var(--green-glow); } } /* badge */ .s9-badge{ align-self:flex-start; display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--c-on-accent); padding:7px 13px; margin-bottom:18px; border-radius:var(--r-pill); background:linear-gradient(120deg,var(--green-bright),var(--green) 55%,var(--green-deep-2)); box-shadow:0 8px 24px -8px var(--green-glow), inset 0 0 0 1px rgba(255,255,255,.2); } .s9-badge__dot{ width:6px; height:6px; border-radius:50%; background:var(--c-on-accent); box-shadow:0 0 0 3px rgba(4,20,12,.25); animation:s9Blink 2.2s var(--ease-out) infinite; } @keyframes s9Blink{ 0%,100%{opacity:1} 50%{opacity:.35} } /* ---- card head ---- */ .s9-card__head{ margin-bottom:18px; } .s9-tier{ display:flex; align-items:center; gap:11px; } .s9-tier__glyph{ flex:none; width:38px; height:38px; border-radius:11px; display:grid; place-items:center; color:var(--c-ink-2); background:rgba(255,255,255,.04); border:1px solid var(--c-line); } .s9-tier__glyph--pop{ color:var(--green); background:rgba(39,245,140,.1); border-color:var(--c-line-green); box-shadow:0 0 22px -6px var(--green-glow); } .s9-name{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.01em; line-height:1; color:var(--c-ink); font-size:clamp(22px,2.2vw,28px); } .s9-best{ margin-top:11px; font-family:var(--font-mono); font-size:13px; letter-spacing:.04em; color:var(--c-ink-3); } /* ---- price treatment ---- */ .s9-price{ margin:4px 0 22px; padding:18px 0 20px; border-top:1px solid var(--c-line); border-bottom:1px solid var(--c-line); } .s9-price__lead{ display:flex; align-items:flex-end; gap:5px; flex-wrap:wrap; } .s9-price__cur{ font-family:var(--font-display); font-weight:600; color:var(--c-ink-2); font-size:24px; line-height:1; margin-bottom:8px; } .s9-price__num{ font-family:var(--font-display); font-weight:700; color:var(--c-ink); font-size:clamp(42px,4.6vw,56px); line-height:.85; font-variant-numeric:tabular-nums; letter-spacing:.01em; } .s9-price__per{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:8px; } .s9-price__setup{ margin-top:12px; font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; color:var(--c-ink-3); } .s9-price__setup strong{ color:var(--c-ink-2); font-weight:600; } .s9-card--pop .s9-price{ border-color:var(--c-line-green); } /* ---- feature list ---- */ .s9-feats{ display:flex; flex-direction:column; gap:11px; margin-bottom:26px; flex:1 1 auto; } .s9-feats li{ display:flex; align-items:flex-start; gap:11px; font-size:15px; line-height:1.35; color:var(--c-ink-2); } /* the green check glyph */ .s9-check{ flex:none; width:21px; height:21px; margin-top:1px; border-radius:7px; position:relative; background:rgba(39,245,140,.12); border:1px solid var(--c-line-green); } .s9-check::after{ content:""; position:absolute; left:6px; top:3px; width:5px; height:9px; border:solid var(--green); border-width:0 2px 2px 0; transform:rotate(42deg); border-radius:1px; } .s9-card--pop .s9-check{ background:rgba(39,245,140,.2); box-shadow:0 0 14px -4px var(--green-glow); } /* "everything in X, plus" divider row */ .s9-feats__rule{ align-items:center !important; font-family:var(--font-mono); font-size:11px !important; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3) !important; padding-bottom:3px; } .s9-plus{ flex:none; width:21px; height:21px; border-radius:7px; position:relative; background:transparent; border:1px dashed var(--c-line-green); } .s9-plus::before, .s9-plus::after{ content:""; position:absolute; left:50%; top:50%; background:var(--green); transform:translate(-50%,-50%); border-radius:1px; } .s9-plus::before{ width:9px; height:1.8px; } .s9-plus::after{ width:1.8px; height:9px; } /* ---- inline platform logos on feature lines (subtle brand colour) ---- */ .s9-feat-logos{ display:inline-flex; align-items:center; gap:5px; margin-left:8px; vertical-align:middle; opacity:.92; } .s9-feat-logos .ma-logo{ width:16px; height:16px; filter:drop-shadow(0 1px 3px rgba(0,0,0,.45)); } /* ---- "Works with:" logo cluster in each card footer ---- */ .s9-works{ display:flex; align-items:center; gap:12px; margin:0 0 20px; padding-top:16px; border-top:1px dashed var(--c-line); } .s9-card--pop .s9-works{ border-top-color:var(--c-line-green); } .s9-works__label{ font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); white-space:nowrap; } .s9-works .ma-platstack img{ width:28px; height:28px; } /* ---- CTA ---- */ .s9-cta{ width:100%; justify-content:center; } /* =================================================================== ROI ENGINE — live estimator panel + green-current funnel =================================================================== */ .s9-roi{ position:relative; display:grid; grid-template-columns:1.55fr 1fr; gap:clamp(18px,2vw,28px); margin-top:clamp(44px,5.5vw,68px); padding:clamp(20px,2.2vw,30px); border-radius:var(--r-lg); background: radial-gradient(120% 90% at 80% 0%,rgba(39,245,140,.08),transparent 55%), var(--c-panel); border:1px solid var(--c-line); box-shadow:var(--c-shadow); overflow:hidden; } .s9-roi__glow{ position:absolute; inset:auto -10% -40% auto; width:60%; height:70%; background:radial-gradient(circle,var(--green-glow),transparent 70%); filter:blur(60px); opacity:.5; pointer-events:none; } /* ----- left: the dashboard panel ----- */ .s9-roi__panel{ position:relative; z-index:1; border-radius:var(--r); overflow:hidden; background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 40%),var(--c-panel-2); border:1px solid var(--c-line); } .s9-roi__bar{ display:flex; align-items:center; gap:7px; padding:11px 16px; border-bottom:1px solid var(--c-line); background:rgba(255,255,255,.02); } .s9-dot{ width:9px; height:9px; border-radius:50%; flex:none; } .s9-dot--r{ background:#ff5f57; } .s9-dot--y{ background:#febc2e; } .s9-dot--g{ background:#28c840; } .s9-roi__tag{ margin-left:8px; font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; color:var(--c-ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .s9-roi__live{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; color:var(--green); } .s9-roi__livedot{ width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); animation:s9Blink 1.8s var(--ease-out) infinite; } .s9-roi__body{ padding:clamp(20px,2.4vw,30px); } .s9-roi__title{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.01em; line-height:1.04; color:var(--c-ink); font-size:clamp(20px,2.4vw,28px); } .s9-roi__title .ma-word{ color:var(--green); } .s9-roi__hint{ margin-top:10px; font-size:14px; line-height:1.5; color:var(--c-ink-2); max-width:46ch; } /* ----- slider ----- */ .s9-slider{ margin-top:24px; display:grid; grid-template-columns:1fr auto; align-items:center; column-gap:14px; row-gap:14px; } .s9-slider__label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); } .s9-slider__out{ justify-self:end; font-family:var(--font-display); font-weight:700; font-variant-numeric:tabular-nums; font-size:clamp(20px,2.2vw,26px); color:var(--green); line-height:1; letter-spacing:.01em; } .s9-slider__input{ grid-column:1 / -1; -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:var(--r-pill); margin:0; background: linear-gradient(90deg,var(--green),var(--green-bright)) 0/var(--p,50%) 100% no-repeat, var(--c-line); cursor:pointer; } .s9-slider__input::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:22px; height:22px; border-radius:50%; background:var(--green); border:3px solid var(--c-panel-2); box-shadow:0 0 0 1px var(--green), 0 4px 14px -2px var(--green-glow); transition:transform var(--dur-micro) var(--ease-snap); } .s9-slider__input::-moz-range-thumb{ width:22px; height:22px; border-radius:50%; background:var(--green); border:3px solid var(--c-panel-2); box-shadow:0 0 0 1px var(--green), 0 4px 14px -2px var(--green-glow); } @media (hover:hover){ .s9-slider__input:hover::-webkit-slider-thumb{ transform:scale(1.12); } } .s9-slider__input:active::-webkit-slider-thumb{ transform:scale(.94); } .s9-slider__scale{ grid-column:1 / -1; display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; color:var(--c-ink-3); margin-top:-4px; } /* ----- live stats ----- */ .s9-stats{ margin-top:26px; display:grid; grid-template-columns:1fr 1fr; gap:12px; } .s9-stat{ padding:14px 16px; border-radius:var(--r-sm); background:rgba(255,255,255,.025); border:1px solid var(--c-line); } .s9-stat--hero{ grid-column:1 / -1; background:linear-gradient(120deg,rgba(39,245,140,.1),rgba(39,245,140,.02)); border-color:var(--c-line-green); box-shadow:inset 0 0 30px -20px var(--green-glow); } .s9-stat__k{ display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); } .s9-stat__v{ display:block; margin-top:6px; font-family:var(--font-display); font-weight:700; font-variant-numeric:tabular-nums; line-height:1; color:var(--c-ink); font-size:clamp(26px,3vw,34px); letter-spacing:.01em; } .s9-stat--hero .s9-stat__v{ font-size:clamp(32px,4vw,46px); } .s9-stat__v--green{ color:var(--green); } .s9-stat__cur{ font-size:.65em; margin-right:1px; vertical-align:baseline; } .s9-stat__d{ display:block; margin-top:7px; font-family:var(--font-mono); font-size:10px; letter-spacing:.04em; color:var(--c-ink-3); } /* ----- right: the current-rail funnel ----- */ .s9-funnel{ position:relative; z-index:1; margin:0; display:flex; flex-direction:column; border-radius:var(--r); padding:clamp(18px,2vw,24px); background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 40%),var(--c-panel-2); border:1px solid var(--c-line); } .s9-funnel__cap{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px; } .s9-funnel__svg{ width:100%; height:auto; max-height:200px; } .s9-funnel__steps{ display:flex; flex-direction:column; gap:9px; margin-top:8px; } .s9-funnel__step{ display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:var(--r-sm); background:rgba(255,255,255,.025); border:1px solid var(--c-line); } .s9-funnel__n{ flex:none; width:26px; height:26px; border-radius:8px; display:grid; place-items:center; font-family:var(--font-mono); font-size:11px; font-weight:600; color:var(--c-ink-3); background:rgba(255,255,255,.04); border:1px solid var(--c-line); } .s9-funnel__t{ font-size:13px; line-height:1.3; color:var(--c-ink-2); } .s9-funnel__step--win{ background:linear-gradient(120deg,rgba(39,245,140,.12),rgba(39,245,140,.02)); border-color:var(--c-line-green); } .s9-funnel__step--win .s9-funnel__n{ color:var(--c-on-accent); background:var(--green); border-color:transparent; } .s9-funnel__step--win .s9-funnel__t{ color:var(--c-ink); font-weight:600; } /* ============================================================ TRUST ROW */ .s9-trust{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:clamp(40px,5vw,56px); } .s9-trust__chip{ display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; align-items:center; column-gap:13px; row-gap:2px; padding:16px 18px; border-radius:var(--r); background:var(--c-panel); border:1px solid var(--c-line); transition:border-color var(--dur-ui) ease, transform var(--dur-ui) var(--ease-out); } .s9-trust__ico{ grid-row:1 / span 2; } .s9-trust__t{ grid-column:2; grid-row:1; } .s9-trust__s{ grid-column:2; grid-row:2; } @media (hover:hover){ .s9-trust__chip:hover{ border-color:var(--c-line-green); transform:translateY(-2px); } } .s9-trust__ico{ flex:none; width:40px; height:40px; border-radius:11px; display:grid; place-items:center; color:var(--green); background:rgba(39,245,140,.1); border:1px solid var(--c-line-green); } .s9-trust__chip .s9-trust__t{ display:block; font-family:var(--font-display); font-weight:600; font-size:15px; line-height:1.15; color:var(--c-ink); } .s9-trust__chip .s9-trust__s{ display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.03em; color:var(--c-ink-3); margin-top:3px; } /* ========================================================== CLOSER */ .s9-closer{ text-align:center; margin:clamp(36px,4vw,52px) auto 0; max-width:700px; } .s9-closer__big{ display:block; font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.01em; line-height:1.04; font-size:clamp(20px,2.6vw,30px); color:var(--c-ink); } .s9-closer__sub{ display:block; margin-top:14px; font-size:15px; line-height:1.5; color:var(--c-ink-2); } .s9-closer__link{ color:var(--c-accent); font-weight:600; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; } .s9-closer__link:hover{ color:var(--green-bright); } /* =================================================================== RESPONSIVE =================================================================== */ /* slightly tighter at large tablet */ @media (max-width:1100px){ .s9-grid-cards{ gap:16px; } .s9-card__inner{ padding:24px 22px; } } /* ROI: stack the two panels under ~960 */ @media (max-width:960px){ .s9-roi{ grid-template-columns:1fr; } .s9-funnel__svg{ max-height:180px; } } /* 3 -> 1 column: highlighted card FIRST and centered */ @media (max-width:980px){ .s9-grid-cards{ grid-template-columns:minmax(0,440px); justify-content:center; gap:22px; } .s9-card--pop{ transform:none; order:-1; } /* Growth jumps to top */ .s9-card{ transform:none !important; } /* kill any tilt residue */ .s9-trust{ grid-template-columns:repeat(2,1fr); } } @media (max-width:620px){ .s9-stats{ grid-template-columns:1fr; } .s9-slider{ grid-template-columns:1fr; row-gap:10px; } .s9-slider__out{ justify-self:start; } } @media (max-width:560px){ .s9-grid-cards{ grid-template-columns:1fr; } .s9-seg{ flex-direction:column; width:100%; max-width:320px; } .s9-seg__btn{ width:100%; flex-direction:row; justify-content:space-between; gap:10px; padding:10px 16px; } .s9-trust{ grid-template-columns:1fr; gap:11px; } .s9-trust__chip{ padding:14px 16px; } .s9-price__num{ font-size:clamp(40px,13vw,52px); } .s9-feats li{ font-size:14px; } } @media (max-width:380px){ .s9-card__inner{ padding:22px 18px; } .s9-name{ font-size:21px; } .s9-roi{ padding:14px; } .s9-roi__body{ padding:18px; } } /* reduced motion: stop the spinning ring + blinks + flow dots */ @media (prefers-reduced-motion:reduce){ .s9-borderglow{ animation:none; } .s9-badge__dot, .s9-roi__livedot{ animation:none; } } /* ===================================================================== SECTION 10 — BRANDS WE GROW / CLIENT RESULTS BOARD (white / ma-system) A bespoke live "results board": chrome bar + aggregate dashboard with a live ticker, a working category FILTER BAR, and 12 typographic-wordmark result cards — each a real KPI count-up, a drawing green "current" spark and a ROAS fill bar. Framed by two opposing wordmark marquees (trust ribbon). Green on white = --green-deep. All selectors scoped to .s10. ===================================================================== */ /* soft ambient brand wash so the white section reads as a lit stage */ .s10-glow{ position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(58% 40% at 50% -2%, rgba(10,138,79,.08), transparent 70%), radial-gradient(46% 38% at 84% 90%, rgba(15,184,102,.06), transparent 72%); } /* ---------- HEADER -------------------------------------------------- */ .s10-head{ margin-bottom:clamp(32px,4vw,52px); } .s10-head .ma-lead{ max-width:680px; } /* ===================================================================== TRUST RIBBON — two opposing wordmark marquees ===================================================================== */ .s10-ribbon{ margin:0 0 clamp(34px,4.5vw,56px); display:flex; flex-direction:column; gap:13px; padding:clamp(16px,2.4vw,26px) 0; border-top:1px solid var(--c-line); border-bottom:1px solid var(--c-line); } /* lay the original row + its JS-cloned sibling on ONE line so the loop is seamless (foundation appends the clone as a block sibling). .s10-marq is our own class — safe to style without touching the .ma-marquee globals. */ .s10-marq{ display:flex; flex-wrap:nowrap; } .s10-marq__row{ gap:clamp(26px,4vw,50px); align-items:center; flex:0 0 auto; } .s10-marq--rev .ma-marquee__row{ animation-direction:reverse; animation-duration:38s; } .s10-mchip{ font-family:var(--font-display); font-weight:600; white-space:nowrap; font-size:clamp(19px,2.3vw,28px); line-height:1; color:var(--c-ink-3); letter-spacing:.01em; transition:color var(--dur-ui) var(--ease-out); } .ma-marquee:hover .s10-mchip{ color:var(--c-ink-2); } .s10-mchip-sep{ color:var(--green-deep); opacity:.5; font-size:11px; line-height:1; transform:translateY(-1px); } /* ===================================================================== RESULTS BOARD SHELL ===================================================================== */ .s10-board{ position:relative; z-index:2; border:1px solid var(--c-line); border-radius:var(--r-lg); background: linear-gradient(180deg, var(--c-bg), var(--c-panel)); box-shadow:0 40px 90px -54px rgba(5,20,12,.4); overflow:hidden; } /* ---------- board chrome bar ---------- */ .s10-board__bar{ display:flex; align-items:center; gap:14px; padding:13px clamp(16px,2.2vw,26px); border-bottom:1px solid var(--c-line); background:var(--c-panel-2); } .s10-board__dots{ display:flex; gap:6px; flex:0 0 auto; } .s10-board__dot{ width:9px; height:9px; border-radius:50%; background:var(--c-line); } .s10-board__dot:nth-child(1){ background:rgba(10,138,79,.55); } .s10-board__title{ flex:1 1 auto; color:var(--c-ink-3); font-size:11.5px; letter-spacing:.16em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .s10-board__live{ flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; padding:4px 10px 4px 8px; border-radius:var(--r-pill); background:rgba(10,138,79,.08); border:1px solid rgba(10,138,79,.18); } .s10-board__pulse{ width:7px; height:7px; border-radius:50%; background:var(--green-deep-2); box-shadow:0 0 0 0 rgba(15,184,102,.5); animation:s10pulse 2.2s var(--ease-out) infinite; } @keyframes s10pulse{ 0%{ box-shadow:0 0 0 0 rgba(15,184,102,.5); } 70%{ box-shadow:0 0 0 7px rgba(15,184,102,0); } 100%{ box-shadow:0 0 0 0 rgba(15,184,102,0); } } .s10-board__livetxt{ font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.16em; color:var(--green-deep); } /* ===================================================================== AGGREGATE DASHBOARD STRIP ===================================================================== */ .s10-agg{ display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--c-line); } .s10-agg__cell{ position:relative; display:flex; flex-direction:column; gap:8px; padding:clamp(16px,2vw,24px) clamp(16px,2vw,26px) clamp(18px,2.2vw,26px); border-right:1px solid var(--c-line); } .s10-agg__cell:last-child{ border-right:0; } .s10-agg__l{ color:var(--c-ink-3); font-size:11px; } .s10-agg__n{ font-size:clamp(26px,3.2vw,40px); letter-spacing:.01em; color:var(--c-ink); } .s10-agg__cell--live .s10-agg__n{ color:var(--green-deep); } .s10-agg__rail{ position:relative; height:4px; border-radius:99px; overflow:hidden; background:var(--c-line); margin-top:2px; } .s10-agg__rail i{ position:absolute; inset:0 auto 0 0; width:var(--w,60%); border-radius:99px; background:linear-gradient(90deg, var(--green-deep), var(--green-deep-2)); transform:scaleX(0); transform-origin:left; transition:transform 1.1s var(--ease-out) .15s; } .is-revealed .s10-agg__rail i{ transform:scaleX(1); } /* ===================================================================== FILTER BAR ===================================================================== */ .s10-filters{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:clamp(16px,2vw,22px) clamp(16px,2.2vw,26px); border-bottom:1px solid var(--c-line); } .s10-filters__lab{ color:var(--c-ink-3); flex:0 0 auto; margin:0; } .s10-filterbar{ row-gap:8px; } .s10-count{ font-size:.78em; opacity:.7; margin-left:3px; font-variant-numeric:tabular-nums; } /* ===================================================================== RESULT CARD GRID ===================================================================== */ .s10-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--c-line); } .s10-cell{ display:flex; background:var(--c-bg); } /* filter hide — engine toggles [hidden]; keep a graceful fade for non-hidden */ .s10-cell[hidden]{ display:none; } .s10-card{ position:relative; width:100%; display:flex; flex-direction:column; gap:13px; padding:clamp(18px,1.8vw,24px) clamp(16px,1.7vw,22px); background:var(--c-bg); border:0; border-radius:0; text-align:left; transition:background var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out); will-change:transform; } .s10-card:focus-visible{ outline:2px solid var(--green-deep); outline-offset:-2px; } .ma-card.s10-card{ overflow:visible; } @media (hover:hover){ .s10-card:hover{ background:linear-gradient(180deg, var(--c-bg), var(--c-panel)); box-shadow:inset 0 0 0 1px var(--c-line-green), 0 26px 50px -38px rgba(10,80,46,.6); z-index:3; } } /* ---------- card header: wordmark + tag ---------- */ .s10-card__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; } .s10-mark{ display:flex; flex-direction:column; gap:2px; min-width:0; color:var(--c-ink); } .s10-mk{ font-size:clamp(19px,2vw,24px); line-height:.98; } .s10-mk2{ font-size:10px; line-height:1; color:var(--c-ink-2); } .s10-tag{ flex:0 0 auto; font-family:var(--font-mono); font-size:9.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--green-deep); padding:3px 8px; border-radius:var(--r-pill); background:rgba(10,138,79,.08); border:1px solid rgba(10,138,79,.16); } /* ---------- KPI ---------- */ .s10-card__kpi{ display:flex; flex-direction:column; gap:1px; margin-top:2px; } .s10-card__big{ font-size:clamp(28px,3vw,38px); letter-spacing:.005em; color:var(--c-ink); line-height:1; } .s10-card__unit{ font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--c-ink-3); } /* ---------- mini spark (green "current" draw-in) ---------- */ .s10-spark{ width:100%; height:34px; display:block; margin-top:auto; } .s10-spark .ma-current__track{ stroke:var(--c-line); stroke-width:1.5; } .s10-spark__draw{ fill:none; stroke:var(--green-deep-2); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 2px 5px rgba(10,138,79,.28)); stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.3s var(--ease-out) .2s; } .is-revealed .s10-spark__draw{ stroke-dashoffset:0; } /* ---------- footer: caption + ROAS bar ---------- */ .s10-card__foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:11px; border-top:1px solid var(--c-line); } .s10-card__cpl{ font-family:var(--font-mono); font-size:11px; letter-spacing:.02em; color:var(--c-ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .s10-card__cpl b{ color:var(--c-ink); font-weight:700; } .s10-card__roas{ position:relative; flex:0 0 56px; height:5px; border-radius:99px; background:var(--c-line); overflow:hidden; } .s10-card__roas i{ position:absolute; inset:0 auto 0 0; width:var(--w,70%); border-radius:99px; background:linear-gradient(90deg, var(--green-deep), var(--green-deep-2)); transform:scaleX(0); transform-origin:left; transition:transform 1s var(--ease-out) .35s; } .is-revealed .s10-card__roas i{ transform:scaleX(1); } /* ===================================================================== PER-BRAND WORDMARK IDENTITY Vary family / weight / case / spacing / style so each reads distinct. Shared by marquee chips (.s10-w--x) and card stacks (.s10-w--x / x2). ===================================================================== */ .s10-w--mustang{ font-family:var(--font-display); font-weight:700; font-style:italic; letter-spacing:.01em; } .s10-w--mustang2{ font-family:var(--font-mono); font-weight:600; letter-spacing:.2em; } .s10-w--mav{ font-family:var(--font-display); font-weight:500; letter-spacing:.02em; } .s10-w--mav2{ font-family:var(--font-mono); font-weight:500; letter-spacing:.28em; } .s10-w--clear{ font-family:var(--font-display); font-weight:400; letter-spacing:.04em; } .s10-w--clear2{ font-family:var(--font-body); font-weight:600; letter-spacing:.18em; } .s10-w--right{ font-family:var(--font-body); font-weight:700; letter-spacing:.01em; } .s10-w--right2{ font-family:var(--font-mono); font-weight:500; letter-spacing:.16em; } .s10-w--pave{ font-family:var(--font-display); font-weight:700; letter-spacing:.005em; text-transform:uppercase; } .s10-w--pave2{ font-family:var(--font-mono); font-weight:600; letter-spacing:.32em; } .s10-w--sky{ font-family:var(--font-display); font-weight:300; font-style:italic; letter-spacing:.01em; } .s10-w--sky2{ font-family:var(--font-mono); font-weight:500; letter-spacing:.24em; } .s10-w--palms{ font-family:var(--font-display); font-weight:700; letter-spacing:.14em; } .s10-w--palms2{ font-family:var(--font-display); font-weight:400; font-style:italic; letter-spacing:.01em; } .s10-w--quartz{ font-family:var(--font-display); font-weight:600; letter-spacing:.08em; } .s10-w--quartz2{ font-family:var(--font-mono); font-weight:600; letter-spacing:.22em; } .s10-w--green{ font-family:var(--font-display); font-weight:600; letter-spacing:.01em; } .s10-w--green2{ font-family:var(--font-body); font-weight:600; letter-spacing:.16em; } .s10-w--cali{ font-family:var(--font-display); font-weight:500; letter-spacing:.03em; } .s10-w--cali2{ font-family:var(--font-mono); font-weight:500; letter-spacing:.18em; } .s10-w--247{ font-family:var(--font-mono); font-weight:600; letter-spacing:.1em; } .s10-w--2472{ font-family:var(--font-mono); font-weight:500; letter-spacing:.16em; } .s10-w--2472 b{ color:var(--green-deep); font-weight:700; } .s10-w--attic{ font-family:var(--font-display); font-weight:700; letter-spacing:.01em; } .s10-w--attic2{ font-family:var(--font-mono); font-weight:600; letter-spacing:.28em; } /* ===================================================================== REAL LOGO TREATMENTS (trust marquee chips + card header logos) ===================================================================== */ .s10-logo{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; height:58px; width:158px; padding:10px 20px; background:#fff; border:1px solid var(--c-line); border-radius:var(--r); box-shadow:0 10px 26px -22px rgba(5,20,12,.5); } .s10-logo img{ max-height:100%; max-width:100%; object-fit:contain; display:block; } .s10-logo--dark{ background:#0c1512; border-color:rgba(255,255,255,.10); } .s10-mark--logo{ display:flex; align-items:center; min-height:36px; } .s10-cardlogo{ max-height:38px; max-width:160px; object-fit:contain; object-position:left center; display:block; } /* ===================================================================== LOCAL PROOF — service-area map + Google Business + reviews ===================================================================== */ .s10-local{ margin-top:clamp(30px,3.8vw,48px); display:grid; grid-template-columns:1.32fr 1fr; gap:clamp(16px,2vw,24px); align-items:start; } .s10-local__map{ display:flex; flex-direction:column; gap:12px; } .s10-local__lab{ color:var(--c-ink-3); display:flex; align-items:center; gap:8px; margin:0; } .s10-local__rev{ display:flex; flex-direction:column; gap:14px; } @media (max-width:860px){ .s10-local{ grid-template-columns:1fr; } } /* ===================================================================== EMPTY STATE (engine may surface when a filter matches nothing) ===================================================================== */ .s10-empty{ grid-column:1 / -1; display:none; background:var(--c-bg); padding:clamp(28px,5vw,48px); text-align:center; } .s10-empty__txt{ color:var(--c-ink-3); } /* ---------- PROOFLINE + CTA ---------------------------------------- */ .s10-proof{ margin-top:clamp(36px,4.5vw,56px); } .s10-cta{ margin-top:clamp(22px,3vw,32px); display:flex; justify-content:center; } /* ===================================================================== RESPONSIVE ===================================================================== */ @media (max-width:1100px){ .s10-grid{ grid-template-columns:repeat(3,1fr); } } @media (max-width:860px){ .s10-agg{ grid-template-columns:repeat(2,1fr); } .s10-agg__cell:nth-child(2){ border-right:0; } .s10-agg__cell:nth-child(1), .s10-agg__cell:nth-child(2){ border-bottom:1px solid var(--c-line); } .s10-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .s10-board__title{ font-size:10.5px; letter-spacing:.1em; } .s10-mk{ font-size:19px; } .s10-mchip{ font-size:18px; } .s10-card__big{ font-size:30px; } } @media (max-width:430px){ .s10-agg{ grid-template-columns:1fr; } .s10-agg__cell{ border-right:0; border-bottom:1px solid var(--c-line); } .s10-agg__cell:last-child{ border-bottom:0; } .s10-grid{ grid-template-columns:1fr; } .s10-filters{ gap:10px; } } @media (max-width:360px){ .s10-card{ padding:16px 14px; } } /* touch: no hover lift — focus + cards stay fully legible (proof is always visible) */ @media (hover:none){ .s10-card{ -webkit-tap-highlight-color:transparent; } } /* reduced motion — surface every animated value at its final state */ @media (prefers-reduced-motion:reduce){ .s10-agg__rail i, .s10-card__roas i{ transform:scaleX(1)!important; transition:none; } .s10-spark__draw{ stroke-dashoffset:0!important; transition:none; } .s10-board__pulse{ animation:none; } .s10-mchip,.s10-card{ transition:none; } } /* ===================================================================== SECTION 11 — THE GREEN CITY DIFFERENCE (dark / cinema) Interactive editorial principle selector + live proof dashboards. Engine: [data-tabs]. Scoped to .s11 only. No :root, no .ma-* redefinition. ===================================================================== */ .s11{ overflow:clip; } /* ----- ambient ------------------------------------------------------- */ .s11-orb{ top:auto; bottom:-220px; right:-160px; opacity:.4; } .s11-grid-fade{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5; background-image: linear-gradient(var(--c-line) 1px,transparent 1px), linear-gradient(90deg,var(--c-line) 1px,transparent 1px); background-size:72px 72px; -webkit-mask-image:radial-gradient(ellipse 70% 55% at 72% 26%,#000,transparent 72%); mask-image:radial-gradient(ellipse 70% 55% at 72% 26%,#000,transparent 72%); } .s11-head{ margin-bottom:clamp(40px,5vw,64px); } /* ===================================================================== SELECTOR SHELL — stage on top, toggle rail beneath (editorial) ===================================================================== */ .s11-selector{ position:relative; z-index:2; border:1px solid var(--c-line); border-radius:var(--r-lg); background: radial-gradient(120% 120% at 82% 0%,rgba(39,245,140,.06),transparent 55%), var(--c-panel); box-shadow:var(--c-shadow); overflow:hidden; } /* ===================================================================== DISPLAY STAGE ===================================================================== */ .s11-stage{ position:relative; padding:clamp(28px,4vw,56px) clamp(24px,4vw,60px) clamp(34px,4vw,56px); min-height:clamp(380px,40vw,470px); /* reserve height so swap never jumps */ } /* faint vertical seam between copy + proof columns */ .s11-stage__rail{ position:absolute; top:clamp(28px,4vw,56px); bottom:clamp(34px,4vw,56px); left:62%; width:1px; pointer-events:none; background:linear-gradient(180deg,transparent,var(--c-line) 18%,var(--c-line) 82%,transparent); opacity:.7; } /* a panel = copy column + live proof dashboard */ .s11-panel{ display:grid; grid-template-columns:1.18fr .82fr; gap:clamp(28px,4vw,60px); align-items:center; } .s11-panel[hidden]{ display:none; } /* swap-in: ease-out, blur-masked so the two states never visibly overlap. Under 700ms, never from scale(0). Re-runs on each tab change because the engine flips [hidden] which remounts the element. */ .s11-panel{ animation:s11In var(--dur-reveal) var(--ease-out) both; } @keyframes s11In{ from{ opacity:0; transform:translateY(12px) scale(.992); filter:blur(7px); } to{ opacity:1; transform:none; filter:none; } } /* ----- copy column --------------------------------------------------- */ .s11-panel__top{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:clamp(14px,1.6vw,20px); } .s11-panel__no{ color:var(--c-ink-3); } .s11-chip{ display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border-radius:var(--r-pill); border:1px solid var(--c-line-green); background:rgba(39,245,140,.06); color:var(--c-accent); font-size:11px; letter-spacing:.1em; } .s11-chip::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--c-accent); box-shadow:0 0 8px var(--green-glow); } /* THE HUGE EDITORIAL DISPLAY WORD */ .s11-word{ font-size:clamp(38px,7.6vw,96px); line-height:.9; letter-spacing:.005em; margin-bottom:clamp(16px,2.2vw,26px); background:linear-gradient(180deg,var(--c-ink) 0%,#bff6d8 62%,var(--green) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; text-wrap:balance; filter:drop-shadow(0 0 26px rgba(39,245,140,.20)); } .s11-panel__lead{ font-family:var(--font-body); font-size:clamp(16px,1.5vw,19px); line-height:1.58; color:var(--c-ink-2); max-width:54ch; margin-bottom:clamp(20px,2.4vw,28px); } /* supporting bullets */ .s11-points{ display:flex; flex-direction:column; gap:14px; } .s11-points li{ display:flex; align-items:flex-start; gap:13px; font-size:15px; line-height:1.5; color:var(--c-ink-2); } .s11-points strong{ color:var(--c-ink); font-weight:600; } .s11-points__mark{ flex:none; position:relative; margin-top:5px; width:13px; height:13px; border-radius:50%; border:1.5px solid var(--c-accent); box-shadow:0 0 10px rgba(39,245,140,.35); } .s11-points__mark::after{ content:""; position:absolute; inset:3px; border-radius:50%; background:var(--c-accent); box-shadow:0 0 8px var(--green-glow); } /* ===================================================================== LIVE PROOF DASHBOARD (right column — the bespoke system) ===================================================================== */ .s11-proof{ margin:0; justify-self:stretch; width:100%; border:1px solid var(--c-line); border-radius:var(--r); background: radial-gradient(120% 90% at 80% 0%,rgba(39,245,140,.08),transparent 60%), var(--c-panel-2); box-shadow:0 24px 60px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.04); overflow:hidden; } @media (hover:hover){ .s11-proof{ transition:transform var(--dur-ui) var(--ease-out),border-color var(--dur-ui) ease; } .s11-selector:hover .s11-proof{ border-color:var(--c-line-green); } } /* chrome bar */ .s11-proof__bar{ display:flex; align-items:center; gap:7px; padding:11px 14px; border-bottom:1px solid var(--c-line); background:linear-gradient(180deg,rgba(255,255,255,.04),transparent); } .s11-proof__dot{ width:8px; height:8px; border-radius:50%; background:var(--c-ink-3); opacity:.5; } .s11-proof__dot:first-child{ background:var(--c-accent); opacity:1; box-shadow:0 0 8px var(--green-glow); } .s11-proof__tag{ margin-left:auto; font-size:10px; letter-spacing:.12em; color:var(--c-ink-3); } /* real platform logo seated in the chrome bar (kept after the traffic dots, before the right-aligned tag) — adds full-colour brand proof, no layout shift */ .s11-proof__logo{ width:15px; height:15px; flex:0 0 auto; margin-left:2px; opacity:.95; filter:drop-shadow(0 1px 4px rgba(0,0,0,.45)); } .s11-proof__body{ display:flex; flex-direction:column; gap:12px; padding:clamp(18px,2vw,24px); } .s11-proof__label{ font-size:11px; letter-spacing:.12em; color:var(--c-ink-3); } .s11-proof__kpi{ font-size:clamp(34px,4.2vw,52px); line-height:1; color:var(--c-ink); text-shadow:0 0 30px rgba(39,245,140,.18); } .s11-proof__kpi--sm{ font-size:clamp(28px,3.4vw,40px); } .s11-proof__foot{ font-size:10px; letter-spacing:.1em; color:var(--c-ink-3); border-top:1px dashed var(--c-line); padding-top:11px; margin-top:2px; } .s11-proof__pair{ display:flex; flex-direction:column; gap:6px; } /* ----- spark line (green current draws + flows per switch) ----------- */ .s11-spark{ width:100%; height:auto; aspect-ratio:240/90; overflow:visible; } .s11-spark .ma-current__track{ stroke:var(--c-line); stroke-width:1.4; } /* the green dashed "current" flows along the same path (foundation handles motion) */ .s11-spark .ma-current__line.s11-spark__flow{ stroke-width:1.6; opacity:.9; } /* solid bright trace draws in on top, per switch */ .s11-spark__draw{ fill:none; stroke:var(--c-accent); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 6px var(--green-glow)); stroke-dasharray:1; stroke-dashoffset:1; opacity:.55; } .s11-spark__head{ fill:var(--c-accent); filter:drop-shadow(0 0 7px var(--green-glow)); opacity:0; } /* draw + reveal head while the panel animates in */ .s11-panel:not([hidden]) .s11-spark__draw{ animation:s11Draw 1s var(--ease-out) .12s forwards; } .s11-panel:not([hidden]) .s11-spark__head{ animation:s11Pop var(--dur-ui) var(--ease-out) .95s forwards; } @keyframes s11Draw{ to{ stroke-dashoffset:0; } } @keyframes s11Pop{ from{ opacity:0; transform:scale(.6); } to{ opacity:1; transform:none; } } .s11-spark__head{ transform-box:fill-box; transform-origin:center; } /* ----- decorative bars (engine fills via data-bars) ------------------ */ .s11-bars{ display:flex; align-items:flex-end; gap:6px; height:64px; } .s11-bars > span{ flex:1; border-radius:4px 4px 2px 2px; background:linear-gradient(180deg,var(--c-accent),var(--green-deep)); box-shadow:0 0 12px -2px var(--green-glow); min-height:6px; } .s11-bars--rise > span:last-child{ background:linear-gradient(180deg,var(--green-bright),var(--c-accent)); } /* ----- semicircle gauge (accountable) -------------------------------- */ .s11-gauge{ display:flex; flex-direction:column; align-items:center; gap:6px; } .s11-gauge svg{ width:min(220px,90%); height:auto; overflow:visible; } .s11-gauge__track{ stroke:var(--c-line); stroke-width:8; stroke-linecap:round; } .s11-gauge__line{ stroke:var(--c-accent); stroke-width:8; stroke-linecap:round; filter:drop-shadow(0 0 8px var(--green-glow)); stroke-dasharray:1; stroke-dashoffset:1; animation:none; } .s11-panel:not([hidden]) .s11-gauge__line{ animation:s11Draw 1.1s var(--ease-out) .15s forwards; } .s11-gauge__pin{ fill:var(--c-accent); filter:drop-shadow(0 0 8px var(--green-glow)); } .s11-gauge__cap{ font-size:10px; letter-spacing:.12em; color:var(--c-ink-3); } /* ----- A/B bars (data-driven) ---------------------------------------- */ .s11-ab{ display:flex; flex-direction:column; gap:9px; } .s11-ab__row{ display:flex; align-items:center; gap:10px; } .s11-ab__k{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; color:var(--c-ink-3); width:14px; flex:none; } .s11-ab__bar{ position:relative; flex:1; height:14px; border-radius:var(--r-pill); background:var(--c-panel); border:1px solid var(--c-line); overflow:hidden; } .s11-ab__bar i{ position:absolute; inset:0 auto 0 0; width:0; border-radius:inherit; transition:width 1s var(--ease-out) .2s; } .s11-ab__bar--a i{ background:linear-gradient(90deg,var(--c-ink-3),var(--c-line-green)); } .s11-ab__bar--b i{ background:linear-gradient(90deg,var(--green-deep),var(--c-accent)); box-shadow:0 0 14px -2px var(--green-glow); } .s11-panel:not([hidden]) .s11-ab__bar i{ width:var(--w); } .s11-ab__win{ font-size:10px; letter-spacing:.1em; color:var(--c-accent); flex:none; } .s11-ab__row--win .s11-ab__k{ color:var(--c-accent); } /* ----- creative thumb (creative-obsessed) ---------------------------- */ .s11-proof__body--media{ gap:14px; } .s11-thumb{ position:relative; aspect-ratio:16/10; border-radius:var(--r-sm); overflow:hidden; border:1px solid var(--c-line); background:var(--c-bg-edge); } .s11-thumb img{ width:100%; height:100%; object-fit:cover; } .s11-thumb.is-empty{ background: repeating-linear-gradient(135deg,rgba(39,245,140,.06) 0 10px,transparent 10px 20px), var(--c-bg-edge); } .s11-thumb__play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:var(--c-accent); color:var(--c-on-accent); box-shadow:0 6px 24px -6px var(--green-glow); padding-left:2px; } .s11-thumb__hook{ position:absolute; left:10px; bottom:10px; right:10px; font-size:11px; letter-spacing:.04em; color:var(--c-ink); background:rgba(4,7,5,.55); backdrop-filter:blur(6px); padding:6px 9px; border-radius:8px; border:1px solid var(--c-line); } /* ----- funnel rail (full-funnel) ------------------------------------- */ .s11-funnel{ display:flex; align-items:center; justify-content:space-between; gap:6px; padding:6px 2px 2px; position:relative; } .s11-funnel::before{ content:""; position:absolute; left:6px; right:6px; top:11px; height:1px; background:linear-gradient(90deg,var(--c-line-green),var(--c-accent)); opacity:.5; } .s11-funnel__step{ position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--c-ink-3); } .s11-funnel__pip{ width:11px; height:11px; border-radius:50%; border:1.5px solid var(--c-line-green); background:var(--c-panel); } .s11-funnel__step--end{ color:var(--c-accent); } .s11-funnel__step--end .s11-funnel__pip{ background:var(--c-accent); border-color:var(--c-accent); box-shadow:0 0 12px var(--green-glow); } /* ===================================================================== TOGGLE RAIL (the "principle selector") ===================================================================== */ .s11-railwrap{ position:relative; border-top:1px solid var(--c-line); background: linear-gradient(180deg,rgba(39,245,140,.04),transparent 60%), var(--c-panel-2); } /* animated green connector rail running across the toggles */ .s11-rail__line{ position:absolute; left:0; right:0; top:0; height:2px; pointer-events:none; z-index:2; background:linear-gradient(90deg, transparent, var(--c-line-green) 12%, var(--c-accent) 50%, var(--c-line-green) 88%, transparent); background-size:240% 100%; opacity:.7; animation:s11Rail 6s linear infinite; box-shadow:0 0 12px var(--green-glow); } @keyframes s11Rail{ to{ background-position:240% 0; } } .s11-rail{ display:grid; grid-template-columns:repeat(8,1fr); } .s11-toggle{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:9px; padding:clamp(20px,2.2vw,30px) clamp(14px,1.4vw,20px); text-align:left; border-right:1px solid var(--c-line); color:var(--c-ink-3); transition:color var(--dur-ui) ease,background var(--dur-ui) ease; isolation:isolate; } .s11-toggle:last-child{ border-right:0; } .s11-toggle::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(39,245,140,.10),transparent); opacity:0; transition:opacity var(--dur-ui) ease; } /* per-toggle highlight underline — grows from left (directional) */ .s11-toggle::after{ content:""; position:absolute; left:0; top:-1px; height:2px; width:100%; background:var(--c-accent); box-shadow:0 0 14px var(--green-glow); transform:scaleX(0); transform-origin:left; transition:transform var(--dur-ui) var(--ease-snap); } .s11-toggle__radio{ position:relative; width:18px; height:18px; border-radius:50%; border:1.6px solid var(--c-line-green); transition:border-color var(--dur-ui) ease,box-shadow var(--dur-ui) ease; } .s11-toggle__radio::after{ content:""; position:absolute; inset:3px; border-radius:50%; background:var(--c-accent); transform:scale(.2); opacity:0; transition:transform var(--dur-ui) var(--ease-snap),opacity var(--dur-micro) ease; box-shadow:0 0 10px var(--green-glow); } .s11-toggle__no{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; color:var(--c-ink-3); opacity:.7; } .s11-toggle__name{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.01em; line-height:1.02; font-size:clamp(14px,1.15vw,17px); } /* hover (fine pointers only) */ @media (hover:hover){ .s11-toggle:hover{ color:var(--c-ink-2); } .s11-toggle:hover .s11-toggle__radio{ border-color:var(--c-accent); } .s11-toggle:hover::before{ opacity:.5; } } /* ACTIVE state — set by engine */ .s11-toggle.is-active{ color:var(--c-ink); background:rgba(39,245,140,.05); } .s11-toggle.is-active::before{ opacity:1; } .s11-toggle.is-active::after{ transform:scaleX(1); } .s11-toggle.is-active .s11-toggle__radio{ border-color:var(--c-accent); box-shadow:0 0 0 4px rgba(39,245,140,.10); } .s11-toggle.is-active .s11-toggle__radio::after{ transform:scale(1); opacity:1; } .s11-toggle.is-active .s11-toggle__no{ color:var(--c-accent); opacity:1; } .s11-toggle.is-active .s11-toggle__name{ color:var(--c-accent); } .s11-toggle:focus-visible{ outline:2px solid var(--c-accent); outline-offset:-2px; } /* swipe hint — only shown when the rail actually scrolls (mobile) */ .s11-rail__hint{ display:none; position:absolute; right:12px; bottom:8px; z-index:3; font-size:10px; letter-spacing:.14em; color:var(--c-ink-3); pointer-events:none; } /* ===================================================================== RESPONSIVE ===================================================================== */ /* tablet — tighten columns */ @media (max-width:1024px){ .s11-panel{ grid-template-columns:1.1fr .9fr; gap:32px; } .s11-stage__rail{ left:55%; } .s11-toggle__name{ font-size:14px; } } /* ~860px: proof dashboard moves above copy, rail becomes horizontal-scroll */ @media (max-width:860px){ .s11-stage{ min-height:0; } .s11-stage__rail{ display:none; } .s11-panel{ grid-template-columns:1fr; gap:24px; align-items:start; } .s11-proof{ order:-1; max-width:420px; } .s11-rail{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(154px,1fr); overflow-x:auto; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent); mask-image:linear-gradient(90deg,#000 88%,transparent); } .s11-rail::-webkit-scrollbar{ display:none; } .s11-toggle{ scroll-snap-align:start; } .s11-rail__hint{ display:block; } } /* phone — clean vertical stack, smaller display word */ @media (max-width:560px){ .s11-selector{ border-radius:var(--r); } .s11-stage{ padding:24px 20px 30px; } .s11-panel__top{ margin-bottom:14px; } .s11-word{ font-size:clamp(38px,12.5vw,58px); filter:drop-shadow(0 0 16px rgba(39,245,140,.18)); } .s11-panel__lead{ font-size:15px; } .s11-points li{ font-size:14px; } .s11-proof{ max-width:none; } .s11-proof__kpi{ font-size:clamp(32px,9vw,42px); } .s11-rail{ grid-auto-columns:minmax(140px,74%); } .s11-toggle{ padding:18px 16px; } } @media (max-width:380px){ .s11-word{ font-size:clamp(32px,11vw,44px); } .s11-rail{ grid-auto-columns:minmax(132px,82%); } .s11-proof__bar{ padding:10px 12px; } } /* ===================================================================== REDUCED MOTION — keep comprehension (draw-in resolves instantly, numbers still count via engine), drop looping + movement. ===================================================================== */ @media (prefers-reduced-motion:reduce){ .s11-panel{ animation:none; } .s11-rail__line{ animation:none; } .s11-spark__draw, .s11-gauge__line{ stroke-dashoffset:0; animation:none; } .s11-spark__head{ opacity:1; animation:none; } .s11-ab__bar i{ transition:none; } .s11-panel:not([hidden]) .s11-ab__bar i{ width:var(--w); } } /* ===================================================================== SECTION 12 — FINAL CTA (dark / cinema). Scoped to .s12. The page's most cinematic close: a live growth command-center dashboard, an OS "spine" pipeline carrying the green current, a conversion proof strip, dual CTA and a scrub statement. All colour reads from the ma-cinema contextual contract — nothing hardcoded. ===================================================================== */ .s12{ text-align:center; padding-top:clamp(110px,14vw,180px); padding-bottom:clamp(110px,14vw,190px); } .s12-inner{display:flex;flex-direction:column;align-items:center} /* ---------- AMBIENT BACKGROUND --------------------------------------- */ .s12-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden} .s12 .ma-orb--1{opacity:.42;top:-220px;left:-160px} .s12 .ma-orb--2{opacity:.34;bottom:-220px;right:-140px} /* central vertical beam of green light behind the title */ .s12-beam{ position:absolute;top:-8%;left:50%;width:min(760px,92vw);height:78%; transform:translateX(-50%); background: radial-gradient(58% 50% at 50% 12%,rgba(39,245,140,.18),transparent 70%), conic-gradient(from 180deg at 50% 0%,transparent 42%,rgba(39,245,140,.12) 50%,transparent 58%); filter:blur(8px); -webkit-mask-image:linear-gradient(#000,transparent 86%); mask-image:linear-gradient(#000,transparent 86%); animation:s12Beam 9s ease-in-out infinite; } @keyframes s12Beam{0%,100%{opacity:.7}50%{opacity:1}} .s12-grid{ position:absolute;inset:0; background-image: linear-gradient(var(--c-line) 1px,transparent 1px), linear-gradient(90deg,var(--c-line) 1px,transparent 1px); background-size:72px 72px; -webkit-mask-image:radial-gradient(ellipse 70% 56% at 50% 38%,#000,transparent 76%); mask-image:radial-gradient(ellipse 70% 56% at 50% 38%,#000,transparent 76%); opacity:.34; } .s12-vignette{ position:absolute;inset:0; background:radial-gradient(ellipse 120% 80% at 50% 30%,transparent 55%,var(--c-bg-edge) 100%); } /* ---------- HEADER --------------------------------------------------- */ .s12-head{margin-bottom:clamp(44px,6vw,64px);max-width:980px} .s12-title{margin-top:6px} .s12-title .ma-word--grad{display:inline-block} .s12-lead{margin-top:24px;color:var(--c-ink-2)} /* ---------- LEAD FORM (replaces the old command-center CTA) ---------- */ .s12.ma-lf{padding-bottom:clamp(96px,12vw,150px)} .ma-lf__inner{max-width:960px} .s12-head.ma-head--center{margin-bottom:clamp(34px,4.6vw,54px)} .ma-lf__card{ position:relative;width:100%;max-width:880px;margin:0 auto;text-align:left; border-radius:var(--r-lg); background:linear-gradient(180deg,rgba(18,24,23,.9),rgba(8,11,10,.92)); border:1px solid var(--c-line); box-shadow:var(--c-shadow),inset 0 1px 0 rgba(255,255,255,.05); padding:clamp(22px,3.4vw,46px); overflow:hidden;isolation:isolate; } .ma-lf__glow{position:absolute;inset:0;z-index:0;pointer-events:none; background:radial-gradient(130% 80% at 50% -12%,rgba(39,245,140,.12),transparent 58%)} .ma-lf__card .ma-accent{z-index:0} .ma-lf__form,.ma-lf__done{position:relative;z-index:2} .ma-lf__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.7vw,20px)} .ma-lf__field{display:flex;flex-direction:column;gap:8px;min-width:0} .ma-lf__field--full{grid-column:1 / -1} .ma-lf__label{font-family:var(--font-mono);font-size:12.5px;font-weight:600; letter-spacing:.1em;text-transform:uppercase;color:var(--c-ink-2);display:flex;align-items:center;gap:6px} .ma-lf__req{color:var(--c-accent)} .ma-lf__input{ width:100%;font-family:var(--font-body);font-size:16px;color:var(--c-ink);line-height:1.4; background:rgba(5,7,6,.55);border:1px solid var(--c-line);border-radius:var(--r-sm); padding:13px 15px;-webkit-appearance:none;appearance:none; transition:border-color var(--dur-ui) ease,box-shadow var(--dur-ui) ease,background var(--dur-ui) ease; } .ma-lf__input::placeholder{color:var(--c-ink-3)} .ma-lf__input:hover{border-color:var(--c-line-green)} .ma-lf__input:focus{outline:none;border-color:var(--c-accent); box-shadow:0 0 0 3px rgba(39,245,140,.15);background:rgba(8,12,10,.85)} .ma-lf__input.is-invalid{border-color:#ff8d7a;box-shadow:0 0 0 3px rgba(255,141,122,.16)} .ma-lf__textarea{resize:vertical;min-height:108px;line-height:1.55} .ma-lf__selectwrap{position:relative} .ma-lf__select{cursor:pointer;padding-right:42px} .ma-lf__select.is-empty{color:var(--c-ink-3)} .ma-lf__caret{position:absolute;right:15px;top:50%;transform:translateY(-50%); color:var(--c-ink-3);pointer-events:none} .ma-lf__selectwrap:hover .ma-lf__caret{color:var(--c-accent)} .ma-lf__select option{color:#0A0C0B} .ma-lf__hp{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden} .ma-lf__actions{margin-top:clamp(20px,2.6vw,30px);display:flex;flex-direction:column;align-items:center;gap:16px} .ma-lf__submit{min-width:286px;justify-content:center} .ma-lf__submit[disabled]{opacity:.62;cursor:progress} .ma-lf__submit.is-sending{pointer-events:none} .ma-lf__assure{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:13px; font-family:var(--font-mono);font-size:12.5px;letter-spacing:.03em;color:var(--c-ink-3);text-align:center} .ma-lf__assure span{display:inline-flex;align-items:center;gap:7px;white-space:nowrap} .ma-lf__assure span svg{color:var(--c-accent);flex:none} .ma-lf__sep{width:4px;height:4px;border-radius:50%;background:var(--c-line)} .ma-lf__error{margin-top:18px;text-align:center;color:#ff9d8c;font-size:14.5px;font-weight:500} /* success state */ .ma-lf__done{text-align:center;padding:clamp(20px,4vw,46px) 8px; animation:maRevealIn .5s var(--ease-out) both} .ma-lf__done-ic{display:inline-grid;place-items:center;width:66px;height:66px;border-radius:50%; color:#04140C;background:var(--green); box-shadow:0 0 0 1px rgba(255,255,255,.2),0 12px 44px -8px var(--green-glow);margin-bottom:22px; animation:maBreath 3.4s var(--ease-out) infinite} .ma-lf__done-h{font-family:var(--font-display);font-weight:700;text-transform:uppercase; letter-spacing:.01em;font-size:clamp(24px,3.6vw,38px);color:var(--c-ink)} .ma-lf__done-p{margin:14px auto 0;max-width:540px;color:var(--c-ink-2);font-size:16px;line-height:1.6} .ma-lf__done-p span{color:var(--c-accent);font-weight:600} /* ===================================================================== */ /* RESPONSIVE — LEAD FORM */ /* ===================================================================== */ @media (max-width:640px){ .ma-lf__grid{grid-template-columns:1fr} .ma-lf__card{padding:20px 16px} .ma-lf__submit{width:100%;min-width:0} .ma-lf__assure{gap:10px;font-size:12px} } @media (max-width:520px){ .s12.ma-lf{padding-top:clamp(84px,18vw,110px)} } @media (prefers-reduced-motion:reduce){ .s12-beam{animation:none} .ma-lf__done-ic{animation:none} } /* ===================================================================== META ADS — CINEMATIC VIDEO HERO (s1 redesign · 2026-06-30) The brand film is the star: full-bleed, bright, uncovered. The headline sits at the top and fades / lifts away on scroll; one quiet tagline and a small sound toggle are the only chrome. Nothing covers the centre. ===================================================================== */ .ma-hero.ma-hero--video{padding:0!important;min-height:100vh;min-height:100svh;overflow:hidden;display:block} .ma-hero--video::before,.ma-hero--video::after{display:none!important} /* kill cinema feather bands */ .ma-hero--video .s1-bg{display:none} /* no orbs/beams behind the film */ .s1v{position:relative;width:100%;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:#04070A;isolation:isolate} .s1v__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;background:#04070A;display:block;border:0} /* whisper-light readability scrims — the middle ~56% of the film stays 100% bright */ .s1v__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background: linear-gradient(to bottom, rgba(3,6,9,.22) 0%, rgba(3,6,9,0) 14%), /* whisper top — title legibility, video stays bright */ linear-gradient(to top, rgba(3,6,9,.48) 0%, rgba(3,6,9,0) 26%)} /* the only real (bottom) gradient */ /* TITLE — top, over the film */ .s1v__head{position:absolute;left:0;right:0;top:clamp(128px,17vh,184px);z-index:3;padding:0 var(--gutter); text-align:center;will-change:transform,opacity;transform-origin:50% 0; transition:opacity .25s var(--ease-out),transform .25s var(--ease-out)} .s1v__title{margin:0 auto;max-width:17ch;font-family:var(--font-display);font-weight:700;text-transform:uppercase; letter-spacing:.01em;line-height:.95;font-size:clamp(34px,6vw,84px);color:#fff; text-shadow:0 2px 42px rgba(0,0,0,.52),0 2px 6px rgba(0,0,0,.44)} .s1v__accent{color:var(--green);text-shadow:0 0 34px rgba(39,245,140,.42),0 2px 22px rgba(0,0,0,.38)} /* TAGLINE — one quiet line, bottom */ .s1v__tagline{position:absolute;left:0;right:0;bottom:clamp(26px,5vh,52px);z-index:3;margin:0 auto; max-width:780px;padding:0 calc(var(--gutter) + 96px);text-align:center; font-family:var(--font-body);font-weight:500;font-size:clamp(13px,1.3vw,16px);line-height:1.5; letter-spacing:.005em;color:rgba(255,255,255,.92);text-shadow:0 1px 18px rgba(0,0,0,.6); transition:opacity .25s var(--ease-out)} /* SOUND TOGGLE — small, bottom-right */ .s1v__sound{position:absolute;right:clamp(16px,3vw,34px);bottom:clamp(20px,4vh,40px);z-index:4; display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 15px;border-radius:999px;cursor:pointer; font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#fff; background:rgba(8,12,11,.40);border:1px solid rgba(255,255,255,.22); -webkit-backdrop-filter:blur(10px) saturate(130%);backdrop-filter:blur(10px) saturate(130%); transition:background .2s var(--ease-out),border-color .2s var(--ease-out),color .2s var(--ease-out),transform .2s var(--ease-out)} .s1v__sound:hover{background:rgba(8,12,11,.62);border-color:rgba(39,245,140,.55);transform:translateY(-1px)} .s1v__sound:focus-visible{outline:2px solid var(--green);outline-offset:3px} .s1v__sound.is-on{border-color:rgba(39,245,140,.6);color:var(--green-bright)} .s1v__sound-ic{display:inline-flex;width:16px;height:16px;flex:none} .s1v__sound-ic svg{display:block} .s1v__sound .s1v__ic-on{display:none} .s1v__sound.is-on .s1v__ic-off{display:none} .s1v__sound.is-on .s1v__ic-on{display:inline-flex} .s1v__sound-tx{line-height:1} /* TRUSTED-BY strip — sits BELOW the film, never over it */ .s1-trusted.s1v-trusted{margin:0!important;padding:clamp(26px,4vw,40px) 0 clamp(30px,4.6vw,48px); border-top:1px solid rgba(255,255,255,.07);background:#05080A} @media (max-width:1199px){ .s1v__head{top:clamp(104px,14vh,140px)} } /* tablet & below: lift the tagline clear ABOVE the bottom-right sound button (no horizontal-reserve guessing) */ @media (max-width:900px){ .s1v__tagline{padding:0 22px;bottom:clamp(78px,12vh,96px);max-width:560px} } @media (max-width:760px){ .s1v__head{top:clamp(90px,13vh,120px)} .s1v__title{font-size:clamp(29px,8.6vw,46px);max-width:15ch} .s1v__tagline{bottom:78px;font-size:12.5px;max-width:520px} .s1v__sound{right:14px;bottom:16px;height:36px;padding:0 12px;gap:7px;font-size:10px} } /* short landscape phones: keep the headline and tagline from crowding in limited height */ @media (max-width:760px) and (max-height:480px){ .s1v__head{top:clamp(58px,9vh,84px)} .s1v__title{font-size:clamp(22px,7vw,32px)} .s1v__tagline{bottom:54px;font-size:11px;max-width:460px} .s1v__sound{bottom:12px;height:32px;padding:0 11px} } @media (prefers-reduced-motion: reduce){ .s1v__head{transition:opacity .2s linear} } /* ===================================================================== SECTION CTA — a section-relevant call-to-action at the foot of each content section; every one scrolls to the #ma-final lead form. Adapts to cinema (dark) and system (white) sections via the contextual tokens. ===================================================================== */ .s-cta{margin-top:clamp(34px,5vw,60px);padding-top:clamp(30px,4.6vw,52px); display:flex;flex-direction:column;align-items:center;text-align:center; gap:clamp(15px,1.7vw,21px);border-top:1px solid var(--c-line)} .s-cta__line{margin:0;max-width:640px;font-family:var(--font-display);font-weight:600; font-size:clamp(19px,2.5vw,27px);line-height:1.24;letter-spacing:.01em;color:var(--c-ink)} .s-cta__btn{align-self:center} @media (max-width:600px){ .s-cta__line{font-size:clamp(18px,5.2vw,22px)} } /* ===================================================================== S5 COMMAND CENTER — refreshed tiles (2026-06-30) Growth-Operating-System flow · readable campaign-health bars · clearer calendar. Dark cinema + green; reuses the panel/chip/health primitives. ===================================================================== */ /* ---- Core tile becomes a titled vertical FLOW (overrides .s5-core grid) ---- */ .s5-core.s5-osmap{ display:flex; flex-direction:column; align-items:stretch; place-items:stretch; gap:clamp(12px,1.4vw,16px); padding:clamp(14px,1.6vw,18px); text-align:left; } .s5-flow{ list-style:none; margin:0; padding:0; position:relative; flex:1 1 auto; display:flex; flex-direction:column; justify-content:space-between; gap:clamp(9px,1.1vw,15px); } /* the flowing "current" line linking every step badge */ .s5-flow::before{ content:""; position:absolute; left:18px; top:22px; bottom:22px; width:2px; border-radius:2px; background:linear-gradient(180deg, var(--c-line-green) 0%, var(--green) 50%, var(--c-line-green) 100%); background-size:100% 220%; animation:s5flow 3.4s linear infinite; z-index:0; } @keyframes s5flow{ 0%{ background-position:0 120%; } 100%{ background-position:0 -120%; } } .s5-step{ position:relative; display:grid; grid-template-columns:38px 1fr auto; align-items:center; gap:12px; } .s5-step__badge{ position:relative; z-index:1; width:38px; height:38px; border-radius:11px; flex:none; display:grid; place-items:center; color:var(--green); background:radial-gradient(circle at 50% 32%, rgba(39,245,140,.17), var(--c-panel-2) 78%); border:1px solid var(--c-line-green); box-shadow:0 0 18px -7px var(--green-glow); } .s5-step__badge .ma-logo{ width:19px; height:19px; } .s5-step__badge--duo .ma-logo{ width:15px; height:15px; } .s5-step__badge--duo .ma-logo:first-child{ transform:translateX(3px); } .s5-step__badge--duo .ma-logo:last-child{ transform:translateX(-3px); } .s5-step__body{ display:flex; flex-direction:column; gap:1px; min-width:0; } .s5-step__body b{ font-family:var(--font-display); font-weight:600; font-size:14px; letter-spacing:.01em; color:var(--c-ink); } .s5-step__body em{ font-style:normal; font-size:11.5px; line-height:1.35; color:var(--c-ink-2); } .s5-step__tag{ flex:none; font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:.02em; color:var(--green); white-space:nowrap; padding:4px 9px; border-radius:var(--r-pill); background:rgba(39,245,140,.08); border:1px solid var(--c-line-green); } .s5-step--win .s5-step__badge{ background:radial-gradient(circle at 50% 32%, rgba(39,245,140,.34), var(--c-panel-2) 82%); border-color:var(--green); box-shadow:0 0 24px -6px var(--green-glow); } .s5-step--win .s5-step__body b{ color:var(--green); } .s5-step__tag--win{ color:var(--c-on-accent); background:var(--green); border-color:transparent; font-weight:700; } .s5-osmap__foot{ margin:0; padding-top:2px; text-align:center; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-3); } /* ---- Calendar: readable open cells + legend ---- */ .s5-slot:not(.is-book){ background:var(--c-panel-2); border-color:var(--c-line); background-image:radial-gradient(circle at 50% 50%, var(--c-line-green) 1.5px, transparent 1.7px); } .s5-cal__legend{ display:flex; gap:16px; margin-top:1px; } .s5-lg{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:10px; letter-spacing:.03em; color:var(--c-ink-2); } .s5-lg::before{ content:""; width:11px; height:11px; border-radius:3px; flex:none; } .s5-lg--book::before{ background:linear-gradient(160deg, var(--green), var(--green-deep-2)); box-shadow:0 3px 8px -3px var(--green-glow); } .s5-lg--open::before{ background:var(--c-panel-2); border:1px solid var(--c-line); } /* ---- Campaign health: Looker caption row ---- */ .s5-health__cap{ display:flex; align-items:center; gap:6px; color:var(--c-ink-3); font-size:11px; } .s5-health__cap .ma-logo{ width:13px; height:13px; } /* ---- CRM: lift lead subtext to readable contrast ---- */ .s5-lead__main em{ color:var(--c-ink-2); } @media (prefers-reduced-motion: reduce){ .s5-flow::before{ animation:none; } } /* Packages (s9) — tighter feature spacing so the longer deliverable lists fit the screen (2026-07-02) */ .s9 .s9-feats{ gap:9px; margin-bottom:20px; } .s9 .s9-price{ margin:2px 0 18px; padding:16px 0 18px; } /* Packages (s9) — spin the popular cards gradient border IN PLACE (@property) so the taller cards glow cannot sweep/spill onto the neighbouring cards (2026-07-02). */ @property --s9ang { syntax: ""; initial-value: 0deg; inherits: true; } .s9 .s9-borderglow{ background:conic-gradient(from var(--s9ang), var(--green-deep) 0deg, var(--green) 70deg, var(--green-bright) 130deg, rgba(39,245,140,.25) 200deg, var(--green-deep-2) 280deg, var(--green-deep) 360deg); animation:s9SpinAngle 6s linear infinite; } .s9 .s9-borderglow::after{ background:conic-gradient(from var(--s9ang), var(--green-deep) 0deg, var(--green) 70deg, var(--green-bright) 130deg, rgba(39,245,140,.25) 200deg, var(--green-deep-2) 280deg, var(--green-deep) 360deg); } @keyframes s9SpinAngle{ to{ --s9ang:360deg; } } @media (prefers-reduced-motion: reduce){ .s9 .s9-borderglow{ animation:none; } } /* ===================================================================== NEUE HAAS GROTESK — licensed typography (2026-07-02). Replaces the Google-Fonts Space Grotesk (display) + Inter (body). JetBrains Mono is kept for micro-labels only. Font-family + weight only — line-heights and letter-spacing stay exactly as authored (no layout/spacing changes). ===================================================================== */ @font-face{font-family:"Neue Haas Grotesk Display Pro";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/NeueHaasGroteskDisplayPro75Bold.woff2) format("woff2"),url(fonts/NeueHaasGroteskDisplayPro75Bold.woff) format("woff");} @font-face{font-family:"Neue Haas Grotesk Display Pro";font-style:normal;font-weight:900;font-display:swap;src:url(fonts/NeueHaasGroteskDisplayPro95Black.woff2) format("woff2"),url(fonts/NeueHaasGroteskDisplayPro95Black.woff) format("woff");} @font-face{font-family:"Neue Haas Grotesk Text Pro";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/NeueHaasGroteskTextPro55Roman.woff2) format("woff2"),url(fonts/NeueHaasGroteskTextPro55Roman.woff) format("woff");} @font-face{font-family:"Neue Haas Grotesk Text Pro";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/NeueHaasGroteskTextPro75Bold.woff2) format("woff2"),url(fonts/NeueHaasGroteskTextPro75Bold.woff) format("woff");} /* hero title = Neue Haas Grotesk Display Pro 95 Black */ .s1v__title,.ma-hero h1{ font-weight:900; } /* primary buttons = Neue Haas Grotesk Text Pro 75 Bold (previously JetBrains Mono) */ .ma-btn{ font-family:var(--font-body); font-weight:700; } /* navigation = Neue Haas Grotesk Text Pro 75 Bold (per-page .ma-nav + injected global .gcmnav) */ .ma-nav a,.gcmnav-menu a,.gcmnav-cta,.gcmnav-brand,.gcmnav-overlay-links a,.gcmnav-overlay-cta{ font-family:var(--font-body)!important; } /* ===================================================================== READABILITY PASS (2026-07-02) — Neue Haas needs air. Uppercase display titles had NEGATIVE tracking (caps + word gaps crammed together); flipped to gentle positive tracking above. Here: a touch more line-height on the reading copy so it's comfortable for homeowners / older readers. Typography only — font sizes, layout, colours, spacing between elements all unchanged. ===================================================================== */ body{ line-height:1.65; } .ma-lead{ line-height:1.62; } .ma-sub{ line-height:1.62; } p,li,dd, .s2-feat__p,.s2-card__line,.s4-desc,.s6-detail__lead,.s8-pillar__d, .s10-card__unit,.s11-panel__lead,.s12-lead{ line-height:1.6; } .s5-msg__b{ line-height:1.55; } .s9-feats li{ line-height:1.5; } /* keep the big all-caps hero from over-widening at positive tracking */ .s1v__title{ letter-spacing:.004em; } /* ===================================================================== TYPOGRAPHY SPACING v2 (2026-07-02) — real breathing room. Neue Haas is a tightly-fitted grotesk; ALL-CAPS titles especially need generous tracking + word-spacing or letters and words fuse. Differentiated: big tracking on uppercase titles, moderate on the huge hero, gentle baseline on body copy. Typography only — sizes / layout / colours untouched. ===================================================================== */ /* baseline: open up letters + words everywhere. Elements with their own explicit letter-spacing (mono labels .14em, buttons .08em, titles below) keep theirs; this only reaches the un-tracked body copy + gives every word gap a little air. */ body{ letter-spacing:0.007em; word-spacing:0.05em; } /* uppercase DISPLAY titles — generous tracking + clear word gaps (all-caps needs it) */ .ma-title,.ma-banner,.s2-feat__h,.s2-card__label,.s3-cta__title,.s4-title,.s5-core__label,.s6-tab__name,.s6-detail__title,.s6-mini h4,.s6-cta__title,.s8-pillar__t,.s8-core__title,.s9-name,.s9-roi__title,.s9-closer__big,.s10-w--pave,.s11-toggle__name,.ma-lf__done-h{ letter-spacing:0.045em !important; word-spacing:0.14em !important; } /* the huge Black hero — a touch less so it never over-widens/overflows */ .s1v__title{ letter-spacing:0.024em !important; word-spacing:0.10em !important; }