/* ================================================================ АЛЕКСЕЙ ВОРОБЬЕВ — DATA STREAM LEAD Тёмная тема: Ад / Пламя / Пепел (Ария, Король и Шут) Светлая тема: Лёд / Мороз / Зима (Всадник из льда) Никакого бежевого. Никакой гладкости. Только сталь и характер. ================================================================ */ /* ===== Google Fonts: Russo One + Manrope ===== */ /* Loaded in */ :root { --font-heading: 'Russo One', 'Oswald', 'Impact', sans-serif; --font-body: 'Manrope', 'Nunito', 'Segoe UI', sans-serif; --max-width: 1100px; --radius: 0px; --transition: 0.25s ease; } /* ================================================================ DARK THEME — Ад, Пламя, Пепел Акцент: красно-оранжево-жёлтый огонь (не алый!) ================================================================ */ [data-theme="dark"], :root { --color-bg: #080706; --color-surface: #100e0c; --color-text: #d8d1c7; --color-text-light: #9a8d7e; --color-accent: #d62800; --color-accent-glow: rgba(214, 40, 0, 0.2); --color-accent-2: #f06000; --color-dark: #080706; --color-steel: #4a3f35; --color-border: #1e1b17; --color-card-bg: #13110e; --color-hero-bg: #080706; --color-tag-bg: #181410; --color-tag-border: #2a241d; --color-tag-text: #b8aea0; --color-invert: #ede6dc; --color-flame-1: #d62800; --color-flame-2: #f06000; --color-flame-3: #fba800; --text-shadow-fire: 0 0 14px rgba(214,40,0,0.5), 0 0 28px rgba(240,96,0,0.25); --box-shadow-fire: 0 0 40px rgba(214,40,0,0.12), 0 0 80px rgba(240,96,0,0.06); --noise-opacity: 0.045; /* Avatar asymmetry — jagged fire frame */ --avatar-clip: polygon(18% 0, 100% 0, 88% 100%, 0% 100%); --avatar-ring-clip: polygon(15% 0%, 100% 0%, 90% 100%, 0% 100%); } /* ================================================================ LIGHT THEME — Лёд, Мороз, Зима Акцент: холодный синий. Никакого бежевого. ================================================================ */ [data-theme="light"] { --color-bg: #eef3f8; --color-surface: #f5f8fb; --color-text: #0a1628; --color-text-light: #3d5068; --color-accent: #0066cc; --color-accent-glow: rgba(0, 102, 204, 0.12); --color-accent-2: #0088ee; --color-dark: #0a1628; --color-steel: #7a8da6; --color-border: #c8d4e2; --color-card-bg: #ffffff; --color-hero-bg: #e8eef5; --color-tag-bg: #ffffff; --color-tag-border: #bcc8d8; --color-tag-text: #2d4058; --color-invert: #f2f6fb; --color-flame-1: #0066cc; --color-flame-2: #0088ee; --color-flame-3: #00aaff; --text-shadow-fire: 0 0 12px rgba(0,102,204,0.35); --box-shadow-fire: 0 0 36px rgba(0,102,204,0.1); --noise-opacity: 0.03; /* Avatar asymmetry — sharp ice crystal frame */ --avatar-clip: polygon(18% 0, 100% 0, 88% 100%, 0% 100%); --avatar-ring-clip: polygon(15% 0%, 100% 0%, 90% 100%, 0% 100%); } /* ================================================================ RESET & BASE ================================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 72px; } body { font-family: var(--font-body); font-size: 17px; line-height: 1.7; color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; transition: background 0.5s ease, color 0.5s ease; overflow-x: hidden; position: relative; } /* Noise texture overlay */ body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: var(--noise-opacity); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 256px 256px; transition: opacity 0.5s ease; } img { max-width: 100%; height: auto; display: block; } a { color: var(--color-accent); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--color-accent-2); } ul { list-style: none; } h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 400; line-height: 1.1; color: var(--color-text); text-transform: uppercase; letter-spacing: 0.5px; } /* ================================================================ HEADER ================================================================ */ .header { position: fixed; top: 0; left: 0; right: 0; z-index: 101; background: rgba(8,7,6,0.9); backdrop-filter: blur(18px); border-bottom: 2px solid var(--color-border); transition: background 0.5s ease; } [data-theme="light"] .header { background: rgba(238,243,248,0.9); } .header-inner { max-width: var(--max-width); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; height: 64px; } .header-right { display: flex; align-items: center; gap: 16px; } .logo { font-family: var(--font-heading); font-size: 24px; font-weight: 400; letter-spacing: 4px; color: var(--color-accent); padding: 4px 0; border-bottom: 3px solid var(--color-accent); text-transform: uppercase; text-shadow: var(--text-shadow-fire); transition: color var(--transition), border-color var(--transition); } .logo:hover { color: var(--color-accent-2); border-bottom-color: var(--color-accent-2); } .nav { display: flex; gap: 28px; } .nav a { font-family: var(--font-heading); font-size: 12px; font-weight: 400; color: var(--color-text-light); text-transform: uppercase; letter-spacing: 2px; padding: 5px 0; border-bottom: 2px solid transparent; transition: color var(--transition), border-color var(--transition); position: relative; } .nav a:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); } [data-theme="dark"] .nav a { color: #d8d1c7; } [data-theme="dark"] .nav a:hover { color: var(--color-accent); } /* Theme toggle */ .theme-toggle { width: 52px; height: 28px; border: 2px solid var(--color-border); background: var(--color-surface); cursor: pointer; position: relative; transition: all var(--transition); flex-shrink: 0; display: flex; align-items: center; padding: 0 3px; } .theme-toggle::after { content: ''; width: 20px; height: 20px; background: var(--color-accent); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 0 8px var(--color-accent-glow); } [data-theme="light"] .theme-toggle { background: #dce4ee; border-color: #b0bcc8; } [data-theme="light"] .theme-toggle::after { transform: translateX(22px); } .theme-toggle-label { font-family: var(--font-heading); font-size: 10px; letter-spacing: 2px; color: var(--color-text-light); text-transform: uppercase; margin-right: 8px; } /* Mobile nav toggle */ .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; z-index: 101; } .nav-toggle span { display: block; width: 28px; height: 3px; background: var(--color-text); transition: var(--transition); transform-origin: center; } .nav-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 6px); } .nav-toggle.active span:nth-child(2) { opacity: 0; } .nav-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -6px); } /* ================================================================ HERO — Пламя / Лёд ================================================================ */ .hero { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 100px 28px 80px; position: relative; overflow: hidden; background: var(--color-hero-bg); } /* Fire/ice particle container */ .sparks-container { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; } .spark { position: absolute; bottom: -20px; border-radius: 0; animation: sparkFloat linear infinite; opacity: 0; } /* Dark: fire sparks — red/orange/yellow */ [data-theme="dark"] .spark { background: var(--color-flame-1); box-shadow: 0 0 6px var(--color-flame-1), 0 0 14px var(--color-flame-2); } [data-theme="dark"] .spark:nth-child(3), [data-theme="dark"] .spark:nth-child(6), [data-theme="dark"] .spark:nth-child(9), [data-theme="dark"] .spark:nth-child(11) { background: var(--color-flame-2); box-shadow: 0 0 6px var(--color-flame-2), 0 0 16px var(--color-flame-3); } [data-theme="dark"] .spark:nth-child(5), [data-theme="dark"] .spark:nth-child(12) { background: var(--color-flame-3); box-shadow: 0 0 4px var(--color-flame-3), 0 0 18px var(--color-flame-2); } /* Light: ice crystals */ [data-theme="light"] .spark { background: var(--color-accent); box-shadow: 0 0 6px var(--color-accent), 0 0 14px rgba(0,136,238,0.4); clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); } .spark:nth-child(1) { left: 8%; animation-duration: 3.5s; animation-delay: 0s; width: 4px; height: 4px; } .spark:nth-child(2) { left: 18%; animation-duration: 4.2s; animation-delay: 0.6s; width: 6px; height: 6px; } .spark:nth-child(3) { left: 28%; animation-duration: 3.8s; animation-delay: 1.3s; width: 3px; height: 3px; } .spark:nth-child(4) { left: 36%; animation-duration: 4.6s; animation-delay: 0.4s; width: 5px; height: 5px; } .spark:nth-child(5) { left: 44%; animation-duration: 3.3s; animation-delay: 1.8s; width: 7px; height: 7px; } .spark:nth-child(6) { left: 52%; animation-duration: 5.0s; animation-delay: 0.9s; width: 4px; height: 4px; } .spark:nth-child(7) { left: 60%; animation-duration: 3.6s; animation-delay: 1.5s; width: 6px; height: 6px; } .spark:nth-child(8) { left: 68%; animation-duration: 4.4s; animation-delay: 0.3s; width: 5px; height: 5px; } .spark:nth-child(9) { left: 76%; animation-duration: 4.0s; animation-delay: 2.0s; width: 3px; height: 3px; } .spark:nth-child(10) { left: 84%; animation-duration: 4.8s; animation-delay: 0.7s; width: 5px; height: 5px; } .spark:nth-child(11) { left: 92%; animation-duration: 3.4s; animation-delay: 1.1s; width: 4px; height: 4px; } .spark:nth-child(12) { left: 14%; animation-duration: 4.1s; animation-delay: 2.2s; width: 6px; height: 6px; } @keyframes sparkFloat { 0% { transform: translateY(0) translateX(0) scale(1); opacity: 0; } 8% { opacity: 1; } 30% { transform: translateY(-35vh) translateX(25px) scale(1.5); opacity: 0.9; } 55% { transform: translateY(-65vh) translateX(-20px) scale(0.7); opacity: 0.4; } 80% { transform: translateY(-90vh) translateX(15px) scale(0.3); opacity: 0.1; } 100% { transform: translateY(-115vh) translateX(-5px) scale(0); opacity: 0; } } /* Hero content */ .hero-content { max-width: var(--max-width); width: 100%; display: grid; grid-template-columns: 280px 1fr; gap: 56px; align-items: center; position: relative; z-index: 10; } .hero-avatar { position: relative; width: 260px; height: 260px; flex-shrink: 0; } .hero-avatar img { width: 260px; height: 260px; object-fit: cover; position: absolute; top: 0; left: 0; z-index: 2; filter: contrast(1.15) saturate(0.85); clip-path: var(--avatar-clip); transition: opacity 0.5s ease; } /* KiSh avatar — dark theme only */ .avatar-dark { opacity: 1; } .avatar-light { opacity: 0; } [data-theme="light"] .avatar-dark { opacity: 0; } [data-theme="light"] .avatar-light { opacity: 1; } .hero-avatar-ring { position: absolute; inset: -14px; z-index: 1; clip-path: var(--avatar-ring-clip); animation: ringPulse 2.5s ease-in-out infinite; background: var(--color-accent); opacity: 0.25; } @keyframes ringPulse { 0%, 100% { box-shadow: 0 0 24px var(--color-accent-glow); opacity: 0.25; } 50% { box-shadow: 0 0 48px var(--color-accent-glow); opacity: 0.45; } } .hero-body { max-width: 540px; } .hero-tag { display: inline-block; font-family: var(--font-heading); font-size: 12px; font-weight: 400; letter-spacing: 4px; text-transform: uppercase; color: var(--color-accent); border-bottom: 3px solid var(--color-accent); padding-bottom: 6px; margin-bottom: 24px; } .hero-name { font-size: 80px; font-weight: 400; line-height: 0.9; letter-spacing: -1px; margin-bottom: 12px; text-transform: uppercase; text-shadow: var(--text-shadow-fire); } .hero-name-accent { color: var(--color-accent); display: block; } .hero-sub { font-size: 17px; line-height: 1.6; color: var(--color-text-light); margin-bottom: 14px; max-width: 480px; } .hero-motto { font-family: var(--font-heading); font-size: 15px; font-weight: 400; letter-spacing: 2px; color: var(--color-steel); text-transform: uppercase; margin-bottom: 32px; font-style: italic; border-left: 3px solid var(--color-accent); padding-left: 14px; } .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; } /* Buttons — angled cuts */ .btn { display: inline-block; padding: 15px 34px; font-family: var(--font-heading); font-size: 13px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; transition: all var(--transition); text-align: center; position: relative; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); } .btn-primary { background: var(--color-accent); color: #fff; border: none; } .btn-primary:hover { background: var(--color-accent-2); color: #fff; transform: translateY(-3px); box-shadow: var(--box-shadow-fire); } .btn-outline { background: transparent; color: var(--color-text); border: 2px solid var(--color-border); } .btn-outline:hover { border-color: var(--color-accent); color: var(--color-accent); transform: translateY(-3px); box-shadow: var(--box-shadow-fire); } .hero-scroll-hint { position: absolute; bottom: 32px; display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: var(--font-heading); font-size: 10px; font-weight: 400; text-transform: uppercase; letter-spacing: 4px; color: var(--color-text-light); animation: bounce 2s infinite; z-index: 10; } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } } .hero-scroll-hint svg { stroke: var(--color-accent); } /* ================================================================ SECTIONS — Common ================================================================ */ .section-inner { max-width: var(--max-width); margin: 0 auto; padding: 100px 28px; position: relative; } .section-label { font-family: var(--font-heading); font-size: 11px; font-weight: 400; color: var(--color-accent); letter-spacing: 5px; margin-bottom: 10px; text-transform: uppercase; opacity: 0.85; } .section-title { font-size: 52px; font-weight: 400; letter-spacing: -0.5px; margin-bottom: 48px; line-height: 1.05; position: relative; padding-bottom: 20px; text-shadow: var(--text-shadow-fire); } .section-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 50px; height: 4px; background: var(--color-accent); } /* ================================================================ ABOUT ================================================================ */ .about { background: var(--color-surface); transition: background 0.5s ease; position: relative; } .about::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--color-accent); opacity: 0.4; } .about-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; } .about-text p { font-size: 16px; color: var(--color-text-light); margin-bottom: 14px; line-height: 1.7; } .about-numbers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .num-block { border: 2px solid var(--color-border); padding: 26px 20px; text-align: center; transition: border-color var(--transition), background var(--transition), box-shadow var(--transition); background: var(--color-card-bg); position: relative; } .num-block::before { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; border: 2px solid var(--color-accent); opacity: 0; transition: opacity var(--transition); } .num-block:hover::before { opacity: 1; } .num-block:hover { background: var(--color-accent-glow); box-shadow: var(--box-shadow-fire); } /* Dark: asymmetric number blocks */ [data-theme="dark"] .num-block:nth-child(1) { clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%); } [data-theme="dark"] .num-block:nth-child(2) { clip-path: polygon(0 0, 95% 0, 100% 100%, 5% 100%); } [data-theme="dark"] .num-block:nth-child(3) { clip-path: polygon(0 0, 100% 5%, 100% 100%, 5% 95%); } [data-theme="dark"] .num-block:nth-child(4) { clip-path: polygon(5% 5%, 100% 0, 95% 100%, 0 95%); } .num-value { display: block; font-family: var(--font-heading); font-size: 48px; font-weight: 400; color: var(--color-text); line-height: 1; } .num-plus, .num-unit { font-size: 20px; color: var(--color-accent); } .num-label { display: block; font-size: 11px; font-weight: 600; color: var(--color-text-light); text-transform: uppercase; letter-spacing: 2px; margin-top: 8px; font-family: var(--font-body); } /* ================================================================ VIBE — Дух (Rock section) ================================================================ */ .vibe { position: relative; overflow: hidden; background: var(--color-bg); transition: background 0.5s ease; } .vibe::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, transparent, var(--color-accent), transparent); opacity: 0.6; } .vibe-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 48px; position: relative; z-index: 1; } .vibe-card { background: var(--color-card-bg); border: 2px solid var(--color-border); padding: 32px 24px; transition: border-color var(--transition), box-shadow var(--transition), background 0.5s ease; position: relative; } /* Dark: asymmetric vibe cards + fire glow */ [data-theme="dark"] .vibe-card:nth-child(1) { clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%); } [data-theme="dark"] .vibe-card:nth-child(2) { clip-path: polygon(0 3%, 95% 0, 100% 97%, 5% 100%); } [data-theme="dark"] .vibe-card:nth-child(3) { clip-path: polygon(0 0, 100% 4%, 98% 100%, 3% 96%); } [data-theme="dark"] .vibe-card:hover { box-shadow: 0 0 30px rgba(214,40,0,0.2), 0 0 60px rgba(240,96,0,0.1), inset 0 0 40px rgba(251,168,0,0.04); } .vibe-card::after { content: ''; position: absolute; bottom: 0; left: 0; width: 30px; height: 3px; background: var(--color-accent); transition: width var(--transition); } .vibe-card:hover::after { width: 100%; } .vibe-card:hover { border-color: var(--color-accent); box-shadow: var(--box-shadow-fire); } /* Dark: fire color accent bar */ [data-theme="dark"] .vibe-card::after { background: linear-gradient(90deg, var(--color-flame-1), var(--color-flame-2), var(--color-flame-3)); } .vibe-card-tag { display: inline-block; font-family: var(--font-heading); font-size: 12px; font-weight: 400; letter-spacing: 4px; text-transform: uppercase; color: var(--color-accent); margin-bottom: 14px; padding-bottom: 8px; border-bottom: 2px solid var(--color-accent); } .vibe-card p { font-size: 15px; color: var(--color-text-light); line-height: 1.7; } .vibe-quote { text-align: center; position: relative; z-index: 1; } .vibe-quote p { font-family: var(--font-body); font-size: 19px; font-weight: 600; font-style: italic; color: var(--color-text-light); letter-spacing: 0.3px; max-width: 680px; margin: 0 auto; line-height: 1.6; border-left: 4px solid var(--color-accent); padding-left: 24px; text-align: left; } /* ================================================================ MOTTO BANNER — Огонь / Лёд полоса ================================================================ */ .motto-banner { text-align: center; padding: 40px 28px; background: var(--color-accent); color: #fff; position: relative; overflow: hidden; } /* Dark: red→yellow gradient on motto */ [data-theme="dark"] .motto-banner { background: linear-gradient(135deg, var(--color-flame-1) 0%, var(--color-flame-2) 50%, var(--color-flame-3) 100%); } .motto-banner p { font-family: var(--font-heading); font-size: 24px; font-weight: 400; letter-spacing: 4px; text-transform: uppercase; position: relative; z-index: 1; } .motto-banner::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( -30deg, transparent, transparent 12px, rgba(255,255,255,0.04) 12px, rgba(255,255,255,0.04) 14px ); } .motto-banner::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: rgba(255,255,255,0.5); animation: edgeGlow 2s ease-in-out infinite alternate; } @keyframes edgeGlow { 0% { opacity: 0.3; } 100% { opacity: 1; } } /* ================================================================ SKILLS — Арсенал ================================================================ */ .skills { background: var(--color-surface); transition: background 0.5s ease; } .skills-cloud { display: flex; flex-wrap: wrap; gap: 10px; } .skill-tag { display: inline-block; font-family: var(--font-heading); font-size: 11px; font-weight: 400; padding: 10px 20px; border: 2px solid var(--color-tag-border); letter-spacing: 1.5px; text-transform: uppercase; transition: all var(--transition); cursor: default; background: var(--color-tag-bg); color: var(--color-tag-text); clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); } .skill-tag:hover { border-color: var(--color-accent); color: var(--color-accent); transform: translateY(-3px); box-shadow: var(--box-shadow-fire); } /* Dark: fire gradient on skill tags hover */ [data-theme="dark"] .skill-tag:hover { border-image: linear-gradient(135deg, var(--color-flame-1), var(--color-flame-2), var(--color-flame-3)) 1; box-shadow: 0 0 20px rgba(214,40,0,0.15), 0 0 40px rgba(240,96,0,0.08); } /* ================================================================ EXPERIENCE — Боевой путь ================================================================ */ .experience { background: var(--color-bg); transition: background 0.5s ease; } .exp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .exp-card { background: var(--color-card-bg); border: 2px solid var(--color-border); padding: 34px 28px; transition: border-color var(--transition), box-shadow var(--transition), background 0.5s ease; position: relative; } /* Dark: asymmetric experience cards */ [data-theme="dark"] .exp-card:nth-child(1) { clip-path: polygon(3% 0, 100% 0, 97% 100%, 0 100%); } [data-theme="dark"] .exp-card:nth-child(2) { clip-path: polygon(0 0, 97% 0, 100% 100%, 3% 100%); } [data-theme="dark"] .exp-card:nth-child(3) { clip-path: polygon(0 3%, 100% 0, 98% 97%, 2% 100%); } [data-theme="dark"] .exp-card:nth-child(4) { clip-path: polygon(2% 0, 100% 3%, 98% 100%, 0 97%); } [data-theme="dark"] .exp-card:hover { box-shadow: 0 0 30px rgba(214,40,0,0.18), 0 0 60px rgba(240,96,0,0.08), inset 0 0 40px rgba(251,168,0,0.03); } .exp-card::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 40px; background: var(--color-accent); transition: height var(--transition); } /* Dark: fire gradient on exp card accent bar */ [data-theme="dark"] .exp-card::before { background: linear-gradient(180deg, var(--color-flame-1), var(--color-flame-2), var(--color-flame-3)); } .exp-card:hover::before { height: 100%; } .exp-card:hover { border-color: var(--color-accent); box-shadow: var(--box-shadow-fire); } .exp-card-header { margin-bottom: 14px; } .exp-date { display: inline-block; font-family: var(--font-heading); font-size: 10px; font-weight: 400; letter-spacing: 3px; text-transform: uppercase; color: var(--color-accent); margin-bottom: 6px; } .exp-card h3 { font-size: 22px; font-weight: 400; letter-spacing: 1px; } .exp-role { font-size: 14px; color: var(--color-text-light); margin-bottom: 16px; font-weight: 600; } .exp-list li { position: relative; padding: 5px 0 5px 18px; font-size: 14px; color: var(--color-text-light); line-height: 1.6; } .exp-list li::before { content: ''; position: absolute; left: 0; top: 12px; width: 6px; height: 6px; background: var(--color-accent); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); } /* ================================================================ EDUCATION — База ================================================================ */ .education { background: var(--color-surface); transition: background 0.5s ease; } .edu-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; } .edu-item h3 { font-size: 19px; font-weight: 400; margin-bottom: 8px; letter-spacing: 0.5px; } .edu-item p { font-size: 15px; color: var(--color-text-light); } /* ================================================================ GALLERY — Кадры ================================================================ */ .gallery-section { background: var(--color-bg); transition: background 0.5s ease; position: relative; overflow: hidden; } .gallery-sub { font-size: 15px; color: var(--color-text-light); margin-bottom: 36px; margin-top: -32px; position: relative; z-index: 1; } .gallery-masonry { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; position: relative; z-index: 1; } .gallery-item { position: relative; overflow: hidden; cursor: pointer; aspect-ratio: 4/3; border: 2px solid transparent; transition: border-color var(--transition); } .gallery-item.tall { grid-row: span 2; aspect-ratio: auto; } .gallery-item.wide { grid-column: span 2; aspect-ratio: 16/9; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease, filter 0.5s ease; filter: grayscale(50%) contrast(1.15); } .gallery-item:hover { border-color: var(--color-accent); } .gallery-item:hover img { transform: scale(1.1); filter: grayscale(0%) contrast(1.05); } /* Dark: fire border on gallery hover */ [data-theme="dark"] .gallery-item:hover { border-image: linear-gradient(135deg, var(--color-flame-1), var(--color-flame-3)) 1; box-shadow: 0 0 25px rgba(214,40,0,0.2); } .gallery-caption { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.8)); color: #fff; padding: 24px 12px 10px; font-family: var(--font-heading); font-size: 12px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; opacity: 0; transition: opacity var(--transition); } .gallery-item:hover .gallery-caption { opacity: 1; } /* ================================================================ CONTACTS — На связи ================================================================ */ .contacts { background: var(--color-dark); transition: background 0.5s ease; position: relative; } .contacts::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--color-accent); opacity: 0.6; } .contacts .section-title { color: var(--color-invert); } .contacts .section-label { color: var(--color-accent); } .contacts-layout { display: flex; flex-direction: column; gap: 12px; } .contact-link { display: flex; align-items: center; gap: 18px; padding: 20px 26px; border: 2px solid var(--color-border); transition: all var(--transition); text-decoration: none; position: relative; background: rgba(255,255,255,0.02); } a.contact-link:hover { border-color: var(--color-accent); background: var(--color-accent-glow); box-shadow: var(--box-shadow-fire); } .contact-icon { font-size: 26px; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 400; background: var(--color-accent); color: #fff; flex-shrink: 0; clip-path: polygon(20% 0%, 100% 0, 80% 100%, 0 100%); } .contact-text { font-family: var(--font-heading); font-size: 18px; font-weight: 400; letter-spacing: 1px; color: var(--color-invert); } .contact-location .contact-text { color: rgba(255,255,255,0.5); } [data-theme="light"] .contact-location .contact-text { color: rgba(242,246,251,0.55); } /* Dark: fire glow on contact hover */ [data-theme="dark"] a.contact-link:hover { box-shadow: 0 0 25px rgba(214,40,0,0.15), 0 0 50px rgba(240,96,0,0.06); } /* ================================================================ FOOTER ================================================================ */ .footer { background: #050404; text-align: center; padding: 40px 28px; border-top: 2px solid var(--color-border); } [data-theme="light"] .footer { background: #0a1628; } [data-theme="light"] .footer p { color: rgba(255,255,255,0.4); } .footer-inner { max-width: var(--max-width); margin: 0 auto; } .footer p { font-family: var(--font-heading); font-size: 11px; font-weight: 400; letter-spacing: 3px; color: #555; text-transform: uppercase; } /* ================================================================ LIGHTBOX ================================================================ */ .lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .lightbox.active { opacity: 1; pointer-events: auto; } .lightbox-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.97); } .lightbox-content { position: relative; z-index: 2; max-width: 90vw; max-height: 85vh; } .lightbox-content img { max-width: 90vw; max-height: 85vh; object-fit: contain; } .lightbox-close, .lightbox-prev, .lightbox-next { position: absolute; z-index: 3; background: none; border: 2px solid rgba(255,255,255,0.2); color: #fff; cursor: pointer; transition: all 0.2s ease; font-family: var(--font-heading); line-height: 1; display: flex; align-items: center; justify-content: center; } .lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { border-color: var(--color-accent); color: var(--color-accent); box-shadow: 0 0 20px var(--color-accent-glow); } .lightbox-close { top: 20px; right: 20px; font-size: 26px; width: 48px; height: 48px; } .lightbox-prev, .lightbox-next { top: 50%; transform: translateY(-50%); font-size: 36px; width: 52px; height: 52px; } .lightbox-prev { left: 16px; } .lightbox-next { right: 16px; } /* ================================================================ FIRE ANIMATIONS — Тёмная тема, живой огонь на карточках ================================================================ */ /* Flicker: border + box-shadow cycles through red→orange→yellow — ЯРКО */ /* Subtle fire flicker — reduced so text remains readable */ @keyframes fireFlicker { 0%, 100% { border-color: #d62800; box-shadow: 0 0 8px rgba(214,40,0,0.15), 0 0 18px rgba(240,96,0,0.06), inset 0 0 12px rgba(240,96,0,0.02); } 25% { border-color: #f06000; box-shadow: 0 0 14px rgba(240,96,0,0.2), 0 0 28px rgba(251,168,0,0.08), inset 0 0 16px rgba(251,168,0,0.03); } 50% { border-color: #fba800; box-shadow: 0 0 10px rgba(251,168,0,0.16), 0 0 22px rgba(240,96,0,0.07), inset 0 0 14px rgba(240,96,0,0.025); } 75% { border-color: #f06000; box-shadow: 0 0 16px rgba(240,96,0,0.2), 0 0 30px rgba(214,40,0,0.08), inset 0 0 18px rgba(251,168,0,0.035); } } /* Flame lick: only bottom ~10% + right edge — subtler */ @keyframes flameLick { 0%, 100% { opacity: 0.5; background: linear-gradient(0deg, #fba800 0%, #f06000 50%, #d62800 80%, transparent 100%); height: 10%; } 33% { opacity: 0.6; background: linear-gradient(0deg, #fba800 0%, #f06000 40%, #d62800 70%, transparent 100%); height: 12%; } 66% { opacity: 0.45; background: linear-gradient(0deg, #f06000 0%, #d62800 60%, transparent 100%); height: 9%; } } /* ===== Apply fire to vibe cards (dark) ===== */ [data-theme="dark"] .vibe-card { animation: fireFlicker 3s ease-in-out infinite; overflow: hidden; } [data-theme="dark"] .vibe-card::before { content: ''; position: absolute; bottom: 0; right: 0; width: 45%; z-index: 0; pointer-events: none; animation: flameLick 2.5s ease-in-out infinite; opacity: 0.4; } /* Stagger animations */ [data-theme="dark"] .vibe-card:nth-child(1) { animation-delay: 0s; } [data-theme="dark"] .vibe-card:nth-child(1)::before { animation-delay: 0s; } [data-theme="dark"] .vibe-card:nth-child(2) { animation-delay: 0.5s; } [data-theme="dark"] .vibe-card:nth-child(2)::before { animation-delay: 0.4s; } [data-theme="dark"] .vibe-card:nth-child(3) { animation-delay: 1.0s; } [data-theme="dark"] .vibe-card:nth-child(3)::before { animation-delay: 0.8s; } /* Content stays above flame */ [data-theme="dark"] .vibe-card > * { position: relative; z-index: 1; } /* ===== Apply fire to experience cards (dark) ===== */ [data-theme="dark"] .exp-card { animation: fireFlicker 3.4s ease-in-out infinite; overflow: hidden; } [data-theme="dark"] .exp-card::after { content: ''; position: absolute; bottom: 0; right: 0; width: 45%; z-index: 0; pointer-events: none; animation: flameLick 3s ease-in-out infinite; opacity: 0.35; } [data-theme="dark"] .exp-card:nth-child(1) { animation-delay: 0s; } [data-theme="dark"] .exp-card:nth-child(1)::after { animation-delay: 0s; } [data-theme="dark"] .exp-card:nth-child(2) { animation-delay: 0.7s; } [data-theme="dark"] .exp-card:nth-child(2)::after { animation-delay: 0.6s; } [data-theme="dark"] .exp-card:nth-child(3) { animation-delay: 1.4s; } [data-theme="dark"] .exp-card:nth-child(3)::after { animation-delay: 1.2s; } [data-theme="dark"] .exp-card:nth-child(4) { animation-delay: 2.1s; } [data-theme="dark"] .exp-card:nth-child(4)::after { animation-delay: 1.8s; } /* Content stays above flame */ [data-theme="dark"] .exp-card > * { position: relative; z-index: 1; } /* ===== Apply fire to number blocks (dark) ===== */ [data-theme="dark"] .num-block { animation: fireFlicker 2.8s ease-in-out infinite; overflow: hidden; } [data-theme="dark"] .num-block::after { content: ''; position: absolute; bottom: 0; right: 0; width: 50%; z-index: 0; pointer-events: none; animation: flameLick 2.2s ease-in-out infinite; opacity: 0.3; } [data-theme="dark"] .num-block:nth-child(1) { animation-delay: 0s; } [data-theme="dark"] .num-block:nth-child(1)::after { animation-delay: 0s; } [data-theme="dark"] .num-block:nth-child(2) { animation-delay: 0.3s; } [data-theme="dark"] .num-block:nth-child(2)::after { animation-delay: 0.25s; } [data-theme="dark"] .num-block:nth-child(3) { animation-delay: 0.7s; } [data-theme="dark"] .num-block:nth-child(3)::after { animation-delay: 0.55s; } [data-theme="dark"] .num-block:nth-child(4) { animation-delay: 1.0s; } [data-theme="dark"] .num-block:nth-child(4)::after { animation-delay: 0.8s; } [data-theme="dark"] .num-block > * { position: relative; z-index: 1; } /* ===== Apply fire to skill tags (dark) — ЯРКОЕ ПЛАМЯ ===== */ [data-theme="dark"] .skill-tag { animation: fireFlicker 2.5s ease-in-out infinite; border-width: 2px; border-style: solid; } /* Stagger for organic feel */ [data-theme="dark"] .skill-tag:nth-child(3n+1) { animation-delay: 0s; } [data-theme="dark"] .skill-tag:nth-child(3n+2) { animation-delay: 0.4s; } [data-theme="dark"] .skill-tag:nth-child(3n) { animation-delay: 0.8s; } /* Hover — subtle intensification */ [data-theme="dark"] .vibe-card:hover, [data-theme="dark"] .exp-card:hover, [data-theme="dark"] .num-block:hover { animation: fireFlicker 1.5s ease-in-out infinite !important; box-shadow: 0 0 20px rgba(214,40,0,0.2), 0 0 40px rgba(240,96,0,0.1), inset 0 0 25px rgba(240,96,0,0.04) !important; } [data-theme="dark"] .vibe-card:hover::before, [data-theme="dark"] .exp-card:hover::after, [data-theme="dark"] .num-block:hover::after { opacity: 0.55 !important; animation-duration: 1s !important; } /* ================================================================ RESPONSIVE ================================================================ */ @media (max-width: 900px) { .hero-content { grid-template-columns: 1fr; gap: 36px; text-align: center; } .hero-avatar { margin: 0 auto; width: 220px; height: 220px; } .hero-avatar img { width: 220px; height: 220px; } .hero-body { max-width: 100%; } .hero-name { font-size: 56px; } .hero-sub { margin-left: auto; margin-right: auto; } .hero-motto { margin-left: auto; margin-right: auto; border-left: none; border-bottom: 3px solid var(--color-accent); padding-left: 0; padding-bottom: 10px; } .hero-actions { justify-content: center; } .about-layout { grid-template-columns: 1fr; gap: 36px; } .vibe-grid { grid-template-columns: 1fr; } .exp-grid { grid-template-columns: 1fr; } .edu-layout { grid-template-columns: 1fr; } .gallery-masonry { grid-template-columns: repeat(2, 1fr); } .gallery-item.tall { grid-row: auto; } .gallery-item.wide { grid-column: auto; } .section-title { font-size: 40px; } .nav { display: none; } .nav-toggle { display: flex; } .nav.open { display: flex; flex-direction: column; position: fixed; top: 66px; left: 0; right: 0; bottom: 0; background: #080706; align-items: center; justify-content: flex-start; gap: 10px; z-index: 99; overflow-y: auto; padding: 32px 20px 40px; } [data-theme="light"] .nav.open { background: #eef3f8; } .nav.open a { font-size: 22px; width: 260px; max-width: calc(100vw - 40px); text-align: center; padding: 12px 20px; background: var(--color-card-bg); border: 2px solid var(--color-border); transition: all var(--transition); flex-shrink: 0; box-sizing: border-box; } .nav.open a:hover { border-color: var(--color-accent); color: var(--color-accent); } .lightbox-prev { left: 4px; } .lightbox-next { right: 4px; } } @media (max-width: 500px) { .section-inner { padding: 60px 20px; } .section-title { font-size: 34px; margin-bottom: 34px; } .hero-name { font-size: 42px; } .hero-sub { font-size: 15px; } .hero-motto { font-size: 13px; } .hero-avatar { width: 180px; height: 180px; } .hero-avatar img { width: 180px; height: 180px; } .hero-avatar-ring { inset: -10px; } .about-numbers { grid-template-columns: repeat(2, 1fr); gap: 8px; } .num-value { font-size: 36px; } .num-block { padding: 18px 12px; } .gallery-masonry { grid-template-columns: 1fr; } .contacts-layout { gap: 10px; } .contact-link { padding: 14px 16px; flex-direction: column; text-align: center; gap: 8px; } .contact-text { font-size: 15px; } .about-text p, .vibe-card p, .edu-item p { font-size: 15px; } .exp-card { padding: 24px 20px; } .motto-banner p { font-size: 18px; } .btn { padding: 13px 26px; font-size: 11px; } .skill-tag { padding: 8px 16px; font-size: 10px; } }