/* ============================================================ Azure DevOps Pro — Coder Theme Dark/Light mode via [data-theme] on ============================================================ */ /* Google Fonts already loaded in layout */ /* ---------- Design Tokens ---------- */ :root { --font-mono: 'JetBrains Mono', 'Fira Code', monospace; --font-body: 'DM Sans', system-ui, sans-serif; /* Transitions */ --transition: 0.2s ease; --transition-slow: 0.4s cubic-bezier(0.16, 1, 0.3, 1); /* Shared */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px; } /* ---------- Dark Theme (default) ---------- */ [data-theme="dark"] { --bg: #0d1117; --bg-surface: #161b22; --bg-elevated: #1c2128; --border: #30363d; --border-subtle:#21262d; --text-primary: #e6edf3; --text-secondary: #8b949e; --text-muted: #57606a; --accent-blue: #58a6ff; --accent-green: #3fb950; --accent-orange: #f0883e; --accent-red: #f85149; --accent-teal: #39d353; --code-bg: #161b22; --code-border: #30363d; --tg-blue: #2aabee; --yt-red: #ff4444; --li-blue: #0a66c2; --gh-white: #e6edf3; --glow-blue: rgba(88, 166, 255, 0.15); --glow-green: rgba(63, 185, 80, 0.15); --glow-orange: rgba(240, 136, 62, 0.12); } /* ---------- Light Theme ---------- */ [data-theme="light"] { --bg: #f6f8fa; --bg-surface: #ffffff; --bg-elevated: #f0f6ff; --border: #d0d7de; --border-subtle:#eaeef2; --text-primary: #1f2328; --text-secondary: #57606a; --text-muted: #8c959f; --accent-blue: #0969da; --accent-green: #1a7f37; --accent-orange: #bc4c00; --accent-red: #cf222e; --accent-teal: #116329; --code-bg: #f6f8fa; --code-border: #d0d7de; --tg-blue: #0088cc; --yt-red: #cc0000; --li-blue: #0a66c2; --gh-white: #1f2328; --glow-blue: rgba(9, 105, 218, 0.08); --glow-green: rgba(26, 127, 55, 0.08); --glow-orange: rgba(188, 76, 0, 0.08); } /* ---------- Base Reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font-body); background: var(--bg); color: var(--text-primary); line-height: 1.6; transition: background var(--transition-slow), color var(--transition-slow); min-height: 100vh; } /* Scrollbar */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; } /* ---------- Typography ---------- */ h1, h2, h3, h4 { font-family: var(--font-body); font-weight: 700; line-height: 1.25; color: var(--text-primary); } a { color: var(--accent-blue); text-decoration: none; transition: opacity var(--transition); } a:hover { opacity: 0.8; } code, pre, .mono { font-family: var(--font-mono); } /* ---------- Layout ---------- */ .container { width: min(1100px, 94%); margin: 0 auto; } section { padding: 4rem 0; } .section-label { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent-green); margin-bottom: 0.6rem; } .section-title { font-size: clamp(1.6rem, 3.5vw, 2.2rem); font-weight: 700; margin-bottom: 1rem; } .section-subtitle { color: var(--text-secondary); font-size: 1.05rem; max-width: 540px; } /* ---------- Header & Nav ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--bg); border-bottom: 1px solid var(--border-subtle); padding: 0; transition: background var(--transition-slow), border-color var(--transition-slow); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background: color-mix(in srgb, var(--bg) 85%, transparent); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 60px; gap: 1.5rem; } .site-logo { font-family: var(--font-mono); font-size: 1rem; font-weight: 700; color: var(--text-primary); text-decoration: none; display: flex; align-items: center; gap: 0; white-space: nowrap; flex-shrink: 0; } .logo-bracket { color: var(--accent-blue); } .logo-text { color: var(--text-primary); } .site-nav { display: flex; align-items: center; gap: 0.25rem; } .nav-link { font-size: 0.9rem; font-weight: 500; color: var(--text-secondary); text-decoration: none; padding: 0.4rem 0.75rem; border-radius: var(--radius-sm); transition: color var(--transition), background var(--transition); } .nav-link:hover { color: var(--text-primary); background: var(--bg-surface); opacity: 1; } .theme-toggle { background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-secondary); width: 36px; height: 36px; border-radius: var(--radius-sm); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; transition: color var(--transition), border-color var(--transition), background var(--transition); margin-left: 0.5rem; } .theme-toggle:hover { color: var(--accent-blue); border-color: var(--accent-blue); background: var(--glow-blue); } .mobile-menu-btn { display: none; background: none; border: none; color: var(--text-primary); font-size: 1.2rem; cursor: pointer; padding: 0.3rem; } .mobile-nav { display: none; flex-direction: column; padding: 0.75rem 1rem 1rem; border-top: 1px solid var(--border-subtle); gap: 0.1rem; } .mobile-nav.open { display: flex; } .mobile-nav .nav-link { padding: 0.6rem 0.5rem; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-body); font-size: 0.9rem; font-weight: 600; padding: 0.6rem 1.2rem; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: all var(--transition); white-space: nowrap; } .btn-primary { background: var(--accent-blue); color: #fff; border-color: var(--accent-blue); } .btn-primary:hover { opacity: 0.88; transform: translateY(-1px); } .btn-green { background: var(--accent-green); color: #fff; border-color: var(--accent-green); } .btn-green:hover { opacity: 0.88; transform: translateY(-1px); } .btn-orange { background: var(--accent-orange); color: #fff; border-color: var(--accent-orange); } .btn-orange:hover { opacity: 0.88; transform: translateY(-1px); } .btn-outline { background: transparent; color: var(--text-primary); border-color: var(--border); } .btn-outline:hover { border-color: var(--accent-blue); color: var(--accent-blue); background: var(--glow-blue); opacity: 1; transform: translateY(-1px); } /* ---------- Hero Section ---------- */ .hero-section { padding: 5rem 0 4rem; border-bottom: 1px solid var(--border-subtle); } .hero-grid { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 3rem; } .hero-prompt { font-family: var(--font-mono); font-size: 0.85rem; color: var(--accent-green); margin-bottom: 1.2rem; display: flex; align-items: center; gap: 0.5rem; } .hero-prompt::before { content: '$'; color: var(--text-muted); } .hero-name { font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; line-height: 1.15; margin-bottom: 0.5rem; } .hero-name .highlight { color: var(--accent-blue); position: relative; } .hero-title { font-family: var(--font-mono); font-size: clamp(0.9rem, 2vw, 1.1rem); color: var(--accent-orange); margin-bottom: 1.5rem; font-weight: 400; } .hero-bio { color: var(--text-secondary); font-size: 1rem; line-height: 1.7; max-width: 520px; margin-bottom: 2rem; } .hero-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; } .badge { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; padding: 0.25rem 0.65rem; border-radius: var(--radius-pill); background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-secondary); letter-spacing: 0.03em; } .badge.badge-blue { border-color: var(--accent-blue); color: var(--accent-blue); background: var(--glow-blue); } .badge.badge-green { border-color: var(--accent-green); color: var(--accent-green); background: var(--glow-green); } .badge.badge-orange { border-color: var(--accent-orange); color: var(--accent-orange); background: var(--glow-orange); } .hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; } /* Terminal Card */ .terminal-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; width: 300px; flex-shrink: 0; box-shadow: 0 8px 30px rgba(0,0,0,0.25); } .terminal-bar { background: var(--bg-elevated); padding: 0.6rem 1rem; display: flex; align-items: center; gap: 0.5rem; border-bottom: 1px solid var(--border); } .terminal-dots { display: flex; gap: 6px; } .dot { width: 11px; height: 11px; border-radius: 50%; } .dot-red { background: #ff5f57; } .dot-yellow { background: #febc2e; } .dot-green { background: #28c840; } .terminal-title { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); margin-left: 0.3rem; } .terminal-body { padding: 1rem 1rem 1.25rem; font-family: var(--font-mono); font-size: 0.78rem; line-height: 1.75; } .terminal-line { display: flex; gap: 0.5rem; } .term-prompt { color: var(--accent-green); flex-shrink: 0; } .term-cmd { color: var(--text-primary); } .term-out { color: var(--text-secondary); padding-left: 0; } .term-out.success { color: var(--accent-green); } .term-out.info { color: var(--accent-blue); } .term-cursor { display: inline-block; width: 8px; height: 1em; background: var(--accent-green); vertical-align: text-bottom; animation: blink 1s step-end infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* ---------- Telegram Section ---------- */ .telegram-section { padding: 4rem 0; border-bottom: 1px solid var(--border-subtle); } .telegram-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; min-height: 380px; } .telegram-info { padding: 3rem; display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; background: linear-gradient(135deg, var(--bg-surface) 0%, color-mix(in srgb, var(--tg-blue) 5%, var(--bg-surface)) 100%); } .tg-icon-wrap { width: 52px; height: 52px; border-radius: var(--radius-md); background: var(--tg-blue); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: #fff; box-shadow: 0 4px 16px rgba(42, 171, 238, 0.3); } .telegram-info h2 { font-size: 1.6rem; line-height: 1.2; } .telegram-info p { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.6; } .tg-stats { display: flex; gap: 1.5rem; } .tg-stat-item { display: flex; flex-direction: column; } .tg-stat-num { font-family: var(--font-mono); font-size: 1.4rem; font-weight: 700; color: var(--tg-blue); } .tg-stat-label { font-size: 0.78rem; color: var(--text-muted); } /* Telegram Chat Simulation */ .telegram-chat { background: var(--bg); border-left: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; } .chat-header { background: var(--bg-elevated); border-bottom: 1px solid var(--border); padding: 0.9rem 1.2rem; display: flex; align-items: center; gap: 0.75rem; } .chat-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--tg-blue), #1a6fa3); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1rem; flex-shrink: 0; } .chat-header-info { min-width: 0; } .chat-header-name { font-weight: 600; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-header-sub { font-size: 0.72rem; color: var(--accent-green); } .chat-messages { flex: 1; overflow: hidden; padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; } .chat-bubble { max-width: 88%; display: flex; flex-direction: column; gap: 0.2rem; animation: fadeSlideUp 0.4s ease both; } @keyframes fadeSlideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .chat-bubble.mine { align-self: flex-end; align-items: flex-end; } .chat-bubble.theirs { align-self: flex-start; align-items: flex-start; } .bubble-sender { font-size: 0.68rem; font-weight: 600; color: var(--accent-blue); padding: 0 0.5rem; } .bubble-text { padding: 0.55rem 0.85rem; border-radius: 14px; font-size: 0.82rem; line-height: 1.45; max-width: 100%; } .chat-bubble.theirs .bubble-text { background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-primary); border-bottom-left-radius: 4px; } .chat-bubble.mine .bubble-text { background: var(--tg-blue); color: #fff; border-bottom-right-radius: 4px; } .bubble-time { font-size: 0.62rem; color: var(--text-muted); padding: 0 0.5rem; } .chat-input-bar { padding: 0.75rem 1rem; border-top: 1px solid var(--border); display: flex; gap: 0.5rem; align-items: center; } .chat-input-mock { flex: 1; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 0.5rem 1rem; font-size: 0.8rem; color: var(--text-muted); font-family: var(--font-body); pointer-events: none; user-select: none; } .chat-send-btn { width: 32px; height: 32px; border-radius: 50%; background: var(--tg-blue); border: none; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; cursor: default; flex-shrink: 0; } /* ---------- YouTube Section ---------- */ .yt-section { padding: 4rem 0; border-bottom: 1px solid var(--border-subtle); } .yt-section-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem; } .yt-channel-strip { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1.25rem 1.5rem; display: flex; align-items: center; gap: 1.25rem; margin-bottom: 2rem; } .yt-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid var(--yt-red); flex-shrink: 0; } .yt-channel-info { flex: 1; min-width: 0; } .yt-channel-info h3 { font-size: 1rem; margin-bottom: 0.2rem; } .yt-channel-info p { font-size: 0.82rem; color: var(--text-secondary); } .yt-channel-stats { display: flex; gap: 1.5rem; margin-top: 0.4rem; } .yt-stat-item { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted); } .yt-stat-item strong { color: var(--text-primary); font-weight: 600; } .videos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; } .video-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; transition: border-color var(--transition), transform var(--transition-slow), box-shadow var(--transition-slow); cursor: pointer; text-decoration: none; display: block; } .video-card:hover { border-color: var(--accent-blue); transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.2); opacity: 1; } .video-thumb-wrap { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--bg-elevated); } .video-thumb { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--transition-slow); } .video-card:hover .video-thumb { transform: scale(1.04); } .video-play-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.38); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity var(--transition); } .video-card:hover .video-play-overlay { opacity: 1; } .play-btn-circle { width: 48px; height: 48px; border-radius: 50%; background: var(--yt-red); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.1rem; box-shadow: 0 4px 16px rgba(0,0,0,0.4); transform: scale(0.85); transition: transform var(--transition); } .video-card:hover .play-btn-circle { transform: scale(1); } .video-meta { padding: 1rem; } .video-title { font-size: 0.88rem; font-weight: 600; line-height: 1.4; color: var(--text-primary); margin-bottom: 0.4rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .video-date { font-size: 0.75rem; color: var(--text-muted); font-family: var(--font-mono); } /* ---------- Books Section ---------- */ .books-section { padding: 4rem 0; border-bottom: 1px solid var(--border-subtle); } .books-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; } .book-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; display: flex; gap: 1.25rem; padding: 1.5rem; transition: border-color var(--transition), transform var(--transition-slow), box-shadow var(--transition-slow); } .book-card:hover { border-color: var(--accent-orange); transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.2); } .book-cover { width: 90px; flex-shrink: 0; border-radius: var(--radius-sm); overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.3); } .book-cover img { width: 100%; display: block; object-fit: cover; } .book-details { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; } .book-platform { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-orange); } .book-title { font-size: 1rem; font-weight: 700; line-height: 1.3; color: var(--text-primary); } .book-author { font-size: 0.8rem; color: var(--text-muted); } .book-desc { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.5; flex: 1; } /* ---------- Blog / Links Section ---------- */ .links-section { padding: 4rem 0; border-bottom: 1px solid var(--border-subtle); } .links-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; } .link-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1.75rem; display: flex; flex-direction: column; gap: 1rem; text-decoration: none; transition: border-color var(--transition), transform var(--transition-slow), box-shadow var(--transition-slow); } .link-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.2); opacity: 1; } .link-card.card-blog:hover { border-color: var(--accent-green); } .link-card.card-resume:hover { border-color: var(--accent-blue); } .link-card-icon { width: 44px; height: 44px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; } .icon-green { background: var(--glow-green); color: var(--accent-green); border: 1px solid var(--accent-green); } .icon-blue { background: var(--glow-blue); color: var(--accent-blue); border: 1px solid var(--accent-blue); } .link-card h3 { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); } .link-card p { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.55; } .link-arrow { font-size: 0.85rem; color: var(--text-muted); margin-top: auto; } /* ---------- Footer ---------- */ .site-footer { background: var(--bg-surface); border-top: 1px solid var(--border); padding: 2.5rem 0; } .footer-inner { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; text-align: center; } .footer-brand { font-family: var(--font-mono); font-size: 0.9rem; font-weight: 700; color: var(--text-primary); } .footer-tagline { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); margin-top: 0.3rem; font-weight: 400; } .footer-socials { display: flex; gap: 0.75rem; align-items: center; } .social-btn { width: 42px; height: 42px; border-radius: var(--radius-sm); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 1rem; text-decoration: none; color: var(--text-secondary); background: var(--bg); transition: all var(--transition); } .social-btn:hover { opacity: 1; transform: translateY(-3px); } .social-btn.yt:hover { color: var(--yt-red); border-color: var(--yt-red); background: rgba(255,68,68,0.1); } .social-btn.li:hover { color: var(--li-blue); border-color: var(--li-blue); background: rgba(10,102,194,0.1); } .social-btn.tg:hover { color: var(--tg-blue); border-color: var(--tg-blue); background: rgba(42,171,238,0.1); } .social-btn.gh:hover { color: var(--text-primary); border-color: var(--text-primary); background: var(--bg-elevated); } .footer-copy { font-size: 0.78rem; color: var(--text-muted); } .footer-copy a { color: var(--text-muted); } .footer-copy a:hover { color: var(--accent-blue); } /* ---------- Blog page ---------- */ .blog-page { padding: 4rem 0; } .blog-page h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); margin-bottom: 0.5rem; } .blog-list { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 1rem; } .blog-post-item { display: flex; align-items: baseline; justify-content: space-between; padding: 1.25rem 1.5rem; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); text-decoration: none; color: var(--text-primary); transition: border-color var(--transition), transform var(--transition-slow); gap: 1rem; } .blog-post-item:hover { border-color: var(--accent-green); transform: translateX(4px); opacity: 1; } .blog-post-title { font-weight: 600; font-size: 0.95rem; flex: 1; } .blog-post-date { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; } /* ---------- Post page ---------- */ .post-page { padding: 3rem 0; max-width: 720px; } .post-page h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin-bottom: 0.5rem; } .post-meta { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted); margin-bottom: 2.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border-subtle); } .post-page h2 { font-size: 1.4rem; margin: 2rem 0 0.75rem; color: var(--accent-blue); } .post-page h3 { font-size: 1.1rem; margin: 1.5rem 0 0.5rem; } .post-page p { margin: 0.75rem 0; color: var(--text-secondary); line-height: 1.75; } .post-page ul, .post-page ol { padding-left: 1.5rem; margin: 0.75rem 0; color: var(--text-secondary); line-height: 1.8; } .post-page code { background: var(--code-bg); border: 1px solid var(--code-border); padding: 0.15em 0.4em; border-radius: 4px; font-size: 0.87em; color: var(--accent-orange); } .post-page pre { background: var(--code-bg); border: 1px solid var(--code-border); border-radius: var(--radius-sm); padding: 1.25rem; overflow-x: auto; margin: 1rem 0; } .post-page pre code { background: none; border: none; padding: 0; color: var(--text-primary); } /* ---------- Loading states ---------- */ .skeleton { background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--border) 50%, var(--bg-elevated) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-sm); } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } .terminal-card { width: 100%; max-width: 380px; } .telegram-card { grid-template-columns: 1fr; } .telegram-chat { min-height: 340px; } } @media (max-width: 768px) { section { padding: 2.5rem 0; } .hero-section { padding: 3rem 0 2rem; } .site-nav { display: none; } .mobile-menu-btn { display: flex; align-items: center; } .yt-section-header { flex-direction: column; align-items: flex-start; } .yt-channel-strip { flex-wrap: wrap; } .book-card { flex-direction: column; } .book-cover { width: 80px; } } @media (max-width: 480px) { .hero-actions { flex-direction: column; } .tg-stats { gap: 1rem; } .videos-grid { grid-template-columns: 1fr; } .books-grid { grid-template-columns: 1fr; } .links-grid { grid-template-columns: 1fr; } } /* ---------- Util ---------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }