/** * Copyright 2025 Google LLC * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ .sushruta-landing { min-height: 100vh; background: linear-gradient(135deg, var(--sushruta-bg-primary) 0%, var(--sushruta-bg-secondary) 100%); color: var(--sushruta-text-primary); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 40px 20px; position: relative; overflow: hidden; } /* Background Glowing Orbs */ .orb { position: absolute; width: 400px; height: 400px; border-radius: 50%; filter: blur(120px); opacity: 0.15; pointer-events: none; z-index: 0; } .orb-blue { top: 10%; left: 10%; background: var(--sushruta-accent-blue); animation: floatOrb 12s infinite alternate ease-in-out; } .orb-purple { bottom: 15%; right: 10%; background: var(--sushruta-accent-purple); animation: floatOrb 16s infinite alternate-reverse ease-in-out; } @keyframes floatOrb { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(50px, 30px) scale(1.1); } } /* Header */ .sushruta-header { text-align: center; margin-top: 40px; margin-bottom: 20px; z-index: 1; animation: fadeInDown 0.8s ease-out; } .sushruta-title { font-family: 'Google Sans', sans-serif; font-size: 54px; font-weight: 700; margin: 0; letter-spacing: -1.5px; background: linear-gradient(90deg, #ffffff 30%, var(--sushruta-accent-teal) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; position: relative; } .sushruta-tagline { font-size: 18px; color: var(--sushruta-text-secondary); margin-top: 10px; font-weight: 400; letter-spacing: 0.5px; } /* Main Layout */ .sushruta-main { width: 100%; max-width: 1100px; z-index: 1; display: flex; justify-content: center; align-items: center; flex-grow: 1; margin: 40px 0; } .module-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; width: 100%; } @media (max-width: 768px) { .module-grid { grid-template-columns: 1fr; gap: 30px; } .sushruta-title { font-size: 40px; } } /* Module Cards with Glassmorphism */ .module-card { position: relative; background: var(--sushruta-bg-card); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 24px; padding: 3px; /* For the gradient border */ cursor: pointer; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); animation: fadeInUp 0.8s ease-out; } .card-inner { background: #111124; border-radius: 21px; padding: 40px 30px; height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; transition: background 0.3s ease; } .card-icon { font-size: 48px; margin-bottom: 24px; } .card-title { font-family: 'Google Sans', sans-serif; font-size: 26px; font-weight: 600; color: #ffffff; margin: 0 0 16px 0; } .card-description { font-size: 16px; line-height: 1.6; color: var(--sushruta-text-secondary); margin: 0 0 32px 0; flex-grow: 1; } .card-action { font-family: 'Google Sans', sans-serif; font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 8px; transition: gap 0.3s ease; } .card-action .arrow { transition: transform 0.3s ease; } /* Card hover glow & gradient borders */ .card-previsit .card-border-gradient { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, var(--sushruta-accent-blue) 0%, var(--sushruta-accent-purple) 100%); z-index: -1; opacity: 0.3; transition: opacity 0.4s ease; } .card-radiology .card-border-gradient { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, var(--sushruta-accent-teal) 0%, var(--sushruta-accent-blue) 100%); z-index: -1; opacity: 0.3; transition: opacity 0.4s ease; } /* Hover effects */ .module-card:hover { transform: translateY(-8px) scale(1.01); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); } .card-previsit:hover { box-shadow: 0 0 30px rgba(79, 143, 255, 0.2); } .card-radiology:hover { box-shadow: 0 0 30px rgba(0, 212, 170, 0.2); } .module-card:hover .card-border-gradient { opacity: 1; } .module-card:hover .card-inner { background: #14142b; } .module-card:hover .card-action { gap: 12px; } .module-card:hover .card-action .arrow { transform: translateX(4px); } .card-previsit .card-action { color: var(--sushruta-accent-blue); } .card-radiology .card-action { color: var(--sushruta-accent-teal); } /* Footer & Disclaimer */ .sushruta-footer { width: 100%; max-width: 900px; text-align: center; z-index: 1; margin-top: 40px; animation: fadeInUp 1s ease-out; } .disclaimer-box { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 16px 24px; font-size: 13px; line-height: 1.5; color: #8a8a9a; text-align: justify; margin-bottom: 24px; } .footer-credits { font-size: 13px; color: #6a6a7a; } /* Entrance Animations */ @keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }