npm - @cyberskill/design - Versions diffs - 2.8.0 → 2.9.0 - Mend

@cyberskill/design 2.8.0 → 2.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (383) hide show

package/ui_kits/website/site.css CHANGED Viewed

@@ -31,23 +31,29 @@ html, body { overflow-x: clip; }
 .nav a { font-size: 14px; font-weight: 600; color: var(--cs-color-text-primary); }
 .nav a:hover { color: var(--cs-color-text-accent); }
 .hdr-side { margin-left: auto; display: flex; align-items: center; gap: 10px; }
-.mini { border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); border-radius: var(--cs-radius-full); height: 38px; padding: 0 14px; font: 600 13px/1 var(--cs-font-family-ui); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
+.mini { border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); border-radius: var(--cs-radius-full); height: 38px; padding: 0 14px; font: 600 13px/1 var(--cs-font-family-ui); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
 .mini:hover { border-color: var(--cs-color-brand-ochre); }
 .mini.icon { width: 38px; padding: 0; justify-content: center; }
+@media (pointer: coarse) {
+  .mini { min-height: 44px; }
+  .mini.icon { width: 44px; height: 44px; }
+}
 /* hero */
 .hero { position: relative; overflow: hidden; background: var(--cs-color-brand-umber); color: #fff; }
-.hero :focus-visible, .band :focus-visible, .work-hero :focus-visible, .ft :focus-visible { outline-color: #FFFDF8; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
+.hero :focus-visible, .band :focus-visible, .work-hero :focus-visible, .car-hero :focus-visible, .ft :focus-visible { outline-color: #FFFDF8; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
 .hero::before { content: ""; position: absolute; inset: 0; background-image: url("../../assets/aurora-tho.webp"); background-size: cover; background-position: center; opacity: .5; }
 .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,17,8,.35), rgba(26,17,8,.82) 78%); }
-.hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: 1.35fr .65fr; gap: var(--cs-space-8); align-items: center; padding-block: 84px 96px; }
+.hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: 1.35fr .65fr; gap: var(--cs-space-8); align-items: center; padding-block: 72px 84px; }
 .hero-in > * { min-width: 0; }
 .hero .eyebrow { color: var(--cs-color-brand-ochre); }
 .hero h1 { font-size: clamp(var(--cs-font-size-3xl, 40px), 6vw, 68px); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; margin: 14px 0 6px; color: var(--cs-color-brand-ochre); }
 .hero .vn { font-size: 20px; font-weight: 600; opacity: .9; margin-bottom: 18px; }
 .hero .lead { font-size: 18px; line-height: 1.55; max-width: min(620px, var(--cs-prose-measure, 45rem)); opacity: .95; }
 .wish { display: flex; gap: 10px; margin-top: 26px; max-width: 620px; flex-wrap: wrap; }
-.wish input { flex: 1 1 300px; min-width: 0; min-height: 52px; border-radius: var(--cs-radius-full); border: 1px solid rgba(255,253,248,.85) !important; background: color-mix(in oklab, var(--cs-color-surface-page) 12%, transparent); backdrop-filter: blur(8px); color: #fff; padding: 0 22px; font: 400 15px/1 var(--cs-font-family-ui); }
+.wish input { flex: 1 1 300px; min-width: 0; min-height: 52px; border-radius: var(--cs-radius-full); border: 1px solid rgba(255,253,248,.85) !important; background: color-mix(in oklab, var(--cs-color-surface-page) 12%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; padding: 0 22px; font: 400 15px/1 var(--cs-font-family-ui); }
+@media (prefers-reduced-transparency: reduce) { .wish input { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(26,17,8,.88); } }
+[data-cs-style="matte-paper"] .wish input { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(26,17,8,.88); }
 .wish input::placeholder { color: rgba(255,255,255,.72); }
 .wish input:focus { outline: 3px solid var(--cs-color-brand-ochre); outline-offset: 1px; }
 .site a.btn-gold, .btn-gold { background: var(--cs-color-brand-ochre); color: var(--cs-color-brand-umber); border: 0; border-radius: var(--cs-radius-full); min-height: 52px; padding: 0 26px; font: 700 15px/1 var(--cs-font-family-ui); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
@@ -66,14 +72,14 @@ html, body { overflow-x: clip; }
 .marq-in b { color: rgba(255,255,255,.4); }
 /* section shell */
-.sec { padding: 88px 0; }
+.sec { padding: 80px 0; }
 .sec-alt { background: var(--cs-color-surface-raised); }
 .sec h2 { font-size: clamp(var(--cs-font-size-xl, 28px), 4vw, var(--cs-font-size-3xl, 40px)); font-weight: 800; letter-spacing: -.02em; margin: 8px 0 10px; }
 .sec-lead { font-size: 17px; color: var(--cs-color-text-muted); max-width: min(620px, var(--cs-prose-measure, 45rem)); margin: 0 0 40px; }
 /* services */
-.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cs-space-5); }
-.svc { border-radius: var(--cs-radius-lg); padding: 26px 24px; background: var(--cs-color-surface-panel); }
+.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cs-space-5); }
+.svc { border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); padding: 28px 26px; background: var(--cs-color-surface-panel); box-shadow: var(--cs-shadow-xs); }
 .svc-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in oklab, var(--cs-color-brand-ochre) 26%, var(--cs-color-surface-panel)); color: var(--cs-color-brand-umber); margin-bottom: 16px; }
 .svc h3 { font-size: 20px; margin: 0 0 8px; }
 .svc p { color: var(--cs-color-text-muted); font-size: 15px; margin: 0 0 16px; }
@@ -148,23 +154,17 @@ html, body { overflow-x: clip; }
 }
 /* Keep native header controls reachable on narrow phones. */
-@media (max-width: 360px) {
-  .hdr-in { flex-wrap: wrap; gap: var(--cs-space-3); }
-  .mini { white-space: normal; }
+@media (max-width: 640px) {
+  .sec { padding: 56px 0; }
 }
-@media screen and (min-width: 361px) and (max-width: 768px), screen and (min-width: 1024px) {
-  .site :is(.nav a, .mini, .hero .vn, .svc li, .chips button, h3, .cs-field__label, .sent, .case-tags span) {
-    font-weight: 700;
-  }
+@media (max-width: 480px) {
+  .container { padding-inline: var(--cs-space-4); }
+  .hdr-in { flex-wrap: wrap; gap: var(--cs-space-2) var(--cs-space-3); }
+  .hdr-side { flex-wrap: wrap; }
+  .mini { white-space: normal; }
 }
 @media screen and (min-width: 1024px) {
-  .hero-in { min-height: 740px; padding-block: 96px 136px; }
-  .hero-art img { width: 320px; }
-  .sec { padding: 168px 0; }
-  .svc-grid { grid-template-columns: 1.12fr 1fr 1fr; }
-  .svc { padding: 48px 28px; }
-  .step { padding-top: 36px; }
+  .hero-art img { width: 300px; }
   [id="careers"], .sec:has(.band) { background-color: var(--cs-color-surface-page); color: var(--cs-color-text-primary); }
 }

package/ui_kits/website/work.html CHANGED Viewed

@@ -12,16 +12,13 @@
 <style>
   /* hero: banner */
   html, body { margin: 0; }
-  @media screen and (min-width: 1024px) {
-    .work-hero + .sec { padding-top: 84px; }
-  }
-  .work-hero { background: var(--cs-color-brand-umber); color: #fff; padding: 88px 0 60px; position: relative; overflow: hidden; }
+  .work-hero { background: var(--cs-color-brand-umber); color: #fff; padding: 76px 0 56px; position: relative; overflow: hidden; }
   .work-hero::before { content: ""; position: absolute; inset: 0; background-image: url("../../assets/aurora-tho.webp"); background-size: cover; background-position: center; opacity: .34; }
   .work-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,17,8,.3), rgba(26,17,8,.75)); }
   .work-hero .container { position: relative; z-index: 1; }
   .work-hero h1 { font-size: clamp(36px, 5vw, 54px); font-weight: 800; letter-spacing: -.02em; color: var(--cs-color-brand-ochre); margin: 12px 0 6px; }
   .work-hero p { font-size: 18px; opacity: .92; max-width: 620px; margin: 0; }
-  .case-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; }
+  .case-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 22px; }
   .case { border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); overflow: hidden; background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); box-shadow: var(--cs-shadow-xs); transition: border-color var(--cs-duration-fast) var(--cs-ease-standard); }
   .case:hover { border-color: var(--cs-color-brand-ochre); box-shadow: var(--cs-shadow-sm); }
   .case-cap { height: 128px; display: flex; align-items: flex-end; padding: 16px 18px; font-family: var(--cs-font-family-mono); font-weight: 700; font-size: 22px; }
@@ -40,8 +37,6 @@
   /* G1 / TASK-IMP-025 — results band from `.container` width. */
   @container cs (max-width: 768px) { .results { grid-template-columns: 1fr 1fr; } }
   @container cs (max-width: 640px) { .results { grid-template-columns: 1fr; } .case-grid { grid-template-columns: 1fr; } }
-  /* Fixed44px theme button sits20px above the edge; reserve20px clearance. */
-  .ft { padding-bottom: 84px; }
 </style>
 </head>
 <body>
@@ -51,7 +46,7 @@
     <div class="container hdr-in">
       <a class="brand" href="index.html"><img src="../../assets/logo-mark.svg" alt="" />CyberSkill</a>
       <nav class="nav"><a href="index.html#services" data-vi="Dịch vụ">Services</a><a href="work.html" data-vi="Dự án">Work</a><a href="careers.html" data-vi="Tuyển dụng">Careers</a><a href="index.html#contact" data-vi="Liên hệ">Contact</a></nav>
-      <div class="hdr-side"><a class="mini" href="#" id="langToggle" aria-label="Switch to Tiếng Việt" data-vi-aria-label="Chuyển sang English">Tiếng Việt</a><a class="mini" style="background:var(--cs-color-brand-umber);color:#fff;border-color:transparent" href="index.html#top" data-vi="Trò chuyện với Lumi">Talk to Lumi</a></div>
+      <div class="hdr-side"><a class="mini" href="#" id="langToggle" aria-label="Switch to Tiếng Việt" data-vi-aria-label="Chuyển sang English">Tiếng Việt</a><button id="themeToggle" type="button" class="mini icon" aria-label="Toggle theme" data-vi-aria-label="Đổi giao diện"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path id="themeTogglePath" d="M20 13.5A8 8 0 1 1 10.5 4a6.5 6.5 0 0 0 9.5 9.5z"/></svg></button><a class="mini" style="background:var(--cs-color-brand-umber);color:#fff;border-color:transparent" href="index.html#top" data-vi="Trò chuyện với Lumi">Talk to Lumi</a></div>
     </div>
   </header>
@@ -103,12 +98,11 @@
     </div>
   </footer>
 </div>
-<button id="themeToggle" aria-label="Toggle theme" data-vi-aria-label="Đổi giao diện" style="position:fixed;right:20px;bottom:20px;z-index:60;border:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-panel);color:var(--cs-color-text-primary);width:44px;height:44px;border-radius:999px;cursor:pointer;box-shadow:var(--cs-shadow-md)">☾</button>
 <script>
   document.getElementById("themeToggle").addEventListener("click", function () {
     var el = document.documentElement, dark = el.getAttribute("data-theme") === "dark";
     el.setAttribute("data-theme", dark ? "light" : "dark");
-    this.textContent = dark ? "☾" : "☀";
+    document.getElementById("themeTogglePath").setAttribute("d", dark ? "M20 13.5A8 8 0 1 1 10.5 4a6.5 6.5 0 0 0 9.5 9.5z" : "M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zM12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M19.1 4.9l-1.4 1.4M6.3 17.7l-1.4 1.4");
   });
 </script>
 <script>