/* ========================================================= 1) ຕົວແປສີ (CSS Variables) — ແກ້ບ່ອນດຽວ ປ່ຽນທັງເວັບ ========================================================= */ :root{ --bg: #f7f9f8; /* ພື້ນຫຼັງຫຼັກ (ຂາວອົມຂຽວ ສະບາຍຕາ) */ --surface: #ffffff; /* ພື້ນຂອງ card */ --text: #1f2a2e; /* ສີໂຕໜັງສືຫຼັກ */ --muted: #61737a; /* ໂຕໜັງສືຮອງ */ --primary: #2f6f5e; /* ສີຫຼັກ (ຂຽວເຂັ້ມ ຈາກ CV) */ --primary-2: #3f8d78; /* ຂຽວອ່ອນກວ່າ ໃຊ້ hover */ --accent: #c9a227; /* ສີທອງ ໃຊ້ເນັ້ນ */ --border: #e3e9e7; --shadow: 0 6px 20px rgba(31,42,46,.07); --radius: 14px; --max: 1080px; /* ຄວາມກວ້າງສູງສຸດຂອງເນື້ອຫາ */ } /* Dark theme — JS ຈະໃສ່ data-theme="dark" ໃສ່ */ html[data-theme="dark"]{ --bg: #12181a; --surface: #1a2225; --text: #e8efec; --muted: #9db0b3; --primary: #6fc3a8; --primary-2:#8fd6be; --accent: #e0bd64; --border: #263134; --shadow: 0 6px 20px rgba(0,0,0,.35); } /* 2) Reset ພື້ນຖານ + ຟອນ Phetsarath OT */ *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; scroll-padding-top:80px; } /* ກົດເມນູແລ້ວເລື່ອນນຸ້ມໆ ບໍ່ໃຫ້ navbar ບັງ */ body{ font-family:'Phetsarath','Phetsarath OT','Noto Sans Lao',system-ui,sans-serif; background:var(--bg); color:var(--text); line-height:1.8; transition:background .3s ease, color .3s ease; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } ul{ list-style:none; } .container{ width:min(100% - 2.5rem, var(--max)); margin-inline:auto; } /* 3) NAVBAR */ .nav{ position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); } .nav__inner{ display:flex; align-items:center; justify-content:space-between; height:64px; } .nav__logo{ font-size:1.25rem; font-weight:700; color:var(--primary); } .nav__logo span{ color:var(--accent); } .nav__menu{ display:flex; align-items:center; gap:1.25rem; } .nav__link{ color:var(--muted); font-size:.95rem; position:relative; padding:.25rem 0; } .nav__link:hover,.nav__link.active{ color:var(--primary); } /* ຂີດກ້ອງເມນູທີ່ active */ .nav__link.active::after{ content:''; position:absolute; left:0; bottom:-2px; width:100%; height:2px; background:var(--accent); border-radius:2px; } /* ກຸ່ມປຸ່ມເຄື່ອງມືຂວາສຸດ: ສະຫຼັບພາສາ + ສະຫຼັບ theme */ .nav__tools{ display:flex; align-items:center; gap:.5rem; } .theme-btn,.lang-btn{ border:1px solid var(--border); background:var(--surface); color:var(--text); height:36px; border-radius:999px; cursor:pointer; font-family:inherit; font-size:.85rem; line-height:1; transition:border-color .2s, color .2s; } .theme-btn{ width:36px; font-size:1rem; } .lang-btn{ padding:0 .85rem; font-weight:700; color:var(--primary); min-width:52px; } .theme-btn:hover,.lang-btn:hover{ border-color:var(--primary); } /* ປຸ່ມ hamburger (ເຊື່ອງໄວ້ໃນຈໍໃຫຍ່) */ .nav__toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px; } .nav__toggle span{ width:24px; height:2px; background:var(--text); border-radius:2px; transition:transform .3s, opacity .3s; } /* ຕອນເປີດເມນູ ໃຫ້ຂີດ 3 ອັນກາຍເປັນຮູບ X */ .nav__toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .nav__toggle.open span:nth-child(2){ opacity:0; } .nav__toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } /* 4) HERO */ .hero{ padding:4rem 0 3rem; } .hero__inner{ display:grid; grid-template-columns:1.4fr 1fr; gap:2.5rem; align-items:center; } .hero__hi{ color:var(--accent); font-weight:700; } .hero__name{ font-size:clamp(1.9rem,5vw,3rem); line-height:1.35; color:var(--primary); } .hero__role{ display:inline-block; margin:.5rem 0 1rem; background:var(--primary); color:#fff; font-weight:700; padding:.3rem 1rem; border-radius:999px; font-size:.95rem; } .hero__desc{ color:var(--muted); max-width:52ch; } .hero__actions{ display:flex; gap:.75rem; margin-top:1.5rem; flex-wrap:wrap; } .btn{ padding:.7rem 1.5rem; border-radius:999px; font-weight:700; font-size:.95rem; transition:.25s; display:inline-block; } .btn--primary{ background:var(--primary); color:#fff; } .btn--primary:hover{ background:var(--primary-2); transform:translateY(-2px); } .btn--ghost{ border:1.5px solid var(--primary); color:var(--primary); } .btn--ghost:hover{ background:var(--primary); color:#fff; transform:translateY(-2px); } .hero__card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:2rem; } .avatar{ width:120px; height:120px; margin:0 auto 1.25rem; border-radius:50%; background:var(--primary); color:#ffffff; place-items:center; font-size:2.2rem; font-weight:700; overflow: hidden; cursor: pointer; } .avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); justify-content: center; align-items: center; } .modal-content { max-width: 90%; max-height: 85vh; border-radius: 12px; object-fit: contain; box-shadow: 0 4px 20px rgba(0,0,0,0.5); animation: zoom 0.2s ease-in-out; } .close { position: absolute; top: 20px; right: 35px; color: #fff; font-size: 40px; font-weight: bold; cursor: pointer; } @keyframes zoom { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } } .hero__info li{ display:flex; gap:.7rem; align-items:flex-start; color:var(--muted); font-size:.92rem; padding:.4rem 0; } .hero__info span{ color:var(--accent); } .hero__info a{ color:var(--muted); border-bottom:1px dashed var(--border); transition:color .2s, border-color .2s; } .hero__info a:hover{ color:var(--primary); border-bottom-color:var(--primary); } /* 5) SECTION / CARD / LIST */ .section{ padding:3.5rem 0; } .section--alt{ background:color-mix(in srgb, var(--primary) 5%, var(--bg)); } .section__title{ font-size:1.5rem; color:var(--primary); margin-bottom:1.25rem; padding-bottom:.5rem; position:relative; } .section__title::after{ content:''; position:absolute; left:0; bottom:0; width:56px; height:3px; background:var(--accent); border-radius:3px; } .section__title:not(:first-child){ margin-top:2.5rem; } .card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:1.5rem; transition:transform .25s, box-shadow .25s; } .card--link{ text-align:center; } .card--link:hover{ transform:translateY(-4px); border-color:var(--primary); } .card__icon{ font-size:1.6rem; color:var(--accent); } .card__title{ font-size:1.1rem; color:var(--text); } .card__meta{ color:var(--muted); font-size:.9rem; margin-top:.25rem; } .list{ margin-top:1rem; display:grid; gap:.6rem; } .list li{ position:relative; padding-left:1.25rem; color:var(--muted); font-size:.93rem; } .list li::before{ content:'▸'; position:absolute; left:0; color:var(--accent); } .list strong{ color:var(--text); } /* Grid ໃຊ້ຊ້ຳໄດ້ຫຼາຍບ່ອນ */ .grid{ display:grid; gap:1.25rem; } .grid--2{ grid-template-columns:repeat(2,1fr); } .grid--3{ grid-template-columns:repeat(3,1fr); } /* Tag */ .tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.75rem; } .tag{ background:color-mix(in srgb, var(--primary) 12%, transparent); color:var(--primary); font-size:.8rem; padding:.2rem .7rem; border-radius:999px; } /* Timeline (ເສັ້ນເວລາປະສົບການ) */ .timeline__item{ position:relative; padding-left:1.75rem; border-left:2px solid var(--border); } .timeline__item::before{ content:''; position:absolute; left:-7px; top:.6rem; width:12px; height:12px; border-radius:50%; background:var(--accent); border:2px solid var(--bg); } /* 6) FOOTER + ປຸ່ມຂຶ້ນເທິງ */ .footer{ border-top:1px solid var(--border); padding:1.75rem 0; text-align:center; color:var(--muted); font-size:.88rem; } .to-top{ position:fixed; right:1.25rem; bottom:1.25rem; width:44px; height:44px; border-radius:50%; border:0; cursor:pointer; background:var(--primary); color:#fff; font-size:1.15rem; box-shadow:var(--shadow); opacity:0; visibility:hidden; transform:translateY(10px); transition:.3s; } .to-top.show{ opacity:1; visibility:visible; transform:translateY(0); } /* 7) Animation ຕອນເລື່ອນລົງມາເຫັນ (reveal) */ .reveal{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; } .reveal.visible{ opacity:1; transform:none; } /* ຄົນທີ່ຕັ້ງຄ່າ "ຫຼຸດ animation" ໃນເຄື່ອງ ຈະບໍ່ເຫັນການເຄື່ອນໄຫວ */ @media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } .reveal{ opacity:1; transform:none; } } /* 8) RESPONSIVE — ແທັບເລັດ ແລະ ມືຖື */ @media (max-width:900px){ .hero__inner{ grid-template-columns:1fr; } .grid--3{ grid-template-columns:repeat(2,1fr); } } @media (max-width:720px){ .nav__toggle{ display:flex; } /* ເມນູມືຖື: ເລື່ອນລົງມາຈາກ navbar */ .nav__menu{ position:absolute; top:64px; left:0; right:0; flex-direction:column; align-items:flex-start; gap:.25rem; background:var(--surface); border-bottom:1px solid var(--border); padding:1rem 1.25rem; max-height:0; overflow:hidden; opacity:0; padding-block:0; transition:max-height .3s ease, opacity .3s ease, padding .3s ease; } .nav__menu.open{ max-height:460px; opacity:1; padding-block:1rem; } .nav__link{ width:100%; padding:.5rem 0; } .nav__tools{ width:100%; padding-top:.75rem; margin-top:.25rem; border-top:1px solid var(--border); } .grid--2,.grid--3{ grid-template-columns:1fr; } .section{ padding:2.5rem 0; } .hero{ padding:2.5rem 0; } .btn{ flex:1; text-align:center; } }