/*
  檔案功能：_theme.css
  被引用目的：主題色彩與整體視覺氣質，便於快速更換藝術家網站的風格。
  編寫安排：以模組化方式集中管理相關 class，讓 style.css 可以用 @import 組合多個小檔案，避免所有樣式混在單一大檔中。
  與 HTML 的關係：HTML 先使用語意清楚的 class 名稱，本檔再針對這些 class 定義可重複使用的視覺規則。
*/

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.site-header {
  /* 設定元素寬度，是版型與欄位比例的基礎。 */
  width: 100%;
  /* 搭配定位使用，設定上方位移。 */
  top: 0;
  /* 搭配定位使用，設定左側位移。 */
  left: 0;
  /* 設定定位方式，讓元素可進行相對、絕對或固定定位。 */
  position: relative;
  /* 控制重疊順序，數值越高越靠上。 */
  z-index: 99;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.site-logo {
  /* 設定 CSS 屬性 text-transform，用來微調版面或視覺表現。 */
  text-transform: uppercase;
  /* 設定 CSS 屬性 font-weight，用來微調版面或視覺表現。 */
  font-weight: 800;
  /* 讓元素向左或向右浮動，是早期欄位排版的重要方法。 */
  float: left;}

/* 媒體查詢，依螢幕寬度調整響應式版面。 */
@media (max-width: 992px) {
  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .site-menu {
    /* 設定元素顯示模式，例如 block、inline-block、flex。 */
    display: none;  }}

/* 媒體查詢，依螢幕寬度調整響應式版面。 */
@media (min-width: 992px) {
  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .site-header-toggle {
    /* 設定元素顯示模式，例如 block、inline-block、flex。 */
    display: none;  }}

.site-logo,
/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.site-header-toggle {
  /* 設定內距，控制內容與邊界之間的空間。 */
  padding: 20px 10px;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.site-banner img {
  /* 設定上方外距。 */
  margin-top: -140px;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.site-footer {
  /* 設定定位方式，讓元素可進行相對、絕對或固定定位。 */
  position: relative;
  /* 控制重疊順序，數值越高越靠上。 */
  z-index: 1;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.site-main {
  /* 設定定位方式，讓元素可進行相對、絕對或固定定位。 */
  position: relative;
  /* 控制重疊順序，數值越高越靠上。 */
  z-index: 1;}

/*banner*/
/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.site-banner {
  /* 設定元素高度。 */
  height: 600px;
  /* 設定元素高度。 */
  height: 100vh;
  /* 設定定位方式，讓元素可進行相對、絕對或固定定位。 */
  position: relative;}

/* 媒體查詢，依螢幕寬度調整響應式版面。 */
@media (max-width: 992px) {
  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .site-banner {
    /* 設定元素高度。 */
    height: 500px;  }}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.site-banner-bg {
  /* 設定定位方式，讓元素可進行相對、絕對或固定定位。 */
  position: absolute;
  /* 搭配定位使用，設定上方位移。 */
  top: 0;
  /* 搭配定位使用，設定下方位移。 */
  bottom: 0;
  /* 搭配定位使用，設定左側位移。 */
  left: 0;
  /* 搭配定位使用，設定右側位移。 */
  right: 0;
  /* 控制重疊順序，數值越高越靠上。 */
  z-index: -1;
  /* 控制內容超出容器時的顯示方式。 */
  overflow: hidden;
  /* 設定背景，可包含顏色、圖片或漸層。 */
  background: url("../images/1.jpeg") center center no-repeat;
  /* 設定 CSS 屬性 background-size，用來微調版面或視覺表現。 */
  background-size: cover;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.site-banner-content {
  /* 設定定位方式，讓元素可進行相對、絕對或固定定位。 */
  position: absolute;
  /* 搭配定位使用，設定上方位移。 */
  top: 50%;
  /* 搭配定位使用，設定左側位移。 */
  left: 50%;
  /* 設定 CSS 屬性 min-width，用來微調版面或視覺表現。 */
  min-width: 80%;
  /* 設定位移、縮放或旋轉，可用於動畫與動態感。 */
  transform: translate(-50%, -50%);
  /* 設定文字顏色。 */
  color: #fff;
  /* 設定文字水平對齊。 */
  text-align: center;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.site-banner-content .title {
  /* 設定 CSS 屬性 text-transform，用來微調版面或視覺表現。 */
  text-transform: uppercase;}

/*site-banner-form*/
/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.site-banner-form {
  /* 設定定位方式，讓元素可進行相對、絕對或固定定位。 */
  position: absolute;
  /* 設定背景顏色，建立區塊層次與視覺識別。 */
  background-color: rgba(0, 0, 0, 0.3);
  /* 設定元素寬度，是版型與欄位比例的基礎。 */
  width: 100%;
  /* 搭配定位使用，設定下方位移。 */
  bottom: 0;
  /* 搭配定位使用，設定左側位移。 */
  left: 0;
  /* 設定內距，控制內容與邊界之間的空間。 */
  padding: 30px 0;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.site-banner-form .button {
  /* 設定元素顯示模式，例如 block、inline-block、flex。 */
  display: block;
  /* 設定元素寬度，是版型與欄位比例的基礎。 */
  width: 100%;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.site-banner-form .container {
  /* 限制最大寬度，避免內容在大螢幕上過度拉長。 */
  max-width: 800px;}

/*menu*/
/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.site-menu .nav-link {
  /* 設定元素外距，控制元素與元素之間的距離。 */
  margin: 20px 10px;
  /* 設定內距，控制內容與邊界之間的空間。 */
  padding: 4px 10px;
  /* 設定文字大小。 */
  font-size: 14px;
  /* 設定圓角，影響卡片與按鈕的柔和程度。 */
  border-radius: 2px;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.site-menu .nav-link.become-btn {
  /* 設定邊框。 */
  border: 2px solid #fff;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.site-menu .nav-link.become-btn:hover {
  /* 設定背景顏色，建立區塊層次與視覺識別。 */
  background-color: #fff;
  /* 設定文字顏色。 */
  color: #000;}

/*section*/
/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.section-header {
  /* 設定內距，控制內容與邊界之間的空間。 */
  padding: 30px 0 20px 0;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.section-title {
  /* 設定文字大小。 */
  font-size: 36px;
  /* 設定 CSS 屬性 font-weight，用來微調版面或視覺表現。 */
  font-weight: 800;}

/*card*/
/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.card-grid .card {
  /* 設定 CSS 屬性 max-height，用來微調版面或視覺表現。 */
  max-height: 300px;
  /* 控制內容超出容器時的顯示方式。 */
  overflow: hidden;
  /* 設定下方外距。 */
  margin-bottom: 30px;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.card-center {
  /* 設定定位方式，讓元素可進行相對、絕對或固定定位。 */
  position: absolute;
  /* 搭配定位使用，設定上方位移。 */
  top: 50%;
  /* 搭配定位使用，設定左側位移。 */
  left: 50%;
  /* 設定位移、縮放或旋轉，可用於動畫與動態感。 */
  transform: translate(-50%, -50%);}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.site-footer {
  /* 設定上方外距。 */
  margin-top: 60px;
  /* 設定內距，控制內容與邊界之間的空間。 */
  padding: 40px 0;
  /* 設定背景顏色，建立區塊層次與視覺識別。 */
  background-color: #404344;}

/* 媒體查詢，依螢幕寬度調整響應式版面。 */
@media (max-width: 992px) {
  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .site-footer {
    /* 設定元素顯示模式，例如 block、inline-block、flex。 */
    display: none;  }}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.site-footer .nav-link {
  /* 設定左側內距。 */
  padding-left: 0;
  /* 設定右側內距。 */
  padding-right: 0;
  /* 設定文字大小。 */
  font-size: 13px;}

