Techniques
Climbing-vine border
A tendril border that wraps a panel using a layered radial-gradient "leaf node" pattern along an organically curved edge.
.vine-panel {
position: relative;
border: 1px solid rgba(67, 179, 174, 0.28);
border-radius: 24px;
background: rgba(35, 74, 55, 0.62);
backdrop-filter: blur(12px);
}
.vine-panel::before {
content: "";
position: absolute;
inset: -2px;
border-radius: 26px;
padding: 2px;
background:
radial-gradient(circle at 12% 0%, #8FB339 0 4px, transparent 5px),
radial-gradient(circle at 40% 100%, #4E9F5B 0 4px, transparent 5px),
radial-gradient(circle at 88% 8%, #2E6E4E 0 5px, transparent 6px),
linear-gradient(120deg, #2E6E4E, #43B3AE, #8FB339);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
Verdigris brass fitting
A patinated metal surface—brass base bleeding into verdigris—for fixtures, dividers, and metal accents.
.brass-fitting {
background:
linear-gradient(135deg, #B5A642 0%, #8FB339 38%, #43B3AE 100%);
box-shadow:
inset 0 1px 1px rgba(251, 243, 222, 0.35),
inset 0 -2px 4px rgba(8, 24, 16, 0.45);
border-radius: 9999px;
}
Hexagonal glass-pane lattice
A soft conservatory backdrop of hexagonal panes, dimmed so foliage and content read on top.
.glass-lattice {
background-color: #1B3A2B;
background-image:
repeating-linear-gradient(60deg, rgba(67,179,174,0.10) 0 1px, transparent 1px 28px),
repeating-linear-gradient(-60deg, rgba(67,179,174,0.10) 0 1px, transparent 1px 28px),
repeating-linear-gradient(0deg, rgba(67,179,174,0.06) 0 1px, transparent 1px 28px);
}