psykumar/abacus-arithmetic-alchemist

1/* Global Styles */2* {3    margin: 0;4    padding: 0;5    box-sizing: border-box;6}7 8html {9    scroll-behavior: smooth;10}11 12body {13    font-family: 'Inter', sans-serif;14    line-height: 1.6;15    color: #333;16}17 18/* Custom Animations */19@keyframes fade-in {20    from {21        opacity: 0;22        transform: translateY(30px);23    }24    to {25        opacity: 1;26        transform: translateY(0);27    }28}29 30@keyframes slide-up {31    from {32        opacity: 0;33        transform: translateY(50px);34    }35    to {36        opacity: 1;37        transform: translateY(0);38    }39}40 41@keyframes bounce-in {42    0% {43        opacity: 0;44        transform: scale(0.3);45    }46    50% {47        transform: scale(1.05);48    }49    70% {50        transform: scale(0.9);51    }52    100% {53        opacity: 1;54        transform: scale(1);55    }56}57 58@keyframes float {59    0%, 100% {60        transform: translateY(0);61    }62    50% {63        transform: translateY(-20px);64    }65}66 67@keyframes count-up {68    from {69        opacity: 0;70    }71    to {72        opacity: 1;73    }74}75 76/* Floating Abacus Animation */77.floating-abacus {78    position: absolute;79    top: 20%;80    right: 10%;81    width: 200px;82    height: 200px;83    background: linear-gradient(135deg, #FF6B35 0%, #FFD23F 100%);84    border-radius: 50%;85    opacity: 0.1;86    animation: float 6s ease-in-out infinite;87}88 89.floating-abacus::before {90    content: '🧮';91    position: absolute;92    top: 50%;93    left: 50%;94    transform: translate(-50%, -50%);95    font-size: 80px;96    opacity: 0.3;97}98 99/* Scroll Indicator */100.scroll-indicator {101    position: absolute;102    bottom: 30px;103    left: 50%;104    transform: translateX(-50%);105    width: 30px;106    height: 50px;107    border: 2px solid #004E89;108    border-radius: 15px;109    opacity: 0.5;110}111 112.scroll-arrow {113    position: absolute;114    top: 8px;115    left: 50%;116    transform: translateX(-50%);117    width: 6px;118    height: 6px;119    border-right: 2px solid #004E89;120    border-bottom: 2px solid #004E89;121    transform: translateX(-50%) rotate(45deg);122    animation: scroll-bounce 2s infinite;123}124 125@keyframes scroll-bounce {126    0%, 20%, 50%, 80%, 100% {127        transform: translateX(-50%) translateY(0) rotate(45deg);128    }129    40% {130        transform: translateX(-50%) translateY(10px) rotate(45deg);131    }132    60% {133        transform: translateX(-50%) translateY(5px) rotate(45deg);134    }135}136 137/* Animation Classes */138.animate-fade-in {139    animation: fade-in 1s ease-out;140}141 142.animate-slide-up {143    animation: slide-up 1s ease-out 0.3s both;144}145 146.animate-bounce-in {147    animation: bounce-in 0.8s ease-out 0.6s both;148}149 150/* Button Styles */151.btn-primary {152    display: inline-flex;153    align-items: center;154    padding: 12px 24px;155    background: linear-gradient(135deg, #FF6B35 0%, #FFD23F 100%);156    color: white;157    font-weight: 600;158    border-radius: 50px;159    text-decoration: none;160    transition: all 0.3s ease;161    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);162}163 164.btn-primary:hover {165    transform: translateY(-2px);166    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);167}168 169.btn-secondary {170    display: inline-flex;171    align-items: center;172    padding: 12px 24px;173    background: transparent;174    color: #004E89;175    font-weight: 600;176    border: 2px solid #004E89;177    border-radius: 50px;178    text-decoration: none;179    transition: all 0.3s ease;180}181 182.btn-secondary:hover {183    background: #004E89;184    color: white;185}186 187.btn-accent {188    display: inline-flex;189    align-items: center;190    padding: 16px 32px;191    background: #FFD23F;192    color: #004E89;193    font-weight: 600;194    border-radius: 50px;195    text-decoration: none;196    transition: all 0.3s ease;197    box-shadow: 0 4px 15px rgba(255, 210, 63, 0.3);198}199 200.btn-accent:hover {201    transform: translateY(-2px);202    box-shadow: 0 6px 20px rgba(255, 210, 63, 0.4);203}204 205.btn-primary-small {206    padding: 8px 16px;207    background: linear-gradient(135deg, #FF6B35 0%, #FFD23F 100%);208    color: white;209    font-weight: 500;210    border-radius: 25px;211    text-decoration: none;212    transition: all 0.3s ease;213}214 215.btn-primary-small:hover {216    transform: translateY(-1px);217    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);218}219 220/* Feature Cards */221.feature-card {222    background: white;223    padding: 2rem;224    border-radius: 20px;225    text-align: center;226    transition: all 0.3s ease;227    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);228}229 230.feature-card:hover {231    transform: translateY(-10px);232    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);233}234 235.feature-icon {236    width: 80px;237    height: 80px;238    border-radius: 50%;239    display: flex;240    align-items: center;241    justify-content: center;242    margin: 0 auto 1.5rem;243    font-size: 32px;244}245 246.feature-title {247    font-size: 1.5rem;248    font-weight: 600;249    color: #004E89;250    margin-bottom: 1rem;251}252 253.feature-description {254    color: #666;255    line-height: 1.6;256}257 258/* Course Cards */259.course-card {260    background: white;261    border-radius: 20px;262    overflow: hidden;263    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);264    transition: all 0.3s ease;265}266 267.course-card:hover {268    transform: translateY(-5px);269    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);270}271 272.course-image {273    position: relative;274    height: 200px;275    overflow: hidden;276}277 278.course-overlay {279    position: absolute;280    top: 1rem;281    right: 1rem;282}283 284.course-tag {285    background: rgba(255, 255, 255, 0.9);286    color: #004E89;287    padding: 0.5rem 1rem;288    border-radius: 20px;289    font-size: 0.875rem;290    font-weight: 600;291}292 293.course-title {294    font-size: 1.5rem;295    font-weight: 700;296    color: #004E89;297    margin-bottom: 0.5rem;298}299 300.course-description {301    color: #666;302    margin-bottom: 1.5rem;303}304 305.course-features {306    list-style: none;307    margin-bottom: 1.5rem;308}309 310.course-features li {311    display: flex;312    align-items: center;313    margin-bottom: 0.5rem;314    color: #555;315}316 317.course-features i {318    margin-right: 0.5rem;319    width: 16px;320    height: 16px;321}322 323.course-footer {324    display: flex;325    justify-content: space-between;326    align-items: center;327    margin-top: 1.5rem;328}329 330.course-price {331    font-size: 1.25rem;332    font-weight: 700;333    color: #FF6B35;334}335 336/* Stats Section */337.stat-item {338    text-align: center;339}340 341.stat-number {342    font-size: 3rem;343    font-weight: 700;344    margin-bottom: 0.5rem;345    animation: count-up 2s ease-out;346}347 348.stat-label {349    font-size: 1.125rem;350    opacity: 0.9;351}352 353/* Testimonials */354.testimonial-slider {355    overflow: hidden;356    position: relative;357}358 359.testimonial-track {360    display: flex;361    gap: 2rem;362    animation: scroll 30s linear infinite;363}364 365.testimonial-card {366    min-width: 400px;367    background: white;368    padding: 2rem;369    border-radius: 20px;370    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);371}372 373.testimonial-content {374    margin-bottom: 1.5rem;375}376 377.testimonial-content p {378    font-style: italic;379    color: #555;380    line-height: 1.6;381}382 383.testimonial-author {384    display: flex;385    align-items: center;386    gap: 1rem;387}388 389.author-image {390    width: 60px;391    height: 60px;392    border-radius: 50%;393    object-fit: cover;394}395 396.author-image + div h4 {397    font-weight: 600;398    color: #004E89;399}400 401.author-image + div span {402    color: #666;403    font-size: 0.875rem;404}405 406@keyframes scroll {407    0% {408        transform: translateX(0);409    }410    100% {411        transform: translateX(-50%);412    }413}414 415/* Contact Section */416.contact-item {417    text-align: center;418}419 420.contact-icon {421    width: 48px;422    height: 48px;423    margin: 0 auto 1rem;424}425 426.contact-item h3 {427    font-size: 1.25rem;428    font-weight: 600;429    margin-bottom: 0.5rem;430}431 432.contact-item p {433    opacity: 0.9;434}435 436/* Responsive Design */437@media (max-width: 768px) {438    .floating-abacus {439        display: none;440    }441    442    .testimonial-track {443        animation: none;444        flex-direction: column;445    }446    447    .testimonial-card {448        min-width: 100%;449    }450    451    .stat-number {452        font-size: 2rem;453    }454    455    .course-footer {456        flex-direction: column;457        gap: 1rem;458    }459}460 461/* Web Components Styles */462custom-navbar {463    display: block;464}465 466custom-footer {467    display: block;468}