/*
Tooplate 2117 Infinite Loop
https://www.tooplate.com/view/2117-infinite-loop

公共样式（common.css）
index.html / work.html / about.html / contact.html 共同引用。
首次进入站点时加载一次，之后切换到其它页面直接复用浏览器缓存，无需重复下载。
仅存放四个页面公用的部分：字体、基础样式、导航栏、公共响应式。
各页面的专属样式仍放在 css/index.css / work.css / about.css / contact.css 中。
*/

/* ========== 字体 / Fonts ========== */
/* Raleway（本地文件，替代原 Google Fonts @import）——可变字体，覆盖 100-900 字重 */
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fontawesome-5.5/webfonts/Raleway-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fontawesome-5.5/webfonts/Raleway-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fontawesome-5.5/webfonts/Raleway-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fontawesome-5.5/webfonts/Raleway-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fontawesome-5.5/webfonts/Raleway-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter Medium";
  src: url("../fontawesome-5.5/webfonts/Inter_24pt-Medium.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* 字体未就绪时先用系统字体渲染，文字不空白等待 */
}

/* BIGFISH 标题专用字体 */
@font-face {
  font-family: "DINPro Bold";
  src: url("../fontawesome-5.5/webfonts/DINPro-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap; /* 同上：标题文字先显示，字体到位后再替换 */
}

/* ========== 基础样式 / Base ========== */
html {
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* 旧版 Edge/IE */
}

html::-webkit-scrollbar {
  display: none;                  /* Chrome / Safari / Edge */
}

body {
  font-family: "Inter Medium", "Raleway", sans-serif; /* 全站文字统一使用本地 Inter_24pt-Medium.ttf */
  font-size: 1.2em;
  color: #707070;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

a {
  transition: all 0.3s ease;
  color: #38B;
}

a:hover,
a:focus {
  text-decoration: none;
  color: #D40;
}

a:focus {
  outline: none;
}

p {
  line-height: 1.9;
}

/* ========== 图片渐进加载 / Progressive Images ==========
   整站图片统一走 js/lazy-image.js：结构与文字先呈现，
   图片加载完成后淡入，避免大图“一下子砸出来”盖过可读内容。
   三个状态类由脚本添加，未启用脚本时下面的规则不会生效。 */
img.tm-img {
  transition: opacity 0.6s ease;
}

img.tm-img.is-loading {
  opacity: 0;          /* 尚未就绪：透明占位，不干扰文字阅读 */
  pointer-events: none; /* 未就绪时也不响应点击 */
}

/* ========== 导航栏 / Navbar ========== */
.tm-navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: transparent;
  transition: all 0.3s ease;
}

.tm-navbar.scroll {
  background-color: white;
  border-bottom: 1px solid #e9ecef;
}

.nav-item {
  list-style: none;
}

.tm-nav-link {
  font-size: 1rem;   /* 导航文字比正文（body 1.2em）更小一号 */
  color: #707070; /* 未选中导航项：灰色 */
  border-radius: 6px; /* 圆角，配合 hover 背景 */
}

.tm-navbar.scroll .tm-nav-link {
  color: #707070; /* 滚动后（白底导航）未选中项仍为灰色 */
}

/* 鼠标悬停：淡灰色圆角背景（文字保持灰色，避免蓝底白字的高对比） */
.tm-navbar.scroll .tm-nav-link:hover,
.tm-nav-link:hover {
  color: #707070;
  background-color: #f0f0f0;
}

.tm-navbar .tm-nav-link.current {
  color: #000000 !important; /* 当前所在页面：导航文字黑色 */
}

.navbar-toggler {
  border: 1px solid #000000;
  padding-left: 10px;
  padding-right: 10px;
}

.navbar-toggler-icon {
  color: #000000;
  padding-top: 6px;
}

.tm-navbar.scroll .navbar-toggler {
  border: 1px solid #707070;
}

.tm-navbar.scroll .navbar-toggler-icon {
  color: #707070;
}

/* ========== 响应式 / Responsive ========== */
@media (min-width: 768px) {
  .navbar-expand-md .navbar-nav .nav-link {
    padding-right: 10px;
    padding-left: 10px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1275px;
  }

  /* 导航栏容器与内容右缘对齐 */
  .tm-navbar .container {
    max-width: calc(100% - 130px);
  }
}

@media (max-width: 767px) {
  .navbar-nav {
    max-width: 200px;
    text-align: right;
  }

  .navbar-collapse {
    background-color: rgb(255, 255, 255);
    padding: 10px;
    border-radius: 3px;
  }

  .navbar-collapse .nav-link {
    color: #707070;
    padding-right: 20px;
  }

  .navbar-collapse .nav-link.current {
    color: #000000; /* 移动端折叠菜单：当前项黑色 */
  }
}