|
| 1 | +/* Logo dark/light switching. |
| 2 | + Congo toggles a .dark class on <html> via JS — the native |
| 3 | + prefers-color-scheme media query inside <picture> tags does not respond |
| 4 | + to this toggle, so we handle switching with CSS classes instead. */ |
| 5 | +.logo-light { |
| 6 | + display: block; |
| 7 | + max-width: 100%; |
| 8 | + height: auto; |
| 9 | +} |
| 10 | +.logo-dark { |
| 11 | + display: none; |
| 12 | + max-width: 100%; |
| 13 | + height: auto; |
| 14 | +} |
| 15 | +html.dark .logo-light { |
| 16 | + display: none; |
| 17 | +} |
| 18 | +html.dark .logo-dark { |
| 19 | + display: block; |
| 20 | +} |
| 21 | + |
| 22 | +/* Experimental page — v2 callout and problem cards */ |
| 23 | +html.dark .v2-callout { |
| 24 | + background: #1e3a5f !important; |
| 25 | + border-color: #3b82f6 !important; |
| 26 | +} |
| 27 | +html.dark .v2-callout p { color: #93c5fd !important; } |
| 28 | +html.dark .v2-callout strong { color: #bfdbfe !important; } |
| 29 | +html.dark .problem-card { |
| 30 | + background: #1f2937 !important; |
| 31 | + border-color: #374151 !important; |
| 32 | +} |
| 33 | +html.dark .problem-card p { color: #9ca3af !important; } |
| 34 | +html.dark .problem-card strong { color: #d1d5db !important; } |
| 35 | +html.dark .v2-pipeline-step-neutral { |
| 36 | + background: #1f2937 !important; |
| 37 | + border-color: #374151 !important; |
| 38 | + color: #d1d5db !important; |
| 39 | +} |
| 40 | +html.dark .v2-pipeline-step-purple { |
| 41 | + background: #2e1065 !important; |
| 42 | + border-color: #4c1d95 !important; |
| 43 | + color: #c4b5fd !important; |
| 44 | +} |
| 45 | +html.dark .v2-pipeline-step-blue { |
| 46 | + background: #1e3a5f !important; |
| 47 | + border-color: #1e40af !important; |
| 48 | + color: #93c5fd !important; |
| 49 | +} |
| 50 | +html.dark .v2-pipeline-step-yellow { |
| 51 | + background: #422006 !important; |
| 52 | + border-color: #854d0e !important; |
| 53 | + color: #fde68a !important; |
| 54 | +} |
| 55 | +html.dark .v2-pipeline-step-green { |
| 56 | + background: #052e16 !important; |
| 57 | + border-color: #166534 !important; |
| 58 | + color: #86efac !important; |
| 59 | +} |
| 60 | + |
| 61 | +/* Hero entrance animations */ |
| 62 | +@keyframes fadeUp { |
| 63 | + from { opacity: 0; transform: translateY(28px); } |
| 64 | + to { opacity: 1; transform: translateY(0); } |
| 65 | +} |
| 66 | +.hero-fade-1 { animation: fadeUp 0.7s cubic-bezier(0.22,1,0.36,1) 0.15s both; } |
| 67 | +.hero-fade-2 { animation: fadeUp 0.7s cubic-bezier(0.22,1,0.36,1) 0.30s both; } |
| 68 | +.hero-fade-3 { animation: fadeUp 0.7s cubic-bezier(0.22,1,0.36,1) 0.45s both; } |
| 69 | +.hero-fade-4 { animation: fadeUp 0.7s cubic-bezier(0.22,1,0.36,1) 0.60s both; } |
| 70 | +.hero-fade-5 { animation: fadeUp 0.7s cubic-bezier(0.22,1,0.36,1) 0.75s both; } |
| 71 | + |
| 72 | +/* List view logos */ |
| 73 | +.list-logo-light { display: block; } |
| 74 | +.list-logo-dark { display: none; } |
| 75 | +html.dark .list-logo-light { display: none !important; } |
| 76 | +html.dark .list-logo-dark { display: block !important; } |
| 77 | + |
| 78 | +/* Pipeline step hover bounce (spring easing gives natural overshoot) */ |
| 79 | +.pipeline-step { |
| 80 | + transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease; |
| 81 | +} |
| 82 | +.pipeline-step:hover { |
| 83 | + transform: translateY(-4px) scale(1.04); |
| 84 | + box-shadow: 0 6px 16px rgba(0,0,0,0.13); |
| 85 | +} |
| 86 | +html.dark .pipeline-step:hover { |
| 87 | + box-shadow: 0 6px 16px rgba(0,0,0,0.45); |
| 88 | +} |
| 89 | + |
| 90 | +/* Pill icon */ |
| 91 | +.pill-icon { |
| 92 | + height: 14px; |
| 93 | + width: 14px; |
| 94 | + object-fit: contain; |
| 95 | + vertical-align: middle; |
| 96 | + margin-right: 4px; |
| 97 | + border-radius: 2px; |
| 98 | + display: inline-block; |
| 99 | + position: relative; |
| 100 | + top: -1px; |
| 101 | +} |
| 102 | + |
| 103 | +/* Hero dark mode overrides */ |
| 104 | +html.dark .hero-tagline { color: #9ca3af !important; } |
| 105 | +html.dark .hero-arrow { color: #4b5563 !important; } |
| 106 | +html.dark .hero-stage-label { color: #6b7280 !important; } |
| 107 | + |
| 108 | +html.dark .hero-pill-neutral { background: #1f2937 !important; border-color: #374151 !important; color: #d1d5db !important; } |
| 109 | +html.dark .hero-pill-purple { background: #2e1065 !important; border-color: #4c1d95 !important; color: #c4b5fd !important; } |
| 110 | +html.dark .hero-pill-blue { background: #1e3a5f !important; border-color: #1e40af !important; color: #93c5fd !important; } |
| 111 | +html.dark .hero-pill-green { background: #052e16 !important; border-color: #166534 !important; color: #86efac !important; } |
| 112 | +html.dark .hero-btn-primary { background: #3b82f6 !important; } |
| 113 | +html.dark .hero-btn-outline { border-color: #374151 !important; color: #d1d5db !important; } |
| 114 | +html.dark .hero-secondary-link { color: #6b7280 !important; border-bottom-color: #374151 !important; } |
0 commit comments