diff --git a/public/assets/images/common/bottom_logo.png b/public/assets/images/common/bottom_logo.png new file mode 100644 index 0000000..75a48bb Binary files /dev/null and b/public/assets/images/common/bottom_logo.png differ diff --git a/public/assets/images/common/top_logo.png b/public/assets/images/common/top_logo.png new file mode 100644 index 0000000..c0ef17a Binary files /dev/null and b/public/assets/images/common/top_logo.png differ diff --git a/public/assets/images/web/escrow_logo.png b/public/assets/images/web/escrow_logo.png new file mode 100644 index 0000000..f2ab949 Binary files /dev/null and b/public/assets/images/web/escrow_logo.png differ diff --git a/public/assets/images/web/payment-method.png b/public/assets/images/web/payment-method.png new file mode 100644 index 0000000..393b88f Binary files /dev/null and b/public/assets/images/web/payment-method.png differ diff --git a/resources/css/web.css b/resources/css/web.css index bba2259..6bc78e0 100644 --- a/resources/css/web.css +++ b/resources/css/web.css @@ -8,38 +8,38 @@ --color-bg-base: #FFFFFF; --color-bg-section: #F7F8FA; /* Very light grey for separation */ --color-bg-tint: #EFF6FF; /* Blue tint for badges */ - + --color-text-primary: #111827; --color-text-secondary: #6B7280; --color-text-tertiary: #9CA3AF; --color-text-white: #FFFFFF; --color-border: #E5E7EB; - + --color-accent-blue: #2563EB; --color-accent-blue-hover: #1D4ED8; - + --color-footer-bg: #0B1220; --color-footer-text: #E5E7EB; /* Semantic */ --color-danger: #EF4444; - + /* Spacing & Layout */ --container-width: 1280px; --header-height-desktop: 72px; --header-height-scroll: 56px; - + /* Radius */ --radius-card: 16px; --radius-pill: 9999px; --radius-sm: 8px; - + /* Shadows */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); - + /* Transitions */ --transition-base: 200ms ease-out; } @@ -81,6 +81,63 @@ img { max-width: 100%; display: block; } +.logo{ + display: flex; + align-items: center; + flex-shrink: 0; + margin-right: 16px; +} + +.logo-img{ + height: 50px; + width: auto; /* 비율 유지 */ + display: block; +} + +/* Header layout fix */ +.site-header .container{ + height: 100%; + display: flex; + align-items: center; /* 전체 세로 가운데 */ + justify-content: space-between; + gap: 16px; +} + +.header-left{ + display: flex; + align-items: center; /* 로고+메뉴 세로 가운데 */ + gap: 24px; + min-width: 0; +} + +.desktop-nav{ + display: flex; + align-items: center; /* 메뉴 텍스트 세로 가운데 */ + gap: 22px; +} + +.nav-link{ + display: inline-flex; /* 텍스트도 박스로 잡아서 가운데 정렬 */ + align-items: center; + height: 40px; /* 메뉴 높이 통일 */ + font-weight: 700; + letter-spacing: 0.2px; +} + +/* Exchange pill (더 자연스럽게) */ +.nav-link--exchange{ + height: 40px; + padding: 0 14px; + border-radius: 9999px; + background: #EFF6FF; + border: 1px solid #BFDBFE; + color: #2563EB; +} +.nav-link--exchange:hover{ + background: #2563EB; + border-color: #2563EB; + color: #fff; +} .sr-only { position: absolute; @@ -182,7 +239,7 @@ h1, h2, h3, h4, h5, h6 { } .nav-link { - font-size: 16px; + font-size: 17px; font-weight: 600; color: var(--color-text-primary); } @@ -191,10 +248,12 @@ h1, h2, h3, h4, h5, h6 { color: var(--color-accent-blue); } -.search-bar { +.search-bar{ position: relative; - max-width: 520px; - width: 100%; + flex: 0 1 300px; /* 기본 360, 필요하면 줄어듦 */ + max-width: 300px; /* 상한 */ + min-width: 220px; /* 너무 작아지지 않게 */ + width: auto; } .search-input { @@ -207,6 +266,11 @@ h1, h2, h3, h4, h5, h6 { font-size: 15px; transition: all 0.2s; } +/*.search-input{ + height: 40px; + padding: 0 44px 0 16px; + font-size: 14px; +}*/ .search-input:focus { outline: none; @@ -499,6 +563,102 @@ h1, h2, h3, h4, h5, h6 { color: white; } +.auth-buttons{ + white-space: nowrap; + flex: 0 0 auto; +} + +.nav-link--exchange{ + padding: 8px 12px; + border-radius: 9999px; + background: var(--color-bg-tint); + border: 1px solid #BFDBFE; + color: var(--color-accent-blue); + font-weight: 700; +} + +.nav-link--exchange:hover{ + background: var(--color-accent-blue); + border-color: var(--color-accent-blue); + color: #fff; +} + +/* Hashtag chips */ +.tag-chips{ + display:flex; + flex-wrap:wrap; + gap:10px; + margin-top: 8px; + margin-bottom: 12px; +} + +.tag-chip{ + display:inline-flex; + align-items:center; + height:36px; + padding:0 14px; + border-radius:9999px; + border:1px solid #E5E7EB; + background:#FFFFFF; + color:#111827; + font-weight:700; + font-size:13px; + letter-spacing:0.2px; + text-decoration:none; + transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease; +} + +.tag-chip:hover{ + transform: translateY(-1px); + background:#EFF6FF; + border-color:#93C5FD; + color:#2563EB; +} + +/* 선택적으로 상위 4개만 컬러 포인트 */ +.tag-blue{ background:#EFF6FF; border-color:#93C5FD; color:#1D4ED8; } +.tag-violet{ background:#F5F3FF; border-color:#DDD6FE; color:#6D28D9; } +.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; /* 모바일에선 낮춰서 공간 확보 */ + } + + .logo{ + margin-right: 8px; /* 여백 줄이기 */ + } + + /* ✅ 검색폼 거의 풀폭 */ + .search-bar{ + margin: 0 !important; /* 양쪽 여백 제거 */ + flex: 1 1 auto; + max-width: none; + min-width: 0; + } + + .search-bar form{ width: 100%; } + .search-input{ + width: 100%; + padding-left: 14px; + padding-right: 44px; + } + + .tag-chips{ + gap:8px; + margin-right: -12px; /* 컨테이너 패딩 보정 원하면 */ + padding-right: 12px; + } + .tag-chip{ + height:34px; + padding:0 12px; + font-size:12.5px; + } +} + + + /* Mobile Breakpoint */ @media (max-width: 768px) { :root { @@ -511,16 +671,16 @@ h1, h2, h3, h4, h5, h6 { } .hero-title { font-size: 28px; } - + .search-bar { display: none; /* Handle mobile search differently */ } - + .footer-grid { grid-template-columns: 1fr; gap: 32px; } - + .category-chips, .snap-carousel { margin-right: -24px; padding-right: 24px; diff --git a/resources/views/web/company/header.blade.php b/resources/views/web/company/header.blade.php index fd0aec6..315df30 100644 --- a/resources/views/web/company/header.blade.php +++ b/resources/views/web/company/header.blade.php @@ -2,16 +2,17 @@
-
-
-