CEO.wiki:Homepage.css

/* CEO.wiki Homepage Styles - Modern, Professional Design */

.homepage-container {

   max-width: 1200px;
   margin: 0 auto;
   padding: 0;

}

/* Hero Section */ .homepage-hero {

   background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #60a5fa 100%);
   color: #ffffff;
   padding: 80px 40px;
   border-radius: 20px;
   margin: -20px 0 40px 0;
   text-align: center;
   position: relative;
   overflow: hidden;
   box-shadow: 0 20px 60px rgba(30, 58, 138, 0.4);
   animation: fadeIn 0.8s ease-out;

}

.homepage-hero::before {

   content: ;
   position: absolute;
   top: -50%;
   left: -50%;
   width: 200%;
   height: 200%;
   background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
   animation: heroShimmer 8s infinite;

}

@keyframes heroShimmer {

   0%, 100% { transform: translate(0, 0) rotate(0deg); }
   50% { transform: translate(20px, 20px) rotate(180deg); }

}

.hero-content {

   position: relative;
   z-index: 1;

}

.hero-title {

   font-size: 64px;
   font-weight: 900;
   margin: 0 0 20px 0;
   text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
   letter-spacing: -1px;

}

.hero-subtitle {

   font-size: 28px;
   font-weight: 600;
   margin: 0 0 15px 0;
   opacity: 0.95;

}

.hero-description {

   font-size: 18px;
   opacity: 0.9;
   max-width: 800px;
   margin: 0 auto;
   line-height: 1.6;

}

/* Feature Cards */ .homepage-features {

   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 25px;
   margin: 50px 0;

}

.feature-card {

   background: linear-gradient(145deg, #ffffff 0%, #f9fafb 100%);
   padding: 30px 25px;
   border-radius: 16px;
   text-align: center;
   box-shadow: 
       0 10px 30px rgba(0, 0, 0, 0.08),
       0 2px 8px rgba(0, 0, 0, 0.04);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   border: 1px solid #e5e7eb;
   animation: fadeInUp 0.6s ease-out;
   animation-fill-mode: both;

}

.feature-card:nth-child(1) { animation-delay: 0.1s; } .feature-card:nth-child(2) { animation-delay: 0.2s; } .feature-card:nth-child(3) { animation-delay: 0.3s; } .feature-card:nth-child(4) { animation-delay: 0.4s; }

@keyframes fadeInUp {

   from {
       opacity: 0;
       transform: translateY(30px);
   }
   to {
       opacity: 1;
       transform: translateY(0);
   }

}

.feature-card:hover {

   transform: translateY(-8px);
   box-shadow: 
       0 20px 50px rgba(0, 0, 0, 0.12),
       0 4px 12px rgba(0, 0, 0, 0.06);

}

.feature-icon {

   font-size: 48px;
   margin-bottom: 15px;
   display: block;

}

.feature-card h3 {

   font-size: 20px;
   font-weight: 700;
   color: #1e3a8a;
   margin: 0 0 12px 0;

}

.feature-card p {

   font-size: 15px;
   color: #6b7280;
   line-height: 1.6;
   margin: 0;
   text-align: center;

}

/* Section Styles */ .homepage-section {

   margin: 60px 0;
   padding: 40px;
   background: linear-gradient(145deg, #ffffff 0%, #f9fafb 100%);
   border-radius: 16px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);

}

.section-title {

   font-size: 36px;
   font-weight: 800;
   color: #1e3a8a;
   text-align: center;
   margin: 0 0 40px 0;
   position: relative;
   padding-bottom: 20px;

}

.section-title::after {

   content: ;
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 100px;
   height: 4px;
   background: linear-gradient(90deg, transparent 0%, #3b82f6 50%, transparent 100%);
   border-radius: 2px;

}

/* Content Grid */ .content-grid {

   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 30px;

}

.content-card {

   background: #ffffff;
   padding: 30px;
   border-radius: 12px;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
   border-left: 4px solid #3b82f6;
   transition: transform 0.2s ease;

}

.content-card:hover {

   transform: translateX(4px);

}

.content-card h3 {

   font-size: 22px;
   font-weight: 700;
   color: #1e3a8a;
   margin: 0 0 20px 0;
   border-bottom: 2px solid #e5e7eb;
   padding-bottom: 12px;

}

.content-card ul {

   list-style: none;
   padding: 0;
   margin: 0;

}

.content-card li {

   margin-bottom: 12px;
   padding-left: 20px;
   position: relative;

}

.content-card li::before {

   content: '→';
   position: absolute;
   left: 0;
   color: #3b82f6;
   font-weight: 700;

}

.content-card a {

   color: #3b82f6;
   font-weight: 500;
   text-decoration: none;
   transition: color 0.2s ease;

}

.content-card a:hover {

   color: #1e40af;

}

/* Difference Grid */ .difference-grid {

   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 25px;

}

.difference-item {

   background: #ffffff;
   padding: 25px;
   border-radius: 12px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
   transition: transform 0.3s ease, box-shadow 0.3s ease;

}

.difference-item:hover {

   transform: translateY(-4px);
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);

}

.difference-item h4 {

   font-size: 18px;
   font-weight: 700;
   color: #1e3a8a;
   margin: 0 0 12px 0;

}

.difference-item p {

   font-size: 15px;
   color: #6b7280;
   line-height: 1.6;
   margin: 0;
   text-align: justify;

}

/* Highlight Section */ .highlight-section {

   background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
   border: 2px solid #3b82f6;

}

/* Search Container */ .search-container {

   max-width: 700px;
   margin: 0 auto;

}

.homepage-search {

   display: flex;
   gap: 15px;
   align-items: center;

}

.search-input {

   flex: 1;
   padding: 18px 24px;
   font-size: 16px;
   border: 2px solid #e5e7eb;
   border-radius: 12px;
   transition: border-color 0.3s ease, box-shadow 0.3s ease;
   background: #ffffff;

}

.search-input:focus {

   outline: none;
   border-color: #3b82f6;
   box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);

}

.search-button {

   padding: 18px 36px;
   font-size: 16px;
   font-weight: 700;
   background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
   color: #ffffff;
   border: none;
   border-radius: 12px;
   cursor: pointer;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
   box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);

}

.search-button:hover {

   transform: translateY(-2px);
   box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);

}

/* Footer */ .homepage-footer {

   text-align: center;
   padding: 40px 20px;
   color: #6b7280;
   border-top: 2px solid #e5e7eb;
   margin-top: 60px;

}

.homepage-footer p {

   margin: 10px 0;
   line-height: 1.8;

}

.homepage-footer a {

   color: #3b82f6;
   text-decoration: none;
   font-weight: 500;

}

.homepage-footer a:hover {

   color: #1e40af;

}

/* Animations */ @keyframes fadeIn {

   from { opacity: 0; }
   to { opacity: 1; }

}

/* Mobile Responsiveness */ @media (max-width: 768px) {

   .homepage-hero {
       padding: 50px 20px;
   }
   
   .hero-title {
       font-size: 42px;
   }
   
   .hero-subtitle {
       font-size: 20px;
   }
   
   .hero-description {
       font-size: 16px;
   }
   
   .homepage-section {
       padding: 25px 20px;
   }
   
   .section-title {
       font-size: 28px;
   }
   
   .homepage-search {
       flex-direction: column;
   }
   
   .search-button {
       width: 100%;
   }

}

/* Print Styles */ @media print {

   .homepage-hero {
       background: #1e3a8a !important;
       -webkit-print-color-adjust: exact;
       print-color-adjust: exact;
   }
   
   .feature-card,
   .content-card,
   .difference-item {
       box-shadow: none;
       border: 1px solid #e5e7eb;
   }

}