套用全站 V3 頁面樣式護欄

templates/ewoooc_base.html

@@ -33,6 +33,7 @@
     <link rel="stylesheet" href="{{ url_for('static', filename='css/observability-system.css') }}">
     {% endif %}
     {% block extra_css %}{% endblock %}
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/ewoooc-v3-page-guard.css') }}">
     {% block extra_head %}{% endblock %}
 
     <style>

web/static/css/ewoooc-tokens-v2-alias.css

@@ -27,6 +27,7 @@
   --momo-tag-honey:      var(--momo-tag-honey-text);
   --momo-tag-clay:       var(--momo-tag-clay-text);
   --momo-tag-mahogany:   var(--momo-danger-text);
+  --momo-tag-walnut:     var(--momo-info-text);
   --momo-tag-sand:       var(--momo-tag-muted-text);
 
   /* ── 背景與紙張 ── */
@@ -50,6 +51,9 @@
   --momo-text-muted:     var(--momo-text-secondary);
   --momo-text-faint:     var(--momo-text-tertiary);
   --momo-ink-mute:       var(--momo-text-tertiary);
+  --momo-ink-primary:    var(--momo-text-primary);
+  --momo-ink-secondary:  var(--momo-text-secondary);
+  --momo-ink-tertiary:   var(--momo-text-tertiary);
 
   /* ── 線條與陰影 ── */
   --momo-rule:           var(--momo-border-light);
@@ -62,4 +66,27 @@
 
   /* ── 互動文字 ── */
   --momo-on-accent:      var(--momo-page-inverse);
+
+  /* ── 舊頁 typography token ── */
+  --momo-font-heading:   var(--momo-font-display);
+  --momo-font-body:      var(--momo-font-family);
+  --momo-font-medium:    var(--momo-font-weight-medium);
+  --momo-font-semibold:  var(--momo-font-weight-semibold);
+  --momo-font-bold:      var(--momo-font-weight-bold);
+  --momo-font-black:     var(--momo-font-weight-black);
+  --momo-text-xs:        var(--momo-text-label);
+  --momo-text-sm:        var(--momo-text-body-sm);
+  --momo-text-md:        var(--momo-text-body);
+  --momo-text-lg:        var(--momo-text-title);
+  --momo-text-xl:        var(--momo-text-headline);
+  --momo-text-2xl:       var(--momo-text-display);
+
+  /* ── 舊頁 soft/deep 色票 ── */
+  --momo-accent-soft:          var(--momo-page-accent-soft);
+  --momo-surface-2-soft:      color-mix(in srgb, var(--momo-bg-elevated) 74%, transparent);
+  --momo-warm-ink-faint:      var(--momo-border-strong);
+  --momo-warm-caramel-deep:   var(--momo-page-accent-dark);
+  --momo-warm-mahogany-soft:  var(--momo-warm-clay-soft);
+  --momo-warm-honey-deep:     var(--momo-warning-text);
+  --momo-warm-olive-deep:     var(--momo-success-text);
 }

web/static/css/ewoooc-v3-page-guard.css

@@ -0,0 +1,293 @@
+/*
+ * EwoooC V3 Page Guard
+ * Loaded after page-level CSS to keep migrated Flask/Jinja pages aligned with
+ * the production design spec while old page files are cleaned incrementally.
+ */
+
+.momo-app:not(.momo-observability-mode) {
+  --momo-page-title-size: 1.8rem;
+  --momo-page-section-title-size: 1.4rem;
+  --momo-page-card-title-size: 1rem;
+  --momo-page-kpi-size: 1.85rem;
+}
+
+.momo-app:not(.momo-observability-mode) :is(
+  .home-hero__title,
+  .ai-recommend-title,
+  .ar-hero__title h1,
+  .monthly-analysis-title,
+  .ms-page-head__title,
+  .edm-head__title,
+  .edm-page .page-head h2,
+  .edm-page .campaign-title,
+  .sa-page-head__title,
+  .daily-hero__title,
+  .ga-page-head__h1,
+  .vendor-title,
+  .page-logs .page-header h4
+) {
+  color: var(--momo-text-primary) !important;
+  font-family: var(--momo-font-display) !important;
+  font-size: var(--momo-page-title-size) !important;
+  font-weight: 800 !important;
+  line-height: 1.2 !important;
+  letter-spacing: 0 !important;
+  text-wrap: pretty;
+}
+
+.momo-app:not(.momo-observability-mode) :is(
+  .fn-card__title,
+  .edm-slotpanel__title,
+  .ms-chart-card__title,
+  .ms-special__title,
+  .ms-data-table__title,
+  .dashboard-section-label .title,
+  .dashboard-table-title,
+  .dashboard-focus-title,
+  .sa-filter-head__title,
+  .sa-filter-group__title,
+  .sa-empty__title,
+  .sa-panel__title,
+  .ga-empty-state h2,
+  .ga-chart-card__title,
+  .ai-card__title,
+  .ai-notice__title,
+  .home-manual__title,
+  .home-manual__subhead,
+  .crawler-title,
+  .page-logs .control-section-title,
+  .card-title
+) {
+  color: var(--momo-text-primary) !important;
+  font-family: var(--momo-font-display) !important;
+  font-size: var(--momo-page-card-title-size) !important;
+  font-weight: 700 !important;
+  line-height: 1.4 !important;
+  letter-spacing: 0 !important;
+}
+
+.momo-app:not(.momo-observability-mode) :is(
+  .stat-card h2,
+  .stat-number,
+  .dashboard-kpi-value,
+  .dashboard-focus-number,
+  .dashboard-ai-summary-value,
+  .kpi-item-value,
+  .kpi-value,
+  .kpi-card__value,
+  .sa-yoy-card__value,
+  .sa-insights__value,
+  .ga-kpi__value,
+  .monthly-analysis-page .kpi-value,
+  .vendor-pulse-value,
+  .vendor-metric-value,
+  .page-logs .stat-value,
+  .daily-mobile-day__value
+) {
+  font-family: var(--momo-font-mono) !important;
+  font-size: var(--momo-page-kpi-size) !important;
+  font-weight: 800 !important;
+  line-height: 1.1 !important;
+  letter-spacing: 0 !important;
+  font-variant-numeric: tabular-nums;
+}
+
+.momo-app:not(.momo-observability-mode) :is(
+  .home-hero,
+  .fn-card,
+  .dashboard-kpi-grid,
+  .dashboard-focus-card,
+  .dashboard-filter-card,
+  .dashboard-table-card,
+  .ai-recommend-hero,
+  .ar-hero,
+  .monthly-analysis-hero,
+  .ms-page-head,
+  .edm-head,
+  .edm-promonav,
+  .edm-statusbar,
+  .edm-slotpanel,
+  .edm-page .table-container,
+  .edm-page .campaign-hero,
+  .edm-page .campaign-kpi-panel,
+  .edm-page .campaign-hero-content,
+  .sa-page-head,
+  .sa-filter-card,
+  .sa-panel,
+  .sa-kpi,
+  .daily-hero,
+  .daily-kpi-grid,
+  .kpi-card,
+  .daily-calendar,
+  .ga-page-head,
+  .ga-kpi,
+  .ga-chart-card,
+  .vendor-hero-panel,
+  .vendor-card,
+  .vendor-table-card,
+  .vendor-pulse,
+  .crawler-card,
+  .home-manual,
+  .page-logs .page-header,
+  .page-logs .stat-card,
+  .page-logs .control-panel,
+  .page-logs .log-container-wrapper,
+  .momo-app .card
+) {
+  border-radius: 8px !important;
+}
+
+.momo-app:not(.momo-observability-mode) :is(
+  .home-hero,
+  .ai-recommend-hero,
+  .ar-hero,
+  .monthly-analysis-hero,
+  .ms-page-head,
+  .edm-head,
+  .edm-page .campaign-hero,
+  .edm-page .campaign-hero-content,
+  .sa-page-head,
+  .daily-hero,
+  .ga-page-head,
+  .vendor-hero-panel
+) {
+  background-color: var(--momo-bg-surface) !important;
+  background-image: none !important;
+  border: 1px solid var(--momo-border-strong) !important;
+  box-shadow: var(--momo-shadow-soft) !important;
+}
+
+.momo-app:not(.momo-observability-mode) :is(
+  .monthly-analysis-page .filter-section,
+  .sa-filter-card,
+  .ms-filter-card,
+  .filter-section
+) {
+  background-color: var(--momo-bg-paper) !important;
+  background-image: none !important;
+  color: var(--momo-text-primary) !important;
+}
+
+.momo-app:not(.momo-observability-mode) :is(
+  .monthly-analysis-page .form-label,
+  .filter-section .form-label,
+  .sa-filter-group__title,
+  .kpi-item-label,
+  .kpi-card__label,
+  .ga-kpi__label,
+  .stat-label,
+  .vendor-eyebrow
+) {
+  color: var(--momo-text-secondary) !important;
+  font-family: var(--momo-font-display) !important;
+  font-size: 0.78rem !important;
+  font-weight: 700 !important;
+  letter-spacing: 0.06em !important;
+  text-transform: uppercase;
+}
+
+.momo-app:not(.momo-observability-mode) :is(
+  .btn,
+  .form-control,
+  .form-select,
+  .input-group-text,
+  .dashboard-search,
+  .dashboard-select,
+  .dashboard-segmented,
+  .dashboard-action-link,
+  .dashboard-action-button
+) {
+  border-radius: 8px !important;
+  font-family: var(--momo-font-family) !important;
+  letter-spacing: 0 !important;
+}
+
+.momo-app:not(.momo-observability-mode) .page-logs :is(
+  .btn-control,
+  .btn-filter,
+  .btn-font-size,
+  .search-box input
+) {
+  border-radius: 8px !important;
+  font-family: var(--momo-font-family) !important;
+  letter-spacing: 0 !important;
+}
+
+.momo-app:not(.momo-observability-mode) :is(.btn-primary, .vendor-action.is-primary, .fn-card__cta) {
+  background-color: var(--momo-page-accent) !important;
+  background-image: none !important;
+  border-color: var(--momo-page-accent-dark) !important;
+  color: var(--momo-page-inverse) !important;
+}
+
+.momo-app:not(.momo-observability-mode) :is(.table thead th, table thead th) {
+  background-color: var(--momo-bg-paper) !important;
+  color: var(--momo-text-secondary) !important;
+  font-family: var(--momo-font-mono) !important;
+  font-size: 0.82rem !important;
+  font-weight: 700 !important;
+  letter-spacing: 0.05em !important;
+}
+
+.momo-app:not(.momo-observability-mode) :is(.table-responsive, .table-container) {
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+.momo-app:not(.momo-observability-mode) :is(.home-hero__decor, .stat-icon, .kpi-card__icon-bg) {
+  opacity: 0.22;
+}
+
+@media (max-width: 768px) {
+  .momo-app:not(.momo-observability-mode) {
+    --momo-page-title-size: 1.55rem;
+    --momo-page-section-title-size: 1.18rem;
+    --momo-page-card-title-size: 0.98rem;
+    --momo-page-kpi-size: 1.35rem;
+  }
+
+  .momo-app:not(.momo-observability-mode) :is(
+    .home-hero,
+    .ai-recommend-hero,
+    .ar-hero,
+    .monthly-analysis-hero,
+    .ms-page-head,
+    .edm-head,
+    .edm-page .campaign-hero,
+    .sa-page-head,
+    .daily-hero,
+    .ga-page-head,
+    .vendor-hero-panel
+  ) {
+    padding: 0.9rem !important;
+  }
+
+  .momo-app:not(.momo-observability-mode) :is(
+    .monthly-analysis-hero,
+    .ms-page-head,
+    .vendor-hero,
+    .edm-page .campaign-hero-grid,
+    .edm-page .campaign-hero,
+    .sa-page-head,
+    .ga-page-head
+  ) {
+    grid-template-columns: 1fr !important;
+  }
+
+  .momo-app:not(.momo-observability-mode) :is(
+    .home-hero__title,
+    .ai-recommend-title,
+    .ar-hero__title h1,
+    .monthly-analysis-title,
+    .ms-page-head__title,
+    .edm-head__title,
+    .sa-page-head__title,
+    .daily-hero__title,
+    .ga-page-head__h1,
+    .vendor-title,
+    .page-logs .page-header h4
+  ) {
+    align-items: flex-start;
+    overflow-wrap: anywhere;
+  }
+}