/* * Property Media Group, LLC — Rebrand CSS v1 * Basada en colores REALES del logo: * * Logo Azul Oscuro: #283868 * Logo Azul Medio: #3080b8 * Logo Naranja: #f08820 * * Paleta: * Primary (navy): #1a2847 (azul profundo, base del logo) * Secondary (blue): #2d5fa6 (azul medio del logo) * Accent (amber): #f08820 (naranja del logo — CTAs, highlights) * Accent dark: #c96e10 (hover del naranja) * * INSTRUCCIONES: * - Cargado DESPUÉS de style.css en frontend.blade.php * - Google Fonts: Plus Jakarta Sans + Fraunces en el * ============================================================ */ /* ============================================================ 1. VARIABLES DE COLOR ============================================================ */ :root { --dt-navy: #1a2847; --dt-navy-deep: #111d35; --dt-blue: #2d5fa6; --dt-amber: #f08820; --dt-amber-dk: #c96e10; --dt-amber-lt: rgba(240,136,32,0.12); --bs-primary: #f08820; --bs-primary-rgb: 240, 136, 32; } /* ============================================================ 2. TIPOGRAFÍA ============================================================ */ body { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important; color: #1e293b !important; } h1, h2, h3, h4, .title, .display-1, .display-2, .display-3, .display-4, .display-6 { font-family: 'Fraunces', 'Georgia', serif !important; letter-spacing: -0.02em; } /* Preserve Font Awesome font-family when heading/display classes are mixed with icons */ .fa, .fas, .far, .fab, .fal, .fad { font-family: "Font Awesome 5 Free" !important; } .fab { font-family: "Font Awesome 5 Brands" !important; } .navbar, .btn, .header__nav .nav-link, .footer .subheader, .badge, label, small { font-family: 'Plus Jakarta Sans', sans-serif !important; } /* ============================================================ 3. HEADER / NAVBAR ============================================================ */ .header__container__top, .header .bg-light, .header__container__top.bg-light { background-color: var(--dt-navy-deep) !important; border-bottom: 1px solid rgba(240, 136, 32, 0.15) !important; } .header__container__top *, .header__top, .header__top a, .header__top span { color: rgba(220, 210, 195, 0.8) !important; } .header, .header .navbar, .header .navbar.bg-white, .header .navbar-light, .header .navbar-light.bg-white { background-color: var(--dt-navy) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='80'%3E%3Crect x='58' y='9' width='32' height='32' rx='5' fill='%233a5ea8' fill-opacity='0.20' transform='rotate(20 74 25)'/%3E%3Crect x='295' y='17' width='18' height='18' rx='3' fill='none' stroke='%233a5ea8' stroke-opacity='0.30' stroke-width='1.5' transform='rotate(-12 304 26)'/%3E%3Crect x='615' y='7' width='26' height='26' rx='4' fill='%233a5ea8' fill-opacity='0.14' transform='rotate(18 628 20)'/%3E%3Crect x='975' y='18' width='34' height='34' rx='5' fill='none' stroke='%233a5ea8' stroke-opacity='0.22' stroke-width='1.5' transform='rotate(-16 992 35)'/%3E%3Crect x='1255' y='7' width='22' height='22' rx='3' fill='%233a5ea8' fill-opacity='0.17' transform='rotate(14 1266 18)'/%3E%3C/svg%3E") !important; background-size: 1400px 80px !important; background-repeat: repeat-x !important; border-bottom: none !important; } .header { backdrop-filter: blur(12px) !important; border-bottom: 1px solid rgba(240, 136, 32, 0.12) !important; } .header.header--scrolled { box-shadow: 0 4px 30px rgba(10, 15, 35, 0.6) !important; background-color: rgba(26, 40, 71, 0.98) !important; } /* Nav links */ .header .nav-link, .navbar-light .navbar-nav .nav-link { color: rgba(235, 230, 220, 0.88) !important; font-weight: 500 !important; letter-spacing: 0.025em !important; font-size: 0.9rem !important; transition: color 0.2s ease !important; } .header .nav-link:hover, .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus { color: #f08820 !important; } /* Dropdown */ .dropdown-menu, .dropdown-menu-mega { background-color: var(--dt-navy) !important; border: 1px solid rgba(240, 136, 32, 0.15) !important; box-shadow: 0 8px 40px rgba(5, 10, 25, 0.45) !important; } .dropdown-item { color: rgba(225, 218, 205, 0.85) !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 0.9rem !important; transition: background 0.18s, color 0.18s !important; } .dropdown-item:hover, .dropdown-item:focus { background-color: rgba(240, 136, 32, 0.12) !important; color: #f08820 !important; } .dropdown-header { color: #f08820 !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-weight: 700 !important; font-size: 0.7rem !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; } .dropdown-divider { border-color: rgba(240, 136, 32, 0.12) !important; } .navbar-light .navbar-toggler { border-color: rgba(240, 136, 32, 0.4) !important; color: #f08820 !important; } /* ============================================================ 4. HERO SECTION ============================================================ */ .banner-section, .bg-dark-brand { background: linear-gradient(165deg, var(--dt-navy-deep) 0%, var(--dt-navy) 100%) !important; } /* ============================================================ 5. BOTONES — naranja del logo ============================================================ */ .btn-brand, .btn-brand:visited { background-color: #f08820 !important; border-color: #f08820 !important; color: #ffffff !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-weight: 700 !important; letter-spacing: 0.05em !important; border-radius: 6px !important; transition: background 0.22s, transform 0.15s, box-shadow 0.22s !important; box-shadow: 0 2px 14px rgba(240, 136, 32, 0.25) !important; } .btn-brand:hover, .btn-brand:focus, .btn-brand:active { background-color: #c96e10 !important; border-color: #c96e10 !important; color: #ffffff !important; transform: translateY(-1px) !important; box-shadow: 0 6px 22px rgba(240, 136, 32, 0.4) !important; } .btn-primary { background-color: #f08820 !important; border-color: #f08820 !important; color: #ffffff !important; font-weight: 700 !important; border-radius: 6px !important; transition: background 0.22s, transform 0.15s, box-shadow 0.22s !important; box-shadow: 0 2px 14px rgba(240, 136, 32, 0.25) !important; } .btn-primary:hover, .btn-primary:focus { background-color: #c96e10 !important; border-color: #c96e10 !important; transform: translateY(-1px) !important; } .btn-outline-primary { border-color: #f08820 !important; color: #f08820 !important; font-weight: 600 !important; border-radius: 6px !important; } .btn-outline-primary:hover { background-color: #f08820 !important; border-color: #f08820 !important; color: #ffffff !important; } .header .btn-brand { text-transform: uppercase !important; font-size: 0.82rem !important; letter-spacing: 0.08em !important; padding: 0.5rem 1.3rem !important; } /* ============================================================ 6. ACENTOS Y DECORADORES ============================================================ */ .brand-accent-bar { background-color: #f08820 !important; } .text-brand, .text-primary { color: #f08820 !important; } .subheader, .footer .subheader, [class*="subheader"] { color: #f08820 !important; letter-spacing: 0.12em !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-weight: 700 !important; } hr { border-color: rgba(240, 136, 32, 0.15) !important; } /* ============================================================ 7. CARDS ============================================================ */ .card { border-radius: 12px !important; border: 1px solid rgba(45, 95, 166, 0.1) !important; transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s !important; } .card:hover { transform: translateY(-4px) !important; box-shadow: 0 12px 40px rgba(26, 40, 71, 0.14) !important; border-color: rgba(240, 136, 32, 0.25) !important; } /* ============================================================ 8. BEFORE / AFTER SLIDER ============================================================ */ .ba-handle__circle { background: rgba(240, 136, 32, 0.95) !important; } .ba-thumb.active { border-color: #f08820 !important; } /* ============================================================ 9. FOOTER ============================================================ */ .footer { background-color: #0b1220 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='500'%3E%3Crect x='55' y='45' width='52' height='52' rx='8' fill='%235b7fc4' fill-opacity='0.13' transform='rotate(18 81 71)'/%3E%3Crect x='1250' y='55' width='68' height='68' rx='10' fill='%235b7fc4' fill-opacity='0.1' stroke='%235b7fc4' stroke-opacity='0.18' stroke-width='1.5' transform='rotate(-15 1284 89)'/%3E%3Crect x='1320' y='370' width='42' height='42' rx='6' fill='none' stroke='%235b7fc4' stroke-opacity='0.2' stroke-width='1.5' transform='rotate(20 1341 391)'/%3E%3Crect x='95' y='365' width='32' height='32' rx='5' fill='none' stroke='%235b7fc4' stroke-opacity='0.2' stroke-width='1.5' transform='rotate(-22 111 381)'/%3E%3Cg fill='%235b7fc4' fill-opacity='0.14'%3E%3Ccircle cx='200' cy='390' r='2.5'/%3E%3Ccircle cx='225' cy='390' r='2.5'/%3E%3Ccircle cx='250' cy='390' r='2.5'/%3E%3Ccircle cx='275' cy='390' r='2.5'/%3E%3Ccircle cx='300' cy='390' r='2.5'/%3E%3Ccircle cx='325' cy='390' r='2.5'/%3E%3Ccircle cx='350' cy='390' r='2.5'/%3E%3Ccircle cx='200' cy='415' r='2.5'/%3E%3Ccircle cx='225' cy='415' r='2.5'/%3E%3Ccircle cx='250' cy='415' r='2.5'/%3E%3Ccircle cx='275' cy='415' r='2.5'/%3E%3Ccircle cx='300' cy='415' r='2.5'/%3E%3Ccircle cx='325' cy='415' r='2.5'/%3E%3Ccircle cx='350' cy='415' r='2.5'/%3E%3Ccircle cx='200' cy='440' r='2.5'/%3E%3Ccircle cx='225' cy='440' r='2.5'/%3E%3Ccircle cx='250' cy='440' r='2.5'/%3E%3Ccircle cx='275' cy='440' r='2.5'/%3E%3Ccircle cx='300' cy='440' r='2.5'/%3E%3C/g%3E%3C/svg%3E") !important; background-size: 1400px 500px !important; background-repeat: no-repeat !important; background-position: center top !important; border-top: 1px solid rgba(240, 136, 32, 0.15) !important; } .footer a:hover { color: #f08820 !important; } .footer .subheader { color: #f08820 !important; } /* ============================================================ 10. FORMULARIOS ============================================================ */ .form-control:focus, .form-select:focus { border-color: #f08820 !important; box-shadow: 0 0 0 0.2rem rgba(240, 136, 32, 0.2) !important; } /* ============================================================ 11. BADGES ============================================================ */ .badge.bg-primary, .badge-primary { background-color: #f08820 !important; } /* ============================================================ 12. PROCESS SECTION ============================================================ */ .process-section { background-color: #f5f3ef !important; } /* ============================================================ 13. TRUST GRID SECTION — fondo navy, texto blanco ============================================================ */ .trust-grid-section, .trust-grid-section.bg-light { background-color: #1a2847 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='700'%3E%3Crect x='65' y='55' width='58' height='58' rx='9' fill='%233a5ea8' fill-opacity='0.20' transform='rotate(20 94 84)'/%3E%3Crect x='230' y='430' width='32' height='32' rx='5' fill='none' stroke='%233a5ea8' stroke-opacity='0.26' stroke-width='1.8' transform='rotate(-13 246 446)'/%3E%3Crect x='1160' y='40' width='74' height='74' rx='11' fill='%233a5ea8' fill-opacity='0.14' stroke='%233a5ea8' stroke-opacity='0.20' stroke-width='1.5' transform='rotate(16 1197 77)'/%3E%3Crect x='1295' y='460' width='44' height='44' rx='7' fill='none' stroke='%233a5ea8' stroke-opacity='0.22' stroke-width='1.8' transform='rotate(-20 1317 482)'/%3E%3Cpolygon points='700,45 825,170 788,365 612,365 575,170' fill='%233a5ea8' fill-opacity='0.04' stroke='%233a5ea8' stroke-opacity='0.07' stroke-width='1.2'/%3E%3Ccircle cx='28' cy='515' r='2.5' fill='%233a5ea8' fill-opacity='0.18'/%3E%3Ccircle cx='54' cy='515' r='2.5' fill='%233a5ea8' fill-opacity='0.18'/%3E%3Ccircle cx='80' cy='515' r='2.5' fill='%233a5ea8' fill-opacity='0.18'/%3E%3Ccircle cx='106' cy='515' r='2.5' fill='%233a5ea8' fill-opacity='0.18'/%3E%3Ccircle cx='132' cy='515' r='2.5' fill='%233a5ea8' fill-opacity='0.18'/%3E%3Ccircle cx='158' cy='515' r='2.5' fill='%233a5ea8' fill-opacity='0.18'/%3E%3Ccircle cx='184' cy='515' r='2.5' fill='%233a5ea8' fill-opacity='0.18'/%3E%3Ccircle cx='28' cy='541' r='2.5' fill='%233a5ea8' fill-opacity='0.18'/%3E%3Ccircle cx='54' cy='541' r='2.5' fill='%233a5ea8' fill-opacity='0.18'/%3E%3Ccircle cx='80' cy='541' r='2.5' fill='%233a5ea8' fill-opacity='0.18'/%3E%3Ccircle cx='106' cy='541' r='2.5' fill='%233a5ea8' fill-opacity='0.18'/%3E%3Ccircle cx='132' cy='541' r='2.5' fill='%233a5ea8' fill-opacity='0.18'/%3E%3Ccircle cx='158' cy='541' r='2.5' fill='%233a5ea8' fill-opacity='0.18'/%3E%3Ccircle cx='28' cy='567' r='2.5' fill='%233a5ea8' fill-opacity='0.18'/%3E%3Ccircle cx='54' cy='567' r='2.5' fill='%233a5ea8' fill-opacity='0.18'/%3E%3Ccircle cx='80' cy='567' r='2.5' fill='%233a5ea8' fill-opacity='0.18'/%3E%3Ccircle cx='106' cy='567' r='2.5' fill='%233a5ea8' fill-opacity='0.18'/%3E%3C/svg%3E"), linear-gradient(135deg, #111d35 0%, #1a2847 100%) !important; background-size: 1400px 700px, 100% 100% !important; background-repeat: no-repeat, no-repeat !important; background-position: center top, center !important; } .trust-grid-section .title, .trust-grid-section h2 { color: #ffffff !important; } .trust-grid-section .text-primary { color: #f08820 !important; } .trust-grid-section .text-decoration-underline { text-decoration-color: rgba(240, 136, 32, 0.5) !important; } .trust-grid-section .card { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(240, 136, 32, 0.15) !important; box-shadow: none !important; } .trust-grid-section .card:hover { background: rgba(240, 136, 32, 0.07) !important; border-color: rgba(240, 136, 32, 0.3) !important; transform: translateY(-4px) !important; } .trust-grid-section .card h3, .trust-grid-section .card .h5, .trust-grid-section .card .fw-bold { color: #ffffff !important; } .trust-grid-section .card p, .trust-grid-section .card p * { color: rgba(220, 213, 200, 0.85) !important; } .trust-grid-section .trust-icon { width: 72px !important; height: 72px !important; object-fit: contain !important; padding: 14px !important; border-radius: 50% !important; background: rgba(240, 136, 32, 0.1) !important; border: 1.5px solid rgba(240, 136, 32, 0.3) !important; box-shadow: 0 0 0 7px rgba(240, 136, 32, 0.05), 0 8px 24px rgba(240, 136, 32, 0.18) !important; transition: box-shadow 0.3s, transform 0.3s !important; } .trust-grid-section .card:hover .trust-icon { box-shadow: 0 0 0 10px rgba(240, 136, 32, 0.07), 0 12px 30px rgba(240, 136, 32, 0.3) !important; transform: scale(1.08) !important; } /* ============================================================ 14. EXPERIENCE / STATS — amber sobre navy ============================================================ */ .experience-counters-section { background-color: #1a2847 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='320'%3E%3Crect x='45' y='22' width='52' height='52' rx='8' fill='%233a5ea8' fill-opacity='0.22' transform='rotate(22 71 48)'/%3E%3Crect x='170' y='200' width='28' height='28' rx='5' fill='none' stroke='%233a5ea8' stroke-opacity='0.28' stroke-width='1.8' transform='rotate(-14 184 214)'/%3E%3Crect x='1240' y='15' width='66' height='66' rx='10' fill='%233a5ea8' fill-opacity='0.16' transform='rotate(16 1273 48)'/%3E%3Crect x='1330' y='220' width='38' height='38' rx='6' fill='none' stroke='%233a5ea8' stroke-opacity='0.24' stroke-width='1.8' transform='rotate(-20 1349 239)'/%3E%3C/svg%3E"), linear-gradient(135deg, #111d35 0%, #1a2847 100%) !important; background-size: 1400px 320px, 100% 100% !important; background-repeat: no-repeat, no-repeat !important; background-position: center center, center !important; } .experience-counters-section h2, .experience-counters-section .display-6, .experience-counters-section .text-dark { color: #ffffff !important; } .experience-counters-section h4, .experience-counters-section .h1, .experience-counters-section .fw-bolder, .experience-counters-section .counter, .experience-counters-section span.counter { color: #f08820 !important; font-family: 'Fraunces', Georgia, serif !important; text-shadow: 0 2px 20px rgba(240, 136, 32, 0.2); } .experience-counters-section .counter-label, .experience-counters-section p, .experience-counters-section .text-muted, .experience-counters-section .text-uppercase { color: rgba(215, 205, 190, 0.75) !important; } .experience-counters-section i.fas, .experience-counters-section i.far { color: #f08820 !important; font-size: 1.6rem !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 60px !important; height: 60px !important; border-radius: 50% !important; background: rgba(240, 136, 32, 0.12) !important; border: 1.5px solid rgba(240, 136, 32, 0.35) !important; box-shadow: 0 0 0 6px rgba(240, 136, 32, 0.05), 0 6px 20px rgba(240, 136, 32, 0.2) !important; transition: box-shadow 0.3s, transform 0.3s !important; } .experience-counters-section .col-md-4:hover i.fas, .experience-counters-section .col-md-4:hover i.far { box-shadow: 0 0 0 8px rgba(240, 136, 32, 0.08), 0 10px 28px rgba(240, 136, 32, 0.35) !important; transform: scale(1.08) !important; } /* ============================================================ 15. MOBILE RESPONSIVE ============================================================ */ /* Hamburger icon visible on dark navbar */ .header .navbar-toggler-icon { filter: invert(1) brightness(2); } /* Logo mobile sizing */ @media (max-width: 576px) { .navbar-brand { max-width: 120px !important; } .navbar-brand img { height: 36px !important; } } /* Chat widget mobile */ @media (max-width: 400px) { #chat-widget-panel { width: calc(100vw - 48px) !important; right: -12px !important; } } /* ============================================================ 16. RESPONSIVE MEDIA SYSTEM ============================================================ */ main img, .offcanvas img, .modal img { max-width: 100%; } .media-frame { position: relative; overflow: hidden; } .media-frame--card { aspect-ratio: 2 / 1; } .media-frame--hero { aspect-ratio: 16 / 9; max-height: min(60vh, 500px); } .media-frame--hero .media-cover { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .media-cover { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .industry-hero-slide { min-height: 500px; } .industry-hero-overlay { min-height: 500px; background: rgba(0, 0, 0, 0.45); } .media-avatar { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; } .product-card__img { height: clamp(180px, 22vw, 240px) !important; } .logotype-item { height: clamp(52px, 7vw, 72px); } .integration-item { height: clamp(44px, 6vw, 64px); } .testimonial-avatar { width: clamp(120px, 18vw, 180px) !important; height: clamp(120px, 18vw, 180px) !important; } @media (max-width: 991.98px) { .media-frame--card { aspect-ratio: 16 / 10; } .industry-hero-slide, .industry-hero-overlay { min-height: 440px; } .banner-section { height: 560px; } .banner-section .row { height: 560px; } } @media (max-width: 767.98px) { .media-frame--card { aspect-ratio: 4 / 3; } .media-frame--hero { aspect-ratio: 4 / 3; max-height: 340px; } .industry-hero-slide, .industry-hero-overlay { min-height: 340px; } .slider-nav-btn { width: 40px; height: 40px; } }