/* ============================================================ INNO&M — SERVICE_V2 (Figma 298:1568 → local build) 바이럴 마케팅 단일 상세 페이지. depends on css/common.css Sections: 01 HERO · 02 STRENGTH · 03 WHAT WE DO · 04 GALLERY · 05 PROCESS · 06 FOR WHOM · 07 FAQ · 08 CONTACT · 09 OTHER · 10 FOOTER ============================================================ */ /* ============================================================ ✦ CARD / ORB / NUMBER DESIGN TOKENS (Phase 2 — viral prototype only) One source of truth for 04 PROPOSAL · 05 PORTFOLIO · 06 PROCESS cards and the shared orb / ghost-number motif. Scoped to body.svc-viral so the sibling service pages (shared service.css) are untouched. ============================================================ */ body.svc-viral{ --card-radius:18px; --card-border:rgba(2,112,255,.10); /* hairline blue card edge */ --card-border-hover:rgba(2,112,255,.30); --card-glow:0 0 40px rgba(2,112,255,.14); --card-pad:clamp(22px,2.2vw,34px); --card-bg:linear-gradient(165deg,rgba(14,20,34,.55),rgba(6,8,14,.5)); --orb-size:11px; /* micro accent orb (card corner) */ --ghost-color:rgba(2,112,255,.05); /* giant ghost number tint */ } /* HERO→02 연속성: 전체 본문에 아주 옅은 그레인/노이즈 오버레이(≈3%). 작은 SVG feTurbulence 타일(데이터 URI) — 외부 에셋 0, 가벼움. fixed 레이어라 섹션이 바뀌어도 "같은 필름 그레인" 위에 있는 느낌을 준다. */ body.svc-viral::before{ content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:160px 160px;} @media (prefers-reduced-motion:reduce){body.svc-viral::before{opacity:.02;}} /* shared micro accent orb — drop a into a card corner */ .svc-viral .card-orb{position:absolute;top:16px;right:16px;width:var(--orb-size); height:var(--orb-size);border-radius:50%;background:var(--accent); box-shadow:0 0 16px 3px rgba(2,112,255,.45),0 0 0 4px rgba(2,112,255,.14); pointer-events:none;z-index:2;} /* image slot helper (placeholder; swap via background-image / data-slot) */ .img-slot{ position:relative;background:#16181c;overflow:hidden; background-image:linear-gradient(135deg,#1a1d22 0%,#101216 100%); } .img-slot::after{ content:attr(data-label);position:absolute;left:50%;top:50%; transform:translate(-50%,-50%); font-family:var(--ff-en);font-size:var(--fs-micro);letter-spacing:2px; color:rgba(255,255,255,0.22);text-transform:uppercase;white-space:nowrap; } .section{position:relative;padding:100px 0;} /* ============================================================ FLIP HAND-OFF — intro cover (continuity from HOME viral FLIP) A fixed cover stamped over the hero band at the EXACT rect the HOME overlay ended (set inline in from sessionStorage). Shows the SAME svc-viral.jpg with the SAME cover/center, so the hero is already there at first paint (no white flash, no jump). Fades out after load, revealing the identical real .svc-hero-band underneath. left:0 + width set inline to the overlay's clientWidth-based footprint (excludes scrollbar) → no h-jump. ============================================================ */ .svc-intro-cover{ position:fixed;left:0;z-index:900;pointer-events:none; background:url("../assets/svc-viral.jpg") center/cover no-repeat; /* match .svc-hero-band .img-slot — no extra veil/border, raw band image */ will-change:opacity; transition:opacity .5s ease; opacity:1; } .svc-intro-cover.out{opacity:0;} /* cover sits ABOVE the hero copy (z 900 > 2) so the copy is naturally hidden while the cover is live, then revealed by its own .reveal logic as it fades. left:237px copy partly extends past the band, but the cover spans the full band height so the hand-off frame reads as one continuous image surface. */ @media(prefers-reduced-motion:reduce){ .svc-intro-cover{display:none !important;} } /* ============================================================ 01 HERO (light water/phone band + dark overlay text) ============================================================ */ .svc-hero{position:relative;min-height:880px;background:var(--canvas);overflow:hidden;} /* HERO→02 머티리얼 연속성: 히어로 하단을 캔버스 검정으로 페이드 → 파티클/이미지가 다음 섹션 배경으로 끊김 없이 녹아든다(같은 우주). */ .svc-viral .svc-hero::after{content:"";position:absolute;left:0;right:0;bottom:0; height:clamp(120px,18vh,220px);z-index:2;pointer-events:none; background:linear-gradient(180deg,rgba(8,9,12,0) 0%,var(--canvas) 92%);} /* light texture band (Figma: 746px tall, vertically centered +31) */ .svc-hero-band{ position:absolute;left:0;right:0;top:50%;height:746px;transform:translateY(calc(-50% + 31px)); } .svc-hero-band .img-slot{ position:absolute;inset:0; background:linear-gradient(115deg,#e6ebf2 0%,#c0c9d6 30%,#7f8a99 60%,#1b1f25 100%); } .svc-hero-band .img-slot::after{color:rgba(0,0,0,0.25);} /* blue ellipse glow top-right (Figma 950x680 @ 1158,-101) */ .svc-hero-glow{ position:absolute;top:-101px;left:60%;width:950px;height:680px; background:radial-gradient(closest-side,var(--accent-glow),rgba(2,112,255,0) 70%); pointer-events:none;filter:blur(8px); } .svc-hero-inner{ position:relative;max-width:1920px;margin:0 auto;height:100%;min-height:880px; } /* 세로 중앙정렬은 transform이 아니라 auto-margin으로 — .reveal의 transform:none(.in)이 centering을 지워 카드가 히어로(overflow:hidden) 밖으로 떨어지던 버그 차단. */ .svc-hero-copy{ position:absolute;left:237px;top:0;bottom:0;height:fit-content;margin-block:auto;z-index:5;isolation:isolate; width:760px;max-width:88vw;display:flex;flex-direction:column;gap:20px;align-items:flex-start; } /* dark viral image behind copy → white text for legibility (user decision). soft dark veil under the copy column only, so white text reads against the bright fireworks without boxing the image. */ .svc-hero-copy::before{ content:"";position:absolute;z-index:-1; left:-260px;right:-40px;top:-90px;bottom:-90px; background: linear-gradient(90deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.50) 50%, rgba(0,0,0,0.24) 78%, rgba(0,0,0,0) 100%); pointer-events:none; } .svc-bread{font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-xs);color:rgba(255,255,255,0.6);text-shadow:0 1px 10px rgba(0,0,0,0.5);} .svc-kicker{font-family:var(--ff-en);font-weight:600;font-size:var(--fs-base);color:var(--accent);letter-spacing:.2px;text-shadow:0 1px 12px rgba(0,0,0,0.55);} .svc-hero-h1{font-family:var(--ff-ko);font-weight:700;font-size:clamp(40px,6.6vw,102px);line-height:1.08;color:var(--text);letter-spacing:-2.04px;text-shadow:0 2px 30px rgba(0,0,0,0.6),0 1px 6px rgba(0,0,0,0.7);} .svc-hero-h1 .accent-italic{font-size:clamp(40px,6.6vw,102px);} .svc-hero-lead{font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-md);line-height:1.7;color:rgba(255,255,255,0.82);max-width:560px;text-shadow:0 1px 16px rgba(0,0,0,0.6);} .svc-chips{display:flex;flex-wrap:wrap;gap:12px;padding-top:8px;} .svc-chip{display:inline-flex;align-items:center;gap:9px;background:rgba(2,112,255,0.14);border:1px solid rgba(2,112,255,0.34);border-radius:var(--radius-pill);padding:10px 18px;} .svc-chip .ck{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:var(--radius-sm);background:var(--accent);color:var(--text);font-family:var(--ff-en);font-weight:700;font-size:var(--fs-micro);} .svc-chip span:last-child{font-family:var(--ff-ko);font-weight:500;font-size:var(--fs-xs);color:var(--text);} .svc-hero-card{ margin-top:18px;background:var(--accent-wash);border:1px solid rgba(2,112,255,0.32); border-radius:var(--radius-md);padding:22px 32px;display:flex;flex-direction:column;gap:6px; text-decoration:none;transition:background .2s,transform .2s; } .svc-hero-card:hover{background:rgba(2,112,255,0.2);transform:translateY(-2px);} .svc-hero-card .c-sub{font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-xs);color:rgba(255,255,255,0.66);} .svc-hero-card .c-link{font-family:var(--ff-ko);font-weight:700;font-size:var(--fs-md);color:var(--text);letter-spacing:-.18px;display:inline-flex;align-items:center;gap:8px;} .svc-hero-card .c-arrow{color:var(--accent);transition:transform .2s;} .svc-hero-card:hover .c-arrow{transform:translateX(4px);} /* floating-doc는 이제 실제 상담 링크 → 포인터 커서(공유 common.css 무력화) */ .svc-viral .floating-doc{cursor:pointer;} /* ============================================================ 02 WHO WE ARE (대행사 포지셔닝 + 빅넘버 신뢰지표) 재정의: PROPOSAL과 중복되던 "직접운영/자연스러움" 메시지를 빼고, "왜 우리인가 = 규모·신뢰"를 빅넘버로. 실수치만 사용 (2,800/1,400/50,000 = home·about 정본 지표와 동일). ============================================================ */ .strength{background:var(--canvas);overflow-x:clip;} .brk{display:none;} /* desktop: 절 경계용 보조 줄바꿈 숨김(좁은 폭에서만 노출) */ /* 02 WHO WE ARE — 라이브 STRENGTH 지그재그 복원 (deploy_v3). 팀·역량·데이터 카피. .str-row big numbers = Plus Jakarta Sans ExtraBold, 인물·대시보드 사진 좌우 교차 */ .str-rows{display:flex;flex-direction:column;gap:0;margin-top:40px;} .str-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,120px);align-items:center;min-height:440px;padding:60px 0;} .str-row>*{min-width:0;} .str-row .str-txt{max-width:580px;} .str-row.rev .str-txt{order:2;} .str-row.rev .str-img{order:1;} /* page-number system: serif italic + accent (matches .pp-pnum / .wcp-bignum / .cprm-num) */ .str-num{position:relative;display:inline-block;font-family:var(--ff-serif);font-style:italic;font-weight:500;font-size:clamp(96px,9vw,149px);line-height:.9;color:var(--accent);letter-spacing:-.02em;margin-bottom:24px;text-shadow:0 0 34px rgba(2,112,255,.26);} /* accent hairline under the number — ties the row to the eyebrow rule system */ .str-num::after{content:"";position:absolute;left:6px;bottom:-12px;width:54px;height:2px;border-radius:99px;background:linear-gradient(90deg,var(--accent),rgba(2,112,255,0));} .str-ttl{font-family:var(--ff-ko);font-weight:700;font-size:clamp(30px,3.4vw,50px);line-height:1.18;letter-spacing:-.5px;margin-bottom:20px;color:var(--text);word-break:keep-all;} .str-ttl .nowrap{white-space:nowrap;} .str-desc{font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-base);line-height:1.75;color:var(--muted);word-break:keep-all;overflow-wrap:break-word;text-wrap:pretty;} /* token image card — hairline edge, token radius, hover glow, micro orb (matches PROPOSAL/PORTFOLIO) */ .str-img{position:relative;aspect-ratio:1000/440;border-radius:var(--card-radius);overflow:hidden; border:1px solid var(--card-border);box-shadow:0 18px 50px -28px rgba(0,0,0,.7); transition:border-color .3s,box-shadow .3s,transform .3s;} .str-img::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);} .str-img::after{content:"";position:absolute;top:16px;right:16px;width:var(--orb-size);height:var(--orb-size); border-radius:50%;background:var(--accent);box-shadow:0 0 16px 3px rgba(2,112,255,.45),0 0 0 4px rgba(2,112,255,.14); z-index:3;opacity:0;transform:scale(.6);transition:opacity .35s,transform .35s;pointer-events:none;} .str-row:hover .str-img{border-color:var(--card-border-hover);box-shadow:var(--card-glow),0 18px 50px -28px rgba(0,0,0,.7);transform:translateY(-4px);} .str-row:hover .str-img::after{opacity:1;transform:scale(1);} @media(prefers-reduced-motion:reduce){.str-img,.str-img::after{transition:none;}} /* entrance — staggered: txt leads, img follows ~120ms, big number lands last */ .str-row .str-txt,.str-row .str-img{opacity:0;transition:opacity .9s cubic-bezier(.22,.7,.25,1),transform .9s cubic-bezier(.22,.7,.25,1);} .str-row .str-txt{transform:translateX(-60px);} .str-row .str-img{transform:translateX(60px);transition-delay:.12s;} .str-row.rev .str-txt{transform:translateX(60px);} .str-row.rev .str-img{transform:translateX(-60px);} .str-row.in .str-txt,.str-row.in .str-img{opacity:1;transform:none;} .str-row .str-num{opacity:0;transform:translateY(18px);transition:opacity .8s cubic-bezier(.22,.7,.25,1) .22s,transform .8s cubic-bezier(.22,.7,.25,1) .22s;} .str-row.in .str-num{opacity:1;transform:none;} @media(prefers-reduced-motion:reduce){.str-row .str-txt,.str-row .str-img,.str-row .str-num{opacity:1;transform:none;transition:none;}} /* ============================================================ 03 WHAT WE DO (tab list + channel cards) ============================================================ */ .whatwedo{background:var(--canvas);} .wwd-grid{display:grid;grid-template-columns:420px 1fr;gap:clamp(40px,5vw,90px);align-items:start;margin-top:60px;} .wwd-left .h-section{margin-bottom:18px;} .wwd-sub{font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-sm);line-height:1.7;color:var(--muted);margin-bottom:54px;} .wwd-tabs{display:flex;flex-direction:column;} .wwd-tab{position:relative;text-align:left;background:none;border:0;cursor:pointer;padding:22px 0 22px 22px;border-top:1px solid var(--hair);} .wwd-tab:last-child{border-bottom:1px solid var(--hair);} .wwd-tab .t{display:block;font-family:var(--ff-ko);font-size:var(--fs-lg);font-weight:700;color:var(--muted);transition:color .3s;} .wwd-tab .e{display:block;font-family:var(--ff-en);font-weight:600;font-size:var(--fs-micro);letter-spacing:1.5px;color:var(--muted-2);margin-top:6px;} .wwd-tab::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%) scaleY(0);transform-origin:center;width:3px;height:60%;background:var(--accent);transition:transform .35s;} .wwd-tab.on .t{color:var(--text);} .wwd-tab.on::before{transform:translateY(-50%) scaleY(1);} /* 3.4s auto-rotate progress underline on the active tab — previews next switch. scaleX 0→1 over the rotation interval; restarts via .tick class toggle in JS. only runs while the section auto-rotates (body gets .wwd-running). */ .wwd-tab::after{content:"";position:absolute;left:22px;right:0;bottom:0;height:2px; background:var(--accent);transform:scaleX(0);transform-origin:left center;} .wwd-tabs.wwd-rotating .wwd-tab.on.tick::after{animation:wwdProgress 3.4s linear forwards;} @keyframes wwdProgress{from{transform:scaleX(0);}to{transform:scaleX(1);}} /* pause underline fill when hovering the section (rotation is paused) */ .whatwedo:hover .wwd-tab.on.tick::after{animation-play-state:paused;} /* cards row (all 3 visible; active emphasised) */ .wwd-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;} .wwd-card{display:flex;flex-direction:column;cursor:pointer;transition:opacity .35s cubic-bezier(.22,.61,.36,1);} .wwd-card .img-slot{aspect-ratio:380/540;border-radius:4px;transition:opacity .35s,transform .35s,filter .35s;filter:grayscale(1) brightness(.85);} .wwd-card .cap{padding-top:18px;} .wwd-card .ct{font-family:var(--ff-ko);font-weight:700;font-size:var(--fs-md);color:var(--accent);} .wwd-card .ce{font-family:var(--ff-en);font-weight:600;font-size:var(--fs-micro);letter-spacing:1.4px;color:var(--muted-2);margin:6px 0 8px;} .wwd-card .cl{font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-xs);color:var(--muted);line-height:1.5;} .wwd-cards.has-active .wwd-card{opacity:.5;} .wwd-card.on,.wwd-card:hover{opacity:1 !important;} .wwd-card.on .img-slot,.wwd-card:hover .img-slot{filter:grayscale(0) brightness(1);transform:translateY(-6px);} .wwd-rule{height:1px;background:var(--muted-2);margin-top:40px;} /* ============================================================ 04 PORTFOLIO (5 phone mockups, center featured, hover lift) Figma 347:708 — side cards 356x403, center 474x537 (~0.88 ratio) phone mockups shown in colour; caption always visible (portfolio, not a moody gallery). Hover = lift + sharpen. ============================================================ */ .gallery-sec{background:var(--canvas);text-align:center;overflow:hidden;} .gal-head{margin-bottom:56px;} .gal-ey{font-family:var(--ff-en);font-weight:600;font-size:var(--fs-xs);letter-spacing:3px;color:var(--muted-2);text-transform:uppercase;} /* Figma 04: whole heading is text-transform:uppercase → "PORTFOLIO." */ .gal-h2{font-family:var(--ff-ko);font-weight:700;font-size:clamp(32px,3.4vw,48px);line-height:1.2;letter-spacing:-.5px;margin-top:16px;color:var(--text);text-transform:uppercase;} /* ---- interactive swipe carousel: center card enlarges ---- horizontal scroll-snap track; pointer-drag + touch swipe (JS). side padding = (100% - cardW)/2 so first/last card can reach center. */ .gallery{ display:flex;gap:28px;align-items:center; list-style:none;margin:0;padding:30px 0 40px; overflow-x:auto;overflow-y:hidden; scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch; scrollbar-width:none;cursor:grab;touch-action:pan-x; user-select:none;-webkit-user-select:none;-webkit-touch-callout:none; scroll-padding:0; } .gallery::-webkit-scrollbar{display:none;} .gallery.dragging{cursor:grabbing;scroll-snap-type:none;} /* spacer pseudo-pads so edge cards can center; width set inline by JS via custom prop */ .gallery::before,.gallery::after{content:"";flex:0 0 var(--gal-pad,calc(50% - 170px));} .gal-card{position:relative;flex:0 0 256px;border-radius:var(--card-radius);overflow:hidden;cursor:pointer; background:#0e1014;box-shadow:0 18px 40px rgba(0,0,0,.45); border:1px solid var(--card-border); scroll-snap-align:center; transform:scale(.82);opacity:.55; transition:transform .5s cubic-bezier(.22,.7,.25,1),opacity .5s,box-shadow .5s,filter .4s,border-color .5s;} /* token hairline inner edge + micro orb (matches PROPOSAL/STRENGTH) */ .gal-card::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);} .gal-card::after{content:"";position:absolute;top:14px;right:14px;width:var(--orb-size);height:var(--orb-size); border-radius:50%;background:var(--accent);box-shadow:0 0 16px 3px rgba(2,112,255,.45),0 0 0 4px rgba(2,112,255,.14); z-index:4;opacity:0;transform:scale(.6);transition:opacity .4s,transform .4s;pointer-events:none;} /* will-change only on the in-motion (near/focused) cards, not every card */ .gal-card.gal-near,.gal-card.gal-focus{will-change:transform;} .gal-card .img-slot{position:relative;width:100%;aspect-ratio:356/440; filter:grayscale(.28) brightness(.9) contrast(1.02);transition:filter .45s;pointer-events:none;} /* near-center neighbours: medium */ .gal-card.gal-near{transform:scale(.9);opacity:.8;} /* the focused (center) card: largest, sharp, lifted */ .gal-card.gal-focus{transform:scale(1.08);opacity:1;border-color:var(--card-border-hover);box-shadow:0 44px 90px rgba(0,0,0,.6),var(--card-glow);z-index:3;} .gal-card.gal-focus::after{opacity:1;transform:scale(1);} .gal-card.gal-focus .img-slot{filter:grayscale(0) brightness(1) contrast(1);} /* Figma 04: caption overlaid at bottom of the phone image; both WHITE, soft scrim. */ .gal-card .cap{position:absolute;left:0;right:0;bottom:0;z-index:2; padding:20px;text-align:left;pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.62) 70%,rgba(0,0,0,.82) 100%);} .gal-card .ct{font-family:var(--ff-ko);font-weight:700;font-size:var(--fs-lg);color:var(--text);} .gal-card .ce{font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-md);color:var(--text);margin-top:2px;} /* prevent native drag of images/links inside cards */ .gallery img{-webkit-user-drag:none;user-select:none;} /* PORTFOLIO ∞ loop carousel (perf): baked self-contained brand-KV cards. JS clones a full set both sides + wraps scrollLeft → seamless swipe loop. Snap off (fights the wrap jump); caption overlay hidden (brand/campaign already baked into the image); colour kept (only a soft dim on non-focus). */ .gallery[data-loop]{scroll-snap-type:none;} .gallery[data-loop] .gal-card .cap{display:none;} .gallery[data-loop] .gal-card::after{display:none;} .gallery[data-loop] .gal-card .img-slot{filter:brightness(.9);} .gallery[data-loop] .gal-card.gal-focus .img-slot{filter:none;} /* entrance — fade the whole track up once on reveal */ .gallery{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.22,.7,.25,1),transform .7s cubic-bezier(.22,.7,.25,1);} .gallery.in{opacity:1;transform:translateY(0);} @media(prefers-reduced-motion:reduce){ .gallery{opacity:1;transform:none;transition:none;scroll-behavior:auto;} .gal-card,.gal-card::after{transition:none;} } /* ============================================================ 05 PROCESS (가로 4스텝 — 풀폭, 아이콘+번호+제목+설명) 세로 타임라인의 빈 우측 절반 제거. 단계 내용은 바이럴 맥락: 채널·여론 진단 → 맥락 기획 → 분산 노출 → 모니터링·대응. ============================================================ */ .process{background:var(--canvas);} .proc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:0;} .proc-head .lead{text-align:right;max-width:360px;} /* NOTE: old horizontal flow (.proc-flow/.proc-fline/.proc-fstep/.proc-ficon/ .proc-fnum/.proc-fttl/.proc-fdesc) removed — viral PROCESS now uses the .wcp-* sticky-pin stepper; sibling pages use their own .timeline markup. */ /* ============================================================ 06 FOR WHOM (checklist + B&W image) ============================================================ */ .forwhom{background:var(--canvas);} .fw-grid{display:grid;grid-template-columns:620px 1fr;gap:48px 80px;align-items:center;margin-top:40px;} .fw-head{grid-column:1 / -1;} .fw-h2{font-family:var(--ff-ko);font-weight:700;font-size:clamp(34px,3.8vw,52px);line-height:1.1;letter-spacing:-.6px;margin-top:18px;color:var(--text);} .fw-q{font-family:var(--ff-ko);font-weight:700;font-size:var(--fs-lg);color:var(--text);margin-top:18px;} .fw-q b{color:var(--accent);} .fw-list{display:flex;flex-direction:column;margin-top:40px;} .fw-item{display:flex;align-items:center;gap:22px;padding:22px 0;border-bottom:1px solid var(--hair);} .fw-item:first-child{border-top:1px solid var(--hair);} .fw-box{flex:0 0 34px;width:34px;height:34px;border-radius:9px;border:1.5px solid rgba(255,255,255,.3); display:flex;align-items:center;justify-content:center;transition:background .3s,border-color .3s,transform .35s cubic-bezier(.3,1.3,.5,1);} .fw-box svg{width:18px;height:18px;stroke:var(--text);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .4s ease .05s;} .fw-txt{font-family:var(--ff-ko);font-weight:700;font-size:var(--fs-lg);color:rgba(255,255,255,.92);} .fw-item.on .fw-box{background:var(--accent);border-color:var(--accent);transform:scale(1.08);} .fw-item.on .fw-box svg{stroke-dashoffset:0;} .fw-bridge{font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-md);color:rgba(255,255,255,.7);margin-top:46px;} .fw-bridge b{color:var(--accent);} .fw-img{aspect-ratio:916/448;border-radius:6px;} .fw-imgwrap{position:relative;aspect-ratio:916/448;border-radius:6px;overflow:hidden;} /* image slot fills the wrapper (Figma 06: B&W image on the right column) */ .fw-imgwrap .img-slot{position:absolute;inset:0;filter:grayscale(1);} /* ============================================================ 07 FAQ (accordion) ============================================================ */ .faq{background:var(--canvas);} .faq-list{margin-top:60px;border-top:1px solid var(--hair);} .faq-item{border-bottom:1px solid var(--hair);} .faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px; background:none;border:0;cursor:pointer;text-align:left;padding:28px 0; font-family:var(--ff-ko);font-weight:700;font-size:var(--fs-lg);color:var(--text);} .faq-q .pm{font-family:var(--ff-en);font-weight:300;font-size:var(--fs-2xl);color:var(--accent);transition:transform .3s;line-height:1;flex:0 0 auto;} .faq-item.open .faq-q .pm{transform:rotate(45deg);} .faq-a{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.22,.61,.36,1);} .faq-a-inner{padding:0 0 28px;font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-sm);line-height:1.7;color:var(--muted);max-width:1000px;opacity:0;transform:translateY(-6px);transition:opacity .35s ease .06s,transform .35s cubic-bezier(.22,.61,.36,1) .06s;} .faq-item.open .faq-a-inner{opacity:1;transform:none;} /* ============================================================ 09 OTHER SERVICES ============================================================ */ .other{background:var(--canvas);border-top:1px solid var(--hair);padding:64px 0;} .other-eyebrow{display:flex;align-items:center;gap:14px;} .other-eyebrow .oe-plus{font-family:var(--ff-en);font-weight:400;font-size:var(--fs-base);color:var(--accent);} .other-eyebrow .oe-label{font-family:var(--ff-en);font-weight:600;font-size:var(--fs-xs);letter-spacing:2.34px;color:var(--muted);text-transform:uppercase;} .other-eyebrow .oe-line{flex:1;height:1px;background:var(--hair);} .other-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:24px;} .other-card{display:flex;align-items:center;justify-content:space-between;gap:20px; border:1px solid var(--hair);border-radius:12px;padding:26px 30px;text-decoration:none; transition:border-color .25s,background .25s,transform .25s;} .other-card:hover{border-color:var(--accent);background:rgba(2,112,255,0.06);transform:translateY(-2px);} .other-card .oc-t{font-family:var(--ff-ko);font-weight:700;font-size:var(--fs-md);color:var(--text);} .other-card .oc-arr{font-family:var(--ff-en);font-size:var(--fs-lg);color:var(--accent);} /* ============================================================ RESPONSIVE ============================================================ */ @media(max-width:1280px){ /* svc-hero-h1 is now fluid clamp(40,6.6vw,102) to match ABOUT hero — let it run */ .h-section{font-size:var(--fs-4xl);} .svc-hero-copy{left:40px;} .wwd-grid{grid-template-columns:340px 1fr;} .fw-grid{grid-template-columns:1fr 1fr;gap:48px;} } /* PORTFOLIO 04 is now an interactive swipe carousel (overflow-x scroll-snap), so it no longer needs the old fixed-row shrink/wrap rules. Card width tracks viewport below. */ @media(max-width:980px){ .section{padding:90px 0;} .svc-hero-copy{left:24px;width:90vw;} .svc-hero-copy::before{left:-24px;right:-24px;top:-40px;bottom:-40px; background:linear-gradient(90deg,rgba(0,0,0,0.68) 0%,rgba(0,0,0,0.52) 100%);} .wwd-grid{grid-template-columns:1fr;gap:40px;} .wwd-cards{grid-template-columns:1fr;} .wwd-card .img-slot{aspect-ratio:16/9;} /* 02 STRENGTH 지그재그 → 단일 컬럼 (이미지 항상 아래) */ .str-row{grid-template-columns:1fr;gap:24px;min-height:0;padding:48px 0;} .str-row.rev .str-txt{order:1;} .str-row.rev .str-img{order:2;} /* mobile carousel: smaller cards, still center-focus swipe (siblings) */ .gal-card{flex-basis:220px;} .proc-head{flex-direction:column;align-items:flex-start;gap:14px;} .proc-head .lead{text-align:left;} .fw-grid{grid-template-columns:1fr;gap:40px;} .faq-q{font-size:var(--fs-md);} } @media(max-width:560px){ .svc-hero-h1,.svc-hero-h1 .accent-italic{font-size:var(--fs-3xl);} .h-section,.gal-h2,.fw-h2{font-size:var(--fs-2xl);} .str-num{font-size:var(--fs-6xl);} .svc-chips{gap:8px;} .fw-txt{font-size:var(--fs-base);} .brk{display:inline;} /* 좁은 폭: 절 경계 보조 줄바꿈 노출 */ } /* ============================================================ REDUCED MOTION — respect prefers-reduced-motion. WhatWeDo auto-rotation still advances (JS timer, out of scope), but card/tab swaps and gallery lifts become instant, not animated. ============================================================ */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } .wwd-card .img-slot,.gal-card{transform:none !important;} .reveal{opacity:1 !important;transform:none !important;} /* progress underline: no animated fill under reduced motion (avoid distracting looping bar); keep it hidden so layout/active marker is unchanged. */ .wwd-tab.on.tick::after{animation:none !important;transform:scaleX(0) !important;} /* 06 checklist: checkmark is drawn via stroke-dashoffset transition; with motion reduced the transition can't draw it, leaving empty blue boxes. Figma shows a ✓ in every box, so force the final drawn state at rest. */ .fw-box svg{stroke-dashoffset:0 !important;} } /* ============================================================ PROPOSAL section - 3 cards before CONTACT. namespaced 'pp-' so it never collides with existing classes. ============================================================ */ .proposal{padding:140px 0;} .pp-head{margin-bottom:36px;} .pp-h2{font-family:var(--ff-ko);font-weight:700;font-size:var(--fs-5xl);line-height:1.2;letter-spacing:-1.2px;color:#fff;margin-top:18px;} .pp-sub{font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-base);line-height:1.7;color:var(--muted);margin-top:16px;max-width:560px;} .pp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch;} .pp-card{ position:relative;display:flex;flex-direction:column; background:var(--surface-raised);border:1px solid var(--hair); border-radius:var(--radius-lg);padding:32px 28px 30px; transition:border-color .25s,transform .25s,background .25s;overflow:hidden; } .pp-card::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:linear-gradient(90deg,var(--accent),rgba(2,112,255,0));transform:scaleX(0);transform-origin:left center;transition:transform .4s;} .pp-card:hover{border-color:var(--accent-line);transform:translateY(-4px);background:#12141b;} .pp-card:hover::before{transform:scaleX(1);} .pp-tag{font-family:var(--ff-en);font-weight:600;font-size:var(--fs-micro);letter-spacing:1.8px;color:var(--accent);text-transform:uppercase;} .pp-ttl{font-family:var(--ff-ko);font-weight:700;font-size:var(--fs-xl);line-height:1.35;color:#fff;margin-top:12px;} .pp-txt{font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-sm);line-height:1.7;color:var(--muted);margin-top:14px;} /* (a) timeline - search persistence / longtail */ .pp-line{margin-top:24px;display:flex;flex-direction:column;gap:12px;} .pp-bar{position:relative;height:8px;border-radius:var(--radius-pill);background:rgba(255,255,255,0.06);overflow:hidden;} .pp-bar i{position:absolute;left:0;top:0;height:100%;border-radius:var(--radius-pill);background:linear-gradient(90deg,var(--accent),rgba(2,112,255,0.35));} .pp-bar.ad i{background:rgba(255,255,255,0.22);} .pp-bar-row{display:flex;align-items:center;gap:12px;} .pp-bar-lab{flex:0 0 76px;font-family:var(--ff-ko);font-weight:500;font-size:var(--fs-xs);color:rgba(255,255,255,0.72);} .pp-bar-wrap{flex:1;min-width:0;} .pp-note{font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-xs);line-height:1.6;color:var(--muted-2);margin-top:4px;} /* (b) blogger grades — C-rank steps */ .pp-steps{margin-top:24px;display:flex;flex-direction:column;gap:10px;} .pp-step{display:flex;align-items:flex-start;gap:12px;} .pp-dot{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:1px solid var(--accent-line);background:var(--accent-wash);color:var(--accent);font-family:var(--ff-en);font-weight:700;font-size:var(--fs-xs);display:flex;align-items:center;justify-content:center;line-height:1;} .pp-step-t{font-family:var(--ff-ko);font-weight:700;font-size:var(--fs-sm);color:#fff;} .pp-step-d{font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-xs);line-height:1.6;color:var(--muted);margin-top:2px;} /* (c) keyword / industry checklist */ .pp-check{margin-top:24px;display:flex;flex-direction:column;gap:11px;} .pp-chk{display:flex;align-items:center;gap:11px;font-family:var(--ff-ko);font-weight:500;font-size:var(--fs-sm);color:rgba(255,255,255,0.86);} .pp-chk svg{flex:0 0 auto;width:18px;height:18px;} .pp-chk svg rect{fill:var(--accent-wash);stroke:var(--accent-line);} .pp-chk svg polyline{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;} /* (c) inline CTA link inside the proposal card - pushed to card bottom */ /* 주 CTA — 블루 솔리드, 키워서 위계 1순위로 (Phase 3) */ .pp-cta{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:10px; font-family:var(--ff-ko);font-weight:700;font-size:var(--fs-md);color:#fff; text-decoration:none;letter-spacing:-.2px;background:var(--accent); padding:16px 30px;border-radius:var(--radius-pill); box-shadow:0 14px 34px rgba(2,112,255,.34),inset 0 0 0 1px rgba(255,255,255,.08); transition:background .2s,transform .2s,box-shadow .2s;} .pp-cta:hover{background:var(--color-brand-hover);transform:translateY(-2px); box-shadow:0 20px 44px rgba(2,112,255,.46),inset 0 0 0 1px rgba(255,255,255,.14);} /* PROPOSAL · 3 numbered pillars (overview layout, after WHAT WE DO) */ .pp-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px); border-top:1px solid var(--hairline);padding-top:clamp(28px,3.5vh,44px);} .pp-pillar{position:relative;padding-right:clamp(16px,2vw,36px);} .pp-pillar:not(:last-child)::after{content:"";position:absolute;top:6px;right:0; width:1px;height:calc(100% - 6px);background:rgba(255,255,255,.1);} /* 보강: 작은 아이콘 + 번호를 한 행에, 근거 한 줄(pp-pfact) 추가 (문단은 안 늘림) */ .pp-picon{display:inline-flex;align-items:center;justify-content:center; width:46px;height:46px;border-radius:12px;margin-bottom:18px; background:var(--accent-wash);border:1px solid var(--accent-line);color:var(--accent); transition:border-color .25s,background .25s,transform .3s cubic-bezier(.3,1.3,.5,1);} .pp-picon svg{width:24px;height:24px;} .pp-pillar:hover .pp-picon{border-color:var(--accent);background:rgba(2,112,255,.2);transform:translateY(-3px);} .pp-pnum{display:block;font-family:var(--ff-serif);font-style:italic;font-weight:500; font-size:clamp(28px,2.6vw,40px);line-height:.9;color:var(--accent);margin-bottom:14px;} .pp-pttl{font-family:var(--ff-ko);font-weight:700;font-size:clamp(22px,2.1vw,30px); letter-spacing:-.6px;color:var(--text);margin:0 0 14px;} .pp-pdesc{font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-base); line-height:1.75;color:var(--muted);margin:0;word-break:keep-all;} .pp-pfact{display:block;position:relative;padding-left:22px;margin-top:18px; font-family:var(--ff-ko);font-weight:500;font-size:var(--fs-xs);line-height:1.55; color:rgba(255,255,255,.7);word-break:keep-all;} .pp-pfact::before{content:"";position:absolute;left:0;top:4px;width:14px;height:14px; background:var(--accent);border-radius:4px; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='4,12 10,18 20,6' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='4,12 10,18 20,6' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;} .pp-pillar:hover .pp-pnum{color:#fff;transition:color .25s ease;} .pp-foot{margin-top:clamp(40px,5vh,60px);} .pp-foot .pp-cta{margin-top:0;padding-top:0;} /* ============================================================ ✦ IMPACT BAND — 중반 임팩트 한 컷 (풀폭 빅 카피 · 다크+블루) PROPOSAL~PORTFOLIO 사이 텍스트 단조로움을 끊는 강한 선언. ============================================================ */ .impact-band{position:relative;overflow:hidden;background:#05070d; padding:clamp(96px,13vh,168px) 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);} /* generated dark+blue editorial backdrop (network nodes + word-of-mouth ripple, no text) — Magnific. dark left negative space holds the copy. */ .impact-band .ib-bg{position:absolute;inset:0;pointer-events:none; background:#05070d url("../assets/svc-impact-clean.jpg") center/cover no-repeat;} /* left-darkening + blue lift scrim so the big copy stays legible over the image */ .impact-band .ib-bg::after{content:"";position:absolute;inset:0; background: linear-gradient(90deg, rgba(5,7,13,0.94) 0%, rgba(5,7,13,0.78) 34%, rgba(5,7,13,0.34) 64%, rgba(5,7,13,0.18) 100%), radial-gradient(90% 80% at 8% 100%, rgba(0,51,160,.30), rgba(0,51,160,0) 60%);} .impact-band .ib-inner{position:relative;z-index:1;max-width:1100px;} .ib-kicker{font-family:var(--ff-en);font-weight:600;font-size:var(--fs-xs);letter-spacing:3px; color:var(--accent);text-transform:uppercase;margin-bottom:24px;} .ib-copy{font-family:var(--ff-ko);font-weight:700;font-size:clamp(34px,4.6vw,66px); line-height:1.18;letter-spacing:-1.4px;color:#fff;word-break:keep-all;} .ib-copy .ib-accent{color:var(--accent);} .ib-sub{font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-md);line-height:1.8; color:rgba(255,255,255,.7);margin-top:28px;max-width:680px;word-break:keep-all;} .ib-sub b{color:#fff;font-weight:700;} /* one-line social-proof big-number: white figure / blue suffix / muted label. real figure only (2,800+ 직접 운영 채널 — home·about 정본 지표와 동일). */ /* 두 스탯(주: 2,800+ 직접 운영 채널 / 보조: 50,000+ 누적 진행 건수)을 나란히. 주 스탯엔 단위 라벨(.ib-prooftag)을 또렷이, 보조는 더 작게. 실근거만. */ .ib-proof{display:flex;align-items:flex-end;gap:clamp(28px,4vw,64px);flex-wrap:wrap; margin-top:clamp(34px,4.4vh,52px);padding-top:clamp(26px,3.2vh,38px); border-top:1px solid var(--hair);} .ib-proofmain{display:flex;flex-direction:column;gap:8px;} .ib-prooftag{font-family:var(--ff-en);font-weight:700;font-size:var(--fs-xs); letter-spacing:2px;text-transform:uppercase;color:var(--accent); display:inline-flex;align-items:center;gap:8px;} .ib-prooftag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent); box-shadow:0 0 10px 2px rgba(2,112,255,.6);} .ib-proofnum{font-family:var(--ff-serif);font-style:italic;font-weight:500; font-size:clamp(44px,5vw,84px);line-height:.9;letter-spacing:-1px;color:#fff; font-variant-numeric:tabular-nums;} .ib-proofnum .accent{color:var(--accent);font-style:italic;} .ib-prooflab{font-family:var(--ff-ko);font-weight:500;font-size:var(--fs-md); letter-spacing:-.2px;color:#ffffff8c;word-break:keep-all;} .ib-prooflab .nowrap{white-space:nowrap;} /* 보조 스탯 — 좌측 헤어라인으로 구분, 더 작은 위계 */ .ib-proofsub{display:flex;flex-direction:column;gap:6px; padding-left:clamp(20px,2.4vw,34px);border-left:1px solid var(--hair);} .ib-proofsubnum{font-family:var(--ff-serif);font-style:italic;font-weight:500; font-size:clamp(30px,3.2vw,50px);line-height:.9;letter-spacing:-.6px;color:#fff; font-variant-numeric:tabular-nums;} .ib-proofsubnum .accent{color:var(--accent);font-style:italic;} .ib-proofsublab{font-family:var(--ff-ko);font-weight:500;font-size:var(--fs-sm); letter-spacing:-.2px;color:#ffffff8c;word-break:keep-all;} .ib-proofsublab .nowrap{white-space:nowrap;} .ib-proofsubyr{color:var(--muted-2);font-weight:400;font-size:.92em;} @media(max-width:980px){ .impact-band{padding:84px 0;} .ib-copy{font-size:clamp(30px,8vw,42px);} .ib-proof{gap:22px;} .ib-proofsub{padding-left:0;border-left:0;padding-top:18px;border-top:1px solid var(--hair);width:100%;} } @media(max-width:980px){ .proposal{padding:90px 0;} .pp-grid{grid-template-columns:1fr;gap:16px;} .pp-pillars{grid-template-columns:1fr;gap:0;} .pp-pillar{padding:26px 0;} .pp-pillar:not(:last-child)::after{top:auto;bottom:0;right:auto;left:0;width:100%;height:1px;} .pp-pnum{margin-bottom:12px;font-size:clamp(40px,11vw,56px);} } @media(max-width:560px){ .pp-h2{font-size:var(--fs-3xl);} } /* ============================================================ ✦ CONSULT PROMISE — 상담 시 받는 것 (주 CTA 위계 강화, Phase 3) "준비중" 소개서 동선을 상담 CTA로 흡수. 좌=헤드+주CTA / 우=①②③ 리스트. ============================================================ */ .consult-promise{background:var(--canvas);position:relative;overflow:hidden;} .cprm-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(36px,5vw,80px);align-items:center;} .cprm-kicker{font-family:var(--ff-en);font-weight:600;font-size:var(--fs-xs); letter-spacing:3px;text-transform:uppercase;color:var(--accent);margin-bottom:18px;} .cprm-h2{margin:0;font-family:var(--ff-ko);font-weight:700; font-size:clamp(30px,3.6vw,52px);line-height:1.2;letter-spacing:-1.2px; color:#fff;word-break:keep-all;} .cprm-h2 .accent{color:var(--accent);} .cprm-note{display:flex;align-items:center;gap:10px;margin:22px 0 0; font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-sm);color:var(--muted);} .cprm-note b{color:#fff;font-weight:700;} .cprm-dot{width:7px;height:7px;border-radius:50%;background:var(--color-success); box-shadow:0 0 10px rgba(57,224,160,.9);flex:0 0 auto;} /* 주 CTA — 블루 솔리드(상담 동선 1순위) */ .cprm-cta{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(26px,3vh,38px); font-family:var(--ff-ko);font-weight:700;font-size:var(--fs-md);color:#fff; text-decoration:none;background:var(--accent);padding:17px 32px; border-radius:var(--radius-pill); box-shadow:0 14px 34px rgba(2,112,255,.34),inset 0 0 0 1px rgba(255,255,255,.08); transition:background .2s,transform .2s,box-shadow .2s;} .cprm-cta:hover{background:var(--color-brand-hover);transform:translateY(-2px); box-shadow:0 20px 44px rgba(2,112,255,.46),inset 0 0 0 1px rgba(255,255,255,.14);} .cprm-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0; border-top:1px solid var(--card-border);} .cprm-item{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,1.6vw,26px); align-items:start;padding:clamp(20px,2.4vh,30px) 0;border-bottom:1px solid var(--card-border);} .cprm-num{font-family:var(--ff-serif);font-style:italic;font-weight:500; font-size:clamp(24px,2.2vw,34px);letter-spacing:-.5px;color:var(--accent); line-height:1;opacity:.9;} .cprm-ttl{margin:0;font-family:var(--ff-ko);font-weight:700; font-size:clamp(17px,1.5vw,21px);letter-spacing:-.3px;color:#fff;} .cprm-desc{margin:8px 0 0;font-family:var(--ff-ko);font-weight:400; font-size:var(--fs-sm);line-height:1.7;color:var(--muted);word-break:keep-all;} .cprm-desc .nowrap,.cprm-ttl .nowrap{white-space:nowrap;} @media(max-width:980px){ .cprm-grid{grid-template-columns:1fr;gap:34px;} } /* ============================================================ IMAGE BINDINGS (Magnific-generated slots → background-image) filled slots hide their placeholder label; cover-fit. grayscale slots (wwd-card / gal-card) keep their active-color rules from sections 03/04 above. ============================================================ */ .img-slot[data-slot="hero"], .img-slot[data-slot="strength-1"], .img-slot[data-slot="strength-2"], .img-slot[data-slot="strength-3"], .img-slot[data-slot="channel-community"], .img-slot[data-slot="channel-search"], .img-slot[data-slot="channel-social"], .img-slot[data-slot="forwhom"], .gal-card[data-slot] .img-slot{ background-size:cover;background-position:center;background-repeat:no-repeat; } /* hide placeholder label once an image is bound */ .img-slot[data-slot="hero"]::after, .img-slot[data-slot="strength-1"]::after, .img-slot[data-slot="strength-2"]::after, .img-slot[data-slot="strength-3"]::after, .img-slot[data-slot="channel-community"]::after, .img-slot[data-slot="channel-search"]::after, .img-slot[data-slot="channel-social"]::after, .img-slot[data-slot="forwhom"]::after, .gal-card[data-slot] .img-slot::after{content:none;} /* ============================================================ ✦ PARITY ADD-ONS — Magnetic CTA · 3D card tilt · animated bars (ported 1:1 from home.css; service pages don't load home.css) JS in service.js writes the CSS vars; all gated off on reduced-motion. ============================================================ */ /* ---- Magnetic CTA (matches home.css .is-magnetic) ---- JS writes --mx/--my (px) on .is-magnetic; label lags via --lx/--ly. */ .is-magnetic{--mx:0px;--my:0px; transition:transform .35s cubic-bezier(.22,.61,.36,1);} .is-magnetic.mag-active{transition:transform .08s linear;will-change:transform;} .btn-consult.is-magnetic{transform:translate(var(--mx),var(--my));} .contact-cta.is-magnetic{transform:translate(var(--mx),var(--my));} .contact-cta.is-magnetic:hover{transform:translate(var(--mx),calc(var(--my) - 2px));} .footer-consult.is-magnetic{display:inline-block;transform:translate(var(--mx),var(--my));} .mag-label{display:inline-block;transition:transform .35s cubic-bezier(.22,.61,.36,1); transform:translate(var(--lx,0px),var(--ly,0px));} .is-magnetic.mag-active .mag-label{will-change:transform;} /* ---- 3D card tilt on PROPOSAL cards (matches home.css .is-tilt) ---- pp-card / pp-tier / pp-format already lift translateY(-4px) on hover; we fold that lift INTO the tilt transform so the two never fight. */ .pp-card.is-tilt,.pp-tier.is-tilt,.pp-format.is-tilt{ transition:transform .4s cubic-bezier(.22,.61,.36,1); transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transform-style:preserve-3d;} .pp-card.is-tilt:hover,.pp-tier.is-tilt:hover,.pp-format.is-tilt:hover{ transform:perspective(1100px) translateY(-4px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));} .pp-card.is-tilt.tilt-active,.pp-tier.is-tilt.tilt-active,.pp-format.is-tilt.tilt-active{ transition:transform .12s ease-out;will-change:transform;} /* ---- PROPOSAL bars: animate width 0 -> target on viewport entry ---- JS sets --pp-w from data-w and adds .pp-bar-go to grow it. Until then the bar rests at 0 (only once JS has armed it via .pp-bar-armed, so a no-JS / reduced-motion load keeps the inline width and never collapses). */ /* service-search.html marks bars up with (inline → 0 track width); force them block so the absolute fill resolves against a real width. div-based bars (performance) are already block → no change. */ .pp-bar{display:block;width:100%;} .pp-bar.pp-bar-armed i{width:0;transition:width 1.1s cubic-bezier(.22,.61,.36,1);} .pp-bar.pp-bar-armed.pp-bar-go i{width:var(--pp-w,0%);} @media (prefers-reduced-motion:reduce){ .is-magnetic,.contact-cta.is-magnetic,.btn-consult.is-magnetic, .footer-consult.is-magnetic,.mag-label{transform:none!important;} .pp-card.is-tilt,.pp-tier.is-tilt,.pp-format.is-tilt{transform:none!important;} .pp-bar.pp-bar-armed i{transition:none;} } /* ============================================================ ✦ DYNAMIC MOTION LAYER (service.html 전용 · 스크롤/인터랙션 활력) JS in service.js drives state classes / CSS vars. Everything resolves to its visible resting state on reduced-motion (handled in the block at the very bottom) so content is never hidden without motion. transform/opacity only; one-shot reveals disconnect their IO. ============================================================ */ /* ---- 2 PROPOSAL pillars: left→right staggered slide+fade up ---- will-change is added by JS on IO-enter and removed when the stagger settles (Phase 0: keep will-change interaction-scoped, not standing). */ .pp-pillars.dyn-stagger .pp-pillar{ opacity:0;transform:translateY(30px); transition:opacity .62s cubic-bezier(.22,.61,.36,1),transform .62s cubic-bezier(.22,.61,.36,1); transition-delay:var(--d,0s);} .pp-pillars.dyn-stagger.in .pp-pillar{opacity:1;transform:none;} /* (02 WHO ledger stagger 제거 — WHO는 라이브 STRENGTH 지그재그로 교체됨) */ /* ---- 3 IMPACT band background parallax ---- JS writes --par-y (px) on scroll; the bg is over-sized so the shift never reveals an edge. (.ib-bg already inset:0 + cover.) */ .impact-band .ib-bg{ top:-12%;height:124%; /* headroom for the parallax travel */ transform:translate3d(0,var(--par-y,0px),0);} /* will-change toggled by JS (.ib-parallaxing) only while the band is on screen */ .impact-band .ib-bg.ib-parallaxing{will-change:transform;} /* ---- 3+4 KINETIC mask-reveal (headlines + impact copy) ---- .kin wraps each line in .kin-line>.kin-in; armed = inner pushed below a clip mask, then .kin-go sweeps it up. Stagger via --kd per line. Default (no JS / pre-arm) = fully visible (inner at translateY(0)). */ .kin{} .kin-line{display:block;overflow:hidden;} /* the mask */ .kin-in{display:block;transform:translateY(0);} /* will-change only while the line is armed-and-sweeping (one-shot) */ .kin.kin-armed .kin-in{transform:translateY(110%);will-change:transform;} .kin.kin-go .kin-in{will-change:auto;} /* released after sweep */ .kin.kin-armed .kin-line{padding-bottom:.02em;} /* guard descenders from clipping */ .kin.kin-go .kin-in{transform:translateY(0); transition:transform .82s cubic-bezier(.19,1,.22,1);transition-delay:var(--kd,0s);} /* ---- 5 micro-interaction: subtle tilt on PROPOSAL pillars ---- Folds the existing hover-lift into the tilt transform so they never fight. (Reuses the same --rx/--ry vars the home.js tilt logic writes.) will-change is applied only while .tilt-active (JS adds/removes). */ .pp-pillar.is-tilt{ transition:transform .4s cubic-bezier(.22,.61,.36,1); transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transform-style:preserve-3d;} .pp-pillar.is-tilt.tilt-active{ transition:transform .12s ease-out;will-change:transform;} @media (prefers-reduced-motion:reduce){ .pp-pillars.dyn-stagger .pp-pillar{opacity:1!important;transform:none!important;transition:none!important;} .impact-band .ib-bg{transform:none!important;top:0;height:100%;} .kin.kin-armed .kin-in,.kin .kin-in{transform:none!important;transition:none!important;} .pp-pillar.is-tilt{transform:none!important;} } /* DEFAULT bindings = 카페·커뮤니티 바이럴(service.html). 다른 서비스 페이지는 각자 인라인 style="background-image"로 자기 이미지를 덮어쓴다(우선순위 ↑). */ /* 01 HERO */ .img-slot[data-slot="hero"]{ background-image:url("../assets/svc-viral.jpg"); } /* 02 STRENGTH — zigzag rows */ .img-slot[data-slot="strength-1"]{background-image:url("../assets/svc-strength-1.jpg");} .img-slot[data-slot="strength-2"]{background-image:url("../assets/svc-strength-2.jpg");} .img-slot[data-slot="strength-3"]{background-image:url("../assets/svc-strength-3.jpg");} /* 06 FOR WHOM */ .img-slot[data-slot="forwhom"]{background-image:url("../assets/svc-forwhom.jpg");} /* 03 WHAT WE DO — channels */ .img-slot[data-slot="channel-community"]{background-image:url("../assets/svc-channel-community.jpg");} .img-slot[data-slot="channel-search"]{background-image:url("../assets/svc-channel-search.jpg");} .img-slot[data-slot="channel-social"]{background-image:url("../assets/svc-channel-social.jpg");} /* 04 GALLERY */ .gal-card[data-slot="gallery-1"] .img-slot{background-image:url("../assets/svc-gallery-1.jpg");} .gal-card[data-slot="gallery-2"] .img-slot{background-image:url("../assets/svc-gallery-2.jpg");} .gal-card[data-slot="gallery-3"] .img-slot{background-image:url("../assets/svc-gallery-3.jpg");} .gal-card[data-slot="gallery-4"] .img-slot{background-image:url("../assets/svc-gallery-4.jpg");} .gal-card[data-slot="gallery-5"] .img-slot{background-image:url("../assets/svc-gallery-5.jpg");} /* ============================================================ DESIGN PASS — home 비주얼 언어 이식 (격리 사본 전용) 02 WHO 키네틱 포스터 · 04 PROPOSAL 포스터화 · 05 PORTFOLIO 마퀴 카드월 · 06 PROCESS 스티키-핀 스테퍼 home과 동일 토큰 · transform/opacity · reduced-motion 정적 폴백. ============================================================ */ /* (02 WHO 매니페스토+글래스스피어 .who2-* 블록 제거 — 라이브 STRENGTH 지그재그로 교체. STRENGTH .str-* 스타일은 위 02 섹션에 복원되어 있음) */ /* ---- 04 PROPOSAL — 포스터화 (원형 모티프 + 거대 넘버) ---- */ .proposal{position:relative;overflow:hidden;} .pp-deco{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;} .pp-glow{position:absolute;top:6%;right:6%;width:540px;max-width:46vw;aspect-ratio:1/1;border-radius:50%;background:radial-gradient(circle,rgba(2,112,255,.18),rgba(2,112,255,.04) 55%,transparent 72%);filter:blur(10px);} .pp-circle{position:absolute;top:-120px;right:-160px;width:560px;max-width:52vw;aspect-ratio:1/1;border:1px solid rgba(2,112,255,.32);border-radius:50%;} .pp-orb{position:absolute;top:9%;right:18%;width:13px;height:13px;border-radius:50%;background:var(--accent);box-shadow:0 0 20px 5px rgba(2,112,255,.5),0 0 0 4px rgba(2,112,255,.16);} .pp-ghost{position:absolute;left:-2%;bottom:-6%;font-family:var(--ff-serif);font-style:italic;font-weight:500;font-size:clamp(200px,30vw,460px);line-height:.8;color:var(--ghost-color);user-select:none;letter-spacing:-.04em;} .proposal .container,.proposal .pp-head,.proposal .pp-pillars,.proposal .pp-foot{position:relative;z-index:1;} .proposal .pp-pnum{font-size:clamp(40px,4vw,72px);text-shadow:0 0 30px rgba(2,112,255,.28);} .proposal .pp-pillar{padding:var(--card-pad);border:1px solid var(--card-border);border-radius:var(--card-radius);background:var(--card-bg);transition:border-color .3s,background .3s,transform .3s,box-shadow .3s;} .proposal .pp-pillar:not(:last-child)::after{display:none;} .proposal .pp-pillar:hover{border-color:var(--card-border-hover);background:linear-gradient(160deg,rgba(20,24,34,.85),rgba(10,12,18,.7));box-shadow:var(--card-glow);} .proposal .pp-picon{box-shadow:0 0 0 6px rgba(2,112,255,.05);} /* ---- 06 PROCESS — 스티키-핀 스테퍼 (wcp-* 네임스페이스) ---- */ .process.wcp-why{position:relative;background:var(--canvas);padding:0;min-height:340vh;} .wcp-pin{position:sticky;top:0;height:100vh;min-height:640px;display:flex;align-items:center;overflow:hidden;} .wcp-inner{width:100%;} .wcp-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:clamp(28px,5vh,56px);} .wcp-head .lead{text-align:right;max-width:360px;} .wcp-stage{position:relative;display:grid;grid-template-columns:200px 1fr;gap:clamp(32px,5vw,72px);align-items:start;} .wcp-rail{position:absolute;left:0;top:6px;width:2px;height:calc(100% - 12px);background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden;} .wcp-railfill{position:absolute;left:0;top:0;width:100%;height:0%;background:linear-gradient(180deg,var(--accent),rgba(2,112,255,.4));transition:height .35s cubic-bezier(.22,.61,.36,1);} .wcp-nav{list-style:none;margin:0;padding:0 0 0 22px;display:flex;flex-direction:column;gap:clamp(14px,2.4vh,26px);} .wcp-navitem{display:flex;align-items:baseline;gap:12px;cursor:pointer;opacity:.42;transition:opacity .35s ease;} .wcp-navitem.is-on{opacity:1;} .wcp-navnum{font-family:var(--ff-en);font-weight:700;font-size:var(--fs-md);letter-spacing:1px;color:var(--muted-2);transition:color .35s;} .wcp-navitem.is-on .wcp-navnum{color:var(--accent);} .wcp-navt{font-family:var(--ff-ko);font-weight:700;font-size:var(--fs-lg);color:var(--text);letter-spacing:-.4px;} .wcp-panels{position:relative;min-height:clamp(300px,42vh,420px);} .wcp-step{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;opacity:0;transform:translateY(34px);pointer-events:none;transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1);} .wcp-step.is-on{opacity:1;transform:none;pointer-events:auto;} .wcp-step.is-past{opacity:0;transform:translateY(-34px);} .wcp-bignum{position:absolute;right:0;top:-8%;font-family:var(--ff-serif);font-style:italic;font-weight:500;font-size:clamp(140px,18vw,280px);line-height:.8;color:rgba(2,112,255,.08);z-index:0;user-select:none;} .wcp-sicon{position:relative;z-index:1;width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:var(--surface-raised);border:1px solid var(--accent-line);color:var(--accent);box-shadow:0 0 0 8px var(--canvas),0 0 30px rgba(2,112,255,.18);margin-bottom:24px;} .wcp-sicon svg{width:30px;height:30px;} .wcp-stag{position:relative;z-index:1;font-family:var(--ff-en);font-weight:600;font-size:var(--fs-xs);letter-spacing:2px;color:var(--accent);text-transform:uppercase;} .wcp-sttl{position:relative;z-index:1;font-family:var(--ff-ko);font-weight:700;font-size:clamp(30px,3.6vw,52px);letter-spacing:-.8px;color:var(--text);margin-top:12px;} .wcp-sdesc{position:relative;z-index:1;font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-md);line-height:1.75;color:var(--muted);margin-top:18px;max-width:560px;word-break:keep-all;} .process.wcp-why.wcp-static{min-height:0;} .process.wcp-why.wcp-static .wcp-pin{position:static;height:auto;min-height:0;padding:90px 0;display:block;} .process.wcp-why.wcp-static .wcp-panels{min-height:0;display:flex;flex-direction:column;gap:48px;} .process.wcp-why.wcp-static .wcp-step{position:relative;inset:auto;opacity:1;transform:none;pointer-events:auto;} .process.wcp-why.wcp-static .wcp-rail,.process.wcp-why.wcp-static .wcp-nav{display:none;} .process.wcp-why.wcp-static .wcp-stage{grid-template-columns:1fr;} @media (prefers-reduced-motion:reduce){ .wcp-step{transition:none;} /* no-JS 안전망: 모션 줄임이면 핀 트랙 높이 해제 + 세로 나열 */ .process.wcp-why{min-height:0;} .process.wcp-why .wcp-pin{position:static;height:auto;min-height:0;padding:90px 0;display:block;} .process.wcp-why .wcp-panels{min-height:0;display:flex;flex-direction:column;gap:48px;} .process.wcp-why .wcp-step{position:relative;inset:auto;opacity:1;transform:none;pointer-events:auto;} .process.wcp-why .wcp-rail,.process.wcp-why .wcp-nav{display:none;} .process.wcp-why .wcp-stage{grid-template-columns:1fr;} } /* ---- 06 PROCESS v2 — 단계별 씬 + 진행 게이지 강화 ---- */ .wcp-stage--v2{grid-template-columns:210px 1fr;} /* 진행 게이지 강화: 두께·글로우·퍼센트 라벨 */ .wcp-stage--v2 .wcp-rail{width:3px;background:rgba(255,255,255,.08);} .wcp-stage--v2 .wcp-railfill{box-shadow:0 0 14px rgba(2,112,255,.55);height:25%;} .wcp-railpct{position:absolute;left:10px;top:0;transform:translateY(-50%);font-family:var(--ff-en);font-weight:700;font-size:11px;letter-spacing:.5px;color:var(--accent);white-space:nowrap;opacity:.85;transition:top .35s cubic-bezier(.22,.61,.36,1);} /* nav: 노드(점)로 진행 시각화 */ .wcp-nav--v2{padding-left:26px;} .wcp-nav--v2 .wcp-navitem{position:relative;align-items:center;} .wcp-navnode{position:absolute;left:-26px;top:50%;transform:translateY(-50%);width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.25);transition:background .35s,box-shadow .35s,border-color .35s,transform .35s;} .wcp-nav--v2 .wcp-navitem.is-on .wcp-navnode{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 5px rgba(2,112,255,.16),0 0 16px rgba(2,112,255,.8);transform:translateY(-50%) scale(1.18);} .wcp-nav--v2 .wcp-navitem.is-past .wcp-navnode{background:rgba(2,112,255,.55);border-color:rgba(2,112,255,.55);} /* step: 좌 카피 / 우 추상 씬 (2열). 전환 = 크로스페이드 + 슬라이드 */ .wcp-panels--v2{min-height:clamp(360px,52vh,500px);} .wcp-panels--v2 .wcp-step{display:grid;grid-template-columns:1fr minmax(0,.92fr);gap:clamp(28px,4vw,64px);align-items:center;transform:translateY(26px) scale(.99);transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1);} .wcp-panels--v2 .wcp-step.is-on{transform:none;} .wcp-panels--v2 .wcp-step.is-past{transform:translateY(-26px) scale(.99);} .wcp-stxt{position:relative;min-width:0;} .wcp-stxt .wcp-bignum{right:auto;left:-6px;top:-46%;} .wcp-spts{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 10px;position:relative;z-index:1;} .wcp-spts li{font-family:var(--ff-ko);font-weight:500;font-size:var(--fs-xs);color:var(--text);background:rgba(2,112,255,.1);border:1px solid var(--accent-line);border-radius:999px;padding:6px 13px;letter-spacing:-.2px;} /* 추상 씬: 글래스 노드 이미지 + 단계별 SVG 다이어그램 오버레이 */ .wcp-scene{position:relative;aspect-ratio:1/1;width:100%;max-width:440px;justify-self:end;border-radius:22px;overflow:hidden;border:1px solid var(--hair);background:radial-gradient(120% 100% at 55% 45%,#0a1430 0%,#04070f 72%,#000 100%);} .wcp-scene-img{position:absolute;inset:0;background:url("../assets/svc-proc-node.jpg") center/cover no-repeat;opacity:.9;} /* 단계별로 글래스 노드 이미지를 다르게 프레이밍해 각자 다른 씬처럼 */ .wcp-scene--diagnose .wcp-scene-img{background-size:128%;background-position:50% 46%;} .wcp-scene--plan .wcp-scene-img{background-size:150%;background-position:32% 40%;filter:hue-rotate(-12deg);} .wcp-scene--spread .wcp-scene-img{background-size:108%;background-position:50% 52%;} .wcp-scene--monitor .wcp-scene-img{background-size:142%;background-position:66% 58%;filter:hue-rotate(10deg) saturate(1.1);} .wcp-diag{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;color:var(--accent);} .wcp-diag .dg-ring{stroke:rgba(2,112,255,.35);stroke-width:1.2;fill:none;} .wcp-diag .dg-ring2{stroke:rgba(255,255,255,.16);} .wcp-diag .dg-core{fill:var(--accent);filter:drop-shadow(0 0 6px rgba(2,112,255,.9));} .wcp-diag .dg-dot{fill:rgba(140,190,255,.9);} .wcp-diag .dg-line{stroke:rgba(2,112,255,.55);stroke-width:1.3;stroke-linecap:round;fill:none;} .wcp-diag .dg-line-thick{stroke:var(--accent);stroke-width:2.2;} /* 씬 자체가 활성 스텝일 때 살짝 떠오름(크로스페이드 강화) */ .wcp-panels--v2 .wcp-step .wcp-scene{opacity:.0;transform:translateY(16px) scale(.97);transition:opacity .7s ease .08s,transform .7s cubic-bezier(.22,.61,.36,1) .08s;} .wcp-panels--v2 .wcp-step.is-on .wcp-scene{opacity:1;transform:none;} /* 정적 폴백(reduced-motion / wcp-static): 씬 노출, 2열 유지 가능 시 */ .process.wcp-why.wcp-static .wcp-panels--v2 .wcp-step, .process.wcp-why .wcp-panels--v2 .wcp-step{} @media (prefers-reduced-motion:reduce){ .wcp-panels--v2 .wcp-step{transform:none;} .wcp-panels--v2 .wcp-step .wcp-scene{opacity:1;transform:none;transition:none;} .wcp-railpct{transition:none;} } .process.wcp-why.wcp-static .wcp-panels--v2 .wcp-step .wcp-scene{opacity:1;transform:none;} @media(max-width:980px){ /* 모바일: 스티키-핀 해제 → 4스텝을 세로로 나열(스크롤 재킹 제거). JS 스테퍼가 is-on/is-past를 토글해도 아래 규칙이 우선해 전부 보인다. */ .process.wcp-why{min-height:0 !important;} .process.wcp-why .wcp-pin{position:static !important;height:auto !important;min-height:0 !important;padding:80px 0;display:block;overflow:visible;} .process.wcp-why .wcp-panels,.process.wcp-why .wcp-panels--v2{position:static !important;min-height:0 !important;display:flex;flex-direction:column;gap:44px;} .process.wcp-why .wcp-step,.process.wcp-why .wcp-panels--v2 .wcp-step{position:relative !important;inset:auto !important;opacity:1 !important;transform:none !important;pointer-events:auto;} .process.wcp-why .wcp-step .wcp-scene{opacity:1 !important;transform:none !important;} .process.wcp-why .wcp-rail{display:none;} .wcp-head{flex-direction:column;align-items:flex-start;gap:14px;} .wcp-head .lead{text-align:left;} .wcp-stage{grid-template-columns:1fr;gap:24px;} .wcp-stage--v2{grid-template-columns:1fr;} .wcp-rail{display:none;} .wcp-nav{flex-direction:row;flex-wrap:wrap;padding-left:0;gap:14px 22px;} .wcp-nav--v2{padding-left:0;} .wcp-nav--v2 .wcp-navnode{display:none;} .wcp-panels--v2 .wcp-step{grid-template-columns:1fr;gap:28px;} .wcp-scene{max-width:360px;justify-self:start;} .wcp-stxt .wcp-bignum{top:-30%;} } /* ============================================================ ✦ TIER A/B/C DEVELOP PASS — 4섹션 디벨롭(격리 · body.svc-viral 전용) A1 신규 요소 스타일 · B1 넘버 통일 보조 · B2 인터랙션 정교화 · B3 머티리얼/라인워크. siblings(perf/search/inf)는 다른 body class라 무영향. ============================================================ */ /* ---- A1: PROPOSAL CTA 마찰제거 한 줄(주 CTA 옆) ---- */ .svc-viral .pp-foot{display:flex;align-items:center;gap:clamp(14px,1.6vw,24px);flex-wrap:wrap;} .svc-viral .pp-cta-friction{font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-sm); color:var(--muted-2);letter-spacing:-.2px;word-break:keep-all;} .svc-viral .pp-cta-friction .nowrap{white-space:nowrap;} /* ---- A1: PROPOSAL 근거줄(.pp-pfact) 살짝 또렷이(가독) ---- */ .svc-viral .pp-pfact{color:rgba(255,255,255,.78);} /* (PORTFOLIO 미니케이스 .cx-mini-result/.cx-rk 제거 — 라이브 폰목업 갤러리로 교체) */ /* ---- A1: PROCESS 스텝별 산출물(받는 것) 한 줄 ---- */ .svc-viral .wcp-deliver{position:relative;z-index:1;display:inline-flex;align-items:center;gap:9px; margin:18px 0 0;font-family:var(--ff-ko);font-weight:600;font-size:var(--fs-sm); color:#fff;letter-spacing:-.2px;word-break:keep-all; background:linear-gradient(180deg,rgba(2,112,255,.14),rgba(2,112,255,.06)); border:1px solid var(--accent-line);border-radius:12px;padding:9px 15px;} .svc-viral .wcp-dvk{font-family:var(--ff-en);font-weight:700;font-size:9px;letter-spacing:1px; text-transform:uppercase;color:var(--accent);border-right:1px solid var(--accent-line); padding-right:9px;} /* ============================================================ B2 — PROPOSAL card-orb 역시차 + 광택 하이라이트 JS가 --ox/--oy(오브 역시차), --gx/--gy(포인터 광택 위치) 기록. 기존 틸트 transform과 충돌 없게 오브는 자기 transform만 사용. ============================================================ */ .svc-viral .proposal .pp-pillar{overflow:hidden;} /* 광택 하이라이트가 카드 밖으로 안 새게 */ .svc-viral .proposal .pp-pillar .card-orb{ transition:transform .25s cubic-bezier(.22,.61,.36,1),box-shadow .25s; transform:translate3d(var(--ox,0px),var(--oy,0px),0);} .svc-viral .proposal .pp-pillar.tilt-active .card-orb{ box-shadow:0 0 20px 4px rgba(2,112,255,.6),0 0 0 5px rgba(2,112,255,.16);} /* 광택 하이라이트: 포인터를 따라가는 옅은 방사형 글로우(호버 시만 보임) */ .svc-viral .proposal .pp-pillar::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit; background:radial-gradient(240px 200px at var(--gx,50%) var(--gy,50%),rgba(2,112,255,.16),transparent 62%); opacity:0;transition:opacity .3s ease;} .svc-viral .proposal .pp-pillar:hover::before{opacity:1;} /* 카드 상단 블루 헤어라인(B3) — 카드 머티리얼 깊이 */ .svc-viral .proposal .pp-pillar::after{ content:"";position:absolute;top:0;left:0;right:0;height:1px;z-index:1;pointer-events:none; background:linear-gradient(90deg,transparent,rgba(2,112,255,.55) 22%,rgba(2,112,255,.55) 78%,transparent); opacity:.5;transition:opacity .3s ease;} .svc-viral .proposal .pp-pillar:hover::after{opacity:1;} /* 내용물을 광택/헤어라인 위로 */ .svc-viral .proposal .pp-pillar > *{position:relative;z-index:1;} /* (PORTFOLIO 피처/미니 hover 줌 .cx-* 제거 — 라이브 폰목업 갤러리는 .gal-card hover 사용) */ /* ============================================================ B2 — PROCESS: 좌측 세로 진행라인 + 레이더 노드 활성 동기 점등 .wcp-rail 채움은 기존 JS가 height로 구동(--seg-pct). 비활성 노드 dim, 활성 노드 코어 펄스. --seg/--segf 는 JS가 기록(이산 점프 완화 훅). ============================================================ */ /* 레일 채움 보간 — 연속 진행(--seg-pct)로 부드럽게 (이산 setStep과 별개로 흐름) */ .svc-viral .wcp-stage--v2 .wcp-railfill{transition:height .5s cubic-bezier(.22,.61,.36,1),box-shadow .4s;} .svc-viral .wcp-stage--v2 .wcp-navitem.is-on .wcp-navnode{animation:wcpNodePulse 2.2s ease-in-out infinite;} @keyframes wcpNodePulse{ 0%,100%{box-shadow:0 0 0 5px rgba(2,112,255,.16),0 0 16px rgba(2,112,255,.8);} 50%{box-shadow:0 0 0 7px rgba(2,112,255,.10),0 0 22px rgba(2,112,255,1);} } /* 비활성 노드 더 또렷이 dim (대비) */ .svc-viral .wcp-nav--v2 .wcp-navitem:not(.is-on):not(.is-past) .wcp-navnode{opacity:.55;} /* 활성 스텝일 때 우측 씬의 레이더 코어/도트 펄스 동기 */ .svc-viral .wcp-step.is-on .wcp-diag .dg-core{animation:wcpCorePulse 2s ease-in-out infinite;} .svc-viral .wcp-step.is-on .wcp-diag .dg-dot{animation:wcpDotBlink 2.4s ease-in-out infinite;} .svc-viral .wcp-step.is-on .wcp-diag .dg-dot:nth-of-type(2){animation-delay:.3s;} .svc-viral .wcp-step.is-on .wcp-diag .dg-dot:nth-of-type(3){animation-delay:.6s;} .svc-viral .wcp-step.is-on .wcp-diag .dg-dot:nth-of-type(4){animation-delay:.9s;} @keyframes wcpCorePulse{0%,100%{filter:drop-shadow(0 0 6px rgba(2,112,255,.9));}50%{filter:drop-shadow(0 0 14px rgba(2,112,255,1));}} @keyframes wcpDotBlink{0%,100%{opacity:.5;}50%{opacity:1;}} /* 키보드 포커스 가시화(nav role=button) */ .svc-viral .wcp-navitem:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:6px;} @media (prefers-reduced-motion:reduce){ .svc-viral .wcp-stage--v2 .wcp-navitem.is-on .wcp-navnode, .svc-viral .wcp-step.is-on .wcp-diag .dg-core, .svc-viral .wcp-step.is-on .wcp-diag .dg-dot{animation:none;} .svc-viral .wcp-stage--v2 .wcp-railfill{transition:none;} } /* ============================================================ B3 — 머티리얼/라인워크: 섹션 경계 1px 블루 헤어라인 통일 PROPOSAL·IMPACT·PORTFOLIO·PROCESS 상단 경계에 절제된 블루 라인. ============================================================ */ .svc-viral .proposal,.svc-viral .cx,.svc-viral .process.wcp-why{position:relative;} .svc-viral .proposal::before{ /* 기존 .pp-deco 위라 충돌 없게 별도 라인은 안 그림; PROPOSAL은 카드 헤어라인으로 처리 */ } /* PORTFOLIO·PROCESS 섹션 상단 헤어라인(은은한 블루) */ .svc-viral .cx::after,.svc-viral .process.wcp-why::after{ content:"";position:absolute;top:0;left:0;right:0;height:1px;pointer-events:none;z-index:3; background:linear-gradient(90deg,transparent,rgba(2,112,255,.22) 50%,transparent);} /* ============================================================ ✦ VIRAL 디자인 시스템 통일 — 형제 서비스 3종 (perf/search/inf) 바이럴 최종본(svc-viral 전용)으로 개발된 토큰·그레인·카드오브· PROPOSAL 포스터화·IMPACT·PROCESS 씬스테퍼 스타일을, 다른 body class 세 페이지에도 동일 적용. (HTML 구조를 service.html과 동일하게 맞췄으므로 같은 클래스 트리에 그대로 매칭된다.) — 이 블록만으로 룩 통일. ============================================================ */ body.svc-performance,body.svc-search,body.svc-influencer{ --card-radius:18px; --card-border:rgba(2,112,255,.10); --card-border-hover:rgba(2,112,255,.30); --card-glow:0 0 40px rgba(2,112,255,.14); --card-pad:clamp(22px,2.2vw,34px); --card-bg:linear-gradient(165deg,rgba(14,20,34,.55),rgba(6,8,14,.5)); --orb-size:11px; --ghost-color:rgba(2,112,255,.05); } /* 필름 그레인 오버레이 (HERO→하단 연속성) */ body.svc-performance::before,body.svc-search::before,body.svc-influencer::before{ content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:160px 160px;} @media (prefers-reduced-motion:reduce){ body.svc-performance::before,body.svc-search::before,body.svc-influencer::before{opacity:.02;} } /* 카드 코너 마이크로 오브 */ .svc-performance .card-orb,.svc-search .card-orb,.svc-influencer .card-orb{ position:absolute;top:16px;right:16px;width:var(--orb-size);height:var(--orb-size); border-radius:50%;background:var(--accent); box-shadow:0 0 16px 3px rgba(2,112,255,.45),0 0 0 4px rgba(2,112,255,.14); pointer-events:none;z-index:2;} /* HERO 하단 캔버스 페이드(02 연속성) */ .svc-performance .svc-hero::after,.svc-search .svc-hero::after,.svc-influencer .svc-hero::after{ content:"";position:absolute;left:0;right:0;bottom:0; height:clamp(120px,18vh,220px);z-index:2;pointer-events:none; background:linear-gradient(180deg,rgba(8,9,12,0) 0%,var(--canvas) 92%);} .svc-performance .floating-doc,.svc-search .floating-doc,.svc-influencer .floating-doc{cursor:pointer;} /* ---- PROPOSAL: 마찰제거 한 줄 · 근거줄 ---- */ .svc-performance .pp-foot,.svc-search .pp-foot,.svc-influencer .pp-foot{ display:flex;align-items:center;gap:clamp(14px,1.6vw,24px);flex-wrap:wrap;} .svc-performance .pp-cta-friction,.svc-search .pp-cta-friction,.svc-influencer .pp-cta-friction{ font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-sm); color:var(--muted-2);letter-spacing:-.2px;word-break:keep-all;} .svc-performance .pp-cta-friction .nowrap,.svc-search .pp-cta-friction .nowrap,.svc-influencer .pp-cta-friction .nowrap{white-space:nowrap;} .svc-performance .pp-pfact,.svc-search .pp-pfact,.svc-influencer .pp-pfact{color:rgba(255,255,255,.78);} /* ---- PROCESS: 스텝별 산출물(받는 것) 한 줄 ---- */ .svc-performance .wcp-deliver,.svc-search .wcp-deliver,.svc-influencer .wcp-deliver{ position:relative;z-index:1;display:inline-flex;align-items:center;gap:9px; margin:18px 0 0;font-family:var(--ff-ko);font-weight:600;font-size:var(--fs-sm); color:#fff;letter-spacing:-.2px;word-break:keep-all; background:linear-gradient(180deg,rgba(2,112,255,.14),rgba(2,112,255,.06)); border:1px solid var(--accent-line);border-radius:12px;padding:9px 15px;} .svc-performance .wcp-dvk,.svc-search .wcp-dvk,.svc-influencer .wcp-dvk{ font-family:var(--ff-en);font-weight:700;font-size:9px;letter-spacing:1px; text-transform:uppercase;color:var(--accent);border-right:1px solid var(--accent-line); padding-right:9px;} /* ---- PROPOSAL card-orb 역시차 + 광택 하이라이트 + 헤어라인 ---- */ .svc-performance .proposal .pp-pillar,.svc-search .proposal .pp-pillar,.svc-influencer .proposal .pp-pillar{overflow:hidden;} .svc-performance .proposal .pp-pillar .card-orb,.svc-search .proposal .pp-pillar .card-orb,.svc-influencer .proposal .pp-pillar .card-orb{ transition:transform .25s cubic-bezier(.22,.61,.36,1),box-shadow .25s; transform:translate3d(var(--ox,0px),var(--oy,0px),0);} .svc-performance .proposal .pp-pillar.tilt-active .card-orb,.svc-search .proposal .pp-pillar.tilt-active .card-orb,.svc-influencer .proposal .pp-pillar.tilt-active .card-orb{ box-shadow:0 0 20px 4px rgba(2,112,255,.6),0 0 0 5px rgba(2,112,255,.16);} .svc-performance .proposal .pp-pillar::before,.svc-search .proposal .pp-pillar::before,.svc-influencer .proposal .pp-pillar::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit; background:radial-gradient(240px 200px at var(--gx,50%) var(--gy,50%),rgba(2,112,255,.16),transparent 62%); opacity:0;transition:opacity .3s ease;} .svc-performance .proposal .pp-pillar:hover::before,.svc-search .proposal .pp-pillar:hover::before,.svc-influencer .proposal .pp-pillar:hover::before{opacity:1;} .svc-performance .proposal .pp-pillar::after,.svc-search .proposal .pp-pillar::after,.svc-influencer .proposal .pp-pillar::after{ content:"";position:absolute;top:0;left:0;right:0;height:1px;z-index:1;pointer-events:none; background:linear-gradient(90deg,transparent,rgba(2,112,255,.55) 22%,rgba(2,112,255,.55) 78%,transparent); opacity:.5;transition:opacity .3s ease;} .svc-performance .proposal .pp-pillar:hover::after,.svc-search .proposal .pp-pillar:hover::after,.svc-influencer .proposal .pp-pillar:hover::after{opacity:1;} .svc-performance .proposal .pp-pillar > *,.svc-search .proposal .pp-pillar > *,.svc-influencer .proposal .pp-pillar > *{position:relative;z-index:1;} /* ---- PROCESS: 레일 보간 · 노드 펄스 · 레이더 동기 점등 ---- */ .svc-performance .wcp-stage--v2 .wcp-railfill,.svc-search .wcp-stage--v2 .wcp-railfill,.svc-influencer .wcp-stage--v2 .wcp-railfill{transition:height .5s cubic-bezier(.22,.61,.36,1),box-shadow .4s;} .svc-performance .wcp-stage--v2 .wcp-navitem.is-on .wcp-navnode,.svc-search .wcp-stage--v2 .wcp-navitem.is-on .wcp-navnode,.svc-influencer .wcp-stage--v2 .wcp-navitem.is-on .wcp-navnode{animation:wcpNodePulse 2.2s ease-in-out infinite;} .svc-performance .wcp-nav--v2 .wcp-navitem:not(.is-on):not(.is-past) .wcp-navnode,.svc-search .wcp-nav--v2 .wcp-navitem:not(.is-on):not(.is-past) .wcp-navnode,.svc-influencer .wcp-nav--v2 .wcp-navitem:not(.is-on):not(.is-past) .wcp-navnode{opacity:.55;} .svc-performance .wcp-step.is-on .wcp-diag .dg-core,.svc-search .wcp-step.is-on .wcp-diag .dg-core,.svc-influencer .wcp-step.is-on .wcp-diag .dg-core{animation:wcpCorePulse 2s ease-in-out infinite;} .svc-performance .wcp-step.is-on .wcp-diag .dg-dot,.svc-search .wcp-step.is-on .wcp-diag .dg-dot,.svc-influencer .wcp-step.is-on .wcp-diag .dg-dot{animation:wcpDotBlink 2.4s ease-in-out infinite;} .svc-performance .wcp-step.is-on .wcp-diag .dg-dot:nth-of-type(2),.svc-search .wcp-step.is-on .wcp-diag .dg-dot:nth-of-type(2),.svc-influencer .wcp-step.is-on .wcp-diag .dg-dot:nth-of-type(2){animation-delay:.3s;} .svc-performance .wcp-step.is-on .wcp-diag .dg-dot:nth-of-type(3),.svc-search .wcp-step.is-on .wcp-diag .dg-dot:nth-of-type(3),.svc-influencer .wcp-step.is-on .wcp-diag .dg-dot:nth-of-type(3){animation-delay:.6s;} .svc-performance .wcp-step.is-on .wcp-diag .dg-dot:nth-of-type(4),.svc-search .wcp-step.is-on .wcp-diag .dg-dot:nth-of-type(4),.svc-influencer .wcp-step.is-on .wcp-diag .dg-dot:nth-of-type(4){animation-delay:.9s;} .svc-performance .wcp-navitem:focus-visible,.svc-search .wcp-navitem:focus-visible,.svc-influencer .wcp-navitem:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:6px;} @media (prefers-reduced-motion:reduce){ .svc-performance .wcp-stage--v2 .wcp-navitem.is-on .wcp-navnode,.svc-search .wcp-stage--v2 .wcp-navitem.is-on .wcp-navnode,.svc-influencer .wcp-stage--v2 .wcp-navitem.is-on .wcp-navnode, .svc-performance .wcp-step.is-on .wcp-diag .dg-core,.svc-search .wcp-step.is-on .wcp-diag .dg-core,.svc-influencer .wcp-step.is-on .wcp-diag .dg-core, .svc-performance .wcp-step.is-on .wcp-diag .dg-dot,.svc-search .wcp-step.is-on .wcp-diag .dg-dot,.svc-influencer .wcp-step.is-on .wcp-diag .dg-dot{animation:none;} .svc-performance .wcp-stage--v2 .wcp-railfill,.svc-search .wcp-stage--v2 .wcp-railfill,.svc-influencer .wcp-stage--v2 .wcp-railfill{transition:none;} } /* PROCESS 섹션 상단 헤어라인 */ .svc-performance .process.wcp-why::after,.svc-search .process.wcp-why::after,.svc-influencer .process.wcp-why::after{ content:"";position:absolute;top:0;left:0;right:0;height:1px;pointer-events:none;z-index:3; background:linear-gradient(90deg,transparent,rgba(2,112,255,.22) 50%,transparent);} .svc-performance .process.wcp-why,.svc-search .process.wcp-why,.svc-influencer .process.wcp-why{position:relative;} /* ============================================================ ✦ UNIFY PASS — 한글 줄바꿈 + 타입 토큰 통일 (4페이지 공통) 목적: 모든 한글 텍스트 요소가 동일한 줄바꿈 규칙 (word-break:keep-all + overflow-wrap:break-word + text-wrap:pretty)을 쓰도록 전수 보강. 어절이 중간에서 끊기지 않고 절 경계에서만 줄이 넘어가게 한다.
은 HTML에서 절 경계에만 둠. justify 미사용(좌정렬). serif italic 넘버(str-num/pp-pnum/ib-proofnum 등)·영문 eyebrow는 제외. ============================================================ */ .svc-bread,.svc-hero-h1,.svc-hero-lead, .svc-hero-card .c-sub,.svc-hero-card .c-link, .svc-chip span:last-child, .str-ttl,.str-desc, .wwd-sub,.wwd-tab .t,.wwd-card .ct,.wwd-card .cl, .wwm-ttl,.wwm-tag,.wwm-desc, .gal-h2,.gal-card .ct,.gal-card .ce, .fw-h2,.fw-q,.fw-txt,.fw-bridge, .faq-q,.faq-a-inner, .pp-h2,.pp-sub,.pp-ttl,.pp-txt,.pp-note,.pp-bar-lab, .pp-step-t,.pp-step-d,.pp-chk, .pp-pttl,.pp-pdesc,.pp-pfact,.pp-cta-friction, .ib-copy,.ib-sub,.ib-prooflab,.ib-proofsublab, .wcp-navt,.wcp-sttl,.wcp-sdesc,.wcp-spts li,.wcp-deliver, .cprm-h2,.cprm-ttl,.cprm-desc,.cprm-note, .other-card .oc-t, /* influencer 전용 PROPOSAL(pp-tier/prod/format) 한글 텍스트 */ .pp-tier-ttl,.pp-tier-desc,.pp-tier-best, .pp-prod-ttl,.pp-prod-desc,.pp-prod-for, .pp-format-ttl,.pp-format-desc, .ppi-head .h-section{ word-break:keep-all; overflow-wrap:break-word; text-wrap:pretty; } /* ---- 타입 토큰 통일: influencer 전용 PROPOSAL의 하드코딩 px → --fs-* ---- (다른 3페이지는 .pp-pillar 공통 구조라 이미 토큰 사용. 인플루언서만 pp-tier/prod/format 별도 블록이라 px가 남아 있었음 → 같은 위계의 다른 섹션과 동일 토큰으로 정렬. 9~11px 마이크로 라벨만 px 유지.) */ .svc-influencer .ppi-head .h-section{font-size:var(--fs-3xl);} /* 44 → 40 (섹션 헤딩 위계) */ .svc-influencer .pp-tier-tag{font-size:var(--fs-xs);} /* 12 → 13 (eyebrow/tag) */ .svc-influencer .pp-tier-range{font-size:var(--fs-xs);} /* 13 */ .svc-influencer .pp-tier-ttl{font-size:var(--fs-xl);} /* 24 (카드 제목) */ .svc-influencer .pp-tier-desc{font-size:var(--fs-sm);} /* 15 → 14 (본문) */ .svc-influencer .pp-tier-best{font-size:var(--fs-xs);} /* 13 */ .svc-influencer .pp-prod-no{font-size:var(--fs-sm);} /* 14 (영문 번호 라벨) */ .svc-influencer .pp-prod-ttl{font-size:var(--fs-lg);} /* 21 → 20 (카드 제목) */ .svc-influencer .pp-prod-desc{font-size:var(--fs-sm);} /* 14.5 → 14 (본문) */ .svc-influencer .pp-prod-for{font-size:var(--fs-xs);} /* 13 */ .svc-influencer .pp-format-tag{font-size:var(--fs-xs);} /* 12 → 13 */ .svc-influencer .pp-format-ttl{font-size:var(--fs-lg);} /* 22 → 20 (카드 제목) */ .svc-influencer .pp-format-desc{font-size:var(--fs-sm);} /* 15 → 14 (본문) */ @media(max-width:900px){ .svc-influencer .ppi-head .h-section{font-size:var(--fs-2xl);} /* 34 → 30 */ } /* PORTFOLIO "전체 보기" CTA (gallery 섹션 → portfolio.html) */ .gal-viewall{display:inline-flex;align-items:center;gap:10px;margin-top:24px;font-family:var(--ff-ko);font-weight:600;font-size:16px;color:#fff;text-decoration:none;border:1px solid rgba(2,112,255,.45);border-radius:999px;padding:13px 28px;transition:background .25s,border-color .25s,transform .25s;} .gal-viewall:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-2px);} .gal-viewall span{transition:transform .25s;} .gal-viewall:hover span{transform:translateX(4px);} /* ===== item scroll stagger — reveal 컨테이너 자식 순차 등장 (전 서비스 공통) ===== */ .pp-pillars,.faq-list,.other-grid{opacity:1 !important;transform:none !important;} .pp-pillars>.pp-pillar,.faq-list>.faq-item,.other-grid>.other-card{opacity:0;transform:translateY(28px);transition:opacity .6s cubic-bezier(.22,.7,.25,1),transform .6s cubic-bezier(.22,.7,.25,1);} .pp-pillars.in>.pp-pillar,.faq-list.in>.faq-item,.other-grid.in>.other-card{opacity:1;transform:none;} .pp-pillars.in>.pp-pillar:nth-child(1),.faq-list.in>.faq-item:nth-child(1),.other-grid.in>.other-card:nth-child(1){transition-delay:.05s;} .pp-pillars.in>.pp-pillar:nth-child(2),.faq-list.in>.faq-item:nth-child(2),.other-grid.in>.other-card:nth-child(2){transition-delay:.13s;} .pp-pillars.in>.pp-pillar:nth-child(3),.faq-list.in>.faq-item:nth-child(3){transition-delay:.21s;} .pp-pillars.in>.pp-pillar:nth-child(4),.faq-list.in>.faq-item:nth-child(4){transition-delay:.29s;} .faq-list.in>.faq-item:nth-child(5){transition-delay:.37s;} .faq-list.in>.faq-item:nth-child(6){transition-delay:.45s;} .faq-list.in>.faq-item:nth-child(7){transition-delay:.53s;} @media(prefers-reduced-motion:reduce){.pp-pillars>.pp-pillar,.faq-list>.faq-item,.other-grid>.other-card{opacity:1 !important;transform:none !important;transition:none !important;}} /* ===== micro-interactions: flowing line (ambient) + hover ===== */ /* eyebrow line: traveling light */ .eyebrow .eb-line{position:relative;overflow:hidden;} .eyebrow .eb-line::after{content:"";position:absolute;top:0;left:0;height:100%;width:60px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0;transform:translateX(-60px);animation:eb-sweep 3.8s cubic-bezier(.45,0,.5,1) infinite;} @keyframes eb-sweep{0%{transform:translateX(-60px);opacity:0}12%{opacity:.55}50%{opacity:.55}58%,100%{transform:translateX(1700px);opacity:0}} /* proposal pillar hover: lift + icon glow */ .proposal .pp-pillar{transition:transform .4s cubic-bezier(.22,.7,.25,1);} .proposal .pp-pillar:hover{transform:translateY(-8px);} .proposal .pp-pillar .pp-picon{transition:transform .35s cubic-bezier(.22,.7,.25,1),border-color .35s,background .35s,box-shadow .35s;} .proposal .pp-pillar:hover .pp-picon{box-shadow:0 12px 32px rgba(2,112,255,.4);} /* FAQ hover: left accent bar + slide + color */ .faq-item{position:relative;} .faq-item::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:2px;background:var(--accent);transform:scaleY(0);transform-origin:center;transition:transform .35s cubic-bezier(.22,.7,.25,1);} .faq-item:hover::before{transform:scaleY(1);} .faq-q{transition:padding-left .32s cubic-bezier(.22,.7,.25,1),color .28s;} .faq-item:hover .faq-q{padding-left:16px;color:var(--accent);} /* other-service card: bottom line sweep */ .other-card{position:relative;overflow:hidden;} .other-card::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:linear-gradient(90deg,var(--accent),transparent);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.22,.7,.25,1);} .other-card:hover::after{transform:scaleX(1);} /* WWD carousel card: top line sweep */ .wwm-card{position:relative;} .wwm-card::after{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:linear-gradient(90deg,var(--accent),transparent);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.22,.7,.25,1);z-index:4;pointer-events:none;} .wwm-card:hover::after{transform:scaleX(1);} /* process badge — fill follows mouse hover (01 default; hovered step fills, others outline) */ #process.hzA .wcp-bignum{transition:background-color .4s cubic-bezier(.22,.7,.25,1),border-color .4s cubic-bezier(.22,.7,.25,1),color .4s cubic-bezier(.22,.7,.25,1),transform .3s cubic-bezier(.22,.7,.25,1),box-shadow .4s;} /* mouse anywhere in the timeline → 01 reverts to outline */ #process.hzA .wcp-panels:hover .wcp-step:first-child .wcp-bignum{background:#0d131f;border-color:rgba(91,155,255,.5);color:#9fc0ff;box-shadow:0 0 0 7px var(--canvas);} /* the hovered step gets the fill (placed after → wins the tie on step 01) */ #process.hzA .wcp-panels:hover .wcp-step:hover .wcp-bignum{background:#2f6bff;border-color:#2f6bff;color:#fff;box-shadow:0 0 0 7px var(--canvas),0 0 26px rgba(47,107,255,.55);transform:scale(1.08);} @media(prefers-reduced-motion:reduce){.eyebrow .eb-line::after{animation:none;opacity:0;}} /* process connecting line fills up to the hovered step (default = step 1) */ #process.hzA .wcp-panels::after{content:"";position:absolute;top:29px;left:7%;height:2px;width:5.5%;background:linear-gradient(90deg,#2f6bff,#5b9bff);box-shadow:0 0 12px rgba(47,107,255,.5);z-index:0;opacity:0;transition:width .55s cubic-bezier(.22,.7,.25,1),opacity .6s ease .3s;} #process.hzA .wcp-panels.in::after{opacity:1;} #process.hzA .wcp-panels:has(.wcp-step:nth-child(1):hover)::after{width:5.5%;} #process.hzA .wcp-panels:has(.wcp-step:nth-child(2):hover)::after{width:30.5%;} #process.hzA .wcp-panels:has(.wcp-step:nth-child(3):hover)::after{width:55.5%;} #process.hzA .wcp-panels:has(.wcp-step:nth-child(4):hover)::after{width:80.5%;} @media(prefers-reduced-motion:reduce){#process.hzA .wcp-panels::after{transition:none;opacity:1;}}