feat(tapops): add css modules, js scripts, and viewer page

2026-06-04 14:40:40 +07:00
parent 0ebc25809b
commit c9d96eabe4
16 changed files with 4379 additions and 302 deletions
@@ -0,0 +1,123 @@
+/* ===========================================
+   Base / Reset — scoped under .tapops-doc-root
+   Prevents contaminating Tailwind nav/footer.
+   =========================================== */
+
+.tapops-doc-root *,
+.tapops-doc-root *::before,
+.tapops-doc-root *::after {
+    box-sizing: border-box;
+}
+
+/* Font is set on the root only (inherited), NOT on `*`.
+   A universal `.tapops-doc-root *` rule would tie Font Awesome's
+   `.fas` font-family in specificity and—loading later—override it,
+   blanking every icon. Inheritance loses to FA's explicit rule, so
+   icons render while normal text still gets Roboto. */
+.tapops-doc-root {
+    font-family: 'Roboto', sans-serif;
+    color: var(--text-dark);
+    line-height: 1.6;
+}
+
+/* Form controls don't inherit font-family by default — opt them in.
+   These elements never hold Font Awesome glyphs, so this is icon-safe. */
+.tapops-doc-root input,
+.tapops-doc-root select,
+.tapops-doc-root textarea,
+.tapops-doc-root button {
+    font-family: inherit;
+}
+
+.tapops-doc-root a {
+    text-decoration: none;
+    color: inherit;
+}
+
+.tapops-doc-root img {
+    display: block;
+}
+
+/* --- Shared Section Styles --- */
+
+.tapops-doc-root .section-header {
+    margin-bottom: 50px;
+}
+
+.tapops-doc-root .section-tag {
+    font-size: 0.75rem;
+    font-weight: 800;
+    letter-spacing: 2px;
+    background-color: var(--secondary-gold);
+    color: var(--primary-blue);
+    display: inline-block;
+    padding: 6px 14px;
+    text-transform: uppercase;
+    margin-top: 10px;
+}
+
+.tapops-doc-root .section-title {
+    font-size: 2.5rem;
+    font-weight: 800;
+    color: var(--primary-blue);
+    letter-spacing: -1px;
+    line-height: 1.15;
+}
+
+/* --- Shared Button Styles --- */
+
+.tapops-doc-root .btn-join,
+.tapops-doc-root .btn-outline {
+    padding: 17px 30px;
+    font-weight: 800;
+    font-size: 0.9rem;
+    letter-spacing: 1px;
+    display: inline-flex;
+    align-items: center;
+    gap: 12px;
+    transition: all 0.3s ease;
+}
+
+.tapops-doc-root .btn-join {
+    background-color: var(--secondary-gold);
+    color: var(--primary-blue);
+}
+
+.tapops-doc-root .btn-outline {
+    border: 1px solid rgba(255, 255, 255, 0.18);
+    color: white;
+}
+
+.tapops-doc-root .btn-join:hover,
+.tapops-doc-root .btn-outline:hover {
+    transform: translateY(-2px);
+}
+
+.tapops-doc-root .btn-join:hover {
+    background-color: #fff;
+    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
+}
+
+.tapops-doc-root .btn-outline:hover {
+    border-color: var(--secondary-gold);
+    color: var(--secondary-gold);
+}
+
+@media (max-width: 768px) {
+    .tapops-doc-root .btn-join,
+    .tapops-doc-root .btn-outline {
+        padding: 14px 24px;
+        font-size: 0.82rem;
+        width: 100%;
+        justify-content: center;
+    }
+}
+
+@media (max-width: 480px) {
+    .tapops-doc-root .btn-join,
+    .tapops-doc-root .btn-outline {
+        padding: 12px 20px;
+        font-size: 0.78rem;
+        letter-spacing: 0.5px;
+    }
+}