:root{ --bg:#000000; --bg-elevated:#0a0a0a; --bg-soft:#0e0e0e; --line:#232323; --line-soft:#1a1a1a; --text:#eef0ee; --text-dim:#8fa39c; --mint:#7fe3c3; --mint-bright:#9df5d8; --mint-dim:#5bbfa1; --mint-deep:#1f3d34; --glow-color: rgba(127,227,195,0.09); /* Sora (the display/heading font) has no Greek glyphs — Greek text silently falls back to the browser's default serif otherwise. Manrope covers Greek natively, shares Sora's geometric, upright character, and comes in the same weights (400–800), so Greek pages swap to it here without touching any individual heading rule (all 27 of them now reference this variable instead of the literal font name). */ --font-display: 'Sora'; /* --- layout system --- */ --pad-inline: clamp(20px, 5vw, 96px); /* fluid page gutter, both sides */ --content-max: 1360px; /* centered frame for main content */ --outer-max: 1920px; /* full-bleed cap (header/footer) */ --hover: rgba(255,255,255,0.05); --on-mint:#04130d; --cookie-left:20px; --cookie-bottom:20px; --cookie-size:46px; } html[lang="el"]{ --font-display: 'Manrope'; } /* ============================================================ LIGHT THEME — activated by data-theme="light" on . The whole site is variable-driven, so overriding the tokens here re-skins almost everything; the few rules below patch surfaces that hardcode a dark colour. ============================================================ */ :root[data-theme="light"]{ --bg:#f2f5f3; --bg-elevated:#ffffff; --bg-soft:#ffffff; --line:#dfe5e1; --line-soft:#e9edea; --text:#0f1613; --text-dim:#54685f; --mint:#0f9a78; --mint-bright:#0bb48b; --mint-dim:#0b795d; --mint-deep:#d6f3ea; --glow-color: rgba(15,154,120,0.10); --hover: rgba(0,0,0,0.045); --on-mint:#ffffff; color-scheme:light; } :root[data-theme="light"] body::before{opacity:0.02;} :root[data-theme="light"] header{background:rgba(255,255,255,0.80);} :root[data-theme="light"] .mobile-menu{background:rgba(248,250,249,0.99);} :root[data-theme="light"] .form-row input, :root[data-theme="light"] .form-row select, :root[data-theme="light"] .form-row textarea{background:#ffffff;} /* logo swap: white glyph on dark, black glyph on light */ .logo .logo-dark{display:none;} :root[data-theme="light"] .logo .logo-light{display:none;} :root[data-theme="light"] .logo .logo-dark{display:block;} :root[data-theme="light"] .logo img{filter:none;} *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} body{ background:var(--bg); color:var(--text); font-family:'Inter',sans-serif; font-size:17px; font-weight:500; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:clip; position:relative; } /* film-grain premium texture */ body::before{ content:"";position:fixed;inset:0;pointer-events:none;z-index:2;opacity:0.035;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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* cursor glow layer */ #glow{position:fixed;top:0;left:0;width:300px;height:300px;pointer-events:none;z-index:1;background:radial-gradient(150px circle at center, var(--glow-color), transparent 48%);will-change:transform;transform:translate3d(-9999px,-9999px,0);} h1,h2,h3,.display{font-family:var(--font-display),sans-serif;letter-spacing:-0.02em;} .mono{font-family:'Inter',sans-serif;font-weight:700;letter-spacing:0.03em;text-transform:uppercase;} a{color:inherit;text-decoration:none;} .wrap{max-width:var(--content-max);margin:0 auto;padding:0 var(--pad-inline);position:relative;z-index:3;} /* Chrome stays full-bleed: the footer keeps the edge-to-edge width. */ footer .wrap{max-width:var(--outer-max);} a:focus-visible,button:focus-visible{outline:2px solid var(--mint);outline-offset:3px;} @media (prefers-reduced-motion: reduce){ *{animation:none !important;transition:none !important;} } /* reveal-on-scroll */ .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);} .reveal.in{opacity:1;transform:translateY(0);} .reveal.d1{transition-delay:.08s;} .reveal.d2{transition-delay:.16s;} .reveal.d3{transition-delay:.24s;} .reveal.d4{transition-delay:.32s;} /* HEADER */ header{ position:sticky;top:0;z-index:50; background:rgba(0,0,0,0.72); backdrop-filter:blur(14px) saturate(140%); border-bottom:1px solid var(--line-soft); } .headbar{display:flex;align-items:center;justify-content:space-between;padding:12px var(--pad-inline);max-width:var(--outer-max);margin:0 auto;position:relative;z-index:3;} /* Center the main menu: equal-flex logo + actions columns push nav to the true header centre. nav stays unpositioned so the mega menu still anchors to the header at full width. */ .logo{flex:1 1 0;min-width:0;} .headbar nav{flex:0 1 auto;justify-content:center;} .header-actions{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:flex-end;} .header-actions .portal-btn{margin-left:16px;} .header-actions .hamburger{margin-left:25px;} @media (max-width:860px){ .logo{flex:0 0 auto;} .header-actions{flex:0 0 auto;} .header-actions .nav-cta,.header-actions .portal-btn{display:none;} } /* NOTE: .lang-float / .theme-float positioning lives INLINE in header.php (cache-proof), so it applies even when a minified CSS bundle is stale. */ .logo{display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-weight:700;font-size:19px;} .logo img{height:58px;width:auto;display:block;filter:drop-shadow(0 0 14px rgba(127,227,195,0.25));} nav{display:flex;gap:6px;align-items:center;} nav a{font-size:15px;font-weight:600;letter-spacing:-0.01em;color:var(--text-dim);transition:color .2s, background .2s;position:relative;} nav a::after{display:none;} nav > a,.nav-item-mega > a{padding:9px 13px;border-radius:9px;display:inline-flex;align-items:center;gap:5px;} nav > a:hover,.nav-item-mega:hover > a{color:var(--text);background:var(--hover);} nav a.current{color:var(--mint);} .nav-cta{background:var(--mint);border:none;border-radius:10px;padding:10px 18px;font-size:14px;font-weight:700;color:var(--on-mint)!important;transition:transform .2s, box-shadow .2s, background .2s;margin-left:6px;} .lang-switch{display:flex;align-items:center;gap:6px;font-family:'Inter';font-weight:700;font-size:12px;margin-left:28px;} .lang-switch a{color:var(--text-dim);transition:color .2s;} .lang-switch a:hover,.lang-switch a.current{color:var(--mint);} .lang-switch .lang-sep{color:var(--line);} /* ---- Light / Dark segmented pill toggle ---- */ .theme-toggle{ position:relative;display:inline-flex;align-items:center;gap:0; margin-left:20px;padding:4px;border-radius:999px; background:var(--bg-soft);border:1px solid var(--line); box-shadow:inset 0 1px 2px rgba(0,0,0,0.25); } :root[data-theme="light"] .theme-toggle{box-shadow:inset 0 1px 2px rgba(0,0,0,0.06);} .theme-toggle .tt-thumb{ position:absolute;top:4px;left:4px;height:calc(100% - 8px);width:calc(50% - 4px); border-radius:999px;background:var(--mint-deep); border:1px solid var(--mint-dim); transition:transform .3s cubic-bezier(.16,1,.3,1);z-index:0; } :root[data-theme="light"] .theme-toggle .tt-thumb{transform:translateX(0);} :root[data-theme="dark"] .theme-toggle .tt-thumb{transform:translateX(100%);} .theme-toggle .tt-opt{ position:relative;z-index:1;display:inline-flex;align-items:center;gap:5px; padding:6px 12px;font-family:'Inter';font-size:12px;font-weight:700; color:var(--text-dim);background:none;border:none;cursor:pointer; transition:color .25s;line-height:1;user-select:none;letter-spacing:0.01em; } .theme-toggle .tt-opt svg{width:13px;height:13px;display:block;} :root[data-theme="light"] .theme-toggle .tt-light{color:var(--mint-dim);} :root[data-theme="dark"] .theme-toggle .tt-dark{color:var(--mint);} .theme-toggle .tt-opt:hover{color:var(--text);} /* mobile-menu variant */ .mm-theme-toggle{margin:24px 0 0;margin-left:0;} /* --- my.wdlab.gr client-portal button (waiting / "soon" state) --- */ .portal-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:9px 14px;font-family:'Inter';font-size:14px;font-weight:600;color:var(--text-dim);transition:color .2s, border-color .2s, background .2s;white-space:nowrap;} .portal-btn:hover{color:var(--text);border-color:var(--mint-dim);} .portal-btn .portal-dot{width:7px;height:7px;border-radius:50%;background:var(--mint);flex:0 0 auto;animation:portalPulse 2.4s ease-out infinite;} .portal-btn.is-soon{cursor:default;pointer-events:none;opacity:0.85;} .portal-soon{font-family:'Inter';font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--mint);background:var(--mint-deep);border:1px solid var(--mint-dim);border-radius:999px;padding:3px 7px;line-height:1;} @keyframes portalPulse{0%{box-shadow:0 0 0 0 rgba(127,227,195,0.45);}70%{box-shadow:0 0 0 6px rgba(127,227,195,0);}100%{box-shadow:0 0 0 0 rgba(127,227,195,0);}} .mm-portal{display:inline-flex;margin:24px 0 0;} /* Turnstile challenge wrapper — only ever rendered for a flagged client, so normal users never see it. Reserve space to avoid layout shift; the widget itself is themed through its supported data-theme param (no tampering). */ .wdlab-turnstile{margin:18px 0;min-height:66px;} .wdlab-turnstile .cf-turnstile{display:inline-block;max-width:100%;} .mm-lang-switch{display:flex;gap:8px;align-items:center;font-family:'Inter';font-weight:700;font-size:15px;margin-top:20px;} .mm-lang-switch a{color:var(--text-dim);transition:color .2s;} .mm-lang-switch a:hover,.mm-lang-switch a.current{color:var(--mint);} .mm-lang-switch .lang-sep{color:var(--line);} /* Portfolio */ .filter-bar{display:flex;gap:10px;flex-wrap:wrap;padding:8px 0 0;} .filter-btn{ background:none;border:1px solid var(--line);color:var(--text-dim);font-family:'Inter';font-weight:700; font-size:13px;letter-spacing:0.02em;padding:10px 18px;border-radius:24px;cursor:pointer;transition:all .25s; } .filter-btn:hover{border-color:var(--mint);color:var(--text);} .filter-btn.active{background:var(--mint);color:#0a1512;border-color:var(--mint);} .port-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:40px 0 20px;} .port-card{ border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--bg-soft); transition:transform .35s cubic-bezier(.16,1,.3,1), border-color .3s, box-shadow .35s;text-decoration:none;display:block; } .port-thumb{ height:180px;background:linear-gradient(135deg,var(--bg-elevated),var(--bg-soft)); display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;border-bottom:1px solid var(--line); } .port-thumb img{width:100%;height:100%;object-fit:cover;display:block;} .port-thumb .mono-mark{font-family:'JetBrains Mono';font-size:30px;color:var(--mint);opacity:0.4;} .port-info{padding:22px 24px;transition:background .3s;position:relative;} .port-info h3{font-size:18px;font-weight:700;margin-bottom:8px;color:var(--text);transition:color .3s;} .port-info p{color:var(--text-dim);font-size:14px;font-weight:500;margin-bottom:14px;line-height:1.6;transition:color .3s;} .port-tag{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.02em;color:var(--mint-dim);border:1px solid var(--mint-deep);border-radius:5px;padding:4px 9px;transition:color .3s, border-color .3s;} .port-tags{display:flex;gap:8px;flex-wrap:wrap;} @media (max-width:960px){.port-grid{grid-template-columns:1fr 1fr;}} @media (max-width:600px){.port-grid{grid-template-columns:1fr;}} .nav-cta::after{display:none;} /* HERO */ .hero{padding:60px 0 60px;display:grid;grid-template-columns:1.1fr 0.9fr;gap:40px;align-items:center;min-height:calc(100vh - 71px);} .eyebrow{color:var(--mint);font-size:13px;font-weight:600;display:flex;align-items:center;gap:10px;margin-bottom:24px;} .eyebrow::before{content:"";width:24px;height:1px;background:var(--mint);animation:extend 1.2s cubic-bezier(.16,1,.3,1) .3s both;} @keyframes extend{from{width:0;}to{width:24px;}} .hero h1{font-size:76px;font-weight:800;line-height:1.02;margin-bottom:26px;} .hero h1 .word{display:inline-block;overflow:hidden;vertical-align:top;} .hero h1 .word span{display:inline-block;animation:riseIn .9s cubic-bezier(.16,1,.3,1) both;} .hero h1 span.mint{color:var(--mint);background:linear-gradient(90deg,var(--mint-bright),var(--mint));-webkit-background-clip:text;background-clip:text;} @keyframes riseIn{from{transform:translateY(110%);}to{transform:translateY(0);}} .hero p.lede{color:var(--text-dim);font-size:19px;font-weight:500;max-width:480px;margin-bottom:34px;opacity:0;animation:fadeUp .8s cubic-bezier(.16,1,.3,1) .7s both;} @keyframes fadeUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}} .btn-row{display:flex;gap:14px;opacity:0;animation:fadeUp .8s cubic-bezier(.16,1,.3,1) .9s both;} .btn{position:relative;display:inline-flex;align-items:center;gap:8px;padding:16px 30px;border-radius:8px;font-size:15px;font-weight:700;transition:transform .2s cubic-bezier(.16,1,.3,1), box-shadow .3s, border-color .25s, color .25s;overflow:hidden;isolation:isolate;background:none;-webkit-appearance:none;appearance:none;font-family:inherit;cursor:pointer;} .btn-primary{background:var(--mint);color:#0a1512;} .btn-primary::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(255,255,255,0.5),transparent);transform:translateX(-120%);transition:transform .6s;z-index:-1;} .btn-primary:hover::before{transform:translateX(120%);} .btn-primary:hover{transform:translateY(-3px);box-shadow:0 14px 30px -10px rgba(127,227,195,0.55);} .btn-ghost{border:1px solid var(--line);color:var(--text);} .btn-ghost:hover{border-color:var(--mint);color:var(--mint);transform:translateY(-3px);box-shadow:0 10px 24px -12px rgba(127,227,195,0.35);} /* SIGNATURE flock with parallax */ .flock-wrap{position:relative;height:400px;perspective:900px;} .flock-inner{width:100%;height:100%;transition:transform .2s ease-out;transform-style:preserve-3d;} .flock-wrap svg{width:100%;height:100%;overflow:visible;} .tag{font-family:'JetBrains Mono';font-weight:500;fill:var(--mint);filter:drop-shadow(0 0 8px rgba(127,227,195,0.35));} .tag.dim{fill:#4f6f65;opacity:0.6;filter:none;} .tag-anim{animation:drift 6s ease-in-out infinite;transform-origin:center;} .tag-anim.d2{animation-delay:-1s;} .tag-anim.d3{animation-delay:-2s;} .tag-anim.d4{animation-delay:-3s;} .tag-anim.d5{animation-delay:-4s;} .tag-anim.d6{animation-delay:-5s;} @keyframes drift{0%,100%{transform:translateY(0px) rotate(0deg);}50%{transform:translateY(-10px) rotate(2deg);}} .flock-glowdot{fill:var(--mint);opacity:0;animation:twinkle 3s ease-in-out infinite;} @keyframes twinkle{0%,100%{opacity:0;}50%{opacity:0.9;}} .flock-caption{position:absolute;bottom:-6px;left:0;color:var(--text-dim);font-size:12px;opacity:0;animation:fadeUp .8s ease 1.4s both;} .flock-path{fill:none;stroke:var(--mint-deep);stroke-width:1;stroke-dasharray:4 6;opacity:0.5;stroke-dashoffset:0;animation:dash 20s linear infinite;} @keyframes dash{to{stroke-dashoffset:-200;}} /* WHO STATEMENT */ .statement{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);background:var(--bg-elevated);padding:80px 0;text-align:center;position:relative;overflow:hidden;} .statement::before{content:"";position:absolute;top:50%;left:50%;width:600px;height:600px;background:radial-gradient(circle,rgba(127,227,195,0.06),transparent 70%);transform:translate(-50%,-50%);} .statement p{font-family:var(--font-display);font-size:32px;font-weight:700;max-width:780px;margin:0 auto 30px;line-height:1.35;color:#f3f3f3;position:relative;} .statement p span{color:var(--mint);} .statement .actions{display:flex;gap:14px;justify-content:center;position:relative;} /* SERVICES */ .services{padding-top:110px;padding-bottom:110px;} .section-head{margin-bottom:50px;} @media (max-width:600px){ /* Universal fix: every ".section-head" (mono label + heading) gets breathing room from whatever comes before it on mobile — not just the homepage sections patched previously. Catches every current and future use of this pattern site-wide instead of needing a new exception added each time it shows up somewhere else. */ .section-head{margin-top:36px;} } .section-head .mono{color:var(--mint);font-size:12px;margin-bottom:12px;display:block;} .section-head h2{font-size:44px;font-weight:800;} /* "Why WDlab" cards — reuses grid9 look at 3 cols, no read-more */ .why-grid{display:grid;grid-template-columns:repeat(var(--related-cols,3),1fr);gap:1px;background:rgba(255,255,255,0.09);border:1px solid rgba(255,255,255,0.09);border-radius:14px;overflow:hidden;} .why-grid.cols-4{grid-template-columns:repeat(4,1fr);} /* facts strip (About page) */ .facts-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:56px;} .facts-grid .stat-card{text-align:center;} .facts-grid .stat-card .num{font-size:28px;} /* quote-style statement, larger variant for About */ .quote-block{max-width:820px;margin:0 auto;text-align:center;} .quote-block .mark{color:var(--mint);font-size:40px;font-family:var(--font-display);line-height:1;display:block;margin-bottom:8px;opacity:0.6;} /* Contact page */ .contact-layout{display:grid;grid-template-columns:0.85fr 1.15fr;gap:64px;padding-top:80px;padding-bottom:80px;align-items:start;} .contact-info h3{font-size:22px;font-weight:700;margin-bottom:20px;} .contact-info-row{display:flex;gap:14px;padding:16px 0;border-top:1px solid var(--line);} .contact-info-row:first-of-type{border-top:none;} .contact-info-row .ci-label{color:var(--text-dim);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.03em;width:90px;flex-shrink:0;margin-top:2px;} .contact-info-row a, .contact-info-row span{color:var(--text);font-size:16px;font-weight:600;} .contact-info-row a:hover{color:var(--mint);} .contact-alt-box{margin-top:36px;padding:24px;border:1px solid var(--line);border-radius:12px;background:var(--bg-soft);} /* Single service page */ .service-single-layout{display:grid;grid-template-columns:1.7fr 1fr;gap:64px;padding-top:70px;padding-bottom:90px;align-items:start;} .service-main .tagline{font-size:19px;color:var(--text-dim);font-weight:500;margin-bottom:36px;line-height:1.6;} .bridge-note{ display:flex;align-items:center;justify-content:space-between;gap:20px; padding:18px 24px;margin:-14px 0 36px;border:1px solid var(--mint-dim);border-left:3px solid var(--mint); border-radius:10px;background:rgba(127,227,195,0.05);text-decoration:none; transition:background .25s ease, border-color .25s ease; } .bridge-note:hover{background:rgba(127,227,195,0.1);border-color:var(--mint);} .bridge-note-text{font-size:14.5px;color:var(--text);line-height:1.5;} .bridge-note-text strong{color:var(--mint);font-weight:700;} .bridge-note .arw2{display:inline-flex;flex:0 0 auto;color:var(--mint);transition:transform .35s cubic-bezier(.16,1,.3,1);} .bridge-note .arw-svg2{width:16px;height:16px;display:block;} .bridge-note:hover .arw2{transform:translate(4px,-4px);} @media (max-width:600px){ .bridge-note{flex-direction:column;align-items:flex-start;gap:12px;} } .service-main h2{font-size:26px;font-weight:700;margin:44px 0 18px;} .service-main h2:first-of-type{margin-top:0;} /* Imported long-form body content (post editor → the_content), laid out as numbered editorial sections — big display titles, thin rules, mono index labels — rather than a stacked block of text. */ .service-body{margin:24px 0 4px;counter-reset:svcsec;} .service-body > h2{ counter-increment:svcsec; margin:66px 0 0;padding-top:30px;border-top:1px solid var(--line); font-family:var(--font-display);font-weight:800;font-size:clamp(30px,4.6vw,54px); line-height:1.0;letter-spacing:-0.04em; } .service-body > h2:first-child{margin-top:12px;} .service-body > h2::before{ content:counter(svcsec,decimal-leading-zero); display:block;font-family:'JetBrains Mono',monospace; font-size:12px;font-weight:700;letter-spacing:0.22em; color:var(--mint);margin-bottom:20px; } .service-body h2 + p{margin-top:22px;} .service-body h3{ position:relative;padding-left:22px; font-family:var(--font-display);font-weight:700;font-size:clamp(17px,1.6vw,21px); letter-spacing:-0.012em;color:var(--text);margin:34px 0 0; } .service-body h3::before{content:"";position:absolute;left:0;top:0.62em;width:10px;height:2px;background:var(--mint);} .service-body h3 + p{margin-top:7px;padding-left:22px;} .service-body p{color:var(--text-dim);font-size:16px;line-height:1.72;max-width:56ch;margin:15px 0 0;} .service-body ul{list-style:none;margin:14px 0 0;padding:0;max-width:56ch;} .service-body li{position:relative;padding-left:24px;color:var(--text-dim);font-size:16px;line-height:1.7;margin-bottom:10px;} .service-body li::before{content:"";position:absolute;left:0;top:1px;color:var(--mint);font-family:'Inter';font-size:12px;font-weight:800;} .service-body a{color:var(--mint);text-decoration:underline;text-underline-offset:3px;} .feature-list{list-style:none;margin:0 0 8px;} .feature-list li{ display:flex;gap:14px;align-items:flex-start;padding:14px 16px;margin:0 -16px;border-top:1px solid var(--line); color:var(--text-dim);font-size:16px;font-weight:600;border-radius:10px;cursor:default; transition:color .25s ease, background .25s ease, transform .3s cubic-bezier(.16,1,.3,1); } .feature-list li:first-child{border-top:none;} .feature-list li::before{ content:"";color:var(--mint);font-family:'Inter';font-weight:800;font-size:12px;margin-top:3px;flex-shrink:0; display:inline-block;transition:transform .35s cubic-bezier(.34,1.56,.64,1), color .25s ease; } .feature-list li:hover{color:var(--text);background:rgba(127,227,195,0.06);transform:translateX(8px);} .feature-list li:hover::before{color:var(--mint-bright);transform:scale(1.2) rotate(-8deg);} @media (prefers-reduced-motion: reduce){ .feature-list li, .feature-list li::before{transition:color .15s ease;} .feature-list li:hover{transform:none;} .feature-list li:hover::before{transform:none;} } .accordion{margin-top:16px;border:1px solid var(--line);border-radius:12px;overflow:hidden;} .acc-item{border-top:1px solid var(--line);} .acc-item:first-child{border-top:none;} .acc-head{width:100%;display:flex;justify-content:space-between;align-items:center;padding:18px 22px;background:none;border:none;color:var(--text);font-family:'Inter';font-weight:800;font-size:19px;text-align:left;cursor:pointer;transition:background .2s;} .acc-head:hover{background:var(--bg-soft);} .acc-head .plus{color:var(--mint);font-size:19px;font-weight:400;transition:transform .3s cubic-bezier(.16,1,.3,1);flex-shrink:0;margin-left:16px;} .acc-item.open .acc-head .plus{transform:rotate(45deg);} .acc-body{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.16,1,.3,1);} .acc-item.open .acc-body{max-height:400px;} .acc-body-inner{padding:0 22px 20px;color:var(--text-dim);font-size:14.5px;font-weight:500;line-height:1.7;transition:background .25s ease, color .25s ease;} /* Hover OR an open item → its answer text inverts to a white panel with black text, bleeding to the accordion's own edges (the title/question stays exactly as it is). Stays white for as long as the item is open, not just on hover. */ .acc-item:hover .acc-body-inner, .acc-item.open .acc-body-inner{background:#ffffff;color:#101413;} /* ===== FAQ page ===== */ .faq-list{max-width:900px;margin:40px auto 0;} .faq-controls{position:sticky;top:calc(var(--wdlab-header-h,82px) + 10px);z-index:20;background:var(--bg);padding:12px 0 16px;margin-bottom:8px;} .faq-search{position:relative;margin-bottom:14px;} .faq-search input{width:100%;background:#0d0f0e;border:1px solid var(--line);color:var(--text);border-radius:10px;padding:14px 18px 14px 48px;font-size:15px;font-family:'Inter';transition:border-color .2s,box-shadow .2s;} :root[data-theme="light"] .faq-search input{background:#ffffff;} .faq-search input:focus{border-color:var(--mint);box-shadow:0 0 0 3px rgba(127,227,195,0.14);outline:none;} .faq-search svg{position:absolute;left:17px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--text-dim);pointer-events:none;} .faq-pills{display:flex;flex-wrap:wrap;gap:8px;} .faq-pill{background:var(--bg-soft);border:1px solid var(--line);color:var(--text-dim);border-radius:999px;padding:8px 16px;font-size:13px;font-weight:700;font-family:'Inter';cursor:pointer;transition:all .2s;} .faq-pill:hover{border-color:var(--mint-dim);color:var(--text);} .faq-pill.active{background:var(--mint);border-color:var(--mint);color:#0a1512;} .faq-cat{margin-bottom:32px;} .faq-cat-title{font-size:13px;font-weight:800;letter-spacing:0.15em;text-transform:uppercase;color:var(--mint);margin:0 0 14px 4px;font-family:'Inter';} .faq-list .accordion{border-radius:14px;} .faq-list .acc-head{padding:22px 26px;font-size:20px;} .faq-list .acc-body-inner{padding:0 26px 24px;font-size:15px;} .faq-list .acc-item.open .acc-body{max-height:1400px;} .faq-noresults{text-align:center;color:var(--text-dim);padding:44px 0;font-size:15px;} .side-card{background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;padding:26px;margin-bottom:20px;overflow:hidden !important;} .side-card h4{font-size:15px;font-weight:700;margin-bottom:10px;} .side-card p{color:var(--text-dim);font-size:14px;font-weight:500;line-height:1.65;} /* This element carries BOTH "accordion" and "side-accordion" classes, so it was also inheriting .accordion's own overflow:hidden — which was clipping the bled .acc-body right back down before it ever reached the card's edge (each .acc-body already clips its own height animation individually; the outer container doesn't need to clip horizontally too). */ .side-accordion{border:none;border-radius:0;margin-top:8px;overflow:visible;} .side-accordion .acc-item{border-top:1px solid var(--line);} .side-accordion .acc-head{padding:12px 0;font-size:17.5px;} /* The bleed goes on .acc-body itself (the overflow:hidden element), not on .acc-body-inner — .acc-body clips its OWN children, so a negative margin on the child was being clipped before it ever reached the card's edge. Widening .acc-body first, then padding -inner normally inside it, reaches the edge correctly. */ /* High-specificity + !important: this rule was silently losing to some other CSS on the live site (Additional CSS in the Customizer, or a stale minified-cache bundle) even though it's correct on paper — .side-card > .side-accordion > .acc-item > .acc-body > .acc-body-inner is the real markup chain (verified against the template). Making the selector maximally specific and !important so it wins regardless. */ .side-card .side-accordion .acc-item .acc-body{margin:0 -26px !important;overflow:hidden;} .side-card .side-accordion .acc-item .acc-body-inner{padding:0 26px 12px !important;font-size:13px;} @media (max-width:860px){ .service-single-layout{grid-template-columns:1fr;gap:40px;} } .contact-alt-box p{color:var(--text-dim);font-size:14px;font-weight:500;margin-bottom:14px;} .contact-social{display:flex;gap:10px;margin-top:28px;} .contact-social a{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Inter';font-weight:700;font-size:11px;color:var(--text-dim);transition:all .25s;} .contact-social a:hover{border-color:var(--mint);color:var(--mint);transform:translateY(-3px);} .contact-form{background:var(--bg-soft);border:1px solid var(--line);border-radius:16px;padding:40px;} .form-row{margin-bottom:22px;} .form-row label{display:block;color:var(--text-dim);font-size:13px;font-weight:700;margin-bottom:8px;} .form-row input, .form-row textarea{ width:100%;background:#0d0f0e;border:1px solid var(--line);color:var(--text); border-radius:8px;padding:13px 16px;font-size:15px;font-family:'Inter';transition:border-color .2s,box-shadow .2s; } .form-row input:focus, .form-row textarea:focus{border-color:var(--mint);box-shadow:0 0 0 3px rgba(127,227,195,0.14);outline:none;} .form-row textarea{resize:vertical;min-height:130px;} .form-two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px;} .form-submit{width:100%;justify-content:center;border:none;cursor:pointer;font-family:'Inter';} .form-notice{padding:14px 18px;border-radius:8px;font-size:14px;font-weight:600;margin-bottom:24px;} .form-notice.success{background:rgba(127,227,195,0.1);border:1px solid var(--mint-dim);color:var(--mint);} .form-notice.error{background:rgba(224,96,90,0.1);border:1px solid #e0605a;color:#e0908c;} /* ===== Project Inquiry form extras (selects + service chips) ===== */ .form-row select{ width:100%;background:#0d0f0e;border:1px solid var(--line);color:var(--text); border-radius:8px;padding:13px 16px;font-size:15px;font-family:'Inter'; transition:border-color .2s,box-shadow .2s;cursor:pointer; -webkit-appearance:none;appearance:none; background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237fe3c3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 16px center;padding-right:44px; } .form-row select:focus{border-color:var(--mint);box-shadow:0 0 0 3px rgba(127,227,195,0.14);outline:none;} .inquiry-checks{display:grid;grid-template-columns:1fr 1fr;gap:10px;} .inq-chip{position:relative;display:flex;align-items:center;gap:10px; background:#0d0f0e;border:1px solid var(--line);border-radius:8px; padding:12px 14px;font-size:14px;font-weight:600;color:var(--text-dim); cursor:pointer;transition:border-color .2s,color .2s,background .2s;} :root[data-theme="light"] .inq-chip{background:#ffffff;} .inq-chip:hover{border-color:var(--mint-dim);color:var(--text);} .inq-chip input{position:absolute;opacity:0;width:0;height:0;} .inq-chip .inq-box{flex:0 0 auto;width:18px;height:18px;border:1px solid var(--line); border-radius:5px;display:flex;align-items:center;justify-content:center;transition:all .2s;} .inq-chip .inq-box svg{width:12px;height:12px;opacity:0;transform:scale(.6);transition:all .2s;} .inq-chip input:checked ~ .inq-box{background:var(--mint);border-color:var(--mint);} .inq-chip input:checked ~ .inq-box svg{opacity:1;transform:scale(1);} .inq-chip:has(input:checked){border-color:var(--mint);color:var(--text);background:rgba(127,227,195,0.07);} .inq-chip input:focus-visible ~ .inq-box{box-shadow:0 0 0 3px rgba(127,227,195,0.2);} .inquiry-intro .ii-step{display:flex;gap:16px;margin-bottom:22px;} .inquiry-intro .ii-num{flex:0 0 auto;width:30px;height:30px;border:1px solid var(--mint-dim); border-radius:8px;display:flex;align-items:center;justify-content:center; color:var(--mint);font-family:var(--font-display);font-weight:800;font-size:13px;} .inquiry-intro .ii-step h4{font-size:15px;margin-bottom:4px;} .inquiry-intro .ii-step p{color:var(--text-dim);font-size:14px;line-height:1.55;} .inq-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;} @media (max-width:520px){ .inquiry-checks{grid-template-columns:1fr;} } @media (max-width:860px){ .contact-layout{grid-template-columns:1fr;gap:48px;} .form-two-col{grid-template-columns:1fr;} } .why-grid .cell{background:var(--bg-soft);padding:36px 30px;transition:background .3s;} .why-grid .icon{ width:46px;height:46px;border:1px solid var(--mint-dim);border-radius:10px;display:flex;align-items:center;justify-content:center; color:var(--mint);font-family:'Inter',sans-serif;font-weight:700;font-size:16px;margin-bottom:18px;background:rgba(127,227,195,0.06); transition:border-color .3s, background .3s, color .3s;filter:drop-shadow(0 0 16px rgba(127,227,195,0.22)); } .why-grid h4{font-family:var(--font-display);font-size:24px;font-weight:800;letter-spacing:-0.015em;margin-bottom:8px;transition:color .3s;} .why-grid .grid-dot{color:var(--mint);transition:color .3s;} .why-grid p{color:var(--text-dim);font-size:15px;font-weight:500;transition:color .3s;} .why-grid .card-arrow svg{width:28px;height:28px;} /* process steps (how a project starts) */ .process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;margin-top:56px;} .process-step{position:relative;padding:0 24px 0 0;} .process-step:not(:last-child)::after{ content:"";position:absolute;top:19px;right:-2px;width:calc(100% - 40px);height:1px; background:linear-gradient(90deg,var(--mint-deep),transparent); } .process-num{ width:38px;height:38px;border-radius:50%;border:1px solid var(--mint);color:var(--mint); display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:15px; margin-bottom:20px;background:#0a0f0d;position:relative;z-index:2; } .process-step h4{font-size:17px;font-weight:700;margin-bottom:8px;} .process-step p{color:var(--text-dim);font-size:14px;font-weight:500;line-height:1.6;} @media (max-width:860px){ .why-grid{grid-template-columns:1fr;} .why-grid.cols-4{grid-template-columns:1fr 1fr;} .facts-grid{grid-template-columns:1fr 1fr;} .process-steps{grid-template-columns:1fr;gap:32px;} .process-step:not(:last-child)::after{display:none;} } /* Portrait phones: the 4-up "How we work" grid is too cramped at two columns — text-heavy cells overflow their track and, because the grid clips (overflow:hidden), the right column gets cut off. Stack to one. */ @media (max-width:600px){ .why-grid.cols-4{grid-template-columns:1fr;} } .tabs{display:flex;gap:8px;margin-bottom:0;border-bottom:1px solid var(--line);flex-wrap:wrap;position:relative;} .tab-btn{background:none;border:none;color:var(--text-dim);font-family:'Inter',sans-serif;font-weight:700;font-size:13px;letter-spacing:0.02em;text-transform:uppercase;padding:15px 20px;cursor:pointer;transition:color .25s;} @media (max-width:600px){ /* All 4 tab labels on one line instead of wrapping — scrollable as a safety net if a particularly long translation still doesn't fit, rather than risking wrap again. */ .tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:2px;scrollbar-width:none;} .tabs::-webkit-scrollbar{display:none;} .tab-btn{font-size:11px;padding:14px 10px;white-space:nowrap;flex-shrink:0;letter-spacing:0.01em;} } .tab-btn:hover{color:var(--text);} .tab-btn.active{color:var(--mint);} .tab-indicator{position:absolute;bottom:-1px;height:2px;background:var(--mint);box-shadow:0 0 12px rgba(127,227,195,0.7);transition:left .35s cubic-bezier(.16,1,.3,1), width .35s cubic-bezier(.16,1,.3,1);} .tab-panel{display:none;padding:46px 0;grid-template-columns:1fr 1fr;gap:56px;align-items:start;} .tab-panel.active{display:grid;animation:fadeUp .5s cubic-bezier(.16,1,.3,1) both;} .tab-panel h3{font-size:28px;font-weight:700;margin-bottom:14px;} .tab-panel p{color:var(--text-dim);font-size:17px;font-weight:500;margin-bottom:14px;} .tab-panel ul{list-style:none;color:var(--text-dim);font-size:16px;font-weight:500;} .tab-panel li{padding:10px 0;border-top:1px solid var(--line);display:flex;gap:12px;} .tab-panel li:first-child{border-top:none;} .tab-panel li::before{content:"◆";color:var(--mint);font-size:9px;margin-top:5px;} .stat-card{background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;padding:28px;transition:border-color .3s, transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s;position:relative;overflow:hidden;} .stat-card::after{content:"";position:absolute;inset:0;background:linear-gradient(140deg,rgba(127,227,195,0.08),transparent 60%);opacity:0;transition:opacity .3s;} .stat-card:hover{border-color:var(--mint-dim);transform:translateY(-4px);box-shadow:0 16px 32px -18px rgba(0,0,0,0.6);} .stat-card:hover::after{opacity:1;} .stat-card .num{font-family:var(--font-display);color:var(--mint);font-size:38px;font-weight:800;position:relative;overflow-wrap:break-word;word-break:break-word;} .stat-card .label{color:var(--text-dim);font-size:14px;font-weight:600;margin-top:6px;position:relative;} .stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;} @media (max-width:600px){ .stat-grid{grid-template-columns:1fr;} } .grid9{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,0.09);border:1px solid rgba(255,255,255,0.09);margin-top:74px;border-radius:14px;overflow:hidden;} /* inner-page hero (Services, Portfolio, etc.) */ .page-hero{padding-top:70px;padding-bottom:50px;border-bottom:1px solid var(--line-soft);} .breadcrumb{color:var(--text-dim);font-size:13px;font-weight:600;margin-bottom:18px;display:flex;gap:8px;align-items:center;} .breadcrumb a{color:var(--text-dim);transition:color .2s;} .breadcrumb a:hover{color:var(--mint);} .breadcrumb .sep{opacity:0.4;} .breadcrumb .current{color:var(--mint);} .page-hero h1{font-size:clamp(38px,7vw,92px);font-weight:800;letter-spacing:-0.045em;line-height:0.95;margin-bottom:18px;} /* Site-wide hero title treatment: first word bright, rest dimmed, mint mark raised */ .page-hero h1 .ht-lead{color:var(--text);} .page-hero h1 .ht-dim{color:var(--text-dim);} .page-hero h1 .ht-mark{display:inline-block;width:0.16em;height:0.16em;background:var(--mint);margin-left:0.08em;vertical-align:baseline;transform:translateY(-9px);border-radius:1px;} /* Column heroes (with a side animation) keep their title fitted to the column */ .wf-hero h1,.svc-hero h1{font-size:clamp(34px,4.8vw,70px);line-height:0.98;} .page-hero .sub{color:var(--text-dim);font-size:18px;font-weight:500;max-width:640px;} /* Long-form legal prose (Terms, Privacy Policy, Cookies Policy) */ .legal-content{max-width:760px;margin:0 auto;padding:20px 0 90px;color:var(--text-dim);font-size:16px;line-height:1.75;} .legal-content .legal-updated{font-family:'Inter';font-size:13px;font-weight:700;letter-spacing:0.03em; text-transform:uppercase;color:var(--mint);margin-bottom:44px;display:block;} .legal-content h2{font-family:'Inter';font-size:21px;font-weight:800;color:var(--text); margin:48px 0 16px;letter-spacing:-0.01em;} .legal-content h2:first-of-type{margin-top:0;} .legal-content p{margin:0 0 18px;} .legal-content ul{margin:0 0 18px;padding-left:22px;} .legal-content li{margin-bottom:8px;} .legal-content a{color:var(--mint);text-decoration:underline;text-underline-offset:3px;} .legal-content strong{color:var(--text);font-weight:700;} @media (max-width:700px){ .legal-content{font-size:15px;} .legal-content h2{font-size:19px;margin:38px 0 14px;} } @media (min-width:861px){ /* Vertical stacked breadcrumb, kept in NORMAL FLOW at the top of the hero (no longer position:fixed). Each crumb is upright and stacked, the active page bold and larger. In-flow means it scrolls away with the hero — so it never collides with the footer — and the main body needs no reserved rail indent, so every section stays symmetric and left-aligned. */ .breadcrumb{ display:flex;flex-direction:column;align-items:flex-start; gap:9px;margin-bottom:32px; } .breadcrumb a{ display:block;font-size:12px;font-weight:600;line-height:1.1; color:var(--text-dim);letter-spacing:0.04em;opacity:0.7; text-transform:uppercase; } .breadcrumb a:hover{color:var(--mint);opacity:1;} .breadcrumb .sep{display:none;} .breadcrumb .current{ display:block;font-family:var(--font-display);font-weight:800; font-size:clamp(16px,1.2vw,18px);line-height:1.15;color:var(--mint); letter-spacing:-0.015em;margin-top:5px;max-width:220px; } } /* service group sections (Web Design / Graphic Design) */ .service-group{padding-top:80px;padding-bottom:80px;} .service-group:not(:last-child){border-bottom:1px solid var(--line-soft);} .service-group .section-head{margin-bottom:50px;} .service-group .grid9{margin-top:0;} .grid9.with-cta .cell{display:flex;flex-direction:column;} .grid9.with-cta .cell p{flex:1;} @media (max-width:860px){ .page-hero h1{font-size:36px;} } .grid9 .cell{background:var(--bg-soft);padding:40px 32px;transition:background .3s, transform .3s cubic-bezier(.16,1,.3,1);position:relative;display:block;text-decoration:none;} /* shared "arrow reveals on hover" treatment, used on grid9 / why-grid / portfolio cards */ .card-arrow{ position:absolute;font-size:30px;line-height:1;font-weight:400;color:#0a0a0a; opacity:0;transition:opacity .3s ease, transform .35s cubic-bezier(.16,1,.3,1);pointer-events:none; } .grid9 .cell .card-arrow, .why-grid .cell .card-arrow{right:28px;top:50%;transform:translateY(-50%) translateX(-18px);} .port-info .card-arrow{right:20px;top:20px;font-size:22px;transform:translateX(-14px);} .card-arrow svg{width:22px;height:22px;display:block;} .grid9 .card-arrow svg{width:30px;height:30px;} .grid9 .icon{ width:46px;height:46px;border:1px solid var(--mint-dim);border-radius:10px;display:flex;align-items:center;justify-content:center; color:var(--mint);font-family:'Inter',sans-serif;font-weight:700;font-size:15px;margin-bottom:20px; transition:box-shadow .3s, border-color .3s, background .3s, color .3s;background:rgba(127,227,195,0.06); filter:drop-shadow(0 0 16px rgba(127,227,195,0.22)); } .grid9 .icon.icon-image{padding:0;overflow:hidden;background:none;} .grid9 .icon.icon-image img{width:100%;height:100%;object-fit:cover;display:block;} .grid9 h4{font-family:var(--font-display);font-size:26px;font-weight:800;letter-spacing:-0.015em;margin-bottom:10px;color:var(--text);transition:color .3s;} .grid9 .grid-dot{color:var(--mint);transition:color .3s;} .grid9 p{color:var(--text-dim);font-size:15px;font-weight:500;transition:color .3s;} /* Hover-only effects — gated behind (hover:hover) so a tap on a touch device can't leave the white-inverted card state "stuck" on until the person taps something else. Devices with a real mouse (hover: hover, pointer:fine) get the full effect as before; touch devices just get the tap itself (navigation), no lingering hover visuals. Covers every card/grid on the site that uses this white-inversion pattern — grid9 (What We Do), why-grid (Why WDlab, on every service page), and the portfolio cards — not just the one that was first reported. */ @media (hover:hover) and (pointer:fine){ .grid9 .cell:hover .card-arrow, .why-grid .cell:hover .card-arrow{opacity:1;transform:translateY(-50%) translateX(0);} .port-card:hover .port-info .card-arrow{opacity:1;transform:translateX(0);} .grid9 .cell:hover{background:#fff;transform:translateY(-3px);z-index:2;box-shadow:0 20px 40px -20px rgba(0,0,0,0.8);} .grid9 .cell:hover .icon{box-shadow:none;border-color:#0a0a0a;background:transparent;color:#0a0a0a;filter:none;} .grid9 .cell:hover .grid-dot{color:#0f6e56;} .grid9 .cell:hover h4{color:#0a0a0a;} .grid9 .cell:hover p{color:#333;} .why-grid .cell:hover{background:#fff;} .why-grid .cell:hover .icon{border-color:#0a0a0a;color:#0a0a0a;background:transparent;filter:none;} .why-grid .cell:hover .grid-dot{color:#0f6e56;} .why-grid .cell:hover h4{color:#0a0a0a;} .why-grid .cell:hover p{color:#333;} .port-card:hover{transform:translateY(-6px);border-color:var(--mint-dim);box-shadow:0 24px 48px -24px rgba(0,0,0,0.7);} .port-card:hover .port-info{background:#fff;} .port-card:hover .port-info h3{color:#0a0a0a;} .port-card:hover .port-info p{color:#333;} .port-card:hover .port-tag{color:#0a0a0a;border-color:#0a0a0a;} .nav-cta:hover{background:var(--mint-bright);color:var(--on-mint)!important;box-shadow:0 10px 26px -10px rgba(127,227,195,0.6);transform:translateY(-1px);} } /* ===== Homepage 9-grid: small looping icon animations (replace static glyphs) ===== */ .gicon{position:relative;width:24px;height:24px;display:flex;align-items:center;justify-content:center;} .gicon svg{width:24px;height:24px;display:block;} .gi-wd-cursor{position:absolute;width:2px;height:12px;background:currentColor;animation:giBlink 1s step-end infinite;} @keyframes giBlink{0%,100%{opacity:1;}50%{opacity:0;}} .gi-ec{animation:giBounce 2.2s ease-in-out infinite;} @keyframes giBounce{0%,100%{transform:translateY(0);}50%{transform:translateY(-3px);}} .gi-sm svg{animation:giPulse 1.6s ease-in-out infinite;transform-origin:center;} @keyframes giPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.18);}} .gi-seo svg{animation:giSway 2.6s ease-in-out infinite;transform-origin:60% 40%;} @keyframes giSway{0%,100%{transform:rotate(0deg);}50%{transform:rotate(-14deg);}} .gi-em-dot{position:absolute;top:-2px;right:-2px;width:7px;height:7px;border-radius:50%;background:var(--mint);animation:giDot 1.8s ease-in-out infinite;} :root[data-theme="light"] .gi-em-dot{background:#0f6e56;} @keyframes giDot{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.5);opacity:.6;}} .gi-pt{overflow:visible;} .gi-pt-wave{position:absolute;width:24px;height:24px;border-radius:50%;border:1.5px solid currentColor;opacity:0;animation:giWave 2s ease-out infinite;} @keyframes giWave{0%{opacity:.6;transform:scale(.6);}100%{opacity:0;transform:scale(2);}} .gi-bi{position:relative;font-family:'Inter',sans-serif;font-weight:700;font-size:15px;} .gi-bi-line{position:absolute;left:0;bottom:-4px;height:2px;width:0;background:currentColor;animation:giLine 2.4s ease-in-out infinite;} @keyframes giLine{0%{width:0;opacity:1;}45%{width:100%;opacity:1;}70%,100%{width:100%;opacity:0;}} .gi-pk svg{animation:giWobble 2.8s ease-in-out infinite;transform-origin:center;} @keyframes giWobble{0%,100%{transform:rotate(0deg);}25%{transform:rotate(-6deg);}75%{transform:rotate(6deg);}} .gi-wm svg{animation:giSpin 2.6s linear infinite;transform-origin:center;} @keyframes giSpin{to{transform:rotate(360deg);}} .gi-fs-badge{position:absolute;top:-2px;right:-2px;width:7px;height:7px;border-radius:50%;background:var(--mint);animation:giDot 1.8s ease-in-out infinite;} :root[data-theme="light"] .gi-fs-badge{background:#0f6e56;} .gi-fp svg{animation:giWobble 2.8s ease-in-out infinite;transform-origin:top center;} .gi-fp-badge{position:absolute;top:-2px;right:-2px;width:7px;height:7px;border-radius:50%;background:var(--mint);animation:giDot 1.8s ease-in-out infinite .3s;} :root[data-theme="light"] .gi-fp-badge{background:#0f6e56;} .gi-fc svg{animation:giPulse 2.4s ease-in-out infinite;transform-origin:center;} /* Paid Media — radar "ping" emanating from the target centre (acquisition). */ .gi-pm{overflow:visible;} .gi-pm-ping{position:absolute;top:50%;left:50%;width:17px;height:17px;margin:-8.5px 0 0 -8.5px; border-radius:50%;border:1.5px solid currentColor;opacity:0;animation:giWave 2.2s ease-out infinite;} /* Analytics & CRO — the trend line draws upward, then the arrow tip appears. */ .gi-cro svg path:first-child{stroke-dasharray:40;stroke-dashoffset:40;animation:giDraw 2.8s ease-in-out infinite;} .gi-cro svg path:last-child{opacity:0;animation:giArrowIn 2.8s ease-in-out infinite;} @keyframes giDraw{0%{stroke-dashoffset:40;}45%{stroke-dashoffset:0;}82%{stroke-dashoffset:0;}100%{stroke-dashoffset:40;}} @keyframes giArrowIn{0%,40%{opacity:0;}55%,82%{opacity:1;}100%{opacity:0;}} /* Re:ACTIVATE — a quick "charge" flash, then settle (energy / reactivation). */ .gi-ra svg{animation:giBolt 2.4s ease-in-out infinite;transform-origin:center;} @keyframes giBolt{0%,100%{transform:scale(1);opacity:.85;}7%{transform:scale(1.16);opacity:1;} 15%{transform:scale(1);opacity:.7;}23%{transform:scale(1.06);opacity:1;}32%{transform:scale(1);opacity:.9;}} @media (prefers-reduced-motion: reduce){ .gicon *{animation:none !important;} /* Without the draw animation, show the CRO trend line fully rendered instead of stuck at its hidden start state. */ .gi-cro svg path{stroke-dashoffset:0 !important;opacity:1 !important;} } .cta-band{background:var(--bg-elevated);border-top:1px solid var(--line-soft);padding:100px 0;text-align:center;position:relative;overflow:hidden;} .cta-band::before{content:"";position:absolute;width:900px;height:900px;background:radial-gradient(circle,rgba(127,227,195,0.07),transparent 65%);top:50%;left:50%;transform:translate(-50%,-50%);animation:pulse 6s ease-in-out infinite;} @keyframes pulse{0%,100%{opacity:0.6;}50%{opacity:1;}} .cta-band h2{font-size:52px;font-weight:800;margin-bottom:20px;position:relative;} .cta-band p{color:var(--text-dim);font-size:19px;font-weight:500;margin-bottom:34px;position:relative;} /* Editorial portfolio CTA (service pages) */ .cta-ed{padding:100px 0 84px;border-top:1px solid var(--line);} .cta-ed .cta-ed-lab{display:block;font-family:'Inter';font-weight:700;font-size:12px;letter-spacing:0.2em;text-transform:uppercase;color:var(--mint);margin-bottom:24px;} .cta-ed-title{font-family:var(--font-display);font-weight:800;font-size:clamp(46px,9vw,120px);line-height:0.9;letter-spacing:-0.05em;margin:0;} .cta-ed-title a{color:var(--text);text-decoration:none;} .cta-ed-title .arw{display:inline-block;color:var(--mint);animation:ctaArw 2.6s ease-in-out infinite;} .cta-ed-title .arw .arw-svg{width:0.72em;height:0.72em;display:block;} .cta-ed-foot a .arw2 .arw-svg2{width:13px;height:13px;display:inline-block;vertical-align:-1px;} .cta-ed:hover .cta-ed-title .arw{animation-duration:1.1s;} @keyframes ctaArw{0%,100%{transform:translate(0,0);}50%{transform:translate(9px,-9px);}} .cta-ed-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:46px;padding-top:22px;border-top:1px solid var(--line);} .cta-ed-foot .m{font-family:'Inter';font-weight:700;font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-dim);} .cta-ed-foot a{color:var(--mint);text-decoration:none;font-family:'Inter';font-weight:700;font-size:12px;letter-spacing:0.12em;text-transform:uppercase;} .cta-ed-foot a .arw2{display:inline-block;transition:transform .35s cubic-bezier(.16,1,.3,1);} .cta-ed-foot a:hover .arw2{transform:translate(4px,-4px);} @media(prefers-reduced-motion:reduce){.cta-ed-title .arw{animation:none;}} /* ===== Editorial body band (service pages, from wdlab_svc_sections) ===== */ .eb-band{padding:64px 0 30px;border-top:1px solid var(--line);} .eb-band .wrap{max-width:var(--content-max);} .eb-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:34px;} .eb-top .mono{font-size:11px;letter-spacing:.16em;color:var(--text-dim);} .eb-row{position:relative;display:grid;grid-template-columns:1fr 250px;gap:46px;min-height:360px;padding:52px 0;} .eb-row::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--line);transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.16,1,.3,1);} .eb-row.in::before{transform:scaleX(1);} .eb-head{position:sticky;top:92px;align-self:start;display:grid;grid-template-columns:52px 1fr;gap:20px;} body:has(.svc-subnav) .eb-head{top:150px;} .eb-idx{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;color:var(--mint);letter-spacing:.1em;padding-top:18px;opacity:0;transition:opacity .6s ease .2s;} .eb-row.in .eb-idx{opacity:1;} .eb-title{font-family:var(--font-display);font-weight:800;font-size:clamp(40px,6.6vw,104px);line-height:0.92;letter-spacing:-0.048em;margin:0;opacity:0;transform:translateY(48px);transition:opacity .9s ease,transform 1s cubic-bezier(.16,1,.3,1);} .eb-row.in .eb-title{opacity:1;transform:none;} .eb-aside{padding-top:14px;} .eb-aside>*{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1);} .eb-row.in .eb-aside>*{opacity:1;transform:none;} .eb-row.in .eb-aside>*:nth-child(1){transition-delay:.15s;} .eb-row.in .eb-aside>*:nth-child(2){transition-delay:.24s;} .eb-row.in .eb-aside>*:nth-child(3){transition-delay:.32s;} .eb-aside .lead{font-size:14.5px;color:var(--text-dim);line-height:1.6;margin:0 0 4px;} .eb-aside .tag{display:inline-block;margin-top:14px;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mint);} .eb-subs{margin-top:14px;} .eb-subs .s{padding:12px 0;border-top:1px solid var(--line-soft);opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1);} .eb-subs .s:first-child{border-top:0;} .eb-row.in .eb-subs .s{opacity:1;transform:none;} .eb-row.in .eb-subs .s:nth-child(1){transition-delay:.30s;} .eb-row.in .eb-subs .s:nth-child(2){transition-delay:.40s;} .eb-row.in .eb-subs .s:nth-child(3){transition-delay:.50s;} .eb-row.in .eb-subs .s:nth-child(4){transition-delay:.60s;} .eb-subs .s b{display:block;font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--text);margin-bottom:2px;letter-spacing:-0.01em;} .eb-subs .s span{font-size:12px;color:var(--text-dim);line-height:1.5;} @media(prefers-reduced-motion:reduce){.eb-title,.eb-idx,.eb-aside>*,.eb-subs .s{opacity:1 !important;transform:none !important;}.eb-row::before{transform:scaleX(1) !important;}} @media(max-width:900px){.eb-row{grid-template-columns:1fr;min-height:0;gap:8px;}.eb-head{position:static;grid-template-columns:34px 1fr;gap:14px;}.eb-aside{grid-column:1;padding-top:20px;}} footer{padding:80px 0 0;border-top:1px solid var(--line-soft);background:var(--bg-elevated);} .foot-top{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:56px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap;gap:32px;} .foot-brand .logo img{height:72px;} .foot-brand p{color:var(--text-dim);font-size:16px;font-weight:500;max-width:280px;margin-top:16px;} .foot-social{display:flex;gap:10px;margin-top:22px;} .foot-social a{ width:38px;height:38px;border:1px solid var(--line);border-radius:50%; display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono'; font-size:11px;color:var(--text-dim);transition:all .25s; } .foot-social a:hover{border-color:var(--mint);color:var(--mint);transform:translateY(-3px);box-shadow:0 8px 20px -8px rgba(127,227,195,0.5);} .foot-cta-mini{text-align:right;} .foot-cta-mini .mono{color:var(--mint);font-size:11px;display:block;margin-bottom:14px;} .foot-cta-mini a.btn{font-size:14px;} .foot-grid{display:grid;grid-template-columns:1.3fr repeat(5,1fr);gap:clamp(24px,3vw,56px);padding:clamp(48px,5vw,72px) 0;} .foot-col .mono{color:var(--mint);font-size:12px;font-weight:700;margin-bottom:20px;display:block;} .foot-col a{color:var(--text-dim);font-size:16px;font-weight:600;display:flex;align-items:center;gap:6px;margin-bottom:14px;transition:color .25s, gap .25s, padding-left .25s;} .foot-col p{color:var(--text-dim);font-size:16px;font-weight:600;display:block;margin-bottom:14px;} .foot-col a::before{content:"→";opacity:0;width:0;transition:opacity .25s, width .25s;color:var(--mint);} .foot-col a:hover{color:var(--mint);padding-left:2px;} .foot-col a:hover::before{opacity:1;width:14px;} .foot-bottom{font-weight:600;} .foot-bottom{ display:flex;justify-content:space-between;color:var(--text-dim); font-size:13px;border-top:1px solid var(--line-soft);padding:24px 0;flex-wrap:wrap;gap:10px; } .foot-bottom .gemi{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:0.02em;color:var(--text-dim);opacity:.75;white-space:nowrap;} .foot-bottom .legal-links{display:flex;gap:22px;} .foot-bottom .legal-links a:hover{color:var(--mint);} .foot-region{ display:flex;align-items:center;gap:8px;font-family:'Inter',sans-serif;font-weight:700;letter-spacing:0.02em;text-transform:uppercase;font-size:11px; border:1px solid var(--line);border-radius:20px;padding:5px 12px;color:var(--text-dim); } .foot-region .dot{width:6px;height:6px;border-radius:50%;background:var(--mint);} @media (max-width:960px){ .foot-top{flex-direction:column;} .foot-cta-mini{text-align:left;} .foot-grid{grid-template-columns:1fr 1fr 1fr;} } @media (max-width:600px){ .foot-grid{grid-template-columns:1fr 1fr;} } @media (max-width:420px){ .foot-grid{grid-template-columns:1fr;} } @media (max-width:860px){ .hero{grid-template-columns:1fr;padding-top:50px;min-height:auto;} .hero h1{font-size:44px;} .flock-wrap{height:220px;order:-1;} .tab-panel{grid-template-columns:1fr;} .grid9{grid-template-columns:1fr;} .foot-grid{grid-template-columns:1fr;} nav{display:none;} } /* floating badges over hero flock (Webflow-style layered depth) */ .float-badge{ position:absolute;background:rgba(21,23,22,0.85);border:1px solid var(--line); border-radius:8px;padding:9px 14px;font-family:'Inter',sans-serif;font-weight:700;letter-spacing:0.02em;text-transform:uppercase;font-size:11px; color:var(--mint);backdrop-filter:blur(6px);box-shadow:0 12px 28px -12px rgba(0,0,0,0.6); animation:bob 5s ease-in-out infinite;pointer-events:none; } .float-badge.b1{top:8%;left:-6%;animation-delay:0s;} .float-badge.b2{bottom:14%;right:-4%;animation-delay:-2.5s;} /* optional hero photo, shown only if an image is uploaded in ACF */ .hero-photo-card{ position:absolute;bottom:6%;right:2%;width:150px;height:110px;border-radius:12px; overflow:hidden;border:1px solid var(--line);box-shadow:0 20px 40px -16px rgba(0,0,0,0.7); animation:bob 6s ease-in-out infinite;animation-delay:-1.5s; } .hero-photo-card img{width:100%;height:100%;object-fit:cover;display:block;} @media (max-width:860px){ .hero-photo-card{display:none;} } @keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}} /* selected work marquee */ .marquee-section{padding:56px 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);background:var(--bg-elevated);overflow:hidden;} .marquee-label{max-width:1440px;margin:0 auto 26px;padding:0 48px;color:var(--text-dim);font-size:12px;position:relative;z-index:3;} .marquee-track{display:flex;gap:0;width:max-content;animation:scrollX 32s linear infinite;} .marquee-section:hover .marquee-track{animation-play-state:paused;} .marquee-item{display:flex;align-items:center;gap:10px;padding:0 36px;font-family:var(--font-display);font-weight:700;font-size:21px;color:var(--text-dim);white-space:nowrap;border-right:1px solid var(--line);} .marquee-item .tag-dot{width:6px;height:6px;border-radius:50%;background:var(--mint);opacity:0.7;} .marquee-item:hover{color:var(--text);} @keyframes scrollX{from{transform:translateX(0);}to{transform:translateX(-50%);}} .marquee-fade-l,.marquee-fade-r{position:absolute;top:0;bottom:0;width:90px;z-index:4;pointer-events:none;} .marquee-fade-l{left:0;background:linear-gradient(90deg,var(--bg-elevated),transparent);} .marquee-fade-r{right:0;background:linear-gradient(-90deg,var(--bg-elevated),transparent);} .marquee-wrap{position:relative;} /* sticky how-we-work section */ .how-section{padding-top:110px;padding-bottom:110px;} .how-grid{display:grid;grid-template-columns:1fr 0.9fr;gap:70px;} .how-step{padding:56px 0;border-top:1px solid var(--line);position:relative;} .how-step:first-child{border-top:none;padding-top:0;} .how-step .step-num{font-family:'Inter',sans-serif;font-weight:700;letter-spacing:0.02em;text-transform:uppercase;color:var(--mint-dim);font-size:12px;margin-bottom:14px;display:block;} .how-step h3{font-size:30px;font-weight:700;margin-bottom:14px;transition:color .3s;} .how-step p{color:var(--text-dim);font-size:17px;font-weight:500;max-width:420px;} .how-step.active h3{color:var(--mint);} .how-step.active .step-num{color:var(--mint-bright);} .how-visual-wrap{position:sticky;top:120px;height:420px;} .how-visual{ position:absolute;inset:0;border:1px solid var(--line);border-radius:16px;background:var(--bg-soft); display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .5s cubic-bezier(.16,1,.3,1); overflow:hidden; } .how-visual.active{opacity:1;} .how-visual .glyph{font-family:'JetBrains Mono';font-size:64px;color:var(--mint);opacity:0.9;filter:drop-shadow(0 0 30px rgba(127,227,195,0.35));} .how-visual .grid-bg{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:32px 32px;opacity:0.35;} /* .how-visual already provides the card chrome (border/bg/radius); strip the duplicate chrome .svc-anim normally draws on its own when reused here, keeping just the positioning/clipping. */ .how-visual .svc-anim{position:absolute;inset:0;border:none;background:transparent;border-radius:0; display:flex;align-items:center;justify-content:center;} /* -- Discover & plan: data bars grow, magnifier sweeps in and locks onto the tallest -- */ .dp{position:relative;width:210px;height:130px;} .dp-bars{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;height:100px;} .dp-bar{flex:1;border-radius:4px 4px 0 0;background:rgba(255,255,255,0.14);height:0;} :root[data-theme="light"] .dp-bar{background:rgba(0,0,0,0.12);} .dp-bar.hit{background:rgba(127,227,195,0.3);} .dp-mag{position:absolute;top:-4px;left:2px;width:28px;height:28px;color:var(--text-dim);stroke:currentColor;fill:none;stroke-width:1.8;opacity:0;} .svc-anim.play .dp-bar{animation:dpGrow .6s cubic-bezier(.2,.8,.3,1) forwards;} .svc-anim.play .dp-bar:nth-child(1){animation-delay:.3s;} .svc-anim.play .dp-bar:nth-child(2){animation-delay:.5s;} .svc-anim.play .dp-bar.hit{animation:dpGrow .6s cubic-bezier(.2,.8,.3,1) .7s forwards, dpHitGlow .5s ease 2.9s forwards;} .svc-anim.play .dp-bar:nth-child(4){animation-delay:.9s;} .svc-anim.play .dp-mag{animation:dpMagIn .4s ease 1.3s forwards, dpMagMove 1.5s cubic-bezier(.4,0,.2,1) 1.3s forwards;} @keyframes dpGrow{to{height:var(--h);}} @keyframes dpHitGlow{to{background:var(--mint);box-shadow:0 0 20px rgba(127,227,195,0.5);}} @keyframes dpMagIn{to{opacity:1;}} @keyframes dpMagMove{to{left:calc(100% - 58px);top:16px;transform:scale(1.15);}} /* -- Design & build: code lines type in, then a "Reviewed" check pops -- */ .db{position:relative;width:220px;} .db-code{display:flex;flex-direction:column;gap:11px;margin-bottom:24px;} .db-line{height:9px;border-radius:3px;background:rgba(255,255,255,0.5);width:0;} :root[data-theme="light"] .db-line{background:rgba(0,0,0,0.32);} .db-line.l2{background:rgba(127,227,195,0.5);} .db-check{display:inline-flex;align-items:center;gap:8px;background:rgba(127,227,195,0.14);border:1px solid var(--mint-dim);color:var(--mint);font:800 12px 'Inter';padding:7px 14px;border-radius:20px;opacity:0;transform:scale(.8);} .db-check svg{width:14px;height:14px;stroke:currentColor;stroke-width:3.2;fill:none;stroke-linecap:round;stroke-linejoin:round;} .svc-anim.play .db-line{animation:dbType .5s steps(10) forwards;} .svc-anim.play .db-line.l1{animation-delay:.3s;} .svc-anim.play .db-line.l2{animation-delay:.9s;} .svc-anim.play .db-line.l3{animation-delay:1.35s;} .svc-anim.play .db-check{animation:dbCheckIn .45s cubic-bezier(.34,1.6,.64,1) 2.1s forwards;} @keyframes dbType{to{width:var(--w);}} @keyframes dbCheckIn{to{opacity:1;transform:scale(1);}} /* custom animated cursor */ @media (pointer:fine){ a,button{cursor:none;} .cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);will-change:transform;} .cursor-dot{width:6px;height:6px;border-radius:50%;background:var(--mint);transition:opacity .2s;} .cursor-ring{ width:30px;height:30px;border-radius:50%;border:1px solid var(--mint);opacity:0.7; transition:width .28s cubic-bezier(.16,1,.3,1), height .28s cubic-bezier(.16,1,.3,1), background .28s, border-color .28s, opacity .28s; } /* text links / tabs: outline only, never covers the label */ .cursor-ring.hover{ width:44px;height:44px;background:rgba(127,227,195,0.08);border-color:var(--mint-bright); box-shadow:0 0 18px rgba(127,227,195,0.3); } /* solid CTA buttons only: blend-mode keeps any overlapping label legible (inverts instead of hiding) */ .cursor-ring.hover-btn{ width:52px;height:52px;background:var(--mint);opacity:0.9;border-color:transparent; mix-blend-mode:difference; } } .hamburger{ display:flex;flex-direction:column;justify-content:center;gap:5px; width:40px;height:40px;background:none;border:none;cursor:pointer;z-index:60;position:relative; margin-left:8px; } .hamburger span{ display:block;width:22px;height:2px;background:var(--text);border-radius:2px; transition:transform .3s cubic-bezier(.16,1,.3,1), opacity .3s; } .hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);} .hamburger.open span:nth-child(2){opacity:0;} .hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} /* Ohio-style full-screen numbered mobile menu */ .mobile-menu{ position:fixed;inset:0;background:rgba(0,0,0,0.98); z-index:55;display:flex;align-items:stretch; opacity:0;visibility:hidden;transition:opacity .4s cubic-bezier(.16,1,.3,1); overflow-y:auto; } .mobile-menu.open{opacity:1;visibility:visible;} .mm-close{ position:fixed;top:22px;left:28px;z-index:56;background:none;border:1px solid var(--line); border-radius:50%;width:44px;height:44px;color:var(--text);font-size:22px;line-height:1; cursor:pointer;transition:border-color .25s,color .25s,transform .3s cubic-bezier(.16,1,.3,1); opacity:0;transform:rotate(-90deg) scale(.5); } .mobile-menu.open .mm-close{opacity:1;transform:rotate(0) scale(1);transition-delay:.15s;} .mm-close:hover{border-color:var(--mint);color:var(--mint);} .mm-body{ width:100%;margin:0 auto;padding:120px 48px 60px;display:flex;flex-direction:column; justify-content:space-between;min-height:100%;gap:60px; } .mm-nav{display:flex;flex-direction:column;} .mm-row{border-top:1px solid var(--line-soft);} .mm-row:first-child{border-top:none;} .mm-link-wrap{display:flex;align-items:center;justify-content:space-between;} .mm-link{ font-family:var(--font-display);font-weight:800;font-size:15vw;line-height:1;color:var(--text-dim); padding:18px 0;display:flex;align-items:baseline;gap:18px; transition:color .3s;opacity:0;transform:translateY(24px); } .mobile-menu.open .mm-link{opacity:1;transform:translateY(0);transition:opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1), color .3s;} .mm-row:nth-child(1) .mm-link{transition-delay:.05s;} .mm-row:nth-child(2) .mm-link{transition-delay:.1s;} .mm-row:nth-child(3) .mm-link{transition-delay:.15s;} .mm-row:nth-child(4) .mm-link{transition-delay:.2s;} .mm-row:nth-child(5) .mm-link{transition-delay:.25s;} .mm-link:hover,.mm-link.current{color:var(--mint);} .mm-num{font-family:'Inter';font-weight:700;font-size:13px;color:var(--mint-dim);align-self:flex-start;margin-top:14px;} .mm-expand{ background:none;border:1px solid var(--line);border-radius:50%;width:40px;height:40px; color:var(--mint);font-size:18px;cursor:pointer;flex-shrink:0;transition:border-color .25s,transform .3s cubic-bezier(.16,1,.3,1); } .mm-expand:hover{border-color:var(--mint);} .mm-row-expand.open .mm-expand{transform:rotate(45deg);border-color:var(--mint);} .mm-sub{ max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.16,1,.3,1); display:flex;flex-direction:column;padding-left:0; } .mm-sub-col{display:flex;flex-direction:column;} .mm-sub-cols{display:flex;flex-direction:column;} .mm-row-expand.open .mm-sub{max-height:1400px;} .mm-sub a{ font-family:'Inter';font-weight:700;font-size:18px;color:var(--text-dim);padding:12px 0 12px 44px; border-top:1px solid var(--line-soft);transition:color .2s, padding-left .2s; } .mm-sub-col:first-child a:first-child{border-top:none;} .mm-sub a:hover{color:var(--mint);padding-left:50px;} .mm-sub-label{ display:flex;align-items:center;gap:8px;font-family:'Inter';font-weight:800;font-size:12.5px;letter-spacing:0.06em;text-transform:uppercase; color:var(--mint);padding:18px 0 10px 44px;margin-bottom:2px;border-bottom:1px solid var(--mint-deep); } .mm-sub-label::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--mint);flex-shrink:0;} .mm-sub-divider{display:block;height:1px;background:var(--line-soft);margin:6px 0 6px 44px;} .mm-sub-method-promo{ display:inline-flex;align-items:center;gap:9px;margin:20px 0 8px 44px; font-family:'Inter';font-weight:700;font-size:13.5px;color:var(--text-dim); text-decoration:none;transition:color .25s ease; } .mm-sub-method-promo:hover{color:var(--mint);} .mm-sub-method-promo:hover .mm-sub-method-dot{background:var(--mint);} .mm-sub-method-dot{width:6px;height:6px;border-radius:50%;background:var(--text-dim);flex-shrink:0;transition:background .25s ease;animation:svcMethodPulse 2.2s ease-in-out infinite;} .mm-contact{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:24px;border-top:1px solid var(--line-soft);padding-top:32px;} .mm-contact-label{display:block;color:var(--mint);font-family:'Inter';font-weight:700;font-size:11px;letter-spacing:0.04em;text-transform:uppercase;margin-bottom:12px;} .mm-contact-block a{display:block;color:var(--text-dim);font-size:15px;font-weight:600;margin-bottom:4px;transition:color .2s;} .mm-contact-block a:hover{color:var(--mint);} .mm-social{display:flex;gap:10px;} .mm-social a{ width:38px;height:38px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center; justify-content:center;font-family:'Inter';font-weight:700;font-size:11px;color:var(--text-dim);transition:all .25s; } .mm-social a:hover{border-color:var(--mint);color:var(--mint);} /* Website Design hero: a live template mockup that assembles itself, then scrolls */ .wf-hero{position:relative;display:grid;grid-template-columns:1.15fr 0.85fr;gap:48px;align-items:center;} /* ===== Homepage: dynamic Flex section (mirrors .wf-hero layout) ===== */ .flex-home{padding-top:90px;padding-bottom:90px;} .flex-home .section-head{margin-bottom:20px;} .flex-home-text{color:var(--text-dim);font-size:16px;line-height:1.7;max-width:52ch;margin-bottom:16px;} .flex-home-calc-link{display:inline-block;font-family:'Inter';font-size:14px;font-weight:700;color:var(--mint);margin-bottom:36px;} .flex-home-calc-link:hover{color:var(--mint-bright);} /* Cards and visual are direct grid siblings (heading/intro live above the grid, full-width) — align-items:stretch makes the visual match the cards' own height exactly, instead of centering against a taller column that included the heading text above it. */ .flex-home-inner{display:grid;grid-template-columns:1.15fr 0.85fr;gap:56px;align-items:stretch;} .flex-home-cards{display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);border-radius:16px;overflow:visible;} .flex-home-card{ position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px; padding:26px 28px;background:var(--bg-soft);text-decoration:none;color:var(--text); transition:background .3s ease, color .3s ease, transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease; z-index:1; } .flex-home-card:first-child{border-radius:16px 16px 0 0;} .flex-home-card:last-child{border-radius:0 0 16px 16px;} .flex-home-card + .flex-home-card{border-top:1px solid var(--line);} .flex-home-card h4{font-family:var(--font-display);font-size:28px;font-weight:800;letter-spacing:-0.02em;margin-bottom:6px;transition:color .3s;} .flex-home-dot{color:var(--mint);transition:color .3s;} .flex-home-card:hover .flex-home-dot{color:#0f6e56;} .flex-home-card p{font-size:13.5px;color:var(--text-dim);line-height:1.5;max-width:42ch;transition:color .3s;} .flex-home-card-foot{display:flex;align-items:center;gap:16px;flex:0 0 auto;} .flex-home-price{font:800 12px 'Inter';color:var(--mint);white-space:nowrap;transition:color .3s;} .flex-home-card .arw2{display:inline-flex;color:var(--mint);transition:color .3s, transform .35s cubic-bezier(.16,1,.3,1);} .flex-home-card .arw-svg2{width:20px;height:20px;display:block;} .flex-home-card:hover{ background:#fff;color:#0a0a0a;z-index:2; box-shadow:0 20px 40px -20px rgba(0,0,0,0.8); } .flex-home-card.wob0:hover{transform:translateY(-5px) rotate(-0.7deg);} .flex-home-card.wob1:hover{transform:translateY(-5px) rotate(0.7deg);} .flex-home-card:hover h4{color:#0a0a0a;} .flex-home-card:hover p{color:#3a3a3a;} .flex-home-card:hover .flex-home-price, .flex-home-card:hover .arw2{color:#0f6e56;} .flex-home-card:hover .arw2{transform:translate(4px,-4px);} @media (prefers-reduced-motion: reduce){ .flex-home-card{transition:background .2s ease, color .2s ease;} .flex-home-card:hover{transform:none;} } .flex-home-visual{position:relative;min-height:340px;} .flex-home-visual .svc-anim{position:absolute;inset:0;} @media (max-width:860px){ .flex-home-inner{grid-template-columns:1fr;} .flex-home-visual{min-height:260px;order:-1;} .flex-home-card{flex-direction:column;align-items:flex-start;gap:14px;} .flex-home-card-foot{align-self:stretch;justify-content:space-between;} } .wf-visual{position:relative;height:380px;} .wfm-frame{ position:absolute;inset:0;border:1px solid rgba(255,255,255,0.14); background:#0a0b0b;overflow:hidden;box-shadow:0 30px 70px -30px rgba(0,0,0,0.7); opacity:0;transform:translateY(10px); } .wfm-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid rgba(255,255,255,0.1);} .wfm-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,0.25);} .wfm-dot.mint{background:var(--mint);} .wfm-url{height:14px;flex:1;max-width:130px;margin-left:8px;background:rgba(255,255,255,0.08);} .wfm-viewport{position:relative;height:calc(100% - 39px);overflow:hidden;} .wfm-page{position:absolute;inset:0;top:0;padding:22px 22px 0;} .wfm-hero{margin-bottom:22px;opacity:0;transform:translateY(14px);} .wfm-line{height:9px;background:rgba(255,255,255,0.85);} .wfm-line.mint-bg{background:var(--mint);} .wfm-hero .l1{width:72%;margin-bottom:10px;width:0;} .wfm-hero .l2{height:6px;background:rgba(255,255,255,0.4);width:0;margin-bottom:16px;} .wfm-btn{width:74px;height:22px;background:var(--mint);transform:scale(0);transform-origin:left center;} .wfm-cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;} .wfm-card{ border:1px solid rgba(255,255,255,0.14);background:rgba(255,255,255,0.03); padding:12px;opacity:0; } .wfm-card .wfm-dot-icon{display:block;width:18px;height:18px;background:rgba(127,227,195,0.5);margin-bottom:10px;} .wfm-card .wfm-line{background:rgba(255,255,255,0.55);} .wfm-card .small{height:6px;width:80%;margin-bottom:6px;} .wfm-card .small2{height:6px;width:55%;} .wfm-card.c1{transform:translateX(-40px) rotate(-4deg);} .wfm-card.c2{transform:translateY(-24px);} .wfm-card.c3{transform:translateX(40px) rotate(4deg);} .wfm-footer{margin-top:26px;padding-top:20px;border-top:1px solid rgba(255,255,255,0.1);opacity:0;transform:translateY(14px);} .wfm-footer .wfm-line{width:60%;margin:0 auto 14px;} .wfm-footer .wfm-btn{margin:0 auto;transform-origin:center;} .wfm-cursor{ position:absolute;width:16px;height:16px;left:20px;top:20px;z-index:5;opacity:0; filter:drop-shadow(0 2px 6px rgba(0,0,0,0.6));pointer-events:none; } .wfm-cursor svg{width:100%;height:100%;} .wfm-cursor path{fill:var(--mint);} /* --- animation sequence, gated behind .wf-play so JS can restart it --- */ .wf-visual.wf-play .wfm-frame{animation:wfmFrameIn .6s ease forwards;} .wf-visual.wf-play .wfm-hero{animation:wfmRise .5s ease .5s forwards;} .wf-visual.wf-play .wfm-hero .l1{animation:wfmGrow .5s ease .7s forwards;} .wf-visual.wf-play .wfm-hero .l2{animation:wfmGrow2 .45s ease 1.05s forwards;} .wf-visual.wf-play .wfm-btn{animation:wfmPop .45s cubic-bezier(.34,1.56,.64,1) 1.45s forwards;} .wf-visual.wf-play .wfm-cursor{animation:wfmCursorIntro .5s ease 1.9s forwards, wfmCursorScroll 9s cubic-bezier(.65,0,.35,1) 4.2s forwards;} .wf-visual.wf-play .wfm-card.c1{animation:wfmDropIn .55s cubic-bezier(.34,1.4,.64,1) 2.15s forwards;} .wf-visual.wf-play .wfm-card.c2{animation:wfmDropIn .55s cubic-bezier(.34,1.4,.64,1) 2.4s forwards;} .wf-visual.wf-play .wfm-card.c3{animation:wfmDropIn .55s cubic-bezier(.34,1.4,.64,1) 2.65s forwards;} .wf-visual.wf-play .wfm-footer{animation:wfmRise .5s ease 3.2s forwards;} .wf-visual.wf-play .wfm-footer .wfm-btn{animation:wfmPop .4s cubic-bezier(.34,1.56,.64,1) 3.5s forwards;} .wf-visual.wf-play .wfm-page{animation:wfmScroll 9s cubic-bezier(.65,0,.35,1) 4.2s forwards;} @keyframes wfmFrameIn{to{opacity:1;transform:translateY(0);}} @keyframes wfmRise{to{opacity:1;transform:translateY(0);}} @keyframes wfmGrow{to{width:72%;}} @keyframes wfmGrow2{to{width:48%;}} @keyframes wfmPop{to{transform:scale(1);}} @keyframes wfmDropIn{to{opacity:1;transform:translate(0,0) rotate(0deg);}} @keyframes wfmCursorIntro{0%{opacity:0;left:20px;top:20px;}100%{opacity:1;left:150px;top:170px;}} @keyframes wfmCursorScroll{ 0%{opacity:1;left:150px;top:170px;} 8%{opacity:1;left:calc(100% - 34px);top:40px;} 45%{opacity:1;left:calc(100% - 34px);top:210px;} 55%{opacity:1;left:calc(100% - 34px);top:210px;} 92%{opacity:1;left:calc(100% - 34px);top:40px;} 100%{opacity:0;left:calc(100% - 34px);top:40px;} } @keyframes wfmScroll{ 0%{transform:translateY(0);} 45%{transform:translateY(-120px);} 55%{transform:translateY(-120px);} 100%{transform:translateY(0);} } @media (prefers-reduced-motion: reduce){ .wf-visual .wfm-frame,.wf-visual .wfm-hero,.wf-visual .wfm-footer{opacity:1;transform:none;} .wf-visual .wfm-hero .l1{width:72%;} .wf-visual .wfm-hero .l2{width:48%;} .wf-visual .wfm-btn{transform:scale(1);} .wf-visual .wfm-card{opacity:1;transform:none;} .wf-visual .wfm-cursor{display:none;} .wf-visual.wf-play *{animation:none !important;} } /* ===== Service hero micro-animations (per-slug, reuse .wf-hero / .wf-visual) ===== */ .svc-anim{position:absolute;inset:0;border:1px solid var(--line);border-radius:16px;overflow:hidden; background:radial-gradient(130% 130% at 100% 0%, rgba(127,227,195,0.10), transparent 55%), #0d0f0e;} :root[data-theme="light"] .svc-anim{background:radial-gradient(130% 130% at 100% 0%, rgba(127,227,195,0.16), transparent 55%), #f4f7f6;} /* -- E-Commerce: add to cart + counter -- */ .ec{position:absolute;inset:0;} .ec-head{position:absolute;top:0;left:0;right:0;height:46px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid var(--line);} .ec-brand{width:46px;height:9px;border-radius:3px;background:var(--mint);opacity:.85;} .ec-cart{position:relative;width:22px;height:22px;color:var(--text);} .ec-cart svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;} .ec-badge{position:absolute;top:-7px;right:-9px;min-width:16px;height:16px;border-radius:9px;background:var(--mint);color:#0a1512;text-align:center;overflow:hidden;} .ec-badge-in{display:flex;flex-direction:column;transform:translateY(0);} .ec-badge i{display:block;height:16px;font:800 10px/16px 'Inter';font-style:normal;} .ec-card{position:absolute;top:74px;left:22px;right:22px;display:flex;gap:14px;align-items:center;background:rgba(255,255,255,0.03);border:1px solid var(--line);border-radius:12px;padding:14px;} :root[data-theme="light"] .ec-card{background:rgba(0,0,0,0.02);} .ec-thumb{width:64px;height:64px;border-radius:8px;flex:0 0 auto;background:linear-gradient(135deg, rgba(127,227,195,0.55), rgba(127,227,195,0.12));} .ec-info{flex:1;display:flex;flex-direction:column;gap:9px;} .ec-nl{height:8px;width:80%;border-radius:3px;background:rgba(255,255,255,0.55);} :root[data-theme="light"] .ec-nl{background:rgba(0,0,0,0.32);} .ec-nl.s{width:50%;} .ec-price{font:800 15px var(--font-display);color:var(--mint);margin-top:2px;} .ec-add{position:absolute;left:22px;right:22px;bottom:34px;height:42px;border-radius:9px;border:none;background:var(--mint);color:#0a1512;font:800 13px 'Inter';cursor:default;display:flex;align-items:center;justify-content:center;} .ec-fly{position:absolute;left:50%;top:60%;width:16px;height:16px;border-radius:50%;background:var(--mint);opacity:0;box-shadow:0 0 16px rgba(127,227,195,0.7);} .ec-toast{position:absolute;left:22px;right:22px;bottom:34px;height:42px;border-radius:9px;display:flex;align-items:center;justify-content:center;gap:8px;background:rgba(127,227,195,0.14);border:1px solid var(--mint-dim);color:var(--mint);font:800 13px 'Inter';opacity:0;} .svc-anim.play .ec-add{animation:ecPress .5s ease 2s;} .svc-anim.play .ec-fly{animation:ecFly 1s cubic-bezier(.5,0,.6,1) 2.35s forwards;} .svc-anim.play .ec-badge{animation:ecPop .45s cubic-bezier(.34,1.6,.64,1) 3.15s;} .svc-anim.play .ec-badge-in{animation:ecCount .01s linear 3.25s forwards;} .svc-anim.play .ec-toast{animation:ecToast 3.4s ease 3.2s;} @keyframes ecPress{0%,100%{transform:scale(1);}45%{transform:scale(.95);}} @keyframes ecFly{0%{opacity:0;left:50%;top:60%;transform:translate(-50%,-50%) scale(1);}12%{opacity:1;}100%{opacity:1;left:calc(100% - 26px);top:16px;transform:translate(-50%,-50%) scale(.35);}} @keyframes ecPop{0%,100%{transform:scale(1);}45%{transform:scale(1.45);}} @keyframes ecCount{to{transform:translateY(-16px);}} @keyframes ecToast{0%{opacity:0;transform:translateY(8px);}12%{opacity:1;transform:translateY(0);}82%{opacity:1;}100%{opacity:0;}} /* -- SEO: query + rank climb + traffic bars -- */ .seo{position:absolute;inset:0;padding:24px;} .seo-search{display:flex;align-items:center;gap:10px;height:42px;padding:0 14px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,0.03);} :root[data-theme="light"] .seo-search{background:rgba(0,0,0,0.02);} .seo-search svg{width:16px;height:16px;stroke:var(--text-dim);fill:none;stroke-width:2;flex:0 0 auto;} .seo-typed{height:9px;border-radius:3px;background:rgba(255,255,255,0.6);width:0;} :root[data-theme="light"] .seo-typed{background:rgba(0,0,0,0.4);} .seo-caret{width:2px;height:16px;background:var(--mint);margin-left:-4px;} .seo-mid{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-top:30px;} .seo-rlabel{display:block;font:800 10px/1 'Inter';letter-spacing:.18em;color:var(--text-dim);text-transform:uppercase;margin-bottom:10px;} .seo-rnum{display:flex;align-items:flex-start;gap:4px;} .seo-hash{font:800 22px/54px var(--font-display);color:var(--text-dim);} .seo-slot{height:54px;overflow:hidden;} .seo-digits{display:flex;flex-direction:column;transform:translateY(0);} .seo-digits i{height:54px;font:800 46px/54px var(--font-display);font-style:normal;color:var(--mint);} .seo-bars{display:flex;align-items:flex-end;gap:9px;height:96px;} .seo-bars span{width:16px;border-radius:4px 4px 0 0;height:8px;background:rgba(255,255,255,0.18);} :root[data-theme="light"] .seo-bars span{background:rgba(0,0,0,0.12);} .seo-bars span:last-child{background:var(--mint);} .svc-anim.play .seo-typed{animation:seoType 1.3s steps(16) .5s forwards;} .svc-anim.play .seo-caret{animation:seoBlink .6s step-end 7;} .svc-anim.play .seo-digits{animation:seoCount 3.6s steps(6) 2.2s forwards;} .svc-anim.play .seo-bars span{animation:seoBar .7s cubic-bezier(.2,.8,.3,1) forwards;} .svc-anim.play .seo-bars span:nth-child(1){animation-delay:2.2s;--h:26px;} .svc-anim.play .seo-bars span:nth-child(2){animation-delay:2.45s;--h:44px;} .svc-anim.play .seo-bars span:nth-child(3){animation-delay:2.7s;--h:36px;} .svc-anim.play .seo-bars span:nth-child(4){animation-delay:2.95s;--h:64px;} .svc-anim.play .seo-bars span:nth-child(5){animation-delay:3.2s;--h:92px;} @keyframes seoType{from{width:0;}to{width:120px;}} @keyframes seoBlink{0%,100%{opacity:1;}50%{opacity:0;}} @keyframes seoCount{to{transform:translateY(-324px);}} @keyframes seoBar{to{height:var(--h);}} /* -- E-Mail Marketing: compose -> send -> delivered -> open rate -- */ .em{position:absolute;inset:0;padding:22px;} .em-compose{position:relative;border:1px solid var(--line);border-radius:12px;padding:16px;background:rgba(255,255,255,0.03);} :root[data-theme="light"] .em-compose{background:rgba(0,0,0,0.02);} .em-line{height:8px;border-radius:3px;background:rgba(255,255,255,0.5);margin-bottom:10px;} :root[data-theme="light"] .em-line{background:rgba(0,0,0,0.3);} .em-line.l1{width:70%;} .em-line.l2{width:45%;margin-bottom:16px;} .em-send{display:inline-flex;align-items:center;gap:8px;background:var(--mint);color:#0a1512;border:none;border-radius:8px;padding:9px 16px;font:800 12px 'Inter';} .em-send svg{fill:currentColor;} .em-plane{position:absolute;left:42%;top:118px;color:var(--mint);opacity:0;} .em-plane svg{fill:currentColor;} .em-inboxes{margin-top:22px;display:flex;flex-direction:column;gap:11px;} .em-row{display:flex;align-items:center;gap:12px;opacity:.45;} .em-ava{width:28px;height:28px;border-radius:50%;background:rgba(127,227,195,0.25);flex:0 0 auto;} .em-rl{flex:1;height:8px;border-radius:3px;background:rgba(255,255,255,0.22);} :root[data-theme="light"] .em-rl{background:rgba(0,0,0,0.18);} .em-tick{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line);flex:0 0 auto;display:flex;align-items:center;justify-content:center;} .em-tick svg{stroke:#0a1512;stroke-width:3.4;fill:none;opacity:0;} .em-stat{position:absolute;left:22px;right:22px;bottom:24px;} .em-stat-top{display:flex;justify-content:space-between;font:800 11px 'Inter';color:var(--text-dim);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px;} .em-pct{color:var(--mint);} .em-track{height:8px;border-radius:5px;background:rgba(255,255,255,0.1);overflow:hidden;} .em-fill{display:block;height:100%;width:0;background:var(--mint);border-radius:5px;} .svc-anim.play .em-send{animation:emSend .5s ease 1.6s;} .svc-anim.play .em-plane{animation:emPlane 1.1s cubic-bezier(.5,0,.5,1) 1.9s forwards;} .svc-anim.play .em-row{animation:emDeliver .4s ease forwards;} .svc-anim.play .em-row:nth-child(1){animation-delay:3s;} .svc-anim.play .em-row:nth-child(2){animation-delay:3.25s;} .svc-anim.play .em-row:nth-child(3){animation-delay:3.5s;} .svc-anim.play .em-tick{animation:emTickBg .3s ease forwards;} .svc-anim.play .em-row:nth-child(1) .em-tick{animation-delay:3.1s;} .svc-anim.play .em-row:nth-child(2) .em-tick{animation-delay:3.35s;} .svc-anim.play .em-row:nth-child(3) .em-tick{animation-delay:3.6s;} .svc-anim.play .em-tick svg{animation:emCheck .3s ease forwards;} .svc-anim.play .em-row:nth-child(1) .em-tick svg{animation-delay:3.15s;} .svc-anim.play .em-row:nth-child(2) .em-tick svg{animation-delay:3.4s;} .svc-anim.play .em-row:nth-child(3) .em-tick svg{animation-delay:3.65s;} .svc-anim.play .em-fill{animation:emFill 1.2s cubic-bezier(.3,.8,.3,1) 3.9s forwards;} @keyframes emSend{0%,100%{transform:scale(1);}45%{transform:scale(.94);}} @keyframes emPlane{0%{opacity:0;left:42%;top:118px;transform:scale(.85) rotate(6deg);}15%{opacity:1;}100%{opacity:0;left:58%;top:206px;transform:scale(.5) rotate(6deg);}} @keyframes emDeliver{to{opacity:1;}} @keyframes emCheck{to{opacity:1;}} @keyframes emTickBg{to{background:var(--mint);border-color:var(--mint);}} @keyframes emFill{to{width:68%;}} /* -- Social Media: reactions + floating hearts + likes -- */ .sm{position:absolute;inset:0;padding:20px 22px;} .sm-post{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:rgba(255,255,255,0.03);} :root[data-theme="light"] .sm-post{background:rgba(0,0,0,0.02);} .sm-head{display:flex;align-items:center;gap:10px;padding:12px 14px;} .sm-ava{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--mint),rgba(127,227,195,0.3));flex:0 0 auto;} .sm-name{height:8px;width:96px;border-radius:3px;background:rgba(255,255,255,0.4);} :root[data-theme="light"] .sm-name{background:rgba(0,0,0,0.3);} .sm-media{height:116px;background:radial-gradient(circle at 32% 30%, rgba(127,227,195,0.24), rgba(255,255,255,0.03));} .sm-actions{display:flex;align-items:center;gap:16px;padding:14px;} .sm-heart,.sm-cmt,.sm-share{color:var(--text-dim);display:inline-flex;} .sm-heart svg,.sm-cmt svg,.sm-share svg{stroke:currentColor;fill:none;stroke-width:1.8;} .sm-likes{margin-left:auto;font:800 12px 'Inter';color:var(--text-dim);} .sm-likes b{color:var(--mint);} .sm-float{position:absolute;bottom:66px;color:var(--mint);opacity:0;} .sm-float svg{width:100%;height:100%;fill:currentColor;} .sm-float.f1{left:28px;width:16px;height:16px;} .sm-float.f2{left:44px;width:22px;height:22px;} .sm-float.f3{left:62px;width:14px;height:14px;} .svc-anim.play .sm-heart{animation:smHeart .5s cubic-bezier(.34,1.6,.64,1) 1.8s forwards;} .svc-anim.play .sm-float{animation:smFloat 2.4s ease-out forwards;} .svc-anim.play .sm-float.f1{animation-delay:2s;} .svc-anim.play .sm-float.f2{animation-delay:2.4s;} .svc-anim.play .sm-float.f3{animation-delay:2.8s;} .svc-anim.play .sm-likes{animation:smLikes .5s ease 2.2s forwards;} @keyframes smHeart{to{color:var(--mint);transform:scale(1.18);}} @keyframes smFloat{0%{opacity:0;transform:translateY(0) scale(.6);}20%{opacity:1;}100%{opacity:0;transform:translateY(-64px) scale(1);}} @keyframes smLikes{0%{transform:translateY(4px);opacity:.4;}100%{transform:translateY(0);opacity:1;}} /* -- Website Maintenance: health checks + uptime -- */ .mt{position:absolute;inset:0;padding:22px;} .mt-head{display:flex;align-items:center;gap:12px;margin-bottom:20px;} .mt-shield{color:var(--mint);flex:0 0 auto;display:inline-flex;} .mt-shield svg{stroke:currentColor;fill:none;stroke-width:1.8;} .mt-status{font:800 13px var(--font-display);color:var(--text);} .mt-status small{display:block;font:600 11px 'Inter';color:var(--mint);margin-top:3px;} .mt-checks{display:flex;flex-direction:column;gap:12px;margin-bottom:22px;} .mt-check{display:flex;align-items:center;gap:12px;} .mt-box{width:22px;height:22px;border-radius:6px;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;flex:0 0 auto;} .mt-box svg{stroke:#0a1512;stroke-width:3.4;fill:none;opacity:0;} .mt-cl{height:8px;border-radius:3px;background:rgba(255,255,255,0.3);} :root[data-theme="light"] .mt-cl{background:rgba(0,0,0,0.25);} .mt-check:nth-child(1) .mt-cl{width:120px;} .mt-check:nth-child(2) .mt-cl{width:150px;} .mt-check:nth-child(3) .mt-cl{width:100px;} .mt-up-top{display:flex;justify-content:space-between;font:800 11px 'Inter';color:var(--text-dim);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px;} .mt-up-pct{color:var(--mint);} .mt-track{height:8px;border-radius:5px;background:rgba(255,255,255,0.1);overflow:hidden;} .mt-fill{display:block;height:100%;width:0;background:var(--mint);border-radius:5px;} .svc-anim.play .mt-shield{animation:mtPulse 2s ease infinite;} .svc-anim.play .mt-box{animation:mtBox .3s ease forwards;} .svc-anim.play .mt-check:nth-child(1) .mt-box{animation-delay:1.4s;} .svc-anim.play .mt-check:nth-child(2) .mt-box{animation-delay:2s;} .svc-anim.play .mt-check:nth-child(3) .mt-box{animation-delay:2.6s;} .svc-anim.play .mt-box svg{animation:mtCheck .3s ease forwards;} .svc-anim.play .mt-check:nth-child(1) .mt-box svg{animation-delay:1.5s;} .svc-anim.play .mt-check:nth-child(2) .mt-box svg{animation-delay:2.1s;} .svc-anim.play .mt-check:nth-child(3) .mt-box svg{animation-delay:2.7s;} .svc-anim.play .mt-fill{animation:mtFill 1.4s cubic-bezier(.3,.8,.3,1) 3.1s forwards;} @keyframes mtPulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.5;transform:scale(.92);}} @keyframes mtBox{to{background:var(--mint);border-color:var(--mint);}} @keyframes mtCheck{to{opacity:1;}} @keyframes mtFill{to{width:99%;}} /* -- Brand Identities: mark assembles + wordmark + palette -- */ /* -- Brand Identities: a logotype drawn with the pen tool — guides fade in, the glyph strokes on, anchor nodes pop along it, control handles extend, then the finished mark inks to mint and the scaffold fades. -- */ .bi{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;} .bi-svg{width:76%;max-width:220px;height:auto;overflow:visible;} .bi-guide{stroke:var(--mint);stroke-width:1;stroke-dasharray:4 5;opacity:0;} .svc-anim.play .bi-guide{animation:biGuide .6s ease .1s forwards;} .svc-anim.play .bi-guide.g2{animation-delay:.22s;} .svc-anim.play .bi-guide.g3{animation-delay:.34s;} .svc-anim.play .bi-guide.g4{animation-delay:.46s;} .bi-glyph{fill:none;stroke:var(--text);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;} :root[data-theme="light"] .bi-glyph{stroke:#101413;} .bi-bowl{stroke-dasharray:300;stroke-dashoffset:300;} .bi-stem{stroke-dasharray:92;stroke-dashoffset:92;} .svc-anim.play .bi-bowl{animation:biDraw 1.2s ease .7s forwards, biInk .6s ease 4s forwards;} .svc-anim.play .bi-stem{animation:biDraw .6s ease 1.9s forwards, biInk .6s ease 4s forwards;} .bi-handle{opacity:0;} .bi-handle-bar{stroke:var(--mint);stroke-width:1.4;} .bi-handle-dot{fill:var(--bg);stroke:var(--mint);stroke-width:1.4;} .svc-anim.play .bi-handle{animation:biHandle .5s ease forwards, biFade .5s ease 4.7s forwards;} .svc-anim.play .bi-handle.h1{animation-delay:3s, 4.7s;} .svc-anim.play .bi-handle.h2{animation-delay:3.3s, 4.7s;} .bi-node{fill:var(--mint);transform-box:fill-box;transform-origin:center;transform:scale(0);} .bi-node.n5,.bi-node.n6{fill:var(--bg);stroke:var(--mint);stroke-width:1.6;} .svc-anim.play .bi-node{animation:biNode .4s cubic-bezier(.34,1.6,.64,1) forwards, biFade .5s ease 4.7s forwards;} .svc-anim.play .bi-node.n1{animation-delay:2.3s, 4.7s;} .svc-anim.play .bi-node.n2{animation-delay:2.45s, 4.7s;} .svc-anim.play .bi-node.n3{animation-delay:2.6s, 4.7s;} .svc-anim.play .bi-node.n4{animation-delay:2.75s, 4.7s;} .svc-anim.play .bi-node.n5{animation-delay:2.9s, 4.7s;} .svc-anim.play .bi-node.n6{animation-delay:3.05s, 4.7s;} @keyframes biGuide{to{opacity:.4;}} @keyframes biDraw{to{stroke-dashoffset:0;}} @keyframes biInk{to{stroke:var(--mint);}} @keyframes biHandle{to{opacity:1;}} @keyframes biNode{to{transform:scale(1);}} @keyframes biFade{to{opacity:0;}} /* Vector-editor chrome shared by the creative-service heroes (Brand Identities, Packaging): a tool rail on the left plus canvas labels, so the card reads as a design app. The active tool is animated per page. */ .cv-rail{position:absolute;left:18px;top:50%;transform:translateY(-50%); display:flex;flex-direction:column;gap:5px;padding:7px 6px;border:1px solid var(--line); border-radius:13px;background:rgba(255,255,255,0.02);opacity:0;} :root[data-theme="light"] .cv-rail{background:rgba(0,0,0,0.02);} .svc-anim.play .cv-rail{animation:biGuide .6s ease .2s forwards;} .cv-tool{width:30px;height:30px;display:flex;align-items:center;justify-content:center; border-radius:8px;color:var(--text-dim);} .cv-tool svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;} .cv-tool.cv-cursor svg{fill:currentColor;stroke:none;} .cv-file,.cv-zoom{position:absolute;font-family:'JetBrains Mono',monospace;font-size:10.5px; letter-spacing:.03em;color:var(--text-dim);opacity:.55;} .cv-file{left:18px;bottom:14px;} .cv-zoom{right:18px;top:14px;} /* Active-tool highlight timing — Brand Identities */ .svc-anim.play .t-pen{animation:biTool 1.9s ease .7s forwards;} .svc-anim.play .t-node{animation:biTool 1.5s ease 2.4s forwards;} .svc-anim.play .t-move{animation:biToolHold 1s ease 3.9s forwards;} @keyframes biTool{0%,100%{background:transparent;color:var(--text-dim);} 12%,88%{background:rgba(127,227,195,0.16);color:var(--mint);}} @keyframes biToolHold{0%{background:transparent;color:var(--text-dim);} 22%,100%{background:rgba(127,227,195,0.16);color:var(--mint);}} /* -- Packaging Design: a carton dieline drawn in a design app — cut lines stroke on, fold creases dash in, then the label artwork prints. -- */ .pk{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;} .pk-svg{width:78%;max-width:280px;height:auto;overflow:visible;} .pk-cut{fill:none;stroke:var(--text);stroke-width:2;stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:1400;stroke-dashoffset:1400;} :root[data-theme="light"] .pk-cut{stroke:#101413;} .pk-fold{stroke:var(--mint);stroke-width:1.4;stroke-dasharray:5 4;opacity:0;} .pk-ink{fill:var(--mint);opacity:0;} .pk-ink.p1{opacity:0;} .pk-barcode rect{fill:var(--text);} :root[data-theme="light"] .pk-barcode rect{fill:#101413;} .svc-anim.play .pk-cut{animation:pkCut 2s ease .7s forwards, pkInk .6s ease 5.4s forwards;} .svc-anim.play .pk-fold{animation:pkFold .5s ease forwards;} .svc-anim.play .pk-fold:nth-child(1){animation-delay:2.7s;} .svc-anim.play .pk-fold:nth-child(2){animation-delay:2.85s;} .svc-anim.play .pk-fold:nth-child(3){animation-delay:3s;} .svc-anim.play .pk-fold:nth-child(4){animation-delay:3.15s;} .svc-anim.play .pk-fold:nth-child(5){animation-delay:3.3s;} .svc-anim.play .pk-ink{animation:pkPrint .5s ease forwards;} .svc-anim.play .pk-ink.p1{animation-delay:4.3s;} .svc-anim.play .pk-ink.p2{animation-delay:4.5s;} .svc-anim.play .pk-ink.p3{animation-delay:4.65s;} .svc-anim.play .pk-ink.p4{animation-delay:4.85s;} @keyframes pkCut{to{stroke-dashoffset:0;}} @keyframes pkInk{to{stroke:var(--mint);}} @keyframes pkFold{to{opacity:.85;}} @keyframes pkPrint{to{opacity:1;}} /* Active-tool highlight timing — Packaging */ .svc-anim.play .pt-pen{animation:biTool 2.2s ease .7s forwards;} .svc-anim.play .pt-crease{animation:biTool 1.5s ease 2.7s forwards;} .svc-anim.play .pt-text{animation:biTool 1.1s ease 4.3s forwards;} .svc-anim.play .pt-move{animation:biToolHold 1s ease 5.5s forwards;} /* -- Publications / TV: play + broadcast waves + lines -- */ .pt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;} .pt-screen{position:relative;width:190px;height:120px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,0.03);display:flex;align-items:center;justify-content:center;overflow:hidden;} :root[data-theme="light"] .pt-screen{background:rgba(0,0,0,0.02);} .pt-wave{position:absolute;width:44px;height:44px;border-radius:50%;border:2px solid var(--mint);opacity:0;} .pt-play{position:relative;z-index:2;width:44px;height:44px;border-radius:50%;background:var(--mint);display:flex;align-items:center;justify-content:center;} .pt-play svg{fill:#0a1512;margin-left:3px;} .pt-lines{display:flex;flex-direction:column;gap:9px;align-items:center;} .pt-lines span{height:8px;border-radius:3px;background:rgba(255,255,255,0.35);width:0;} :root[data-theme="light"] .pt-lines span{background:rgba(0,0,0,0.28);} .pt-lines span:nth-child(1){--w:160px;} .pt-lines span:nth-child(2){--w:130px;} .pt-lines span:nth-child(3){--w:100px;} .svc-anim.play .pt-play{animation:ptPlay 1.6s ease-in-out 1.6s infinite;} .svc-anim.play .pt-wave{animation:ptWave 2.4s ease-out infinite;} .svc-anim.play .pt-wave.w1{animation-delay:1.8s;} .svc-anim.play .pt-wave.w2{animation-delay:2.6s;} .svc-anim.play .pt-wave.w3{animation-delay:3.4s;} .svc-anim.play .pt-lines span{animation:ptLine .5s ease forwards;} .svc-anim.play .pt-lines span:nth-child(1){animation-delay:2s;} .svc-anim.play .pt-lines span:nth-child(2){animation-delay:2.2s;} .svc-anim.play .pt-lines span:nth-child(3){animation-delay:2.4s;} @keyframes ptPlay{0%,100%{transform:scale(1);}50%{transform:scale(1.08);}} @keyframes ptWave{0%{opacity:.7;transform:scale(.5);}100%{opacity:0;transform:scale(2.6);}} @keyframes ptLine{to{width:var(--w);}} /* -- FlexSite / FlexShop: one-off fee crossed out -> monthly meter fills -> live immediately -- */ .flx{position:absolute;inset:0;padding:26px;} .flx-old{position:absolute;top:26px;left:26px;right:26px;display:flex;align-items:baseline;justify-content:space-between; padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,0.03);opacity:0;} :root[data-theme="light"] .flx-old{background:rgba(0,0,0,0.02);} .flx-old-amt{position:relative;font:800 16px var(--font-display);color:var(--text-dim);} .flx-strike{position:absolute;left:-3px;right:-3px;top:50%;height:2px;background:var(--mint);transform:scaleX(0);transform-origin:left;} .flx-old-label{font:700 10px 'Inter';text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);} .flx-live{position:absolute;top:26px;left:26px;display:inline-flex;align-items:center;gap:6px; background:rgba(127,227,195,0.14);border:1px solid var(--mint-dim);color:var(--mint); font:800 11px 'Inter';padding:6px 12px;border-radius:20px;opacity:0;transform:scale(.8);} .flx-live svg{width:12px;height:12px;stroke:currentColor;stroke-width:3.4;fill:none;stroke-linecap:round;stroke-linejoin:round;} .flx-ticks{position:absolute;left:26px;right:26px;bottom:96px;height:6px;display:flex;justify-content:space-between;align-items:center;} .flx-ticks span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.18);} :root[data-theme="light"] .flx-ticks span{background:rgba(0,0,0,0.15);} .flx-track{position:absolute;left:26px;right:26px;bottom:96px;height:6px;border-radius:3px;background:rgba(255,255,255,0.08);overflow:hidden;} :root[data-theme="light"] .flx-track{background:rgba(0,0,0,0.06);} .flx-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:3px;background:rgba(127,227,195,0.35);} .flx-now{position:absolute;left:26px;bottom:40px;display:flex;align-items:baseline;gap:4px;opacity:0;} .flx-now-amt{font:800 28px var(--font-display);color:var(--mint);} .flx-now-label{font:700 13px 'Inter';color:var(--text-dim);} .svc-anim.play .flx-old{animation:flxOldIn .5s ease .3s forwards, flxOldOut .5s ease 2.1s forwards;} .svc-anim.play .flx-strike{animation:flxStrike .6s ease 1s forwards;} .svc-anim.play .flx-live{animation:flxLiveIn .45s cubic-bezier(.34,1.6,.64,1) 2.7s forwards;} .svc-anim.play .flx-now{animation:flxNowIn .4s ease 2.5s forwards;} .svc-anim.play .flx-fill{animation:flxFill 4.4s steps(6) 2.6s forwards;} .svc-anim.play .flx-ticks span{animation:flxTick .5s ease forwards;} .svc-anim.play .flx-ticks span:nth-child(1){animation-delay:2.6s;} .svc-anim.play .flx-ticks span:nth-child(2){animation-delay:3.33s;} .svc-anim.play .flx-ticks span:nth-child(3){animation-delay:4.06s;} .svc-anim.play .flx-ticks span:nth-child(4){animation-delay:4.8s;} .svc-anim.play .flx-ticks span:nth-child(5){animation-delay:5.53s;} .svc-anim.play .flx-ticks span:nth-child(6){animation-delay:6.26s;} @keyframes flxOldIn{to{opacity:1;}} @keyframes flxOldOut{to{opacity:0;transform:translateY(-6px);}} @keyframes flxStrike{to{transform:scaleX(1);}} @keyframes flxLiveIn{to{opacity:1;transform:scale(1);}} @keyframes flxNowIn{to{opacity:1;}} @keyframes flxFill{to{width:100%;}} @keyframes flxTick{45%{background:var(--mint);transform:scale(1.6);}100%{background:var(--mint);transform:scale(1);}} .flx-fly{position:absolute;left:18%;top:54px;width:8px;height:8px;border-radius:50%; background:var(--mint);opacity:0;box-shadow:0 0 10px rgba(127,227,195,0.7);} .svc-anim.play .flx-fly{animation:flxFly .45s cubic-bezier(.4,0,.4,1) 2.15s forwards;} @keyframes flxFly{0%{opacity:0;left:18%;top:54px;transform:scale(1);} 15%{opacity:1;}100%{opacity:0;left:26px;top:calc(100% - 102px);transform:scale(.4);}} /* -- FlexCare: calm monitoring line -> a blip appears -> caught before it matters -- */ .fc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;} .fc-status{display:inline-flex;align-items:center;gap:8px;font:700 12px 'Inter';color:var(--text-dim);} .fc-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,0.35);} :root[data-theme="light"] .fc-dot{background:rgba(0,0,0,0.3);} .fc-status-txt{display:inline-block;overflow:hidden;height:15px;vertical-align:middle;} .fc-status-in{display:flex;flex-direction:column;transform:translateY(0);} .fc-status-in i{display:block;height:15px;line-height:15px;font-style:normal;} .fc-status-in i:last-child{color:var(--mint);} .fc-pulse{width:78%;height:70px;overflow:visible;} .fc-line-bg{stroke:rgba(255,255,255,0.1);stroke-width:2;} :root[data-theme="light"] .fc-line-bg{stroke:rgba(0,0,0,0.08);} .fc-line{stroke:var(--mint);stroke-width:2;stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:420;stroke-dashoffset:420;} .fc-shield{width:40px;height:40px;border-radius:50%;background:rgba(127,227,195,0.14);border:1px solid var(--mint-dim); display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.6);margin-top:-8px;} .fc-shield svg{width:18px;height:18px;stroke:var(--mint);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;} .svc-anim.play .fc-line{animation:fcDraw 3.4s linear .3s forwards;} .svc-anim.play .fc-dot{animation:fcDotPulse 1.1s ease-in-out 3.9s;} .svc-anim.play .fc-status-in{animation:fcStatusSwap .01s linear 3.9s forwards;} .svc-anim.play .fc-shield{animation:fcShieldIn .45s cubic-bezier(.34,1.6,.64,1) 3.9s forwards, fcShieldOut .4s ease 6.6s forwards;} @keyframes fcDraw{to{stroke-dashoffset:0;}} @keyframes fcDotPulse{0%,100%{background:rgba(255,255,255,0.35);}30%{background:var(--mint);box-shadow:0 0 10px rgba(127,227,195,0.7);}} @keyframes fcStatusSwap{to{transform:translateY(-15px);}} @keyframes fcShieldIn{to{opacity:1;transform:scale(1);}} @keyframes fcShieldOut{to{opacity:0;transform:scale(.7) translateY(-6px);}} .fc-scan{fill:var(--mint);opacity:0;} .svc-anim.play .fc-scan{animation:fcScan 3.4s linear .3s forwards, fcScanPulse .5s ease 1.6s, fcScanOut .3s ease 3.5s forwards;} @keyframes fcScan{0%{cx:0;cy:50;opacity:1;}29.6%{cx:120;cy:50;}37.5%{cx:132;cy:20;} 52.1%{cx:144;cy:78;}59.6%{cx:156;cy:50;}100%{cx:320;cy:50;}} @keyframes fcScanPulse{0%,100%{r:4;}50%{r:6.5;}} @keyframes fcScanOut{to{opacity:0;}} /* -- Paid Media: SERP ad → cursor click → CPC bid → conversion -- */ .pm{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:0 8%;} .pm-serp{position:relative;width:100%;max-width:230px;border:1px solid var(--line);border-radius:10px;padding:14px 14px 16px;background:rgba(255,255,255,0.02);} :root[data-theme="light"] .pm-serp{background:rgba(0,0,0,0.02);} .pm-ad{display:inline-block;font:700 10px 'JetBrains Mono',monospace;color:var(--mint);border:1px solid var(--mint-dim);border-radius:4px;padding:1px 6px;margin-bottom:10px;letter-spacing:.06em;} .pm-line{display:block;height:8px;border-radius:4px;background:rgba(255,255,255,0.14);} :root[data-theme="light"] .pm-line{background:rgba(0,0,0,0.1);} .pm-l1{width:80%;margin-bottom:7px;} .pm-l2{width:55%;} .pm-cursor{position:absolute;right:34px;bottom:20px;width:16px;height:16px;opacity:0;transform:translate(10px,10px);} .pm-cursor svg{width:16px;height:16px;fill:var(--text);stroke:var(--bg);stroke-width:1;} .pm-ripple{position:absolute;right:30px;bottom:16px;width:10px;height:10px;border-radius:50%;border:1.5px solid var(--mint);opacity:0;transform:scale(.3);} .pm-meter{display:flex;align-items:center;gap:10px;font:700 12px 'Inter';color:var(--text-dim);} .pm-meter-label{font:700 10px 'JetBrains Mono',monospace;letter-spacing:.08em;} .pm-bid{display:inline-block;overflow:hidden;height:16px;min-width:44px;text-align:left;} .pm-bid i{display:block;height:16px;line-height:16px;font-style:normal;color:var(--mint);} .pm-conv{display:inline-flex;align-items:center;gap:7px;font:700 12px 'Inter';color:var(--mint);opacity:0;transform:translateY(6px);} .pm-conv svg{width:16px;height:16px;fill:none;stroke:var(--mint);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:24;stroke-dashoffset:24;} .svc-anim.play .pm-cursor{animation:pmCursorIn .7s cubic-bezier(.4,0,.2,1) .5s forwards, pmCursorOut .4s ease 5.8s forwards;} .svc-anim.play .pm-ripple{animation:pmRipple .6s ease 1.2s;} .svc-anim.play .pm-ad{animation:pmAdGlow 1s ease 1.2s;} .svc-anim.play .pm-bid i{animation:pmBidSwap .01s linear forwards;} .svc-anim.play .pm-bid i:nth-child(1){animation-delay:1.4s;} .svc-anim.play .pm-bid i:nth-child(2){animation-delay:2.3s;} .svc-anim.play .pm-bid i:nth-child(3){animation-delay:3.2s;} .svc-anim.play .pm-conv{animation:pmConvIn .5s cubic-bezier(.34,1.6,.64,1) 4s forwards, pmConvDraw .6s ease 4.3s forwards, pmConvOut .4s ease 6.4s forwards;} @keyframes pmCursorIn{to{opacity:1;transform:translate(0,0);}} @keyframes pmCursorOut{to{opacity:0;}} @keyframes pmRipple{0%{opacity:.9;transform:scale(.3);}100%{opacity:0;transform:scale(2.4);}} @keyframes pmAdGlow{0%,100%{box-shadow:0 0 0 rgba(127,227,195,0);}40%{box-shadow:0 0 12px rgba(127,227,195,.5);}} @keyframes pmBidSwap{to{transform:translateY(calc(-16px * var(--pm-i,0)));}} .pm-bid i:nth-child(2){--pm-i:1;} .pm-bid i:nth-child(3){--pm-i:2;} @keyframes pmConvIn{to{opacity:1;transform:translateY(0);}} @keyframes pmConvDraw{to{stroke-dashoffset:0;}} @keyframes pmConvOut{to{opacity:0;}} /* -- Analytics & CRO: funnel narrows, conversion rate climbs -- */ .cro{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:0 8%;} .cro-funnel{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;max-width:210px;} .cro-stage{position:relative;height:20px;border-radius:5px;overflow:hidden;background:rgba(255,255,255,0.08);} :root[data-theme="light"] .cro-stage{background:rgba(0,0,0,0.06);} .cro-s1{width:100%;} .cro-s2{width:68%;} .cro-s3{width:40%;} .cro-stage i{position:absolute;inset:0;display:block;background:var(--mint);opacity:.55;transform:scaleX(0);transform-origin:left;} .cro-s3 i{opacity:.9;} .cro-rate{display:flex;align-items:center;gap:8px;} .cro-rate-num{display:inline-block;overflow:hidden;height:22px;font:800 20px 'Sora','Inter';color:var(--mint);} .cro-rate-num i{display:block;height:22px;line-height:22px;font-style:normal;} .cro-rate-arrow{color:var(--mint);font-size:13px;opacity:0;transform:translateY(4px);} .cro-bars{display:flex;align-items:flex-end;gap:5px;height:26px;} .cro-bars span{width:7px;border-radius:2px 2px 0 0;background:var(--mint-dim);height:20%;} .svc-anim.play .cro-stage i{animation:croFill .55s cubic-bezier(.3,.8,.3,1) forwards;} .svc-anim.play .cro-s1 i{animation-delay:.4s;} .svc-anim.play .cro-s2 i{animation-delay:.75s;} .svc-anim.play .cro-s3 i{animation-delay:1.1s;} .svc-anim.play .cro-rate-num i{animation:croRateSwap .01s linear 2.6s forwards;} .svc-anim.play .cro-rate-arrow{animation:croArrowIn .5s cubic-bezier(.34,1.6,.64,1) 2.6s forwards, croArrowOut .4s ease 6.4s forwards;} .svc-anim.play .cro-bars span{animation:croBar .6s cubic-bezier(.3,.8,.3,1) forwards;} .svc-anim.play .cro-bars span:nth-child(1){animation-delay:1.6s;--cro-h:40%;} .svc-anim.play .cro-bars span:nth-child(2){animation-delay:1.75s;--cro-h:65%;} .svc-anim.play .cro-bars span:nth-child(3){animation-delay:1.9s;--cro-h:52%;} .svc-anim.play .cro-bars span:nth-child(4){animation-delay:2.05s;--cro-h:88%;} .svc-anim.play .cro-bars span:nth-child(5){animation-delay:2.2s;--cro-h:100%;} @keyframes croFill{to{transform:scaleX(1);}} @keyframes croRateSwap{to{transform:translateY(-22px);}} @keyframes croArrowIn{to{opacity:1;transform:translateY(0);}} @keyframes croArrowOut{to{opacity:0;}} @keyframes croBar{to{height:var(--cro-h,60%);}} /* -- About: in-house team node network -- */ .ab{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;} .ab-net{width:84%;height:84%;} .ab-net line{stroke:var(--mint);stroke-width:1.6;opacity:.45;stroke-dasharray:240;stroke-dashoffset:240;} .ab-dot{fill:rgba(127,227,195,0.85);transform:scale(0);transform-origin:center;transform-box:fill-box;} .ab-core{fill:var(--mint);transform:scale(0);transform-origin:center;transform-box:fill-box;} .svc-anim.play .ab-net line{animation:abDraw .8s ease forwards;} .svc-anim.play .ab-net line:nth-child(1){animation-delay:1.8s;} .svc-anim.play .ab-net line:nth-child(2){animation-delay:2s;} .svc-anim.play .ab-net line:nth-child(3){animation-delay:2.2s;} .svc-anim.play .ab-net line:nth-child(4){animation-delay:2.4s;} .svc-anim.play .ab-net line:nth-child(5){animation-delay:2.6s;} .svc-anim.play .ab-core{animation:abPop .5s cubic-bezier(.34,1.6,.64,1) 1.4s forwards, abPulse 2.6s ease 3.4s infinite;} .svc-anim.play .ab-dot{animation:abPop .5s cubic-bezier(.34,1.6,.64,1) forwards;} .svc-anim.play .ab-dot.d1{animation-delay:2.6s;} .svc-anim.play .ab-dot.d2{animation-delay:2.75s;} .svc-anim.play .ab-dot.d3{animation-delay:2.9s;} .svc-anim.play .ab-dot.d4{animation-delay:3.05s;} .svc-anim.play .ab-dot.d5{animation-delay:3.2s;} @keyframes abDraw{to{stroke-dashoffset:0;}} @keyframes abPop{to{transform:scale(1);}} @keyframes abPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.12);}} /* -- Contact: chat exchange (you send, we reply) -- */ .ct{position:absolute;inset:0;padding:30px;display:flex;flex-direction:column;justify-content:center;gap:14px;} .ct-bubble{max-width:72%;padding:14px 16px;border-radius:15px;display:flex;flex-direction:column;gap:7px;opacity:0;} .ct-bubble span{height:7px;border-radius:3px;} .ct-bubble.out{align-self:flex-end;background:rgba(255,255,255,0.06);border:1px solid var(--line);border-bottom-right-radius:5px;transform:translateY(10px);} :root[data-theme="light"] .ct-bubble.out{background:rgba(0,0,0,0.03);} .ct-bubble.out span{background:rgba(255,255,255,0.42);} :root[data-theme="light"] .ct-bubble.out span{background:rgba(0,0,0,0.32);} .ct-bubble.out span:nth-child(1){width:96px;} .ct-bubble.out span:nth-child(2){width:62px;} .ct-bubble.in{align-self:flex-start;background:var(--mint);border-bottom-left-radius:5px;transform:translateY(10px);} .ct-bubble.in span{background:#0a1512;opacity:.85;} .ct-bubble.in span:nth-child(1){width:116px;} .ct-bubble.in span:nth-child(2){width:72px;} .ct-typing{align-self:flex-start;display:flex;gap:6px;padding:13px 15px;border-radius:15px;background:rgba(255,255,255,0.06);border:1px solid var(--line);opacity:0;overflow:hidden;} :root[data-theme="light"] .ct-typing{background:rgba(0,0,0,0.03);} .ct-typing i{width:8px;height:8px;border-radius:50%;background:var(--text-dim);} .svc-anim.play .ct-bubble.out{animation:ctIn .5s ease 1.6s forwards;} .svc-anim.play .ct-typing{animation:ctIn .4s ease 2.4s forwards, ctCollapse .35s ease 4s forwards;} .svc-anim.play .ct-typing i{animation:ctDot 1s ease infinite;} .svc-anim.play .ct-typing i:nth-child(2){animation-delay:.15s;} .svc-anim.play .ct-typing i:nth-child(3){animation-delay:.3s;} .svc-anim.play .ct-bubble.in{animation:ctIn .5s ease 4.3s forwards;} @keyframes ctIn{to{opacity:1;transform:translateY(0);}} @keyframes ctCollapse{to{opacity:0;max-height:0;padding-top:0;padding-bottom:0;margin-top:-14px;}} @keyframes ctDot{0%,100%{opacity:.3;transform:translateY(0);}40%{opacity:1;transform:translateY(-3px);}} /* -- Portfolio: work grid populating -- */ .pf{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;} .pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:76%;} .pf-tile{aspect-ratio:1;border-radius:10px;background:rgba(255,255,255,0.06);border:1px solid var(--line);transform:scale(0);transform-origin:center;} :root[data-theme="light"] .pf-tile{background:rgba(0,0,0,0.03);} .pf-tile.accent{background:linear-gradient(135deg,var(--mint),rgba(127,227,195,0.35));border-color:var(--mint);} .svc-anim.play .pf-tile{animation:pfPop .5s cubic-bezier(.34,1.5,.64,1) forwards;} .svc-anim.play .pf-tile:nth-child(1){animation-delay:1.4s;} .svc-anim.play .pf-tile:nth-child(2){animation-delay:1.52s;} .svc-anim.play .pf-tile:nth-child(3){animation-delay:1.64s;} .svc-anim.play .pf-tile:nth-child(4){animation-delay:1.76s;} .svc-anim.play .pf-tile:nth-child(5){animation-delay:1.88s;} .svc-anim.play .pf-tile:nth-child(6){animation-delay:2s;} .svc-anim.play .pf-tile:nth-child(7){animation-delay:2.12s;} .svc-anim.play .pf-tile:nth-child(8){animation-delay:2.24s;} .svc-anim.play .pf-tile:nth-child(9){animation-delay:2.36s;} .svc-anim.play .pf-tile.accent{animation:pfPop .5s cubic-bezier(.34,1.5,.64,1) 1.88s forwards, pfGlow 2.6s ease 3s infinite;} @keyframes pfPop{to{transform:scale(1);}} @keyframes pfGlow{0%,100%{box-shadow:0 0 0 rgba(127,227,195,0);}50%{box-shadow:0 0 22px rgba(127,227,195,0.5);}} @media (prefers-reduced-motion: reduce){ .ab-net line{stroke-dashoffset:0;}.ab-dot,.ab-core{transform:scale(1);} .ct-bubble,.ct-typing{opacity:1;transform:none;}.ct-typing{display:none;} .pf-tile{transform:scale(1);} } @media (prefers-reduced-motion: reduce){ .em-fill{width:68%;}.em-row{opacity:1;}.em-tick{background:var(--mint);border-color:var(--mint);}.em-tick svg{opacity:1;}.em-plane{opacity:0;} .sm-heart{color:var(--mint);}.sm-float{opacity:0;} .mt-box{background:var(--mint);border-color:var(--mint);}.mt-box svg{opacity:1;}.mt-fill{width:99%;} .bi-sh{opacity:1;}.bi-word{width:150px;}.bi-swatches span{transform:scale(1);} .pk-box{opacity:1;transform:scale(1);}.pk-tape-v{transform:translateX(-50%) scaleY(1);}.pk-label{transform:translateX(-50%) scale(1);} .pt-wave{opacity:0;}.pt-lines span:nth-child(1){width:160px;}.pt-lines span:nth-child(2){width:130px;}.pt-lines span:nth-child(3){width:100px;} } @media (prefers-reduced-motion: reduce){ .svc-anim.play *{animation:none !important;} .ec-badge-in{transform:translateY(-16px);} .ec-toast{opacity:0;} .seo-typed{width:120px;} .seo-digits{transform:translateY(-324px);} .seo-bars span:nth-child(1){height:26px;}.seo-bars span:nth-child(2){height:44px;} .seo-bars span:nth-child(3){height:36px;}.seo-bars span:nth-child(4){height:64px;} .seo-bars span:nth-child(5){height:92px;} /* Brand Identities: show the finished mint mark, hide the scaffold. */ .bi-bowl,.bi-stem{stroke-dashoffset:0 !important;stroke:var(--mint) !important;} .bi-node,.bi-handle{opacity:0 !important;} .bi-guide{opacity:.4 !important;} /* Packaging: show the finished dieline (cut drawn, folds + print visible). */ .pk-cut{stroke-dashoffset:0 !important;stroke:var(--mint) !important;} .pk-fold{opacity:.85 !important;} .pk-ink{opacity:1 !important;} /* Shared canvas rail visible; final tool active on each page. */ .cv-rail{opacity:1 !important;} .t-move,.pt-move{background:rgba(127,227,195,0.16) !important;color:var(--mint) !important;} } @media (max-width:860px){ .wf-hero{grid-template-columns:1fr;} .wf-visual{height:260px;order:-1;} } @media (max-width:860px){ nav{display:none;} .hamburger{display:flex;} } @media (min-width:600px){ .mm-link{font-size:56px;} } /* TV test-card intro / preloader */ #introOverlay{position:fixed;inset:0;z-index:200;background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:opacity .3s ease;} #introOverlay.gone{opacity:0;} body.intro-lock{overflow:hidden;} .tc-screen{position:relative;width:100%;height:100%;transform-origin:center;background:#000;display:flex;align-items:center;justify-content:center;animation:tcOn .45s cubic-bezier(.2,.8,.2,1) forwards, tcOff .55s cubic-bezier(.7,0,.3,1) 3.4s forwards;} .tc-card{position:relative;aspect-ratio:4/3;height:92vh;max-width:96vw;background:#000;overflow:hidden;} @media(max-aspect-ratio:4/3){.tc-card{height:auto;width:96vw;}} .tc-card::before{content:"";position:absolute;inset:0;z-index:1;background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.92) 0 2px,transparent 2px 5%),repeating-linear-gradient(0deg,rgba(255,255,255,.92) 0 2px,transparent 2px 6.6667%);} .tc-circle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;height:94%;aspect-ratio:1;border:2px solid #fff;border-radius:50%;} .tc-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;width:54%;display:flex;flex-direction:column;} .tc-bars{height:clamp(40px,8vh,62px);display:grid;grid-template-columns:repeat(8,1fr);} .tc-bars i:nth-child(1){background:#c9c9c9}.tc-bars i:nth-child(2){background:#c9c900}.tc-bars i:nth-child(3){background:#00c9c9}.tc-bars i:nth-child(4){background:#00c000}.tc-bars i:nth-child(5){background:#c900c9}.tc-bars i:nth-child(6){background:#d00000}.tc-bars i:nth-child(7){background:#2b2bd0}.tc-bars i:nth-child(8){background:#000} .tc-greys{height:clamp(24px,4.5vh,34px);display:grid;grid-template-columns:repeat(8,1fr);} .tc-greys i:nth-child(1){background:#000}.tc-greys i:nth-child(2){background:#242424}.tc-greys i:nth-child(3){background:#3f3f3f}.tc-greys i:nth-child(4){background:#6b6b6b}.tc-greys i:nth-child(5){background:#8f8f8f}.tc-greys i:nth-child(6){background:#b7b7b7}.tc-greys i:nth-child(7){background:#e0e0e0}.tc-greys i:nth-child(8){background:#fff} .tc-freq{height:clamp(28px,5vh,40px);display:grid;grid-template-columns:1fr 1fr 1fr .8fr;} .tc-freq i:nth-child(1){background:repeating-linear-gradient(90deg,#fff 0 3px,#000 3px 6px);} .tc-freq i:nth-child(2){background:repeating-linear-gradient(90deg,#fff 0 2px,#000 2px 4px);} .tc-freq i:nth-child(3){background:repeating-linear-gradient(90deg,#fff 0 1.3px,#000 1.3px 2.6px);} .tc-freq i:nth-child(4){background:#e08a00;} .tc-grad{height:clamp(28px,5vh,40px);display:grid;grid-template-columns:1fr 1fr;} .tc-grad i:nth-child(1){background:linear-gradient(90deg,#d0006a,#5a0030);} .tc-grad i:nth-child(2){background:linear-gradient(90deg,#1030d0,#040a4a);} .tc-ident{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:5;background:#000;padding:14px 22px;border:2px solid var(--mint);box-shadow:0 0 0 3px #000;display:flex;flex-direction:column;align-items:center;gap:8px;} .tc-logo{width:min(15vw,140px);animation:tcGlitch 2.6s steps(1,end) infinite;} .tc-sb{font-family:'JetBrains Mono';font-size:8px;letter-spacing:.24em;color:var(--mint);} .tc-lab{position:absolute;z-index:4;font-family:'JetBrains Mono';font-size:11px;letter-spacing:.16em;color:#fff;font-weight:700;background:#000;padding:2px 6px;} .tc-lab.tl{top:6%;left:50%;transform:translateX(-50%);} .tc-lab.bl{bottom:6%;left:50%;transform:translateX(-50%);} .tc-lab.tr{top:9px;right:9px;} .tc-lab.tll{top:9px;left:9px;} .tc-scan{position:absolute;inset:0;z-index:8;pointer-events:none;background:repeating-linear-gradient(rgba(0,0,0,.20) 0 1px,transparent 1px 3px);animation:tcFlicker .12s steps(2) infinite;} .tc-vig{position:absolute;inset:0;z-index:8;pointer-events:none;background:radial-gradient(130% 120% at 50% 50%,transparent 52%,rgba(0,0,0,.6) 100%);} .tc-roll{position:absolute;left:0;right:0;height:24%;z-index:7;pointer-events:none;background:linear-gradient(rgba(255,255,255,.05),transparent);animation:tcRoll 2.8s linear 1;} .tc-flash{position:absolute;inset:0;z-index:9;background:#fff;opacity:0;pointer-events:none;animation:tcFlash .55s ease 3.4s forwards;} .tc-blink{animation:tcBlink 1s step-end infinite;} @keyframes tcOn{0%{transform:scaleY(.003) scaleX(.6);filter:brightness(4);}55%{transform:scaleY(1) scaleX(1);filter:brightness(1.4);}100%{transform:scale(1);filter:brightness(1);}} @keyframes tcOff{0%{transform:scale(1);filter:brightness(1);}55%{transform:scaleY(.02) scaleX(1);filter:brightness(2.2);}85%{transform:scaleY(.02) scaleX(.02);filter:brightness(6);}100%{transform:scale(0);opacity:0;}} @keyframes tcFlicker{0%{opacity:1;}100%{opacity:.9;}} @keyframes tcBlink{0%,100%{opacity:1;}50%{opacity:0;}} @keyframes tcRoll{0%{top:-24%;}100%{top:100%;}} @keyframes tcFlash{0%,70%{opacity:0;}86%{opacity:.9;}100%{opacity:0;}} @keyframes tcGlitch{0%,100%{transform:translate(0,0);clip-path:inset(0 0 0 0);filter:drop-shadow(2px 0 rgba(255,45,85,.6)) drop-shadow(-2px 0 rgba(41,230,255,.6));}5%{transform:translate(-3px,1px) skewX(-7deg);clip-path:inset(18% 0 55% 0);}7%{transform:translate(4px,-1px);clip-path:inset(58% 0 8% 0);filter:drop-shadow(6px 0 rgba(255,45,85,.85)) drop-shadow(-6px 0 rgba(41,230,255,.85));}9%{transform:translate(0,0);clip-path:inset(0 0 0 0);}41%{transform:translate(3px,0) skewX(4deg);clip-path:inset(34% 0 42% 0);filter:drop-shadow(4px 0 rgba(255,45,85,.7)) drop-shadow(-4px 0 rgba(41,230,255,.7));}43%{transform:translate(0,0);clip-path:inset(0 0 0 0);}71%{transform:translate(-5px,0);clip-path:inset(8% 0 72% 0);}73%{transform:translate(0,0);clip-path:inset(0 0 0 0);}} @media (prefers-reduced-motion: reduce){ #introOverlay{display:none !important;} } /* mobile: comfortable side margins so content doesn't touch the screen edges — 5px (previously used here) was too tight and made everything feel cramped/edge-to-edge on a phone */ @media (max-width:600px){ .wrap{padding:0 20px;} .headbar{padding:12px 20px;} .marquee-label{padding:0 20px;} .mm-body{padding:120px 20px 60px;} } /* Services page hero: 9-cell grid that "powers up" one cell at a time, looping */ .svc-hero{display:grid;grid-template-columns:1.15fr 0.85fr;gap:48px;align-items:center;} .svc-visual{height:320px;display:flex;align-items:center;justify-content:center;} .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:10px;width:280px;height:280px;} .svc-cell{ border:1px solid rgba(255,255,255,0.12);border-radius:0;display:flex;align-items:center;justify-content:center; font-family:'JetBrains Mono';font-size:20px;color:rgba(255,255,255,0.28);background:rgba(255,255,255,0.02); opacity:0;transform:scale(0.82); } .svc-visual.svc-play .svc-cell{animation:svcCellIn 1.4s cubic-bezier(.34,1.3,.64,1) forwards;} @keyframes svcCellIn{ 0%{opacity:0;transform:scale(0.8);color:rgba(255,255,255,0.25);background:rgba(255,255,255,0.02);border-color:rgba(255,255,255,0.12);} 22%{opacity:1;transform:scale(1.08);color:#0a1512;background:var(--mint);border-color:var(--mint);box-shadow:0 0 26px rgba(127,227,195,0.55);} 45%{transform:scale(1);} 100%{opacity:1;transform:scale(1);color:var(--mint);background:rgba(127,227,195,0.07);border-color:var(--mint-deep);box-shadow:none;} } @media (prefers-reduced-motion: reduce){ .svc-cell{opacity:1;transform:scale(1);color:var(--mint);background:rgba(127,227,195,0.07);border-color:var(--mint-deep);} .svc-visual.svc-play .svc-cell{animation:none;} } @media (max-width:860px){ .svc-hero{grid-template-columns:1fr;} .svc-visual{height:220px;order:-1;} .svc-grid{width:220px;height:220px;} } /* ===== Full-width mega menu (Services) ===== */ /* static so the fixed panel can span the full viewport; stretched to the full header height + a fixed bridge strip below it, so the pointer never leaves the hover subtree on its way down to the panel (no flicker-shut). */ .nav-item-mega{position:static;display:flex;align-items:center;align-self:stretch;} .nav-item-mega::after{ content:"";position:fixed;left:0;right:0; top:calc(var(--wdlab-header-h,82px) - 18px);height:20px;z-index:48; pointer-events:none; } .nav-item-mega:hover::after, .nav-item-mega.mega-open::after{pointer-events:auto;} .mega-menu{ position:fixed;left:0;right:0;top:var(--wdlab-header-h,82px);width:100vw; background:rgba(6,7,7,0.95);backdrop-filter:blur(20px) saturate(140%); border-top:1px solid var(--line);border-bottom:1px solid var(--line); box-shadow:0 54px 110px -34px rgba(0,0,0,0.8); padding:78px 0 92px;z-index:49; opacity:0;visibility:hidden;transform:translateY(-16px); transition:opacity .28s ease, transform .34s cubic-bezier(.16,1,.3,1), visibility .28s; } :root[data-theme="light"] .mega-menu{background:rgba(255,255,255,0.97);} /* opens on hover AND via the JS .mega-open class (so it never flickers shut) */ .nav-item-mega:hover .mega-menu, .nav-item-mega.mega-open .mega-menu{opacity:1;visibility:visible;transform:translateY(0);} .mega-inner{ max-width:1680px;margin:0 auto;padding:0 clamp(28px,5vw,72px); display:grid;grid-template-columns:1fr 1fr 0.9fr;gap:44px clamp(40px,4vw,72px); } .mega-col-flex{border-left:1px solid var(--line-soft);padding-left:clamp(28px,3vw,56px);} .mega-col-flex a{font-size:clamp(22px,2.4vw,38px);} .mega-col{display:flex;flex-direction:column;gap:6px;} .mega-col-title{ color:var(--mint);font-family:'Inter';font-size:15px;font-weight:800; letter-spacing:0.18em;text-transform:uppercase;margin-bottom:26px; padding-bottom:18px;border-bottom:1px solid var(--line-soft); } .mega-col a{ color:var(--text);font-family:var(--font-display);font-weight:700; font-size:clamp(24px,3vw,46px);line-height:1.06;letter-spacing:-0.03em; transition:color .2s, transform .3s cubic-bezier(.16,1,.3,1); white-space:normal;padding:2px 0; } .mega-col a::after{display:none;} /* suppress the nav underline sweep here */ .mega-col a:hover{color:var(--mint);transform:translateX(18px);} .mega-col-sub{ font-family:'Inter';font-weight:400;font-size:11px;letter-spacing:0.04em; text-transform:none;color:var(--mint-dim);margin-left:8px; } .mega-col-divider{display:block;height:1px;background:var(--line-soft);margin:14px 0 10px;} .mega-flex-note{ display:block;font-family:'Inter';font-weight:400; font-size:14px;letter-spacing:0;color:var(--text-dim); margin:4px 0 0; } .mega-col-flex a.mega-calc-link{ display:inline-block;font-family:'Inter';font-size:13.5px;font-weight:700; color:var(--mint);letter-spacing:0;margin-top:18px;padding:0; } .mega-col-flex a.mega-calc-link:hover{color:var(--mint-bright);transform:none;} .wdlab-inline-link{ display:inline-block;font-family:'Inter';font-size:14px;font-weight:700;color:var(--mint);transition:color .2s ease; } .wdlab-inline-link:hover{color:var(--mint-bright);} /* Pricing plans (service-page cards) */ .service-plans{padding:20px 0 40px;} .plan-grid{display:grid;gap:24px;margin-top:32px;} @media (max-width:900px){.plan-grid{grid-template-columns:1fr !important;}} /* Website / Online Store pricing toggle (FlexCare-style) */ .plan-tabs{display:inline-flex;gap:4px;padding:4px;margin-top:28px;border:1px solid var(--line);border-radius:30px;background:var(--bg-soft);} .plan-tab{ font-family:'Inter';font-weight:700;font-size:13.5px;color:var(--text-dim);background:transparent;border:none; padding:10px 22px;border-radius:24px;cursor:pointer;transition:background .25s ease, color .25s ease; } .plan-tab:hover{color:var(--text);} .plan-tab.active{background:var(--mint);color:#0a1512;} .plan-tabpanel[hidden]{display:none;} /* ===== Flex vs one-off calculator ===== */ .calc-wrap{padding:20px 0 100px;} .calc-card{ max-width:880px;margin:0 auto;background:var(--bg-soft);border:1px solid var(--line); border-radius:20px;padding:clamp(24px,4vw,48px); } .calc-controls{display:grid;grid-template-columns:1fr 1fr;gap:28px 32px;margin-bottom:40px;} .calc-group{display:flex;flex-direction:column;gap:10px;} .calc-label{font-family:'Inter';font-size:13px;font-weight:700;color:var(--text-dim);} .calc-toggle{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border:1px solid var(--line);border-radius:30px;background:var(--bg-elevated);} .calc-toggle-3{grid-template-columns:repeat(3,1fr);} .calc-toggle-btn{ font-family:'Inter';font-weight:700;font-size:13.5px;color:var(--text-dim);background:transparent;border:none; padding:10px 18px;min-height:44px;display:flex;align-items:center;justify-content:center; border-radius:24px;cursor:pointer;transition:background .25s ease, color .25s ease;white-space:nowrap; } .calc-toggle-btn:hover{color:var(--text);transform:scale(1.04);} .calc-toggle-btn{transition:background .25s ease, color .25s ease, transform .2s cubic-bezier(.34,1.56,.64,1);} .calc-toggle-btn.active{background:var(--mint);color:#0a1512;transform:scale(1.02);} .calc-input-wrap{ display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:12px; background:var(--bg-elevated);padding:0 16px;transition:border-color .25s ease, box-shadow .25s ease; } .calc-input-wrap:focus-within{border-color:var(--mint);box-shadow:0 0 0 4px rgba(127,227,195,0.14);} .calc-input-prefix{color:var(--mint);font-weight:700;} .calc-hint{font-size:12.5px;color:var(--text-dim);line-height:1.5;margin-top:2px;} .calc-input-wrap input[type="number"]{ flex:1;background:none;border:none;color:var(--text);font-family:'Inter';font-size:18px;font-weight:700; padding:13px 0;-moz-appearance:textfield; } .calc-input-wrap input[type="number"]::-webkit-outer-spin-button, .calc-input-wrap input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;} .calc-input-wrap input:focus{outline:none;} .calc-group input[type="range"]{ width:100%;height:4px;border-radius:2px;background:var(--line);appearance:none;-webkit-appearance:none;margin-top:6px; } .calc-group input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--mint);cursor:pointer; box-shadow:0 0 0 4px rgba(127,227,195,0.18); } .calc-group input[type="range"]::-moz-range-thumb{ width:18px;height:18px;border-radius:50%;background:var(--mint);cursor:pointer;border:none; box-shadow:0 0 0 4px rgba(127,227,195,0.18); } .calc-label span{color:var(--mint);font-weight:800;} .calc-results{border-top:1px solid var(--line);padding-top:32px;} .calc-figures{display:flex;gap:40px;margin-bottom:24px;flex-wrap:wrap;} .calc-range-marks{display:flex;justify-content:space-between;margin-top:6px;font-family:'Inter';font-size:11px;color:var(--text-dim);} .calc-reset-link{ display:inline;background:none;border:none;padding:0;margin:0;font:inherit;font-weight:700; font-size:12.5px;color:var(--mint);cursor:pointer;text-decoration:underline;text-underline-offset:2px; } .calc-reset-link:hover{color:var(--mint-bright);} .calc-figure-save{ position:relative;padding:6px 20px;border-left:1px solid var(--line); } .calc-figure-save[hidden]{display:none;} .calc-figure-val-save{color:var(--mint);} .calc-figure-save.calc-figure-save-warn .calc-figure-val-save{color:#e0955c;} .calc-figure-pct{display:block;font-family:'Inter';font-size:13px;font-weight:700;color:var(--text-dim);margin-top:2px;} .calc-chart-label{font-family:'Inter';font-size:12px;font-weight:700;text-anchor:end;} .calc-chart-label-oneoff{fill:var(--text-dim);} .calc-chart-label-flex{fill:var(--mint);} .calc-end-marker{stroke:var(--line-soft);stroke-width:1;stroke-dasharray:2 3;} .calc-breakdown{margin-bottom:28px;} .calc-breakdown-toggle{ display:flex;align-items:center;gap:10px;background:none;border:none;padding:0;cursor:pointer; font-family:'Inter';font-size:14px;font-weight:700;color:var(--text-dim);transition:color .2s ease; } .calc-breakdown-toggle:hover{color:var(--text);} .calc-breakdown-sign{color:var(--mint);font-size:16px;font-weight:800;} .calc-breakdown-panel{ display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:18px;padding-top:18px; border-top:1px solid var(--line); } .calc-breakdown-panel[hidden]{display:none;} .calc-breakdown-col h4{font-family:'Inter';font-size:13px;font-weight:800;color:var(--text);text-transform:uppercase;letter-spacing:0.03em;margin-bottom:12px;} .calc-breakdown-row{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;color:var(--text-dim);padding:7px 0;border-bottom:1px solid var(--line-soft);} .calc-breakdown-row span:last-child{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums;} .calc-breakdown-included{color:var(--mint) !important;} .calc-breakdown-total{border-bottom:none;margin-top:2px;padding-top:10px;border-top:1px solid var(--line);} .calc-breakdown-total span{font-weight:800 !important;color:var(--text) !important;} @media (max-width:640px){ .calc-breakdown-panel{grid-template-columns:1fr;gap:20px;} .calc-figure-save{border-left:none;border-top:1px solid var(--line);padding:14px 0 0;width:100%;} } @media (prefers-reduced-motion: reduce){ .calc-card *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;} .calc-line{transition:none !important;} .calc-toggle-btn:hover, .calc-toggle-btn.active{transform:none !important;} } .calc-figure{display:flex;flex-direction:column;gap:4px;} .calc-figure-label{font-family:'Inter';font-size:12px;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.04em;} .calc-figure-val{font-family:var(--font-display);font-size:34px;font-weight:800;color:var(--text);letter-spacing:-0.02em;display:inline-block;} .calc-figure-val.pop{animation:calcPop .4s cubic-bezier(.34,1.56,.64,1);} @keyframes calcPop{0%{transform:scale(1);}40%{transform:scale(1.12);}100%{transform:scale(1);}} @media (prefers-reduced-motion: reduce){ .calc-figure-val.pop{animation:none;} } .calc-figure-flex .calc-figure-val{color:var(--mint);} .calc-legend{display:flex;gap:24px;margin-bottom:14px;flex-wrap:wrap;} .calc-legend-item{display:inline-flex;align-items:center;gap:8px;font-family:'Inter';font-size:13px;font-weight:600;color:var(--text-dim);} .calc-legend-swatch{display:inline-block;width:20px;height:0;border-top:3px solid;} .calc-legend-swatch-oneoff{border-top-style:dashed;border-color:var(--text-dim);} .calc-legend-swatch-flex{border-top-style:solid;border-color:var(--mint);} .calc-chart{width:100%;height:auto;max-height:260px;display:block;margin-bottom:20px;} .calc-axis{stroke:var(--line);stroke-width:1;} .calc-line{stroke-width:3;stroke-linecap:round;stroke-linejoin:round;} .calc-line-oneoff{stroke:var(--text-dim);stroke-dasharray:6 6;} .calc-line-flex{stroke:var(--mint);} .calc-crossover-line{stroke:#e0955c;stroke-width:1.5;stroke-dasharray:3 4;} .calc-crossover-dot{fill:#e0955c;transform-origin:center;transform-box:fill-box;transform:scale(0);opacity:0;transition:transform .4s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;} .calc-crossover-dot.show{transform:scale(1);opacity:1;} .calc-verdict-box{ display:flex;align-items:flex-start;gap:12px;padding:18px 20px;border-radius:14px; background:var(--bg-elevated);border:1px solid var(--line);border-left:3px solid var(--mint); margin-bottom:16px;transition:border-color .3s ease, background .3s ease; } .calc-verdict-icon{ flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--mint);color:#0a1512; display:flex;align-items:center;justify-content:center; animation:calcIconPulse 2.4s ease-in-out infinite; } .calc-verdict-icon svg{width:18px;height:18px;} @keyframes calcIconPulse{ 0%,100%{box-shadow:0 0 0 0 rgba(127,227,195,0.4);} 50%{box-shadow:0 0 0 8px rgba(127,227,195,0);} } @media (prefers-reduced-motion: reduce){ .calc-verdict-icon{animation:none;} } .calc-verdict{font-size:17px;font-weight:600;color:var(--text);line-height:1.5;margin:0;} .calc-verdict-box.calc-verdict-good{border-left-color:var(--mint);} .calc-verdict-box.calc-verdict-good .calc-verdict-icon{background:var(--mint);} .calc-verdict-box.calc-verdict-warn{border-left-color:#e0955c;} .calc-verdict-box.calc-verdict-warn .calc-verdict-icon{background:#e0955c;color:#2a1608;} .calc-note{font-size:13.5px;color:var(--text-dim);line-height:1.6;max-width:60ch;margin-bottom:28px;} .calc-cta{display:flex;gap:12px;flex-wrap:wrap;} @media (max-width:640px){ .calc-controls{grid-template-columns:1fr;} .calc-figures{gap:24px;} .calc-figure-val{font-size:28px;} } .plan-card{ position:relative;display:flex;flex-direction:column; background:var(--bg-elevated);border:1px solid var(--line); border-radius:16px;padding:34px 28px; transition:transform .3s cubic-bezier(.16,1,.3,1), border-color .25s, box-shadow .3s; } .plan-card:hover{transform:translateY(-4px);border-color:var(--mint-dim);} .plan-card.featured{border-color:var(--mint);box-shadow:0 20px 60px -30px rgba(127,227,195,0.5);} .plan-badge{ position:absolute;top:-12px;left:28px;background:var(--mint);color:#0a1512; font-family:'Inter';font-size:11px;font-weight:800;letter-spacing:0.12em; text-transform:uppercase;padding:5px 12px;border-radius:20px; } .plan-name{font-family:var(--font-display);font-size:20px;font-weight:800;margin:0 0 10px;color:var(--text);} .plan-price{font-family:var(--font-display);font-size:44px;font-weight:800;line-height:1;color:var(--mint);letter-spacing:-0.03em;} .plan-cad{font-family:'Inter';font-size:15px;font-weight:600;color:var(--text-dim);margin-left:4px;letter-spacing:0;} .plan-note{font-family:'Inter';font-size:13px;color:var(--text-dim);margin-top:8px;} .plan-feats{list-style:none;margin:24px 0;padding:0;display:flex;flex-direction:column;gap:11px;flex:1;} .plan-feats li{position:relative;padding-left:26px;font-size:15px;line-height:1.45;color:var(--text);} .plan-feats li::before{ content:"";position:absolute;left:0;top:6px;width:14px;height:8px; border-left:2px solid var(--mint);border-bottom:2px solid var(--mint); transform:rotate(-45deg); } .plan-feats li.plan-lead{padding-left:0;font-weight:700;color:var(--text-dim); font-size:13px;letter-spacing:0.02em;margin-top:4px;} .plan-feats li.plan-lead::before{display:none;} .plan-cta{align-self:stretch;justify-content:center;margin-top:8px;} /* Collapsible plan-comparison table */ .service-compare{padding:4px 0 48px;} .compare-toggle{ display:inline-flex;align-items:center;gap:10px;background:transparent; border:1px solid var(--line);color:var(--text);font-family:'Inter'; font-weight:700;font-size:14px;padding:13px 24px;border-radius:8px; cursor:pointer;transition:border-color .25s, color .25s; } .compare-toggle:hover{border-color:var(--mint);color:var(--mint);} .compare-toggle .cmp-sign{color:var(--mint);font-size:18px;line-height:1;transition:transform .3s cubic-bezier(.16,1,.3,1);} .service-compare.open .compare-toggle .cmp-sign{transform:rotate(45deg);} .compare-panel{display:none;margin-top:26px;overflow-x:auto;} .service-compare.open .compare-panel{display:block;} .plan-compare-table{width:100%;border-collapse:collapse;min-width:560px;} .plan-compare-table th,.plan-compare-table td{ text-align:left;padding:14px 18px;border-bottom:1px solid var(--line); font-size:14px;line-height:1.4; } .plan-compare-table thead th{ font-family:'Inter';text-transform:uppercase;letter-spacing:0.1em; font-size:12px;font-weight:800;color:var(--mint); } .plan-compare-table thead th:first-child{color:var(--text-dim);} .plan-compare-table tbody td:first-child{color:var(--text);font-weight:600;} .plan-compare-table tbody td{color:var(--text-dim);} .plan-compare-table .cmp-yes{color:var(--mint);font-weight:700;} .plan-compare-table .cmp-no{color:var(--text-dim);opacity:0.4;} .plan-compare-table tbody tr:hover td{background:var(--bg-elevated);} @media (max-width:860px){ .mega-menu{display:none !important;} } .scroll-assist{ position:fixed;right:24px;bottom:32px;width:48px;height:48px;border-radius:50%; border:1px solid var(--line);background:rgba(14,15,15,0.85);backdrop-filter:blur(6px); color:var(--mint);font-size:19px;cursor:pointer;z-index:40; display:flex;align-items:center;justify-content:center;transition:border-color .25s, transform .25s; } .scroll-assist:hover{border-color:var(--mint);transform:translateY(-3px);} .scroll-assist .arrow-up{display:none;} .scroll-assist.at-bottom .arrow-down{display:none;} .scroll-assist.at-bottom .arrow-up{display:inline;} @media (max-width:600px){ .scroll-assist{right:16px;bottom:20px;width:42px;height:42px;font-size:17px;} } /* ---- vertical "Scroll" hint (fades out once you start scrolling) ---- */ .scroll-hint{ position:fixed;right:30px;top:50%;transform:translateY(-50%); display:flex;flex-direction:column;align-items:center;gap:14px; z-index:20;pointer-events:none; opacity:1;transition:opacity .5s ease, transform .5s ease; } .scroll-hint.hidden{opacity:0;transform:translateY(-40%);} .scroll-hint .scroll-word{ writing-mode:vertical-rl;transform:rotate(180deg); font-family:'Inter';font-size:12px;font-weight:700;letter-spacing:0.28em; text-transform:uppercase;color:var(--text-dim); } .scroll-hint .scroll-line{ width:1px;height:52px;background:linear-gradient(to bottom,var(--mint),transparent); position:relative;overflow:hidden; } .scroll-hint .scroll-line::after{ content:"";position:absolute;left:0;top:0;width:1px;height:14px; background:var(--mint);box-shadow:0 0 8px rgba(127,227,195,0.7); animation:wdlabScrollDrop 1.9s cubic-bezier(.7,0,.3,1) infinite; } @keyframes wdlabScrollDrop{ 0%{transform:translateY(-16px);opacity:0;} 30%{opacity:1;} 100%{transform:translateY(52px);opacity:0;} } @media (max-width:860px){ .scroll-hint{display:none;} } /* ===== Client Portal ===== */ .portal-login-card{ max-width:420px;margin:0 auto;padding:40px;background:var(--bg-soft);border:1px solid var(--line); border-radius:20px;padding-bottom:90px; } #loginform p, .portal-login-card p{margin-bottom:18px;} #loginform label, .portal-login-card label{display:block;font-family:'Inter';font-size:13px;font-weight:700;color:var(--text-dim);margin-bottom:8px;} #loginform input.input, .portal-login-card input.input, .portal-login-card textarea.input{ width:100%;background:var(--bg-elevated);border:1px solid var(--line);border-radius:12px; padding:13px 16px;color:var(--text);font-family:'Inter';font-size:15px;transition:border-color .25s ease, box-shadow .25s ease; } #loginform input.input:focus, .portal-login-card input.input:focus, .portal-login-card textarea.input:focus{outline:none;border-color:var(--mint);box-shadow:0 0 0 4px rgba(127,227,195,0.14);} #loginform .login-remember{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text-dim);} #loginform .login-remember label{display:flex;align-items:center;gap:8px;margin:0;font-weight:500;text-transform:none;} #loginform .login-submit input[type="submit"], .portal-login-card .login-submit input[type="submit"]{ width:100%;background:var(--mint);color:#0a1512;border:none;border-radius:30px;padding:14px 24px; font-family:'Inter';font-weight:800;font-size:15px;cursor:pointer;transition:background .25s ease, transform .2s ease; } #loginform .login-submit input[type="submit"]:hover, .portal-login-card .login-submit input[type="submit"]:hover{background:var(--mint-bright);transform:scale(1.02);} .portal-login-note{margin-top:24px;font-size:13.5px;color:var(--text-dim);line-height:1.6;text-align:center;} .portal-dashboard{max-width:640px;margin:0 auto 100px;} .portal-cards{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:24px;} .portal-card{ flex:1 1 220px;padding:22px 24px;background:var(--bg-soft);border:1px solid var(--line);border-radius:16px; display:flex;flex-direction:column;gap:6px; } .portal-card-val{font-family:var(--font-display);font-size:22px;font-weight:800;color:var(--text);letter-spacing:-0.01em;} .portal-card-link{color:var(--mint);text-decoration:none;word-break:break-word;} .portal-card-link:hover{color:var(--mint-bright);} /* Client Portal — extended sections */ .portal-progress{background:var(--bg-soft);border:1px solid var(--line);border-radius:16px;padding:20px 24px;margin-bottom:24px;} .portal-progress-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;} .portal-progress-pct{font-family:var(--font-display);font-size:20px;font-weight:800;color:var(--mint);} .portal-progress-bar{height:8px;border-radius:4px;background:var(--bg-elevated);overflow:hidden;} .portal-progress-fill{height:100%;background:linear-gradient(90deg,var(--mint),var(--mint-bright));border-radius:4px;transition:width .6s cubic-bezier(.16,1,.3,1);} .portal-progress-phase{display:block;margin-top:10px;font-size:13.5px;color:var(--text-dim);} .portal-files{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:8px;} .portal-section-title{font-family:var(--font-display);font-size:22px;font-weight:800;margin:44px 0 18px;color:var(--text);} .portal-updates{display:flex;flex-direction:column;gap:14px;} .portal-update{background:var(--bg-soft);border:1px solid var(--line);border-radius:14px;padding:18px 22px;} .portal-update-date{font-family:'Inter';font-size:12px;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.03em;} .portal-update h4{font-family:var(--font-display);font-size:17px;font-weight:800;margin:6px 0 6px;color:var(--text);} .portal-update p{font-size:14.5px;color:var(--text-dim);line-height:1.6;margin:0;} .portal-table{width:100%;border-collapse:collapse;margin-bottom:8px;} .portal-table th{text-align:left;font-family:'Inter';font-size:12px;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.03em;padding:0 12px 10px 0;border-bottom:1px solid var(--line);} .portal-table td{padding:12px 12px 12px 0;border-bottom:1px solid var(--line-soft);font-size:14.5px;color:var(--text);} .portal-badge{display:inline-block;font-family:'Inter';font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:0.03em;padding:4px 10px;border-radius:20px;} .portal-badge-paid{background:rgba(127,227,195,0.14);color:var(--mint);} .portal-badge-pending{background:rgba(224,149,92,0.16);color:#e0955c;} @media (max-width:640px){ .portal-table{font-size:13px;} .portal-table th:nth-child(4), .portal-table td:nth-child(4){display:none;} } /* ===== Blog ===== */ .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-bottom:40px;} .blog-card{ display:flex;flex-direction:column;background:var(--bg-soft);border:1px solid var(--line);border-radius:16px; overflow:hidden;text-decoration:none;color:inherit;transition:transform .3s cubic-bezier(.16,1,.3,1), border-color .25s ease; } .blog-card:hover{transform:translateY(-4px);border-color:var(--mint);} .blog-card-img{aspect-ratio:16/10;overflow:hidden;background:var(--bg-elevated);} .blog-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.16,1,.3,1);} .blog-card:hover .blog-card-img img{transform:scale(1.05);} .blog-card-img-placeholder{ background:linear-gradient(135deg,var(--bg-elevated),var(--bg-soft)); position:relative;overflow:hidden; } .bcp-glow{ position:absolute;width:160px;height:160px;border-radius:50%; background:radial-gradient(circle,rgba(127,227,195,0.35),transparent 70%); top:50%;left:50%;transform:translate(-50%,-50%);filter:blur(6px); animation:bcpDrift 9s ease-in-out infinite; } @keyframes bcpDrift{ 0%,100%{transform:translate(-58%,-55%) scale(1);} 50%{transform:translate(-42%,-45%) scale(1.25);} } .bcp-ring{ position:absolute;width:64px;height:64px;border-radius:50%; border:1.5px solid rgba(127,227,195,0.4); top:50%;left:50%; animation:bcpPulse 3.6s cubic-bezier(.16,1,.3,1) infinite; } @keyframes bcpPulse{ 0%{transform:translate(-50%,-50%) scale(0.6);opacity:0.9;} 80%,100%{transform:translate(-50%,-50%) scale(2.1);opacity:0;} } /* Same pattern, shifted hue per category — variety without separate artwork */ .blog-card-img-placeholder[data-cat="ai"]{filter:hue-rotate(0deg);} .blog-card-img-placeholder[data-cat="flexsite"]{filter:hue-rotate(35deg);} .blog-card-img-placeholder[data-cat="flexshop"]{filter:hue-rotate(-35deg);} .blog-card-img-placeholder[data-cat="seo"]{filter:hue-rotate(70deg);} .blog-card-img-placeholder[data-cat="marketing"]{filter:hue-rotate(-70deg);} /* Per-article animated "scenes" — several coordinated elements each, same idea as the service hero animations, scaled down to sit inside a blog card instead of a full hero panel. */ .blog-card-icon{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;} .bs{position:relative;color:var(--text);font-family:'Inter';} /* Lease vs buy — a tab toggle with the price crossfading underneath */ .bs-lease{width:170px;} .bs-lease-tabs{position:relative;display:flex;background:var(--bg-elevated);border:1px solid var(--line);border-radius:20px;padding:3px;margin-bottom:14px;} .bs-lease-tab{flex:1;text-align:center;font-size:11px;font-weight:700;padding:6px 0;position:relative;z-index:1;color:var(--text-dim);} .bs-lease-slider{position:absolute;top:3px;left:3px;width:calc(50% - 3px);height:calc(100% - 6px);background:var(--mint);border-radius:16px;animation:bsLeaseSlide 4s ease-in-out infinite;} @keyframes bsLeaseSlide{0%,40%{transform:translateX(0);}50%,90%{transform:translateX(100%);}100%{transform:translateX(0);}} .bs-lease-price{position:relative;height:26px;text-align:center;} .bs-lease-price span{position:absolute;left:0;right:0;font-size:20px;font-weight:800;font-family:var(--font-display);} .bs-lease-price-buy{color:var(--text);animation:bsLeaseBuyTxt 4s ease-in-out infinite;} .bs-lease-price-lease{color:var(--mint);opacity:0;animation:bsLeaseLeaseTxt 4s ease-in-out infinite;} .bs-lease-price-lease i{font-size:11px;font-style:normal;font-weight:600;opacity:0.7;} @keyframes bsLeaseBuyTxt{0%,40%{opacity:1;}50%,90%{opacity:0;}100%{opacity:1;}} @keyframes bsLeaseLeaseTxt{0%,40%{opacity:0;}50%,90%{opacity:1;}100%{opacity:0;}} /* Website cost — a quote building line by line, total revealed last */ .bs-quote{width:160px;} .bs-quote-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px;opacity:0;animation:bsQuoteRow 4.5s ease-out infinite;} .bs-quote-row:nth-child(2){animation-delay:0.3s;} .bs-quote-row:nth-child(3){animation-delay:0.6s;} @keyframes bsQuoteRow{0%{opacity:0;transform:translateX(-6px);}12%,80%{opacity:1;transform:translateX(0);}95%,100%{opacity:0;}} .bs-quote-bar{height:7px;border-radius:4px;background:rgba(255,255,255,0.14);} .bs-quote-val{background:rgba(127,227,195,0.35);} .bs-quote-total{display:flex;justify-content:space-between;align-items:baseline;padding-top:10px;border-top:1px solid var(--line);opacity:0;animation:bsQuoteTotal 4.5s ease-out infinite;} .bs-quote-total span:first-child{font-size:10px;color:var(--text-dim);font-weight:700;text-transform:uppercase;letter-spacing:0.04em;} .bs-quote-total-val{font-family:var(--font-display);font-size:17px;font-weight:800;color:var(--mint);} @keyframes bsQuoteTotal{0%,45%{opacity:0;transform:scale(0.92);}60%,90%{opacity:1;transform:scale(1);}100%{opacity:0;}} /* Myths vs facts — a myth bubble struck through, replaced by a fact bubble */ .bs-myth{width:120px;height:70px;} .bs-myth-bubble{ position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:6px; padding:9px 16px;border-radius:20px;font-size:13px;font-weight:700; } .bs-myth-bubble-a{top:6px;background:rgba(224,149,92,0.14);color:#e0955c;animation:bsMythA 4s ease-in-out infinite;} .bs-myth-strike{position:absolute;left:14px;right:14px;top:50%;height:1.5px;background:#e0955c;transform:scaleX(0);transform-origin:left;animation:bsMythStrike 4s ease-in-out infinite;} .bs-myth-bubble-b{bottom:6px;background:rgba(127,227,195,0.14);color:var(--mint);opacity:0;animation:bsMythB 4s ease-in-out infinite;} @keyframes bsMythA{0%,15%{opacity:0;transform:translateY(-6px);}25%,55%{opacity:1;transform:translateY(0);}70%,100%{opacity:0.4;}} @keyframes bsMythStrike{0%,35%{transform:scaleX(0);}50%,70%{transform:scaleX(1);}100%{transform:scaleX(1);}} @keyframes bsMythB{0%,55%{opacity:0;transform:translateY(6px);}70%,95%{opacity:1;transform:translateY(0);}100%{opacity:0;}} /* WooCommerce vs Shopify — a see-saw tipping between the two */ .bs-vs{width:130px;height:70px;} .bs-vs-beam{position:relative;width:100%;height:100%;animation:bsVsTilt 3.4s ease-in-out infinite;transform-origin:center;} .bs-vs-side{ position:absolute;top:18px;width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center; font-family:var(--font-display);font-weight:800;font-size:16px;background:var(--bg-elevated);border:1px solid var(--line); } .bs-vs-a{left:6px;color:var(--mint);} .bs-vs-b{right:6px;color:var(--text-dim);} .bs-vs-pivot{position:absolute;bottom:0;left:50%;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:12px solid var(--line);transform:translateX(-50%);} @keyframes bsVsTilt{0%,45%{transform:rotate(-6deg);}55%,95%{transform:rotate(6deg);}100%{transform:rotate(-6deg);}} /* 10 mistakes — a checklist getting flagged row by row */ .bs-checklist{width:150px;} .bs-checklist-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;} .bs-checklist-bar{height:7px;border-radius:4px;background:rgba(255,255,255,0.14);} .bs-checklist-x{color:#e0955c;font-weight:800;font-size:12px;opacity:0;animation:bsXPop 3.6s ease-in-out infinite;} .bs-checklist-row:nth-child(1) .bs-checklist-x{animation-delay:0s;} .bs-checklist-row:nth-child(2) .bs-checklist-x{animation-delay:0.4s;} .bs-checklist-row:nth-child(3) .bs-checklist-x{animation-delay:0.8s;} @keyframes bsXPop{0%,10%{opacity:0;transform:scale(0.4);}20%,80%{opacity:1;transform:scale(1);}92%,100%{opacity:0;transform:scale(0.4);}} /* SEO — a typed search query with rising rank bars underneath */ .bs-seo{width:150px;} .bs-seo-search{display:flex;align-items:center;gap:6px;background:var(--bg-elevated);border:1px solid var(--line);border-radius:14px;padding:7px 10px;margin-bottom:14px;color:var(--mint);} .bs-seo-typed{height:8px;border-radius:3px;background:rgba(255,255,255,0.5);width:0;animation:bsSeoType 3.6s steps(14) infinite;} .bs-seo-caret{width:1.5px;height:12px;background:var(--mint);margin-left:1px;animation:giBlink .6s step-end infinite;} @keyframes bsSeoType{0%,5%{width:0;}55%,100%{width:78px;}} .bs-seo-bars{display:flex;align-items:flex-end;gap:6px;height:32px;} .bs-seo-bars span{flex:1;background:linear-gradient(180deg,var(--mint-bright),var(--mint));border-radius:3px 3px 0 0;animation:bsSeoBar 3.6s ease-in-out infinite;} .bs-seo-bars span:nth-child(1){animation-delay:0s;} .bs-seo-bars span:nth-child(2){animation-delay:0.15s;} .bs-seo-bars span:nth-child(3){animation-delay:0.3s;} .bs-seo-bars span:nth-child(4){animation-delay:0.45s;} @keyframes bsSeoBar{0%,15%{height:15%;}65%,100%{height:var(--h,90%);}} .bs-seo-bars span:nth-child(1){--h:45%;} .bs-seo-bars span:nth-child(2){--h:70%;} .bs-seo-bars span:nth-child(3){--h:55%;} .bs-seo-bars span:nth-child(4){--h:95%;} /* Google Ads vs SEO — a pulsing megaphone against steadily-rising bars */ .bs-adsseo{width:160px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;height:70px;} .bs-adsseo-ads{position:relative;color:var(--text-dim);display:flex;align-items:center;height:40px;} .bs-ads-wave{position:absolute;left:20px;top:50%;width:14px;height:14px;border:1.5px solid var(--mint);border-radius:50%;transform:translateY(-50%) scale(0.3);opacity:0;animation:bsAdsWave 2.2s ease-out infinite;} .bs-ads-wave-2{animation-delay:0.7s;} @keyframes bsAdsWave{0%{transform:translateY(-50%) scale(0.3);opacity:0.8;}80%,100%{transform:translateY(-50%) scale(2.4);opacity:0;}} .bs-adsseo-seo{display:flex;align-items:flex-end;gap:5px;height:44px;} .bs-adsseo-seo span{width:9px;background:linear-gradient(180deg,var(--mint-bright),var(--mint));border-radius:2px 2px 0 0;animation:bsSeoGrow 3.4s ease-in-out infinite;} .bs-adsseo-seo span:nth-child(1){animation-delay:0s;} .bs-adsseo-seo span:nth-child(2){animation-delay:0.25s;} .bs-adsseo-seo span:nth-child(3){animation-delay:0.5s;} @keyframes bsSeoGrow{0%,10%{height:20%;}70%,100%{height:var(--h,80%);}} .bs-adsseo-seo span:nth-child(1){--h:40%;} .bs-adsseo-seo span:nth-child(2){--h:70%;} .bs-adsseo-seo span:nth-child(3){--h:100%;} /* AI — a chat bubble typing itself out, with pulsing "thinking" dots */ .bs-ai{width:150px;} .bs-ai-bubble{display:flex;align-items:center;background:var(--bg-elevated);border:1px solid var(--line);border-radius:14px 14px 14px 4px;padding:12px 14px;margin-bottom:12px;} .bs-ai-typed{height:8px;border-radius:3px;background:rgba(255,255,255,0.5);width:0;animation:bsSeoType 3.6s steps(14) infinite;} .bs-ai-caret{width:1.5px;height:12px;background:var(--mint);margin-left:1px;animation:giBlink .6s step-end infinite;} .bs-ai-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--mint);margin-right:5px;animation:biAiPulse 1.4s ease-in-out infinite;} .bs-ai-dot-2{animation-delay:0.2s;} .bs-ai-dot-3{animation-delay:0.4s;} @keyframes biAiPulse{0%,100%{opacity:0.3;transform:scale(1);}50%{opacity:1;transform:scale(1.5);}} @media (prefers-reduced-motion: reduce){ .bs *{animation:none !important;} } @media (prefers-reduced-motion: reduce){ .bcp-glow, .bcp-ring{animation:none;} } .blog-card-body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:8px;flex:1;} .blog-card-cat{ display:inline-block;align-self:flex-start;font-family:'Inter';font-size:11px;font-weight:800; text-transform:uppercase;letter-spacing:0.04em;color:var(--mint);background:rgba(127,227,195,0.1); padding:5px 12px;border-radius:20px; } .blog-card-body h3{font-family:var(--font-display);font-size:19px;font-weight:800;color:var(--text);line-height:1.3;margin:4px 0 2px;} .blog-card-body p{font-size:14px;color:var(--text-dim);line-height:1.6;margin:0;flex:1;} .blog-card-date{font-family:'Inter';font-size:12px;color:var(--text-dim);margin-top:6px;} @media (max-width:900px){ .blog-grid{grid-template-columns:repeat(2,1fr);} } @media (max-width:640px){ .blog-grid{grid-template-columns:1fr;} } /* ===== Flex bottom nav — mobile only, shown on the 3 Flex service pages so switching between FlexSite/FlexShop/FlexCare doesn't mean scrolling back up to the main menu. ===== */ .flex-bottom-nav{display:none;} @media (max-width:768px){ .flex-bottom-nav{ display:flex;position:fixed;bottom:0;left:0;right:0;z-index:60; background:var(--bg-elevated);border-top:1px solid var(--line); padding:8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); } .flex-bn-item{ flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px; color:var(--text-dim);text-decoration:none;font-family:'Inter';font-size:11px;font-weight:700; border-radius:12px;transition:color .2s ease, background .2s ease; } .flex-bn-item svg{width:22px;height:22px;transition:transform .3s cubic-bezier(.34,1.56,.64,1);} .flex-bn-item.active{color:var(--mint);background:rgba(127,227,195,0.1);} .flex-bn-item.active svg{transform:scale(1.1);} .flex-bn-item:active svg{transform:scale(0.88);} /* Keep the last bit of page content from hiding behind the fixed bar — :has() lets this apply only on the pages that actually render the nav, no extra body class needed. */ body:has(.flex-bottom-nav){padding-bottom:74px;} } /* ===== Cookie consent banner ===== */ .cookie-banner{ position:fixed;left:20px;right:20px;bottom:20px;z-index:200;max-width:640px;margin:0 auto; opacity:0;transform:translateY(24px) scale(0.98);pointer-events:none; transition:opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1); } .cookie-banner.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;} .cookie-banner.hide{opacity:0;transform:translateY(16px) scale(0.98);} .cookie-banner-inner{ display:flex;align-items:center;gap:18px;flex-wrap:wrap; background:var(--bg-elevated);border:1px solid var(--line);border-radius:18px; padding:22px 26px;box-shadow:0 24px 60px -20px rgba(0,0,0,0.6); } .cookie-icon{ flex:0 0 auto;width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center; background:rgba(127,227,195,0.1);color:var(--mint); animation:cookieWobble 3.4s ease-in-out infinite; } .cookie-icon svg{width:24px;height:24px;} @keyframes cookieWobble{ 0%,100%{transform:rotate(0deg);} 5%{transform:rotate(-8deg);} 10%{transform:rotate(7deg);} 15%{transform:rotate(-4deg);} 20%,100%{transform:rotate(0deg);} } .cookie-text{flex:1 1 260px;color:var(--text-dim);font-size:14px;line-height:1.6;margin:0;min-width:200px;} .cookie-text a{color:var(--mint);text-decoration:underline;text-underline-offset:2px;} .cookie-text a:hover{color:var(--mint-bright);} .cookie-actions{flex:0 0 auto;display:flex;gap:10px;flex-wrap:wrap;} .cookie-btn{font-size:13.5px;padding:11px 18px;white-space:nowrap;} /* Small floating icon, bottom-left — appears once a choice has been made (replacing the full banner) so cookie preferences stay reachable without the banner sitting on screen permanently. */ .cookie-recall{ position:fixed;left:20px;bottom:20px;z-index:199;width:46px;height:46px;border-radius:50%; background:var(--bg-elevated);border:1px solid var(--line);color:var(--mint); display:flex;align-items:center;justify-content:center;cursor:pointer; opacity:0;transform:scale(0.7);pointer-events:none; transition:opacity .35s cubic-bezier(.16,1,.3,1), transform .35s cubic-bezier(.16,1,.3,1), border-color .2s ease; box-shadow:0 8px 24px -8px rgba(0,0,0,0.5); } .cookie-recall.show{opacity:1;transform:scale(1);pointer-events:auto;animation:cookieRecallPulse 3s ease-in-out 1s infinite;} .cookie-recall:hover{border-color:var(--mint);animation:none;} .cookie-recall svg{width:22px;height:22px;} @keyframes cookieRecallPulse{ 0%,100%{box-shadow:0 8px 24px -8px rgba(0,0,0,0.5), 0 0 0 0 rgba(127,227,195,0.35);} 50%{box-shadow:0 8px 24px -8px rgba(0,0,0,0.5), 0 0 0 7px rgba(127,227,195,0);} } @media (max-width:600px){ .cookie-banner{left:12px;right:12px;bottom:12px;} .cookie-banner-inner{padding:14px 16px;gap:10px;flex-direction:row;flex-wrap:wrap;align-items:center;text-align:left;} .cookie-icon{width:32px;height:32px;border-radius:9px;} .cookie-icon svg{width:18px;height:18px;} .cookie-text{font-size:12.5px;flex:1 1 100%;order:1;} .cookie-actions{width:100%;order:2;gap:8px;} .cookie-btn{flex:1;text-align:center;font-size:12.5px;padding:9px 12px;} .cookie-recall{left:14px;bottom:14px;width:40px;height:40px;} .cookie-recall svg{width:19px;height:19px;} } @media (max-width:768px){ /* The FlexSite/FlexShop/FlexCare pages add a fixed bottom nav bar — raise the cookie banner and recall icon above it so they don't collide (the recall icon in particular was landing right on top of the "FlexSite" label). */ body:has(.flex-bottom-nav) .cookie-banner{bottom:calc(78px + env(safe-area-inset-bottom, 0px));} body:has(.flex-bottom-nav) .cookie-recall{bottom:calc(78px + env(safe-area-inset-bottom, 0px));} } @media (prefers-reduced-motion: reduce){ .cookie-banner{transition:opacity .3s ease;transform:none !important;} .cookie-icon{animation:none;} .cookie-recall{transition:opacity .3s ease;transform:none !important;animation:none !important;} } /* ===== Website Design: decorative "design tools forming" layer ===== Frames the "Design" ghost word in the hero (see the ghost-word rules further down) — positioned within .wf-hero itself so it moves and aligns with that word exactly, rather than floating as a separate fixed element. Very low opacity and pointer-events:none throughout — decorative texture, not a real toolbar; never competes with actual content. Hidden below 900px along with the ghost word it frames. */ .ps-deco{ position:absolute;top:calc(50% + 210px);right:-14vw;transform:none; width:42vw;max-width:620px;height:16vw;max-height:230px; pointer-events:none;z-index:0;opacity:0; animation:psDecoIn 1.4s cubic-bezier(.16,1,.3,1) 1.1s forwards; } @keyframes psDecoIn{from{opacity:0;}to{opacity:0.22;}} .ps-corner{position:absolute;width:9px;height:9px;border:1.5px solid var(--text-dim);} .ps-c-tl{top:-6px;left:-6px;border-right:none;border-bottom:none;} .ps-c-tr{top:-6px;right:-6px;border-left:none;border-bottom:none;} .ps-c-bl{bottom:-6px;left:-6px;border-right:none;border-top:none;} .ps-c-br{bottom:-6px;right:-6px;border-left:none;border-top:none;} .ps-marquee{ position:absolute;inset:0;width:100%;height:100%; fill:none;stroke:var(--text-dim);stroke-width:0.6; } .ps-marquee rect{ stroke-dasharray:4 3;animation:psMarch 12s linear infinite, psMarqueeDraw 1.6s cubic-bezier(.16,1,.3,1) 1.3s backwards; } @keyframes psMarch{to{stroke-dashoffset:-140;}} @keyframes psMarqueeDraw{from{stroke-dashoffset:400;opacity:0;}to{stroke-dashoffset:0;opacity:1;}} .ps-guide{position:absolute;background:var(--mint);opacity:0.5;} .ps-guide-v{top:0;bottom:0;left:50%;width:1px;transform:scaleY(0);transform-origin:top;animation:psGuideV 0.8s cubic-bezier(.16,1,.3,1) 1.7s forwards;} .ps-guide-h{left:0;right:0;top:38%;height:1px;transform:scaleX(0);transform-origin:left;animation:psGuideH 0.8s cubic-bezier(.16,1,.3,1) 1.9s forwards;} @keyframes psGuideV{to{transform:scaleY(1);}} @keyframes psGuideH{to{transform:scaleX(1);}} .ps-tools{ position:absolute;bottom:-64px;right:8px;display:flex;flex-direction:row;gap:8px; padding:6px 8px;border:1px solid var(--text-dim);border-radius:6px; } .ps-tool{ width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:var(--text-dim); opacity:0;animation:psToolIn 0.5s ease 2.1s forwards; } .ps-tool svg{width:13px;height:13px;} .ps-tool.active{color:var(--mint);} .ps-tool:nth-child(2){animation-delay:2.2s;} .ps-tool:nth-child(3){animation-delay:2.3s;} .ps-tool:nth-child(4){animation-delay:2.4s;} @keyframes psToolIn{from{opacity:0;transform:translateX(-4px);}to{opacity:1;transform:translateX(0);}} .ps-label{ position:absolute;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text-dim); opacity:0;animation:psToolIn 0.5s ease 2.5s forwards; } .ps-label-1{bottom:-22px;right:0;} .ps-label-2{top:-22px;left:0;animation-delay:2.6s;} @media (max-width:900px){ .ps-deco{display:none;} } @media (prefers-reduced-motion: reduce){ .ps-deco{animation:none !important;opacity:0.22 !important;} .ps-deco *{animation:none !important;opacity:1 !important;transform:none !important;} } /* ===== "Design is not a template you drag and drop." — giant, very quiet background words running through the Website Design page's hero and its 4 "In depth" sections, each carrying a small Photoshop-tool decorative touch (marquee box / corner handles), echoing the same visual language as .ps-deco. Text only, written for WDlab, not copied from anywhere. ===== */ .hero-ghost{ position:absolute;right:-14vw;left:auto;top:calc(50% + 210px);transform:none;z-index:0; font-family:var(--font-display);font-weight:800;font-size:11vw;line-height:1;text-align:right; color:var(--text);opacity:0.09;letter-spacing:-0.04em;white-space:nowrap;pointer-events:none; clip-path:inset(0 0 0 100%);animation:ghostWrite 1.6s cubic-bezier(.65,0,.35,1) 0.6s forwards; } @keyframes ghostWrite{to{clip-path:inset(0 0 0 0%);}} .eb-ghost{ position:absolute;right:-40px;left:auto;top:50%;transform:translateY(-50%);z-index:0; font-family:var(--font-display);font-weight:800;font-size:8vw;line-height:1;text-align:right; color:var(--text);opacity:0.08;letter-spacing:-0.03em;white-space:nowrap;pointer-events:none; clip-path:inset(0 0 0 100%);transition:clip-path 1.3s cubic-bezier(.65,0,.35,1) .15s; } .eb-row.in .eb-ghost{clip-path:inset(0 0 0 0%);} /* This page's stage rows sit in the regular 1440px .wrap, not the narrower 1280px .eb-band .wrap the -80px compensation above was calibrated for — so the ghost words need their own, uncompensated offset here to land in the right place. */ .method-detail .eb-ghost{right:-14vw;} /* Same ghost-word treatment, extended to every other section on the Method page (not just the 6-stage breakdown) — tied to the site's generic .reveal/.in scroll trigger instead of .eb-row, since these sections use that mechanism already. */ .md-section{position:relative;} .md-ghost{ position:absolute;right:-14vw;left:auto;top:50%;transform:translateY(-50%);z-index:0; font-family:var(--font-display);font-weight:800;font-size:8vw;line-height:1;text-align:right; color:var(--text);opacity:0.08;letter-spacing:-0.03em;white-space:nowrap;pointer-events:none; clip-path:inset(0 0 0 100%);transition:clip-path 1.3s cubic-bezier(.65,0,.35,1) .15s; } .md-ghost.in{clip-path:inset(0 0 0 0%);} /* "Fragmented" and "System" specifically get their own, smaller/ more-visible treatment rather than the shared default. */ .md-ghost-fragmented{font-size:6.4vw;opacity:0.3;} .md-ghost-system{font-size:6.4vw;opacity:0.3;} @media (max-width:900px){.md-ghost{display:none;}} @media (prefers-reduced-motion: reduce){.md-ghost{transition:none;clip-path:inset(0 0 0 0%);}} /* Odd rows ("is not", "you drag"): a marching-ants marquee box drawn around the word once it's revealed. */ .eb-ghost-a::before{ content:'';position:absolute;inset:-14px -22px;border:1px dashed var(--text-dim); opacity:0;transition:opacity .6s ease .7s; } .eb-row.in .eb-ghost-a::before{opacity:0.5;animation:ghostMarch 10s linear infinite;} @keyframes ghostMarch{to{border-color:var(--text-dim);background-position:8px 0;}} /* Even rows ("a template", "and drop."): selection corner handles. */ .eb-ghost-b::before,.eb-ghost-b::after{ content:'';position:absolute;width:10px;height:10px;border:1.5px solid var(--mint);opacity:0; transition:opacity .6s ease .7s; } .eb-ghost-b::before{top:-16px;left:-20px;border-right:none;border-bottom:none;} .eb-ghost-b::after{bottom:-16px;right:-20px;border-left:none;border-top:none;} .eb-row.in .eb-ghost-b::before,.eb-row.in .eb-ghost-b::after{opacity:0.45;} @media (max-width:900px){ .hero-ghost{display:none;} .eb-ghost{display:none;} } @media (prefers-reduced-motion: reduce){ .hero-ghost{animation:none;opacity:0.09;clip-path:inset(0 0 0 0%);} .eb-ghost{transition:none;clip-path:inset(0 0 0 0%);} .eb-ghost-a::before{animation:none !important;} } /* ===== Service pages: secondary quick-nav bar, desktop only ===== */ .svc-subnav{ display:none;border-bottom:1px solid var(--line-soft);background:var(--bg-soft); position:sticky;top:83px;z-index:49; } /* Right-edge fade: the pill row scrolls horizontally (more services than fit on one line, especially with longer Greek labels), so this hints there's more to the right instead of the row just being clipped. */ .svc-subnav::after{ content:"";position:absolute;top:0;right:0;bottom:0;width:56px;pointer-events:none;z-index:1; background:linear-gradient(90deg,transparent,var(--bg-soft) 78%); } .svc-subnav-flex::after{background:linear-gradient(90deg,transparent,var(--bg-soft) 78%);} .svc-subnav-flex{ background-color:var(--bg-soft); background-image:linear-gradient(90deg,rgba(127,227,195,0.1),rgba(127,227,195,0.03)); border-bottom-color:var(--mint-deep); } .svc-subnav-label{ flex:0 0 auto;font-family:'Inter';font-weight:800;font-size:12px;letter-spacing:0.06em; text-transform:uppercase;color:var(--mint);white-space:nowrap; } .svc-subnav-inner{display:flex;align-items:center;gap:16px;padding:14px 40px;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth;} .svc-subnav-inner::-webkit-scrollbar{display:none;} .svc-subnav-pills{display:flex;align-items:center;gap:5px;flex-shrink:0;} .svc-subnav-pill{ display:flex;flex-direction:column;align-items:flex-start;gap:1px;flex-shrink:0; padding:7px 12px;border-radius:20px;font-family:'Inter';font-weight:700;font-size:12.5px; color:var(--text-dim);white-space:nowrap;transition:color .2s ease, background .2s ease; } .svc-subnav-pill small{font-family:'Inter';font-weight:600;font-size:10.5px;color:inherit;opacity:0.7;} .svc-subnav-pill:hover{color:var(--text);background:rgba(255,255,255,0.05);} .svc-subnav-pill.active{color:#0a1512;background:var(--mint);} .svc-subnav-pill.active small{color:#0a1512;opacity:0.75;} .svc-subnav-flex-promo{ flex:0 0 auto;display:flex;align-items:center;gap:6px;margin-left:12px;padding-left:20px; border-left:1px solid var(--line-soft);font-family:'Inter';font-weight:700;font-size:13px; color:var(--mint);white-space:nowrap;transition:color .2s ease, gap .2s ease; } .svc-subnav-flex-promo svg{width:14px;height:14px;flex-shrink:0;} .svc-subnav-flex-promo:hover{color:var(--mint-bright);gap:9px;} @media (min-width:901px){ .svc-subnav{display:block;} } /* ===== Dedicated Method page — reuses the .eb-row editorial-section pattern from service pages, but with a wider aside column since each stage here has a full paragraph, not just a short lead. ===== */ .method-detail{padding:20px 0 60px;} .method-detail .eb-row{grid-template-columns:1fr 420px;} .method-detail .md-body{color:var(--text-dim);font-size:15.5px;line-height:1.75;margin-top:14px;max-width:46ch;} @media (max-width:900px){ .method-detail .eb-row{grid-template-columns:1fr;} } /* ===== Desktop (≥861px): the Services submenu opens as its own column to the right instead of an accordion below — the main nav narrows and sits at the left to make room, and each submenu link fades/slides in one after another instead of all at once. Mobile keeps the accordion (handled above); this only changes ≥861px. ===== */ @media (min-width:1000px){ .mm-nav{transition:max-width .4s cubic-bezier(.16,1,.3,1);} .mm-nav:has(.mm-row-expand.open){max-width:560px;align-self:flex-start;} .mm-row-expand{position:relative;} .mm-sub{ position:absolute;top:0;left:calc(100% + 64px);width:620px; max-height:none !important;overflow:visible;padding-left:0; display:flex;flex-direction:column; opacity:0;pointer-events:none;transform:translateX(-16px); transition:opacity .35s ease, transform .35s ease; } .mm-sub-cols{display:flex;flex-direction:row;gap:56px;} .mm-sub-col{flex:1;min-width:0;} .mm-row-expand.open .mm-sub{opacity:1;pointer-events:auto;transform:translateX(0);} .mm-sub a{ opacity:0;transform:translateX(-14px);border-top:none;padding:10px 0;white-space:normal;line-height:1.3; transition:opacity .4s cubic-bezier(.16,1,.3,1), transform .4s cubic-bezier(.16,1,.3,1), color .2s, padding-left .2s; } .mm-sub-label{padding-left:0;opacity:0;transform:translateX(-14px);transition:opacity .4s ease, transform .4s ease;} .mm-sub-divider{margin-left:0;opacity:0;transition:opacity .4s ease .3s;} .mm-sub-method-promo{margin-left:0;opacity:0;transform:translateY(10px);transition:opacity .4s ease .5s, transform .4s ease .5s;} .mm-row-expand.open .mm-sub a, .mm-row-expand.open .mm-sub-label{opacity:1;transform:translateX(0);} .mm-row-expand.open .mm-sub-divider{opacity:1;} .mm-row-expand.open .mm-sub-method-promo{opacity:1;transform:translateY(0);} .mm-sub-col a:nth-child(1){transition-delay:0.03s;} .mm-sub-col a:nth-child(2){transition-delay:0.06s;} .mm-sub-col a:nth-child(3){transition-delay:0.09s;} .mm-sub-col a:nth-child(4){transition-delay:0.12s;} .mm-sub-col a:nth-child(5){transition-delay:0.15s;} .mm-sub-col a:nth-child(6){transition-delay:0.18s;} .mm-sub-col a:nth-child(7){transition-delay:0.21s;} .mm-sub-col a:nth-child(8){transition-delay:0.24s;} .mm-sub-col a:nth-child(9){transition-delay:0.27s;} .mm-sub-col a:nth-child(10){transition-delay:0.3s;} } /* ===== WDlab Method page — sections beyond the stage breakdown ===== */ .md-section{padding-top:70px;padding-bottom:70px;border-top:1px solid var(--line-soft);} .md-section:first-of-type{border-top:none;} .md-section-alt{background:var(--bg-soft);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);} .md-lead{color:var(--text-dim);font-size:18px;line-height:1.75;max-width:64ch;margin-top:20px;} .md-flow{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:28px;} .md-flow-step{ font-family:var(--font-display);font-weight:800;font-size:22px;color:var(--text); background:var(--bg-soft);border:1px solid var(--line);border-radius:10px;padding:10px 20px; opacity:0;transform:translateY(22px) scale(0.85); transition:opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1); } .md-flow-step-mint{color:#0a1512;background:var(--mint);border-color:var(--mint);} .md-flow-arrow{ color:var(--mint);font-size:20px;font-weight:700;position:relative;display:inline-flex;overflow:hidden; opacity:0;transform:scale(0.5);transition:opacity .35s ease, transform .35s cubic-bezier(.34,1.56,.64,1); } .md-flow-arrow-glyph{display:inline-block;animation:mdArrowFlow 1.6s ease-in-out infinite;} @keyframes mdArrowFlow{0%,100%{transform:translateX(0);opacity:1;}50%{transform:translateX(5px);opacity:0.5;}} /* Interactive: each stage name in the overview jumps to its full card further down the page. */ .md-flow-step-link{cursor:pointer;text-decoration:none;transition:background .25s ease, color .25s ease, transform .25s cubic-bezier(.16,1,.3,1), border-color .25s ease;} .md-flow-step-link:hover{background:var(--mint);color:#0a1512;border-color:var(--mint);transform:translateY(-3px);} [id^="stage-"]{scroll-margin-top:110px;} .md-flow.in .md-flow-step, .md-flow.in .md-flow-arrow{opacity:1;transform:none;} .md-flow.in .md-flow-step:nth-child(1){transition-delay:.05s;} .md-flow.in .md-flow-arrow:nth-child(2){transition-delay:.25s;} .md-flow.in .md-flow-step:nth-child(3){transition-delay:.3s;} .md-flow.in .md-flow-arrow:nth-child(4){transition-delay:.5s;} .md-flow.in .md-flow-step:nth-child(5){transition-delay:.55s;} .md-flow.in .md-flow-arrow:nth-child(6){transition-delay:.75s;} .md-flow.in .md-flow-step:nth-child(7){transition-delay:.8s;} .md-flow.in .md-flow-arrow:nth-child(8){transition-delay:1s;} .md-flow.in .md-flow-step:nth-child(9){transition-delay:1.05s;} .md-flow.in .md-flow-arrow:nth-child(10){transition-delay:1.25s;} .md-flow.in .md-flow-step:nth-child(11){transition-delay:1.3s;} .md-flow-continue{margin-bottom:24px;} .md-tags{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:18px;} .md-tag{ position:relative;font-family:'Inter';font-weight:700;font-size:12px;letter-spacing:0.02em; color:var(--text-dim);padding-left:12px; } .md-tag::before{content:'';position:absolute;left:0;top:2px;bottom:2px;width:2px;background:var(--mint-dim);} .md-applies{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;} .md-applies-pill{ font-family:var(--font-display);font-weight:800;font-size:16px;color:var(--mint); border:1px solid var(--mint-deep);background:rgba(127,227,195,0.06);border-radius:10px;padding:12px 22px; opacity:0;transform:translateY(22px) scale(0.85); transition:opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1); } .md-applies.in .md-applies-pill{opacity:1;transform:none;} .md-applies.in .md-applies-pill:nth-child(1){transition-delay:.05s;} .md-applies.in .md-applies-pill:nth-child(2){transition-delay:.15s;} .md-applies.in .md-applies-pill:nth-child(3){transition-delay:.25s;} .md-applies.in .md-applies-pill:nth-child(4){transition-delay:.35s;} .md-applies.in .md-applies-pill:nth-child(5){transition-delay:.45s;} @media (prefers-reduced-motion: reduce){ .md-flow-step, .md-flow-arrow, .md-applies-pill{transition:none !important;opacity:1 !important;transform:none !important;} } .md-gets{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:32px;} .md-gets-item{ background:var(--bg-soft);border:1px solid var(--line);border-radius:14px;padding:26px 28px; opacity:0;transform:translateY(22px) scale(0.96); transition:border-color .3s ease, transform .5s cubic-bezier(.16,1,.3,1), opacity .5s cubic-bezier(.16,1,.3,1); } .md-gets.in .md-gets-item{opacity:1;transform:none;} .md-gets.in .md-gets-item:nth-child(1){transition-delay:.05s;} .md-gets.in .md-gets-item:nth-child(2){transition-delay:.18s;} .md-gets.in .md-gets-item:nth-child(3){transition-delay:.31s;} .md-gets.in .md-gets-item:nth-child(4){transition-delay:.44s;} .md-gets-item:hover{border-color:var(--mint-deep);transform:translateY(-3px);} .md-gets-item h4{font-family:var(--font-display);font-weight:800;font-size:20px;color:var(--text);margin-bottom:10px;} .md-gets-item p{color:var(--text-dim);font-size:15px;line-height:1.7;} @media (max-width:860px){ .md-flow{gap:10px;} .md-flow-step{font-size:17px;padding:8px 14px;} .md-gets{grid-template-columns:1fr;} } /* ===== "Powered by the WDlab Method" — badge under the hero, and a mini flow-diagram before pricing, on all 9 core service pages. Reuses the .md-flow styling built for the Method page itself, rather than a separate component. ===== */ .svc-method-badge{ display:inline-flex;align-items:center;gap:7px;margin-top:14px; font-family:'Inter';font-weight:700;font-size:12.5px;letter-spacing:0.02em;color:var(--text-dim); text-decoration:none;transition:color .25s ease; } .svc-method-badge:hover{color:var(--mint);} .svc-method-badge-dot{width:6px;height:6px;border-radius:50%;background:var(--text-dim);transition:background .25s ease;animation:svcMethodPulse 2.2s ease-in-out infinite;} .svc-method-badge:hover .svc-method-badge-dot{background:var(--mint);} @keyframes svcMethodPulse{0%,100%{opacity:0.5;}50%{opacity:1;}} .svc-method-mini{padding-top:80px;padding-bottom:80px;border-top:1px solid var(--line-soft);} .svc-method-mini .md-flow-step{font-size:16px;padding:8px 16px;} .svc-method-mini-link{ display:inline-flex;align-items:center;gap:6px;margin-top:28px; font-family:'Inter';font-weight:700;font-size:14px;color:var(--mint);text-decoration:none; transition:gap .25s ease, color .25s ease; } .svc-method-mini-link:hover{gap:11px;color:var(--mint-bright);} @media (prefers-reduced-motion: reduce){.svc-method-badge-dot{animation:none;}} /* Small superscript TM mark on FlexSite/FlexShop/FlexCare titles — much smaller than the huge hero/card title text it sits next to. */ .tm-mark{font-size:0.28em;font-weight:600;vertical-align:super;margin-left:0.05em;color:var(--mint);} /* Re:ACTIVATE hero — small note under the CTA button. Composed entirely from existing tokens (--text-dim, existing font stack) — no new color or typeface introduced. */ .hero-secondary-text{color:var(--text-dim);font-size:14px;margin-top:12px;} .hero-secondary-text a{color:var(--mint);font-weight:600;text-decoration:none;} .hero-secondary-text a:hover{color:var(--mint-bright);} /* Re:ACTIVATE homepage mini-CTA — layout composed on top of the existing .side-card box; no new colors/fonts, just positioning. */ .reactivate-home-cta{padding:24px 0;} .reactivate-home-card{ display:flex;align-items:center;gap:28px;margin-bottom:0; padding:32px 36px; } .reactivate-home-icon{font-size:34px;color:var(--text);flex-shrink:0;line-height:1;} .reactivate-home-body{flex:1;min-width:0;} .reactivate-home-body .mono{display:block;margin-bottom:6px;color:var(--text-dim);} .reactivate-home-body h3{font-family:var(--font-display);font-weight:800;font-size:22px;color:var(--text);margin-bottom:6px;} .reactivate-home-body p{color:var(--text-dim);font-size:15px;line-height:1.6;} .reactivate-home-btn{flex-shrink:0;white-space:nowrap;} @media (max-width:760px){ .reactivate-home-card{flex-direction:column;align-items:flex-start;text-align:left;gap:14px;padding:26px 24px;} .reactivate-home-btn{width:100%;text-align:center;} } /* ===== Re:ACTIVATE hero animation — "broken site" scans and becomes "restored", looping every 9s (data-loop="9000", matching every other service's animation timing). Purely decorative UI mockup, same pattern as e-commerce's cart/seo's rank counter/etc. — no real numbers or claims, just a status-icon crossfade. ===== */ .ra{position:absolute;inset:0;padding:22px;display:flex;flex-direction:column;gap:16px;justify-content:center;} .ra-browser{ position:relative;background:var(--bg-soft);border:1px solid var(--line);border-radius:10px; padding:14px 16px 20px;overflow:hidden; } .ra-dots{display:flex;gap:5px;margin-bottom:14px;} .ra-dots span{width:7px;height:7px;border-radius:50%;background:var(--line);} .ra-scanline{ position:absolute;left:0;right:0;top:0;height:2px;background:var(--mint);opacity:0; box-shadow:0 0 10px 1px var(--mint);animation:raScan 9s ease-in-out infinite; } .ra-lines{position:relative;} .ra-ln{display:block;height:8px;border-radius:4px;margin-bottom:8px;width:100%;} .ra-ln.short{width:60%;} .ra-lines-broken{position:absolute;inset:0;} .ra-lines-broken .ra-ln{background:repeating-linear-gradient(90deg,#e0955c 0,#e0955c 6px,transparent 6px,transparent 11px);opacity:0.55;} .ra-lines-fixed .ra-ln{background:var(--line);opacity:0;animation:raFixedLines 9s ease-in-out infinite;} .ra-lines-broken{animation:raBrokenLines 9s ease-in-out infinite;} .ra-status{ display:inline-flex;align-items:center;gap:7px;font-family:'Inter';font-weight:700;font-size:13px; padding:7px 12px;border-radius:20px;width:fit-content;position:absolute;left:22px; } .ra-status-broken{color:#e0955c;background:rgba(224,149,92,0.1);top:78px;animation:raStatusBroken 9s ease-in-out infinite;} .ra-status-fixed{color:var(--mint);background:rgba(127,227,195,0.1);top:78px;opacity:0;animation:raStatusFixed 9s ease-in-out infinite;} .ra-bars{display:flex;align-items:flex-end;gap:5px;height:36px;opacity:0;animation:raBarsIn 9s ease-in-out infinite;} .ra-bars span{flex:1;background:var(--mint);border-radius:3px 3px 0 0;opacity:0.85;} .ra-bars span:nth-child(1){height:40%;} .ra-bars span:nth-child(2){height:65%;} .ra-bars span:nth-child(3){height:50%;} .ra-bars span:nth-child(4){height:85%;} .ra-bars span:nth-child(5){height:70%;} @keyframes raScan{0%,28%{opacity:0;top:0;}30%{opacity:1;top:0;}42%{opacity:1;top:100%;}44%,100%{opacity:0;top:100%;}} @keyframes raBrokenLines{0%,30%{opacity:1;}42%,100%{opacity:0;}} @keyframes raFixedLines{0%,40%{opacity:0;}48%,100%{opacity:1;}} @keyframes raStatusBroken{0%,28%{opacity:1;transform:translateY(0);}36%{opacity:0;transform:translateY(-6px);}100%{opacity:0;}} @keyframes raStatusFixed{0%,40%{opacity:0;transform:translateY(6px);}48%{opacity:1;transform:translateY(0);}98%{opacity:1;}100%{opacity:0;}} @keyframes raBarsIn{0%,46%{opacity:0;}54%,96%{opacity:1;}100%{opacity:0;}} @media (prefers-reduced-motion: reduce){ .ra-scanline, .ra-lines-broken, .ra-lines-fixed .ra-ln, .ra-status-broken, .ra-status-fixed, .ra-bars{animation:none;} .ra-lines-broken{opacity:0;} .ra-lines-fixed .ra-ln{opacity:1;} .ra-status-broken{opacity:0;} .ra-status-fixed{opacity:1;} .ra-bars{opacity:1;} } /* ===== Re:ACTIVATE floating button — sits directly above the existing .scroll-assist button (right:24px;bottom:32px;height:48px), same right-alignment, no overlap. Hidden until scrolled past the hero, dismissible (remembered for the session so it doesn't reappear after being closed). ===== */ .reactivate-float{ position:fixed;right:24px;bottom:96px;z-index:39; display:flex;align-items:center;gap:9px;padding:11px 16px 11px 12px; background:rgba(14,15,15,0.9);backdrop-filter:blur(6px); border:1px solid var(--line);border-radius:30px; text-decoration:none;color:var(--text); opacity:0;transform:translateY(12px) scale(0.96);pointer-events:none; transition:opacity .4s cubic-bezier(.16,1,.3,1), transform .4s cubic-bezier(.16,1,.3,1), border-color .25s; } .reactivate-float.in{opacity:1;transform:none;pointer-events:auto;} .reactivate-float.dismissed{display:none;} .reactivate-float:hover{border-color:var(--mint-deep);} .reactivate-float-icon{font-size:15px;color:var(--mint);flex-shrink:0;} .reactivate-float-text{font-family:'Inter';font-weight:700;font-size:13px;white-space:nowrap;} .reactivate-float-close{ background:none;border:none;color:var(--text-dim);font-size:16px;line-height:1; cursor:pointer;padding:0 0 0 4px;flex-shrink:0;transition:color .2s; } .reactivate-float-close:hover{color:var(--text);} @media (max-width:600px){ .reactivate-float{right:16px;bottom:84px;padding:9px 12px 9px 10px;} .reactivate-float-text{font-size:12px;} } @media (prefers-reduced-motion: reduce){.reactivate-float{transition:opacity .2s;}} /* ===== Website Health Check tool — results list. Reuses existing tokens only: mint for pass, the same amber (#e0955c) used elsewhere on the site for warnings, and a plain red only for fail (a new addition, used nowhere else, but a hard "fail" state genuinely needs to read as more serious than the existing amber warning tone). ===== */ .site-check-list{max-width:640px;margin:32px auto 0;display:flex;flex-direction:column;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:12px;overflow:hidden;} .site-check-row{display:flex;gap:14px;padding:16px 20px;background:var(--bg-soft);align-items:flex-start;} .site-check-icon{ flex-shrink:0;width:22px;height:22px;border-radius:50%; display:flex;align-items:center;justify-content:center; font-family:'Inter';font-weight:800;font-size:12px;margin-top:1px; } .site-check-pass .site-check-icon{background:rgba(127,227,195,0.15);color:var(--mint);} .site-check-warn .site-check-icon{background:rgba(224,149,92,0.15);color:#e0955c;} .site-check-fail .site-check-icon{background:rgba(224,92,92,0.15);color:#e05c5c;} .site-check-info .site-check-icon{background:var(--bg-elevated);color:var(--text-dim);} .site-check-label{display:block;font-family:'Inter';font-weight:700;font-size:14.5px;color:var(--text);} .site-check-detail{color:var(--text-dim);font-size:13.5px;margin-top:3px;line-height:1.5;} .site-check-cta{margin-top:0;} /* Health check page — vertical breathing room above/below the form, since plain .wrap only handles horizontal padding. */ .site-check-section{padding:50px 0 100px;} @media (max-width:600px){.site-check-section{padding:36px 0 70px;}} /* Shows exactly which URL was fetched, above the results list. */ .site-check-source{max-width:640px;margin:0 auto 12px;color:var(--text-dim);font-size:13px;font-family:'JetBrains Mono',monospace;} .site-check-byline{color:var(--text-dim);font-size:13px;margin-top:10px;font-weight:600;}