Spaces:
Running
Running
File size: 3,584 Bytes
0e82ba4 fbeb5e4 0e82ba4 fbeb5e4 0e82ba4 fbeb5e4 0e82ba4 fbeb5e4 0e82ba4 50f82ff 9bd490f 50f82ff 9bd490f 50f82ff d7194e7 70a1a92 2c23f64 70a1a92 d7194e7 2c23f64 d7194e7 50f82ff 0e82ba4 2c23f64 aa084dd 2c729de fbeb5e4 8683296 2c729de 8683296 aa084dd 0e82ba4 50f82ff aa084dd 2c23f64 aa084dd 2c729de aa084dd 8683296 aa084dd 50f82ff d10f440 aa084dd 50f82ff fbeb5e4 50f82ff aa084dd d10f440 |
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 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 |
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
font-family: 'Lato', sans-serif;
}
.font-playfair {
font-family: 'Playfair Display', serif;
}
/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #b45309;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #92400e;
}
/* Animation for hero section */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.hero-content {
animation: fadeIn 1s ease-out forwards;
}
/* Services section */
#services .flex > div {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#services .flex > div:hover {
transform: translateY(-5px);
box-shadow: 0 10px 15px rgba(0,0,0,0.1);
}
/* Language selector dropdown */
.language-selector {
position: relative;
display: inline-block;
}
.language-dropdown {
display: none;
position: absolute;
right: 0;
background-color: #1a1a1a;
min-width: 160px;
box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
z-index: 1;
border-radius: 4px;
}
.language-selector:hover .language-dropdown {
display: block;
}
.language-option {
padding: 12px 16px;
display: flex;
align-items: center;
transition: background-color 0.3s;
}
.language-option:hover {
background-color: #b45309;
}
/* Form input focus styles */
.form-input:focus {
box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.3);
}
/* Blog Section */
#blog {
scroll-margin-top: 100px;
}
/* Ensure blog buttons are clickable */
[data-category] {
cursor: pointer;
user-select: none;
}
[data-category-content] {
transition: opacity 0.3s ease;
}
/* Blog Cards */
#pasiones .bg-white:hover {
transform: translateY(-5px);
}
/* Hover effect for subtitle */
.hovered-element {
transition: all 0.3s ease;
}
.hovered-element {
transition: all 0.3s ease;
color: #978a8a;
}
.hovered-element:hover {
color: #ff6f00;
transform: scale(1.03);
}
/* Category Buttons */
[data-category] {
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(224, 207, 207, 0.05);
border-radius: 9999px;
padding: 0.7rem 1.25rem;
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-weight: 500;
border: 1px solid transparent;
color: #6e727a;
}
[data-category] svg {
color: #52555a;
stroke: #6b7280;
}
[data-category]:hover:not(.active-category) {
background-color: #f3f4f6 !important;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
border-color: rgba(180, 83, 9, 0.1);
color: #656a73;
}
.active-category {
background-color: #b45309 !important;
color: white !important;
box-shadow: 0 4px 6px rgba(219, 211, 205, 0.2);
}
.active-category svg {
color: white !important;
stroke: white !important;
}
[data-category] i {
width: 16px;
height: 16px;
stroke-width: 2.5px;
}
/* Category Content */
[data-category-content] {
display: none;
animation: fadeIn 0.5s ease-out;
border-radius: 1rem;
background: white;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}
[data-category-content="mitologia"] {
display: block;
}
/* Category buttons container */
#blog .max-w-6xl .flex {
gap: 0.75rem;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 2.5rem;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
|