initial commit

assets/scss/sections/_book-excerpt.scss

@@ -0,0 +1,177 @@
+// main: ../main.scss
+/*--------------------------------------------------------------
+# Book Excerpt Section
+--------------------------------------------------------------*/
+.book-excerpt {
+  padding: 80px 0;
+  background-color: var(--background-color);
+  overflow: hidden;
+
+  .book-excerpt-wrapper {
+    position: relative;
+  }
+
+  .book-page-design {
+    background-color: var(--surface-color);
+    padding: 50px 40px;
+    border-radius: 10px;
+    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
+    position: relative;
+    overflow: hidden;
+
+    @media (max-width: 768px) {
+      padding: 40px 25px;
+    }
+
+    &:before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 5px;
+      background: linear-gradient(90deg,
+          var(--accent-color) 0%,
+          color-mix(in srgb, var(--accent-color), transparent 20%) 100%);
+    }
+
+    .page-number {
+      position: absolute;
+      top: 20px;
+      right: 30px;
+      font-size: 14px;
+      font-weight: 600;
+      color: color-mix(in srgb, var(--default-color), transparent 40%);
+      font-family: var(--heading-font);
+    }
+
+    .chapter-title {
+      text-align: center;
+      font-family: var(--heading-font);
+      font-size: 20px;
+      font-weight: 600;
+      color: var(--heading-color);
+      margin-bottom: 30px;
+      position: relative;
+
+      &:after {
+        content: '';
+        position: absolute;
+        bottom: -10px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 60px;
+        height: 2px;
+        background-color: color-mix(in srgb, var(--accent-color), transparent 30%);
+      }
+    }
+
+    .excerpt-content {
+      font-family: 'Georgia', serif;
+      line-height: 1.8;
+      color: var(--default-color);
+
+      p {
+        margin-bottom: 20px;
+        text-align: justify;
+      }
+
+      .first-letter {
+        &:first-letter {
+          font-size: 3.5em;
+          float: left;
+          line-height: 0.8;
+          margin-right: 10px;
+          color: var(--accent-color);
+          font-family: var(--heading-font);
+          font-weight: 600;
+        }
+      }
+
+      .dialogue {
+        padding-left: 20px;
+        border-left: 2px solid color-mix(in srgb, var(--accent-color), transparent 70%);
+        font-style: italic;
+      }
+    }
+
+    .page-decoration {
+      position: absolute;
+      bottom: 20px;
+      left: 0;
+      width: 100%;
+      display: flex;
+      justify-content: center;
+
+      &:after {
+        content: '✦';
+        font-size: 18px;
+        color: color-mix(in srgb, var(--accent-color), transparent 30%);
+      }
+    }
+  }
+
+  .cta-wrapper {
+    margin-top: 30px;
+
+    .btn-read-more {
+      display: inline-flex;
+      align-items: center;
+      gap: 10px;
+      background-color: var(--surface-color);
+      color: var(--accent-color);
+      padding: 12px 28px;
+      border-radius: 50px;
+      font-weight: 500;
+      transition: all 0.3s ease;
+      border: 2px solid color-mix(in srgb, var(--accent-color), transparent 80%);
+      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+
+      i {
+        transition: transform 0.3s ease;
+      }
+
+      &:hover {
+        background-color: var(--accent-color);
+        color: var(--contrast-color);
+        transform: translateY(-3px);
+
+        i {
+          transform: translateX(5px);
+        }
+      }
+    }
+  }
+
+  @media (max-width: 992px) {
+    .section-header {
+      h2 {
+        font-size: 28px;
+      }
+    }
+  }
+
+  @media (max-width: 768px) {
+    padding: 60px 0;
+
+    .section-header {
+      h2 {
+        font-size: 24px;
+      }
+    }
+
+    .book-page-design {
+      .chapter-title {
+        font-size: 18px;
+      }
+
+      .excerpt-content {
+        .first-letter {
+          &:first-letter {
+            font-size: 3em;
+          }
+        }
+      }
+    }
+  }
+}