/* ========================================================================== Diamontis.fr V2 — Corporate Premium Design System Bootstrap 5.3 overrides + custom components Light/Dark theme support via .dia-dark on ========================================================================== */ /* -------------------------------------------------------------------------- 1. CSS Custom Properties (Design Tokens V2) -------------------------------------------------------------------------- */ :root { /* Primary palette */ --primary: #4a1a8a; --primary-light: #6b3fa0; --primary-hover: #5a2599; --primary-dark: #3a1070; --primary-rgb: 74, 26, 138; /* Accents */ --secondary: #4361ee; --secondary-hover: #3651d4; --secondary-rgb: 67, 97, 238; --accent-start: #8b5cf6; --accent-end: #6366f1; --success: #8db549; --success-hover: #7aa33a; --success-rgb: 141, 181, 73; /* Neutrals — Light theme */ --dark: #0f0a1a; --dark-rgb: 15, 10, 26; --heading-color: #1a1033; --body-color: #4a4560; --light: #fff; --light-bg: #f3f0fb; --border-color: #ddd8ee; --surface: #ffffff; --surface-hover: #f3f0fb; /* Light theme specific — topbar/footer keep their dark aesthetic */ --topbar-bg: #0f0a1a; --footer-bg: #0f0a1a; --footer-copyright-bg: #1a1030; /* Light theme glass & glow */ --glass-bg: rgba(74, 26, 138, 0.04); --glass-border: rgba(74, 26, 138, 0.10); /* Pricing tiers */ --silver: #8ebf45; --gold: #4361ee; --diamond: #8b5cf6; /* Spacing & shapes */ --border-radius: 12px; --border-radius-sm: 8px; --border-radius-lg: 20px; --border-radius-pill: 50px; --shadow-sm: 0 2px 8px rgba(74, 26, 138, 0.08); --shadow-md: 0 8px 30px rgba(74, 26, 138, 0.13); --shadow-lg: 0 20px 60px rgba(74, 26, 138, 0.18); --shadow-glow: 0 0 40px rgba(139, 92, 246, 0.20); /* Bootstrap overrides */ --bs-primary: var(--primary); --bs-primary-rgb: var(--primary-rgb); --bs-link-color: var(--primary); --bs-link-hover-color: var(--primary-hover); --bs-body-font-family: 'Inter', system-ui, -apple-system, sans-serif; --bs-body-font-size: 16px; --bs-body-line-height: 1.7; --bs-body-color: var(--body-color); } /* -------------------------------------------------------------------------- 1b. Dark Theme Tokens -------------------------------------------------------------------------- */ .dia-dark { --heading-color: #f0ecf8; --body-color: #b0adc0; --light: #0f0a1a; --light-bg: #150f28; --border-color: #2a2045; --surface: #1a1330; --surface-hover: #201840; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.20); --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.30); --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.40); /* Dark theme glass & glow */ --glass-bg: rgba(255, 255, 255, 0.06); --glass-border: rgba(255, 255, 255, 0.10); /* Dark theme topbar/footer — same dark background */ --topbar-bg: #0f0a1a; --footer-bg: #0f0a1a; --footer-copyright-bg: #1a1030; } .dia-dark body { background: var(--light); color: var(--body-color); } .dia-dark .text-muted { color: var(--body-color) !important; } .dia-dark .card-title, .dia-dark .card-text { color: var(--heading-color); } .dia-dark .card-footer { border-color: var(--border-color); background: var(--surface-hover); } .dia-dark .form-control, .dia-dark .form-select { background: var(--surface); color: var(--heading-color); border-color: var(--border-color); } .dia-dark .form-control::placeholder { color: rgba(176, 173, 192, 0.5); } .dia-dark .form-control:focus, .dia-dark .form-select:focus { background: var(--surface-hover); color: var(--heading-color); } .dia-dark .btn-close { filter: invert(1); } /* Links in dark mode — override Bootstrap link color for readable contrast */ .dia-dark { --bs-link-color: var(--accent-start); --bs-link-hover-color: var(--accent-end); } /* -------------------------------------------------------------------------- 1c. Light Theme Component Overrides Light theme base is :root — these selectors add specificity where needed to override Bootstrap defaults or hardcoded values. -------------------------------------------------------------------------- */ /* Text muted — use body-color token for correct contrast */ .text-muted { color: var(--body-color) !important; } /* Cards in light — clear white surface with soft border */ .card-title { color: var(--heading-color); } .card-text { color: var(--body-color); } .card-footer { border-color: var(--border-color); background: var(--surface-hover); } /* Nav tabs light — border bottom uses token */ .nav-tabs { border-bottom-color: var(--border-color); } /* Mobile offcanvas menu — light surface */ .offcanvas { background: var(--surface); color: var(--heading-color); } /* -------------------------------------------------------------------------- 2. Typography — Inter + Space Grotesk -------------------------------------------------------------------------- */ body { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 16px; line-height: 1.7; color: var(--body-color); background: #0f0a1a; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; transition: background-color 0.3s ease, color 0.3s ease; } h1, h2, h3, h4, h5, h6 { font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif; color: var(--heading-color); line-height: 1.25; letter-spacing: -0.02em; transition: color 0.3s ease; } h1 { font-weight: 700; } h2 { font-weight: 700; } h3 { font-weight: 700; } h4 { font-weight: 600; } h5 { font-weight: 600; } h6 { font-weight: 600; } a { color: var(--primary); text-decoration: none; transition: color 0.3s ease; } a:hover { color: var(--primary-hover); text-decoration: none; } .dia-dark a { color: var(--accent-start); } .dia-dark a:hover { color: var(--accent-end); } .dia-dark .btn-accent, .dia-dark .btn-accent:hover, .dia-dark .btn-accent:focus { color: #fff; } p { margin-bottom: 1rem; } .lead { font-size: 1.2em; line-height: 1.8; color: var(--body-color); font-weight: 400; } /* Gradient text utility */ .dia-gradient-text { background: linear-gradient(135deg, var(--accent-start), var(--accent-end)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* -------------------------------------------------------------------------- 2b. RGAA — Skip Link -------------------------------------------------------------------------- */ .dia-skip-link { position: absolute; top: -100px; left: 16px; background: var(--primary); color: #fff; padding: 12px 24px; border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm); font-weight: 600; font-size: 14px; z-index: 100000; transition: top 0.2s ease; } .dia-skip-link:focus { top: 0; color: #fff; outline: 3px solid var(--accent-start); outline-offset: 2px; } /* -------------------------------------------------------------------------- 2c. Focus visible (RGAA) -------------------------------------------------------------------------- */ :focus-visible { outline: 3px solid var(--accent-start); outline-offset: 2px; } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--accent-start); outline-offset: 2px; } /* -------------------------------------------------------------------------- 3. Bootstrap Overrides -------------------------------------------------------------------------- */ /* Buttons */ .btn { font-family: 'Inter', system-ui, sans-serif; font-weight: 600; border-radius: var(--border-radius-sm); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); letter-spacing: -0.01em; padding: 10px 24px; font-size: 15px; position: relative; overflow: hidden; } .btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-light)); border: none; color: #fff; box-shadow: 0 4px 15px rgba(74, 26, 138, 0.3); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background: linear-gradient(135deg, var(--primary-light), var(--primary)); color: #fff; box-shadow: 0 6px 25px rgba(74, 26, 138, 0.4); transform: translateY(-2px); } .btn-accent { background: linear-gradient(135deg, var(--accent-start), var(--accent-end)); border: none; color: #fff; box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3); } .btn-accent:hover, .btn-accent:focus { background: linear-gradient(135deg, var(--accent-end), var(--accent-start)); color: #fff; box-shadow: 0 6px 25px rgba(139, 92, 246, 0.4); transform: translateY(-2px); } .btn-secondary { background: var(--success); border-color: var(--success); color: #fff; } .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active { background: var(--success-hover); border-color: var(--success-hover); color: #fff; } .btn-outline-primary { color: var(--primary); border: 2px solid var(--primary); background: transparent; } .btn-outline-primary:hover, .btn-outline-primary:focus { background: var(--primary); border-color: var(--primary); color: #fff; transform: translateY(-2px); } .btn-outline-light { border: 2px solid rgba(255, 255, 255, 0.8); color: #fff; } .btn-outline-light:hover { background: #fff; color: var(--primary); border-color: #fff; } .btn-lg { padding: 14px 36px; font-size: 16px; border-radius: var(--border-radius); } .btn-pill { border-radius: var(--border-radius-pill); } /* Badge */ .badge.bg-primary { background: linear-gradient(135deg, var(--accent-start), var(--accent-end)) !important; } /* Alerts */ .alert { border-radius: var(--border-radius-sm); border: none; font-weight: 500; } /* Nav tabs */ .nav-tabs .nav-link { color: var(--body-color); font-weight: 600; border-radius: 0; padding: 12px 24px; border: none; border-bottom: 3px solid transparent; transition: all 0.3s ease; } .nav-tabs .nav-link:hover { color: var(--primary); border-bottom-color: rgba(74, 26, 138, 0.3); } .nav-tabs .nav-link.active { color: var(--primary); border-bottom-color: var(--primary); background: transparent; } /* Form controls */ .form-label { color: var(--heading-color); font-weight: 600; font-size: 14px; margin-bottom: 6px; } .form-control, .form-select { border-radius: var(--border-radius-sm); border: 2px solid var(--border-color); padding: 12px 16px; font-size: 15px; transition: all 0.3s ease; background: var(--surface); color: var(--heading-color); } .form-control::placeholder { color: rgba(74, 69, 96, 0.45); } .form-control:focus, .form-select:focus { border-color: var(--accent-start); box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.12); background: var(--surface); color: var(--heading-color); } /* Cards */ .card { border-radius: var(--border-radius); border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); background: var(--surface); } .card:hover { box-shadow: var(--shadow-md); } /* Text utilities */ .text-primary { color: var(--primary) !important; } .text-accent { color: var(--accent-start) !important; } /* -------------------------------------------------------------------------- 4. Preloader -------------------------------------------------------------------------- */ .dia-preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--light); display: flex; align-items: center; justify-content: center; z-index: 99999; transition: opacity 0.6s ease, visibility 0.6s ease; } .dia-dark .dia-preloader { background: linear-gradient(135deg, var(--dark), #1a0f2e); } .dia-preloader.loaded { opacity: 0; visibility: hidden; } .dia-preloader .spinner { width: 48px; height: 48px; border: 3px solid rgba(139, 92, 246, 0.2); border-top-color: var(--accent-start); border-radius: 50%; animation: dia-spin 0.8s linear infinite; } @keyframes dia-spin { to { transform: rotate(360deg); } } /* -------------------------------------------------------------------------- 5. Top Bar (.dia-topbar) -------------------------------------------------------------------------- */ .dia-topbar { background: var(--topbar-bg); border-bottom: 1px solid rgba(255, 255, 255, 0.06); padding: 8px 0; font-size: 13px; } .dia-topbar a { color: rgba(255, 255, 255, 0.6); text-decoration: none; transition: color 0.3s ease; } .dia-topbar a:hover { color: var(--accent-start); } .dia-topbar .list-inline-item { color: rgba(255, 255, 255, 0.5); } .dia-topbar .list-inline-item i { font-size: 13px; color: var(--accent-start); } .dia-topbar .btn-support { background: linear-gradient(135deg, var(--accent-start), var(--accent-end)); border: none; color: #fff; font-size: 0.8125rem; padding: 3px 14px; border-radius: var(--border-radius-pill); transition: all 0.3s ease; } .dia-topbar .btn-support:hover { box-shadow: 0 0 20px rgba(139, 92, 246, 0.4); transform: translateY(-1px); } /* -------------------------------------------------------------------------- 6. Main Navbar (.dia-navbar) -------------------------------------------------------------------------- */ .dia-navbar { background: rgba(15, 10, 26, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: none; padding: 12px 0; transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1030; border-bottom: none; } .dia-dark .dia-navbar { background: rgba(15, 10, 26, 0.92); } .dia-navbar .navbar-brand img { height: 48px; transition: height 0.3s ease; } .dia-navbar.scrolled { background: rgba(15, 10, 26, 0.98); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2); padding: 6px 0; border-bottom: 1px solid var(--border-color); } .dia-dark .dia-navbar.scrolled { background: rgba(15, 10, 26, 0.98); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3); } .dia-navbar.scrolled .navbar-brand img { height: 38px; } /* Nav links */ .dia-navbar .nav-link { color: rgba(255, 255, 255, 0.85); font-weight: 500; font-size: 15px; padding: 10px 16px; position: relative; transition: color 0.3s ease; border-radius: var(--border-radius-sm); } .dia-navbar .nav-link:hover { color: #fff; background: rgba(139, 92, 246, 0.12); } .dia-dark .dia-navbar .nav-link:hover { background: rgba(139, 92, 246, 0.08); } .dia-navbar .nav-link.active { color: #fff; } .dia-dark .dia-navbar .nav-link.active { color: var(--accent-start); } .dia-navbar .nav-link.active::after { content: ''; position: absolute; bottom: 2px; left: 16px; right: 16px; height: 2px; background: linear-gradient(90deg, var(--accent-start), var(--accent-end)); border-radius: 2px; } /* Dropdown toggle arrow — preserve Bootstrap caret */ .dia-navbar .nav-link.dropdown-toggle::after { display: inline-block; content: ''; border-top: 0.3em solid; border-right: 0.3em solid transparent; border-bottom: 0; border-left: 0.3em solid transparent; vertical-align: 0.15em; margin-left: 0.35em; transition: transform 0.2s ease; } .dia-navbar .nav-item.dropdown.show .dropdown-toggle::after { transform: rotate(180deg); } /* Active underline should not apply to dropdown toggles */ .dia-navbar .nav-link.dropdown-toggle.active::after { position: static; background: none; height: auto; width: auto; left: auto; right: auto; bottom: auto; border-radius: 0; border-top: 0.3em solid; border-right: 0.3em solid transparent; border-bottom: 0; border-left: 0.3em solid transparent; } /* Dropdown on hover (desktop) */ @media (min-width: 992px) { .dia-navbar .nav-item.dropdown:hover > .dropdown-menu { display: block; margin-top: 0; } .dia-navbar .nav-item.dropdown > .dropdown-toggle:hover + .dropdown-menu, .dia-navbar .nav-item.dropdown > .dropdown-menu:hover { display: block; } } /* Dropdown menus */ .dia-navbar .dropdown-menu { background: var(--surface); border: 1px solid var(--border-color); border-radius: var(--border-radius); box-shadow: var(--shadow-lg); min-width: 220px; padding: 8px; margin-top: 8px; animation: dia-dropIn 0.2s ease; } @keyframes dia-dropIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .dia-navbar .dropdown-item { padding: 10px 16px; color: var(--body-color); font-size: 14px; font-weight: 500; border-radius: var(--border-radius-sm); transition: all 0.2s ease; } .dia-navbar .dropdown-item:hover, .dia-navbar .dropdown-item:focus { background: var(--light-bg); color: var(--primary); } .dia-dark .dia-navbar .dropdown-menu { background: #fff; border-color: #e8e4f0; } .dia-dark .dia-navbar .dropdown-item { color: #64607a; } .dia-dark .dia-navbar .dropdown-item:hover, .dia-dark .dia-navbar .dropdown-item:focus { background: #faf8ff; color: #4a1a8a; } /* Social icons in navbar */ .dia-navbar .navbar-nav .nav-link.px-1 { font-size: 15px; color: rgba(255, 255, 255, 0.6); border-radius: 50%; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0; } .dia-navbar .navbar-nav .nav-link.px-1:hover { color: #fff; background: rgba(139, 92, 246, 0.12); } .dia-navbar .navbar-nav .nav-link.px-1::after { display: none; } /* Logo swap light/dark — navbar is always dark, so show white logo there */ .dia-logo-dark { display: none; } .dia-dark .dia-logo-light { display: none; } .dia-dark .dia-logo-dark { display: inline-block; } .dia-navbar .dia-logo-light { display: none; } .dia-navbar .dia-logo-dark { display: inline-block; } /* Theme toggle button */ .dia-theme-toggle { background: none; border: none; cursor: pointer; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--body-color); transition: all 0.3s ease; } .dia-theme-toggle:hover { color: var(--accent-start); background: var(--light-bg); } /* Offcanvas mobile menu */ .offcanvas { border-left: none; background: var(--surface); } .offcanvas-header { background: var(--surface); border-bottom: 1px solid var(--border-color); padding: 16px 20px; } /* Hamburger toggler */ .dia-navbar .navbar-toggler { border: 2px solid rgba(255, 255, 255, 0.2); padding: 6px 10px; border-radius: var(--border-radius-sm); } .dia-navbar .navbar-toggler:focus { box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15); } /* -------------------------------------------------------------------------- 7. Page Header (.dia-page-header) -------------------------------------------------------------------------- */ .dia-page-header { background: linear-gradient(135deg, var(--dark), #1a0f2e 50%, #2d1b69); padding: 60px 0 50px; position: relative; overflow: hidden; } .dia-page-header::before { content: ''; position: absolute; top: -50%; right: -20%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, transparent 70%); border-radius: 50%; } .dia-page-header::after { content: ''; position: absolute; bottom: -30%; left: -10%; width: 300px; height: 300px; background: radial-gradient(circle, rgba(67, 97, 238, 0.10) 0%, transparent 70%); border-radius: 50%; } .dia-page-header h1 { color: #fff; font-size: 32px; font-weight: 700; margin: 0; line-height: 1.3; position: relative; z-index: 1; } .dia-page-header .breadcrumb { margin-bottom: 0; background: transparent; padding: 0; font-size: 14px; position: relative; z-index: 1; } .dia-page-header .breadcrumb-item a { color: rgba(255, 255, 255, 0.7); text-decoration: none; transition: color 0.3s ease; } .dia-page-header .breadcrumb-item a:hover { color: var(--accent-start); } .dia-page-header .breadcrumb-item.active { color: rgba(255, 255, 255, 0.5); } .dia-page-header .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, 0.3); content: "/"; } /* -------------------------------------------------------------------------- 8. Hero Section (.dia-hero) -------------------------------------------------------------------------- */ .dia-hero { min-height: 85vh; display: flex; align-items: center; position: relative; overflow: hidden; background: linear-gradient(135deg, var(--dark) 0%, #1a0f2e 40%, #2d1b69 100%); } /* Orbs replace ::before/::after — see .dia-hero-orbs */ @keyframes dia-float { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(30px, -30px); } } /* Particles canvas */ .dia-particles-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; } .dia-hero[data-controller="particles"] { cursor: default; } .dia-hero[data-controller="particles"] .container { pointer-events: auto; } /* Glow orbs */ .dia-hero-orbs { position: absolute; inset: 0; overflow: hidden; z-index: 0; } .dia-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.15; } .dia-orb-1 { width: 500px; height: 500px; background: radial-gradient(circle, #8b5cf6, transparent 70%); top: -15%; right: -5%; animation: dia-orb-drift-1 14s ease-in-out infinite; } .dia-orb-2 { width: 400px; height: 400px; background: radial-gradient(circle, #6366f1, transparent 70%); bottom: -10%; left: -8%; animation: dia-orb-drift-2 18s ease-in-out infinite; } .dia-orb-3 { width: 300px; height: 300px; background: radial-gradient(circle, #06b6d4, transparent 70%); top: 40%; left: 50%; animation: dia-orb-drift-3 12s ease-in-out infinite; } @keyframes dia-orb-drift-1 { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(-40px, 30px) scale(1.1); } 66% { transform: translate(20px, -20px) scale(0.95); } } @keyframes dia-orb-drift-2 { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(30px, -40px) scale(1.05); } 66% { transform: translate(-20px, 20px) scale(1.1); } } @keyframes dia-orb-drift-3 { 0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.1; } 50% { transform: translate(-50px, -30px) scale(1.15); opacity: 0.2; } } .dia-hero-content { position: relative; z-index: 2; } .dia-hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(139, 92, 246, 0.15); border: 1px solid rgba(139, 92, 246, 0.3); color: var(--accent-start); padding: 8px 20px; border-radius: var(--border-radius-pill); font-size: 14px; font-weight: 600; margin-bottom: 24px; backdrop-filter: blur(10px); } /* Pulse dot for badge */ .dia-pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-start); display: inline-block; animation: dia-pulse 2s ease-in-out infinite; } @keyframes dia-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.6); } 50% { box-shadow: 0 0 0 8px rgba(139, 92, 246, 0); } } .dia-hero h1 { color: #fff; font-size: 52px; font-weight: 700; line-height: 1.15; letter-spacing: -0.03em; margin-bottom: 20px; } .dia-hero p { color: rgba(255, 255, 255, 0.7); font-size: 20px; line-height: 1.7; max-width: 560px; margin-bottom: 36px; } .dia-hero .btn { padding: 14px 32px; font-size: 16px; } .dia-hero .btn-light { background: #fff; color: var(--primary); border: none; box-shadow: 0 4px 20px rgba(255, 255, 255, 0.2); } .dia-hero .btn-light:hover { background: var(--light-bg); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(255, 255, 255, 0.3); } /* Hero visual (right side) */ .dia-hero-visual { position: relative; z-index: 2; } .dia-hero-card { background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--border-radius-lg); padding: 40px; box-shadow: var(--shadow-glow); } .dia-hero-stat { text-align: center; padding: 16px; } .dia-hero-stat .stat-number { font-size: 40px; font-weight: 700; font-family: 'Space Grotesk', 'Inter', sans-serif; color: #fff; line-height: 1; margin-bottom: 6px; } .dia-hero-stat .stat-label { color: rgba(255, 255, 255, 0.6); font-size: 14px; font-weight: 500; } /* -------------------------------------------------------------------------- 9. Sections (.dia-section) -------------------------------------------------------------------------- */ .dia-section { padding: 80px 0; background-color: var(--surface); } .dia-section-sm { padding: 40px 0; } .dia-section-title { text-align: center; margin-bottom: 56px; max-width: 700px; margin-left: auto; margin-right: auto; } .dia-section-title .dia-overline, .dia-overline { display: inline-block; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-start); margin-bottom: 12px; } .dia-section-title h2 { font-size: 36px; font-weight: 700; color: var(--heading-color); margin-bottom: 16px; letter-spacing: -0.02em; } .dia-section-title p { color: var(--body-color); font-size: 17px; line-height: 1.7; } .dia-bg-light { background-color: var(--light-bg); } .dia-bg-dark { background: linear-gradient(135deg, var(--dark), #1a0f2e); } /* -------------------------------------------------------------------------- 10. Call-to-Action (.dia-cta) -------------------------------------------------------------------------- */ .dia-cta { padding: 60px 0; position: relative; overflow: hidden; } .dia-cta::before { content: ''; position: absolute; top: -50%; right: -20%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 60%); border-radius: 50%; } .dia-cta h2 { color: #fff; font-size: 32px; font-weight: 700; margin-bottom: 12px; letter-spacing: -0.02em; } .dia-cta .lead { color: rgba(255, 255, 255, 0.85); font-size: 18px; } .dia-cta-primary { background: linear-gradient(135deg, var(--primary), var(--primary-light)); } .dia-cta-accent { background: linear-gradient(135deg, var(--accent-start), var(--accent-end)); } .dia-cta-dark { background: linear-gradient(135deg, var(--dark), #1a0f2e); } .dia-cta .btn { font-size: 16px; padding: 14px 36px; } /* -------------------------------------------------------------------------- 11. Service Cards (.dia-service-card) -------------------------------------------------------------------------- */ .dia-service-card { background: var(--surface); border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 36px 28px; text-align: center; position: relative; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); height: 100%; overflow: hidden; } .dia-service-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accent-start), var(--accent-end)); opacity: 0; transition: opacity 0.3s ease; } .dia-service-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); border-color: transparent; } .dia-service-card:hover::before { opacity: 1; } .dia-service-icon { width: 80px; height: 80px; border-radius: 20px; background: linear-gradient(135deg, rgba(74, 26, 138, 0.09), rgba(139, 92, 246, 0.09)); display: inline-flex; align-items: center; justify-content: center; font-size: 32px; color: var(--primary); margin-bottom: 20px; transition: all 0.3s ease; } .dia-dark .dia-service-icon { background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(99, 102, 241, 0.12)); color: var(--accent-start); } .dia-service-card:hover .dia-service-icon { background: linear-gradient(135deg, var(--accent-start), var(--accent-end)); color: #fff; transform: scale(1.05); box-shadow: 0 8px 25px rgba(139, 92, 246, 0.3); } /* Service card as link */ .dia-service-card-link { display: block; text-decoration: none; color: inherit; cursor: pointer; } .dia-service-card-link:hover { color: inherit; } /* AI accent icon */ .dia-service-icon-ai { background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(6, 182, 212, 0.12)); color: #6366f1; } .dia-service-card:hover .dia-service-icon-ai { background: linear-gradient(135deg, var(--accent-start), #06b6d4); } .dia-service-card h4 { font-size: 18px; font-weight: 700; margin-bottom: 12px; color: var(--heading-color); } .dia-service-card p { color: var(--body-color); font-size: 15px; line-height: 1.7; margin-bottom: 0; } /* -------------------------------------------------------------------------- 12. Pricing Cards (.dia-pricing-card) -------------------------------------------------------------------------- */ .dia-pricing-card { background: var(--surface); border: 2px solid var(--border-color); border-radius: var(--border-radius-lg); text-align: center; position: relative; overflow: visible; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); height: 100%; display: flex; flex-direction: column; } .dia-pricing-header { padding: 32px 24px 24px; color: #fff; border-radius: calc(var(--border-radius-lg) - 2px) calc(var(--border-radius-lg) - 2px) 0 0; } .dia-pricing-header i { font-size: 36px; margin-bottom: 12px; display: block; } .dia-pricing-header h3 { margin: 0 0 12px; font-size: 22px; font-weight: 700; color: inherit; } .dia-price { font-size: 2.5em; font-weight: 700; font-family: 'Space Grotesk', 'Inter', sans-serif; line-height: 1.1; } .dia-price-period { font-size: 14px; opacity: 0.8; display: block; margin-top: 6px; font-weight: 500; } .dia-pricing-body { flex: 1; padding: 0; } .dia-pricing-body ul { list-style: none; padding: 0; margin: 0; } .dia-pricing-body li { padding: 14px 24px; border-bottom: 1px solid var(--border-color); color: var(--body-color); font-size: 15px; display: flex; align-items: center; gap: 10px; } .dia-pricing-body li i { color: var(--success); font-size: 16px; flex-shrink: 0; } .dia-pricing-body li strong { font-weight: 700; color: var(--heading-color); } .dia-pricing-footer { padding: 24px; } .dia-pricing-popular { position: absolute; top: -14px; right: 20px; background: linear-gradient(135deg, var(--accent-start), var(--accent-end)); color: #fff; padding: 6px 18px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; z-index: 2; border-radius: var(--border-radius-pill); box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3); } .dia-tier-silver .dia-pricing-header { background: linear-gradient(135deg, #7cb336, var(--silver)); } .dia-tier-gold { border-color: var(--secondary); transform: scale(1.05); box-shadow: var(--shadow-md); z-index: 1; position: relative; } .dia-tier-gold .dia-pricing-header { background: linear-gradient(135deg, #3651d4, var(--secondary)); } .dia-tier-diamond .dia-pricing-header { background: linear-gradient(135deg, var(--primary), var(--accent-start)); } .dia-pricing-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); } .dia-tier-gold:hover { transform: scale(1.05) translateY(-4px); } /* -------------------------------------------------------------------------- 13. Partner Cards (.dia-partner-card) -------------------------------------------------------------------------- */ .dia-partner-card { background: var(--surface); border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 32px 24px; text-align: center; height: 100%; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .dia-partner-card:hover { box-shadow: var(--shadow-md); border-color: var(--accent-start); transform: translateY(-4px); } .dia-partner-logo { height: 80px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .dia-partner-logo img { max-height: 80px; max-width: 100%; object-fit: contain; filter: grayscale(100%); opacity: 0.6; transition: all 0.3s ease; } .dia-partner-card:hover .dia-partner-logo img { filter: grayscale(0%); opacity: 1; } .dia-partner-logo-text { font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 28px; font-weight: 700; color: var(--body-color); opacity: 0.5; transition: all 0.3s ease; } .dia-partner-card:hover .dia-partner-logo-text { opacity: 1; color: var(--primary); } .dia-dark .dia-partner-card:hover .dia-partner-logo-text { color: var(--accent-start); } .dia-partner-card h5 { font-size: 16px; font-weight: 700; margin: 16px 0 8px; color: var(--heading-color); } .dia-partner-card p { font-size: 14px; color: var(--body-color); line-height: 1.6; margin-bottom: 0; } /* -------------------------------------------------------------------------- 14. Typewriter (.dia-typewriter) -------------------------------------------------------------------------- */ .dia-typewriter-cursor { display: inline-block; width: 3px; height: 1em; background: var(--accent-start); margin-left: 2px; animation: dia-blink 0.8s step-end infinite; vertical-align: text-bottom; } @keyframes dia-blink { 50% { opacity: 0; } } /* -------------------------------------------------------------------------- 15. Footer -------------------------------------------------------------------------- */ .dia-footer { background: var(--footer-bg); color: rgba(255, 255, 255, 0.5); padding: 64px 0 40px; } .dia-footer h5 { color: #fff; font-weight: 700; font-size: 16px; margin-bottom: 24px; position: relative; padding-bottom: 14px; } .dia-footer h5::after { content: ""; position: absolute; bottom: 0; left: 0; width: 32px; height: 3px; background: linear-gradient(90deg, var(--accent-start), var(--accent-end)); border-radius: 2px; } .dia-footer p { color: rgba(255, 255, 255, 0.5); font-size: 14px; line-height: 1.7; } .dia-footer a { color: rgba(255, 255, 255, 0.5); transition: color 0.3s ease; } .dia-footer a:hover { color: var(--accent-start); } .dia-footer-contact { list-style: none; padding: 0; margin: 0; } .dia-footer-contact li { padding: 6px 0; display: flex; align-items: flex-start; font-size: 14px; color: rgba(255, 255, 255, 0.5); } .dia-footer-contact li i, .dia-footer-contact li svg { margin-right: 12px; width: 20px; min-width: 20px; text-align: center; color: var(--accent-start); margin-top: 4px; flex-shrink: 0; font-size: 14px; } .dia-footer-contact li a { color: rgba(255, 255, 255, 0.5); } .dia-footer-contact li a:hover { color: var(--accent-start); } .dia-footer ul:not(.dia-footer-contact) { list-style: none; padding: 0; margin: 0; } .dia-footer ul:not(.dia-footer-contact) li { padding: 5px 0; } .dia-footer ul:not(.dia-footer-contact) li a { color: rgba(255, 255, 255, 0.5); font-size: 14px; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 6px; } .dia-footer ul:not(.dia-footer-contact) li a:hover { color: var(--accent-start); transform: translateX(3px); } .dia-footer ul:not(.dia-footer-contact) li a i { font-size: 10px; } /* Status list in footer */ .dia-status-list { list-style: none; padding: 0; margin: 0; } .dia-status-list li { display: flex; align-items: center; gap: 10px; padding: 6px 0; color: rgba(255, 255, 255, 0.5); font-size: 14px; } .dia-status-led { width: 8px; height: 8px; border-radius: 50%; background: var(--success); flex-shrink: 0; box-shadow: 0 0 6px rgba(141, 181, 73, 0.6); animation: dia-led-pulse 3s ease-in-out infinite; } @keyframes dia-led-pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 6px rgba(141, 181, 73, 0.6); } 50% { opacity: 0.7; box-shadow: 0 0 3px rgba(141, 181, 73, 0.3); } } .dia-footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: rgba(255, 255, 255, 0.06); border-radius: var(--border-radius-sm); margin: 0 4px 8px; color: rgba(255, 255, 255, 0.5); font-size: 16px; transition: all 0.3s ease; } .dia-footer-social a:hover { background: linear-gradient(135deg, var(--accent-start), var(--accent-end)); color: #fff; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3); } .dia-footer-copyright { background: var(--footer-copyright-bg); padding: 20px 0; border-top: 1px solid rgba(139, 92, 246, 0.08); } .dia-footer-copyright span { color: rgba(255, 255, 255, 0.35); font-size: 13px; } .dia-footer-copyright img { opacity: 0.5; } .dia-copyright-menu { list-style: none; padding: 0; margin: 0; display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 0; } .dia-copyright-menu li { font-size: 13px; } .dia-copyright-menu li + li::before { content: "|"; color: rgba(255, 255, 255, 0.15); padding: 0 10px; } .dia-copyright-menu a { color: rgba(255, 255, 255, 0.35); text-decoration: none; transition: color 0.3s ease; } .dia-copyright-menu a:hover { color: var(--accent-start); } /* -------------------------------------------------------------------------- 16. Google Map -------------------------------------------------------------------------- */ .google-map { width: 100%; height: 400px; border-radius: var(--border-radius); overflow: hidden; } .google-map iframe { width: 100%; height: 100%; border: 0; } /* -------------------------------------------------------------------------- 17. Parallax / Stats -------------------------------------------------------------------------- */ .dia-parallax { background-attachment: fixed; background-size: cover; background-position: center; position: relative; } .dia-parallax::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(15, 10, 26, 0.85), rgba(74, 26, 138, 0.75)); } .dia-stat-item { text-align: center; padding: 24px 16px; position: relative; z-index: 1; } .dia-stat-icon { font-size: 36px; color: var(--accent-start); margin-bottom: 12px; } .dia-stat-number { font-size: 48px; font-weight: 700; font-family: 'Space Grotesk', 'Inter', sans-serif; color: #fff; line-height: 1; margin-bottom: 8px; } .dia-stat-label { color: rgba(255, 255, 255, 0.7); font-size: 15px; font-weight: 500; } /* -------------------------------------------------------------------------- 18. Scroll to Top -------------------------------------------------------------------------- */ .dia-scroll-top { position: fixed; bottom: 24px; right: 24px; width: 44px; height: 44px; background: linear-gradient(135deg, var(--accent-start), var(--accent-end)); color: #fff; border: none; border-radius: var(--border-radius-sm); font-size: 18px; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1000; cursor: pointer; box-shadow: 0 4px 20px rgba(139, 92, 246, 0.3); } .dia-scroll-top:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(139, 92, 246, 0.4); } .dia-scroll-top.visible { opacity: 1; visibility: visible; } /* -------------------------------------------------------------------------- 19. Scroll Animations -------------------------------------------------------------------------- */ [data-appear-animation] { opacity: 0; transform: translateY(30px); transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); } [data-appear-animation].appear { opacity: 1; transform: translateY(0) translateX(0); } [data-appear-animation="slideInLeft"] { transform: translateX(-40px); opacity: 0; } [data-appear-animation="slideInRight"] { transform: translateX(40px); opacity: 0; } [data-appear-animation="scaleIn"] { transform: scale(0.9); opacity: 0; } [data-appear-animation="scaleIn"].appear { transform: scale(1); } /* Reduced motion preference (RGAA) */ @media (prefers-reduced-motion: reduce) { [data-appear-animation] { opacity: 1; transform: none; transition: none; } .dia-hero::before, .dia-hero::after { animation: none; } .dia-pulse-dot { animation: none; } .dia-typewriter-cursor { animation: none; } .dia-preloader { display: none; } .dia-orb { animation: none !important; } .dia-particles-canvas { display: none; } } /* -------------------------------------------------------------------------- 20. Feature Grid (.dia-feature) -------------------------------------------------------------------------- */ .dia-feature { display: flex; gap: 20px; padding: 24px 0; align-items: flex-start; } .dia-feature .dia-feature-icon { align-self: center; } .dia-feature-icon { width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(135deg, rgba(74, 26, 138, 0.09), rgba(139, 92, 246, 0.09)); display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--primary); flex-shrink: 0; transition: all 0.3s ease; } .dia-dark .dia-feature-icon { background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(99, 102, 241, 0.12)); color: var(--accent-start); } .dia-feature:hover .dia-feature-icon { background: linear-gradient(135deg, var(--accent-start), var(--accent-end)); color: #fff; box-shadow: 0 8px 20px rgba(139, 92, 246, 0.25); } /* Centered variant (steps, feature grids) */ .dia-feature-centered { flex-direction: column; align-items: center; text-align: center; } .dia-feature h5 { font-size: 17px; font-weight: 700; margin-bottom: 6px; } .dia-feature p { font-size: 15px; color: var(--body-color); margin-bottom: 0; } /* -------------------------------------------------------------------------- 21. Press Cards -------------------------------------------------------------------------- */ .dia-press-card { background: var(--surface); border: 1px solid var(--border-color); border-radius: var(--border-radius); overflow: hidden; transition: all 0.3s ease; height: 100%; } .dia-press-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); } .dia-press-card .card-title { color: var(--heading-color); } .dia-press-card .card-text { color: var(--body-color) !important; } .dia-press-card .card-footer span { color: var(--body-color) !important; } .dia-press-card .text-muted { color: var(--body-color) !important; } .dia-press-card img { width: 100%; height: 200px; object-fit: cover; } .dia-press-card-body { padding: 24px; } .dia-press-card-body h5 { font-size: 17px; font-weight: 700; margin-bottom: 8px; } .dia-press-card-body p { font-size: 14px; color: var(--body-color); line-height: 1.6; } /* -------------------------------------------------------------------------- 22. AI Section (.dia-ai-section) -------------------------------------------------------------------------- */ .dia-ai-section { background: linear-gradient(135deg, #0a0620 0%, #150f2e 50%, #1a1040 100%); position: relative; overflow: hidden; } .dia-ai-section::before { content: ''; position: absolute; top: -30%; right: -10%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(99, 102, 241, 0.12) 0%, transparent 60%); border-radius: 50%; animation: dia-float 12s ease-in-out infinite; } .dia-ai-section .dia-overline { color: #06b6d4; } .dia-ai-section h2 { color: #fff; font-size: 36px; margin-bottom: 20px; } .dia-ai-section .lead { color: rgba(255, 255, 255, 0.7); font-size: 17px; } .dia-ai-features { list-style: none; padding: 0; margin: 24px 0 0; } .dia-ai-features li { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .dia-ai-features li:last-child { border-bottom: none; } .dia-ai-feature-icon { width: 48px; height: 48px; border-radius: 12px; background: rgba(99, 102, 241, 0.12); display: flex; align-items: center; justify-content: center; font-size: 22px; color: #06b6d4; flex-shrink: 0; transition: all 0.3s ease; } .dia-ai-features li:hover .dia-ai-feature-icon { background: linear-gradient(135deg, var(--accent-start), #06b6d4); color: #fff; box-shadow: 0 8px 20px rgba(6, 182, 212, 0.2); } .dia-ai-features strong { display: block; color: #fff; font-weight: 600; margin-bottom: 4px; font-size: 15px; } .dia-ai-features span { color: rgba(255, 255, 255, 0.5); font-size: 14px; line-height: 1.5; } /* AI Visual Card */ .dia-ai-visual { position: relative; } .dia-ai-card { background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--border-radius-lg); padding: 32px; position: relative; } .dia-ai-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 32px; padding-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .dia-ai-card-header i { font-size: 24px; color: #06b6d4; } .dia-ai-card-header span { color: #fff; font-weight: 600; font-size: 18px; font-family: 'Space Grotesk', sans-serif; } .dia-ai-stats { display: flex; flex-direction: column; gap: 24px; } .dia-ai-stat { text-align: center; padding: 20px; background: rgba(255, 255, 255, 0.03); border-radius: var(--border-radius); border: 1px solid rgba(255, 255, 255, 0.04); transition: all 0.3s ease; } .dia-ai-stat:hover { background: rgba(99, 102, 241, 0.08); border-color: rgba(99, 102, 241, 0.15); } .dia-ai-stat-value { font-size: 32px; font-weight: 700; font-family: 'Space Grotesk', sans-serif; background: linear-gradient(135deg, var(--accent-start), #06b6d4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 4px; } .dia-ai-stat-label { color: rgba(255, 255, 255, 0.5); font-size: 14px; } .dia-ai-card-footer { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.06); text-align: center; } .dia-ai-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(6, 182, 212, 0.1); border: 1px solid rgba(6, 182, 212, 0.2); color: #06b6d4; padding: 8px 20px; border-radius: var(--border-radius-pill); font-size: 13px; font-weight: 600; } /* -------------------------------------------------------------------------- 23. Utilities -------------------------------------------------------------------------- */ .dia-text { color: var(--primary); } .dia-text-accent { color: var(--accent-start) !important; } .dia-text-success { color: var(--success) !important; } .dia-bg-gradient { background: linear-gradient(135deg, var(--accent-start), var(--accent-end)); } .light-back { background-color: var(--light-bg); } .dia-glass { background: var(--glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-radius: var(--border-radius); } /* CGV PDF Viewer */ .dia-cgv-viewer { width: 100%; height: 80vh; min-height: 600px; border-radius: var(--border-radius); overflow: hidden; border: 1px solid var(--border-color); } .dia-cgv-viewer iframe { width: 100%; height: 100%; border: 0; } /* Tables — shared base using tokens */ .table { color: var(--body-color); border-color: var(--border-color); } .table-bordered > :not(caption) > * > * { border-color: var(--border-color); } .table thead { background: var(--light-bg); color: var(--heading-color); } .table th { color: var(--heading-color); font-weight: 600; } /* Tables dark mode — additional specificity */ .dia-dark .table { color: var(--body-color); border-color: var(--border-color); --bs-table-bg: transparent; --bs-table-color: var(--body-color); } .dia-dark .table-bordered > :not(caption) > * > * { border-color: var(--border-color); } .dia-dark .table-light, .dia-dark .table thead { background: var(--surface-hover); color: var(--heading-color); } /* Nav tabs dark mode */ .dia-dark .nav-tabs .nav-link { color: var(--body-color); } .dia-dark .nav-tabs .nav-link:hover { color: var(--accent-start); } .dia-dark .nav-tabs .nav-link.active { color: var(--accent-start); border-bottom-color: var(--accent-start); background: transparent; } /* Timeline */ .dia-timeline { position: relative; padding-left: 40px; } .dia-timeline::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, var(--accent-start), var(--accent-end), transparent); } .dia-timeline-item { position: relative; padding-bottom: 36px; } .dia-timeline-item:last-child { padding-bottom: 0; } .dia-timeline-marker { position: absolute; left: -39px; top: 24px; width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-start), var(--accent-end)); box-shadow: 0 0 0 4px var(--light), 0 0 12px rgba(139, 92, 246, 0.3); transform: translateX(-50%); } .dia-timeline-content { background: var(--surface); border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 24px; transition: all 0.3s ease; } .dia-timeline-content:hover { box-shadow: var(--shadow-md); transform: translateX(4px); } .dia-timeline-year { display: inline-block; font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 700; color: var(--accent-start); background: rgba(139, 92, 246, 0.08); padding: 4px 12px; border-radius: var(--border-radius-pill); margin-bottom: 8px; } .dia-timeline-content h5 { margin-bottom: 8px; } .dia-timeline-content p { margin-bottom: 0; font-size: 15px; } /* Eco section */ .dia-eco-section { background: var(--light-bg); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); } .dia-eco-section h3 { font-size: 28px; margin-bottom: 16px; } .dia-eco-section p { font-size: 17px; line-height: 1.8; max-width: 700px; margin: 0 auto; } .dia-eco-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(45, 157, 89, 0.1); border: 1px solid rgba(45, 157, 89, 0.2); color: #2d9d59; padding: 8px 20px; border-radius: var(--border-radius-pill); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .dia-divider { height: 3px; width: 60px; background: linear-gradient(90deg, var(--accent-start), var(--accent-end)); border-radius: 2px; margin: 16px 0; } .dia-divider-center { margin-left: auto; margin-right: auto; } /* -------------------------------------------------------------------------- 24. Responsive -------------------------------------------------------------------------- */ @media (max-width: 1199.98px) { .dia-hero h1 { font-size: 44px; } } @media (max-width: 991.98px) { .dia-navbar .nav-link { padding: 10px 16px; border-radius: var(--border-radius-sm); } .dia-navbar .nav-link.active::after { display: none; } .dia-navbar .nav-link:hover, .dia-navbar .nav-link.active { background: var(--light-bg); } .dia-navbar .dropdown-menu { box-shadow: none; border: none; padding-left: 12px; background: var(--light-bg); border-radius: var(--border-radius-sm); animation: none; } .dia-hero { min-height: 70vh; padding: 100px 0 60px; } .dia-hero h1 { font-size: 36px; } .dia-hero p { font-size: 17px; } .dia-tier-gold { transform: none; } .dia-tier-gold:hover { transform: translateY(-4px); } .dia-section { padding: 60px 0; } .dia-section-title h2 { font-size: 30px; } .dia-copyright-menu { justify-content: center; margin-top: 10px; } .dia-footer-ribbon .input-group { max-width: 100%; margin-top: 15px; } .dia-ai-section h2 { font-size: 30px; } .dia-ai-stats { flex-direction: row; flex-wrap: wrap; } .dia-ai-stat { flex: 1; min-width: 140px; } } @media (max-width: 767.98px) { .dia-hero { min-height: auto; padding: 80px 0 50px; } .dia-hero h1 { font-size: 30px; } .dia-hero p { font-size: 16px; margin-bottom: 24px; } .dia-hero .btn { padding: 12px 24px; font-size: 15px; } .dia-section-title h2 { font-size: 26px; } .dia-cta h2 { font-size: 24px; } .dia-page-header { padding: 40px 0 32px; } .dia-page-header h1 { font-size: 24px; text-align: center; } .dia-page-header .breadcrumb { justify-content: center !important; margin-top: 8px; } .dia-footer { padding: 40px 0 24px; text-align: center; } .dia-footer h5::after { left: 50%; transform: translateX(-50%); } .dia-footer-contact li { justify-content: center; } .dia-footer-social { justify-content: center; } .dia-parallax { background-attachment: scroll; } .dia-stat-number { font-size: 36px; } .dia-hero-card { padding: 24px; } .dia-hero-stat .stat-number { font-size: 30px; } .dia-ai-section h2 { font-size: 26px; } .dia-ai-stat-value { font-size: 24px; } } @media (max-width: 575.98px) { .dia-topbar { display: none !important; } .dia-hero h1 { font-size: 26px; } .dia-hero .btn { display: block; width: 100%; margin-bottom: 10px; } .dia-section { padding: 40px 0; } .dia-section-title { margin-bottom: 36px; } .btn-lg { padding: 12px 24px; font-size: 15px; } .dia-ai-stats { flex-direction: column; } .dia-ai-stat { min-width: auto; } }