@charset "utf-8"; /* ============================================================ CHIPOTLE VALUES PAGE — common_sustainability.css ============================================================ */ /* ---- 브랜드 토큰 (기존 스킨과 동일한 색/폰트 사용) ---- */ :root{ --sus-brown:#451400; /* 기본 텍스트/제목 */ --sus-brown-sub:#786259; /* 보조 텍스트 */ --sus-gold:#b68207; --sus-red:#ad2118; --sus-green:#3f7600; --sus-beige:#f7f2ed; --sus-grey:#f0f0f0; --sus-white:#fff; --sus-maxw:1200px; --sus-font-head:"Trade Gothic LT Bold","Trade Gothic LT Com","Barlow Condensed", "Pretendard",Helvetica,Arial,sans-serif; /* 디스플레이 타이틀 전용(원본 Gotham 대체) — 로드는 스킨 공통 의 에서 처리 */ --sus-font-title:"Montserrat","Pretendard",Helvetica,Arial,sans-serif; --sus-font-body:"Nunito","Pretendard",Helvetica,Arial,"Apple SD Gothic Neo",sans-serif; } /* ---- 래퍼 기본 ---- */ #sus-wrap{ font-family:var(--sus-font-body); color:var(--sus-brown); line-height:1.6; background:var(--sus-white); overflow:hidden; /* 배너 이미지 넘침 방지 */ } #sus-wrap *{box-sizing:border-box;} #sus-wrap img{display:block;max-width:100%;} #sus-wrap p{margin:0 0 1em;} #sus-wrap a{color:inherit;text-decoration:none;} /* ============================================================ HERO (상단 / 마무리 공통) ============================================================ */ .sus-hero{ position:relative; display:flex; align-items:center; justify-content:center; min-height:450px; max-height:650px; overflow:hidden; } .sus-hero__bg{position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;overflow:hidden;} .sus-hero__bg img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;} .sus-hero__inner{ position:relative; z-index:1; width:100%; max-width:var(--sus-maxw); padding:0 20px; text-align:center; } .sus-hero__nav{ position:absolute; top:50px; left:0; right:0; z-index:2; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 36px; margin:0; padding:0 20px; } #sus-wrap .sus-hero__nav a{ font-family:var(--sus-font-body); font-weight:800; font-size:16px; letter-spacing:.02em; color:var(--sus-brown); text-transform:uppercase; text-decoration:underline; text-underline-offset:4px; } .sus-hero__nav a:hover{color:var(--sus-red);} .sus-hero__title{ margin:0; font-family:var(--sus-font-head); color:var(--sus-white); font-size:100px; line-height:.82; font-weight:700; text-transform:uppercase; text-shadow:0 2px 14px rgba(0,0,0,.45); } /* 마무리 히어로: 손글씨 일러스트(텍스트 내장)가 잘리지 않도록 이미지 전체를 원본 비율로 노출. 높이는 폭에 따라 자동(2880:1200 = 2.4:1). cover 크롭/높이 캡 해제. */ #sus-wrap .sus-hero--closing{ display:block; min-height:0; max-height:none; } .sus-hero--closing .sus-hero__bg{position:static;} .sus-hero--closing .sus-hero__bg img{position:static;height:auto;} /* 상단 히어로: 원본과 동일한 프레이밍 원본 실측 = object-position center, 높이 526px(뷰포트 1920 기준, 소스 natural 17~83% 노출). 내비는 상단 고정(top:50px), 타이틀은 중앙 정렬(원본과 동일한 텍스트 배치) */ .sus-hero--top{min-height:525px;} /* ============================================================ INTRO ============================================================ */ .sus-intro{ max-width:var(--sus-maxw); margin:0 auto; padding:70px 20px 40px; } #sus-wrap .sus-intro__lead{ max-width:760px; margin:0 auto 44px; text-align:center; font-size:20px; } /* ---- 카드 그리드 ---- */ .sus-cards{ display:grid; gap:26px; max-width:var(--sus-maxw); margin:0 auto; } .sus-cards--intro{grid-template-columns:repeat(2,1fr);} .sus-cards--3{grid-template-columns:repeat(3,1fr);} /* 이미지 상단형 카드 (인트로) */ .sus-card{ display:flex; flex-direction:column; background:var(--sus-white); overflow:hidden; } .sus-card__img{aspect-ratio:3 / 2;overflow:hidden;} .sus-card__img img{width:100%;height:100%;object-fit:cover;object-position:center;} .sus-card__body{padding:22px 20px;text-align:center;} .sus-card__title{ margin:0 0 12px; font-family:var(--sus-font-head); font-size:24px; font-weight:700; text-transform:uppercase; color:var(--sus-brown); } .sus-card__body p{font-size:16px;margin:0;} /* 텍스트 전용 카드 (GIVING / ENVIRONMENT 3분할) */ .sus-textcard{ padding:12px 24px; text-align:center; } .sus-textcard__title{ margin:0 0 12px; font-family:var(--sus-font-head); font-size:32px; line-height:1.05; font-weight:700; text-transform:uppercase; color:var(--sus-brown); } .sus-textcard__sub{ display:inline-block; margin-top:4px; font-size:20px; } .sus-textcard p{font-size:16px;text-align:left;} /* ============================================================ BAND (섹션 배너: FOOD AND ANIMALS / PEOPLE / GIVING / ENVIRONMENT) ============================================================ */ .sus-band{ position:relative; display:flex; align-items:center; justify-content:center; min-height:640px; overflow:hidden; scroll-margin-top:90px; } .sus-band__bg{position:absolute;inset:0;z-index:0;} .sus-band__bg img{width:100%;height:100%;object-fit:cover;object-position:center;} .sus-band__title{ position:relative; z-index:1; font-family:var(--sus-font-title); color:var(--sus-white); font-size:96px; line-height:1; font-weight:500; text-transform:uppercase; text-shadow:1px 1px 6px rgba(0,0,0,.25); text-align:center; padding:0 20px; } /* ============================================================ SECTION (본문 공통) ============================================================ */ .sus-section{ max-width:var(--sus-maxw); margin:0 auto; padding:40px 20px; } .sus-section--narrow{max-width:960px;} .sus-lead-text{ text-align:center; font-size:18px; word-break:keep-all; } /* Food with Integrity 텍스트 블록 */ .sus-integrity{max-width:900px;} .sus-integrity__h{ margin:24px 0 6px; font-size:20px; font-weight:700; color:var(--sus-brown); } .sus-integrity p{font-size:16px;} /* 좌우 이미지 카드 (FOOD SAFETY / OUR SUPPLIERS / PEOPLE 상세) */ .sus-splitcard{ display:flex; align-items:stretch; gap:0; margin-bottom:24px; } .sus-splitcard__img{flex:1 1 50%;} .sus-splitcard__img img{width:100%;height:100%;object-fit:cover;} .sus-splitcard__body{ flex:1 1 50%; padding:24px 28px; display:flex; flex-direction:column; justify-content:center; } .sus-splitcard__title{ margin:0 0 14px; font-family:var(--sus-font-head); font-size:48px; line-height:1; font-weight:700; text-transform:uppercase; color:var(--sus-brown); } .sus-splitcard__body p{font-size:16px;} /* ============================================================ REPORTS ============================================================ */ .sus-reports{text-align:center;} .sus-reports__head{ font-weight:700; font-size:18px; color:var(--sus-red); text-transform:uppercase; } .sus-reports__links{ display:flex; flex-direction:column; gap:10px; align-items:center; } .sus-reports__links a{ font-weight:700; font-size:16px; color:var(--sus-brown); } .sus-reports__links a:hover{color:var(--sus-gold);} /* ============================================================ 반응형 ============================================================ */ @media (max-width:1024px){ .sus-hero__title{font-size:76px;} .sus-band__title{font-size:72px;} .sus-splitcard__title{font-size:38px;} } @media (max-width:768px){ .sus-hero{min-height:380px;} .sus-hero--top{min-height:420px;max-height:none;} .sus-hero__title{font-size:52px;line-height:.9;} .sus-hero__nav{gap:6px 18px;} #sus-wrap .sus-hero__nav a{font-size:12px;} .sus-band{min-height:200px;} .sus-band__title{font-size:48px;} .sus-cards--intro, .sus-cards--3{grid-template-columns:1fr;} /* 좌우 카드 → 세로 스택 (이미지 항상 위) */ .sus-splitcard{flex-direction:column;} /* DOM: 이미지→본문 */ .sus-splitcard--img-right{flex-direction:column-reverse;} /* DOM: 본문→이미지 → 뒤집어 이미지 위로 */ .sus-splitcard__img, .sus-splitcard__body{flex:1 1 auto;} .sus-splitcard__title{font-size:32px;} .sus-intro{padding:44px 18px 30px;} #sus-wrap .sus-intro__lead{font-size:18px;} .sus-section{padding:30px 18px;} } @media (max-width:480px){ .sus-hero__title{font-size:40px;} .sus-band__title{font-size:40px;} .sus-textcard__title{font-size:26px;} }