summaryrefslogtreecommitdiffstats
path: root/assets/css/main.min.css
diff options
context:
space:
mode:
Diffstat (limited to 'assets/css/main.min.css')
-rw-r--r--assets/css/main.min.css204
1 files changed, 182 insertions, 22 deletions
diff --git a/assets/css/main.min.css b/assets/css/main.min.css
index a377426..5e9432c 100644
--- a/assets/css/main.min.css
+++ b/assets/css/main.min.css
@@ -1323,6 +1323,22 @@ button,
/* Button component styles */
+.\!btn {
+ display: inline-flex;
+ cursor: pointer;
+ align-items: center;
+ justify-content: center;
+ border-radius: 0.25rem;
+ padding-left: 1rem;
+ padding-right: 1rem;
+ padding-top: 0.5rem;
+ padding-bottom: 0.5rem;
+ font-weight: 700;
+ transition-property: all;
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+ transition-duration: 200ms;
+}
+
.btn {
display: inline-flex;
cursor: pointer;
@@ -1337,31 +1353,71 @@ button,
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 200ms;
+}
+
+.\!btn {
+ background-color: var(--accent) !important;
+ color: #ffffff !important;
+ border: none !important;
+ outline: none !important;
+}
+
+.btn {
background-color: var(--accent);
color: #ffffff;
border: none;
outline: none;
}
+.\!btn:hover:not(:disabled) {
+ opacity: 0.85 !important;
+ transform: translateY(-1px) !important;
+}
+
.btn:hover:not(:disabled) {
opacity: 0.85;
transform: translateY(-1px);
}
+.\!btn:focus-visible {
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+ --tw-ring-offset-width: 2px;
+}
+
.btn:focus-visible {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
--tw-ring-offset-width: 2px;
+}
+
+.\!btn:focus-visible {
+ ring-color: var(--accent) !important;
+ ring-offset-color: var(--bg) !important;
+}
+
+.btn:focus-visible {
ring-color: var(--accent);
ring-offset-color: var(--bg);
}
+.\!btn:active:not(:disabled) {
+ transform: translateY(0) !important;
+ opacity: 0.75 !important;
+}
+
.btn:active:not(:disabled) {
transform: translateY(0);
opacity: 0.75;
}
+.\!btn:disabled {
+ opacity: 0.5 !important;
+ cursor: not-allowed !important;
+}
+
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
@@ -1665,6 +1721,17 @@ article.border.border-border\/30.rounded-lg.card.group.bg-bg {
Timeline Layout
===================== */
+.\!timeline {
+ position: relative;
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 64rem;
+ padding-left: 1rem;
+ padding-right: 1rem;
+ padding-top: 3rem;
+ padding-bottom: 3rem;
+}
+
.timeline {
position: relative;
margin-left: auto;
@@ -1678,11 +1745,35 @@ article.border.border-border\/30.rounded-lg.card.group.bg-bg {
/* Vertical spine */
+.\!timeline::before {
+ content: '' !important;
+}
+
.timeline::before {
content: '';
+}
+
+.\!timeline::before {
position: absolute;
top: 0px;
bottom: 0px;
+}
+
+.timeline::before {
+ position: absolute;
+ top: 0px;
+ bottom: 0px;
+}
+
+.\!timeline::before {
+ /* Mobile: fixed 20px from container left edge */
+ left: 20px !important;
+ width: 2px !important;
+ background: linear-gradient(to bottom, var(--accent), var(--accent2, var(--accent))) !important;
+ opacity: 0.7 !important;
+}
+
+.timeline::before {
/* Mobile: fixed 20px from container left edge */
left: 20px;
width: 2px;
@@ -1691,6 +1782,11 @@ article.border.border-border\/30.rounded-lg.card.group.bg-bg {
}
@media (min-width: 768px) {
+ .\!timeline::before {
+ left: 50% !important;
+ transform: translateX(-50%) !important;
+ }
+
.timeline::before {
left: 50%;
transform: translateX(-50%);
@@ -1979,6 +2075,12 @@ article.border.border-border\/30.rounded-lg.timeline-thumb.group.bg-bg {
transition: opacity 320ms ease-out, transform 320ms ease-out;
}
+@media (min-width: 768px) {
+ .js-lazy-timeline > .timeline-item--right {
+ transform: translateX(18px);
+ }
+}
+
.js-lazy-timeline > .timeline-item.is-visible {
opacity: 1;
transform: translateX(0);
@@ -1996,6 +2098,23 @@ article.border.border-border\/30.rounded-lg.timeline-thumb.group.bg-bg {
/* Mobile menu overlay */
+.menu-overlay {
+ visibility: hidden;
+ position: fixed;
+ inset: 0px;
+ z-index: 40;
+ background-color: var(--bg);
+ opacity: 0;
+ transition-property: all;
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+ transition-duration: 300ms;
+}
+
+article.border.border-border\/30.rounded-lg.overflow-hidden.group.menu-overlay {
+ border-color: var(--border);
+ box-shadow: 0 0 20px var(--accent-glow);
+}
+
.menu-overlay.active {
visibility: visible;
opacity: 1;
@@ -2185,10 +2304,6 @@ article.border.border-border\/30.rounded-lg.timeline-thumb.group.bg-bg {
position: relative;
}
-.sticky {
- position: sticky;
-}
-
.inset-0 {
inset: 0px;
}
@@ -2488,10 +2603,6 @@ article.border.border-border\/30.rounded-lg.timeline-thumb.group.bg-bg {
max-width: 80rem;
}
-.max-w-lg {
- max-width: 32rem;
-}
-
.max-w-md {
max-width: 28rem;
}
@@ -2719,6 +2830,16 @@ article.border.border-border\/30.rounded-lg.timeline-thumb.group.bg-bg {
border-color: var(--border);
}
+.border-green-300 {
+ --tw-border-opacity: 1;
+ border-color: rgb(134 239 172 / var(--tw-border-opacity, 1));
+}
+
+.border-red-300 {
+ --tw-border-opacity: 1;
+ border-color: rgb(252 165 165 / var(--tw-border-opacity, 1));
+}
+
.bg-accent {
background-color: var(--accent);
}
@@ -2731,6 +2852,16 @@ article.border.border-border\/30.rounded-lg.timeline-thumb.group.bg-bg {
background-color: rgb(0 0 0 / 0.5);
}
+.bg-green-100 {
+ --tw-bg-opacity: 1;
+ background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
+}
+
+.bg-red-100 {
+ --tw-bg-opacity: 1;
+ background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
+}
+
.bg-surface {
background-color: var(--surface);
}
@@ -2959,6 +3090,16 @@ article.border.border-border\/30.rounded-lg.timeline-thumb.group.bg-bg {
color: var(--bg);
}
+.text-green-800 {
+ --tw-text-opacity: 1;
+ color: rgb(22 101 52 / var(--tw-text-opacity, 1));
+}
+
+.text-red-800 {
+ --tw-text-opacity: 1;
+ color: rgb(153 27 27 / var(--tw-text-opacity, 1));
+}
+
.text-text {
color: var(--text);
}
@@ -3001,26 +3142,14 @@ article.border.border-border\/30.rounded-lg.timeline-thumb.group.bg-bg {
opacity: 0.05;
}
-.shadow {
- --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
- --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
.shadow-xl {
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
-.outline {
- outline-style: solid;
-}
-
-.ring {
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+.filter {
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur {
@@ -4416,6 +4545,37 @@ html.theme-light .callout-success {
background: rgba(0, 143, 90, 0.06);
}
+/* ============================================================
+ CTA Block Shortcode
+ ============================================================ */
+
+.cta-block {
+ position: relative;
+ margin: 2rem 0;
+ padding: 1.25rem 1.5rem;
+ background: rgba(168, 85, 247, 0.06);
+ border: 1px solid rgba(168, 85, 247, 0.2);
+ border-left: 3px solid var(--accent);
+ border-radius: 0.5rem;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 0.75rem;
+ box-shadow: 0 0 20px var(--accent-glow);
+}
+
+.cta-block__caption {
+ font-size: 0.9rem;
+ color: var(--text-dim);
+ margin: 0;
+ line-height: 1.6;
+}
+
+html.theme-light .cta-block {
+ background: rgba(124, 58, 237, 0.04);
+ box-shadow: none;
+}
+
/* Motion Safety - Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {