diff --git a/src/components/main/MainSolution.jsx b/src/components/main/MainSolution.jsx index 24860dd..107d5bf 100644 --- a/src/components/main/MainSolution.jsx +++ b/src/components/main/MainSolution.jsx @@ -78,10 +78,7 @@ function FlightMockup({ animate }) {
{stats.map((s, i) => ( -
+
{s.label}
{row.id} {row.name} - - {row.status} - + {row.status} {row.speed} {row.alt} @@ -159,8 +154,7 @@ function IBEMockup({ animate }) { let val = 0; const t = setInterval(() => { val = Math.min(val + 3000, 120000); - if (priceRef.current) - priceRef.current.textContent = val.toLocaleString() + " KRW"; + if (priceRef.current) priceRef.current.textContent = val.toLocaleString() + " KRW"; if (val >= 120000) clearInterval(t); }, 20); @@ -218,10 +212,7 @@ function IBEMockup({ animate }) { { dep: "12:30", arr: "14:50", price: "150,000 KRW", active: false }, { dep: "18:20", arr: "20:40", price: "120,000 KRW", active: false }, ].map((f, i) => ( -
+
{f.dep}
@@ -237,10 +228,7 @@ function IBEMockup({ animate }) {
-
+
{f.active ? "0 KRW" : f.price}
선택
@@ -260,7 +248,7 @@ function MainSolution() { const solutions = [ { label: "비행 관리", - title: "비행상황관리\n시스템", + title: "비행상황관리 시스템", desc: "항공기, 무인기, 선박, 차량 등 다양한 이동체의 실시간 위치와 운항 상태를 하나의 플랫폼에서 통합 모니터링합니다. 고도, 속도, 항로 이력을 정밀하게 추적하고, 이상 상황 발생 시 즉각적인 대응이 가능합니다.", mockup: "flight", link: "/solution/flight-control", @@ -323,10 +311,7 @@ function MainSolution() {
서비스 솔루션 -

- 항공 운항 관리부터 스마트 관광 예약 플랫폼, 클라우드 인프라까지 - 다양한 항공·모빌리티 서비스를 하나의 통합 시스템 안에서 제공합니다. -

+

항공 운항 관리부터 스마트 관광 예약 플랫폼, 클라우드 인프라까지 다양한 항공·모빌리티 서비스를 하나의 통합 시스템 안에서 제공합니다.

@@ -349,11 +334,7 @@ function MainSolution() { ))} - {item.titleSub && ( -

- {item.titleSub} -

- )} + {item.titleSub &&

{item.titleSub}

}

{item.desc}

diff --git a/src/css/common.css b/src/css/common.css index 99978cf..aa0a56f 100644 --- a/src/css/common.css +++ b/src/css/common.css @@ -57,7 +57,7 @@ body{overflow-x:hidden;} /* .sh4-nav-wrap{position:sticky;top:var(--header-height);z-index:50;background:rgba(255,255,255,.98);backdrop-filter:blur(16px) saturate(180%);border-bottom:1px solid rgba(26,31,94,.08);box-shadow:0 1px 0 rgba(26,31,94,.06);} */ .sh4-nav-wrap{border-bottom:1px solid rgba(26,31,94,.08);box-shadow:0 1px 0 rgba(26,31,94,.06);} .sh4-nav{max-width:1660px;margin:0 auto;display:flex;align-items:center;} -.sh4-nav-tab{position:relative;display:inline-flex;align-items:center;height:52px;padding:0 20px;font-size:14px;font-weight:600;color:rgba(17,17,17,.38);text-decoration:none;transition:color .25s;white-space:nowrap;letter-spacing:-.01em;} +.sh4-nav-tab{position:relative;display:inline-flex;align-items:center;height:52px;padding:0 20px;font-size:16px;font-weight:600;color:rgba(17,17,17,.38);text-decoration:none;transition:color .25s;white-space:nowrap;letter-spacing:-.01em;} .sh4-nav-tab:hover{color:var(--navy);} .sh4-nav-tab--active{color:var(--navy);} .sh4-nav-tab--active::after{content:"";position:absolute;bottom:0;left:20px;right:20px;height:2px;border-radius:999px;background:var(--grad-brand-h);} @@ -113,8 +113,8 @@ body{overflow-x:hidden;} /* cert 인증 및 특허 */ .cert-section { padding-bottom: 80px; } .cert-section__header { margin-bottom: 48px; } -.cert-section__title { font-size: 28px; font-weight: 700; color: #111; margin: 10px 0 12px; } -.cert-section__desc { font-size: 14px; color: #555; line-height: 1.8; } +.cert-section__title { font-size: 32px; font-weight: 700; color: #111; margin: 10px 0 12px; } +.cert-section__desc { font-size: 18px; color: #555; line-height: 1.8; } .cert-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; list-style: none; } .cert-grid__item { display: flex; flex-direction: column; gap: 10px; } .cert-grid__item--wide { grid-column: span 2; } @@ -271,7 +271,7 @@ body{overflow-x:hidden;} .ht-header-title em {display:inline-block; font-size:60px; font-style:normal;} .ht-header-title span {color:var(--color-primary); font-weight:700;} .ht-header-title b {font-weight:700;} -.ht-header-sub {display:inline-block; margin-top:28px; font-size:16px; letter-spacing:-.03em; color:#666; font-weight:500; line-height:1.7; font-style:normal;} +.ht-header-sub {display:inline-block; margin-top:28px; font-size:18px; letter-spacing:-.03em; color:#666; font-weight:500; line-height:1.7; font-style:normal;} /* ── 연혁 카드 박스 ── */ @@ -385,7 +385,7 @@ body{overflow-x:hidden;} /* ── Recruit ── */ .rc-head {padding:80px 0 40px 0} .rc-title {font-size:32px; font-weight:800; color:#111; letter-spacing:-.02em; line-height:1.25; margin-bottom:16px;} -.rc-desc {font-size:15px; color:#666; line-height:1.7;} +.rc-desc {font-size:16px; color:#666; line-height:1.7;} /* ── Section Title ── */ .rc-section-title {font-size:20px; font-weight:700; color:#111; letter-spacing:-.01em; margin-bottom:28px;} @@ -395,8 +395,8 @@ body{overflow-x:hidden;} .rc-benefits-grid {display:grid; grid-template-columns:repeat(4,1fr); gap:16px;} .rc-benefit-item {background:#f7f8fc; border-radius:12px; padding:24px 20px; display:flex; flex-direction:column; gap:8px;} .rc-benefit-icon {font-size:24px;} -.rc-benefit-title {font-size:14px; font-weight:700; color:#111;} -.rc-benefit-desc {font-size:13px; color:#666; line-height:1.5;} +.rc-benefit-title {font-size:18px; font-weight:700; color:#111;} +.rc-benefit-desc {font-size:16px; color:#666; line-height:1.5;} /* ── Jobs ── */ .rc-jobs {padding:56px 0 100px;} @@ -407,12 +407,12 @@ body{overflow-x:hidden;} .rc-job-part {font-size:12px; font-weight:600; color:var(--color-primary); background:var(--color-primary-soft); padding:3px 10px; border-radius:100px;} .rc-job-type {font-size:12px; font-weight:600; color:#666; background:#f0f0f0; padding:3px 10px; border-radius:100px;} .rc-job-title {font-size:22px; font-weight:800; color:#111; letter-spacing:-.02em;} -.rc-job-career {font-size:13px; color:#888; font-weight:500;} -.rc-job-desc {font-size:14px; color:#555; line-height:1.6;} +.rc-job-career {font-size:14px; color:#888; font-weight:500;} +.rc-job-desc {font-size:16px; color:#555; line-height:1.6;} .rc-job-stack {display:flex; flex-wrap:wrap; gap:6px;} .rc-job-tag {font-size:12px; font-weight:500; color:#555; background:#f5f5f5; padding:4px 10px; border-radius:6px;} .rc-job-bottom {display:flex; align-items:center; justify-content:space-between; margin-top:4px; padding-top:16px; border-top:1px solid var(--color-primary-soft);} -.rc-job-deadline {font-size:13px; color:#aaa;} +.rc-job-deadline {font-size:14px; color:#aaa;} .rc-job-apply {font-size:14px; font-weight:600; color:#fff; background:var(--color-primary); padding:9px 22px; border-radius:8px; text-decoration:none; transition:background .2s;} .rc-job-apply:hover {background:var(--color-primary-hover);} @@ -468,9 +468,9 @@ body{overflow-x:hidden;} .cs-year {font-size:12px; font-weight:600; color:#aaa; letter-spacing:.1em;} .cs-eyebrow {font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--color-primary); opacity:.8;} .cs-item-title {font-size:30px; font-weight:800; color:#111; letter-spacing:-.02em; line-height:1.3; margin:0;} -.cs-item-desc {font-size:14px; color:#555; line-height:1.8; word-break:keep-all;} +.cs-item-desc {font-size:16px; color:#555; line-height:1.8; word-break:keep-all;} .cs-tags {display:flex; gap:8px; flex-wrap:wrap;} -.cs-tag {font-size:11px; font-weight:600; color:var(--color-primary); background:var(--color-primary-soft); padding:4px 12px; border-radius:100px; letter-spacing:.04em;} +.cs-tag {font-size:12px; font-weight:600; color:var(--color-primary); background:var(--color-primary-soft); padding:4px 12px; border-radius:100px; letter-spacing:.04em;} /* ── Responsive ── */ @media (max-width: 900px) { @@ -571,7 +571,7 @@ body{overflow-x:hidden;} .about-meaning-card-title { font-size: 18px; font-weight: 700; color: #1a1a2e; margin-bottom: 12px; } -.about-meaning-card-desc { font-size: 15px; color: #777; line-height: 1.9; } +.about-meaning-card-desc { font-size: 16px; color: #777; line-height: 1.9; } .about-mission-section { padding: 100px 0 100px; border-top: 1px solid #f0f0f0; } .about-mission-inner { display: flex; gap: 100px; align-items: flex-start; } @@ -580,14 +580,14 @@ body{overflow-x:hidden;} .about-mission-title { font-size: 30px; font-weight: 700; color: #1a1a2e; line-height: 1.5; margin-bottom: 24px; } -.about-mission-desc { font-size: 15px; color: #555; line-height: 2.2; } +.about-mission-desc { font-size: 16px; color: #555; line-height: 2.2; } .about-mission-right { flex: 1; display: flex; flex-direction: column; gap: 0; } .about-mission-item { display: flex; gap: 24px; align-items: flex-start; padding: 32px 0; border-bottom: 1px solid #f0f0f0; } .about-mission-item:first-child { border-top: none; } .about-mission-item:last-child { border-bottom: none; } -.about-mission-item-num { font-size: 13px; font-weight: 700; color: #d0d4e8; letter-spacing: 0.05em; flex-shrink: 0; padding-top: 2px; width: 28px; } +.about-mission-item-num { font-size: 14px; font-weight: 700; color: #d0d4e8; letter-spacing: 0.05em; flex-shrink: 0; padding-top: 2px; width: 28px; } .about-mission-item-body { flex: 1; } @@ -597,7 +597,7 @@ body{overflow-x:hidden;} .about-mission-item-keyword { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; color: #1e2a5e; background: #eef0f8; border-radius: 4px; padding: 3px 8px; } -.about-mission-item-desc { font-size: 14px; color: #777; line-height: 1.8; } +.about-mission-item-desc { font-size: 16px; color: #777; line-height: 1.8; } .about-cert-section { padding: 100px 0 100px; border-top: 1px solid #f0f0f0; } @@ -628,7 +628,7 @@ body{overflow-x:hidden;} .about-cta-title { font-size: 42px; font-weight: 900; color: #fff; line-height: 1.3; letter-spacing: -0.02em; margin-top: 16px; margin-bottom: 24px; } -.about-cta-desc { font-size: 15px; color: rgba(255,255,255,0.5); line-height: 1.9; margin-bottom: 48px; } +.about-cta-desc { font-size: 16px; color: rgba(255,255,255,0.5); line-height: 1.9; margin-bottom: 48px; } .about-cta-buttons { display: flex; gap: 12px; justify-content: center; } @@ -716,19 +716,19 @@ body{overflow-x:hidden;} .fc-intro { display: flex; gap: 48px; align-items: center; padding: 60px 0;} .fc-intro__left { flex: 1; } .fc-intro__title { font-size: 2rem; font-weight: 800; color: #1a1f3a; line-height: 1.35; letter-spacing: -0.02em; margin: 16px 0 28px; } -.fc-intro__desc { font-size: 0.9rem; color: #666; line-height: 1.9; margin-bottom: 48px; } +.fc-intro__desc { font-size:16px; color: #666; line-height: 1.9; margin-bottom: 48px; } .fc-intro__icons { display: flex; gap: 32px; } .fc-intro__icon-item { display: flex; flex-direction: column; align-items: center; gap: 10px; } .fc-intro__icon-item img { width: 80px; height: 80px; object-fit: contain; } -.fc-intro__icon-item span { font-size: 0.75rem; font-weight: 600; color: #888; } +.fc-intro__icon-item span { font-size:14px; font-weight: 600; color: #888; } .fc-intro__right { flex: 0 0 52%; } .fc-intro__monitor { width: 100%; object-fit: contain; display: block; } .fc-highlight { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-bottom: 8rem; align-items: center; padding: 60px 0;} .fc-highlight__item { display: flex; gap: 24px; align-items: center; } .fc-highlight__text { flex: 0 0 40%; } -.fc-highlight__title { font-size: 1.75rem; font-weight: 800; color: #1a1f3a; line-height: 1.35; letter-spacing: -0.02em; margin: 10px 0 16px; } -.fc-highlight__desc { font-size: 0.88rem; color: #666; line-height: 1.9; } +.fc-highlight__title { font-size: 28px; font-weight: 800; color: #1a1f3a; line-height: 1.35; letter-spacing: -0.02em; margin: 10px 0 16px; } +.fc-highlight__desc { font-size: 16px; color: #666; line-height: 1.9; } .fc-highlight__img-wrap { flex: 1; } .fc-highlight__img-wrap img { width: 100%; object-fit: contain; display: block; } .fc-highlight__img-scene { position: relative; width: 100%; } @@ -762,9 +762,9 @@ body{overflow-x:hidden;} .fc-domain-card__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.25rem; background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.18) 45%, transparent 100%); transition: background 0.4s ease; } .fc-domain-card:hover .fc-domain-card__overlay { background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.5) 50%, rgba(0,0,0,.15) 100%); } -.fc-domain-card__label { font-size: 1.125rem; font-weight: 700; color: #fff; line-height: 1.3; } +.fc-domain-card__label { font-size:18px; font-weight: 700; color: #fff; line-height: 1.3; } -.fc-domain-card__desc { font-size: .8rem; line-height: 1.65; color: rgba(255,255,255,.85); margin: .5rem 0 0; max-height: 0; opacity: 0; overflow: hidden; transform: translateY(8px); transition: max-height 0.4s ease, opacity 0.35s ease, transform 0.35s ease; } +.fc-domain-card__desc { font-size:16px; line-height: 1.65; color: rgba(255,255,255,.85); margin: .5rem 0 0; max-height: 0; opacity: 0; overflow: hidden; transform: translateY(8px); transition: max-height 0.4s ease, opacity 0.35s ease, transform 0.35s ease; } .fc-domain-card:hover .fc-domain-card__desc { max-height: 6rem; opacity: 1; transform: translateY(0); } @media (max-width: 1024px) { .fc-domains__grid { flex-wrap: wrap; height: auto; } .fc-domain-card { flex: 0 0 calc(33.33% - 1rem); aspect-ratio: 3/4; } } @@ -794,9 +794,9 @@ body{overflow-x:hidden;} .fc-flow { padding-bottom: 10rem; } .fc-flow__row {display:flex;align-items:flex-start;gap:0;} .fc-flow__item {position:relative;flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.6rem;padding:2rem 1rem;} -.fc-flow__step {font-size:.68rem;font-weight:800;letter-spacing:.12em;color:var(--color-primary-border-strong);} -.fc-flow__label {font-size:.92rem;font-weight:700;color:var(--color-primary);} -.fc-flow__desc {font-size:.76rem;line-height:1.65;color:#888;margin:0;} +.fc-flow__step {font-size:14px;font-weight:800;letter-spacing:.12em;color:var(--color-primary-border-strong);} +.fc-flow__label {font-size:16px;font-weight:700;color:var(--color-primary);} +.fc-flow__desc {font-size:14px;line-height:1.65;color:#888;margin:0;} .fc-flow__arrow {position:absolute;top:2.75rem;right:-1px;width:2px;height:1.5rem;background:var(--color-primary-soft-border);transform-origin:top;} @media (max-width: 1024px) { @@ -858,8 +858,8 @@ body{overflow-x:hidden;} IBEPAGE — common.css 추가분 ════════════════════════════════ */ .ibe-channel-section { padding: 60px 0; } -.ibe-channel__title { font-size: 2rem; font-weight: 800; color: #1a1f3a; line-height: 1.35; letter-spacing: -0.02em; margin: 12px 0 16px; } -.ibe-channel__desc { font-size: 0.9rem; color: #666; line-height: 1.9; margin-bottom: 56px; } +.ibe-channel__title { font-size: 32px; font-weight: 800; color: #1a1f3a; line-height: 1.35; letter-spacing: -0.02em; margin: 12px 0 16px; } +.ibe-channel__desc { font-size:16px; color: #666; line-height: 1.9; margin-bottom: 56px; } .ibe-channel__diagram { position: relative; width: min(1540px, 100%); height: 430px; margin: 0 auto; display: grid; grid-template-columns: 420px 1fr 420px; align-items: center; } .ibe-channel__svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } @@ -924,9 +924,9 @@ body{overflow-x:hidden;} .ibe-booking__circle { width: 88px; height: 88px; border-radius: 50%; background: #f8faff; display: flex; align-items: center; justify-content: center; box-shadow: 5px 5px 12px rgba(0,0,0,0.06), -5px -5px 12px #fff; margin-bottom: 20px; } .ibe-booking__circle img { width: 48px; height: 48px; object-fit: contain; } -.ibe-booking__num { font-size: 10px; font-weight: 700; color: var(--color-primary-light); letter-spacing: 0.1em; margin-bottom: 6px; } -.ibe-booking__label { font-size: 14px; font-weight: 700; color: var(--color-primary); margin-bottom: 8px; } -.ibe-booking__desc { font-size: 12px; color: #888; line-height: 1.7; text-align: center; } +.ibe-booking__num { font-size: 12px; font-weight: 700; color: var(--color-primary-light); letter-spacing: 0.1em; margin-bottom: 6px; } +.ibe-booking__label { font-size: 16px; font-weight: 700; color: var(--color-primary); margin-bottom: 8px; } +.ibe-booking__desc { font-size: 14px; color: #888; line-height: 1.7; text-align: center; } @media (max-width: 768px) { .ibe-booking__flow { flex-direction: column; align-items: flex-start; gap: 0; padding-left: 16px; } @@ -957,7 +957,7 @@ body{overflow-x:hidden;} .si_archive__right { flex:1; min-width:0; } .si_archive__eyebrow { display:block; font-size:12px; font-weight:600; letter-spacing:.12em; color:#2563eb; text-transform:uppercase; margin-bottom:16px; } .si_archive__title { font-size:clamp(28px,3vw,40px); font-weight:700; line-height:1.25; color:var(--color-primary); letter-spacing:-.02em; margin:0 0 20px; } -.si_archive__desc { font-size:14px; line-height:1.7; color:#555; margin:0 0 32px; } +.si_archive__desc { font-size:16px; line-height:1.7; color:#555; margin:0 0 32px; } .si_archive__more { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:#111; text-decoration:none; border-bottom:1.5px solid #111; padding-bottom:2px; width:fit-content; transition:.2s; } .si_archive__more:hover { color:#2563eb; border-color:#2563eb; } .si_archive__more-arrow { transition:transform .2s; } @@ -975,14 +975,14 @@ body{overflow-x:hidden;} .si_archive__card-body-left { flex: 0 0 130px; } .si_archive__card-num { font-size: 16px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #c026d3, #7c3aed); width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } -.si_archive__card-title { font-size: 16px; font-weight: 700; line-height: 1.4; color: #111; margin: 0; } +.si_archive__card-title { font-size: 18px; font-weight: 700; line-height: 1.4; color: #111; margin: 0; } .si_archive__card-tags { display: flex; flex-wrap: wrap; gap: 4px; } -.si_archive__tag { padding: 3px 8px; border: 1px solid #d1d5db; border-radius: 999px; font-size: 10px; color: #555; background: #fff; } +.si_archive__tag { padding: 3px 8px; border: 1px solid #d1d5db; border-radius: 999px; font-size: 12px; color: #555; background: #fff; } .si_archive__card-desc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; border-top: 1px solid #f1f1f1; padding-top: 14px; } .si_archive__card-desc li { display: flex; flex-direction: column; gap: 6px; } .si_archive__card-desc-icon { width: 28px; height: 28px; background: #f3f4f6; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--color-primary); } -.si_archive__card-desc-title { font-size: 13px; font-weight: 700; color: #111; } -.si_archive__card-desc-text { font-size: 12px; line-height: 1.5; color: #888; } +.si_archive__card-desc-title { font-size: 16px; font-weight: 700; color: #111; } +.si_archive__card-desc-text { font-size: 14px; line-height: 1.5; color: #888; } .si_archive__nav { width: 100%; margin-top: 40px; display: flex; align-items: center; gap: 16px; } .si_archive__nav-btn { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid #e5e7eb; background: transparent; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #111; flex-shrink: 0; transition: all .25s; } @@ -1058,7 +1058,7 @@ body{overflow-x:hidden;} .mt-title-line { overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em; } .mt-intro__title { font-size:clamp(28px,3vw,42px); font-weight:800; color:var(--color-primary); line-height:1.25; letter-spacing:-.03em; margin:0; } -.mt-intro__desc { font-size:.9rem; color:#666; line-height:1.9; margin:28px 0 36px; word-break:keep-all; } +.mt-intro__desc { font-size:16px; color:#666; line-height:1.9; margin:28px 0 36px; word-break:keep-all; } .mt-intro__cta { display:inline-flex; align-items:center; gap:8px; font-size:.88rem; font-weight:700; color:var(--pink); text-decoration:none; letter-spacing:-.01em; transition:gap .25s; } .mt-intro__cta:hover { gap:14px; } @@ -1073,7 +1073,7 @@ body{overflow-x:hidden;} .mt-kpi__item { display:flex; flex-direction:column; align-items:center; gap:10px; padding:20px 16px; border-right:1px solid rgba(255,255,255,.1); text-align:center; } .mt-kpi__item:last-child { border-right:none; } .mt-kpi__value { font-size:clamp(28px,3.5vw,52px); font-weight:900; color:#fff; letter-spacing:-.04em; line-height:1; } -.mt-kpi__label { font-size:.78rem; font-weight:500; color:rgba(255,255,255,.45); line-height:1.4; } +.mt-kpi__label { font-size:14px; font-weight:500; color:rgba(255,255,255,.45); line-height:1.4; } /* ── 5컬럼 서비스 카드 ── */ .mt-services { padding-bottom:120px; } @@ -1087,9 +1087,9 @@ body{overflow-x:hidden;} .mt-service-card:hover .mt-service-card__img-wrap { transform:translateY(-6px) scale(1.08); } .mt-service-card__img { width:100%; height:100%; object-fit:contain; } -.mt-service-card__num { font-size:.7rem; font-weight:800; letter-spacing:.12em; color:var(--pink); opacity:.8; } -.mt-service-card__title { font-size:1rem; font-weight:800; color:var(--color-primary); letter-spacing:-.02em; margin:0; } -.mt-service-card__desc { font-size:.78rem; color:#888; line-height:1.7; word-break:keep-all; margin:0; } +.mt-service-card__num { font-size:14px; font-weight:800; letter-spacing:.12em; color:var(--pink); opacity:.8; } +.mt-service-card__title { font-size:16px; font-weight:800; color:var(--color-primary); letter-spacing:-.02em; margin:0; } +.mt-service-card__desc { font-size:14px; color:#888; line-height:1.7; word-break:keep-all; margin:0; } .mt-service-card__line { position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--grad-brand-h); transform:scaleX(0); transform-origin:left; transition:transform .4s cubic-bezier(.22,1,.36,1); } .mt-service-card:hover .mt-service-card__line { transform:scaleX(1); } @@ -1149,7 +1149,7 @@ body{overflow-x:hidden;} .utm-intro__top { max-width: 560px; } .utm-intro__title { font-size: 40px; font-weight: 700; line-height: 1.35; color: #111; margin: 12px 0 20px; word-break: keep-all; } .utm-intro__title em { color: #1A1F5E; font-style: normal; -webkit-text-fill-color: #1A1F5E; } -.utm-intro__desc { font-size: 14px; color: #555; line-height: 1.85; word-break: keep-all; } +.utm-intro__desc { font-size: 16px; color: #555; line-height: 1.85; word-break: keep-all; } .utm-intro__desc strong { font-weight: 600; color: #111; } .utm-intro__cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; list-style: none; margin-left: auto; } .utm-intro__card { background: #fff; border-radius: 16px; padding: 28px 24px 32px; position: relative; overflow: hidden; min-height: 180px; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid #EBEBEB; box-shadow: 0 4px 16px rgba(0,0,0,0.06); width: 240px; height: 240px;} @@ -1165,7 +1165,7 @@ body{overflow-x:hidden;} .utm-what__inner { display: flex; align-items: center; justify-content: space-between; gap: 80px; min-height: 500px; } .utm-what__left { flex: 0 0 480px; } .utm-what__eyebrow { display: inline-block; font-size: 12px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: #6366f1; margin-bottom: 20px; } -.utm-what__desc { font-size: 14px; color: rgba(255,255,255,0.5); line-height: 1.9; max-width: 600px; margin: 0 auto; word-break: keep-all; } +.utm-what__desc { font-size: 16px; color: rgba(255,255,255,0.5); line-height: 1.9; max-width: 640px; margin: 0 auto; word-break: keep-all; } .utm-what__body { display: grid; grid-template-columns: 220px 1fr 220px; gap: 20px; align-items: center; } .utm-what__cards { list-style: none; display: flex; flex-direction: column; justify-content: center; gap: 25px; min-width: 220px; } .utm-what__card { display: flex; align-items: center; justify-content: flex-start; gap: 12px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: 10px; padding: 0 20px; height: 80px; white-space: nowrap; width: 100%; } @@ -1274,7 +1274,7 @@ body{overflow-x:hidden;} .utm-evo__eyebrow::before { content: ''; width: 20px; height: 1.5px; background: #E8193C; } .utm-evo__title { font-size: 36px; font-weight: 700; line-height: 1.35; color: #111; margin-bottom: 20px; word-break: keep-all; } .utm-evo__title em { color: var(--color-primary); font-style: normal; } -.utm-evo__desc { font-size: 14px; color: #777; line-height: 1.85; margin-bottom: 32px; word-break: keep-all; } +.utm-evo__desc { font-size: 16px; color: #777; line-height: 1.85; margin-bottom: 32px; word-break: keep-all; } .utm-evo__chip { display: inline-flex; align-items: center; gap: 8px; background: #111; color: #fff; font-size: 12px; font-weight: 600; padding: 10px 18px; border-radius: 8px; } .utm-evo__chip-dot { width: 7px; height: 7px; border-radius: 50%; background: #E8193C; flex-shrink: 0; } @@ -1297,10 +1297,10 @@ body{overflow-x:hidden;} .utm-evo__card-img { width: 120px; height: 120px; object-fit: contain; flex-shrink: 0; } .utm-evo__card-body { display: flex; flex-direction: column; gap: 8px; } -.utm-evo__card-name { font-size: 15px; font-weight: 700; color: #111; } -.utm-evo__card-desc { font-size: 13px; color: #666; line-height: 1.6; } +.utm-evo__card-name { font-size: 16px; font-weight: 700; color: #111; } +.utm-evo__card-desc { font-size: 14px; color: #666; line-height: 1.6; } -.utm-evo__card-tag { display: inline-block; font-size: 11px; padding: 4px 10px; border-radius: 4px; background: #f5f5f5; color: #666; } +.utm-evo__card-tag { display: inline-block; font-size: 13px; padding: 4px 10px; border-radius: 4px; background: #f5f5f5; color: #666; } .utm-evo__item--highlight .utm-evo__card { border: 1.5px solid var(--navy); box-shadow: 0 4px 24px rgba(26,31,94,0.1); } .utm-evo__item--highlight .utm-evo__card-name { background: none; -webkit-text-fill-color: var(--navy); color: var(--navy); } @@ -1314,7 +1314,7 @@ body{overflow-x:hidden;} .utm-cap .inner-wrap { display: flex; flex-direction: column; gap: 52px; } .utm-cap__title { font-size: 40px; font-weight: 700; line-height: 1.35; color: #111; margin: 12px 0 20px; word-break: keep-all; } .utm-cap__title em { color: var(--color-primary, #E8193C); font-style: normal; } -.utm-cap__desc { font-size: 14px; color: #555; line-height: 1.85; word-break: keep-all; } +.utm-cap__desc { font-size: 16px; color: #555; line-height: 1.85; word-break: keep-all; } .utm-cap__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; width: 100%; background: #F7F8FA; border-radius: 20px; padding: 32px; } .utm-cap__card { background: #fff; border-radius: 16px; padding: 28px 24px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; border: 1px solid #EBEBEB; box-shadow: 0 4px 16px rgba(0,0,0,0.06); } .utm-cap__card-num { position: absolute; top: 16px; right: 20px; font-size: 72px; font-weight: 700; color: rgba(0,0,0,0.05); line-height: 1; } @@ -1322,8 +1322,8 @@ body{overflow-x:hidden;} .utm-cap__card-name { font-size: 18px; font-weight: 700; color: #111; line-height: 1.35; word-break: keep-all; display: block; } .utm-cap__card-name::before { content: ''; display: block; width: 24px; height: 2.5px; background: var(--cap-color); border-radius: 2px; margin-bottom: 14px; } .utm-cap__card-tags { list-style: none; display: flex; flex-direction: column; gap: 7px; } -.utm-cap__card-tags li { font-size: 13px; color: #666; line-height: 1.5; display: flex; align-items: flex-start; gap: 8px; } -.utm-cap__card-tags li::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--cap-color); flex-shrink: 0; margin-top: 6px; opacity: 0.6; } +.utm-cap__card-tags li { font-size: 15px; color: #666; line-height: 1.5; display: flex; align-items: flex-start; gap: 8px; } +.utm-cap__card-tags li::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--cap-color); flex-shrink: 0; margin-top: 10px; opacity: 0.6; } @media (max-width: 1200px) { .utm-intro__cards { grid-template-columns: repeat(2, 1fr); } diff --git a/src/css/footer.css b/src/css/footer.css index 2932ba5..2195a66 100644 --- a/src/css/footer.css +++ b/src/css/footer.css @@ -7,14 +7,14 @@ .footer-tagline{margin:0;font-size:13px;line-height:1.6;color:rgba(255,255,255,.5);letter-spacing:.2px;} .footer-nav{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;} -.footer-nav-group h5{margin:0 0 14px;font-size:12px;font-weight:600;color:#fff;letter-spacing:.6px;} +.footer-nav-group h5{margin:0 0 14px;font-size:15px;font-weight:600;color:#fff;letter-spacing:.6px;} .footer-nav-group ul{list-style:none;padding:0;margin:0;} .footer-nav-group li{margin-bottom:8px;} -.footer-nav-group a{font-size:13px;color:rgba(255,255,255,.5);text-decoration:none;transition:color .2s ease;} +.footer-nav-group a{font-size:14px;color:rgba(255,255,255,.5);text-decoration:none;transition:color .2s ease;} .footer-nav-group a:hover{color:#fff;} .footer-mid{padding:24px 0;border-bottom:1px solid rgba(255,255,255,.08);} -.footer-info p{margin:0 0 4px;font-size:12px;line-height:1.8;color:rgba(255,255,255,.5);} +.footer-info p{margin:0 0 4px;font-size:14px;line-height:1.8;color:rgba(255,255,255,.5);} .footer-info p:last-child{margin-bottom:0;} .footer-info .strong{color:rgba(255,255,255,.85);font-weight:500;} .footer-info .sep{display:inline-block;margin:0 10px;color:rgba(255,255,255,.2);} @@ -24,7 +24,7 @@ .footer-bot{display:flex;justify-content:space-between;align-items:center;padding-top:18px;} .footer-copy{margin:0;font-size:12px;color:rgba(255,255,255,.35);letter-spacing:.2px;} .footer-policy{list-style:none;padding:0;margin:0;display:flex;gap:20px;} -.footer-policy a{font-size:12px;color:rgba(255,255,255,.55);text-decoration:none;transition:color .2s ease;} +.footer-policy a{font-size:14px;color:rgba(255,255,255,.55);text-decoration:none;transition:color .2s ease;} .footer-policy a:hover{color:#fff;} @media (max-width:1024px){ diff --git a/src/css/main.css b/src/css/main.css index 222615f..b0ace94 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -122,9 +122,9 @@ body{overflow-x:hidden;} .utm-hero__blob--2 { width: 360px; height: 360px; bottom: -80px; right: 10%; background: rgba(139,92,246,0.06); } .utm-hero__inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; z-index: 1; width: 100%; } .utm-hero__eyebrow { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: #6366F1; margin-bottom: 24px; } -.utm-hero__title { font-size: clamp(36px, 4.5vw, 64px); font-weight: 800; line-height: 1.15; letter-spacing: -0.03em; color: #0e1120; margin: 0 0 24px; word-break: keep-all; } +.utm-hero__title { font-size:50px; font-weight: 800; line-height: 1.15; letter-spacing: -0.03em; color: #0e1120; margin: 0 0 24px; word-break: keep-all; } .utm-hero__title em { font-style: normal; color: #1A1F5E; -webkit-text-fill-color: #1A1F5E; } -.utm-hero__desc { font-size: 16px; color: #666; line-height: 1.85; margin: 0 0 36px; word-break: keep-all; } +.utm-hero__desc { font-size: 18px; color: #666; line-height: 1.85; margin: 0 0 36px; word-break: keep-all; } .utm-hero__chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 48px; padding: 0; } .utm-hero__chip { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.75); border: 1px solid rgba(99,102,241,0.18); border-radius: 999px; padding: 7px 16px 7px 10px; backdrop-filter: blur(8px); } .utm-hero__chip-num { font-size: 10px; font-weight: 700; color: #6366F1; letter-spacing: 0.5px; } @@ -298,7 +298,7 @@ body{overflow-x:hidden;} .main-solution-head { max-width: 760px; margin-bottom: 54px; } .main-solution-eyebrow { margin: 0 0 16px; font-size: 12px; font-weight: 800; letter-spacing: .24em; color: #8b5cf6; opacity: 0.75; } .main-solution-title { margin: 0; font-size: clamp(42px,5vw,76px); font-weight: 800; line-height: 1.02; letter-spacing: -.07em; color: #10142b; } -.main-solution-desc { margin: 24px 0 0; max-width: 620px; font-size: 17px; line-height: 1.8; font-weight: 500; color: rgba(16,20,43,.62); word-break: keep-all; } +.main-solution-desc { margin: 24px 0 0; max-width: 620px; font-size: 18px; line-height: 1.8; font-weight: 500; color: rgba(16,20,43,.62); word-break: keep-all; } .main-solution-grid { display: flex; flex-direction: column; gap: 20px; } .main-solution-card { border-radius: 24px; overflow: hidden; display: grid; grid-template-columns: 1fr 1.2fr; min-height: 320px; } .main-solution-card--dark { background: #eef0ff; } @@ -306,8 +306,8 @@ body{overflow-x:hidden;} .main-solution-card-left { padding: 40px; display: flex; flex-direction: column; justify-content: space-between; } .main-solution-card-tag { display: inline-block; background: #1a1f5e; color: #fff; font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 999px; margin-bottom: 18px; } .main-solution-card-title { font-size: 34px; font-weight: 800; color: #10142b; letter-spacing: -.04em; margin: 0 0 12px; line-height: 1.2; } -.main-solution-card-title-sub { font-size: 12px; color: rgba(16,20,43,.35); font-weight: 500; margin: 0 0 10px; } -.main-solution-card-desc { font-size: 13px; color: rgba(16,20,43,.52); line-height: 1.75; margin: 0; } +.main-solution-card-title-sub { font-size: 14px; color: rgba(16,20,43,.35); font-weight: 500; margin: 0 0 10px; } +.main-solution-card-desc { font-size: 15px; color: rgba(16,20,43,.52); line-height: 1.75; margin: 0; } .main-solution-card-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #10142b; background: #fff; padding: 9px 18px; border-radius: 999px; text-decoration: none; border: 1px solid rgba(26,31,94,0.1); transition: gap .2s; margin-top: 24px; width: fit-content; } .main-solution-card-link:hover { gap: 12px; } .main-solution-card-right { position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; padding: 24px 24px 0; } @@ -508,7 +508,7 @@ body{overflow-x:hidden;} .main-contact-form{padding:32px;border-radius:30px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);box-shadow:0 28px 80px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.16);backdrop-filter:blur(18px);} .main-contact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;} .main-contact-grid label{display:block;} -.main-contact-grid span{display:block;margin-bottom:8px;font-size:12px;font-weight:700;color:rgba(255,255,255,.82);} +.main-contact-grid span{display:block;margin-bottom:8px;font-size:14px;font-weight:700;color:rgba(255,255,255,.82);} .main-contact-grid em{font-style:normal;color:#dbe3ff;} .main-contact-grid input,.main-contact-grid textarea{width:100%;border:1px solid rgba(255,255,255,.16);border-radius:14px;background:rgba(255,255,255,.12);padding:14px 16px;font-size:14px;font-weight:500;color:#fff;outline:none;transition:border-color .3s ease,background .3s ease,box-shadow .3s ease;} .main-contact-grid input::placeholder,.main-contact-grid textarea::placeholder{color:rgba(255,255,255,.38);}