.universitas-product {
--uni-primary: var(--uni-blue-700, #006992);
--uni-primary-dark: var(--uni-blue-900, #08467f);
--uni-accent: var(--uni-lime-500, #c2d500);
--uni-accent-hover: var(--uni-lime-600, #b8be14);
--uni-text: var(--uni-dark, #3c3c3b);
--uni-text-muted: var(--uni-text-muted, #636362);
--uni-bg: var(--uni-bg, #ffffff);
--uni-surface: var(--uni-surface, #f8f9fb);
--uni-surface-light: var(--uni-surface-light, #fbfbfb);
--uni-radius: var(--uni-radius-8, 8px);
--uni-radius-lg: var(--uni-radius-16, 16px);
--uni-radius-xl: var(--uni-radius-24, 24px);
--uni-shadow: 0 4px 24px rgba(8, 70, 127, 0.08);
--uni-container: 1200px;
font-family: var(--uni-font-body, 'Open Sans', sans-serif);
color: var(--uni-text);
background: var(--uni-bg);
line-height: 1.5;
}
.universitas-product *,
.universitas-product *::before,
.universitas-product *::after {
box-sizing: border-box;
}
.universitas-product .universitas-container {
width: min(100% - 2rem, var(--uni-container));
margin-inline: auto;
padding-block: 2rem;
} .universitas-product .universitas-hero {
background: var(--uni-bg);
}
.universitas-product .universitas-hero .universitas-container {
display: flex;
flex-direction: column;
gap: 2rem;
}
.universitas-product .universitas-hero__content {
display: flex;
flex-direction: column;
gap: 1rem;
}
.universitas-product .universitas-hero__badges {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.universitas-product .universitas-badge {
display: inline-flex;
align-items: center;
padding: 0.35rem 0.75rem;
border-radius: 100px;
font-family: var(--uni-font-display, 'Montserrat', sans-serif);
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
line-height: 1;
}
.universitas-product .universitas-badge--lime {
background: var(--uni-accent);
color: var(--uni-primary-dark);
}
.universitas-product .universitas-badge--outline {
background: transparent;
color: var(--uni-primary);
border: 1.5px solid var(--uni-primary);
}
.universitas-product .universitas-badge--blue {
background: var(--uni-primary);
color: #fff;
}
.universitas-product .universitas-badge--dark {
background: var(--uni-text);
color: #fff;
}
.universitas-product .universitas-badge--soft {
background: var(--uni-blue-100);
color: var(--uni-primary);
}
.universitas-product .product_title,
.universitas-product h1.product_title {
font-family: var(--uni-font-body, 'Open Sans', sans-serif);
font-size: clamp(2.25rem, 6vw, 3.5rem);
font-weight: 700;
color: var(--uni-text);
line-height: 1.1;
margin: 0;
}
.universitas-product .universitas-title__main {
color: var(--uni-text);
}
.universitas-product .universitas-title__highlight {
color: var(--uni-accent);
}
.universitas-product .universitas-hero__subtitle {
font-family: var(--uni-font-body, 'Open Sans', sans-serif);
font-size: 1.125rem;
font-weight: 700;
color: var(--uni-text);
margin: 0;
}
.universitas-product .universitas-hero__description,
.universitas-product .woocommerce-product-details__short-description p {
font-size: 0.9375rem;
color: var(--uni-text-muted);
line-height: 1.6;
margin: 0;
}
.universitas-product .universitas-meta {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 0.5rem;
}
.universitas-product .universitas-meta__item {
background: var(--uni-surface-light);
color: var(--uni-text);
padding: 0.5rem 0.75rem;
border-radius: var(--uni-radius);
font-family: var(--uni-font-display, 'Montserrat', sans-serif);
font-size: 0.8125rem;
font-weight: 500;
}
.universitas-product .universitas-hero__media {
position: relative;
border-radius: var(--uni-radius-lg);
overflow: hidden;
background: var(--uni-surface-light);
}
.universitas-product .universitas-hero__media .woocommerce-product-gallery {
margin: 0;
opacity: 1 !important;
}
.universitas-product .universitas-hero__media img {
width: 100%;
height: auto;
object-fit: cover;
display: block;
}
.universitas-product .universitas-hero__media-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.25rem;
color: #fff;
text-align: center;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
pointer-events: none;
padding: 1rem;
}
.universitas-product .universitas-hero__media-overlay span {
font-size: 1.25rem;
font-weight: 600;
}
.universitas-product .universitas-hero__media-overlay strong {
font-size: clamp(2rem, 7vw, 3.5rem);
font-weight: 700;
line-height: 1;
}
.universitas-product .universitas-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 64px;
height: 64px;
border-radius: 50%;
background: #fff;
color: var(--uni-primary-dark);
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.universitas-product .universitas-play::after {
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 10px 18px;
border-color: transparent transparent transparent currentColor;
margin-left: 4px;
} .universitas-product .universitas-intro {
background: var(--uni-bg);
}
.universitas-product .universitas-intro .universitas-container {
display: flex;
flex-direction: column;
gap: 1rem;
}
.universitas-product .universitas-intro__eyebrow {
font-family: var(--uni-font-body, 'Open Sans', sans-serif);
font-size: 0.875rem;
font-weight: 600;
color: var(--uni-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.universitas-product .universitas-intro__title {
font-family: var(--uni-font-body, 'Open Sans', sans-serif);
font-size: clamp(1.75rem, 5vw, 2.25rem);
font-weight: 700;
color: var(--uni-text);
line-height: 1.2;
margin: 0;
}
.universitas-product .universitas-intro__text {
font-size: 1rem;
color: var(--uni-text-muted);
line-height: 1.6;
margin: 0;
}
.universitas-product .universitas-intro__text strong {
color: var(--uni-text);
font-weight: 700;
}
.universitas-product .universitas-intro__lead {
font-size: 1.125rem;
font-weight: 700;
color: var(--uni-text);
margin: 0;
}
.universitas-product .universitas-intro__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
margin-top: 0.5rem;
}
.universitas-product .universitas-button--primary {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.875rem 1.5rem;
border-radius: 100px;
background: var(--uni-primary-dark);
color: #fff;
text-decoration: none;
font-family: var(--uni-font-display, 'Montserrat', sans-serif);
font-weight: 600;
transition: background 0.2s ease, opacity 0.2s ease;
}
.universitas-product .universitas-button--primary:hover {
background: var(--uni-primary);
} .universitas-product .universitas-hero__pricing {
background: #fff;
border-radius: var(--uni-radius-lg);
box-shadow: var(--uni-shadow);
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
@media (min-width: 992px) {
.universitas-product .universitas-hero__pricing {
grid-column: 2;
grid-row: 1 / span 2;
}
}
.universitas-product .universitas-hero__plan-label {
font-size: 0.875rem;
font-weight: 600;
color: var(--uni-primary);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.universitas-product .universitas-price-card {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.universitas-product .universitas-price-card__header {
display: flex;
justify-content: space-between;
font-family: var(--uni-font-display, 'Montserrat', sans-serif);
font-size: 0.75rem;
font-weight: 500;
color: var(--uni-text-muted);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.universitas-product .universitas-price-card__plan {
font-family: var(--uni-font-display, 'Montserrat', sans-serif);
font-size: clamp(2.5rem, 6vw, 3.5rem);
font-weight: 800;
color: var(--uni-primary-dark);
line-height: 1;
}
.universitas-product .universitas-price-card__price {
font-family: var(--uni-font-display, 'Montserrat', sans-serif);
font-size: 1.25rem;
font-weight: 500;
color: var(--uni-text);
display: flex;
align-items: baseline;
gap: 0.25rem;
flex-wrap: wrap;
}
.universitas-product .universitas-price-card__from {
font-weight: 600;
color: var(--uni-text-muted);
}
.universitas-product .universitas-price-card__period {
color: var(--uni-text-muted);
font-size: 1rem;
}
.universitas-product .universitas-price-card__installments {
font-family: var(--uni-font-display, 'Montserrat', sans-serif);
font-size: 1rem;
font-weight: 400;
color: var(--uni-text-muted);
}
.universitas-product .universitas-price-card .cart {
margin: 0;
}
.universitas-product .universitas-price-card .single_add_to_cart_button,
.universitas-product .universitas-price-card button[type="submit"],
.universitas-product .universitas-price-card .button {
width: 100%;
padding: 1rem 1.5rem !important;
border-radius: var(--uni-radius) !important;
font-family: var(--uni-font-display, 'Montserrat', sans-serif) !important;
font-size: 0.9375rem !important;
font-weight: 600 !important;
border: none !important;
cursor: pointer !important;
background: var(--uni-accent) !important;
color: var(--uni-primary-dark) !important;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.universitas-product .universitas-price-card .single_add_to_cart_button:hover,
.universitas-product .universitas-price-card button[type="submit"]:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(194, 213, 0, 0.35);
}
.universitas-product .universitas-price-card__link {
font-family: var(--uni-font-display, 'Montserrat', sans-serif);
font-size: 0.8125rem;
font-weight: 500;
color: var(--uni-primary);
text-decoration: underline;
text-align: center;
} .universitas-product .universitas-details {
background: var(--uni-bg);
}
.universitas-product .universitas-details .universitas-container {
display: flex;
flex-direction: column;
gap: 2rem;
}
@media (min-width: 768px) {
.universitas-product .universitas-details .universitas-container {
flex-direction: row;
}
}
.universitas-product .universitas-details__info {
flex: 1.5;
}
.universitas-product .universitas-details__cta {
flex: 1;
display: flex;
flex-direction: column;
gap: 1rem;
}
.universitas-product .universitas-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.5rem;
border-radius: var(--uni-radius);
text-decoration: none;
font-family: var(--uni-font-display, 'Montserrat', sans-serif);
font-weight: 600;
transition: opacity 0.2s ease;
}
.universitas-product .universitas-button--secondary {
background: transparent;
color: var(--uni-primary);
border: 2px solid var(--uni-primary);
}
.universitas-product .universitas-button--secondary:hover {
background: var(--uni-primary);
color: #fff;
}
.universitas-product .universitas-contact {
background: var(--uni-surface);
padding: 1.5rem;
border-radius: var(--uni-radius-lg);
}
.universitas-product .universitas-contact h3 {
font-size: 1.125rem;
font-weight: 700;
color: var(--uni-primary-dark);
margin: 0 0 1rem;
}
.universitas-product .universitas-contact p,
.universitas-product .universitas-contact a {
font-size: 0.9375rem;
color: var(--uni-text);
margin: 0.25rem 0;
text-decoration: none;
} .universitas-product .universitas-referral {
background: var(--uni-surface);
}
.universitas-product .universitas-referral__card {
background: #fff;
border-radius: var(--uni-radius-lg);
box-shadow: var(--uni-shadow);
padding: 2rem;
max-width: 800px;
margin-inline: auto;
text-align: center;
}
.universitas-product .universitas-referral__label {
display: inline-block;
font-family: var(--uni-font-display, 'Montserrat', sans-serif);
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--uni-primary);
margin-bottom: 0.75rem;
}
.universitas-product .universitas-referral h2 {
font-family: var(--uni-font-body, 'Open Sans', sans-serif);
font-size: 1.75rem;
font-weight: 700;
color: var(--uni-primary-dark);
margin: 0 0 1rem;
line-height: 1.2;
}
.universitas-product .universitas-referral p {
color: var(--uni-text-muted);
margin: 0 0 1.5rem;
line-height: 1.6;
}
.universitas-product .universitas-referral__email {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
flex-wrap: wrap;
font-size: 0.9375rem;
}
.universitas-product .universitas-referral__email a {
color: var(--uni-primary);
font-weight: 600;
text-decoration: none;
} .universitas-product .universitas-faq {
background: var(--uni-bg);
}
.universitas-product .universitas-faq .universitas-container {
max-width: 900px;
}
.universitas-product .universitas-faq h2 {
font-family: var(--uni-font-body, 'Open Sans', sans-serif);
font-size: 1.75rem;
font-weight: 700;
color: var(--uni-primary-dark);
text-align: center;
margin: 0 0 0.5rem;
}
.universitas-product .universitas-faq__intro {
text-align: center;
color: var(--uni-text-muted);
margin: 0 0 2rem;
}
.universitas-product .universitas-faq__list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.universitas-product .universitas-faq__item {
background: var(--uni-surface-light);
border-radius: var(--uni-radius);
overflow: hidden;
}
.universitas-product .universitas-faq__question {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem 1.25rem;
font-family: var(--uni-font-body, 'Open Sans', sans-serif);
font-size: 1rem;
font-weight: 700;
color: var(--uni-primary-dark);
cursor: pointer;
list-style: none;
}
.universitas-product .universitas-faq__question::-webkit-details-marker {
display: none;
}
.universitas-product .universitas-faq__question::after {
content: '+';
font-size: 1.5rem;
color: var(--uni-primary);
line-height: 1;
}
.universitas-product .universitas-faq__item[open] .universitas-faq__question::after {
content: '−';
}
.universitas-product .universitas-faq__answer {
padding: 0 1.25rem 1.25rem;
color: var(--uni-text-muted);
font-size: 0.9375rem;
line-height: 1.6;
}
.universitas-product .universitas-faq__answer p {
margin: 0 0 0.75rem;
}
.universitas-product .universitas-faq__answer p:last-child {
margin-bottom: 0;
} .universitas-product .universitas-final-cta {
background: var(--uni-primary-dark);
color: #fff;
text-align: center;
}
.universitas-product .universitas-final-cta .universitas-container {
max-width: 800px;
}
.universitas-product .universitas-final-cta h2 {
font-family: var(--uni-font-body, 'Open Sans', sans-serif);
font-size: 1.75rem;
font-weight: 700;
margin: 0 0 1rem;
}
.universitas-product .universitas-final-cta p {
color: rgba(255, 255, 255, 0.85);
margin: 0 0 1.5rem;
line-height: 1.6;
}
.universitas-product .universitas-final-cta__actions {
display: flex;
flex-direction: column;
gap: 1rem;
justify-content: center;
align-items: center;
}
@media (min-width: 576px) {
.universitas-product .universitas-final-cta__actions {
flex-direction: row;
}
}
.universitas-product .universitas-final-cta .universitas-button--primary {
background: var(--uni-accent);
color: var(--uni-primary-dark);
}
.universitas-product .universitas-final-cta .universitas-button--secondary {
background: transparent;
color: #fff;
border-color: #fff;
}
.universitas-product .universitas-final-cta .universitas-button--secondary:hover {
background: #fff;
color: var(--uni-primary-dark);
} .universitas-product .universitas-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}