/* ============================
0. RESET / BASE
============================ */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
font-family: system-ui, -apple-system, 'Segoe UI', 'Noto Sans KR', sans-serif;
color: #103630;
background: #fff;
overflow-x: hidden;
}
/* ============================
1. HEADER / NAV (공통)
============================ */
.site-header {
position: sticky;
top: 0;
z-index: 1000;
display: flex;
justify-content: center;
background: rgba(255,255,255,0.9);
backdrop-filter: blur(8px);
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
padding: 20px 0 16px;
}
.header-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
/* 로고 (흰 카드로 감싸서 어떤 배경에도 잘 보이게 하고 싶으면 .logo-wrap 사용)
- index / products / about / interior 다 같게 써도 됨 */
.logo-wrap {
background: #fff;
border-radius: 12px;
box-shadow: 0 8px 20px rgba(0,0,0,.08);
padding: 10px 16px;
}
.logo {
height: 80px;
width: auto;
display: block;
}
.tagline {
font-size: 12px;
color: #6a7f7b;
line-height: 1.3;
}
.main-nav ul {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 28px;
padding: 0;
}
.main-nav a {
text-decoration: none;
color: #0a6b60;
font-weight: 600;
font-size: 16px;
padding: 8px 12px;
border-radius: 10px;
transition: background .2s, color .2s, transform .15s;
}
.main-nav a:hover,
.main-nav a.active {
background: #e7f4f2;
color: #008d7e;
transform: translateY(-1px);
}
/* 반응형 헤더 */
@media (max-width:600px){
.logo { height: 70px; }
.main-nav ul { gap: 18px; }
.main-nav a { font-size: 15px; padding: 6px 10px; }
}
/* ============================
2. COMMON LAYOUT HELPERS
============================ */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 16px;
}
.centered-text {
text-align: center;
}
/* ============================
3. INDEX HERO (첫 화면)
============================ */
/* index.html에서
*/
.hero-bg {
/* 배경 꽉 차는 큰 이미지 */
background: #f6f7f5 url("images/eden.png") center / cover no-repeat fixed;
min-height: 100vh;
width: 100%;
padding: 60px 16px 120px;
display: flex;
align-items: center; /* 수직 중앙 */
justify-content: center; /* 수평 중앙 */
text-align: center;
position: relative;
}
.hero-card {
background: rgba(255,255,255,0.95);
backdrop-filter: blur(6px);
border-radius: 12px;
box-shadow: 0 16px 36px rgba(0,0,0,0.10);
max-width: 800px;
width: 100%;
padding: 32px 32px 28px;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
opacity: 0;
transform: translateY(24px);
animation: heroCardFadeUp .8s ease forwards;
}
.hero-headline {
color: #0a574f;
font-size: clamp(28px, 2vw, 36px);
font-weight: 700;
line-height: 1.3;
text-align: center;
}
/* 바뀌는 문구 (자연, 공기, wellbeing 이런 거 2초마다 바뀌는 애니메이션용) */
.hero-rotating {
color: #4b5d57;
font-size: 15px;
line-height: 1.5;
min-height: 2em;
max-width: 600px;
text-align: center;
margin: 0 auto 8px;
position: relative;
transition: opacity .4s ease;
}
.hero-rotating.fade-out { opacity:0; }
.hero-rotating.fade-in { opacity:1; }
/* CTA 버튼줄 */
.hero-cta-row {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 12px;
}
/* 버튼 스타일 */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 600;
line-height: 1.2;
padding: 12px 18px;
border-radius: 8px;
text-decoration: none;
cursor: pointer;
min-width: 130px;
box-shadow: 0 8px 18px rgba(0,0,0,.08);
transition: all .2s ease;
}
.btn-primary {
background: #0a6b60;
color: #fff;
}
.btn-primary:hover {
background: #008d7e;
box-shadow: 0 14px 28px rgba(0,0,0,.12);
transform: translateY(-2px);
}
.btn-ghost {
background: #ffffff;
color: #0a6b60;
border: 1px solid rgba(10,107,96,0.2);
}
.btn-ghost:hover {
background: rgba(10,107,96,0.07);
box-shadow: 0 14px 28px rgba(0,0,0,.08);
transform: translateY(-2px);
}
/* hero 카드 올라오는 애니메이션 */
@keyframes heroCardFadeUp {
0% { opacity:0; transform:translateY(24px); }
100% { opacity:1; transform:translateY(0); }
}
/* 모바일에서 hero 카드 패딩 조금 줄이기 */
@media (max-width:700px){
.hero-card { padding:24px 20px 24px; gap:14px; }
.hero-headline { font-size: clamp(26px,4vw,32px); }
.hero-rotating { font-size:14px; }
.btn { min-width:120px; font-size:14px; padding:11px 16px; }
}
/* ============================
4. PRODUCTS PAGE (products.html)
============================ */
/* products.html 예시 구조:
Collections
![]()
...
*/
.products-wrap {
padding: 60px 16px 100px;
background: #f6f7f5 url("images/edenwp.png") center/cover no-repeat fixed;
}
.products-heading {
text-align: center;
color: #0a574f;
font-size: clamp(28px,2vw,32px);
font-weight: 700;
line-height: 1.3;
margin: 0 auto 32px;
text-shadow: 0 2px 4px rgba(0,0,0,0.06);
max-width: 800px;
}
/* 카드 그리드: 제품 10개 (2열 x 5줄 or auto-fit) */
.category-grid {
display: grid;
gap: 26px;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
max-width: 1200px;
margin: 0 auto 80px;
padding: 0 10px;
}
.category-card {
overflow: hidden;
border-radius: 16px;
box-shadow: 0 10px 24px rgba(0,0,0,.08);
background: #fff;
transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}
.category-card:hover {
transform: translateY(-4px);
box-shadow: 0 18px 36px rgba(0,0,0,.18);
filter: contrast(1.04) saturate(1.03);
}
.category-card img {
width: 100%;
display: block;
height: auto;
transition: transform .5s ease;
object-fit: cover;
}
.category-card:hover img {
transform: scale(1.04);
}
/* ============================
5. INTERIOR PAGE (interior.html)
============================ */
/*
interior.html 구조 예시:
...
*/
/* ✅ interior 페이지에서만 흐린 배경을 깔아줌.
그래서 body에 class="interior-page" 꼭 넣어줘야 돼. */
body.interior-page {
background: none;
position: relative;
}
body.interior-page::before {
content: "";
position: fixed;
inset: 0;
background: url("images/edenwp.png") center/cover no-repeat;
filter: blur(10px) brightness(0.9);
opacity: 0.6;
z-index: -1; /* 뒤로 */
}
/* 메인 감싸는 쉘 */
.page-shell {
position: relative;
z-index: 1; /* 배경보다 위로 */
max-width: 1280px;
margin: 40px auto 80px;
padding: 0 16px 80px;
}
/* 갤러리 타이틀 */
.gallery-header {
text-align: center;
color: #0a574f;
font-size: clamp(26px,2vw,32px);
font-weight: 700;
line-height: 1.3;
margin-bottom: 28px;
text-shadow: 0 2px 4px rgba(0,0,0,0.06);
}
/* 갤러리 카드 리스트 */
.gallery {
position: relative;
z-index: 1; /* 배경보다 위 */
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 24px;
}
/* 각 썸네일 카드 */
.thumb {
background: #fff;
border-radius: 16px;
box-shadow: 0 12px 28px rgba(0,0,0,.12);
overflow: hidden;
cursor: pointer;
width: 260px;
max-width: 90vw;
transition: all .25s ease;
}
.thumb:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(0,0,0,.18);
}
.thumb img {
width: 100%;
height: 180px;
object-fit: cover;
display: block;
}
.thumb figcaption {
padding: 10px 12px 14px;
text-align: center;
font-size: 14px;
color: #4a5a56;
}
/* 조금 큰 화면일 때 썸네일 약간 키우기 */
@media(min-width:768px){
.thumb { width: 280px; }
.thumb img { height: 190px; }
}
@media(min-width:1024px){
.thumb { width: 300px; }
.thumb img { height: 200px; }
}
/* 라이트박스 (클릭 시 큰 이미지 보여주는 팝업) */
.lightbox {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.85);
backdrop-filter: blur(2px);
z-index: 9999;
display: none; /* .show 붙으면 보임 */
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding: 20px;
color: #fff;
}
.lightbox.show {
display: flex;
}
/* 라이트박스 상단 정보 (1 / 12 — Interior 3 이런 거) */
.lightbox-topinfo {
font-size: 14px;
font-weight: 600;
background: rgba(0,0,0,.6);
border-radius: 999px;
padding: 6px 12px;
margin-bottom: 12px;
text-align: center;
}
/* 큰 이미지 박스 */
.lightbox-main {
position: relative;
max-width: 90vw;
max-height: 70vh;
background: #111;
border-radius: 12px;
box-shadow: 0 30px 60px rgba(0,0,0,.6);
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.lightbox-img {
max-width: 100%;
max-height: 70vh;
width: auto;
height: auto;
object-fit: contain;
display: block;
}
/* 좌우 이동 버튼 */
.nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255,255,255,.2);
color: #fff;
border: 2px solid rgba(255,255,255,.7);
width: 36px;
height: 36px;
border-radius: 6px;
cursor: pointer;
font-size: 18px;
line-height: 1;
display:flex;
align-items:center;
justify-content:center;
user-select:none;
transition: all .2s ease;
}
.nav-btn:hover {
background: rgba(255,255,255,.3);
}
.btn-prev { left: -50px; }
.btn-next { right: -50px; }
@media(max-width:600px){
.btn-prev { left:-40px; }
.btn-next { right:-40px; }
}
/* 닫기 버튼 (X) */
.close-btn {
position: fixed;
top: 20px;
right: 20px;
background: rgba(0,0,0,.6);
color: #fff;
border: 2px solid rgba(255,255,255,.7);
width: 36px;
height: 36px;
border-radius: 6px;
cursor: pointer;
font-size: 18px;
line-height: 1;
display:flex;
align-items:center;
justify-content:center;
user-select:none;
transition: all .2s ease;
}
.close-btn:hover {
background: rgba(0,0,0,.75);
}
/* ============================
6. ABOUT PAGE (about.html)
============================ */
/*
about.html 예시 구조:
*/
.about-hero {
background: #f6f7f5 url("images/edenwp.png") center/cover no-repeat fixed;
padding: 60px 16px 120px;
min-height: 100vh;
}
.about-wrap {
max-width: 1000px;
margin: 0 auto;
background: rgba(255,255,255,0.95);
backdrop-filter: blur(6px);
border-radius: 12px;
box-shadow: 0 16px 36px rgba(0,0,0,0.10);
padding: 40px 32px 48px;
}
.about-headline {
color: #0a574f;
font-weight: 700;
line-height: 1.2;
font-size: clamp(28px,2vw,36px);
margin-bottom: 24px;
}
.about-headline span {
display: block; /* 줄바꿈 강제해서 깔끔한 두 줄, 세 줄 가능 */
}
.about-intro {
color: #4b5d57;
font-size: 15px;
line-height: 1.6;
max-width: 640px;
margin-bottom: 32px;
}
.about-doc-card {
background: #fff;
border-radius: 10px;
box-shadow: 0 8px 20px rgba(0,0,0,.08);
padding: 24px;
overflow-x: auto;
}
.about-doc-card img {
max-width: 100%;
height: auto;
display: block;
}
@media (max-width:700px){
.about-wrap { padding: 28px 20px 32px; }
.about-intro {
font-size: 14px;
line-height: 1.6;
}
}
/* ============================
7. FOOTER (공통)
============================ */
footer,
.site-footer {
text-align: center;
color: #4b5d57;
font-size: 13px;
padding: 40px 16px 80px;
background: none;
}
.since,
.since-line {
font-weight: 700;
font-size: 13px;
letter-spacing: 2px;
color: #0a6b60;
margin-bottom: 8px;
}
/* ✅ 메뉴 스타일 통일 (Products 스타일과 동일하게 적용) */
nav.main-nav a {
text-decoration: none;
font-size: 16px;
font-weight: 600;
color: #0a574f;
padding: 8px 14px;
border-radius: 10px;
transition: background .2s,color .2s,transform .15s;
}
nav.main-nav a:hover,
nav.main-nav a.active {
background: #e7f4f2;
color: #008d7e;
transform: translateY(-1px);
}
/* ✅ EdenBio 메뉴 텍스트 스타일 강제 통일 */
nav.main-nav a {
text-decoration: none !important;
font-size: 16px !important;
font-weight: 600 !important;
color: #0a574f !important;
padding: 8px 14px !important;
border-radius: 10px !important;
transition: background .2s,color .2s,transform .15s !important;
}
nav.main-nav a:hover,
nav.main-nav a.active {
background: #e7f4f2 !important;
color: #008d7e !important;
transform: translateY(-1px) !important;
}
.why-eden {
text-align: center;
padding: 100px 20px 160px; /* ✅ 아래쪽 여백 늘림 */
background: #f9faf9;
border-top: 1px solid rgba(0,0,0,0.05);
}
header {
position: sticky;
top: 0;
z-index: 999;
background: #ffffff; /* 완전 흰색으로 고정 */
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
backdrop-filter: none; /* blur 제거 */
}
header img.logo {
width: 180px;
height: auto;
display: block;
margin: 10px auto;
background: #fff; /* 로고 뒤에 흰색 배경 고정 */
border-radius: 10px; /* 필요시 살짝 둥글게 */
padding: 6px 10px; /* 로고가 딱 붙지 않게 여백 */
}
/* ==== Eden CI 배경색 락 (Option A) ==== */
:root { --header-bg: #ffffff; } /* 필요하면 #f7f8f7 처럼 바꿔가며 맞춰봐 */
.site-header{
position: sticky; top: 0; z-index: 1000;
background: var(--header-bg) !important; /* 고정 흰/연한회색 */
backdrop-filter: none !important; /* 반투명 효과 끄기 */
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
border-bottom: 1px solid rgba(0,0,0,0.06);
}
.logo-wrap{
background: var(--header-bg) !important; /* 로고 카드도 같은 색 */
box-shadow: none !important; /* 가장자리 그림자 제거 */
border: 0 !important;
padding: 8px 12px; /* 여백은 유지 */
}
/* 헤더 아래 내용이 비쳐 보이지 않게 첫 섹션 상단도 살짝 그라운드 처리(선택) */
body::before{
content:""; position: fixed; inset: 0 0 auto 0; height: 110px;
background: var(--header-bg); z-index: 0; pointer-events:none;
}
.site-header{ position: sticky; z-index: 1001; } /* 헤더가 위로 */
/* 추가: Value Grid 4열 고정 스타일 */
.value-grid{
display: grid;
grid-template-columns: repeat(4, minmax(220px, 1fr));
gap: 24px;
max-width: 1200px;
margin: 0 auto;
padding: 0 8px;
}
.value-card{
background:#fff;
border-radius:16px;
box-shadow:0 10px 24px rgba(0,0,0,.08);
padding:36px 24px;
transition:all .3s ease;
height:100%;
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
}
.value-icon{ font-size:36px; margin-bottom:14px; }
@media (max-width: 1100px){
.value-grid{ grid-template-columns: repeat(2, minmax(260px, 1fr)); }
}
@media (max-width: 640px){
.value-grid{ grid-template-columns: 1fr; }
}
