/* ── RESET & BASE ── */ .vk-tb { position: relative; background: #0A0A0A; overflow: hidden; isolation: isolate; } /* ── GRAIN TEXTURE ── */ .vk-tb__grain { position: absolute; inset: 0; z-index: 0; opacity: 0.035; 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.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 180px; pointer-events: none; } /* ── GRID ── */ .vk-tb__grid { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; z-index: 1; max-width: 1440px; margin: 0 auto; } /* ── ITEM ── */ .vk-tb__item { position: relative; padding: 26px 30px; display: flex; align-items: center; gap: 18px; /* Each claim is now a link to the page that backs it up. */ cursor: pointer; text-decoration: none; color: inherit; overflow: hidden; transition: background 0.3s ease; border-right: 1px solid rgba(255,255,255,0.04); } .vk-tb__item:last-child { border-right: none; } /* ── HOVER SHIMMER BORDER ── */ .vk-tb__shimmer { position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } .vk-tb__shimmer::before { content: ''; position: absolute; inset: 0; border: 1px solid transparent; border-image: linear-gradient( 135deg, transparent 20%, rgba(170,255,0,0.3) 40%, rgba(170,255,0,0.5) 50%, rgba(170,255,0,0.3) 60%, transparent 80% ) 1; animation: vk-tb-shimmer 2.5s linear infinite; animation-play-state: paused; } .vk-tb__item:hover .vk-tb__shimmer { opacity: 1; } .vk-tb__item:hover .vk-tb__shimmer::before { animation-play-state: running; } @keyframes vk-tb-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* ── LIME ACCENT BAR ── */ .vk-tb__accent { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, #AAFF00, #88CC00); transform: scaleY(0); transform-origin: center; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); z-index: 2; box-shadow: 0 0 12px rgba(170,255,0,0.4); } .vk-tb__item:hover .vk-tb__accent { transform: scaleY(1); } /* ── HOVER BG ── */ .vk-tb__item:hover { background: rgba(170,255,0,0.02); } /* ── ICON ── */ .vk-tb__icon { position: relative; flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(170,255,0,0.05); border: 1px solid rgba(170,255,0,0.08); color: #666666; z-index: 1; transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } .vk-tb__item:hover .vk-tb__icon { color: #AAFF00; background: rgba(170,255,0,0.1); border-color: rgba(170,255,0,0.25); transform: scale(1.08); } /* ── ICON GLOW ── */ .vk-tb__icon-glow { position: absolute; inset: -6px; border-radius: 16px; background: radial-gradient(circle, rgba(170,255,0,0.15), transparent 70%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } .vk-tb__item:hover .vk-tb__icon-glow { opacity: 1; animation: vk-tb-glow-pulse 2s ease-in-out infinite; } @keyframes vk-tb-glow-pulse { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.15); opacity: 1; } } /* ── TEXT ── */ .vk-tb__text { display: flex; flex-direction: column; gap: 3px; z-index: 1; } .vk-tb__title { display: block; font-family: 'Inter', -apple-system, sans-serif; font-size: 13.5px; font-weight: 700; color: #FFFFFF; letter-spacing: 0.01em; line-height: 1.3; transition: color 0.3s ease; } .vk-tb__item:hover .vk-tb__title { color: #AAFF00; } .vk-tb__sub { font-family: 'Inter', -apple-system, sans-serif; font-size: 11.5px; color: #777777; line-height: 1.4; transition: color 0.3s ease; } .vk-tb__item:hover .vk-tb__sub { color: #999999; } /* Now that the items are links, give the keyboard the same cue as the mouse. */ .vk-tb__item:focus-visible { outline: 2px solid #AAFF00; outline-offset: -2px; } .vk-tb__item:focus-visible .vk-tb__title { color: #AAFF00; } /* ── DIVIDER ── */ .vk-tb__divider { height: 1px; background: linear-gradient( 90deg, transparent 0%, rgba(170,255,0,0.25) 25%, rgba(170,255,0,0.4) 50%, rgba(170,255,0,0.25) 75%, transparent 100% ); position: relative; z-index: 1; } /* ── SCROLL REVEAL ── */ .vk-tb-reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-delay: calc(var(--tb-i, 0) * 0.1s); } .vk-tb-reveal.is-visible { opacity: 1; transform: translateY(0); } /* ── RESPONSIVE: TABLET ── */ @media (max-width: 960px) { .vk-tb__grid { grid-template-columns: repeat(2, 1fr); } .vk-tb__item:nth-child(2n) { border-right: none; } .vk-tb__item:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,0.04); } .vk-tb__item { padding: 20px 24px; } } /* ── RESPONSIVE: MOBILE ── */ @media (max-width: 520px) { .vk-tb__grid { grid-template-columns: 1fr; } .vk-tb__item { border-right: none; border-top: 1px solid rgba(255,255,255,0.04); padding: 18px 20px; gap: 14px; } .vk-tb__item:first-child { border-top: none; } .vk-tb__icon { width: 40px; height: 40px; border-radius: 10px; } .vk-tb__icon svg { width: 20px; height: 20px; } .vk-tb__title { font-size: 13px; } .vk-tb__sub { font-size: 11px; } } /* ── ACCESSIBILITY ── */ @media (prefers-reduced-motion: reduce) { .vk-tb-reveal { opacity: 1; transform: none; transition: none; } .vk-tb__accent { transition: none; } .vk-tb__icon { transition: none; } .vk-tb__icon-glow { animation: none; } .vk-tb__shimmer::before { animation: none; } }