/* ========================================================= TRUEVITAHUB GLOBAL 3-ZONE VISUAL SYSTEM RED / BLUE / GRAPHITE ========================================================= */ /* ========================================================= ROOT COLORS ========================================================= */ :root { --tvh-zone-red: #ff3b30; --tvh-zone-blue: #1769ff; --tvh-zone-gray: #7d8490; --tvh-zone-red-soft: rgba(255, 59, 48, 0.08); --tvh-zone-blue-soft: rgba(23, 105, 255, 0.08); --tvh-zone-gray-soft: rgba(125, 132, 144, 0.08); --tvh-zone-current: #1769ff; } /* ========================================================= GLOBAL PAGE BACKGROUND ========================================================= */ html, body { position: relative; } /* * Main visual layer. * * Left = Red * Center = Blue * Right = Gray */ body::before { content: ""; position: fixed; inset: 0; z-index: -20; pointer-events: none; background: linear-gradient( 90deg, rgba(255, 59, 48, 0.055) 0%, rgba(255, 59, 48, 0.055) 32%, rgba(23, 105, 255, 0.045) 32%, rgba(23, 105, 255, 0.045) 68%, rgba(125, 132, 144, 0.055) 68%, rgba(125, 132, 144, 0.055) 100% ); } /* ========================================================= SOFT CENTER LIGHT ========================================================= */ body::after { content: ""; position: fixed; inset: 0; z-index: -19; pointer-events: none; background: radial-gradient( circle at 50% 35%, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.35) 30%, rgba(255,255,255,0) 70% ); } /* ========================================================= THREE VISUAL ZONES ========================================================= */ .tvh-zone-red { --tvh-zone-current: var(--tvh-zone-red); } .tvh-zone-blue { --tvh-zone-current: var(--tvh-zone-blue); } .tvh-zone-gray { --tvh-zone-current: var(--tvh-zone-gray); } /* ========================================================= GLOBAL INTERACTIVE ELEMENTS ========================================================= */ a, button, input, select, textarea { --tvh-interactive-color: var(--tvh-zone-current); } /* ========================================================= HOVER BORDER SYSTEM ========================================================= */ a:hover, button:hover { border-color: var(--tvh-interactive-color); } /* ========================================================= GLOBAL FOCUS ========================================================= */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid color-mix( in srgb, var(--tvh-interactive-color) 35%, transparent ); outline-offset: 3px; } /* ========================================================= BUTTON INTERACTION ========================================================= */ .tvh-btn-primary, .tvh-btn-secondary, button, input[type="submit"] { transition: background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease; } /* ========================================================= PRIMARY BUTTON ========================================================= */ .tvh-btn-primary:hover, button:hover, input[type="submit"]:hover { background: linear-gradient( 135deg, var(--tvh-zone-current), color-mix( in srgb, var(--tvh-zone-current) 72%, #ffffff ) ) !important; box-shadow: 0 12px 30px color-mix( in srgb, var(--tvh-zone-current) 28%, transparent ); transform: translateY(-2px); } /* ========================================================= CARDS ========================================================= */ .tvh-tool-card, .tvh-home-compare-card, .tvh-1b-offer-card, .tvh-resource-card, .tvh-review-card, .tvh-home-logo-item, .tvh-faq-item { transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; } .tvh-tool-card:hover, .tvh-home-compare-card:hover, .tvh-1b-offer-card:hover, .tvh-resource-card:hover, .tvh-review-card:hover, .tvh-home-logo-item:hover, .tvh-faq-item:hover { border-color: color-mix( in srgb, var(--tvh-zone-current) 55%, #ffffff ); box-shadow: 0 18px 45px color-mix( in srgb, var(--tvh-zone-current) 13%, transparent ); transform: translateY(-4px); } /* ========================================================= HEADINGS / LINKS ========================================================= */ a:hover { color: color-mix( in srgb, var(--tvh-zone-current) 82%, #111827 ); } /* ========================================================= NAVIGATION ========================================================= */ .main-navigation a, .tvh-main-nav a, .tvh-header-nav a { position: relative; } .main-navigation a::after, .tvh-main-nav a::after, .tvh-header-nav a::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 0; height: 2px; transform: translateX(-50%); background: var(--tvh-zone-current); transition: width .25s ease; } .main-navigation a:hover::after, .tvh-main-nav a:hover::after, .tvh-header-nav a:hover::after { width: 70%; } /* ========================================================= SEARCH INPUT ========================================================= */ input[type="search"]:focus, input[type="text"]:focus, input[type="email"]:focus { border-color: var(--tvh-zone-current) !important; box-shadow: 0 0 0 4px color-mix( in srgb, var(--tvh-zone-current) 12%, transparent ) !important; } /* ========================================================= THREE COLOR DIVIDER ========================================================= */ .tvh-three-zone-divider { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; height: 4px; overflow: hidden; } .tvh-three-zone-divider span:nth-child(1) { background: var(--tvh-zone-red); } .tvh-three-zone-divider span:nth-child(2) { background: var(--tvh-zone-blue); } .tvh-three-zone-divider span:nth-child(3) { background: var(--tvh-zone-gray); } /* ========================================================= SECTION TOP ACCENT ========================================================= */ .tvh-section-accent { position: relative; } .tvh-section-accent::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient( 90deg, var(--tvh-zone-red) 0%, var(--tvh-zone-red) 33.33%, var(--tvh-zone-blue) 33.33%, var(--tvh-zone-blue) 66.66%, var(--tvh-zone-gray) 66.66%, var(--tvh-zone-gray) 100% ); } /* ========================================================= CUSTOM CURSOR ========================================================= */ #tvh-zone-cursor { position: fixed; width: 18px; height: 18px; border-radius: 50%; pointer-events: none; z-index: 999999; background: var(--tvh-zone-current); box-shadow: 0 0 0 5px color-mix( in srgb, var(--tvh-zone-current) 15%, transparent ), 0 0 24px color-mix( in srgb, var(--tvh-zone-current) 35%, transparent ); transform: translate(-50%, -50%) scale(1); transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease; } /* ========================================================= CURSOR HOVER ========================================================= */ #tvh-zone-cursor.tvh-cursor-hover { transform: translate(-50%, -50%) scale(1.65); } /* ========================================================= CURSOR CLICK ========================================================= */ #tvh-zone-cursor.tvh-cursor-click { transform: translate(-50%, -50%) scale(2.25); } /* ========================================================= CURSOR DISABLED ON TOUCH ========================================================= */ @media (hover: none) { #tvh-zone-cursor { display: none; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 768px) { body::before { background: linear-gradient( 90deg, rgba(255, 59, 48, 0.035) 0%, rgba(255, 59, 48, 0.035) 33.33%, rgba(23, 105, 255, 0.03) 33.33%, rgba(23, 105, 255, 0.03) 66.66%, rgba(125, 132, 144, 0.035) 66.66%, rgba(125, 132, 144, 0.035) 100% ); } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }