Glassmorphic Panels
Three surface variants with backdrop blur and subtle border glow on hover.
Glass
Cyan border on hover with glow.
Glass Amber
Amber border on hover with glow.
Glass Solid
Solid surface background.
Classes
.glass · .glass-amber · .glass-solid
Cards
Clickable cards with breathing border animation. Link and static variants.
Static card
Non-link card
Breathe-static effect on hover.
Classes
.forge-card · .card-amber · .breathe-link · .breathe-static
Tilt tiles
Perspective tilt follows the pointer over each tile. Load ks-tilt-tiles.js and wrap a card in .ks-tilt-wrap[data-ks-tilt] with a single .ks-tilt-inner child. Optional data-ks-tilt-max="12" sets max tilt in degrees (default 10). Disabled when prefers-reduced-motion is set or the primary pointer is coarse.
Static tilt
Non-link tile
Inner can be a div, not only anchors.
Markup
.ks-tilt-wrap[data-ks-tilt] · .ks-tilt-inner · script ks-tilt-tiles.js
Bento Grid
CSS grid with .bento-3 for three equal columns, responsive to single column on mobile.
Cell 1
Three-column bento.
Cell 2
Responsive — stacks on mobile.
Cell 3
Glass panels inside bento.
Tables
Wrap standard Bootstrap tables in .forge-table-wrap for themed styling.
| Methodology | Type | Team size | Iteration |
|---|---|---|---|
| Scrum | Agile | 5–9 | 2-week sprint |
| Kanban | Lean | Any | Continuous |
| Forge | AI-native | 1–3 | Spark-driven |
Dividers
Gradient divider using .forge-divider:
Content continues after divider.