body {
background-color: #FDF5E6;
color: #2F4F4F;
font-family: 'Futura', 'Trebuchet MS', sans-serif;
overflow-x: hidden;
}
.retro-future-swoop {
position: absolute;
top: 0; right: -10%;
width: 120%; height: 300px;
background-color: #40E0D0;
border-radius: 0 0 50% 50%;
transform: rotate(-5deg);
z-index: -1;
border-bottom: 8px solid #FF9966;
}
.atompunk-card {
background-color: #fff;
border: 4px solid #Silver;
border-radius: 40px 10px 40px 10px;
padding: 32px;
box-shadow: 15px 15px 0px rgba(0,0,0,0.1);
position: relative;
}
.starburst {
position: absolute;
top: -20px; left: -20px;
width: 40px; height: 40px;
background-color: #FF9966;
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
struct AtompunkShape: Shape {
func path(in rect: CGRect) -> Path {
var path = Path()
path.addRoundedRect(
in: rect,
cornerSize: CGSize(width: 40, height: 40),
style: .continuous
)
return path
}
}
struct RetroFutureCard: View {
var body: some View {
VStack(alignment: .leading, spacing: 16) {
Text("ATOMPUNK")
.font(.custom("Futura", size: 28))
.fontWeight(.bold)
.foregroundColor(Color(red: 0.18, green: 0.31, blue: 0.31))
Text("Sleek chrome and sweeping curves.")
.font(.custom("Futura", size: 16))
}
.padding(32)
.background(Color.white)
.cornerRadius(40, corners: [.topLeft, .bottomRight])
.cornerRadius(10, corners: [.topRight, .bottomLeft])
.overlay(
RoundedRectangle(cornerRadius: 10)
.stroke(
LinearGradient(colors: [.gray, .white, .gray], startPoint: .top, endPoint: .bottom),
lineWidth: 4
)
)
.shadow(color: .black.opacity(0.1), radius: 0, x: 15, y: 15)
}
}
class RetroFutureCard extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(32),
decoration: BoxDecoration(
color: Colors.white,
// Asymmetric "aerodynamic" shape
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(40),
bottomRight: Radius.circular(40),
topRight: Radius.circular(10),
bottomLeft: Radius.circular(10),
),
// Chrome border simulation
border: Border.all(
width: 4,
color: Colors.transparent, // Requires custom painter for gradient border
),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.1),
offset: const Offset(15, 15),
blurRadius: 0, // Hard shadow
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: const [
Text('ATOMPUNK',
style: TextStyle(fontFamily: 'Futura', fontSize: 28, fontWeight: FontWeight.bold, color: Colo
