commit 20260703

2026-07-03 20:34:27 +08:00
parent 296db4a164
commit c1630b8c10
63 changed files with 3497 additions and 1110 deletions
@@ -0,0 +1,121 @@
+/**
+ * AIFO universal CTA buttons (V2 pages).
+ *
+ * Usage:
+ *   <a href="#" class="aifo-btn aifo-btn--primary aifo-btn--arrow">Join AIFO</a>
+ *   <a href="#" class="aifo-btn aifo-btn--outline">Begin Learning</a>
+ *
+ * Modifiers:
+ *   --primary / --outline   visual style
+ *   --arrow                 right arrow (design default for primary CTAs)
+ *   --sm                    smaller padding
+ *
+ * Arrow is optional — only add --arrow when the design shows it.
+ */
+
+:root {
+  --aifo-btn-primary: #f98715;
+  --aifo-btn-primary-hover: #f9a215;
+  --aifo-btn-text: #f9f9f9;
+  --aifo-btn-radius: 10px;
+  --aifo-btn-gap: 8px;
+}
+
+.aifo-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--aifo-btn-gap);
+  border: none;
+  border-radius: var(--aifo-btn-radius);
+  padding: 16px 32px;
+  min-height: 52px;
+  font-size: 16px;
+  font-weight: 500;
+  letter-spacing: -0.16px;
+  line-height: 1;
+  color: var(--aifo-btn-text);
+  background: var(--aifo-btn-primary);
+  text-decoration: none;
+  cursor: pointer;
+  transition:
+    background 0.2s ease,
+    box-shadow 0.2s ease,
+    border-color 0.2s ease,
+    color 0.2s ease;
+}
+
+.aifo-btn:hover,
+.aifo-btn:focus-visible {
+  background: var(--aifo-btn-primary-hover);
+  box-shadow:
+    inset 0 5px 10px rgba(249, 135, 21, 0.6),
+    0 5px 10px rgba(249, 135, 21, 0.6);
+  color: var(--aifo-btn-text);
+  text-decoration: none;
+}
+
+.aifo-btn--primary {
+  /* default .aifo-btn appearance */
+}
+
+.aifo-btn--outline {
+  background: rgba(15, 15, 15, 0.5);
+  border: 0.657px solid #666;
+  box-shadow: none;
+}
+
+.aifo-btn--outline:hover,
+.aifo-btn--outline:focus-visible {
+  background: rgba(249, 135, 21, 0.08);
+  border-color: var(--aifo-btn-primary);
+  box-shadow: none;
+  color: var(--aifo-btn-text);
+}
+
+.aifo-btn--sm {
+  padding: 12px 24px;
+  min-height: 44px;
+  font-size: 14px;
+}
+
+/* Right arrow — same stroke as home-hero-carousel / Figma */
+.aifo-btn--arrow::after {
+  content: "";
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  background-color: currentColor;
+  -webkit-mask: url("../images/icons/arrow-right.svg") center / contain no-repeat;
+  mask: url("../images/icons/arrow-right.svg") center / contain no-repeat;
+  transition: transform 0.2s ease;
+}
+
+.aifo-btn--arrow:hover::after,
+.aifo-btn--arrow:focus-visible::after {
+  transform: translateX(3px);
+}
+
+/* Optional: explicit child icon (when ::after is not enough, e.g. <button> quirks) */
+.aifo-btn__arrow {
+  display: inline-flex;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  transition: transform 0.2s ease;
+}
+
+.aifo-btn__arrow svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.aifo-btn:hover .aifo-btn__arrow,
+.aifo-btn:focus-visible .aifo-btn__arrow {
+  transform: translateX(3px);
+}
+
+.aifo-btn--arrow:has(.aifo-btn__arrow)::after {
+  content: none;
+}