diff --git a/resources/css/web.css b/resources/css/web.css index 6bc78e0..2ef674f 100644 --- a/resources/css/web.css +++ b/resources/css/web.css @@ -158,8 +158,26 @@ h1, h2, h3, h4, h5, h6 { } .text-h1 { font-size: 32px; line-height: 40px; } -.text-h2 { font-size: 22px; line-height: 28px; font-weight: 600; } -.text-body { font-size: 16px; } +.text-h2 { + margin: 0; + font-size: 15px; /* 여기서 더 줄이고 싶으면 15px */ + line-height: 22px; + font-weight: 800; + color: #111827; + letter-spacing: -0.2px; +} +.text-h2::before{ + content: none !important; +} +.text-body{ + margin: 0; + font-size: 14px; /* 원래 크기 */ + line-height: 20px; + color: #6B7280; + white-space: normal; + overflow: visible; + text-overflow: clip; +} .text-sm { font-size: 14px; } .text-xs { font-size: 12px; } @@ -473,20 +491,51 @@ h1, h2, h3, h4, h5, h6 { } /* Sections */ -.section { - padding: 60px 0; +.section{ + padding: 25px 0; /* 더 타이트 */ +} +.section + .section{ + padding-top: 16px; /* 섹션 사이 과한 간격 제거 */ } -.section-header { - display: flex; - justify-content: space-between; - align-items: flex-end; - margin-bottom: 24px; +.section-header{ + margin-bottom: 10px; } -.section-title h2 { - font-size: 28px; - margin-bottom: 8px; +.section-title{ + display: flex !important; + align-items: center !important; + gap: 12px !important; + flex-wrap: nowrap !important; + min-width: 0 !important; +} + +.section-title .text-h2{ + margin: 0 !important; + font-size: 22px !important; + line-height: 22px !important; + font-weight: 800 !important; + color: #111827 !important; + + white-space: nowrap !important; + overflow: hidden !important; + text-overflow: clip !important; + flex: 0 0 auto !important; +} +.section-title .text-h2::before{ + content: none !important; +} +.section-title .text-body{ + margin: 0 !important; + font-size: 14px !important; + line-height: 20px !important; + color: #6B7280 !important; + + min-width: 0 !important; + white-space: nowrap !important; + overflow: hidden !important; + text-overflow: clip !important; + flex: 1 1 auto !important; } .section-title p { @@ -494,21 +543,45 @@ h1, h2, h3, h4, h5, h6 { } /* Snap Carousel (Monthly Deals) */ -.snap-carousel { - display: flex; - gap: 24px; - overflow-x: auto; - scroll-snap-type: x mandatory; - padding-bottom: 24px; /* for shadow */ - scrollbar-width: none; +.snap-carousel{ + display:flex; + gap:16px; + overflow-x:auto; + overflow-y:hidden; + -webkit-overflow-scrolling: touch; + padding-bottom: 8px; +} +.snap-carousel > *{ + scroll-snap-align: start; /* 원치 않으면 삭제 */ + flex: 0 0 auto; } -.snap-carousel::-webkit-scrollbar { display: none; } -.snap-item { - scroll-snap-align: start; +.snap-carousel::-webkit-scrollbar{ height: 8px; } +.snap-carousel::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.15); border-radius: 999px; } + +.snap-item{ flex: 0 0 280px; } +#popular .snap-item{ + flex-basis: 200px; +} + +.snap-carousel{ + scrollbar-width: thin; /* Firefox */ +} +.snap-carousel::-webkit-scrollbar{ + height: 8px; +} +.snap-carousel::-webkit-scrollbar-thumb{ + background: rgba(0,0,0,.15); + border-radius: 999px; +} +.snap-carousel::-webkit-scrollbar-track{ + background: transparent; +} + + /* Filter Tabs */ .filter-tabs { display: flex; @@ -621,6 +694,7 @@ h1, h2, h3, h4, h5, h6 { .tag-green{ background:#ECFDF5; border-color:#A7F3D0; color:#047857; } .tag-sky{ background:#F0F9FF; border-color:#BAE6FD; color:#0369A1; } + @media (max-width: 480px) { .logo-img{ height: 34px; /* 모바일에선 낮춰서 공간 확보 */ @@ -655,6 +729,13 @@ h1, h2, h3, h4, h5, h6 { padding:0 12px; font-size:12.5px; } + + .section-title .text-h2{ font-size: 15px !important; } + .section-title .text-body{ font-size: 13px !important; } + + .text-body{ + display: none; + } } @@ -672,9 +753,9 @@ h1, h2, h3, h4, h5, h6 { .hero-title { font-size: 28px; } - .search-bar { - display: none; /* Handle mobile search differently */ - } +/* .search-bar { + display: none; !* Handle mobile search differently *! + }*/ .footer-grid { grid-template-columns: 1fr; @@ -686,3 +767,154 @@ h1, h2, h3, h4, h5, h6 { padding-right: 24px; } } +/* ===== Footer: modern & clean (light) ===== */ +.site-footer{ + background:#F8FAFC; + border-top: 1px solid #E5E7EB; + padding: 44px 0 28px; + margin-top: 48px; + color:#0F172A; +} + +.footer-top{ + display:grid; + grid-template-columns: 1.2fr 0.8fr 1fr 1fr; + gap: 28px; + align-items:start; +} + +.footer-title{ + font-size: 13px; + font-weight: 800; + margin-bottom: 12px; + color:#0F172A; +} + +.footer-brand-logo{ display:inline-flex; align-items:center; } +.footer-logo-img{ height: 50px; width:auto; display:block; } + +.footer-desc{ + margin-top: 10px; + font-size: 13px; + line-height: 1.6; + color:#64748B; +} + +.footer-copy{ + margin-top: 14px; + font-size: 12px; + color:#94A3B8; +} + +.footer-link-list{ display:flex; flex-direction:column; gap: 10px; } +.footer-link{ + color:#475569; + font-size: 13px; +} +.footer-link:hover{ color:#2563EB; } +.footer-link-strong{ font-weight: 800; color:#111827; } + +/* contact KV */ +.footer-kv{ display:flex; flex-direction:column; gap: 10px; } +.footer-kv-row{ + display:grid; + grid-template-columns: 72px 1fr; + gap: 10px; + font-size: 13px; + color:#475569; +} +.footer-k{ color:#94A3B8; } +.footer-v{ color:#334155; } + +/* payment */ +.footer-payment-col .footer-payment{ + display:flex; + flex-direction:column; + gap: 8px; +} +.footer-payment--mt{ margin-top: 14px; } + +.footer-pay-img{ + width:auto; + max-width: 100%; + height:auto; + display:block; +} + +.footer-pay-caption{ + font-size: 12px; + color:#64748B; +} + +/* divider */ +.footer-divider{ + height:1px; + background:#E5E7EB; + margin: 24px 0 16px; +} + +/* bottom details */ +.footer-details{ + background:#FFFFFF; + border: 1px solid #E5E7EB; + border-radius: 14px; + padding: 12px 14px; +} + +.footer-summary{ + cursor:pointer; + font-size: 13px; + font-weight: 800; + color:#111827; + display:flex; + align-items:center; + justify-content:space-between; + gap: 12px; + list-style:none; +} + +.footer-summary::-webkit-details-marker{ display:none; } + +.footer-summary-hint{ + font-size: 12px; + font-weight: 700; + color:#2563EB; +} + +.footer-details[open] .footer-summary-hint{ + color:#64748B; +} + +.footer-info{ + margin-top: 12px; + display:grid; + gap: 8px; +} + +.footer-info-row{ + display:grid; + grid-template-columns: 130px 1fr; + gap: 12px; + font-size: 12.5px; + color:#475569; +} +.footer-info-row span{ color:#94A3B8; } +.footer-info-row b{ color:#334155; font-weight:700; } + +/* responsive */ +@media (max-width: 1024px){ + .footer-top{ + grid-template-columns: 1fr 1fr; + } +} + +@media (max-width: 560px){ + .footer-top{ + grid-template-columns: 1fr; + gap: 20px; + } + .footer-info-row{ + grid-template-columns: 1fr; + gap: 4px; + } +} diff --git a/resources/js/web.js b/resources/js/web.js index 93dbd53..36a21b2 100644 --- a/resources/js/web.js +++ b/resources/js/web.js @@ -1,12 +1,12 @@ document.addEventListener('DOMContentLoaded', () => { - + // --- Hero Carousel Logic --- const heroTrack = document.querySelector('.hero-track'); const heroSlides = document.querySelectorAll('.hero-slide'); const preventBtn = document.querySelector('.slider-arrow.prev'); const nextBtn = document.querySelector('.slider-arrow.next'); const dots = document.querySelectorAll('.dot'); - + let currentSlide = 0; const totalSlides = heroSlides.length; let autoplayInterval; @@ -33,7 +33,7 @@ document.addEventListener('DOMContentLoaded', () => { nextSlide(); resetAutoplay(); }); - + if(preventBtn) preventBtn.addEventListener('click', () => { prevSlide(); resetAutoplay(); @@ -51,7 +51,7 @@ document.addEventListener('DOMContentLoaded', () => { function startAutoplay() { autoplayInterval = setInterval(nextSlide, 6000); } - + function resetAutoplay() { clearInterval(autoplayInterval); startAutoplay(); @@ -94,7 +94,7 @@ document.addEventListener('DOMContentLoaded', () => { // Filter Logic const filter = btn.dataset.filter; - + // Animation: Fade out productGrid.style.opacity = '0'; productGrid.style.transform = 'translateY(10px)'; @@ -108,7 +108,7 @@ document.addEventListener('DOMContentLoaded', () => { item.style.display = 'none'; } }); - + // Fade in productGrid.style.opacity = '1'; productGrid.style.transform = 'translateY(0)'; @@ -125,5 +125,4 @@ document.addEventListener('DOMContentLoaded', () => { alert('모바일 메뉴 드로어 열림 (구현 예정)'); }); } - }); diff --git a/resources/views/web/company/footer.blade.php b/resources/views/web/company/footer.blade.php index dc9369f..b5cfb72 100644 --- a/resources/views/web/company/footer.blade.php +++ b/resources/views/web/company/footer.blade.php @@ -1,38 +1,100 @@ \ No newline at end of file + diff --git a/resources/views/web/company/header.blade.php b/resources/views/web/company/header.blade.php index 315df30..6ce8850 100644 --- a/resources/views/web/company/header.blade.php +++ b/resources/views/web/company/header.blade.php @@ -11,8 +11,8 @@ diff --git a/resources/views/web/main/product-carousel.blade.php b/resources/views/web/main/product-carousel.blade.php index 72fdb8b..620b905 100644 --- a/resources/views/web/main/product-carousel.blade.php +++ b/resources/views/web/main/product-carousel.blade.php @@ -23,4 +23,4 @@ @endfor - \ No newline at end of file + diff --git a/resources/views/web/main/product-row-scroll.blade.php b/resources/views/web/main/product-row-scroll.blade.php index cefd9c4..afdf270 100644 --- a/resources/views/web/main/product-row-scroll.blade.php +++ b/resources/views/web/main/product-row-scroll.blade.php @@ -1,20 +1,18 @@ -
-
- @for($i = 1; $i <= 8; $i++) -
-
-
- Icon -
-
-

해피머니 상품권 {{$i}}만원권

-
- -5% - {{$i}}9,000 -
+
+ @for($i = 1; $i <= 8; $i++) +
+
+
+ Icon +
+
+

해피머니 상품권 {{$i}}만원권

+
+ -5% + {{$i}}9,000
- @endfor -
-
\ No newline at end of file +
+ @endfor +