/* Fonts */ :root { --default-font: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --heading-font: "Questrial", sans-serif; --nav-font: "Noto Sans", sans-serif; --brand-primary: #005BFF; --brand-primary-strong: #244ECF; --brand-primary-soft: rgba(0, 91, 255, 0.14); --brand-primary-surface: #E1EEFB; --brand-attention: #FFAF30; --brand-attention-soft: rgba(255, 175, 48, 0.16); --brand-success: #5DC888; --brand-danger: #E43E66; --brand-surface: #FFFFFF; --brand-surface-muted: #EDF2F7; --brand-surface-soft: #F7FAFC; --brand-surface-raised: #F5F7FB; --brand-border: #E1EEFB; --brand-border-strong: #D7E4FF; --brand-sidebar-surface: #151E27; --brand-sidebar-border: #334155; --brand-sidebar-heading: #A0AEC0; --brand-sidebar-text: #F7FAFC; --brand-text: #2B2D33; --brand-text-strong: #001A34; --brand-text-muted: #4A5B6B; --brand-text-soft: #718096; --brand-code-bg: #0F172A; --brand-code-border: #334155; --brand-code-text: #E2E8F0; } /* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */ :root { --background-color: var(--brand-surface); /* Background color for the entire website, including individual sections */ --default-color: var(--brand-text); /* Default color used for the majority of the text content across the entire website */ --heading-color: var(--brand-text-strong); /* Color for headings, subheadings and title throughout the website */ --accent-color: var(--brand-primary); /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */ --surface-color: var(--brand-surface); /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */ --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */ } /* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */ :root { --nav-color: var(--brand-text); /* The default color of the main navmenu links */ --nav-hover-color: var(--brand-primary); /* Applied to main navmenu links when they are hovered over or active */ --nav-mobile-background-color: var(--brand-surface); /* Used as the background color for mobile navigation menu */ --nav-dropdown-background-color: var(--brand-surface); /* Used as the background color for dropdown items that appear when hovering over primary navigation items */ --nav-dropdown-color: var(--brand-text); /* Used for navigation links of the dropdown items in the navigation menu. */ --nav-dropdown-hover-color: var(--brand-primary); /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */ } /* Dark theme - mismo esquema que admin. Se aplica con clase .dark en . */ html.dark { --brand-primary: #005BFF; --brand-primary-strong: #3567E7; --brand-primary-soft: rgba(0, 91, 255, 0.28); --brand-primary-surface: #10284D; --brand-attention: #FFAF30; --brand-attention-soft: rgba(255, 175, 48, 0.24); --brand-success: #5DC888; --brand-danger: #E43E66; --brand-surface: #151E27; --brand-surface-muted: #1E293B; --brand-surface-soft: #0F172A; --brand-surface-raised: #1B2944; --brand-border: #334155; --brand-border-strong: #475569; --brand-sidebar-surface: #10284D; --brand-sidebar-border: rgba(120, 142, 182, 0.22); --brand-sidebar-heading: #CBD5E0; --brand-sidebar-text: #F1F5FF; --brand-text: #FFFFFF; --brand-text-strong: #F7FAFC; --brand-text-muted: #CBD5E0; --brand-text-soft: #A0AEC0; --brand-code-bg: #0F172A; --brand-code-border: #334155; --brand-code-text: #F1F5FF; --background-color: var(--brand-surface); --default-color: var(--brand-text); --heading-color: var(--brand-text-strong); --accent-color: var(--brand-primary); --surface-color: var(--brand-surface-muted); --contrast-color: #ffffff; --nav-color: #CDCCD0; --nav-hover-color: var(--brand-primary); --nav-mobile-background-color: var(--brand-surface); --nav-dropdown-background-color: var(--brand-surface-muted); --nav-dropdown-color: #CDCCD0; --nav-dropdown-hover-color: var(--brand-primary); } /* En modo oscuro, las secciones con .light-background usan el mismo fondo oscuro */ html.dark .light-background { --background-color: #25303B; --surface-color: var(--brand-surface-muted); } /* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */ .light-background { --background-color: #faf9fb; --surface-color: #ffffff; } .dark-background { --background-color: #060606; --default-color: #ffffff; --heading-color: #ffffff; --surface-color: #252525; --contrast-color: #ffffff; } /* Smooth scroll */ :root { scroll-behavior: smooth; } /*-------------------------------------------------------------- # General Styling & Shared Classes --------------------------------------------------------------*/ body { color: var(--default-color); background-color: var(--background-color); font-family: var(--default-font); } a { color: var(--accent-color); text-decoration: none; transition: 0.3s; } a:hover { color: color-mix(in srgb, var(--accent-color), transparent 25%); text-decoration: none; } h1, h2, h3, h4, h5, h6 { color: var(--heading-color); font-family: var(--heading-font); } /* PHP Email Form Messages ------------------------------*/ .php-email-form .error-message { display: none; background: #df1529; color: #ffffff; text-align: left; padding: 15px; margin-bottom: 24px; font-weight: 600; } .php-email-form .sent-message { display: none; color: #ffffff; background: #059652; text-align: center; padding: 15px; margin-bottom: 24px; font-weight: 600; } .php-email-form .loading { display: none; background: var(--surface-color); text-align: center; padding: 15px; margin-bottom: 24px; } .php-email-form .loading:before { content: ""; display: inline-block; border-radius: 50%; width: 24px; height: 24px; margin: 0 10px -6px 0; border: 3px solid var(--accent-color); border-top-color: var(--surface-color); animation: php-email-form-loading 1s linear infinite; } @keyframes php-email-form-loading { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /*-------------------------------------------------------------- # Global Header --------------------------------------------------------------*/ .header { color: var(--default-color); background-color: var(--background-color); padding: 8px 0; transition: all 0.5s; z-index: 997; } .header .header-container { background: var(--surface-color); border-radius: 50px; padding: 6px 18px; box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1); } .header .logo { line-height: 1; } .header .logo img { max-height: 50px; width: auto; margin-right: 0; } .header .logo h1 { font-size: 24px; margin: 0; padding-left: 5px; font-weight: 500; color: var(--heading-color); } .header .header-social-links { padding-right: 15px; } .header .header-social-links a { color: color-mix(in srgb, var(--default-color), transparent 40%); padding-left: 6px; display: inline-block; transition: 0.3s; font-size: 16px; } .header .header-social-links a:hover { color: var(--accent-color); } .header .header-social-links a i { line-height: 0px; } /* Botón cambio de tema (claro/oscuro) */ #bpay-theme-toggle.btn-icon-theme { color: var(--nav-color); background: transparent; transition: color 0.2s, background 0.2s; } #bpay-theme-toggle.btn-icon-theme:hover { color: var(--nav-hover-color); background: color-mix(in srgb, var(--nav-hover-color), transparent 90%); } #bpay-theme-toggle .bi { font-size: 1.25rem; } .header-language-toggle { color: var(--nav-color) !important; background: transparent !important; border: 0; display: inline-flex; align-items: center; gap: 0.35rem; transition: color 0.2s, background 0.2s; } .header-language-toggle:hover, .header-language-toggle:focus, .header-language-toggle[aria-expanded="true"] { color: var(--nav-hover-color) !important; background: color-mix(in srgb, var(--nav-hover-color), transparent 90%) !important; } .header-language-toggle .bi { color: inherit; } .header-language .dropdown-menu { color: var(--nav-dropdown-color); background: var(--nav-dropdown-background-color); border-color: color-mix(in srgb, var(--nav-dropdown-color), transparent 80%); } .header-language .dropdown-item { color: var(--nav-dropdown-color); } .header-language .dropdown-item:hover, .header-language .dropdown-item:focus { color: var(--nav-dropdown-hover-color); background: color-mix(in srgb, var(--nav-dropdown-hover-color), transparent 90%); } .header-language .dropdown-item.active { color: var(--contrast-color); background: var(--accent-color); } @media (max-width: 1200px) { .header { padding-top: 8px; padding-bottom: 8px; } .header .header-container { margin-left: 10px; margin-right: 10px; padding: 8px 15px; } .header .logo { order: 1; } .header .header-social-links { order: 2; } .header .navmenu { order: 3; } } /*-------------------------------------------------------------- # Navigation Menu --------------------------------------------------------------*/ /* Navmenu - Desktop */ @media (min-width: 1200px) { .navmenu { padding: 0; } .navmenu ul { margin: 0; padding: 0; display: flex; list-style: none; align-items: center; } .navmenu li { position: relative; } .navmenu a, .navmenu a:focus { color: var(--nav-color); padding: 8px 10px; font-size: 14px; font-family: var(--nav-font); font-weight: 400; display: flex; align-items: center; justify-content: space-between; white-space: nowrap; transition: 0.3s; } .navmenu a i, .navmenu a:focus i { font-size: 12px; line-height: 0; margin-left: 5px; transition: 0.3s; } .navmenu li:last-child a { padding-right: 0; } .navmenu li:hover>a, .navmenu .active, .navmenu .active:focus { color: var(--nav-hover-color); } .navmenu .dropdown ul { margin: 0; padding: 10px 0; background: var(--nav-dropdown-background-color); display: block; position: absolute; visibility: hidden; left: 14px; top: 130%; opacity: 0; transition: 0.3s; border-radius: 4px; z-index: 99; box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1); } .navmenu .dropdown ul li { min-width: 200px; } .navmenu .dropdown ul a { padding: 10px 20px; font-size: 15px; text-transform: none; color: var(--nav-dropdown-color); } .navmenu .dropdown ul a i { font-size: 12px; } .navmenu .dropdown ul a:hover, .navmenu .dropdown ul .active:hover, .navmenu .dropdown ul li:hover>a { color: var(--nav-dropdown-hover-color); } .navmenu .dropdown:hover>ul { opacity: 1; top: 100%; visibility: visible; } .navmenu .dropdown .dropdown ul { top: 0; left: -90%; visibility: hidden; } .navmenu .dropdown .dropdown:hover>ul { opacity: 1; top: 0; left: -100%; visibility: visible; } } /* Navmenu - Mobile */ @media (max-width: 1199px) { .mobile-nav-toggle { color: var(--nav-color); font-size: 28px; line-height: 0; margin-right: 10px; cursor: pointer; transition: color 0.3s; } .navmenu { padding: 0; z-index: 9997; } .navmenu ul { display: none; list-style: none; position: absolute; inset: 60px 20px 20px 20px; padding: 10px 0; margin: 0; border-radius: 6px; background-color: var(--nav-mobile-background-color); overflow-y: auto; transition: 0.3s; z-index: 9998; box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1); } .navmenu a, .navmenu a:focus { color: var(--nav-dropdown-color); padding: 10px 20px; font-family: var(--nav-font); font-size: 17px; font-weight: 500; display: flex; align-items: center; justify-content: space-between; white-space: nowrap; transition: 0.3s; } .navmenu a i, .navmenu a:focus i { font-size: 12px; line-height: 0; margin-left: 5px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: 0.3s; background-color: color-mix(in srgb, var(--accent-color), transparent 90%); } .navmenu a i:hover, .navmenu a:focus i:hover { background-color: var(--accent-color); color: var(--contrast-color); } .navmenu a:hover, .navmenu .active, .navmenu .active:focus { color: var(--nav-dropdown-hover-color); } .navmenu .active i, .navmenu .active:focus i { background-color: var(--accent-color); color: var(--contrast-color); transform: rotate(180deg); } .navmenu .dropdown ul { position: static; display: none; z-index: 99; padding: 10px 0; margin: 10px 20px; background-color: var(--nav-dropdown-background-color); border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%); box-shadow: none; transition: all 0.5s ease-in-out; } .navmenu .dropdown ul ul { background-color: rgba(33, 37, 41, 0.1); } .navmenu .dropdown>.dropdown-active { display: block; background-color: rgba(33, 37, 41, 0.03); } .mobile-nav-active { overflow: hidden; } .mobile-nav-active .mobile-nav-toggle { color: #fff; position: absolute; font-size: 32px; top: 15px; right: 15px; margin-right: 0; z-index: 9999; } .mobile-nav-active .navmenu { position: fixed; overflow: hidden; inset: 0; background: rgba(33, 37, 41, 0.8); transition: 0.3s; } .mobile-nav-active .navmenu>ul { display: block; } } /*-------------------------------------------------------------- # Global Footer --------------------------------------------------------------*/ .footer { color: var(--default-color); background-color: var(--background-color); font-size: 14px; padding: 40px 0; position: relative; box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05); } .footer .copyright p { margin-bottom: 0; } .footer .social-links { margin-top: 20px; } .footer .social-links a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%); font-size: 16px; color: color-mix(in srgb, var(--default-color), transparent 50%); margin: 0 5px; transition: 0.3s; } .footer .social-links a:hover { color: var(--accent-color); border-color: var(--accent-color); } .footer .credits { margin-top: 10px; font-size: 13px; text-align: center; } /*-------------------------------------------------------------- # Scroll Top Button --------------------------------------------------------------*/ .scroll-top { position: fixed; visibility: hidden; opacity: 0; right: 15px; bottom: -15px; z-index: 99999; background-color: var(--accent-color); width: 44px; height: 44px; border-radius: 50px; transition: all 0.4s; } .scroll-top i { font-size: 24px; color: var(--contrast-color); line-height: 0; } .scroll-top:hover { background-color: color-mix(in srgb, var(--accent-color), transparent 20%); color: var(--contrast-color); } .scroll-top.active { visibility: visible; opacity: 1; bottom: 15px; } /*-------------------------------------------------------------- # Disable aos animation delay on mobile devices --------------------------------------------------------------*/ @media screen and (max-width: 768px) { [data-aos-delay] { transition-delay: 0 !important; } } /*-------------------------------------------------------------- # Global Page Titles & Breadcrumbs --------------------------------------------------------------*/ .page-title { text-align: center; padding: 20px 0; } .page-title .breadcrumbs { margin-bottom: 1.5rem; } .page-title .breadcrumbs .breadcrumb { justify-content: center; margin: 0; padding: 0; background: none; } .page-title .breadcrumbs .breadcrumb .breadcrumb-item { font-size: 0.9rem; color: color-mix(in srgb, var(--default-color), transparent 30%); } .page-title .breadcrumbs .breadcrumb .breadcrumb-item.active { color: var(--accent-color); } .page-title .breadcrumbs .breadcrumb .breadcrumb-item a { color: inherit; text-decoration: none; transition: color 0.3s ease; } .page-title .breadcrumbs .breadcrumb .breadcrumb-item a:hover { color: var(--accent-color); } .page-title .breadcrumbs .breadcrumb .breadcrumb-item a i { font-size: 0.9rem; margin-right: 0.2rem; } .page-title .breadcrumbs .breadcrumb .breadcrumb-item+.breadcrumb-item::before { color: color-mix(in srgb, var(--default-color), transparent 50%); } .page-title .title-wrapper { max-width: 800px; margin: 0 auto; padding: 1rem 0; } .page-title .title-wrapper h1 { font-size: 2.5rem; margin-bottom: 1rem; font-weight: 700; color: var(--heading-color); } .page-title .title-wrapper p { font-size: 1.1rem; color: color-mix(in srgb, var(--default-color), transparent 20%); margin: 0; line-height: 1.6; } @media (max-width: 768px) { .page-title .title-wrapper h1 { font-size: 2rem; } .page-title .title-wrapper p { font-size: 1rem; } } @media (max-width: 576px) { .page-title .title-wrapper h1 { font-size: 1.75rem; } } /*-------------------------------------------------------------- # Global Sections --------------------------------------------------------------*/ section, .section { color: var(--default-color); background-color: var(--background-color); padding: 60px 0; scroll-margin-top: 90px; overflow: clip; } @media (max-width: 1199px) { section, .section { scroll-margin-top: 66px; } } /*-------------------------------------------------------------- # Global Section Titles --------------------------------------------------------------*/ .section-title { text-align: center; padding-bottom: 60px; position: relative; } .section-title h2 { font-size: 42px; font-weight: 700; margin-bottom: 10px; background: linear-gradient(120deg, var(--heading-color), var(--accent-color)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; position: relative; } .section-title .title-shape { width: 200px; height: 20px; margin: 0 auto; color: var(--accent-color); opacity: 0.5; } .section-title .title-shape svg { width: 100%; height: 100%; } .section-title p { margin: 15px auto 0; font-size: 16px; max-width: 700px; color: color-mix(in srgb, var(--default-color), transparent 25%); line-height: 1.8; } @media (max-width: 768px) { .section-title h2 { font-size: 32px; } .section-title .subtitle-wrapper .subtitle { font-size: 13px; } } /*-------------------------------------------------------------- # Hero Section --------------------------------------------------------------*/ .hero { padding: 80px 0; position: relative; overflow: hidden; } .hero .content h2 { font-size: 3.5rem; font-weight: 700; line-height: 1.2; margin-bottom: 1.5rem; } @media (max-width: 991px) { .hero .content h2 { font-size: 2.5rem; } } .hero .content .lead { font-size: 1.25rem; margin-bottom: 2rem; color: color-mix(in srgb, var(--default-color), transparent 20%); } .hero .cta-buttons { display: flex; gap: 1rem; margin-bottom: 3rem; } @media (max-width: 576px) { .hero .cta-buttons { flex-direction: column; } } .hero .cta-buttons .btn { padding: 0.8rem 2rem; font-size: 1rem; font-weight: 500; border-radius: 50px; transition: all 0.3s ease; } .hero .cta-buttons .btn.btn-primary { background-color: var(--accent-color); border-color: var(--accent-color); color: var(--contrast-color); } .hero .cta-buttons .btn.btn-primary:hover { background-color: color-mix(in srgb, var(--accent-color), transparent 15%); border-color: color-mix(in srgb, var(--accent-color), transparent 15%); transform: translateY(-2px); } .hero .cta-buttons .btn.btn-outline { border: 2px solid color-mix(in srgb, var(--accent-color), transparent 70%); color: var(--accent-color); background: transparent; } .hero .cta-buttons .btn.btn-outline:hover { background-color: var(--accent-color); color: var(--contrast-color); transform: translateY(-2px); } .hero .hero-stats { display: flex; gap: 3rem; margin-top: 2rem; } @media (max-width: 576px) { .hero .hero-stats { flex-direction: column; gap: 1.5rem; } } .hero .hero-stats .stat-item .stat-number { display: block; font-size: 2.5rem; font-weight: 700; color: var(--heading-color); line-height: 1; } .hero .hero-stats .stat-item .stat-label { font-size: 0.9rem; color: color-mix(in srgb, var(--default-color), transparent 30%); margin-top: 0.5rem; display: block; } .hero .hero-image { position: relative; padding: 2rem; } .hero .hero-image img { position: relative; z-index: 2; } .hero .hero-image .hero-app-image { width: 100%; height: auto; max-width: 100%; object-fit: contain; display: block; } .hero .hero-image .shape-1, .hero .hero-image .shape-2 { position: absolute; border-radius: 30% 70% 70% 30%/30% 30% 70% 70%; z-index: 1; } .hero .hero-image .shape-1 { width: 300px; height: 300px; background-color: color-mix(in srgb, var(--accent-color), transparent 85%); top: -20px; right: -20px; animation: morphShape 15s linear infinite; } .hero .hero-image .shape-2 { width: 200px; height: 200px; background-color: color-mix(in srgb, var(--heading-color), transparent 90%); bottom: -20px; left: -20px; animation: morphShape 20s linear infinite reverse; } @media (max-width: 991px) { .hero { text-align: center; padding: 60px 0; } .hero .cta-buttons { justify-content: center; } .hero .hero-stats { justify-content: center; } .hero .hero-image { margin-top: 3rem; } } @keyframes morphShape { 0% { border-radius: 30% 70% 70% 30%/30% 30% 70% 70%; } 25% { border-radius: 58% 42% 75% 25%/76% 46% 54% 24%; } 50% { border-radius: 50% 50% 33% 67%/55% 27% 73% 45%; } 75% { border-radius: 33% 67% 58% 42%/63% 68% 32% 37%; } 100% { border-radius: 30% 70% 70% 30%/30% 30% 70% 70%; } } /*-------------------------------------------------------------- # About Section --------------------------------------------------------------*/ .about .about-image { position: relative; } .about .about-image img { box-shadow: 0 0 30px rgba(0, 0, 0, 0.1); } .about .about-content { padding-left: 2rem; } @media (max-width: 991.98px) { .about .about-content { padding-left: 0; margin-top: 3rem; } } .about .about-content .subtitle { font-size: 0.875rem; font-weight: 600; letter-spacing: 2px; color: var(--accent-color); margin-bottom: 1rem; display: block; } .about .about-content h2 { font-size: 2rem; font-weight: 700; margin-bottom: 1.5rem; } .about .about-content .lead { font-size: 1.1rem; color: color-mix(in srgb, var(--default-color), transparent 25%); } .about .personal-info { margin-top: 2rem; padding: 2rem; background-color: var(--surface-color); border-radius: 1rem; box-shadow: 0 0 30px rgba(0, 0, 0, 0.05); } .about .personal-info .info-item { display: flex; flex-direction: column; gap: 0.5rem; } .about .personal-info .info-item .label { font-size: 0.875rem; color: color-mix(in srgb, var(--default-color), transparent 40%); } .about .personal-info .info-item .value { font-weight: 600; color: var(--heading-color); } .about .signature { display: flex; align-items: center; gap: 1.5rem; } .about .signature .signature-image { max-width: 150px; } .about .signature .signature-info h4 { font-size: 1.25rem; margin-bottom: 0.25rem; } .about .signature .signature-info p { font-size: 0.875rem; color: color-mix(in srgb, var(--default-color), transparent 40%); margin: 0; } /*-------------------------------------------------------------- # Skills Section --------------------------------------------------------------*/ .skills .skill-box { background-color: var(--surface-color); padding: 2rem; border-radius: 8px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.05); } .skills .skill-box h3 { font-size: 1.2rem; margin-bottom: 1rem; font-weight: 600; } .skills .skill-box p { font-size: 0.9rem; margin-bottom: 0.8rem; opacity: 0.6; } .skills .skill-box .progress { background-color: color-mix(in srgb, var(--accent-color), transparent 85%); border-radius: 50px; height: 8px; margin-top: 5px; overflow: hidden; } .skills .skill-box .progress .progress-bar { background-color: var(--accent-color); height: 100%; position: relative; border-radius: 50px; transition: 0.9s; width: 1px; } /*-------------------------------------------------------------- # Resume Section --------------------------------------------------------------*/ .resume .resume-wrapper .resume-block { margin-bottom: 3rem; } .resume .resume-wrapper .resume-block:last-child { margin-bottom: 0; } .resume .resume-wrapper .resume-block h2 { font-size: 2rem; margin-bottom: 0.8rem; font-weight: 700; } .resume .resume-wrapper .resume-block h2 span { color: var(--accent-color); } .resume .resume-wrapper .resume-block .lead { color: color-mix(in srgb, var(--default-color), transparent 25%); margin-bottom: 3rem; } .resume .resume-wrapper .timeline { position: relative; } .resume .resume-wrapper .timeline::before { content: ""; position: absolute; left: 20%; top: 0; height: 100%; width: 2px; background-color: color-mix(in srgb, var(--accent-color), transparent 85%); } .resume .resume-wrapper .timeline .timeline-item { display: flex; align-items: flex-start; margin-bottom: 2.5rem; position: relative; } .resume .resume-wrapper .timeline .timeline-item:last-child { margin-bottom: 0; } .resume .resume-wrapper .timeline .timeline-item .timeline-left { width: 20%; padding-right: 3rem; } .resume .resume-wrapper .timeline .timeline-item .timeline-left .company { color: var(--heading-color); font-weight: 600; font-size: 1.1rem; margin-bottom: 0.25rem; } .resume .resume-wrapper .timeline .timeline-item .timeline-left .period { color: var(--accent-color); font-size: 0.9rem; } .resume .resume-wrapper .timeline .timeline-item .timeline-dot { position: absolute; left: calc(20% + 1px); transform: translateX(-50%); width: 1rem; height: 1rem; background-color: var(--accent-color); border-radius: 50%; } .resume .resume-wrapper .timeline .timeline-item .timeline-right { width: 70%; padding-left: 3rem; margin-top: -4px; } .resume .resume-wrapper .timeline .timeline-item .timeline-right .position { color: var(--heading-color); font-size: 1.2rem; margin-bottom: 0.6rem; font-weight: 600; } .resume .resume-wrapper .timeline .timeline-item .timeline-right .description { color: color-mix(in srgb, var(--default-color), transparent 25%); } .resume .resume-wrapper .timeline .timeline-item .timeline-right ul { padding-left: 15px; } .resume .resume-wrapper .timeline .timeline-item .timeline-right ul li { padding-bottom: 12px; } @media (max-width: 992px) { .resume .resume-wrapper .resume-block h2 { font-size: 2rem; } .resume .resume-wrapper .timeline::before { left: 1rem; } .resume .resume-wrapper .timeline .timeline-item { flex-direction: column; margin-bottom: 20px; } .resume .resume-wrapper .timeline .timeline-item .timeline-left { width: 100%; text-align: left; padding-right: 0; padding-left: 2.5rem; margin-bottom: 1.6rem; margin-top: -4px; } .resume .resume-wrapper .timeline .timeline-item .timeline-dot { left: calc(1rem + 1px); } .resume .resume-wrapper .timeline .timeline-item .timeline-right { width: 100%; padding-left: 2.5rem; } } /*-------------------------------------------------------------- # Portfolio Section --------------------------------------------------------------*/ .portfolio .portfolio-filters-container { margin-bottom: 40px; } .portfolio .portfolio-filters { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; padding: 0; margin: 0; list-style: none; } .portfolio .portfolio-filters li { font-size: 15px; font-weight: 500; padding: 8px 20px; cursor: pointer; border-radius: 30px; background-color: color-mix(in srgb, var(--surface-color), transparent 50%); color: var(--default-color); transition: all 0.3s ease-in-out; } .portfolio .portfolio-filters li:hover { background-color: color-mix(in srgb, var(--accent-color), transparent 85%); color: var(--accent-color); transform: translateY(-2px); } .portfolio .portfolio-filters li.filter-active { background-color: var(--accent-color); color: var(--contrast-color); } .portfolio .portfolio-card { background-color: var(--surface-color); border-radius: 15px; overflow: hidden; box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05); transition: all 0.3s ease-in-out; } .portfolio .portfolio-card:hover { transform: translateY(-10px); box-shadow: 0 8px 35px rgba(0, 0, 0, 0.1); } .portfolio .portfolio-card:hover .portfolio-overlay { opacity: 1; visibility: visible; } .portfolio .portfolio-card:hover .portfolio-overlay .portfolio-actions { transform: translateY(0); } .portfolio .portfolio-card .portfolio-image { position: relative; overflow: hidden; aspect-ratio: 16/10; } .portfolio .portfolio-card .portfolio-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease-in-out; } .portfolio .portfolio-card .portfolio-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent); opacity: 0; visibility: hidden; transition: all 0.4s ease-in-out; display: flex; align-items: flex-end; padding: 20px; } .portfolio .portfolio-card .portfolio-overlay .portfolio-actions { transform: translateY(20px); transition: all 0.4s ease-in-out; display: flex; gap: 15px; } .portfolio .portfolio-card .portfolio-overlay .portfolio-actions a { width: 45px; height: 45px; background-color: var(--surface-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--accent-color); font-size: 20px; transition: all 0.3s ease; } .portfolio .portfolio-card .portfolio-overlay .portfolio-actions a:hover { background-color: var(--accent-color); color: var(--contrast-color); transform: scale(1.1); } .portfolio .portfolio-card .portfolio-content { padding: 25px; } .portfolio .portfolio-card .portfolio-content .category { font-size: 14px; color: var(--accent-color); text-transform: uppercase; letter-spacing: 1px; font-weight: 500; display: block; margin-bottom: 10px; } .portfolio .portfolio-card .portfolio-content h3 { font-size: 20px; margin: 0 0 15px; font-weight: 600; transition: color 0.3s ease; } .portfolio .portfolio-card .portfolio-content h3:hover { color: var(--accent-color); } .portfolio .portfolio-card .portfolio-content p { font-size: 15px; color: color-mix(in srgb, var(--default-color), transparent 30%); margin: 0; line-height: 1.6; } @media (max-width: 768px) { .portfolio .portfolio-filters li { font-size: 14px; padding: 6px 15px; } .portfolio .portfolio-card .portfolio-content { padding: 20px; } .portfolio .portfolio-card .portfolio-content h3 { font-size: 18px; } .portfolio .portfolio-card .portfolio-content p { font-size: 14px; } } /*-------------------------------------------------------------- # Testimonials Section --------------------------------------------------------------*/ .testimonials .testimonials-slider { width: 100%; position: relative; padding-bottom: 60px; } .testimonials .swiper-wrapper { height: auto; } .testimonials .testimonial-item { background-color: var(--surface-color); padding: 40px; border-radius: 20px; } @media (max-width: 575px) { .testimonials .testimonial-item { padding: 20px; } } .testimonials .testimonial-item h2 { font-size: 24px; font-weight: 600; margin-bottom: 20px; } .testimonials .testimonial-item p { font-size: 16px; line-height: 1.8; margin-bottom: 30px; font-style: italic; } .testimonials .testimonial-item .profile { gap: 15px; } .testimonials .testimonial-item .profile .profile-img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; } .testimonials .testimonial-item .profile .profile-info h3 { font-size: 18px; margin: 0; font-weight: 600; } .testimonials .testimonial-item .profile .profile-info span { font-size: 14px; color: color-mix(in srgb, var(--default-color) 70%, transparent); } .testimonials .testimonial-item .featured-img-wrapper { min-height: 400px; position: relative; overflow: hidden; border-radius: 16px; } .testimonials .testimonial-item .featured-img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; } .testimonials .swiper-navigation { position: absolute; bottom: 0; gap: 10px; } .testimonials .swiper-button-prev, .testimonials .swiper-button-next { position: relative; left: auto; right: auto; top: auto; margin: 0; width: 44px; height: 44px; background-color: var(--surface-color); border-radius: 50%; border: 1px solid color-mix(in srgb, var(--default-color) 10%, transparent); transition: 0.3s; } .testimonials .swiper-button-prev::after, .testimonials .swiper-button-next::after { font-size: 20px; color: var(--default-color); } .testimonials .swiper-button-prev:hover, .testimonials .swiper-button-next:hover { background-color: var(--accent-color); border-color: var(--accent-color); } .testimonials .swiper-button-prev:hover::after, .testimonials .swiper-button-next:hover::after { color: var(--contrast-color); } /*-------------------------------------------------------------- # Services Section --------------------------------------------------------------*/ .services { padding: 80px 0; } .services .servies-title { font-size: 2.5rem; margin-bottom: 1.5rem; } .services .btn-outline-primary { color: var(--accent-color); border-color: var(--accent-color); padding: 10px 30px; border-radius: 50px; transition: all 0.3s ease; } .services .btn-outline-primary:hover { background-color: var(--accent-color); color: var(--contrast-color); } .services .service-item { background-color: var(--surface-color); padding: 30px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); height: 100%; transition: transform 0.3s ease; } .services .service-item:hover { transform: scale(1.05); } .services .service-item i { font-size: 2.5rem; color: var(--accent-color); display: inline-block; margin-bottom: 15px; } .services .service-item h3 { font-size: 1.25rem; margin-bottom: 15px; } .services .service-item h3 a { color: var(--heading-color); } .services .service-item h3 a:hover { color: var(--accent-color); } .services .service-item p { font-size: 0.9rem; color: color-mix(in srgb, var(--default-color), transparent 25%); } @media (max-width: 991px) { .services h2 { font-size: 2rem; } } /*-------------------------------------------------------------- # Faq Section --------------------------------------------------------------*/ .faq .faq-container .faq-item { background-color: var(--surface-color); position: relative; padding: 20px; margin-bottom: 15px; border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%); border-radius: 5px; overflow: hidden; } .faq .faq-container .faq-item:last-child { margin-bottom: 0; } .faq .faq-container .faq-item h3 { font-weight: 600; font-size: 16px; line-height: 24px; margin: 0 30px 0 0; transition: 0.3s; cursor: pointer; display: flex; align-items: center; } .faq .faq-container .faq-item h3 .num { color: var(--accent-color); padding-right: 5px; } .faq .faq-container .faq-item h3:hover { color: var(--accent-color); } .faq .faq-container .faq-item .faq-content { display: grid; grid-template-rows: 0fr; transition: 0.3s ease-in-out; visibility: hidden; opacity: 0; } .faq .faq-container .faq-item .faq-content p { margin-bottom: 0; overflow: hidden; } .faq .faq-container .faq-item .faq-toggle { position: absolute; top: 20px; right: 20px; font-size: 16px; line-height: 0; transition: 0.3s; cursor: pointer; } .faq .faq-container .faq-item .faq-toggle:hover { color: var(--accent-color); } .faq .faq-container .faq-active { background-color: color-mix(in srgb, var(--accent-color), transparent 97%); border-color: color-mix(in srgb, var(--accent-color), transparent 80%); } .faq .faq-container .faq-active h3 { color: var(--accent-color); } .faq .faq-container .faq-active .faq-content { grid-template-rows: 1fr; visibility: visible; opacity: 1; padding-top: 10px; } .faq .faq-container .faq-active .faq-toggle { transform: rotate(90deg); color: var(--accent-color); } /*-------------------------------------------------------------- # Contact Section --------------------------------------------------------------*/ .contact .section-category { font-family: var(--heading-font); font-weight: 600; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; } .contact .content h2 { font-weight: 700; line-height: 1.2; } .contact .content .lead { color: color-mix(in srgb, var(--default-color), transparent 25%); } .contact .contact-info .info-item { font-size: 1.1rem; } .contact .contact-info .info-item i { color: var(--accent-color); font-size: 1.4rem; } .contact .contact-info .map-link { color: var(--heading-color); font-weight: 500; font-size: 1.1rem; transition: all 0.3s ease; } .contact .contact-info .map-link i { transition: transform 0.3s ease; } .contact .contact-info .map-link:hover { color: var(--accent-color); } .contact .contact-info .map-link:hover i { transform: translateX(5px); } .contact .contact-form { background-color: var(--surface-color); border: none; box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05); border-radius: 12px; } .contact .contact-form .form-control, .contact .contact-form .form-select { padding: 0.75rem 1.25rem; border-color: #e5e5e5; border-radius: 8px; font-size: 1rem; } .contact .contact-form .form-control:focus, .contact .contact-form .form-select:focus { border-color: color-mix(in srgb, var(--accent-color), transparent 50%); box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--accent-color), transparent 90%); } .contact .contact-form .form-control::placeholder, .contact .contact-form .form-select::placeholder { color: color-mix(in srgb, var(--default-color), transparent 50%); } .contact .contact-form .btn-submit { background-color: var(--accent-color); color: var(--contrast-color); padding: 0.75rem 2rem; font-weight: 500; border-radius: 8px; transition: all 0.3s ease; } .contact .contact-form .btn-submit:hover { background-color: color-mix(in srgb, var(--accent-color), transparent 15%); transform: translateY(-1px); } .contact .contact-form .btn-submit:active { transform: translateY(0); } /*-------------------------------------------------------------- # Portfolio Details Section --------------------------------------------------------------*/ .portfolio-details .portfolio-info h3 { font-size: 22px; font-weight: 700; margin-bottom: 20px; padding-bottom: 20px; position: relative; } .portfolio-details .portfolio-info h3:after { content: ""; position: absolute; display: block; width: 50px; height: 3px; background: var(--accent-color); left: 0; bottom: 0; } .portfolio-details .portfolio-info ul { list-style: none; padding: 0; font-size: 15px; } .portfolio-details .portfolio-info ul li { display: flex; flex-direction: column; padding-bottom: 15px; } .portfolio-details .portfolio-info ul strong { text-transform: uppercase; font-weight: 400; color: color-mix(in srgb, var(--default-color), transparent 50%); font-size: 14px; } .portfolio-details .portfolio-info .btn-visit { padding: 8px 40px; background: var(--accent-color); color: var(--contrast-color); border-radius: 50px; transition: 0.3s; } .portfolio-details .portfolio-info .btn-visit:hover { background: color-mix(in srgb, var(--accent-color), transparent 20%); } .portfolio-details .portfolio-description h2 { font-size: 26px; font-weight: 700; margin-bottom: 20px; } .portfolio-details .portfolio-description p { padding: 0; } .portfolio-details .portfolio-description .testimonial-item { padding: 30px 30px 0 30px; position: relative; background: color-mix(in srgb, var(--default-color), transparent 97%); margin-bottom: 50px; } .portfolio-details .portfolio-description .testimonial-item .testimonial-img { width: 90px; border-radius: 50px; border: 6px solid var(--background-color); float: left; margin: 0 10px 0 0; } .portfolio-details .portfolio-description .testimonial-item h3 { font-size: 18px; font-weight: bold; margin: 15px 0 5px 0; padding-top: 20px; } .portfolio-details .portfolio-description .testimonial-item h4 { font-size: 14px; color: #6c757d; margin: 0; } .portfolio-details .portfolio-description .testimonial-item .quote-icon-left, .portfolio-details .portfolio-description .testimonial-item .quote-icon-right { color: color-mix(in srgb, var(--accent-color), transparent 50%); font-size: 26px; line-height: 0; } .portfolio-details .portfolio-description .testimonial-item .quote-icon-left { display: inline-block; left: -5px; position: relative; } .portfolio-details .portfolio-description .testimonial-item .quote-icon-right { display: inline-block; right: -5px; position: relative; top: 10px; transform: scale(-1, -1); } .portfolio-details .portfolio-description .testimonial-item p { font-style: italic; margin: 0 0 15px 0 0 0; padding: 0; } /*-------------------------------------------------------------- # Service Details Section --------------------------------------------------------------*/ .service-details .service-details-slider { position: relative; overflow: hidden; border-radius: 10px; z-index: 1; } .service-details .service-details-slider .swiper-wrapper { height: auto !important; } .service-details .service-details-slider .swiper-pagination { position: absolute; bottom: 20px; left: 0; right: 0; z-index: 2; } .service-details .service-details-slider .swiper-pagination .swiper-pagination-bullet { width: 10px; height: 10px; background-color: var(--contrast-color); opacity: 0.5; transition: 0.3s; } .service-details .service-details-slider .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { opacity: 1; width: 20px; border-radius: 5px; } .service-details .content h3 { font-size: 28px; font-weight: 700; margin-bottom: 20px; } .service-details .content p { color: color-mix(in srgb, var(--default-color), transparent 20%); margin-bottom: 15px; } .service-details .content .features .feature-box { padding: 20px; background: var(--surface-color); border-radius: 10px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.05); height: 100%; transition: 0.3s; } .service-details .content .features .feature-box:hover { transform: translateY(-5px); } .service-details .content .features .feature-box i { font-size: 24px; color: var(--accent-color); margin-right: 15px; } .service-details .content .features .feature-box h4 { font-size: 18px; font-weight: 600; margin: 0; } .service-details .service-info { background: var(--surface-color); padding: 30px; border-radius: 10px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.05); } .service-details .service-info h4 { font-size: 22px; font-weight: 700; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 2px solid color-mix(in srgb, var(--accent-color), transparent 85%); } .service-details .service-info .info-item { margin-bottom: 25px; } .service-details .service-info .info-item:last-child { margin-bottom: 0; } .service-details .service-info .info-item i { font-size: 24px; color: var(--accent-color); margin-bottom: 10px; } .service-details .service-info .info-item h5 { font-size: 16px; font-weight: 600; margin-bottom: 5px; } .service-details .service-info .info-item p { color: color-mix(in srgb, var(--default-color), transparent 20%); margin: 0; } .service-details .related-services { background: var(--surface-color); padding: 30px; border-radius: 10px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.05); } .service-details .related-services h4 { font-size: 22px; font-weight: 700; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 2px solid color-mix(in srgb, var(--accent-color), transparent 85%); } .service-details .related-services .service-item { margin-bottom: 25px; padding-bottom: 25px; border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%); } .service-details .related-services .service-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .service-details .related-services .service-item i { font-size: 24px; color: var(--accent-color); margin-bottom: 10px; } .service-details .related-services .service-item h5 { font-size: 18px; margin-bottom: 10px; } .service-details .related-services .service-item h5 a { color: var(--heading-color); transition: 0.3s; } .service-details .related-services .service-item h5 a:hover { color: var(--accent-color); } .service-details .related-services .service-item p { color: color-mix(in srgb, var(--default-color), transparent 20%); margin: 0; font-size: 14px; } @media (max-width: 991px) { .service-details .service-info, .service-details .related-services { margin-top: 30px; } } /*-------------------------------------------------------------- # Starter Section Section --------------------------------------------------------------*/ .starter-section { /* Add your styles here */ padding: 0; } /*-------------------------------------------------------------- # Buyesia Pay Landing Page Custom Styles --------------------------------------------------------------*/ /* Header layout fixes */ .header-container { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; gap: 10px !important; } .header .logo { flex-shrink: 0 !important; margin-right: 0 !important; order: 1 !important; padding: 0 !important; } .header .navmenu { flex: 1 !important; display: flex !important; justify-content: center !important; align-items: center !important; order: 2 !important; margin: 0 !important; padding: 0 !important; } .header .navmenu ul { gap: 5px !important; margin: 0 !important; padding: 0 !important; } .header .header-cta { flex-shrink: 0 !important; margin-left: 0 !important; order: 3 !important; padding: 0 !important; } .header-cta .btn-primary { background: #005bff !important; border: 2px solid #005bff !important; color: white !important; padding: 6px 18px; border-radius: 25px; font-weight: 600; font-size: 14px; text-decoration: none; transition: all 0.3s ease; display: inline-block; white-space: nowrap; } .header-cta .btn-primary:hover { background: transparent !important; color: #005bff !important; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); } .navmenu ul li a { transition: color 0.3s ease; } .navmenu ul li a:hover { color: var(--primary-color) !important; } /* Mobile navigation toggle positioning */ .mobile-nav-toggle { position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 1000; } /* Smooth scrolling for anchor links */ html { scroll-behavior: smooth; } /* Mobile styles */ @media (max-width: 1199px) { .header-cta { display: none; } .navmenu { position: relative; } .navmenu ul { padding: 20px 0; } .navmenu ul li { margin-bottom: 8px; } .navmenu ul li a { padding: 12px 20px; border-radius: 8px; transition: all 0.3s ease; } .navmenu ul li a:hover { background: rgba(0, 91, 255, 0.1); color: #005bff !important; } .navmenu ul li.cta-mobile { display: block; margin-top: 20px; margin-bottom: 10px; text-align: center; padding: 0 15px; } .navmenu ul li.cta-mobile .btn-primary { background: #005bff !important; border: 2px solid #005bff !important; color: white !important; padding: 12px 24px; border-radius: 30px; font-weight: 600; font-size: 14px; text-decoration: none; transition: all 0.3s ease; display: inline-block; width: auto; min-width: 160px; text-align: center; margin: 10px auto; box-shadow: 0 2px 8px rgba(0, 91, 255, 0.3); } .navmenu ul li.cta-mobile .btn-primary:hover { background: transparent !important; color: #005bff !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 91, 255, 0.4); } } /* App Store Buttons Styles */ .app-store-buttons { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; } .app-store-btn, .google-play-btn { display: inline-block; transition: transform 0.3s ease, filter 0.3s ease; text-decoration: none; } .app-store-btn:hover, .google-play-btn:hover { transform: translateY(-2px); filter: brightness(1.1); } .app-store-btn img, .google-play-btn img { border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); } /* Responsive adjustments for app store buttons */ @media (max-width: 768px) { .app-store-buttons { justify-content: center; gap: 10px; } .app-store-btn img, .google-play-btn img { height: 45px !important; } } @media (max-width: 480px) { .app-store-buttons { flex-direction: column; align-items: center; gap: 15px; } .app-store-btn img, .google-play-btn img { height: 50px !important; } } /* Hero Title Styling - Simple Gold Effect */ .hero .content h2 .brand-gold { font-weight: 900 !important; color: #D4AF37 !important; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); display: inline-block; } .hero .content h2 .subtitle { font-size: 0.7em; font-weight: 600; color: var(--default-color); opacity: 0.9; } /*-------------------------------------------------------------- # Footer Menu Styles --------------------------------------------------------------*/ .buyesia-footer { background-color: var(--background-color); color: var(--default-color); padding: 28px 0 10px; margin-top: 24px; position: relative; transition: all 0.3s ease; border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 85%); } .footer-main { margin-bottom: 0; } .footer-links-row { row-gap: 1.5rem; } .footer-brand { margin-bottom: 20px; } .footer-logo-wrapper { margin-bottom: 18px; } .footer-logo { max-height: 45px; width: auto; transition: transform 0.3s ease; } .footer-description { color: color-mix(in srgb, var(--default-color), transparent 25%); font-size: 15px; line-height: 1.6; margin-bottom: 0; max-width: 320px; } .footer-apps { margin-top: 25px; } .apps-title { color: var(--heading-color); font-weight: 600; font-size: 14px; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 0.5px; } .app-buttons { display: flex; gap: 12px; flex-wrap: wrap; } .app-button { display: inline-block; transition: transform 0.3s ease; } .app-button img { height: 40px; width: auto; border-radius: 8px; } .app-button:hover { transform: translateY(-2px); } .footer-section-title { color: var(--heading-color); font-weight: 700; font-size: 16px; margin-bottom: 16px; position: relative; padding-bottom: 10px; } .footer-section-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 40px; height: 3px; background: var(--accent-color); border-radius: 2px; } .footer-menu { list-style: none; padding: 0; margin: 0; } .footer-menu li { margin-bottom: 10px; } .footer-menu-item { color: color-mix(in srgb, var(--default-color), transparent 25%); font-size: 14px; line-height: 1.45; cursor: default; transition: color 0.3s ease; position: relative; padding-left: 0; text-decoration: none; } .footer-menu-legal .footer-menu-item { display: inline-block; max-width: 100%; } .footer-menu-item::before { content: ''; position: absolute; left: 0; top: 50%; width: 0; height: 2px; background: var(--accent-color); transition: width 0.3s ease; transform: translateY(-50%); border-radius: 1px; } .footer-menu-item:hover { color: var(--accent-color); padding-left: 15px; text-decoration: none; } .footer-menu-item:hover::before { width: 10px; } .footer-menu a.footer-menu-item { cursor: pointer; } .bottom-footer { background-color: var(--surface-color); padding: 12px 0 18px; border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 85%); transition: background-color 0.3s ease, border-color 0.3s ease; } @media (max-width: 991px) { .buyesia-footer { padding: 24px 0 8px; margin-top: 24px; } .footer-section-title { font-size: 15px; margin-bottom: 20px; } .footer-menu-item { font-size: 13px; } } @media (max-width: 768px) { .buyesia-footer { padding: 20px 0 8px; } .footer-description { text-align: center; max-width: 100%; } .app-buttons { justify-content: center; } .footer-section-title { text-align: center; } .footer-section-title::after { left: 50%; transform: translateX(-50%); } } @media (max-width: 576px) { .buyesia-footer { padding: 18px 0 8px; } .app-button img { height: 35px; } } @media (max-width: 480px) { .buyesia-footer { padding: 16px 0 6px; } .footer-logo { max-height: 40px; } .footer-description { font-size: 14px; } .footer-section-title { font-size: 14px; } .footer-menu-item { font-size: 12px; } } /*-------------------------------------------------------------- # Privacy Policy Page Styles --------------------------------------------------------------*/ /* Privacy Policy Variables */ :root { --primary-color: var(--brand-primary); --secondary-color: var(--brand-primary-surface); --accent-color: var(--brand-primary); --accent-light: var(--brand-attention); --text-primary: var(--brand-text-strong); --text-secondary: var(--brand-text-muted); --text-muted: var(--brand-text-soft); --bg-dark: var(--brand-surface); --bg-card: var(--brand-surface); --bg-card-hover: var(--brand-primary-surface); --bg-secondary: var(--brand-surface-muted); --bg-tertiary: var(--brand-surface-soft); --border-color: var(--brand-border); --border-light: var(--brand-border-strong); --shadow-light: 0 4px 20px rgba(0, 0, 0, 0.1); --shadow-medium: 0 8px 30px rgba(0, 0, 0, 0.15); --border-radius: 12px; --border-radius-lg: 20px; --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); --gradient-primary: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-strong) 100%); --gradient-accent: linear-gradient(135deg, var(--brand-attention) 0%, color-mix(in srgb, var(--brand-attention), #FF8C00 32%) 100%); --gradient-secondary: linear-gradient(135deg, var(--brand-primary-surface) 0%, var(--brand-surface-soft) 100%); } html.dark { --primary-color: var(--brand-primary); --secondary-color: var(--brand-surface-muted); --accent-color: var(--brand-primary); --accent-light: var(--brand-attention); --text-primary: var(--brand-text-strong); --text-secondary: var(--brand-text-muted); --text-muted: var(--brand-text-soft); --bg-dark: var(--brand-surface); --bg-card: #233040; --bg-card-hover: #2A3743; --bg-secondary: #25303B; --bg-tertiary: var(--brand-surface-muted); --border-color: #3A3A3C; --border-light: #424244; --shadow-light: 0 4px 20px rgba(0, 0, 0, 0.3); --shadow-medium: 0 8px 30px rgba(0, 0, 0, 0.4); --gradient-primary: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-strong) 100%); --gradient-accent: linear-gradient(135deg, var(--brand-attention) 0%, color-mix(in srgb, var(--brand-attention), #FF8C00 24%) 100%); --gradient-secondary: linear-gradient(135deg, #25303B 0%, #2A3743 100%); } /* Hero Section */ .docs-hero-section { background: var(--gradient-primary); color: white; padding: 3rem 0; margin-top: 90px; margin-bottom: 2rem; } .hero-content { text-align: center; } .breadcrumb-nav { margin-bottom: 1.5rem; } .breadcrumb { background: transparent; padding: 0; margin: 0; justify-content: center; } .breadcrumb-item { color: rgba(255, 255, 255, 0.8); } .breadcrumb-link { color: rgba(255, 255, 255, 0.9); text-decoration: none; transition: var(--transition); } .breadcrumb-link:hover { color: white; } .integration-badge { margin-bottom: 2rem; } .badge { background: rgba(255, 255, 255, 0.2); color: white; padding: 0.5rem 1rem; border-radius: var(--border-radius); font-size: 0.875rem; font-weight: 500; border: 1px solid rgba(255, 255, 255, 0.3); } .hero-text { max-width: 800px; margin: 0 auto; } .hero-title { font-size: 2.5rem; font-weight: 700; margin-bottom: 1rem; line-height: 1.2; } .hero-description { font-size: 1.125rem; line-height: 1.6; opacity: 0.9; margin: 0; } /* Contenido Principal */ .docs-content { padding: 2rem 0; } .legal-docs-content { padding-top: 5rem; } .legal-page-header-row { margin-bottom: 1.75rem; } .legal-page-header { max-width: none; margin: 0; text-align: left; } .legal-page-header--compact { max-width: 720px; margin: 0 auto 1.75rem; text-align: center; } .legal-page-title { color: var(--text-primary); font-size: 2.6rem; font-weight: 700; line-height: 1.15; margin-bottom: 1rem; } .legal-page-description { max-width: none; margin: 0; color: var(--text-secondary); font-size: 1.05rem; line-height: 1.8; } .legal-page-badge { display: none !important; } .docs-sidebar { position: sticky; top: 2rem; background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--border-radius-lg); padding: 1.5rem; height: fit-content; box-shadow: var(--shadow-light); } .sidebar-title { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); } .nav-list { list-style: none; padding: 0; margin: 0; } .nav-list li { margin-bottom: 0.5rem; } .nav-link { color: var(--text-secondary); text-decoration: none; font-size: 0.875rem; padding: 0.5rem 0; display: block; transition: var(--transition); border-radius: var(--border-radius); } .nav-link:hover { color: var(--accent-color); background: var(--bg-card-hover); padding-left: 0.75rem; } /* Contenido Principal */ .docs-main { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--border-radius-lg); padding: 2rem; box-shadow: var(--shadow-light); } .legal-docs-main, .legal-docs-main.docs-main { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; } .legal-docs-main .docs-section { margin-bottom: 2.5rem; background: transparent !important; padding: 0 !important; border: 0 !important; } .legal-docs-main .docs-section h2 { margin-bottom: 1.25rem; } .legal-docs-main .docs-section p, .legal-docs-main .docs-section li { color: var(--text-primary); opacity: 0.92; } .legal-docs-main--single p:last-child { margin-bottom: 0; } .docs-section { margin-bottom: 1.5rem; } .docs-section:last-child { margin-bottom: 0; } .docs-section h2 { color: var(--text-primary); font-size: 1.75rem; font-weight: 700; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--accent-color); } .docs-section h3 { color: var(--text-primary); font-size: 1.25rem; font-weight: 600; margin: 1.5rem 0 1rem 0; } .docs-section p { color: var(--text-secondary); line-height: 1.6; margin-bottom: 1rem; } .docs-section ul { color: var(--text-secondary); line-height: 1.6; margin-bottom: 1rem; padding-left: 1.5rem; } .docs-section li { margin-bottom: 0.5rem; } .docs-section a { color: var(--accent-color); text-decoration: none; transition: var(--transition); } .docs-section a:hover { text-decoration: underline; } /* Páginas estáticas (Settings > Pages): mismo estilo que .docs-section */ .docs-main.page-article-content h1 { color: var(--text-primary); font-size: 1.75rem; font-weight: 700; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--accent-color); } .docs-main.page-article-content h2 { color: var(--text-primary); font-size: 1.75rem; font-weight: 700; margin-top: 2rem; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--accent-color); } .docs-main.page-article-content h2:first-child { margin-top: 0; } .docs-main.page-article-content h3 { color: var(--text-primary); font-size: 1.25rem; font-weight: 600; margin: 1.5rem 0 1rem 0; } .docs-main.page-article-content p { color: var(--text-secondary); line-height: 1.6; margin-bottom: 1rem; } .docs-main.page-article-content ul, .docs-main.page-article-content ol { color: var(--text-secondary); line-height: 1.6; margin-bottom: 1rem; padding-left: 1.5rem; } .docs-main.page-article-content li { margin-bottom: 0.5rem; } .docs-main.page-article-content a { color: var(--accent-color); text-decoration: none; transition: var(--transition); } .docs-main.page-article-content a:hover { text-decoration: underline; } .info-box { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 1.5rem; margin-bottom: 1.5rem; } .info-box h4 { color: var(--text-primary); font-size: 1.125rem; font-weight: 600; margin-bottom: 1rem; } .info-box p { color: var(--text-secondary); margin: 0; } .legal-info-box { background: rgba(255, 255, 255, 0.02); border-color: var(--border-light); box-shadow: none; } /* Responsive Design */ @media (max-width: 991px) { .docs-sidebar { position: static; margin-bottom: 2rem; } .hero-title { font-size: 2rem; } .docs-section h2 { font-size: 1.5rem; } .legal-docs-content { padding-top: 4.5rem; } .legal-page-title { font-size: 2.2rem; } } @media (max-width: 768px) { .docs-hero-section { padding: 2rem 0; margin-top: 80px; } .hero-title { font-size: 1.75rem; } .hero-description { font-size: 1rem; } .docs-main { padding: 1.5rem; } .docs-section h2 { font-size: 1.25rem; } .legal-docs-content { padding-top: 4rem; } .legal-page-header { margin-bottom: 0; text-align: left; } .legal-page-header-row { margin-bottom: 1.5rem; } .legal-page-title { font-size: 1.9rem; } .legal-page-description { font-size: 1rem; line-height: 1.7; } } @media (max-width: 576px) { .docs-hero-section { padding: 1.5rem 0; margin-top: 70px; } .hero-title { font-size: 1.5rem; } .docs-main { padding: 1rem; } .info-box { padding: 1rem; } .legal-docs-content { padding-top: 3.75rem; } .legal-page-title { font-size: 1.7rem; } } /* ========== Blog ========== */ .blog-page { background: var(--background-color); } .blog-page .blog-shell { padding: 86px 0 48px; } .blog-page .breadcrumb { margin-bottom: 0.75rem; } .blog-page .breadcrumb-link, .blog-page .breadcrumb-item { color: color-mix(in srgb, var(--default-color), transparent 32%); } .blog-page .breadcrumb-link { text-decoration: none; transition: color 0.2s ease; } .blog-page .breadcrumb-link:hover { color: var(--default-color); } .blog-page .blog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.25rem; } .blog-page .blog-header-copy { max-width: 760px; } .blog-page .blog-eyebrow { display: inline-flex; align-items: center; padding: 0.38rem 0.78rem; border-radius: 999px; background: color-mix(in srgb, var(--surface-color), #005bff 7%); border: 1px solid color-mix(in srgb, #005bff, transparent 76%); color: color-mix(in srgb, var(--heading-color), #005bff 22%); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 0.8rem; } .blog-page .blog-page-title { font-size: clamp(2rem, 4vw, 3.35rem); line-height: 1.05; color: var(--heading-color); margin-bottom: 0.55rem; } .blog-page .blog-page-subtitle { max-width: 620px; font-size: 1.02rem; line-height: 1.65; color: color-mix(in srgb, var(--default-color), transparent 22%); } .blog-page .blog-filter-bar { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.5rem; } .blog-page .blog-filter-pill { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.72rem 0.95rem; border-radius: 14px; background: color-mix(in srgb, var(--surface-color), #005bff 2%); border: 1px solid color-mix(in srgb, #005bff, transparent 88%); color: color-mix(in srgb, var(--default-color), transparent 12%); text-decoration: none; font-weight: 600; transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; } .blog-page .blog-filter-pill span { color: color-mix(in srgb, var(--default-color), transparent 40%); font-size: 0.9rem; } .blog-page .blog-filter-pill:hover, .blog-page .blog-filter-pill.active { transform: translateY(-2px); background: color-mix(in srgb, var(--surface-color), #005bff 8%); border-color: color-mix(in srgb, #005bff, transparent 52%); color: var(--heading-color); box-shadow: 0 12px 28px rgba(0, 91, 255, 0.12); } .blog-page .blog-post-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; } .blog-page .blog-card, .blog-page .blog-empty-state, .blog-page .blog-article-main, .blog-page .blog-article-sidebar { background: color-mix(in srgb, var(--surface-color), #005bff 2%); border: 1px solid color-mix(in srgb, #005bff, transparent 88%); border-radius: 22px; box-shadow: 0 18px 40px rgba(8, 31, 66, 0.08); } .blog-page .blog-card { overflow: hidden; transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease; } .blog-page .blog-card:hover { transform: translateY(-8px); border-color: color-mix(in srgb, #005bff, transparent 55%); box-shadow: 0 24px 48px rgba(0, 91, 255, 0.14); } .blog-page .blog-card-media { display: block; aspect-ratio: 16 / 10; background: linear-gradient(135deg, #eff5ff 0%, #c8dcff 100%); overflow: hidden; } .blog-page .blog-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; } .blog-page .blog-card:hover .blog-card-media img { transform: scale(1.05); } .blog-page .blog-card-placeholder { width: 100%; height: 100%; display: grid; place-items: center; background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.45), transparent 34%), linear-gradient(135deg, #eff5ff 0%, #b7d0ff 100%); } .blog-page .blog-card-placeholder span { font-size: clamp(1.35rem, 3vw, 2.05rem); font-weight: 800; letter-spacing: 0.08em; color: #0b2b56; } .blog-page .blog-card-body { padding: 1.2rem 1.2rem 1.35rem; } .blog-page .blog-card-meta, .blog-page .blog-article-meta-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; color: color-mix(in srgb, var(--default-color), transparent 35%); font-size: 0.92rem; } .blog-page .blog-badge { display: inline-flex; align-items: center; padding: 0.34rem 0.72rem; border-radius: 999px; background: color-mix(in srgb, var(--surface-color), #005bff 7%); border: 1px solid color-mix(in srgb, #005bff, transparent 74%); color: color-mix(in srgb, var(--heading-color), #005bff 16%); font-size: 0.8rem; font-weight: 700; text-decoration: none; transition: background-color 0.2s ease, border-color 0.2s ease; } .blog-page .blog-badge:hover { background: color-mix(in srgb, var(--surface-color), #005bff 12%); border-color: color-mix(in srgb, #005bff, transparent 52%); } .blog-page .blog-card-title { font-size: 1.2rem; line-height: 1.28; margin: 0.85rem 0 0.6rem; } .blog-page .blog-card-title a { color: var(--heading-color); text-decoration: none; transition: color 0.2s ease; } .blog-page .blog-card:hover .blog-card-title a { color: #005bff; } .blog-page .blog-card-excerpt { color: color-mix(in srgb, var(--default-color), transparent 25%); line-height: 1.6; } .blog-page .blog-empty-state { padding: 2rem; } .blog-page .blog-header-article { margin-bottom: 1.5rem; } .blog-page .blog-back-link { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.55rem 0.9rem; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--default-color), transparent 82%); background: color-mix(in srgb, var(--surface-color), transparent 4%); color: var(--heading-color); text-decoration: none; font-weight: 600; margin-bottom: 1rem; box-shadow: 0 10px 24px rgba(8, 15, 23, 0.08); transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; } .blog-page .blog-back-link:hover { color: var(--heading-color); transform: translateY(-2px); border-color: color-mix(in srgb, #005bff, transparent 52%); background: color-mix(in srgb, var(--surface-color), #005bff 8%); box-shadow: 0 14px 28px rgba(0, 91, 255, 0.12); } .blog-page .blog-article-title { max-width: 900px; margin-bottom: 0; } .blog-page .blog-article-layout { row-gap: 1.5rem; } .blog-page .blog-article-main { padding: 1.75rem; } .blog-page .blog-article-sidebar { position: sticky; top: 92px; padding: 1.35rem; } .blog-page .blog-related-list { display: grid; gap: 0; } .blog-page .blog-related-item { display: grid; grid-template-columns: minmax(0, 1fr) 72px; gap: 0.9rem; padding: 1rem 0; border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 85%); } .blog-page .blog-related-copy { display: flex; min-width: 0; flex-direction: column; gap: 0.35rem; color: var(--heading-color); text-decoration: none; } .blog-page .blog-related-category { color: #005bff; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .blog-page .blog-related-title { display: -webkit-box; overflow: hidden; font-size: 0.9rem; font-weight: 700; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .blog-page .blog-related-copy:hover .blog-related-title { color: #005bff; } .blog-page .blog-related-copy time, .blog-page .blog-related-empty { color: color-mix(in srgb, var(--default-color), transparent 42%); font-size: 0.72rem; } .blog-page .blog-related-media { align-self: center; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 8px; background: linear-gradient(135deg, #eff5ff 0%, #b7d0ff 100%); text-decoration: none; } .blog-page .blog-related-media img { width: 100%; height: 100%; object-fit: cover; } .blog-page .blog-related-media span { display: grid; width: 100%; height: 100%; place-items: center; color: #0b2b56; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; } .blog-page .sidebar-title { font-size: 1rem; font-weight: 700; color: var(--heading-color); margin-bottom: 1rem; } .blog-page .pageArticle_content { color: var(--default-color); line-height: 1.8; font-size: 1.02rem; } .blog-page .pageArticle_content > *:first-child { margin-top: 0; } .blog-page .pageArticle_content h2, .blog-page .pageArticle_content h3 { color: var(--heading-color); margin-top: 2.2rem; margin-bottom: 1rem; line-height: 1.25; scroll-margin-top: 130px; } .blog-page .pageArticle_content p, .blog-page .pageArticle_content ul, .blog-page .pageArticle_content ol, .blog-page .pageArticle_content blockquote { margin-bottom: 1.1rem; } .blog-page .pageArticle_content a { color: #005bff; } .blog-page .pageArticle_content a:hover { color: #244ecf; } .blog-page .pageArticle_content img, .blog-page .blog-post-featured-image img { width: 100%; max-width: 100%; height: auto; display: block; object-fit: cover; } .blog-page .blog-post-featured-image { overflow: hidden; border-radius: 18px; margin-bottom: 1.5rem; } .blog-page .blog-actions .btn-primary, .blog-page .blog-actions .btn-outline-primary { background-color: #005bff; border-color: #005bff; color: #ffffff; } .blog-page .blog-actions .btn-primary:hover, .blog-page .blog-actions .btn-outline-primary:hover { background-color: #244ecf; border-color: #244ecf; color: #ffffff; } .blog-page .blog-actions .btn-outline-secondary { border-color: color-mix(in srgb, #005bff, transparent 55%); color: var(--heading-color); } .blog-page .blog-actions .btn-outline-secondary:hover { background: color-mix(in srgb, var(--surface-color), #005bff 12%); border-color: #005bff; color: var(--heading-color); } .blog-page .pagination .page-link { color: var(--heading-color); border-color: color-mix(in srgb, var(--default-color), transparent 88%); background: color-mix(in srgb, var(--surface-color), transparent 4%); } .blog-page .pagination .page-item.active .page-link { background-color: #005bff; border-color: #005bff; color: #ffffff; } @media (max-width: 1199px) { .blog-page .blog-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 991px) { .blog-page .blog-shell { padding-top: 82px; } .blog-page .blog-header { margin-bottom: 1.5rem; } .blog-page .blog-post-grid { grid-template-columns: 1fr; } .blog-page .blog-article-sidebar { position: static; } } @media (max-width: 768px) { .blog-page .blog-shell { padding: 76px 0 44px; } .blog-page .blog-page-title { font-size: 2rem; } .blog-page .blog-card-body, .blog-page .blog-article-main, .blog-page .blog-article-sidebar, .blog-page .blog-empty-state { padding: 1.25rem; } .blog-page .blog-filter-pill { width: 100%; justify-content: space-between; } } /* Estilos para los botones del menú de navegación */ .merchant-tab-section { display: flex; justify-content: center; width: 100%; background-color: #f4f7fb; border-bottom: 1px solid #d9e2ec; position: sticky; top: 63px; z-index: 999; } .merchant-tab { margin: 20px 0; padding: 6px; display: flex; justify-content: center; background: #ffffff; border: 1px solid #d9e2ec; border-radius: 12px; gap: 6px; width: min(500px, 100%); box-shadow: 0 14px 28px rgba(15, 23, 42, 0.06); } .merchant-tab a { flex: 1 1 0; justify-content: center; padding: 14px 22px; color: #516179; font-family: "Gilroy-Medium", sans-serif; font-size: 16px; line-height: 17px; display: flex; align-items: center; gap: 8px; text-decoration: none; transition: all 0.3s ease; border-radius: 10px; } .merchant-tab a:hover { background-color: rgba(0, 91, 255, 0.08); color: #005bff; } .tab-active { background-color: #005bff !important; border-radius: 10px; color: white !important; } .tab-active svg { color: white !important; } .merchant-tab a svg, .merchant-tab a i { color: #516179; transition: color 0.3s ease; } .merchant-tab a:hover svg, .merchant-tab a:hover i { color: #005bff; } .tab-active i { color: #ffffff !important; } body.dark .merchant-tab-section { background-color: #0b1220; border-bottom-color: #20324f; } body.dark .merchant-tab { background: #111c2e; border-color: #20324f; box-shadow: 0 18px 34px rgba(0, 0, 0, 0.24); } body.dark .merchant-tab a { color: #dbeafe; } body.dark .merchant-tab a svg, body.dark .merchant-tab a i { color: #dbeafe; } body.dark .merchant-tab a:hover { background-color: rgba(96, 165, 250, 0.14); color: #60a5fa; } body.dark .merchant-tab a:hover svg, body.dark .merchant-tab a:hover i { color: #60a5fa; } /* Responsive para los botones del menú */ @media (max-width: 768px) { .merchant-tab { margin: 16px 0; padding: 5px; border-radius: 6px; width: 100%; max-width: 400px; } .merchant-tab a { padding: 9px 15px; font-size: 14px; line-height: 17px; flex: 1; justify-content: center; } } @media (max-width: 576px) { .merchant-tab { width: 100%; max-width: 350px; } .merchant-tab a { padding: 8px 10px; font-size: 12px; } } /* Partners/Backers Carousel Styles (Estilo Kontigo) */ .partners { padding: 60px 0; background-color: var(--background-color); } .partners .section-subtitle { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--default-color); opacity: 0.7; margin-bottom: 40px; } .partners-carousel { overflow: hidden; padding: 20px 0; } .partner-logo { display: flex; align-items: center; justify-content: center; height: 60px; padding: 10px 20px; transition: all 0.3s ease; } .partner-logo img { max-height: 100%; max-width: 100%; object-fit: contain; transition: all 0.3s ease; } .partner-logo:hover img { filter: grayscale(0%) !important; opacity: 1 !important; transform: scale(1.1); } /* Bootstrapping Section Styles */ .bootstrapping { padding: 60px 0; background-color: var(--background-color); } .bootstrapping-text { font-size: 16px; line-height: 1.6; color: var(--default-color); max-width: 800px; margin: 0 auto; opacity: 0.85; } .bootstrapping-text strong { color: var(--heading-color); font-weight: 600; } .bootstrapping-logo-wrapper { padding: 30px 0; } .bootstrapping-logo { max-width: 450px; max-height: 220px; width: auto; height: auto; object-fit: contain; transition: all 0.3s ease; } .bootstrapping-logo:hover { transform: scale(1.05); opacity: 0.9; } @media (max-width: 768px) { .bootstrapping { padding: 40px 0; } .bootstrapping-text { font-size: 14px; padding: 0 20px; } .bootstrapping-logo { max-width: 350px; max-height: 170px; } } @media (max-width: 576px) { .bootstrapping-logo { max-width: 280px; max-height: 140px; } } /* Virtual Cards Section Styles */ .virtual-cards { padding: 80px 0; } .virtual-cards-content .feature-list { list-style: none; padding: 0; } .virtual-cards-content .feature-list li { padding: 10px 0; font-size: 16px; color: var(--default-color); } .virtual-cards-image img { box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; } .virtual-cards-image img:hover { transform: translateY(-5px); } /* Virtual Card Visual Effects (Estilo StablePay) */ .virtual-card-visual { min-height: 300px; display: flex; align-items: center; justify-content: center; } .card-animation-bg { pointer-events: none; z-index: 1; } .virtual-card-preview { z-index: 10; transition: transform 0.7s ease; } .virtual-card-preview:hover .card-front { transform: rotate(-6deg) scale(1.05) !important; } .card-glow { z-index: 5; animation: glow-pulse 3s ease-in-out infinite; } @keyframes glow-pulse { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.1); } } .card-front { background: linear-gradient(135deg, #1f2937 0%, #111827 100%); z-index: 10; border-radius: 24px; } .card-front:hover { transform: rotate(-6deg) scale(1.05) !important; } .card-glow { border-radius: 24px; } /* Popular Services Carousel Styles */ .popular-services { padding: 80px 0; background-color: var(--background-color); } .popular-services-carousel { overflow: hidden; padding: 30px 0; } .popular-services-carousel .swiper-slide { height: auto; display: flex; align-items: stretch; } .popular-services-carousel .swiper-slide > div { width: 100%; display: flex; } .service-logo-card { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px 8px; background: var(--surface-color); border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; cursor: pointer; min-height: 70px; width: 100%; border: 1px solid rgba(0, 0, 0, 0.05); } .service-logo-card:hover { transform: translateY(-3px); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); background: var(--surface-color); border-color: rgba(0, 0, 0, 0.1); } .service-logo-card img { max-width: 20px; max-height: 20px; width: auto; height: auto; object-fit: contain; margin-bottom: 6px; filter: grayscale(30%); transition: all 0.3s ease; opacity: 0.7; } /* Logos específicos que están en blanco - convertir a oscuro para visibilidad */ .service-logo-card img[alt="ChatGPT"], .service-logo-card img[alt="Midjourney"], .service-logo-card img[alt="Steam"], .service-logo-card img[alt="Suno AI"] { filter: brightness(0) saturate(100%); opacity: 0.6; } .service-logo-card:hover img { filter: grayscale(0%); opacity: 1; transform: scale(1.05); } .service-logo-card:hover img[alt="ChatGPT"], .service-logo-card:hover img[alt="Midjourney"], .service-logo-card:hover img[alt="Steam"], .service-logo-card:hover img[alt="Suno AI"] { filter: brightness(0) saturate(100%); opacity: 1; } .service-name { font-size: 10px; font-weight: 500; color: var(--default-color); text-align: center; margin-top: 4px; line-height: 1.2; } .service-placeholder { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; background: var(--surface-color); border-radius: 8px; font-size: 10px; font-weight: 600; color: var(--default-color); text-align: center; margin-bottom: 10px; border: 1px solid rgba(0, 0, 0, 0.1); } /* Animaciones para puntos y efectos */ @keyframes pulse { 0%, 100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 1; transform: scale(1.2); } } .animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } /* Responsive adjustments for virtual cards */ @media (max-width: 768px) { .virtual-card-visual { min-height: 250px; margin-top: 30px; } .virtual-card-preview { max-width: 280px !important; } .card-front { min-height: 180px !important; } } /* Responsive adjustments for partners */ @media (max-width: 768px) { .partners { padding: 40px 0; } .partner-logo { height: 50px; padding: 10px 15px; } .partners .section-subtitle { font-size: 12px; margin-bottom: 30px; } } /* Beta Tester Section Styles */ .beta-tester { padding: 80px 0; } .beta-info-card { transition: all 0.3s ease; margin-bottom: 2rem; } .beta-info-card:hover { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important; transform: translateY(-2px); } .beta-info-card h4 { font-size: 1.25rem; font-weight: 600; color: var(--heading-color); margin-bottom: 1rem; } .beta-info-card p { color: var(--default-color); line-height: 1.6; margin-bottom: 1rem; } .beta-info-card ul { list-style: none; padding-left: 0; margin-bottom: 1rem; } .beta-info-card ul li { padding: 10px 0 10px 28px; position: relative; color: var(--default-color); line-height: 1.6; font-size: 0.95rem; } .beta-info-card ul li:before { content: "✓"; position: absolute; left: 0; color: var(--accent-color); font-weight: bold; font-size: 18px; line-height: 1.4; } .beta-info-card .alert-info { background-color: rgba(13, 110, 253, 0.1); border-color: rgba(13, 110, 253, 0.2); color: var(--default-color); border-radius: 8px; padding: 1rem; margin-bottom: 1rem; } .beta-info-card .alert-info i { flex-shrink: 0; margin-top: 2px; } .beta-info-card .alert-info strong { color: var(--heading-color); display: block; margin-bottom: 0.5rem; } .beta-info-card .alert-info div { font-size: 0.9rem; line-height: 1.6; } .beta-info-card .card-features { background-color: rgba(248, 249, 250, 0.8) !important; border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 8px; padding: 1.25rem; margin-bottom: 1rem; } .beta-info-card .card-features h5 { color: var(--heading-color); font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem; display: flex; align-items: center; } .beta-info-card .card-features h5 i { margin-right: 0.5rem; font-size: 1.2rem; } .beta-info-card .card-features .row { margin: 0; } .beta-info-card .card-features .col-md-6, .beta-info-card .card-features .col-md-12 { padding: 0.5rem 0.75rem; } .beta-info-card .card-features .d-flex { align-items: flex-start; } .beta-info-card .card-features .bi-check-circle-fill { font-size: 18px; flex-shrink: 0; margin-top: 2px; } .beta-info-card .card-features span { color: var(--default-color); font-size: 0.9rem; line-height: 1.6; } .beta-info-card .card-features strong { color: var(--heading-color); font-weight: 600; } .beta-tester-form-wrapper { background: var(--surface-color); border-radius: 12px; padding: 30px; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05); } /* Responsive Design */ @media (max-width: 991px) { .beta-tester { padding: 60px 0; } .beta-info-card { padding: 1.5rem !important; } .beta-info-card .card-features .col-md-6, .beta-info-card .card-features .col-md-12 { padding: 0.5rem; } } @media (max-width: 768px) { .beta-tester { padding: 50px 0; } .beta-info-card { padding: 1.25rem !important; border-radius: 12px; } .beta-info-card h4 { font-size: 1.1rem; margin-bottom: 0.75rem; } .beta-info-card p { font-size: 0.9rem; margin-bottom: 0.75rem; } .beta-info-card ul li { padding: 8px 0 8px 24px; font-size: 0.9rem; } .beta-info-card ul li:before { font-size: 16px; } .beta-info-card .card-features { padding: 1rem; margin-bottom: 0.75rem; } .beta-info-card .card-features h5 { font-size: 1rem; margin-bottom: 0.75rem; } .beta-info-card .card-features .col-md-6, .beta-info-card .card-features .col-md-12 { padding: 0.5rem 0; margin-bottom: 0.5rem; } .beta-info-card .card-features .d-flex { align-items: flex-start; } .beta-info-card .card-features span { font-size: 0.85rem; line-height: 1.5; } .beta-info-card .alert-info { padding: 0.875rem; margin-bottom: 0.75rem; } .beta-info-card .alert-info i { font-size: 18px !important; margin-top: 0; } .beta-info-card .alert-info div { font-size: 0.85rem; } .beta-tester-form-wrapper { padding: 1.5rem; border-radius: 12px; } /* Ajustar el flex para móviles */ .beta-info-card .d-flex.align-items-start { flex-direction: column; } .beta-info-card .flex-shrink-0 { margin-bottom: 0.75rem; margin-right: 0; } .beta-info-card .flex-shrink-0 i { font-size: 20px !important; } } @media (max-width: 576px) { .beta-tester { padding: 40px 0; } .beta-info-card { padding: 1rem !important; } .beta-info-card h4 { font-size: 1rem; } .beta-info-card p { font-size: 0.85rem; } .beta-info-card ul li { padding: 6px 0 6px 22px; font-size: 0.85rem; } .beta-info-card .card-features { padding: 0.875rem; } .beta-info-card .card-features h5 { font-size: 0.95rem; flex-wrap: wrap; } .beta-info-card .card-features span { font-size: 0.8rem; } .beta-info-card .alert-info { padding: 0.75rem; } .beta-info-card .alert-info div { font-size: 0.8rem; } .beta-tester-form-wrapper { padding: 1.25rem; } } /*-------------------------------------------------------------- # API Docs Pages --------------------------------------------------------------*/ .api-docs-page { --doc-page-bg: var(--brand-surface-soft); --doc-surface: var(--surface-color); --doc-surface-strong: var(--brand-surface-muted); --doc-sidebar-bg: var(--brand-sidebar-surface); --doc-sidebar-border: var(--brand-sidebar-border); --doc-sidebar-heading: var(--brand-sidebar-heading); --doc-sidebar-text: var(--brand-sidebar-text); --doc-border: var(--brand-border); --doc-border-strong: var(--brand-border-strong); --doc-text: var(--heading-color); --doc-muted: var(--brand-text-muted); --doc-soft: var(--brand-text-soft); --doc-accent: var(--brand-primary); --doc-accent-soft: var(--brand-primary-soft); --doc-code-bg: var(--brand-code-bg); --doc-code-border: var(--brand-code-border); --doc-code-text: var(--brand-code-text); background: linear-gradient(180deg, color-mix(in srgb, var(--doc-page-bg), #ffffff 22%) 0%, var(--doc-page-bg) 100%); padding: 118px 0 72px; min-height: 100vh; } .api-docs-shell { width: min(1180px, calc(100% - clamp(24px, 6vw, 96px))); margin: 0 auto; } .docs-api-page { --doc-page-bg: #0c2136; --doc-surface: rgba(27, 38, 60, 0.94); --doc-surface-strong: rgba(21, 31, 48, 0.96); --doc-sidebar-bg: rgba(18, 33, 54, 0.96); --doc-sidebar-border: rgba(170, 203, 236, 0.18); --doc-sidebar-heading: #aacbeb; --doc-sidebar-text: #f7fbff; --doc-border: rgba(170, 203, 236, 0.18); --doc-border-strong: rgba(170, 203, 236, 0.28); --doc-text: #f4f8ff; --doc-muted: #c7d3e3; --doc-soft: #9fb3c7; --doc-accent: var(--brand-primary); --doc-accent-soft: var(--brand-primary-soft); --doc-code-bg: var(--brand-code-bg); --doc-code-border: var(--brand-code-border); --doc-code-text: var(--brand-code-text); background: radial-gradient(circle at 8% 0%, rgba(200, 149, 66, 0.14), transparent 22rem), radial-gradient(circle at 90% 8%, rgba(0, 91, 255, 0.18), transparent 24rem), linear-gradient(180deg, #0c2136 0%, #091824 100%); } .docs-api-page .api-docs-header, .docs-api-page .api-docs-section, .docs-api-page .api-docs-sidebar, .docs-api-page .api-docs-note, .docs-api-page .api-docs-endpoint, .docs-api-page .api-docs-card, .docs-api-page .api-docs-table-card, .docs-api-page .api-docs-code-block { backdrop-filter: blur(8px); } .docs-api-page .api-docs-header, .docs-api-page .api-docs-section { box-shadow: 0 18px 54px rgba(2, 8, 16, 0.26); } .docs-api-page .api-docs-callout { box-shadow: 0 18px 40px rgba(2, 8, 16, 0.18); } .rest-docs-page { --doc-accent: var(--brand-attention); --doc-accent-soft: var(--brand-attention-soft); } .api-docs-page .container { width: 100%; max-width: none; padding-left: 2rem; padding-right: 2rem; } .api-docs-header { margin-bottom: 1.35rem; padding: 2rem; border: 1px solid var(--doc-border); border-radius: 28px; background: var(--doc-surface); box-shadow: 0 18px 60px rgba(15, 23, 42, 0.08); } body.dark .api-docs-header { box-shadow: 0 18px 60px rgba(0, 0, 0, 0.26); } .api-docs-eyebrow { display: inline-flex; align-items: center; padding: 0.45rem 0.8rem; border-radius: 999px; border: 1px solid var(--doc-border); background: var(--doc-accent-soft); color: var(--doc-accent); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 1rem; } .api-docs-header-row { display: flex; justify-content: space-between; gap: 1.5rem; align-items: flex-start; } .api-docs-header h1 { margin: 0 0 0.75rem; font-size: clamp(2rem, 4vw, 3.35rem); line-height: 1.2; color: var(--doc-text); font-weight: 700; max-width: 760px; } .api-docs-header p { margin: 0; max-width: 760px; color: var(--doc-muted); font-size: 1.02rem; line-height: 1.6; } .api-docs-callout { min-width: 280px; padding: 1rem 1.1rem; border-radius: 20px; border: 1px solid var(--doc-border); background: var(--doc-surface-strong); display: flex; flex-direction: column; gap: 0.7rem; } .api-docs-callout-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--doc-soft); font-weight: 700; } .api-docs-callout code { color: var(--doc-text); font-size: 0.95rem; word-break: break-word; } .api-docs-callout-text { color: var(--doc-muted); font-size: 0.92rem; line-height: 1.6; } .api-docs-top-meta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; } .api-docs-chip { display: inline-flex; gap: 0.55rem; align-items: center; padding: 0.7rem 0.95rem; border-radius: 14px; border: 1px solid var(--doc-border); background: var(--doc-surface); color: var(--doc-text); font-size: 0.9rem; } .api-docs-chip span { color: var(--doc-accent); font-weight: 800; font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; } .api-docs-page .merchant-tab-section { position: static; top: auto; margin: 0 0 1.35rem; padding: 0; background: transparent !important; border-bottom: 0; z-index: auto; } .api-docs-page .px-240 { width: 100%; padding-left: 0 !important; padding-right: 0 !important; } .api-docs-page .merchant-tab { margin: 0 !important; width: fit-content !important; max-width: 100% !important; background: var(--doc-surface); border-color: var(--doc-border); } .api-docs-page .merchant-tab a { flex: 0 1 auto; } .api-docs-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 1.6rem; align-items: start; min-width: 0; } .api-docs-sidebar { position: sticky; top: 104px; padding: 1.25rem; border-radius: 24px; border: 1px solid var(--doc-sidebar-border); background: var(--doc-sidebar-bg); box-shadow: 0 20px 40px rgba(2, 6, 23, 0.18); } .api-docs-sidebar-title { color: var(--doc-sidebar-text); font-weight: 800; font-size: 0.95rem; margin-bottom: 1.1rem; } .api-docs-nav-group + .api-docs-nav-group { margin-top: 1.2rem; } .api-docs-nav-heading { color: var(--doc-sidebar-heading); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.55rem; } .api-docs-nav { display: flex; flex-direction: column; gap: 0.2rem; } .api-docs-nav a { display: block; padding: 0.72rem 0.85rem; border-radius: 12px; color: var(--doc-sidebar-text); text-decoration: none; font-size: 0.94rem; transition: 0.18s ease; opacity: 0.9; } .api-docs-nav a:hover, .api-docs-nav a.is-active { background: var(--doc-accent-soft); color: var(--doc-accent); opacity: 1; } .api-docs-main { display: grid; gap: 1.35rem; min-width: 0; } .api-docs-section { padding: 1.6rem; border-radius: 24px; border: 1px solid var(--doc-border); background: var(--doc-surface); scroll-margin-top: 120px; box-shadow: 0 14px 30px rgba(15, 23, 42, 0.05); min-width: 0; } .api-docs-section-head { margin-bottom: 1.1rem; } .api-docs-section-head h2 { margin: 0 0 0.45rem; color: var(--doc-text); font-size: 1.6rem; font-weight: 700; line-height: 1.2; } .api-docs-section-head p { margin: 0; color: var(--doc-muted); line-height: 1.6; } .api-docs-grid { margin-top: 1rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; } .api-docs-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .api-docs-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .api-docs-card, .api-docs-step, .api-docs-table-card, .api-docs-note, .api-docs-endpoint { border: 1px solid var(--doc-border); background: var(--doc-surface-strong); border-radius: 20px; } .api-docs-card { padding: 1.1rem; } .api-docs-card-label { color: var(--doc-accent); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.74rem; font-weight: 800; margin-bottom: 0.6rem; } .api-docs-card h3 { margin: 0 0 0.45rem; color: var(--doc-text); font-size: 1.04rem; font-weight: 700; line-height: 1.2; } .api-docs-card p { margin: 0; color: var(--doc-muted); line-height: 1.6; } .api-docs-alert { border-radius: 14px; padding: 0.85rem 1rem; border: 1px solid transparent; font-size: 0.95rem; } .api-docs-alert-success { background: color-mix(in srgb, var(--brand-success), transparent 84%); border-color: color-mix(in srgb, var(--brand-success), transparent 64%); color: color-mix(in srgb, var(--brand-success), #0f5132 28%); } .api-docs-alert-error { background: color-mix(in srgb, var(--brand-danger), transparent 86%); border-color: color-mix(in srgb, var(--brand-danger), transparent 64%); color: var(--brand-danger); } .api-docs-install-form { margin-top: 1rem; } .api-docs-install-form label { display: block; color: var(--doc-text); font-weight: 700; margin-bottom: 0.55rem; } .api-docs-install-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.7rem; } .api-docs-install-row input { border: 1px solid var(--doc-border); border-radius: 12px; background: var(--doc-surface); color: var(--doc-text); padding: 0.68rem 0.85rem; } .api-docs-install-row input::placeholder { color: var(--doc-soft); } .api-docs-download-btn { display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; background: var(--doc-accent); color: #fff; font-weight: 700; border-radius: 12px; padding: 0.62rem 1rem; text-decoration: none; transition: opacity 0.2s ease, transform 0.2s ease; } .api-docs-download-btn:hover { color: #fff; opacity: 0.92; text-decoration: none; transform: translateY(-1px); } .api-docs-callout .api-docs-download-btn, .api-docs-callout .api-docs-disabled-btn { width: 100%; } .api-docs-disabled-btn { border: 1px dashed var(--doc-border-strong); background: var(--doc-surface-strong); color: var(--doc-soft); font-weight: 700; border-radius: 12px; padding: 0.62rem 1rem; cursor: not-allowed; opacity: 0.95; } .api-docs-steps { display: grid; gap: 0.85rem; } .api-docs-step { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0.8rem; align-items: flex-start; padding: 0.95rem 1rem; } .api-docs-step span { width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; background: var(--doc-accent-soft); color: var(--doc-accent); font-weight: 800; font-size: 0.88rem; } .rest-docs-page .api-docs-step span { background: var(--doc-accent); color: #ffffff; } .api-docs-step h3 { margin: 0 0 0.35rem; color: var(--doc-text); font-size: 1rem; font-weight: 700; } .api-docs-step p { margin: 0; color: var(--doc-muted); line-height: 1.6; } .api-docs-note { padding: 1rem 1.1rem; margin-top: 1rem; margin-bottom: 1rem; border: 1px solid var(--doc-border); border-radius: 20px; background: var(--doc-surface-strong); color: var(--doc-muted); line-height: 1.6; } .api-docs-note--centered { text-align: center; } .api-docs-note--warning { background: color-mix(in srgb, var(--brand-attention), transparent 90%); border-color: color-mix(in srgb, var(--brand-attention), transparent 70%); color: color-mix(in srgb, var(--brand-attention), var(--doc-text) 34%); } .api-docs-note strong { color: var(--doc-text); } .api-docs-endpoint { padding: 1rem 1.1rem; margin-bottom: 1rem; } .api-docs-endpoint-meta { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.6rem; flex-wrap: wrap; } .api-docs-endpoint-meta code { color: var(--doc-text); font-size: 0.94rem; word-break: break-word; } .api-docs-endpoint p, .api-docs-note p { color: var(--doc-muted); line-height: 1.6; } .api-docs-note ul { margin: 0.75rem 0 0; padding-left: 1.1rem; } .method { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; padding: 0.35rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .method-post { background: color-mix(in srgb, var(--brand-success), transparent 84%); color: color-mix(in srgb, var(--brand-success), #166534 30%); } .method-get { background: color-mix(in srgb, var(--brand-primary), transparent 84%); color: var(--brand-primary); } .api-docs-code-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: stretch; min-width: 0; } .api-docs-code-pair > * { min-width: 0; } .api-docs-code-block { overflow: hidden; border-radius: 20px; border: 1px solid var(--doc-code-border); background: var(--doc-code-bg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); display: flex; flex-direction: column; min-height: 100%; min-width: 0; } .api-docs-code-block--full { margin-top: 1rem; } .api-docs-code-head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.9rem 1rem; border-bottom: 1px solid color-mix(in srgb, var(--doc-code-border), transparent 22%); background: rgba(15, 23, 42, 0.35); } .api-docs-code-title { color: color-mix(in srgb, var(--doc-code-text), var(--brand-primary) 26%); font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; } .api-docs-copy-btn { display: inline-flex; align-items: center; gap: 0.45rem; flex-shrink: 0; border: 1px solid color-mix(in srgb, var(--doc-code-text), transparent 78%); background: rgba(15, 23, 42, 0.45); color: var(--doc-code-text); border-radius: 999px; padding: 0.42rem 0.78rem; font-size: 0.76rem; font-weight: 700; line-height: 1; cursor: pointer; transition: 0.18s ease; } .api-docs-copy-btn:hover { background: color-mix(in srgb, var(--brand-primary), transparent 78%); border-color: color-mix(in srgb, var(--brand-primary), transparent 54%); color: #ffffff; } .api-docs-copy-btn.is-copied { background: color-mix(in srgb, var(--brand-success), transparent 78%); border-color: color-mix(in srgb, var(--brand-success), transparent 46%); color: #dcfce7; } .api-docs-code-block pre { margin: 0; padding: 1.05rem 1.1rem; overflow-x: auto; overflow-y: hidden; max-width: 100%; background: transparent; flex: 1 1 auto; min-height: 0; } .api-docs-code-block code { color: var(--doc-code-text); display: block; font-size: 0.88rem; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; background: transparent; } .api-docs-table-card { overflow: hidden; margin-bottom: 1rem; } .api-docs-table-card table { width: 100%; border-collapse: collapse; } .api-docs-table-card th, .api-docs-table-card td { padding: 0.9rem 1rem; border-bottom: 1px solid var(--doc-border); text-align: left; vertical-align: top; } .api-docs-table-card th { color: var(--doc-text); font-size: 0.84rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 800; background: color-mix(in srgb, var(--doc-surface), var(--doc-surface-strong) 55%); } .api-docs-table-card td { color: var(--doc-muted); line-height: 1.55; } .api-docs-table-card tr:last-child td { border-bottom: 0; } .api-docs-page code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.88em; } @media (max-width: 1199.98px) { .api-docs-layout { grid-template-columns: 1fr; } .api-docs-sidebar { position: static; top: auto; } .api-docs-grid--two, .api-docs-grid--three { grid-template-columns: 1fr; } } @media (max-width: 991.98px) { .api-docs-header-row, .api-docs-code-pair, .api-docs-install-row { grid-template-columns: 1fr; display: grid; } .api-docs-grid, .api-docs-grid--two, .api-docs-grid--three { grid-template-columns: 1fr; } .api-docs-callout { min-width: 0; } } @media (max-width: 767.98px) { .api-docs-page { padding: 104px 0 48px; } .api-docs-shell { width: min(100%, calc(100% - 1rem)); } .api-docs-page .container { padding-left: 1rem; padding-right: 1rem; } .api-docs-header, .api-docs-section { padding: 1.2rem; border-radius: 22px; } .api-docs-table-card { overflow-x: auto; } .api-docs-table-card table { min-width: 680px; } } /*-------------------------------------------------------------- # Developer Landing --------------------------------------------------------------*/ .developer-landing-page { --developer-bg: var(--brand-surface-soft); --developer-surface: color-mix(in srgb, var(--brand-surface), transparent 12%); --developer-surface-strong: var(--brand-surface); --developer-surface-soft: var(--brand-surface-muted); --developer-border: color-mix(in srgb, var(--brand-primary), transparent 86%); --developer-border-strong: color-mix(in srgb, var(--brand-text-strong), transparent 90%); --developer-text: var(--heading-color); --developer-muted: var(--brand-text-muted); --developer-primary: var(--brand-primary); --developer-primary-dark: var(--brand-primary-strong); --developer-accent: var(--brand-attention); --developer-success: var(--brand-success); --developer-warning: var(--brand-attention); --developer-shadow: 0 28px 70px rgba(0, 26, 52, 0.12); position: relative; min-height: 100vh; padding: 112px 0 80px; background: radial-gradient(circle at top left, color-mix(in srgb, var(--brand-primary), transparent 84%), transparent 28%), radial-gradient(circle at right center, color-mix(in srgb, var(--brand-attention), transparent 88%), transparent 24%), linear-gradient(180deg, color-mix(in srgb, var(--developer-bg), #ffffff 24%) 0%, var(--developer-bg) 100%); overflow: hidden; } body.dark .developer-landing-page { --developer-bg: var(--brand-surface-soft); --developer-surface: color-mix(in srgb, var(--brand-surface), transparent 18%); --developer-surface-strong: var(--brand-surface-muted); --developer-surface-soft: var(--brand-surface-raised); --developer-border: color-mix(in srgb, var(--brand-primary), transparent 82%); --developer-border-strong: color-mix(in srgb, var(--brand-text-strong), transparent 92%); --developer-text: var(--heading-color); --developer-muted: var(--brand-text-muted); --developer-primary: var(--brand-primary); --developer-primary-dark: var(--brand-primary-strong); --developer-accent: var(--brand-attention); --developer-success: var(--brand-success); --developer-warning: var(--brand-attention); --developer-shadow: 0 30px 80px rgba(0, 0, 0, 0.34); background: radial-gradient(circle at top left, color-mix(in srgb, var(--brand-primary), transparent 78%), transparent 28%), radial-gradient(circle at right center, color-mix(in srgb, var(--brand-attention), transparent 88%), transparent 24%), linear-gradient(180deg, color-mix(in srgb, var(--developer-bg), #000000 12%) 0%, var(--developer-bg) 100%); } .developer-page-glow { position: absolute; border-radius: 999px; filter: blur(10px); pointer-events: none; } .developer-page-glow-one { top: 120px; right: -120px; width: 320px; height: 320px; background: rgba(0, 91, 255, 0.10); } .developer-page-glow-two { bottom: 80px; left: -120px; width: 260px; height: 260px; background: rgba(184, 132, 56, 0.10); } .developer-shell { position: relative; z-index: 1; max-width: none; padding-left: 2rem; padding-right: 2rem; } .developer-hero, .developer-section { position: relative; border: 1px solid var(--developer-border); border-radius: 30px; background: var(--developer-surface); backdrop-filter: blur(18px); box-shadow: var(--developer-shadow); } .developer-hero { padding: 2rem; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr); gap: 1.4rem; margin-bottom: 1.25rem; } .developer-kicker, .developer-eyebrow, .developer-flow-intro-badge, .developer-integration-label { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.42rem 0.85rem; border-radius: 999px; border: 1px solid var(--developer-border); background: rgba(0, 91, 255, 0.08); color: var(--developer-primary); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; } body.dark .developer-kicker, body.dark .developer-eyebrow, body.dark .developer-flow-intro-badge, body.dark .developer-integration-label { background: rgba(96, 165, 250, 0.14); } .developer-hero h1 { margin: 1rem 0 0; color: var(--developer-text); font-size: clamp(2.15rem, 4.4vw, 3.55rem); line-height: 1.2; letter-spacing: 0; font-weight: 700; max-width: 640px; } .developer-hero-lead, .developer-hero-sub { color: var(--developer-muted); max-width: 720px; } .developer-hero-lead { margin: 1rem 0 0; font-size: 1.12rem; line-height: 1.6; } .developer-hero-sub { margin: 0.8rem 0 0; font-size: 1rem; line-height: 1.6; } .developer-actions { margin-top: 1.35rem; display: flex; flex-wrap: wrap; gap: 0.8rem; } .developer-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0.78rem 1.15rem; border-radius: 14px; border: 1px solid transparent; text-decoration: none; font-size: 0.96rem; font-weight: 700; transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, color 0.22s ease; } .developer-btn:hover { transform: translateY(-1px); text-decoration: none; } .developer-btn.w-100 { width: 100%; } .developer-btn-primary { background: linear-gradient(135deg, var(--developer-primary) 0%, var(--developer-primary-dark) 100%); color: #ffffff; box-shadow: 0 16px 36px rgba(0, 91, 255, 0.22); } .developer-btn-primary:hover { color: #ffffff; box-shadow: 0 20px 40px rgba(0, 91, 255, 0.28); } .developer-btn-secondary { border-color: var(--developer-border-strong); background: transparent; color: var(--developer-text); } .developer-btn-secondary:hover { color: var(--developer-text); background: rgba(0, 91, 255, 0.05); } .developer-btn-disabled { background: var(--developer-surface-soft); border-color: var(--developer-border); color: var(--developer-muted); cursor: not-allowed; } .developer-hero-pills { margin-top: 1.15rem; display: flex; flex-wrap: wrap; gap: 0.65rem; } .developer-hero-pills span { display: inline-flex; align-items: center; padding: 0.58rem 0.9rem; border-radius: 999px; border: 1px solid var(--developer-border); background: var(--developer-surface-strong); color: var(--developer-text); font-size: 0.88rem; font-weight: 700; } .developer-hero-card { position: relative; overflow: hidden; border-radius: 24px; border: 1px solid var(--developer-border); background: linear-gradient(180deg, var(--developer-surface-strong) 0%, var(--developer-surface-soft) 100%); padding: 1.2rem; } .developer-hero-visual { display: flex; align-items: center; justify-content: center; min-height: 100%; padding: 0; background: transparent; border: 0; box-shadow: none; overflow: visible; } .developer-flow-intro h3, .developer-flow-step h3, .developer-benefit-card h3, .developer-use-case-card h3, .developer-integration-card h3, .developer-empty-state h3 { margin: 0.9rem 0 0; color: var(--developer-text); font-size: 1.26rem; font-weight: 700; line-height: 1.2; letter-spacing: 0; } .developer-flow-intro p, .developer-flow-step p, .developer-benefit-card p, .developer-use-case-card p, .developer-integration-card p, .developer-empty-state p, .developer-section-heading p { margin: 0.7rem 0 0; color: var(--developer-muted); line-height: 1.6; } .developer-hero-image { width: 100%; max-width: 640px; object-fit: contain; filter: drop-shadow(0 22px 48px rgba(0, 26, 52, 0.20)); } .developer-section { padding: 1.65rem; margin-bottom: 1.25rem; } .developer-section-heading { max-width: 880px; } .developer-section-heading h2 { margin: 0.7rem 0 0; color: var(--developer-text); font-size: clamp(1.75rem, 3vw, 2.6rem); font-weight: 700; letter-spacing: 0; line-height: 1.2; } .developer-flow-layout { margin-top: 1.35rem; display: grid; grid-template-columns: minmax(290px, 0.84fr) minmax(0, 1.16fr); gap: 1rem; } .developer-flow-intro, .developer-flow-step, .developer-benefit-card, .developer-use-case-card, .developer-integration-card, .developer-empty-state { border: 1px solid var(--developer-border); border-radius: 22px; background: linear-gradient(180deg, var(--developer-surface-strong) 0%, var(--developer-surface-soft) 100%); padding: 1.15rem; } .developer-flow-points { margin-top: 1rem; display: grid; gap: 0.75rem; } .developer-flow-points article { padding: 0.9rem; border-radius: 16px; border: 1px solid var(--developer-border); background: rgba(0, 91, 255, 0.04); } .developer-flow-points strong, .developer-flow-points span { display: block; } .developer-flow-points strong { color: var(--developer-text); font-size: 0.96rem; font-weight: 700; } .developer-flow-points span { margin-top: 0.35rem; color: var(--developer-muted); line-height: 1.55; font-size: 0.92rem; } .developer-flow-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .developer-step-number, .developer-use-case-card > span { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 16px; background: linear-gradient(135deg, rgba(0, 91, 255, 0.16), rgba(184, 132, 56, 0.10)); color: var(--developer-primary); font-size: 1.15rem; font-weight: 800; } .developer-benefits-grid, .developer-use-cases-grid, .developer-integrations-grid { margin-top: 1.35rem; display: grid; gap: 1rem; } .developer-benefits-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .developer-benefit-card.is-highlight { background: linear-gradient(180deg, rgba(0, 91, 255, 0.10) 0%, var(--developer-surface-strong) 100%); } .developer-use-cases-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .developer-integrations-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .developer-integration-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; } .developer-integration-meta { margin: 1rem 0 1.1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; } .developer-meta-pill, .developer-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.42rem 0.68rem; border-radius: 999px; border: 1px solid var(--developer-border); background: var(--developer-surface-strong); color: var(--developer-muted); font-size: 0.78rem; font-weight: 700; } .developer-meta-pill strong { color: var(--developer-text); font-weight: 800; } .developer-badge.is-success { color: var(--developer-success); border-color: rgba(15, 159, 97, 0.20); background: rgba(15, 159, 97, 0.10); } .developer-badge.is-warning { color: var(--developer-warning); border-color: rgba(217, 119, 6, 0.20); background: rgba(217, 119, 6, 0.10); } .developer-empty-state { grid-column: 1 / -1; text-align: center; padding: 2rem 1.4rem; } @media (max-width: 1199.98px) { .developer-hero, .developer-flow-layout { grid-template-columns: 1fr; } .developer-benefits-grid, .developer-use-cases-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 991.98px) { .developer-flow-grid, .developer-integrations-grid { grid-template-columns: 1fr; } } @media (max-width: 767.98px) { .developer-landing-page { padding: 96px 0 56px; } .developer-shell { padding-left: 1rem; padding-right: 1rem; } .developer-hero, .developer-section { padding: 1.15rem; border-radius: 24px; } .developer-hero h1 { line-height: 1.2; } .developer-benefits-grid, .developer-use-cases-grid { grid-template-columns: 1fr; } .developer-hero-card, .developer-flow-intro, .developer-flow-step, .developer-benefit-card, .developer-use-case-card, .developer-integration-card, .developer-empty-state { border-radius: 20px; } }