/* =========================================================================== belif Việt Nam — stylesheet Dựng theo BELIF - Brand Guideline (LG Vina). FONT Guideline chỉ định "VN Sansa Pro". Sansa Pro là font thương mại, không có sẵn trên web. Khi có file bản quyền, bỏ chú thích khối @font-face bên dưới và đặt file vào assets/fonts/ — phần còn lại của trang tự dùng. Trong lúc chờ, trang dùng Be Vietnam Pro: font chữ không chân được thiết kế riêng cho tiếng Việt, nên dấu thanh và dấu mũ chồng nhau vẫn đọc rõ. MÀU Guideline dùng bảng màu Pantone RIÊNG cho từng dòng sản phẩm. Các giá trị hex dưới đây là chuyển đổi Pantone → sRGB và cần đội thương hiệu xác nhận trước khi phát hành. =========================================================================== */ /* @font-face { font-family: "Sansa Pro"; src: url("assets/fonts/SansaPro-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Sansa Pro"; src: url("assets/fonts/SansaPro-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; } */ :root { --font: "Sansa Pro", "Be Vietnam Pro", "Segoe UI", system-ui, -apple-system, sans-serif; /* nền và chữ — Cool Gray 11 C là màu xám của guideline */ --paper: #FFFFFF; --wash: #F6F6F5; --ink: #1B1B1B; --gray: #53565A; /* Pantone Cool Gray 11 C */ --gray-soft: #8A8D91; --line: #E3E3E1; /* Màu của trang hiện tại — đặt bằng data-page trên thẻ . Mặc định là Cool Gray 11 C cho trang chủ và trang giới thiệu. */ --page: #53565A; /* Multi Vitamin Mask */ --mvm-1: #FF8F1C; /* Pantone 1495 C */ --mvm-2: #FFD08A; /* Pantone 1215 C */ --mvm-3: #FF6A13; /* Pantone 165 C */ --mvm-4: #FA4616; /* Pantone 172 C */ /* Aqua Bomb Frozen */ --frozen-1: #6FCFCB; /* Pantone 2225 C */ --frozen-2: #E4F3EC; /* Pantone 9460 C */ /* The True Cream */ --cream-1: #00AEEF; /* Pantone Cyan C */ --cream-2: #4C6FB1; /* Pantone 660 C */ /* Super Knights và Regenerating chưa có bảng màu trong guideline — tạm dùng sắc trung tính, chờ xác nhận. */ --knights-1: #A8B3A2; --neutral-1: #B9B2A8; --fs-xl: clamp(1.5rem, 2.6vw, 2rem); --fs-lg: 1.25rem; --fs-md: 1.0625rem; --fs-sm: 0.9375rem; --fs-xs: 0.8125rem; --pad: clamp(1.25rem, 5vw, 4.5rem); --bay: clamp(3.5rem, 7vw, 6.5rem); --wide: 1180px; /* Dùng cho phần tử vừa giới hạn chiều rộng vừa có padding ngang, để mọi khối trên trang thẳng hàng với nhau ở cùng một mép trái. */ --wrap: calc(var(--wide) + 2 * var(--pad)); } /* Pantone theo dòng sản phẩm, đã hạ sáng để chữ trắng đạt tương phản AA */ :root[data-page="products"] { --page: #3FB3AE; } /* Pantone 2225 C */ :root[data-page="socials"] { --page: #0090C6; } /* Pantone Cyan C */ :root[data-page="contact"] { --page: #E0700F; } /* Pantone 1495 C */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } [id] { scroll-margin-top: 5.5rem; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .001ms !important; } } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: var(--fs-md); font-weight: 400; line-height: 1.7; -webkit-font-smoothing: antialiased; } h2, h3, h4 { margin: 0; font-weight: 500; line-height: 1.25; text-wrap: balance; } h2 { font-size: var(--fs-xl); } h3 { font-size: var(--fs-lg); } h4 { font-size: var(--fs-md); } p { margin: 0; } a { color: inherit; } :focus-visible { outline: 2px solid var(--cream-1); outline-offset: 3px; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ink); color: var(--paper); padding: .75rem 1.25rem; } .skip:focus { left: 0; } /* --- header — phương án A "Viền màu" ------------------------------------- Vạch màu dưới chân thanh lấy từ biến --page, do thuộc tính data-page trên thẻ quyết định (xem khai báo ở :root phía trên). */ .head { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 3px solid var(--page); } .head__inner { max-width: var(--wrap); margin: 0 auto; padding: .85rem var(--pad); display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); } .logo { display: block; flex-shrink: 0; line-height: 0; } .logo img { height: 38px; width: auto; display: block; } .burger { display: none; } .nav { display: flex; gap: clamp(1rem, 2.2vw, 1.9rem); margin-right: auto; } .nav a { font-size: var(--fs-sm); color: var(--gray); text-decoration: none; white-space: nowrap; padding-bottom: 3px; border-bottom: 2px solid transparent; transition: color .2s ease, border-color .2s ease; } .nav a:hover { color: var(--ink); } .nav a[aria-current="page"] { color: var(--ink); font-weight: 500; border-bottom-color: var(--page); } .tools { display: flex; align-items: center; gap: .25rem; flex-shrink: 0; } .icon { width: 38px; height: 38px; display: grid; place-items: center; position: relative; border-radius: 50%; color: var(--ink); transition: background-color .2s ease; } .icon:hover { background: var(--wash); } .icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .badge { position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--page); color: #FFFFFF; font-size: .625rem; line-height: 16px; font-weight: 600; text-align: center; } .who { display: flex; align-items: center; gap: .6rem; padding-left: .8rem; margin-left: .45rem; border-left: 1px solid var(--line); text-decoration: none; flex-shrink: 0; } .who__av { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; background: var(--page); color: #FFFFFF; display: grid; place-items: center; font-size: .8125rem; font-weight: 600; } .who__txt { display: grid; line-height: 1.3; } .who__hi { font-size: .75rem; color: var(--gray-soft); } .who__name { font-size: var(--fs-sm); font-weight: 500; color: var(--ink); } /* thu gọn dần trên màn hình hẹp */ @media (max-width: 940px) { .who__txt { display: none; } } @media (max-width: 820px) { .burger { order: -1; display: grid; gap: 4px; place-content: center; width: 38px; height: 38px; padding: 0; border: 0; background: none; cursor: pointer; } .burger span { display: block; width: 20px; height: 2px; background: var(--ink); } .logo { margin-right: auto; } .logo img { height: 32px; } .nav { position: absolute; left: 0; right: 0; top: 100%; display: none; flex-direction: column; gap: 0; margin: 0; padding: .25rem var(--pad) 1rem; background: var(--paper); border-bottom: 3px solid var(--page); } .nav--open { display: flex; } .nav a { padding: .75rem 0; border-bottom: 1px solid var(--line); } .nav a[aria-current="page"] { border-bottom-color: var(--line); } } /* --- intro --------------------------------------------------------------- */ .intro { max-width: var(--wrap); margin: 0 auto; padding: var(--bay) var(--pad) clamp(2.5rem, 5vw, 4rem); display: grid; gap: 1.5rem; } .intro__slogan { font-size: clamp(1.75rem, 3.6vw, 2.75rem); font-weight: 300; line-height: 1.2; letter-spacing: -0.02em; } .intro__body { max-width: 58ch; color: var(--gray); } /* --- 5 giá trị TRUE ------------------------------------------------------ */ .values { background: var(--wash); border-block: 1px solid var(--line); padding: clamp(2.5rem, 5vw, 3.5rem) var(--pad); } .values h2 { max-width: var(--wide); margin: 0 auto 1.75rem; font-size: var(--fs-lg); } .values__list { max-width: var(--wide); margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; } .values__list div { display: grid; gap: .15rem; } .values__list dt { font-weight: 500; } .values__list dd { margin: 0; font-size: var(--fs-sm); color: var(--gray-soft); } @media (max-width: 860px) { .values__list { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 460px) { .values__list { grid-template-columns: 1fr; } } /* --- danh mục sản phẩm --------------------------------------------------- */ .catalogue { max-width: var(--wrap); margin: 0 auto; padding: var(--bay) var(--pad) 0; } .group { margin-bottom: var(--bay); } .group__title { padding-bottom: .85rem; margin-bottom: 2rem; border-bottom: 1px solid var(--line); } .grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); } .card { display: grid; gap: .5rem; align-content: start; } /* Khung ảnh mang màu của dòng sản phẩm. Khi chưa có ảnh, khung màu chính là phần nhận diện — không phải ô trống. */ .card__frame { aspect-ratio: 1 / 1; background: var(--wash); overflow: hidden; margin-bottom: .35rem; } .card__frame img { width: 100%; height: 100%; object-fit: cover; display: block; } .card[data-line="mvm"] .card__frame { background: linear-gradient(155deg, var(--mvm-2), var(--mvm-1)); } .card[data-line="frozen"] .card__frame { background: linear-gradient(155deg, var(--frozen-2), var(--frozen-1)); } .card[data-line="truecream"] .card__frame { background: linear-gradient(155deg, #DFF3FC, var(--cream-1)); } .card[data-line="knights"] .card__frame { background: linear-gradient(155deg, #EDF0EB, var(--knights-1)); } .card[data-line="neutral"] .card__frame { background: linear-gradient(155deg, #F0EDE9, var(--neutral-1)); } .card__name { font-weight: 500; } .card__size { display: block; font-size: var(--fs-sm); font-weight: 400; color: var(--gray-soft); } .card__benefit { font-size: var(--fs-sm); color: var(--gray); } .card__ingredients { font-size: var(--fs-xs); color: var(--gray); padding-top: .6rem; margin-top: .2rem; border-top: 1px solid var(--line); } .card__ingredients span { display: block; color: var(--gray-soft); margin-bottom: .1rem; } /* --- câu chuyện ---------------------------------------------------------- */ .story { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad) var(--bay); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; } .story__text { display: grid; gap: 1.15rem; } .story__text p { color: var(--gray); max-width: 52ch; } .milestones { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.15rem; } .milestones li { display: grid; grid-template-columns: 3.75rem 1fr; gap: 1rem; padding-bottom: 1.15rem; border-bottom: 1px solid var(--line); } .milestones li:last-child { border-bottom: none; padding-bottom: 0; } .milestones__year { font-weight: 500; font-variant-numeric: tabular-nums; } .milestones__what { font-size: var(--fs-sm); color: var(--gray); } @media (max-width: 860px) { .story { grid-template-columns: 1fr; } } /* --- footer -------------------------------------------------------------- */ .foot { background: var(--wash); border-top: 1px solid var(--line); padding: clamp(2.5rem, 5vw, 3.5rem) var(--pad); } .foot__mark { max-width: var(--wide); margin: 0 auto .5rem; font-size: 1.25rem; font-weight: 500; } .foot__mark img { height: 34px; width: auto; display: block; } .foot__legal { max-width: var(--wide); margin: 0 auto; font-size: var(--fs-sm); color: var(--gray-soft); }