fanfuso/amoryroma
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cards

Browse Source
This commit is contained in:
ppugliese
2026-08-28 10:38:31 -03:00
parent 8ef2eee7ae
commit 0840c945d7
1 changed files with 88 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styles.css
+88 -19
View File
@@ -7,6 +7,7 @@
--ligth-teal: #006d8f;
--bordo: #BA124D;
--oscuro: #110916;
--casi-negro: #0B060E;
--dusty: #a79bab;
--claro: #EAF0EE;
--rose-gold-1: #DFBDB9;
@@ -271,9 +272,14 @@ section .lede { text-align: center; max-width: 900px; margin-bottom: 38px; }
display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 40px;
}
.plan-card {
background: rgba(234,240,238,.03); border: 1px solid rgba(234,240,238,.06);
border-radius: 10px; padding: 30px 24px; display: flex; flex-direction: column;
background: rgba(22, 22, 9, 0.85); /* Antes era rgba(234,240,238,.03) */
border: 1px solid rgba(234,240,238,.1);
border-radius: 10px;
padding: 30px 24px;
display: flex;
flex-direction: column;
text-align: center;
backdrop-filter: blur(4px); /* Opcional: agrega desenfoque al fondo */
}
.plan-card.reco {
border: 1px solid rgba(223,189,185,.2);
@@ -315,7 +321,12 @@ section .lede { text-align: center; max-width: 900px; margin-bottom: 38px; }
/* ===== ACCORDION ===== */
.acc { border-top: 1px solid rgba(234,240,238,.06); }
.acc-item { border-bottom: 1px solid rgba(234,240,238,.06); }
.acc-item {
border-bottom: 1px solid rgba(234,240,238,.06);
background: rgba(17, 9, 22, 0.7); /* Fondo sutil para cada item */
border-radius: 10px;
padding: 2px 0
}
.acc-head {
display: flex; align-items: center; justify-content: space-between;
padding: 20px 4px; cursor: pointer;
@@ -345,7 +356,7 @@ section .lede { text-align: center; max-width: 900px; margin-bottom: 38px; }
.column { position: relative; padding: 0 6px; text-align: center; }
.column:not(:last-child)::after {
content: ''; position: absolute; right: -7px; top: 14%; bottom: 44px;
width: 1px; background: rgba(234,240,238,.06);
width: 1px; background: rgba(234,240,238,0.4);
}
.arch {
width: 100%; aspect-ratio: 1/1; max-height: 100px;
@@ -377,8 +388,12 @@ section .lede { text-align: center; max-width: 900px; margin-bottom: 38px; }
/* ===== CIFRAS ===== */
.cifras-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cifra-card {
background: rgba(234,240,238,.02); border: 1px solid rgba(234,240,238,.06);
border-radius: 10px; padding: 34px 30px; text-align: center;
background: rgba(17, 9, 22, 0.85);
border: 1px solid rgba(234,240,238,.1);
border-radius: 10px;
padding: 34px 30px;
text-align: center;
backdrop-filter: blur(4px);
}
.cifra-icon {
width: 44px; height: 56px; margin: 0 auto 20px;
@@ -401,8 +416,13 @@ section .lede { text-align: center; max-width: 900px; margin-bottom: 38px; }
/* ===== COTIZADOR ===== */
.card {
background: rgba(234,240,238,.03); border: 1px solid rgba(234,240,238,.06);
border-radius: 14px; padding: 48px 52px; max-width: 800px; margin: 0 auto;
background: rgba(17, 9, 22, 0.85);
border: 1px solid rgba(234,240,238,.1);
border-radius: 14px;
padding: 48px 52px;
max-width: 800px;
margin: 0 auto;
backdrop-filter: blur(4px);
}
.progress { display: flex; gap: 6px; margin-bottom: 36px; }
.progress .seg { height: 3px; flex: 1; background: rgba(234,240,238,.1); border-radius: 100px; overflow: hidden; }
@@ -413,11 +433,19 @@ section .lede { text-align: center; max-width: 900px; margin-bottom: 38px; }
.q-title { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 22px; margin-bottom: 28px; }
.options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 32px; }
.opt {
border: 1px solid rgba(234,240,238,.1); border-radius: 8px; padding: 18px 20px;
cursor: pointer; transition: .2s; font-family: var(--font-ui);
border: 1px solid rgba(234,240,238,.15);
border-radius: 8px;
padding: 18px 20px;
cursor: pointer;
transition: .2s;
font-family: var(--font-ui);
background: rgba(17, 9, 22, 0.7); /* Fondo semi-transparente para opciones */
}
.opt:hover { border-color: rgba(223,189,185,.3); }
.opt.selected { border-color: var(--bordo); background: rgba(186,18,77,.05); }
.opt.selected {
border-color: var(--bordo);
background: rgba(186, 18, 77, 0.2);
}
.opt-title { font-size: 14px; font-weight: 500; color: var(--claro); margin-bottom: 3px; }
.opt-sub { font-size: 12px; color: var(--dusty); }
.nav-row { display: flex; justify-content: space-between; align-items: center; }
@@ -454,8 +482,12 @@ section .lede { text-align: center; max-width: 900px; margin-bottom: 38px; }
/* ===== NOSOTROS ===== */
.team-grid-simple { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; max-width: 800px; margin: 0 auto; }
.team-card-simple {
background: rgba(234,240,238,.02); border: 1px solid rgba(234,240,238,.06);
border-radius: 12px; padding: 40px 32px; text-align: center;
background: rgba(17, 9, 22, 0.85);
border: 1px solid rgba(234,240,238,.1);
border-radius: 12px;
padding: 40px 32px;
text-align: center;
backdrop-filter: blur(4px);
}
.team-name {
font-family: var(--font-name); font-weight: 500;
@@ -510,8 +542,11 @@ section .lede { text-align: center; max-width: 900px; margin-bottom: 38px; }
/* ===== CONTACTO ===== */
.contact-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 48px; align-items: start; }
.contact-form-wrap {
background: rgba(234,240,238,.02); border: 1px solid rgba(234,240,238,.06);
border-radius: 12px; padding: 40px 36px;
background: rgba(17, 9, 22, 0.85);
border: 1px solid rgba(234,240,238,.1);
border-radius: 12px;
padding: 40px 36px;
backdrop-filter: blur(4px);
}
.contact-form { display: flex; flex-direction: column; gap: 18px; }
.form-row { display: flex; gap: 18px; }
@@ -551,9 +586,14 @@ section .lede { text-align: center; max-width: 900px; margin-bottom: 38px; }
.contact-direct { display: flex; flex-direction: column; gap: 16px; }
.contact-card {
display: flex; align-items: flex-start; gap: 16px;
padding: 18px 20px; background: rgba(234,240,238,.02);
border: 1px solid rgba(234,240,238,.04); border-radius: 10px;
display: flex;
align-items: flex-start;
gap: 16px;
padding: 18px 20px;
background: rgba(17, 9, 22, 0.85);
border: 1px solid rgba(234,240,238,.08);
border-radius: 10px;
backdrop-filter: blur(4px);
}
.contact-icon { font-size: 20px; line-height: 1.2; flex-shrink: 0; margin-top: 2px; }
.contact-label {
@@ -612,6 +652,20 @@ section .lede { text-align: center; max-width: 900px; margin-bottom: 38px; }
.footer-legal a { font-family: var(--font-body); font-size: 12px; color: rgba(234,240,238,.2); text-decoration: none; }
.footer-legal a:hover { color: rgba(234,240,238,.5); }
/* Todas las cards con fondo oscuro y blur */
.plan-card,
.cifra-card,
.team-card-simple,
.contact-card,
.contact-form-wrap,
.card,
.sheet {
background: rgba(11, 5, 14, 0.85) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
border: 1px solid rgba(234,240,238,0.08);
}
/* ===== RESPONSIVE ===== */
@media (max-width: 980px) {
.plans-grid { grid-template-columns: 1fr 1fr; }
@@ -642,7 +696,22 @@ section .lede { text-align: center; max-width: 900px; margin-bottom: 38px; }
.footer-bottom { flex-direction: column; text-align: center; }
}
@media (max-width: 520px) {
.sheet { max-height: 70vh; padding: 10px 16px 20px; border-radius: 16px 16px 0 0; }
.sheet {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
background: rgba(234, 240, 238, 0.95); /* Más opaco */
border-radius: 22px 22px 0 0;
padding: 10px 36px 30px;
transform: translateY(102%);
transition: transform .4s cubic-bezier(.2,.8,.2,1);
max-height: 55vh;
overflow-y: auto;
color: var(--oscuro);
box-shadow: 0 -8px 40px rgba(0,0,0,.5);
backdrop-filter: blur(8px); }
.sheet-body { grid-template-columns: 1fr; gap: 16px; }
.sheet-col:last-child { grid-column: auto; }
.home-btn { right: 12px; bottom: 12px; font-size: 10px; }