:root{ --bg:#0b0c10; --bg2:#0f1118; --card:#121522; --text:#e8eaf0; --muted:#aab0c0; --line:rgba(255,255,255,.10); --shadow:0 18px 60px rgba(0,0,0,.45); --accent:#79b8ff; --accent2:#9ad1ff; --radius:18px; --radius2:14px; --container:1080px; --font:"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* Light theme (applied to via .theme-light) */ :root.theme-light{ --bg:#f6f7fb; --bg2:#eef1f8; --card:#ffffff; --text:#111827; --muted:#4b5563; --line:rgba(15,23,42,.12); --shadow:0 18px 60px rgba(15,23,42,.12); --accent:#1d4ed8; --accent2:#2563eb; } *, *::before, *::after{ box-sizing:border-box; } html,body{ min-height:100%; } body{ margin:0; font-family:var(--font); background: radial-gradient(1200px 600px at 20% 0%, rgba(121,184,255,.18), transparent 60%), radial-gradient(900px 500px at 80% 10%, rgba(154,209,255,.10), transparent 55%), linear-gradient(180deg, var(--bg), var(--bg2)); color:var(--text); line-height:1.55; } a{ color:var(--accent); text-decoration:none; } a:hover{ color:var(--accent2); text-decoration:underline; } .container{ max-width:var(--container); margin:0 auto; padding:0 18px; } /* Focus (keyboard) */ :focus-visible{ outline: 2px solid rgba(121,184,255,.55); outline-offset: 2px; border-radius: 10px; } /* Header */ .header{ padding:44px 0 22px; } .header__grid{ display:grid; grid-template-columns: 1.4fr .8fr; gap:18px; align-items:stretch; } /* Hero */ .hero{ background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .hero__top{ display:flex; gap:18px; align-items:center; } .hero__photo{ width:96px; height:96px; border-radius:50%; object-fit:cover; border:2px solid var(--line); box-shadow:0 10px 30px rgba(0,0,0,.35); flex:0 0 auto; } .hero__name{ font-size:1.9rem; line-height:1.15; margin:0 0 6px; letter-spacing:-0.02em; } .hero__role{ margin:0 0 8px; color:var(--muted); font-weight:600; } .hero__meta{ margin:0; color:var(--muted); } .hero__actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; } /* Buttons */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.03); color:var(--text); text-decoration:none; font-weight:600; transition: transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease; } .btn:hover{ transform: translateY(-1px); background:rgba(255,255,255,.06); text-decoration:none; } .btn--primary{ background: linear-gradient(180deg, rgba(121,184,255,.25), rgba(121,184,255,.10)); border-color: rgba(121,184,255,.35); } :root.theme-light .btn--primary{ background: linear-gradient(180deg, rgba(29,78,216,.18), rgba(29,78,216,.08)); border-color: rgba(29,78,216,.35); } .btn--icon{ width:44px; padding:10px 0; } /* Cards & sections */ .card{ background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .card__title{ margin:0 0 12px; font-size:1rem; letter-spacing:-0.01em; } .facts{ list-style:none; padding:0; margin:0; display:grid; gap:8px; } .facts li{ display:flex; gap:10px; align-items:flex-start; color:var(--muted); } .facts b{ color:var(--text); } .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); margin-top:8px; flex:0 0 auto; } .main{ padding:18px 0 10px; } .section{ padding:26px 0; } .section--alt{ background: rgba(255,255,255,.02); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .section__title{ margin:0 0 12px; font-size:1.25rem; letter-spacing:-0.01em; } .section__text{ margin:0 0 10px; max-width:80ch; } .muted{ color:var(--muted); } .note{ margin:14px 0 0; color:var(--muted); font-size:.95rem; } /* Grid */ .grid{ display:grid; gap:14px; } .grid--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .tags{ display:flex; flex-wrap:wrap; gap:8px; } .tag{ padding:7px 10px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.03); color:var(--text); font-weight:600; font-size:.92rem; } /* Projects */ .project{ border:1px solid var(--line); border-radius:var(--radius2); background:rgba(255,255,255,.03); padding:16px; } .project__head{ display:flex; justify-content:space-between; gap:12px; align-items:baseline; margin-bottom:8px; } .project__title{ margin:0; font-size:1.05rem; } .project__link{ font-weight:700; white-space:nowrap; } .project__text{ margin:0 0 10px; color:var(--muted); } .project__list{ margin:0; padding-left:18px; color:var(--muted); } /* Contacts */ .contact-cards{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:12px; } .contact{ border:1px solid var(--line); border-radius:var(--radius2); background:rgba(255,255,255,.03); padding:14px; transition: transform .12s ease, background .12s ease, color .12s ease, border-color .12s ease; color:inherit; } .contact:hover{ transform: translateY(-1px); background:rgba(255,255,255,.06); text-decoration:none; } .contact__label{ color:var(--muted); font-size:.9rem; margin-bottom:4px; } .contact__value{ font-weight:700; color:var(--text); } /* Footer */ .footer{ padding:18px 0 28px; } .footer__grid{ display:flex; justify-content:space-between; gap:12px; align-items:center; border-top:1px solid var(--line); padding-top:14px; } .footer__name{ font-weight:800; } .footer__meta{ color:var(--muted); font-size:.92rem; } .footer__links a{ margin-left:12px; font-weight:700; } .footer__links a:first-child{ margin-left:0; } /* Research IDs */ .id-list{ display:grid; gap:10px; } .id-item{ border:1px solid var(--line); border-radius:14px; padding:12px; background:rgba(255,255,255,.03); } .id-item__label{ color:var(--muted); font-size:.9rem; margin-bottom:4px; } .id-item__value{ font-weight:800; letter-spacing:-0.01em; } /* Bulleted lists (pretty) */ .bullets{ margin:0; padding-left:18px; color:var(--muted); } .bullets li{ margin:0 0 8px; } /* Mini columns in grants/projects */ .mini{ border:1px solid var(--line); border-radius:14px; padding:14px; background:rgba(255,255,255,.03); } .mini__title{ font-weight:800; margin:0 0 10px; } /* Publications */ .pubs{ display:grid; gap:12px; } .pub{ border:1px solid var(--line); border-radius:14px; padding:14px; background:rgba(255,255,255,.03); } .pub__title{ font-weight:800; margin:0 0 4px; } .pub__meta{ color:var(--muted); font-size:.92rem; margin:0 0 8px; } .pub__desc{ color:var(--text); margin:0; } /* Light theme: make “glass” look crisp */ :root.theme-light .hero, :root.theme-light .card{ background: rgba(255,255,255,.82); } :root.theme-light .project, :root.theme-light .contact, :root.theme-light .mini, :root.theme-light .pub, :root.theme-light .id-item, :root.theme-light .tag{ background: rgba(255,255,255,.70); } /* Backdrop-filter fallback */ @supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))){ .hero, .card{ background: rgba(255,255,255,.06); } :root.theme-light .hero, :root.theme-light .card{ background: rgba(255,255,255,.92); } } /* Responsive */ @media (max-width: 980px){ .header__grid{ grid-template-columns: 1fr; } .grid--3{ grid-template-columns: 1fr; } .grid--2{ grid-template-columns: 1fr; } } @media (max-width: 520px){ .hero__top{ flex-direction:column; align-items:flex-start; } .hero__photo{ width:88px; height:88px; } .footer__grid{ flex-direction:column; align-items:flex-start; } .footer__links a{ margin-left:0; margin-right:12px; } .bullets{ padding-left:16px; } } .pub__actions{ display: flex; flex-wrap: wrap; gap: 10px; } /* Если у тебя нет ghost-кнопок */ .btn--ghost{ background: transparent; border: 1px solid rgba(0,0,0,0.12); } .pub__actions{ display: flex; flex-wrap: wrap; gap: 10px; }