/* ============================================================
CÀ PHÊ GÓC NHỎ — style.css
Vai trò: Định nghĩa toàn bộ giao diện riêng của trang web.
Nguyên tắc phân công:
- File này: màu sắc, font chữ, component riêng (hero, card, form...)
- Bootstrap 5 (load từ CDN): grid layout, flex, spacing, responsive
Cấu trúc file (theo thứ tự xuất hiện):
01. Reset cơ bản
02. Biến màu toàn cục (:root)
03. Cài đặt chung (html, body)
04. Navbar
05. Hero section
06. Nút bấm (buttons)
07. Section chung (padding, màu nền, tiêu đề)
08. About
09. Menu
10. Positions (thẻ vị trí)
11. Benefits (quyền lợi)
12. Apply (form ứng tuyển)
13. Contact strip
14. Footer
15. Scroll reveal animation
============================================================ */
/* ============================================================
01. RESET CƠ BẢN
============================================================
box-sizing: border-box — padding và border được tính VÀO trong width/height.
Ví dụ: phần tử width:200px + padding:20px → tổng vẫn là 200px (không phải 240px).
Đây là chuẩn hiện đại, giúp tính toán layout dễ dàng hơn.
margin: 0 và padding: 0 — xóa khoảng cách mặc định của trình duyệt
(mỗi trình duyệt có giá trị margin/padding mặc định khác nhau).
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* ============================================================
02. BIẾN MÀU TOÀN CỤC (CSS Custom Properties)
============================================================
:root là phần tử gốc của trang (tương đương ).
Các biến định nghĩa ở đây có thể dùng ở mọi nơi bằng var(--tên-biến).
Bảng màu lấy cảm hứng từ cà phê:
--espresso : nâu đậm — màu chủ đạo, nền section tối
--dark-roast : nâu rất đậm — nền navbar, footer
--amber : vàng nâu — màu nhấn chính (accent), border, icon
--amber-light : vàng sáng hơn — hover state, text nổi bật
--cream : trắng kem — nền section sáng, text trên nền tối
--milk : trắng sữa — nền section xen kẽ
--latte : nâu latte — text phụ, placeholder
--text : nâu đậm vừa — text chính trên nền sáng
--text-light : nâu nhạt — text mô tả, text phụ trên nền sáng
============================================================ */
:root {
--espresso: #2C1A0E; /* nâu đậm — màu espresso thật */
--dark-roast: #1A0C05; /* nâu rất đậm — rang kỹ hơn */
--amber: #D4860B; /* vàng hổ phách — màu cà phê khi rót */
--amber-light: #F0A830; /* vàng nhạt hơn — dùng cho hover */
--cream: #FDF6EC; /* trắng kem — màu sữa pha cà phê */
--milk: #FAF0DC; /* trắng sữa — nhạt hơn cream một chút */
--latte: #C8A882; /* nâu latte — màu trung gian */
--text: #3D2B1A; /* nâu đậm vừa — dễ đọc trên nền sáng */
--text-light: #7A5C3E; /* nâu nhạt — cho text mô tả */
}
/* ============================================================
03. CÀI ĐẶT CHUNG
============================================================ */
/* scroll-behavior: smooth — mọi liên kết anchor (#section) sẽ cuộn mượt */
html { scroll-behavior: smooth; }
body {
font-family: 'Inter', sans-serif; /* font hiện đại, dễ đọc — load từ Google Fonts */
background: var(--cream); /* nền trang màu kem */
color: var(--text); /* màu chữ mặc định */
overflow-x: hidden; /* ẩn thanh cuộn ngang — tránh bị vỡ layout trên mobile */
}
/* ============================================================
04. NAVBAR
============================================================
Navbar dùng class Bootstrap (.navbar, .navbar-expand-lg, v.v.)
Phần này chỉ override màu sắc và font riêng của Góc Nhỏ.
============================================================ */
/* Nền navbar: nâu đậm mờ + blur — hiệu ứng kính mờ (glassmorphism) */
.gn-navbar {
background: rgba(44, 26, 14, 0.95); /* màu --espresso với 95% opacity */
backdrop-filter: blur(8px); /* làm mờ nội dung phía sau navbar */
}
/* Logo "☕ Góc Nhỏ" — dùng font serif để nổi bật */
.gn-logo {
font-family: 'Playfair Display', serif; /* font chữ hoa, thanh lịch */
color: var(--amber-light) !important; /* !important để ghi đè màu mặc định của Bootstrap */
font-size: 1.3rem;
font-weight: 700;
letter-spacing: 0.05em; /* giãn chữ nhẹ */
text-decoration: none;
}
/* Các link trong menu navigation */
.gn-nav-link {
color: var(--latte) !important; /* màu nâu latte — nhạt hơn trắng cho dễ nhìn */
font-size: 0.85rem;
letter-spacing: 0.08em; /* giãn chữ nhẹ — kiểu chữ hoa nhỏ */
text-transform: uppercase; /* in hoa toàn bộ */
transition: color 0.3s; /* animation màu khi hover (0.3 giây) */
}
/* Đổi màu khi hover qua link */
.gn-nav-link:hover { color: var(--amber-light) !important; }
/* Icon 3 gạch ngang (hamburger) trên mobile — đổi màu cho nền tối
Dùng SVG inline được mã hóa URL để thay icon mặc định của Bootstrap */
.navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(200,168,130,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* ============================================================
05. HERO SECTION
============================================================
Section đầu tiên chiếm toàn màn hình, hiển thị tiêu đề lớn
và animation hạt cà phê rơi.
============================================================ */
/* Hero chiếm ít nhất 100% chiều cao viewport */
#hero {
min-height: 100vh;
background: var(--dark-roast); /* nền tối để chữ trắng nổi bật */
}
/* Nền gradient radial — ánh sáng ở góc trái tạo chiều sâu */
.hero-bg {
inset: 0; /* top:0, right:0, bottom:0, left:0 — phủ kín */
background: radial-gradient(ellipse at 30% 50%, #3D1F08 0%, var(--dark-roast) 70%);
/* gradient hình elip từ tâm 30% ngang, 50% dọc → tỏa ra tối dần */
}
/* Tiện ích: phủ kín phần tử cha (Bootstrap không có class này) */
.inset-0 { top: 0; left: 0; right: 0; bottom: 0; }
/* Canvas animation không nhận click chuột → không cản các nút phía dưới */
.beans-canvas { pointer-events: none; }
/* Text nhỏ phía trên tiêu đề: "Đang tuyển dụng · 2024" */
.hero-eyebrow {
color: var(--amber);
font-size: 0.78rem;
letter-spacing: 0.2em; /* giãn chữ nhiều — kiểu chữ hoa nhỏ */
text-transform: uppercase;
margin-bottom: 24px;
display: flex;
align-items: center;
gap: 12px;
}
/* Đường kẻ ngang trước text eyebrow (dùng pseudo-element ::before) */
.hero-eyebrow::before {
content: ''; /* không có nội dung, chỉ là hình */
width: 40px;
height: 1px;
background: var(--amber); /* đường ngang màu amber */
}
/* Tiêu đề chính của hero — font rất lớn, responsive */
.hero-title {
font-family: 'Playfair Display', serif;
/* clamp(min, preferred, max): tự điều chỉnh theo viewport
- tối thiểu 3rem (mobile)
- lý tưởng 6vw (6% chiều rộng viewport)
- tối đa 5.5rem (màn hình lớn) */
font-size: clamp(3rem, 6vw, 5.5rem);
color: var(--cream);
line-height: 1.05; /* khoảng cách dòng sát nhau cho tiêu đề lớn */
font-weight: 900;
margin-bottom: 28px;
}
/* Phần chữ nghiêng trong tiêu đề: câu chuyện. */
.hero-title em {
color: var(--amber-light); /* màu vàng nổi bật */
font-style: italic;
}
/* Đoạn mô tả ngắn dưới tiêu đề */
.hero-sub {
color: var(--latte);
font-size: 1.05rem;
line-height: 1.7; /* khoảng cách dòng thoải mái cho đoạn văn */
max-width: 480px; /* giới hạn chiều rộng để dễ đọc */
margin-bottom: 44px;
}
/* Số thống kê (5+ năm, 40+ nhân viên, 98% hài lòng) */
.stat-num {
font-family: 'Playfair Display', serif;
font-size: 2.8rem;
color: var(--amber-light);
font-weight: 700;
line-height: 1;
}
.stat-label {
color: var(--latte);
font-size: 0.78rem;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-top: 6px;
}
/* ============================================================
06. NÚT BẤM (BUTTONS)
============================================================
Hai loại nút:
.btn-gn-primary : nút chính — nền màu amber, chữ tối
.btn-gn-outline : nút phụ — viền trắng, nền trong suốt
Cả hai dùng display: inline-block để có thể đặt cạnh nhau.
============================================================ */
/* Nút chính: "Ứng tuyển ngay", "Gửi đơn ứng tuyển" */
.btn-gn-primary {
display: inline-block;
background: var(--amber);
color: var(--dark-roast); /* chữ tối trên nền vàng */
padding: 16px 40px;
font-weight: 600;
font-size: 0.9rem;
letter-spacing: 0.06em;
text-decoration: none; /* bỏ gạch chân nếu dùng làm thẻ */
text-transform: uppercase;
transition: background 0.3s, transform 0.2s; /* animation hover mượt */
cursor: pointer;
border: none;
}
/* Hover: đổi sang màu vàng sáng hơn và nhấc lên 2px */
.btn-gn-primary:hover { background: var(--amber-light); transform: translateY(-2px); }
/* Nút phụ: "Xem vị trí" */
.btn-gn-outline {
display: inline-block;
border: 1.5px solid var(--latte); /* viền màu latte */
color: var(--latte);
padding: 15px 36px; /* padding nhỏ hơn 1px so với primary (bù cho border) */
font-size: 0.9rem;
letter-spacing: 0.06em;
text-decoration: none;
text-transform: uppercase;
transition: all 0.3s; /* animate tất cả thuộc tính */
cursor: pointer;
background: transparent;
}
/* Hover: viền và chữ đổi sang màu vàng */
.btn-gn-outline:hover { border-color: var(--amber-light); color: var(--amber-light); }
/* ============================================================
07. SECTION CHUNG
============================================================
Các style dùng chung cho nhiều section trên trang.
============================================================ */
/* Padding trên/dưới chuẩn cho mỗi section */
.py-section { padding: 100px 0; }
/* Màu nền cho từng loại section */
.bg-espresso { background: var(--espresso); } /* section tối: Menu, Apply */
.bg-cream { background: var(--cream); } /* section sáng: About, Benefits */
.bg-milk { background: var(--milk); } /* section sáng nhạt: Positions */
/* Class tiện ích màu chữ — dùng trong section tối */
.text-cream { color: var(--cream); }
.text-amber-light { color: var(--amber-light); }
/* Nhãn nhỏ phía trên tiêu đề section: "Về chúng tôi", "Menu nổi bật", v.v. */
.section-label {
font-size: 0.75rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--amber);
margin-bottom: 16px;
}
/* Tiêu đề chính mỗi section */
.section-title {
font-family: 'Playfair Display', serif;
font-size: clamp(2rem, 3.5vw, 3rem); /* responsive: 2rem–3rem */
font-weight: 700;
color: var(--espresso);
line-height: 1.2;
margin-bottom: 20px;
}
/* ============================================================
08. ABOUT SECTION
============================================================ */
/* Khung ảnh/minh họa bên phải — tỉ lệ 4:5 (portrait) */
.about-img-box {
background: var(--espresso);
width: 100%;
aspect-ratio: 4 / 5; /* tự tính chiều cao từ chiều rộng */
overflow: hidden;
}
/* Text bên trong khung ảnh */
.about-img-text {
font-family: 'Playfair Display', serif;
font-size: 1.4rem;
color: var(--cream);
font-style: italic;
line-height: 1.5;
}
/* Hình vuông viền amber ở góc dưới phải của khung ảnh — trang trí */
.about-accent {
position: absolute;
bottom: -20px;
right: -20px; /* nhô ra ngoài khung ảnh 20px */
width: 160px;
height: 160px;
border: 2px solid var(--amber);
z-index: -1; /* nằm sau khung ảnh */
}
/* Ô quote của founder — viền trái màu amber */
.about-quote {
background: var(--espresso);
color: var(--cream);
padding: 28px 32px;
margin-top: 32px;
border-left: 4px solid var(--amber); /* đường nhấn màu amber bên trái */
}
.about-quote blockquote {
font-family: 'Playfair Display', serif;
font-style: italic;
font-size: 1.15rem;
line-height: 1.6;
}
/* Tên người trích dẫn */
.about-quote cite {
display: block; /* xuống dòng */
margin-top: 12px;
font-size: 0.82rem;
color: var(--latte);
font-style: normal; /* bỏ nghiêng mặc định của */
letter-spacing: 0.06em;
}
/* ============================================================
09. MENU SECTION
============================================================ */
/* Đoạn mô tả ngắn dưới tiêu đề menu */
.menu-intro {
color: var(--latte);
max-width: 520px;
line-height: 1.7;
}
/* Card mỗi món đồ uống */
.menu-item {
background: #1F0E04; /* tối hơn nền section espresso một chút */
padding: 40px 32px;
transition: background 0.3s; /* animation màu nền khi hover */
cursor: default; /* con trỏ chuột mặc định (không phải pointer) */
}
/* Hover: sáng nền lên một chút */
.menu-item:hover { background: #2D1508; }
.menu-icon { font-size: 2.4rem; margin-bottom: 20px; } /* emoji icon */
/* Tên món: font serif nổi bật */
.menu-name {
font-family: 'Playfair Display', serif;
color: var(--cream);
font-size: 1.3rem;
margin-bottom: 10px;
}
.menu-desc { color: var(--latte); font-size: 0.88rem; line-height: 1.65; margin-bottom: 18px; }
.menu-price { color: var(--amber-light); font-weight: 600; font-size: 1.05rem; }
/* ============================================================
10. POSITIONS SECTION (THẺ VỊ TRÍ TUYỂN DỤNG)
============================================================ */
/* Card mỗi vị trí tuyển dụng — có thể click để scroll đến form */
.position-card {
background: white;
padding: 36px;
border-bottom: 3px solid transparent; /* viền dưới trong suốt — sẽ đổi màu khi hover */
transition: border-color 0.3s, box-shadow 0.3s, transform 0.2s;
cursor: pointer; /* con trỏ tay — báo hiệu có thể click */
}
/* Hover: viền amber + bóng đổ + nhấc lên */
.position-card:hover {
border-color: var(--amber);
box-shadow: 0 8px 32px rgba(44, 26, 14, 0.12); /* bóng đổ nâu nhạt */
transform: translateY(-3px); /* nhấc lên 3px */
}
/* Badge loại công việc: "Full-time" hoặc "Part-time" */
.pos-tag {
display: inline-block;
background: var(--amber);
color: var(--dark-roast);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 4px 12px;
margin-bottom: 18px;
}
/* Tên vị trí */
.pos-name {
font-family: 'Playfair Display', serif;
font-size: 1.4rem;
color: var(--espresso);
margin-bottom: 12px;
}
.pos-desc { color: var(--text-light); font-size: 0.9rem; line-height: 1.7; margin-bottom: 20px; }
/* Thông tin meta: kinh nghiệm, lương, địa điểm */
.pos-meta span {
font-size: 0.82rem;
color: var(--text-light);
display: flex;
align-items: center;
gap: 6px;
}
/* Dấu chấm màu amber trước mỗi item meta — dùng ::before */
.pos-meta span::before { content: '•'; color: var(--amber); }
/* ============================================================
11. BENEFITS SECTION (QUYỀN LỢI)
============================================================ */
/* Container danh sách quyền lợi */
.benefits-list { margin-top: 40px; }
/* Mỗi quyền lợi — có đường kẻ phân cách */
.benefit-row {
padding: 28px 0;
border-bottom: 1px solid rgba(44, 26, 14, 0.1); /* đường kẻ mờ */
}
/* Quyền lợi đầu tiên thêm đường kẻ phía trên */
.benefit-row:first-child { border-top: 1px solid rgba(44, 26, 14, 0.1); }
/* Số thứ tự (01, 02, ...) — lớn và mờ, làm điểm nhấn trang trí */
.benefit-num {
font-family: 'Playfair Display', serif;
font-size: 2rem;
color: rgba(212, 134, 11, 0.25); /* màu amber với 25% opacity — rất mờ */
font-weight: 900;
min-width: 48px; /* giữ chiều rộng cố định để căn thẳng hàng */
line-height: 1;
}
.benefit-row h4 { font-size: 1rem; color: var(--espresso); margin-bottom: 6px; font-weight: 600; }
.benefit-row p { font-size: 0.88rem; color: var(--text-light); line-height: 1.6; margin: 0; }
/* Ô tối bên phải — "Môi trường làm việc như gia đình" */
.benefits-visual {
background: var(--espresso);
padding: 56px 48px;
color: var(--cream);
}
.benefits-visual h3 {
font-family: 'Playfair Display', serif;
font-size: 1.8rem;
margin-bottom: 16px;
line-height: 1.3;
}
.benefits-visual > p { color: var(--latte); font-size: 0.92rem; line-height: 1.7; margin-bottom: 32px; }
/* Card nhỏ trong lưới 2x2 — workshop, nghỉ phép, team building, review lương */
.perk {
background: rgba(255, 255, 255, 0.06); /* trắng rất mờ trên nền tối */
padding: 20px;
}
.perk-icon { font-size: 1.8rem; margin-bottom: 8px; }
.perk-text { font-size: 0.82rem; color: var(--latte); line-height: 1.4; }
/* ============================================================
12. APPLY SECTION (FORM ỨNG TUYỂN)
============================================================ */
/* Đoạn giới thiệu dưới tiêu đề */
.apply-intro {
color: var(--latte);
line-height: 1.75;
margin-bottom: 48px;
font-size: 1.02rem;
}
/* Nhóm label + input — dùng flexbox dọc */
.form-group-gn { display: flex; flex-direction: column; gap: 8px; }
/* Label nhỏ in hoa phía trên mỗi ô nhập */
.form-group-gn label {
font-size: 0.8rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--latte); /* màu nhạt — không tranh màu với nội dung nhập */
}
/* Style chung cho input, select, textarea — nền tối, viền mờ */
.form-group-gn input,
.form-group-gn select,
.form-group-gn textarea {
background: rgba(255, 255, 255, 0.06); /* trắng mờ trên nền espresso */
border: 1px solid rgba(200, 168, 130, 0.25); /* viền latte rất mờ */
color: var(--cream); /* chữ trắng kem khi nhập */
padding: 14px 18px;
font-family: 'Inter', sans-serif; /* giữ font nhất quán */
font-size: 0.95rem;
outline: none; /* bỏ viền focus mặc định của trình duyệt */
transition: border-color 0.3s; /* animation viền khi focus */
width: 100%; /* chiếm toàn bộ chiều rộng của cột Bootstrap */
}
/* Màu placeholder (gợi ý) — mờ hơn chữ thật */
.form-group-gn input::placeholder,
.form-group-gn textarea::placeholder { color: rgba(200, 168, 130, 0.4); }
/* Khi đang nhập (focus): viền đổi sang màu amber để chỉ rõ ô đang active */
.form-group-gn input:focus,
.form-group-gn select:focus,
.form-group-gn textarea:focus { border-color: var(--amber); }
.form-group-gn select { cursor: pointer; } /* con trỏ tay cho dropdown */
/* Màu nền option trong dropdown — trình duyệt cần background riêng */
.form-group-gn select option { background: var(--espresso); color: var(--cream); }
/* Textarea: cho phép kéo dãn dọc, chiều cao tối thiểu 130px */
.form-group-gn textarea { resize: vertical; min-height: 130px; }
/* Ghi chú nhỏ dưới nút submit */
.submit-note { color: var(--latte); font-size: 0.82rem; opacity: 0.7; }
/* Thông báo thành công sau khi submit — mặc định ẩn, script.js sẽ hiện */
.success-msg {
display: none; /* ẩn — script.js đổi thành 'block' sau khi submit thành công */
background: rgba(212, 134, 11, 0.15); /* amber rất mờ */
border: 1px solid var(--amber); /* viền amber */
color: var(--cream);
padding: 24px 28px;
margin-top: 24px;
font-size: 0.95rem;
line-height: 1.6;
}
/* ============================================================
13. CONTACT STRIP (DẢI THÔNG TIN LIÊN HỆ)
============================================================
Dải thông tin ngắn giữa form và footer.
============================================================ */
.contact-strip {
background: #1A0C05; /* nền rất tối — tối hơn espresso */
padding: 60px 0;
}
.contact-item { color: var(--latte); font-size: 0.92rem; }
/* Tiêu đề nhỏ in hoa: "ĐỊA CHỈ", "ĐIỆN THOẠI", v.v. */
.contact-item strong {
color: var(--cream);
display: block; /* xuống dòng trước nội dung */
font-size: 0.75rem;
letter-spacing: 0.15em;
text-transform: uppercase;
margin-bottom: 6px;
}
/* ============================================================
14. FOOTER
============================================================ */
.gn-footer {
background: var(--dark-roast);
padding: 32px 0;
}
.footer-brand { font-family: 'Playfair Display', serif; color: var(--amber); font-size: 1rem; }
.footer-copy { color: rgba(200, 168, 130, 0.5); font-size: 0.82rem; } /* bản quyền — mờ */
.footer-sub { color: rgba(200, 168, 130, 0.5); font-size: 0.82rem; } /* tagline — mờ */
/* ============================================================
15. SCROLL REVEAL ANIMATION
============================================================
Phần tử có class .reveal bắt đầu ở trạng thái ẩn + dịch xuống.
Khi script.js thêm class .visible (qua Intersection Observer),
CSS transition sẽ animate từ trạng thái ẩn → hiện.
Trạng thái ban đầu (.reveal):
opacity: 0 — hoàn toàn trong suốt (tàng hình)
translateY(28px) — dịch xuống 28px so với vị trí thật
Trạng thái khi hiện (.reveal.visible):
opacity: 1 — hoàn toàn hiện
translateY(0) — về đúng vị trí
transition: 0.7s ease — animation mượt 700ms với easing tự nhiên
============================================================ */
.reveal {
opacity: 0;
transform: translateY(28px); /* ban đầu dịch xuống 28px */
transition: opacity 0.7s ease, transform 0.7s ease; /* animate cả hai thuộc tính */
}
/* Khi class .visible được thêm vào → animation chạy về trạng thái bình thường */
.reveal.visible { opacity: 1; transform: translateY(0); }