@charset "utf-8"; /* ============================================================================ fx.css — 오버(hover) 효과와 움직임만 모아 둔 파일 ============================================================================ 규칙 하나: **가만히 있을 때의 생김새는 여기서 바꾸지 않는다.** 자리·크기·색은 전부 각 화면의 css 가 정하고, 여기서는 손을 대는 순간에만 그림자·기울임·밝기 같은 것을 더한다. 이 파일을 통째로 빼도 시안 그대로다. 움직임은 가 붙었을 때만 건다(head.php 맨 위에서 붙인다). 자바스크립트가 없거나 「움직임 줄이기」를 켠 분에게는 처음부터 다 끝난 모습이다. ========================================================================= */ :root { --fx-ease: cubic-bezier(.22, 1, .36, 1); /* 끝에서 부드럽게 멎는다 */ --fx-fast: .18s; --fx-slow: .9s; } /* ══════════════ 1. 모든 화면 공통 ══════════════════════════════ */ a, button, label, summary, select { -webkit-tap-highlight-color: rgba(97, 54, 217, .12); } /* 키보드로 넘길 때 지금 어디인지 또렷하게 */ a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid #6136d9; outline-offset: 3px; border-radius: 4px; } /* ── 헤더 ─────────────────────────────────────────────── */ .ex-header__logo img { transition: transform var(--fx-fast) var(--fx-ease); } .ex-header__logo:hover img { transform: scale(1.03); } .ex-header__logo:active img { transform: scale(.99); } /* 메뉴 — 글자 밑에 선이 가운데에서 좌우로 자라난다. 지금 보고 있는 메뉴(.is-current)는 그 선이 처음부터 그어져 있다. 선 색은 견적문의 「확인」 단추와 같은 그러데이션(--c-grad, style.css 의 :root)이다. ※ 이 연출은 여기 한 군데에만 있다 — style.css 에 또 두면 나중에 읽히는 이 파일이 덮어써서, 고친 쪽이 안 먹는 것처럼 보인다(실제로 겪었다). */ .ex-gnb a { position: relative; transition: color var(--fx-fast) ease; } .ex-gnb a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 3px; border-radius: 300px; background: var(--c-grad); transform: scaleX(0); transform-origin: center; transition: transform .25s var(--fx-ease); } .ex-gnb a:hover::after, .ex-gnb a.is-current::after { transform: scaleX(1); } /* ── 푸터 ─────────────────────────────────────────────── */ .ex-footer__links a { transition: opacity var(--fx-fast) ease, transform var(--fx-fast) var(--fx-ease); } .ex-footer__links a:hover { transform: translateY(-1px); } .ex-footer__info a { transition: opacity var(--fx-fast) ease; } .ex-footer__info a:hover { opacity: .7; } .ex-footer__logo { transition: opacity var(--fx-fast) ease; } .ex-footer__logo:hover { opacity: .8; } /* ══════════════ 2. 메인 ════════════════════════════════════════ */ /* 숫자 카드 — 살짝 떠오르고 그림자가 짙어진다 */ .mn-stat { transition: transform .3s var(--fx-ease), box-shadow .3s ease; } .mn-stat:hover { transform: translateY(-4px); box-shadow: 0 24px 34px rgba(43, 26, 96, .10), 0 8px 16px rgba(43, 26, 96, .06); } /* 유형별 주요 기능 탭 */ .mn-feat__tab { transition: background-color var(--fx-fast) ease, color var(--fx-fast) ease; cursor: pointer; } .mn-feat__tab:not(.is-on):hover { background: rgba(11, 15, 247, .10); color: #0b0ff7; } /* 기능 동그라미 — 손을 올리면 통통 */ .mn-feat__ico { transition: transform .25s var(--fx-ease); } .mn-feat__ico:hover { transform: translateY(-3px) scale(1.06); } /* 오른쪽 안내 두 장 */ .mn-cta { transition: transform .3s var(--fx-ease), box-shadow .3s ease; } .mn-cta:hover { transform: translateY(-4px); box-shadow: 0 22px 34px rgba(43, 26, 96, .22); } .mn-cta:active { transform: translateY(-1px); } .mn-cta__ico { transition: transform .35s var(--fx-ease); } .mn-cta:hover .mn-cta__ico { transform: rotate(-6deg) scale(1.06); } /* 더보기 — 오른쪽 + 단추가 45도 돌아 X 가 된다 */ .mn-pf__more span { transition: color var(--fx-fast) ease; } .mn-pf__more i { transition: transform .38s var(--fx-ease), box-shadow .3s ease; } .mn-pf__more i svg { display: block; } .mn-pf__more:hover i { transform: rotate(45deg); box-shadow: 0 6px 14px rgba(11, 15, 247, .35); } .mn-pf__more:active i { transform: rotate(45deg) scale(.92); } /* 포트폴리오 카드 — 떠오르고 사진만 살짝 커진다 */ .mn-pf { transition: transform .35s var(--fx-ease), box-shadow .35s ease; } .mn-pf:hover { transform: translateY(-6px); box-shadow: 0 28px 40px rgba(43, 26, 96, .13), 0 8px 18px rgba(43, 26, 96, .07); } .mn-pf__thumb img { transition: transform .55s var(--fx-ease); } .mn-pf:hover .mn-pf__thumb img { transform: scale(1.06); } .mn-pf__name { transition: color var(--fx-fast) ease; } .mn-pf:hover .mn-pf__name { color: #0b0ff7; } /* ── 막대그래프 : 바닥에서 올라온다 ─────────────────────── */ /* 처음 모습(바닥) → 화면에 들어오면 제 자리로. js 표시가 없으면 이 규칙 자체가 안 걸려 바로 제 자리에 그려진다. */ html.js .mn-chart__bar { top: 707px; height: 0; } html.js .mn-chart__tip, html.js .mn-chart__dot { top: 707px; opacity: 0; } html.js .mn-chart__bar { transition: top var(--fx-slow) var(--fx-ease), height var(--fx-slow) var(--fx-ease); } html.js .mn-chart__tip, html.js .mn-chart__dot { transition: top var(--fx-slow) var(--fx-ease), opacity .5s ease .25s; } html.js .mn.is-chart-on .mn-chart__bar { top: var(--t); height: var(--h); } html.js .mn.is-chart-on .mn-chart__tip, html.js .mn.is-chart-on .mn-chart__dot { top: var(--t); opacity: 1; } /* 막대마다 조금씩 늦게 출발해 차례로 올라온다 */ html.js .mn-chart__bar[data-i="2"] { transition-delay: .12s; } html.js .mn-chart__bar[data-i="3"] { transition-delay: .24s; } html.js .mn-chart__tip[data-i="2"], html.js .mn-chart__dot[data-i="2"] { transition-delay: .12s, .37s; } html.js .mn-chart__tip[data-i="3"], html.js .mn-chart__dot[data-i="3"] { transition-delay: .24s, .49s; } /* 바깥 흐린 원이 천천히 깜빡인다 — 가운데 점은 가만히 */ @keyframes mn-dot-pulse { 0% { transform: scale(.82); opacity: 1; } 55% { transform: scale(1.34); opacity: .1; } 100% { transform: scale(.82); opacity: 1; } } html.js .mn-chart__dot::before { animation: mn-dot-pulse 2.4s ease-in-out infinite; } html.js .mn-chart__dot[data-i="2"]::before { animation-delay: .5s; } html.js .mn-chart__dot[data-i="3"]::before { animation-delay: 1s; } /* 말풍선 — 막대에 손을 올리면 살짝 뜬다 */ .mn-chart__tip b { transition: transform .25s var(--fx-ease), box-shadow .25s ease; } /* 인증 배지 — 누르는 곳이 아니라 그냥 그림이다. 손을 올리면 그림만 기울어져 밑의 알약 띠와 어긋나 깨져 보였다(#6). 움직임을 없애고, 마우스 자체를 안 받게 한다. */ .mn-badge__hands { pointer-events: none; } /* ══════════════ 3. 포트폴리오 목록 ═════════════════════════════ */ .pf-cats__item { transition: transform var(--fx-fast) var(--fx-ease), background-color .22s ease; } .pf-cats__item:not(.is-on):hover { background: rgba(255, 255, 255, .14); } .pf-cats__item:hover { transform: translateY(-2px); } .pf-card { transition: transform .35s var(--fx-ease), box-shadow .35s ease, border-color .3s ease; } .pf-card:hover { transform: translateY(-6px); border-color: #fff; box-shadow: 0 30px 46px rgba(20, 6, 60, .38); } .pf-card__thumb img { transition: transform .55s var(--fx-ease); } .pf-card__title { transition: color var(--fx-fast) ease; } .pf-card:hover .pf-card__title { color: #d8c8ff; } .pf-card:hover .pf-card__thumb img { transform: scale(1.05); } .pf__more a { transition: transform .25s var(--fx-ease), opacity var(--fx-fast) ease; } .pf__more a:hover { transform: translateY(-2px); } .pf__more a:active { transform: translateY(0); } /* ══════════════ 4. 포트폴리오 상세 ═════════════════════════════ */ .pv-back { transition: transform .25s var(--fx-ease), opacity var(--fx-fast) ease; } .pv-back:hover { transform: translateX(-4px); } .pv-nav a { transition: transform .25s var(--fx-ease), opacity var(--fx-fast) ease; } .pv-nav__prev:hover { transform: translateX(-5px); } .pv-nav__next:hover { transform: translateX(5px); } /* Main Screens · Related Projects — 손을 올리면 칸이 살짝 떠오른다. 그림 확대는 portfolio-view.css 쪽이 가지고 있다(한 군데서만 정하려고). */ .pv-shot, .pv-rel a { border-radius: 16px; transition: box-shadow .3s ease; } .pv-shot:hover, .pv-rel a:hover { box-shadow: 0 16px 36px rgba(40, 40, 80, .14); } .pv-lb__close, .pv-lb__nav { transition: background-color .2s ease, transform .2s ease; } .pv-lb__nav:active, .pv-lb__close:active { transform: scale(.94); } .pv-site a { transition: opacity var(--fx-fast) ease; } .pv-site a:hover { opacity: .75; } .pv-keys li { transition: transform .28s var(--fx-ease), box-shadow .28s ease, border-color .25s ease; } .pv-keys li:hover { transform: translateY(-3px); border-color: #6136d9; box-shadow: 0 12px 22px rgba(43, 26, 96, .10); } .pv-tech li { transition: transform .25s var(--fx-ease), border-color .25s ease; } .pv-tech li:hover { transform: translateY(-2px); border-color: rgba(97, 54, 217, .4); } .pv-rel a { transition: transform .3s var(--fx-ease); } .pv-rel a:hover { transform: translateY(-5px); } .pv-rel__thumb img { transition: transform .5s var(--fx-ease); } .pv-rel a:hover .pv-rel__thumb img { transform: scale(1.06); } .pv-list a { transition: transform .22s var(--fx-ease), box-shadow .25s ease; } .pv-list a:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(20, 20, 30, .25); } /* ══════════════ 5. 맞춤 솔루션 ════════════════════════════════ */ /* 고르는 칸 — 손을 올리면 테두리가 진해지고 살짝 떠오른다 */ .sol-pick__item { transition: transform .28s var(--fx-ease); } .sol-pick__item:hover { transform: translateY(-4px); } .sol-pick__box { transition: box-shadow .25s ease, border-color .25s ease; } .sol-pick__item:hover .sol-pick__box { border-color: #6136d9; box-shadow: 0 14px 24px rgba(43, 26, 96, .12); } .sol-pick__ico { transition: transform .3s var(--fx-ease); } .sol-pick__item:hover .sol-pick__ico { transform: scale(1.1); } /* 기능 칸 */ .sol-fn__item { transition: transform .28s var(--fx-ease); } .sol-fn__item:hover { transform: translateY(-3px); } .sol-fn__box { transition: box-shadow .25s ease, border-color .25s ease; } .sol-fn__item:hover .sol-fn__box { border-color: #6136d9; box-shadow: 0 12px 22px rgba(43, 26, 96, .12); } .sol-opt__item { transition: transform .28s var(--fx-ease), box-shadow .25s ease; } .sol-opt__item:hover { transform: translateY(-3px); box-shadow: 0 12px 22px rgba(43, 26, 96, .10); } /* 단계 단추 */ .sol__next, .ct__submit { transition: transform .22s var(--fx-ease), box-shadow .25s ease, filter .22s ease; } .sol__next:hover, .ct__submit:hover { transform: translateY(-2px); filter: saturate(1.12) brightness(1.04); box-shadow: 0 12px 26px rgba(152, 49, 211, .30), 0 0 0 4px rgba(152, 49, 211, .10); } .sol__next:active, .ct__submit:active { transform: translateY(0) scale(.985); } .sol__prev, .sol__first button, .sol__back { transition: transform .22s var(--fx-ease), border-color .22s ease, color .22s ease; } .sol__prev:hover, .sol__first button:hover { transform: translateY(-2px); } .sol-rec__chip { transition: transform .25s var(--fx-ease); } .sol-rec__chip:hover { transform: translateY(-2px); } /* ══════════════ 6. 견적문의 ════════════════════════════════════ */ .ct-type { transition: transform .28s var(--fx-ease); } .ct-type:hover { transform: translateY(-4px); } .ct-type__box { transition: box-shadow .25s ease, border-color .25s ease; } .ct-type:hover .ct-type__box { border-color: #6136d9; box-shadow: 0 14px 24px rgba(43, 26, 96, .12); } .ct-type__ico { transition: transform .3s var(--fx-ease); } .ct-type:hover .ct-type__ico { transform: scale(1.1); } .ct-func__box { transition: border-color var(--fx-fast) ease, background-color var(--fx-fast) ease; } .ct-func:hover .ct-func__box { border-color: #6136d9; } .ct-func__txt { transition: color var(--fx-fast) ease; } .ct-func:hover .ct-func__txt { color: #6136d9; } /* 적는 칸 — 손을 올리거나 눌렀을 때 테두리와 옅은 테를 준다 */ .ct-in, .ct-sel select { transition: border-color var(--fx-fast) ease, box-shadow var(--fx-fast) ease; } .ct-in:hover, .ct-sel select:hover { border-color: rgba(97, 54, 217, .55); } .ct-in:focus, .ct-sel select:focus { border-color: #6136d9; box-shadow: 0 0 0 3px rgba(97, 54, 217, .12); outline: none; } /* 첨부 「더 넣기」 + 단추 */ .ct-file__add img { transition: transform .3s var(--fx-ease), filter .25s ease; } /* + 는 네 방향이 같아 돌려도 티가 안 난다 — 커지고 빛나게만 */ .ct-file__add:hover img { transform: scale(1.16); filter: drop-shadow(0 4px 10px rgba(97, 54, 217, .5)); } .ct-file__add:active img { transform: scale(.95); } .ct-file span { transition: background-color var(--fx-fast) ease, transform var(--fx-fast) var(--fx-ease); } .ct-file:hover span { background: #2b2b3d; } .ct-file:active span { transform: scale(.98); } .ct-file__chip { transition: border-color var(--fx-fast) ease, background-color var(--fx-fast) ease; } .ct-file__chip:hover { border-color: var(--ct-purple); background: rgba(97, 54, 217, .12); } .ct-file__chip button { transition: background-color var(--fx-fast) ease, color var(--fx-fast) ease; } .ct-file__chip button:hover { background: var(--ct-purple); color: #fff; } .ct-agree__more { transition: color var(--fx-fast) ease, transform var(--fx-fast) var(--fx-ease); } .ct-agree__more:hover { transform: translateX(2px); } .ct-done__go, .ct-done__sub { transition: transform .22s var(--fx-ease), box-shadow .25s ease, border-color .22s ease, color .22s ease; } .ct-done__go:hover, .ct-done__sub:hover { transform: translateY(-2px); } .ct-done__go:hover { box-shadow: 0 12px 26px rgba(152, 49, 211, .30); } /* ══════════════ 7. 스크롤해서 들어올 때 ═══════════════════════ */ /* 카드가 아래에서 살짝 떠오른다. 다 뜬 뒤 자리는 시안과 똑같다. js 표시가 없으면 이 규칙이 아예 안 걸려 처음부터 제 자리에 있다. fx.js 가 못 돌더라도 2.5초 뒤에는 무조건 보이게 해 둔다. */ html.js .mn-pf, html.js .pf-card { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s var(--fx-ease), box-shadow .35s ease; } html.js .mn-pf.is-in, html.js .pf-card.is-in { opacity: 1; transform: none; } /* 떠오른 뒤에는 위의 오버 효과가 다시 주인이 된다 */ html.js .mn-pf.is-in:hover { transform: translateY(-6px); } html.js .pf-card.is-in:hover { transform: translateY(-6px); } /* more 로 새로 붙은 카드 */ html.js .pf-card.is-new { opacity: 0; transform: translateY(14px); } /* ══════════════ 8. 「움직임 줄이기」를 켠 분 ═══════════════════ */ @media (prefers-reduced-motion: reduce) { html.js .mn-chart__bar { top: var(--t); height: var(--h); } html.js .mn-chart__tip, html.js .mn-chart__dot { top: var(--t); opacity: 1; } html.js .mn-chart__dot::before { animation: none; } html.js .mn-pf, html.js .pf-card { opacity: 1; transform: none; } } /* ============================================================ 푸터 부메랑 — 멀리서 날아와 앉는다 ------------------------------------------------------------ 본사이트(webvista_new)와 같은 연출이다. 스크립트(fx.js)가 에 has-throw 를 붙였을 때만 감췄다가 날린다 — 스크립트가 없으면 처음부터 제자리에 그냥 보인다. 날아오는 동안의 자리는 스크립트가 매 프레임 계산하고, 앉은 뒤에는 아래 markIdle 이 넘겨받아 숨쉬듯 흔들린다. ============================================================ */ /* 로고를 에서 인라인 SVG 로 바꿨다 — 부메랑(.lg-boom) 한 조각만 따로 감췄다 되살려야 하는데, 그림 파일로는 안쪽을 못 건드린다. */ .ex-footer__logo svg { display: block; width: 241px; height: 45px; } .has-throw .ex-footer__mark { opacity: 0; } .has-throw .ex-footer__mark.is-landed { /* 날기 전 감춰 두는 규칙(opacity:0)을 여기서 풀어야 한다 */ opacity: 1; animation: markIdle 6.5s ease-in-out infinite; } @keyframes markIdle { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(4px, -6px) rotate(-2.4deg); } 50% { transform: translate(-3px, -2px) rotate(1.6deg); } 75% { transform: translate(5px, 4px) rotate(2.8deg); } } /* 부메랑은 날아가 있는 동안 로고에서 빠져 있다가, 오른쪽에 앉으면 되돌아온다 */ .has-throw .ex-footer__logo .lg-boom { opacity: 0; } .has-throw .ex-footer__logo.is-boom-back .lg-boom { opacity: 1; transition: opacity .5s ease; } @media (prefers-reduced-motion: reduce) { .has-throw .ex-footer__mark { opacity: 1; } .has-throw .ex-footer__mark.is-landed { animation: none; } .has-throw .ex-footer__logo .lg-boom { opacity: 1; } } /* ---------- 푸터 W 점선 — 진하게 + 빛이 훑고 지나가게 ---------- 대표 사이트(renewal-fix.css 의 .site-footer__deco::after)와 같은 연출이다. 시안에서도 이 장식은 경로가 아니라 그림 한 장이라, 선을 그려 나가는 방식 (stroke-dashoffset)을 쓸 수 없다. 대신 같은 그림을 한 겹 더 얹고 밝은 띠 모양 마스크를 좌우로 흘려, 점들이 차례로 밝아졌다 지나가게 한다. 자리는 바탕 점선(.ex-footer__squiggle)과 **반드시 같아야 한다**. 둘이 어긋나면 W 가 두 겹으로 겹쳐 보이고, 겹치지 않으니 둘 다 흐려 보인다. — 휘갈김은 시안 x1387 + 폭 399 → 오른쪽에서 134, 위에서 89. */ /* 빛 레이어가 밝기를 맡으므로 바탕은 대표 사이트와 같은 .25 로 낮춘다 */ .ex-footer__squiggle { opacity: .25; } .ex-footer__deco::after { content: ""; position: absolute; right: 134px; top: 89px; width: 399px; height: 301px; /* 원본 그림의 점들은 순백이지만 알파가 40%까지밖에 안 올라간다. 그래서 투명도를 1로 올려도, 밝기를 곱해도 더 진해지지 않는다. 같은 그림을 네 겹 겹쳐야 점 하나가 0.40 → 0.87 로 진해진다. 겹쳐도 파일은 한 장이라 부담이 없다. */ background: url("../img/footer-squiggle.png") center / contain no-repeat, url("../img/footer-squiggle.png") center / contain no-repeat, url("../img/footer-squiggle.png") center / contain no-repeat, url("../img/footer-squiggle.png") center / contain no-repeat; opacity: 1; filter: drop-shadow(0 0 9px rgba(255, 255, 255, .55)); pointer-events: none; /* 그림은 399px 폭이다. 띠 자체를 220px 짜리 그림으로 못박고 왼쪽 바깥(-320px)에서 오른쪽 바깥(620px)까지 지나가게 한다. 한 바퀴 중 약 4할만 점선 위를 지나므로 지나갈 때마다 확실히 눈에 띄고 사이에는 쉬어 간다. */ -webkit-mask-image: linear-gradient(100deg, transparent 0%, rgba(0, 0, 0, .5) 32%, #000 47%, #000 53%, rgba(0, 0, 0, .5) 68%, transparent 100%); mask-image: linear-gradient(100deg, transparent 0%, rgba(0, 0, 0, .5) 32%, #000 47%, #000 53%, rgba(0, 0, 0, .5) 68%, transparent 100%); -webkit-mask-size: 220px 100%; mask-size: 220px 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; animation: exWSweep 4.6s linear infinite; } @keyframes exWSweep { from { -webkit-mask-position: -320px 0; mask-position: -320px 0; } to { -webkit-mask-position: 620px 0; mask-position: 620px 0; } } @media (prefers-reduced-motion: reduce) { .ex-footer__deco::after { animation: none; opacity: 0; } } @media (max-width: 1280px) { .ex-footer__deco::after { display: none; } }