/** * proiect.ro Website Styles * * Custom styles for the public website pages. * All colors reference CSS custom properties defined in * custom-theme-website.scss (--ws-* namespace), activated by * data-mdb-theme="website" on . * * To change any color: edit custom-theme-website.scss, rebuild assets. */ /* ============================================================================= Layout Fixes ============================================================================= */ /* Prevent horizontal scroll from Bootstrap row negative margins */ html, body { overflow-x: hidden; } /* ============================================================================= Typography ============================================================================= */ .nicep { line-height: 1.8; } .hero-title { font-family: var(--ws-font-display, 'Fredoka', sans-serif); font-weight: 600; } .section-title { font-family: var(--ws-font-heading, 'Montserrat', sans-serif); font-weight: 600; } /* ============================================================================= Category Gradients - Feature Hubs ============================================================================= */ /* Echipa - Purple gradient */ .category-echipa-background { background-color: var(--ws-cat-echipa-start, #667eea); background-image: linear-gradient(135deg, var(--ws-cat-echipa-start, #667eea) 0%, var(--ws-cat-echipa-end, #764ba2) 100%); color: white; } .category-echipa-text { background: linear-gradient(135deg, var(--ws-cat-echipa-start, #667eea) 0%, var(--ws-cat-echipa-end, #764ba2) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Configurare - Blue gradient */ .category-configurare-background { background-color: var(--ws-cat-configurare-start, #4facfe); background-image: linear-gradient(135deg, var(--ws-cat-configurare-start, #4facfe) 0%, var(--ws-cat-configurare-end, #00f2fe) 100%); color: white; } .category-configurare-text { background: linear-gradient(135deg, var(--ws-cat-configurare-start, #4facfe) 0%, var(--ws-cat-configurare-end, #00f2fe) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Clienti - Green gradient */ .category-clienti-background { background-color: var(--ws-cat-clienti-start, #11998e); background-image: linear-gradient(135deg, var(--ws-cat-clienti-start, #11998e) 0%, var(--ws-cat-clienti-end, #38ef7d) 100%); color: white; } .category-clienti-text { background: linear-gradient(135deg, var(--ws-cat-clienti-start, #11998e) 0%, var(--ws-cat-clienti-end, #38ef7d) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Vanzari - Pink gradient */ .category-vanzari-background { background-color: var(--ws-cat-vanzari-start, #f093fb); background-image: linear-gradient(135deg, var(--ws-cat-vanzari-start, #f093fb) 0%, var(--ws-cat-vanzari-end, #f5576c) 100%); color: white; } .category-vanzari-text { background: linear-gradient(135deg, var(--ws-cat-vanzari-start, #f093fb) 0%, var(--ws-cat-vanzari-end, #f5576c) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Livrare - Green/Cyan gradient */ .category-livrare-background { background-color: var(--ws-cat-livrare-start, #43e97b); background-image: linear-gradient(135deg, var(--ws-cat-livrare-start, #43e97b) 0%, var(--ws-cat-livrare-end, #38f9d7) 100%); color: white; } .category-livrare-text { background: linear-gradient(135deg, var(--ws-cat-livrare-start, #43e97b) 0%, var(--ws-cat-livrare-end, #38f9d7) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Parteneri - Purple/Pink gradient */ .category-parteneri-background { background-color: var(--ws-cat-parteneri-start, #a18cd1); background-image: linear-gradient(135deg, var(--ws-cat-parteneri-start, #a18cd1) 0%, var(--ws-cat-parteneri-end, #fbc2eb) 100%); color: white; } .category-parteneri-text { background: linear-gradient(135deg, var(--ws-cat-parteneri-start, #a18cd1) 0%, var(--ws-cat-parteneri-end, #fbc2eb) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Suport - Red/Pink gradient */ .category-suport-background { background-color: var(--ws-cat-suport-start, #ff9a9e); background-image: linear-gradient(135deg, var(--ws-cat-suport-start, #ff9a9e) 0%, var(--ws-cat-suport-end, #fecfef) 100%); color: white; } .category-suport-text { background: linear-gradient(135deg, var(--ws-cat-suport-start, #ff9a9e) 0%, var(--ws-cat-suport-end, #fecfef) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Analize - Dark Blue gradient */ .category-analize-background { background-color: var(--ws-cat-analize-start, #0c3483); background-image: linear-gradient(135deg, var(--ws-cat-analize-start, #0c3483) 0%, var(--ws-cat-analize-end, #a2b6df) 100%); color: white; } .category-analize-text { background: linear-gradient(135deg, var(--ws-cat-analize-start, #0c3483) 0%, var(--ws-cat-analize-end, #a2b6df) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ============================================================================= Hero Section ============================================================================= */ .hero-section { background: var(--ws-hero-gradient, linear-gradient(135deg, #667eea 0%, #764ba2 100%)); min-height: 60vh; display: flex; align-items: center; } .hero-section-light { background: var(--ws-hero-light-gradient, linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)); min-height: 50vh; display: flex; align-items: center; } /* ============================================================================= Card Styles ============================================================================= */ .feature-card { border: 2px solid transparent; transition: all 0.2s ease-in-out; } .feature-card:hover { border-color: var(--mdb-primary-button, var(--mdb-primary)); transform: translateY(-3px); } .pillar-card { border: none; border-radius: 1rem; overflow: hidden; } .pillar-card .card-body { padding: 2rem; } .pillar-icon { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; border-radius: 50%; margin-bottom: 1.5rem; } /* ============================================================================= Persona/Role Cards ============================================================================= */ .persona-card { border: 2px solid transparent; transition: all 0.2s ease-in-out; } .persona-card:hover { border-color: var(--mdb-primary-button, var(--mdb-primary)); transform: translateY(-3px); } .persona-icon { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--ws-hero-gradient, linear-gradient(135deg, #667eea 0%, #764ba2 100%)); color: white; font-size: 1.5rem; } /* ============================================================================= Business Process Group Cards ============================================================================= */ .process-group-card { position: relative; overflow: hidden; border-radius: 1rem; min-height: 200px; } .process-group-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.1; transition: opacity 0.2s ease-in-out; } .process-group-card:hover::before { opacity: 0.2; } /* ============================================================================= Screenshot / Image Utilities Constrained: fixed height, crops to fill (for cards, thumbnails) Standalone: img-fluid behavior (scales with container, no crop) ============================================================================= */ .card-img-sm, .card-img-md, .card-img-lg { width: 100%; object-fit: cover; object-position: top; } .card-img-sm { height: 120px; } .card-img-md { height: 180px; } .card-img-lg { height: 260px; } /* ============================================================================= Section Spacing ============================================================================= */ .section-padding { padding: 5rem 0; } .section-padding-sm { padding: 3rem 0; } /* ============================================================================= Dropdown Menu Enhancements ============================================================================= */ .dropdown-menu { border: none; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); } .dropdown-item { padding: 0.5rem 1rem; border-radius: 0.25rem; } .dropdown-item:hover { background-color: rgba(var(--mdb-primary-bg-rgb, var(--mdb-primary-rgb)), 0.1); } .dropdown-header { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; } /* ============================================================================= Article Sidebar (used by article.html template) ============================================================================= */ .sidebar-title { font-family: var(--ws-font-heading, 'Montserrat', sans-serif); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mdb-emphasis-color, #000); margin-bottom: 0.5rem; } .sidebar-nav { list-style: none; padding: 0; margin: 0 0 1.5rem 0; } .sidebar-nav li { margin-bottom: 0.25rem; } .sidebar-nav a { display: block; padding: 0.3rem 0.75rem; font-size: 0.8125rem; color: var(--mdb-body-color, #4f4f4f); text-decoration: none; border-radius: 0.25rem; border-left: 2px solid transparent; } .sidebar-nav a:hover { background-color: var(--mdb-tertiary-bg, #f8f9fa); color: var(--mdb-emphasis-color, #000); } .sidebar-nav a.active, .sidebar-nav .active > a { border-left-color: var(--mdb-primary, #3b71ca); color: var(--mdb-primary, #3b71ca); font-weight: 500; } .sidebar-nav .active { display: block; padding: 0.3rem 0.75rem; font-size: 0.8125rem; font-weight: 500; color: var(--mdb-primary, #3b71ca); border-left: 2px solid var(--mdb-primary, #3b71ca); border-radius: 0.25rem; } .sidebar-section { margin-bottom: 1.5rem; } .sidebar-section hr { margin: 1rem 0; border-color: var(--mdb-border-color, #dee2e6); } /* ToC scroll-highlight link */ .toc-link { display: block; padding: 0.25rem 0.75rem; font-size: 0.8125rem; color: var(--mdb-body-color, #4f4f4f); text-decoration: none; border-left: 2px solid transparent; border-radius: 0.25rem; } .toc-link:hover { color: var(--mdb-emphasis-color, #000); background-color: var(--mdb-tertiary-bg, #f8f9fa); } .toc-link.active { border-left-color: var(--mdb-primary, #3b71ca); color: var(--mdb-primary, #3b71ca); font-weight: 500; }