/* ============================================================ LEGACY PORT What survives of the previous design system's stylesheet. The original _ds_bundle.css carried 666 style rules; measured across all 32 pages, only 76 selected a single element — 89% of it was styling a site that no longer exists. This file is those 76, extracted verbatim and kept in the same cascade position (loaded before redesign.css), so the computed result is unchanged while 590 dead rules and the specificity fights they caused go away. Its Inter @import moved to a in each page's , next to the JetBrains Mono one — a stylesheet @import blocks rendering until it resolves. This is a staging post, not a destination: each rule here should end up as a token in redesign.css or be deleted outright. ============================================================ */ :root { --primary-blue: #0a2540; --secondary-blue: #1e4d7b; --accent-blue: #0066cc; --bright-blue: #00a8ff; --cyan: #00d4ff; --dark: #000000; --dark-gray: #0d1117; --medium-gray: #161b22; --light-gray: #f6f8fa; --white: #ffffff; --text: #24292f; --text-light: #57606a; --border: #d0d7de; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Helvetica Neue', sans-serif; line-height: 1.6; color: var(--text); background: var(--white); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html { scroll-behavior: smooth; scroll-padding-top: 120px; } header { background: var(--dark); color: var(--white); padding: 20px 0; position: sticky; top: 0; z-index: 1000; box-shadow: 0 4px 20px rgba(0,0,0,0.3); border-bottom: 1px solid rgba(255,255,255,0.1); } nav { display: flex; justify-content: space-between; align-items: center; position: relative; } .nav-links { display: flex; list-style: none; gap: 26px; align-items: center; flex-wrap: nowrap; } .nav-links a { color: var(--white); text-decoration: none; font-weight: 500; font-size: 15px; transition: color 0.3s; position: relative; } .btn-primary { display: inline-block; background: var(--bright-blue); color: var(--dark); padding: 18px 40px; border-radius: 8px; text-decoration: none; font-weight: 700; font-size: 18px; transition: all 0.3s; box-shadow: 0 4px 20px rgba(0, 168, 255, 0.3); border: none; cursor: pointer; } .hero { background: linear-gradient(135deg, var(--dark) 0%, var(--dark-gray) 50%, var(--primary-blue) 100%); color: var(--white); padding: 180px 0 140px; text-align: center; position: relative; overflow: hidden; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; } } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } } @keyframes gradientShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } @keyframes shimmer { 0% { background-position: -1000px 0; } 100% { background-position: 1000px 0; } } .hero h1 { font-size: 72px; font-weight: 900; margin-bottom: 30px; line-height: 1.1; letter-spacing: -2px; } .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; margin-top: 40px; } .form-group { margin-bottom: 25px; } .form-group label { display: block; margin-bottom: 8px; font-weight: 600; color: var(--text); font-size: 15px; } .form-group input, .form-group textarea, .form-group select { width: 100%; padding: 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 16px; font-family: inherit; transition: border-color 0.3s; } .form-group textarea { resize: vertical; min-height: 120px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .course-list { display: grid; gap: 30px; margin-top: 50px; } .course-card { background: var(--white); padding: 40px; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); border-left: 6px solid var(--bright-blue); transition: all 0.3s; } .course-card h3 { font-size: 28px; margin-bottom: 20px; color: var(--primary-blue); } .course-meta { display: flex; gap: 30px; margin-bottom: 20px; flex-wrap: wrap; } .course-meta-item { display: flex; align-items: center; gap: 8px; color: var(--text-light); font-size: 15px; } .course-meta-item strong { color: var(--text); } footer { background: var(--dark); color: var(--white); padding: 80px 0 40px; } @media (max-width: 1200px) { .hero h1 { font-size: 60px; } .nav-links { gap: 20px; } .nav-links a { font-size: 14px; } } @media (max-width: 1100px) { .nav-links { gap: 15px; } .nav-links a { font-size: 13px; } } @media (max-width: 1000px) { .nav-links { gap: 10px; } .nav-links a { font-size: 12px; } } @media (max-width: 968px) { .nav-links { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--dark); flex-direction: column; padding: 30px; gap: 20px; transform: translateX(-100%); transition: transform 0.3s; box-shadow: 0 4px 20px rgba(0,0,0,0.3); z-index: 998; overflow-y: auto; border-top: 1px solid rgba(255,255,255,0.1); } header { padding: 15px 0; z-index: 1000; } .hero, .hero.hero-compact { padding: 120px 0 100px; } .hero h1 { font-size: 48px; } .form-row { grid-template-columns: 1fr; } } @media (max-width: 768px) { .hero h1 { font-size: 36px; } .hero, .hero.hero-compact { padding: 80px 0 60px; } .btn-primary, .btn-secondary { width: 100%; max-width: 300px; } .feature-grid { gap: 20px; margin-top: 30px; } } @media (max-width: 480px) { .hero, .hero.hero-compact { padding: 60px 0 50px; } .hero h1 { font-size: 28px; } header { padding: 12px 0; } } .btn-primary, .btn-secondary { position: relative; overflow: hidden; } @keyframes scanline { 0% { transform: translateY(0); } 100% { transform: translateY(4px); } } @keyframes glitch { 0% { transform: translate(0); text-shadow: -2px 0 #00a8ff, 2px 2px #00d4ff; } 20% { transform: translate(-2px, 2px); text-shadow: 2px 0 #00a8ff, -2px -2px #00d4ff; } 40% { transform: translate(-2px, -2px); text-shadow: 2px 2px #00a8ff, -2px 0 #00d4ff; } 60% { transform: translate(2px, 2px); text-shadow: -2px -2px #00a8ff, 2px 0 #00d4ff; } 80% { transform: translate(2px, -2px); text-shadow: -2px 2px #00a8ff, 2px -2px #00d4ff; } 100% { transform: translate(0); text-shadow: -2px 0 #00a8ff, 2px 2px #00d4ff; } } @keyframes neonPulse { 0%, 100% { text-shadow: 0 0 10px rgba(0, 212, 255, 0.8), 0 0 20px rgba(0, 212, 255, 0.6), 0 0 30px rgba(0, 212, 255, 0.4), 0 0 40px rgba(0, 168, 255, 0.2); } 50% { text-shadow: 0 0 15px rgba(0, 212, 255, 1), 0 0 30px rgba(0, 212, 255, 0.8), 0 0 45px rgba(0, 212, 255, 0.6), 0 0 60px rgba(0, 168, 255, 0.4); } } @keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } @keyframes dataStream { 0% { transform: translateY(-100%); opacity: 0; } 10% { opacity: 0.5; } 90% { opacity: 0.5; } 100% { transform: translateY(100vh); opacity: 0; } } @media (max-width: 768px) { input[type="text"], input[type="email"], input[type="tel"], select, textarea { padding: 16px !important; font-size: 16px; min-height: 48px; } textarea { min-height: 100px; } label { font-size: 16px !important; } .btn, .cta-button, button { min-height: 48px !important; padding: 14px 24px !important; } .form-row { grid-template-columns: 1fr !important; } .hero { padding: 80px 0 60px !important; } } @media (max-width: 640px) { .form-row { grid-template-columns: 1fr !important; gap: 20px; } } @media (max-width: 480px) { .hero { padding: 60px 0 40px !important; } } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 968px) { .nav-links { overflow-y: auto; -webkit-overflow-scrolling: touch; } } .tooltip-trigger { position: relative; cursor: help; border-bottom: 1px dotted rgba(0, 168, 255, 0.5); } .tooltip, .tooltip-inline { visibility: hidden; opacity: 0; position: absolute; bottom: 125%; left: 50%; transform: translateX(-50%); background: var(--dark-gray); color: var(--white); padding: 12px 16px; border-radius: 8px; font-size: 13px; font-weight: 500; white-space: normal; max-width: 280px; z-index: 1000; border: 1px solid rgba(0, 168, 255, 0.3); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); transition: opacity 0.3s, visibility 0.3s; pointer-events: none; } @media (max-width: 768px) { .tooltip, .tooltip-inline { white-space: normal; max-width: 200px; font-size: 12px; padding: 10px 12px; left: auto; right: -10px; transform: none; } } .quote-text { margin-top: 30px; font-style: italic; color: var(--text-light); padding-left: 20px; border-left: 3px solid var(--bright-blue); } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @media (max-width: 968px) { .hero, .hero.hero-compact { padding: 100px 0 80px; } } @media (max-width: 768px) { .hero, .hero.hero-compact { padding: 80px 0 60px; } } @media (max-width: 480px) { .hero, .hero.hero-compact { padding: 60px 0 50px; } } .legal-content { max-width: 820px; margin: 0 auto; color: var(--text); font-size: 16px; line-height: 1.75; } .legal-meta { background: var(--light-gray); border-left: 4px solid var(--accent-blue); padding: 18px 24px; margin-bottom: 48px; border-radius: 6px; font-size: 15px; } .legal-meta p { margin: 0; color: var(--text-light); } .legal-meta strong { color: var(--primary-blue); } .legal-content h2 { font-size: 26px; font-weight: 700; color: var(--primary-blue); margin-top: 56px; margin-bottom: 18px; letter-spacing: -0.3px; scroll-margin-top: 140px; } .legal-content h2:first-of-type { margin-top: 0; } .legal-content h3 { font-size: 19px; font-weight: 600; color: var(--primary-blue); margin-top: 32px; margin-bottom: 12px; } .legal-content p { margin-bottom: 18px; } .legal-content ul, .legal-content ol { margin: 0 0 20px 28px; } .legal-content li { margin-bottom: 10px; } .legal-content strong { color: var(--primary-blue); font-weight: 600; } .legal-content a { color: var(--accent-blue); text-decoration: underline; text-underline-offset: 2px; } .legal-content hr { border: none; border-top: 1px solid var(--border); margin: 56px 0; } .legal-content .legal-emphasis { text-transform: uppercase; font-weight: 600; color: var(--primary-blue); } .legal-toc { background: var(--light-gray); padding: 24px 28px; border-radius: 8px; margin-bottom: 48px; } .legal-toc h3 { margin-top: 0; margin-bottom: 14px; font-size: 16px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-light); font-weight: 700; } .legal-toc ol { columns: 2; column-gap: 32px; margin: 0 0 0 22px; font-size: 14px; } .legal-toc li { margin-bottom: 6px; break-inside: avoid; } .legal-toc a { color: var(--accent-blue); text-decoration: none; } .legal-contact-block { background: var(--light-gray); padding: 24px 28px; border-radius: 8px; margin-top: 24px; } .legal-contact-block p { margin-bottom: 6px; } @media (max-width: 720px) { .legal-content { font-size: 15px; } .legal-content h2 { font-size: 22px; margin-top: 44px; } .legal-toc ol { columns: 1; } } html { scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: rgba(0, 168, 255, 0.3) transparent; } .hero { text-align: left; padding: 160px 0 120px; background: linear-gradient(160deg, var(--dark) 0%, #060d16 40%, var(--primary-blue) 100%); } .hero h1 { font-size: clamp(40px, 6vw, 80px); font-weight: 900; letter-spacing: -3px; line-height: 1.05; margin-bottom: 24px; } @keyframes overlinePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .quote-text { font-style: normal; font-size: 18px; font-weight: 500; color: var(--primary-blue); padding: 24px 28px; border-left: 3px solid var(--bright-blue); background: rgba(0, 168, 255, 0.04); border-radius: 0 12px 12px 0; margin-top: 32px; } @keyframes marqueeScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .delivery-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 48px; } .delivery-option { display: flex; gap: 20px; padding: 28px; background: var(--white); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 12px; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .delivery-option-icon { flex-shrink: 0; width: 48px; height: 48px; background: rgba(0, 168, 255, 0.08); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--bright-blue); } .delivery-option h4 { font-size: 17px; font-weight: 700; color: var(--primary-blue); margin-bottom: 6px; } .delivery-option p { font-size: 14px; color: var(--text-light); line-height: 1.6; margin: 0; } .btn-primary { padding: 14px 32px; border-radius: 10px; font-size: 15px; font-weight: 600; box-shadow: 0 2px 8px rgba(0, 168, 255, 0.2); letter-spacing: 0.01em; text-align: center; } .course-card { border-left: 4px solid var(--bright-blue); border-radius: 0 16px 16px 0; padding: 36px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); } @keyframes heroReveal { from { opacity: 0; transform: translateY(20px); filter: blur(4px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } } footer { background: var(--dark); border-top: 1px solid rgba(255, 255, 255, 0.05); } header { background: var(--dark); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); transition: background 0.3s ease, backdrop-filter 0.3s ease; } @media (max-width: 968px) { .hero { padding: 120px 0 80px; } .delivery-list { grid-template-columns: 1fr; } } @media (max-width: 768px) { .hero { padding: 100px 0 60px; } } @media (max-width: 480px) { .hero { padding: 80px 0 48px; } .hero h1 { letter-spacing: -1.5px; } } @keyframes blobDrift1 { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(-40px, 30px) scale(1.05); } 50% { transform: translate(-20px, -20px) scale(0.95); } 75% { transform: translate(30px, 15px) scale(1.02); } } @keyframes blobDrift2 { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(50px, -30px) scale(1.08); } 66% { transform: translate(-20px, 40px) scale(0.96); } } @keyframes blobDrift3 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-35px, -25px) scale(1.1); } } @keyframes shieldPulse { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.3; } } @keyframes nodePulse { 0%, 100% { r: 4; opacity: 0.6; } 50% { r: 6; opacity: 1; } } .scroll-animation-section { height: 200vh; position: relative; } .scroll-animation-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; } .scroll-canvas { width: 100%; height: 100%; object-fit: cover; display: block; } .scroll-animation-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 45%, transparent 70%); display: flex; align-items: center; } .scroll-animation-content { max-width: 520px; color: var(--white); } .scroll-animation-content h2 { font-size: clamp(32px, 4vw, 48px); font-weight: 800; letter-spacing: -1.5px; line-height: 1.1; margin-bottom: 20px; color: var(--white); } .scroll-animation-content p { font-size: 17px; line-height: 1.7; color: rgba(255,255,255,0.7); margin-bottom: 28px; } .bg-image-section { position: relative; overflow: hidden; color: var(--white); padding: 120px 0; } .bg-image-section .bg-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .bg-image-section .bg-image-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } @media (max-width: 968px) { .bg-image-section { padding: 72px 0; } .bg-image-section .feature-grid { grid-template-columns: 1fr; } .scroll-animation-section { height: 100vh; } .scroll-animation-overlay { background: linear-gradient(0deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.5) 100%); align-items: flex-end; padding-bottom: 60px; } .scroll-animation-content { max-width: 100%; } } @media (max-width: 768px) { .bg-image-section { padding: 56px 0; } .bg-image-section .course-card { padding: 24px; } .bg-image-section .course-card h3 { font-size: 22px; } .scroll-animation-content h2 { font-size: 24px; } .scroll-animation-content p { font-size: 15px; } .scroll-animation-overlay { padding-bottom: 40px; } } @media (max-width: 480px) { .bg-image-section { padding: 40px 0; } .scroll-animation-content h2 { font-size: 22px; letter-spacing: -0.5px; } } .bg-image-section .course-card { background: rgba(255, 255, 255, 0.05); border-left-color: var(--bright-blue); box-shadow: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .bg-image-section .course-card h3 { color: var(--white); } .bg-image-section .course-card p { color: rgba(255, 255, 255, 0.7); } .bg-image-section .course-meta-item { color: rgba(255, 255, 255, 0.6); } .bg-image-section .course-meta-item strong { color: rgba(255, 255, 255, 0.9); } @media (max-width: 768px) { .bg-image-section .course-meta { flex-direction: column; gap: 8px; } }