File: /var/www/vhost/disk-apps/demo.sports-crowd.com/resources/views/web_experiences/detail/css.blade.php
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<style>
:root {
--btn-color: <?php echo $corporateIdentity->btnBox_color ?>;
}
body {
font-family: sans-serif;
margin: 0;
background-color: #f5f6f7;
}
.container {
margin: 0 auto;
}
.header {
background-color: <?php echo $corporateIdentity->btnBox_color ?>;
padding: 1.5rem 1rem;
}
@media (min-width: 768px) {
.header {
margin: 0 auto;
}
}
.header h1 {
font-size: 1.85rem;
line-height: 2.25rem;
font-weight: bold;
color: white;
max-width: 1200px;
margin: 0px auto;
cursor: pointer;
}
.main {
padding-left: 1rem;
padding-right: 1rem;
max-width: 1200px;
margin: 0px auto;
font-family: Arial, sans-serif;
padding-bottom: 2rem;
}
.back-button {
font-size: 1rem;
background-color: transparent;
color: #4b5563;
text-decoration: none;
display: inline-block;
margin: 1.5rem 0rem;
cursor: pointer;
border: none;
}
.experience-card {
background-color: #fff;
border-radius: 12px;
box-shadow: 0 4px 6px 1px rgba(0, 0, 0, 0.08);
overflow: hidden;
padding: 0px 0px 10px 0px;
}
.experience-image {
position: relative;
overflow: hidden;
}
.experience-image img {
width: 100%;
height: 400px;
object-fit: cover;
display: block;
}
.experience-header {
position: absolute;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.6);
/* fondo semi-transparente */
color: #fff;
padding: 15px;
width: 100%;
box-sizing: border-box;
}
.experience-header h1 {
margin: 0;
font-size: 2.25rem;
}
.experience-header p {
margin: 5px 0 0;
font-size: 1.125rem;
}
.experience-body {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 5px 20px
}
.experience-details,
.experience-plans {
flex: 1 1 48%;
line-height: 1.5rem;
}
.experience-plans-title {
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 0px;
color: #333;
}
.experience-plans-subtitle {
font-size: 0.9rem;
margin-bottom: 10px;
margin-top: 0px;
color: #4b5563;
}
.experience-section-title {
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 10px;
color: #333;
}
.details-list,
.includes-list,
.plan-list {
list-style: none;
padding: 0;
margin: 0;
}
.details-list li,
.includes-list li,
.plan-list li {
margin-bottom: 8px;
padding-left: 20px;
position: relative;
color: #444;
font-size: 14px;
}
.details-list li::before,
.includes-list li::before,
.plan-list li::before {
content: "✔";
position: absolute;
left: 0;
color: <?php echo $corporateIdentity->btnBox_color ?>;
}
.plan-box {
border: 1px solid #ddd;
border-radius: 6px;
padding: 15px;
margin-bottom: 20px;
cursor: pointer;
transition: border-color 0.3s, box-shadow 0.3s;
user-select: none;
-webkit-tap-highlight-color: transparent;
outline: none;
}
.plan-box:focus,
.plan-box:active {
background-color: transparent !important;
outline: none;
box-shadow: none;
}
.plan-box.selected {
border-color: <?php echo $corporateIdentity->btnBox_color ?>;
box-shadow: 0 1px 2px <?php echo $corporateIdentity->btnBox_color ?>;
background-color: #eef2ff;
}
.plan-box.disabled {
opacity: 0.4;
pointer-events: none;
cursor: not-allowed;
}
.plan-header {
display: flex;
flex-flow: row;
align-items: flex-start;
justify-content: space-between;
}
.plan-header h3 {
margin: 0;
}
.plan-header p {
margin: 0;
color: #6b7280;
font-size: .875rem;
}
.plan-details {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: flex-start;
}
.plan-price {
font-size: 1.5rem;
font-weight: bold;
}
.plan-total {
display: flex;
flex-flow: row;
align-items: center;
justify-content: space-between;
padding-top: 25px;
}
.plan-total h4 {
margin: 0;
}
.plan-total-price {
font-size: 1.5rem;
color: <?php echo $corporateIdentity->btnBox_color ?>;
font-weight: bold;
}
.plan-quantity {
display: flex;
flex-flow: row;
align-items: center;
justify-content: space-between;
padding: 15px 0px;
}
.plan-quantity h4 {
margin: 0;
}
.plan-total,
.plan-quantity {
display: none;
}
.plan-box.selected .plan-total,
.plan-box.selected .plan-quantity {
display: flex;
flex-flow: row;
align-items: center;
justify-content: space-between;
padding-top: 15px;
}
.quantity-wrapper {
display: inline-flex;
border: 1px solid #d1d5db;
border-radius: 0.375rem;
overflow: hidden;
background-color: #fff;
}
.quantity-btn {
padding: 0.5rem 0.75rem;
background-color: white;
border: none;
font-size: 1.25rem;
font-weight: 500;
cursor: pointer;
color: #111827;
}
.quantity-btn:hover {
background-color: #f3f4f6;
}
.quantity-input {
width: 2.5rem;
text-align: center;
border: 1px solid #e5e7eb;
font-size: 1rem;
font-weight: 500;
color: #111827;
background-color: white;
}
.register-btn {
display: block;
width: 100%;
padding: 12px;
background-color: #ccc;
color: #333;
border: none;
border-radius: 6px;
text-align: center;
cursor: not-allowed;
font-size: 16px;
margin-top: 10px;
}
.register-btn:enabled {
background-color: <?php echo $corporateIdentity->btnBox_color ?>;
color: #fff;
cursor: pointer;
}
.info-item {
display: flex;
flex-wrap: nowrap;
word-wrap: break-word;
overflow-wrap: anywhere;
white-space: normal;
color: #4b5563;
gap: 0.5rem;
line-height: 2.5rem;
align-items: center;
}
</style>