/* ============================================================ SETCOLOMBIA · Variantes estéticas Aplica con ============================================================ */ /* ---------- CLARO (default) --------------------------------- Blanco/gris claro dominante. Hero oscuro como ancla. El amarillo se reserva para acentos y CTAs. ------------------------------------------------------------- */ .theme-claro { --site-bg: #FFFFFF; --site-fg: var(--gray-900); --section-alt-bg: var(--gray-50); --card-bg: #FFFFFF; --card-border: var(--gray-200); --card-fg: var(--gray-900); --card-fg-muted: var(--gray-600); --nav-bg: rgba(255,255,255,0.88); --nav-border: var(--gray-200); --nav-fg: var(--gray-600); --nav-fg-active: var(--gray-900); --hero-bg: var(--gray-900); --hero-fg: #fff; --hero-glow: rgba(234,182,49,0.32); --footer-bg: var(--gray-900); --footer-fg: rgba(255,255,255,0.65); --footer-fg-strong: #fff; --section-divider-bg: var(--gray-900); --form-input-bg: #fff; --form-input-border: var(--gray-200); } /* ---------- OSCURO ----------------------------------------- Mood industrial. Mayoría de secciones en gris-900. Una sección "break" clara para respirar. Amarillo más prominente, especialmente en tipografía. ------------------------------------------------------------- */ .theme-oscuro { --site-bg: var(--gray-900); --site-fg: #fff; --section-alt-bg: #121212; --card-bg: #1F2123; --card-border: rgba(255,255,255,0.08); --card-fg: #fff; --card-fg-muted: rgba(255,255,255,0.65); --nav-bg: rgba(22,23,24,0.85); --nav-border: rgba(255,255,255,0.10); --nav-fg: rgba(255,255,255,0.65); --nav-fg-active: #fff; --hero-bg: #0A0B0C; --hero-fg: #fff; --hero-glow: rgba(234,182,49,0.42); --footer-bg: #0A0B0C; --footer-fg: rgba(255,255,255,0.6); --footer-fg-strong: #fff; --section-divider-bg: var(--gray-50); --form-input-bg: rgba(255,255,255,0.04); --form-input-border: rgba(255,255,255,0.12); color-scheme: dark; } .theme-oscuro ::selection { background: var(--set-yellow); color: var(--gray-900); } .theme-oscuro .eyebrow { color: rgba(255,255,255,0.55); } .theme-oscuro .marquee { background: var(--gray-900); border-color: rgba(255,255,255,0.08); } .theme-oscuro .marquee span { color: rgba(255,255,255,0.55); } .theme-oscuro .service__icon { background: rgba(234,182,49,0.10); color: var(--set-yellow); } .theme-oscuro .info-card__icon { background: rgba(234,182,49,0.10); color: var(--set-yellow); } .theme-oscuro .service__tag, .theme-oscuro .service__num, .theme-oscuro .product-tab .num { color: rgba(255,255,255,0.45); } .theme-oscuro .product-tab { color: rgba(255,255,255,0.45); } .theme-oscuro .product-tab:hover, .theme-oscuro .product-tab.is-active { color: #fff; } .theme-oscuro .product-tabs { border-left-color: rgba(255,255,255,0.10); } .theme-oscuro .product-panel__features { border-color: rgba(255,255,255,0.08); background: rgba(255,255,255,0.08); } .theme-oscuro .chip { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.10); color: rgba(255,255,255,0.7); } .theme-oscuro .values { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.08); } .theme-oscuro .testimonial__avatar { background: rgba(255,255,255,0.08); color: #fff; } .theme-oscuro .testimonial__who { border-top-color: rgba(255,255,255,0.08); } .theme-oscuro .map-card { background: #000; } .theme-oscuro .btn--ghost { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.30); } .theme-oscuro .btn--ghost:hover { box-shadow: inset 0 0 0 1.5px #fff; } .theme-oscuro .btn--dark { background: #fff; color: var(--gray-900); } .theme-oscuro .btn--dark:hover { background: var(--gray-200); } /* In the divider-band the colors invert (light bg on a dark page) */ .theme-oscuro .divider-band { color: var(--gray-900); } .theme-oscuro .divider-band__title { color: var(--gray-900); } .theme-oscuro .divider-band__title em { color: var(--gray-700); } .theme-oscuro .divider-band__n { color: var(--gray-900); } .theme-oscuro .divider-band__l { color: var(--gray-600); } .theme-oscuro .divider-band__cell { border-top-color: var(--gray-900); } .theme-oscuro .divider-band__glow { background: radial-gradient(circle, rgba(234,182,49,0.30), transparent 60%); } .theme-oscuro .field input, .theme-oscuro .field select, .theme-oscuro .field textarea { color: #fff; } .theme-oscuro .field input::placeholder, .theme-oscuro .field textarea::placeholder { color: rgba(255,255,255,0.35); } /* ---------- AMARILLO --------------------------------------- Más energético. Hero amarillo pleno, secciones intercaladas en yellow-50. Amarillo como protagonista, no acento. ------------------------------------------------------------- */ .theme-amarillo { --site-bg: #FFFDF5; --site-fg: var(--gray-900); --section-alt-bg: var(--yellow-50); --card-bg: #FFFFFF; --card-border: #F0E4C2; --card-fg: var(--gray-900); --card-fg-muted: var(--gray-700); --nav-bg: rgba(255,253,245,0.90); --nav-border: #F0E4C2; --nav-fg: var(--gray-700); --nav-fg-active: var(--gray-900); --hero-bg: var(--set-yellow); --hero-fg: var(--gray-900); --hero-glow: rgba(255,255,255,0.40); --footer-bg: var(--gray-900); --footer-fg: rgba(255,255,255,0.65); --footer-fg-strong: #fff; --section-divider-bg: var(--gray-900); --form-input-bg: #fff; --form-input-border: #F0E4C2; } /* Hero in amarillo: yellow background with dark text & dark CTA */ .theme-amarillo .hero__title { color: var(--gray-900); } .theme-amarillo .hero__title em { color: #fff; } .theme-amarillo .hero__lead { color: rgba(26,26,26,0.78); } .theme-amarillo .hero__eyebrow { color: var(--gray-900); } .theme-amarillo .hero__eyebrow::before { background: var(--gray-900); } .theme-amarillo .hero__glow { background: radial-gradient(circle, rgba(255,255,255,0.45), transparent 60%); } .theme-amarillo .hero__grid { background-image: linear-gradient(rgba(26,26,26,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(26,26,26,0.06) 1px, transparent 1px); } .theme-amarillo .hero__card { background: rgba(26,26,26,0.06); border-color: rgba(26,26,26,0.12); } .theme-amarillo .hero__card-title { color: rgba(26,26,26,0.65); } .theme-amarillo .hero__card-stat { color: var(--gray-900); } .theme-amarillo .hero__card-stat span { color: #fff; } .theme-amarillo .hero__card-label { color: rgba(26,26,26,0.65); } .theme-amarillo .hero__wave { border-top-color: rgba(26,26,26,0.10); } .theme-amarillo .hero__wave i { background: linear-gradient(180deg, var(--gray-900), rgba(26,26,26,0.5)); } .theme-amarillo .hero__card-dot { background: var(--gray-900); } .theme-amarillo .hero__metrics { border-top-color: rgba(26,26,26,0.12); } .theme-amarillo .hero__metric-n { color: var(--gray-900); } .theme-amarillo .hero__metric-l { color: rgba(26,26,26,0.7); } .theme-amarillo .hero__ctas .btn--primary { background: var(--gray-900); color: #fff; } .theme-amarillo .hero__ctas .btn--primary:hover { background: #000; } .theme-amarillo .hero__ctas .btn--ghost-on-dark { color: var(--gray-900); box-shadow: inset 0 0 0 1.5px rgba(26,26,26,0.35); } .theme-amarillo .hero__ctas .btn--ghost-on-dark:hover { box-shadow: inset 0 0 0 1.5px var(--gray-900); } /* alt section is yellow-50 */ .theme-amarillo .service__icon { background: var(--gray-900); color: var(--set-yellow); } .theme-amarillo .info-card__icon { background: var(--gray-900); color: var(--set-yellow); } .theme-amarillo .chip { background: #FFFEFA; border-color: #F0E4C2; }