Spaces:
Running
Running
File size: 1,785 Bytes
9d106a9 99d47fd 9d106a9 99d47fd 9d106a9 99d47fd 9d106a9 99d47fd 9d106a9 99d47fd 9d106a9 99d47fd 9d106a9 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | /* Custom styles that can't be achieved with Tailwind */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Poppins', sans-serif;
}
.hero {
background-image: radial-gradient(circle at 10% 20%, rgba(255, 237, 188, 0.7) 0%, rgba(254, 215, 165, 0.7) 90%);
}
/* Smooth scrolling */
html {
scroll-behavior: smooth;
}
/* Custom animation for recipe cards */
.recipe-card:hover {
transform: translateY(-5px);
transition: transform 0.3s ease;
}
/* Kitchen Visualizer Styles */
#kitchen-container {
background-image: linear-gradient(45deg, #f5f5f5 25%, transparent 25%),
linear-gradient(-45deg, #f5f5f5 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #f5f5f5 75%),
linear-gradient(-45deg, transparent 75%, #f5f5f5 75%);
background-size: 20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}
.layout-btn, .color-btn, .material-btn, .appliance-btn {
transition: all 0.2s ease;
}
.layout-btn:hover, .appliance-btn:hover {
transform: scale(1.05);
}
.color-btn:hover, .material-btn:hover {
transform: scale(1.1);
}
[data-element] {
transition: background-color 0.3s ease;
}
/* Custom tooltip for kitchen tools */
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
} |