/* * DomainSearch.css * Place in: wwwroot/css/DomainSearch.css * Link in: App.razor / _Host.cshtml / index.html inside * * * Kept separate so Blazor re-renders NEVER touch this file, * which means @keyframes animations run forever uninterrupted. */ /* ── Fonts ──────────────────────────────────────────────────────────────── */ .ds-page { font-family: 'Plus Jakarta Sans', sans-serif; } .font-serif-ds { font-family: 'Playfair Display', Georgia, serif; } /* ── Hero search glow ring ──────────────────────────────────────────────── */ .search-glow::before { content: ''; position: absolute; inset: -4px; border-radius: 9999px; background: linear-gradient(90deg, rgba(153,27,27,.5), rgba(153,27,27,0)); filter: blur(10px); opacity: .25; transition: opacity .3s; pointer-events: none; } .search-glow:hover::before { opacity: .5; } /* ── TLD cards ──────────────────────────────────────────────────────────── */ .tld-card { transition: transform .5s, box-shadow .5s, background-color .5s, border-color .5s; } .tld-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px rgba(0,0,0,.2); } /* Default child colors (no inline style= on these elements) */ .tld-ext, .tld-price { color: #0f172a; transition: color .5s; } .tld-desc, .tld-year { color: #64748b; transition: color .5s; } .tld-badge { transition: background .5s, color .5s; } .tld-btn { background: #fff; border: 1px solid #e2e8f0; color: #0f172a; transition: background .5s, color .5s, border-color .5s; width: 100%; padding: 1rem; border-radius: 1rem; font-weight: 900; text-transform: uppercase; font-size: .625rem; letter-spacing: .1em; cursor: pointer; } /* hover-primary → red background */ .tld-card.hover-primary:hover { background-color: #991b1b !important; border-color: #991b1b !important; } .tld-card.hover-primary:hover .tld-ext, .tld-card.hover-primary:hover .tld-price, .tld-card.hover-primary:hover .tld-desc, .tld-card.hover-primary:hover .tld-year { color: #fff; } .tld-card.hover-primary:hover .tld-badge { background: rgba(255,255,255,.2) !important; color: #fff !important; } .tld-card.hover-primary:hover .tld-btn { background: #fff; color: #991b1b; border-color: #fff; } /* hover-dark → near-black background */ .tld-card.hover-dark:hover { background-color: #0f172a !important; border-color: #0f172a !important; } .tld-card.hover-dark:hover .tld-ext, .tld-card.hover-dark:hover .tld-price, .tld-card.hover-dark:hover .tld-desc, .tld-card.hover-dark:hover .tld-year { color: #fff; } .tld-card.hover-dark:hover .tld-btn { background: #fff; color: #0f172a; border-color: #fff; } /* ── Feature cards ──────────────────────────────────────────────────────── */ .feat-card { transition: transform .5s, box-shadow .5s; } .feat-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px rgba(0,0,0,.1); } .feat-card:hover .feat-icon-wrap { background: #991b1b !important; } .feat-card:hover .feat-icon { color: #fff !important; } /* ── Alt suggestion cards ───────────────────────────────────────────────── */ .alt-card { transition: transform .2s, box-shadow .2s, border-color .2s; } .alt-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.08); border-color: #991b1b !important; } .alt-card:hover .alt-name { color: #991b1b !important; } .alt-card:hover .alt-btn { background: #991b1b !important; color: #fff !important; } /* ── Extension rows ─────────────────────────────────────────────────────── */ .ext-row-available { transition: background .2s, border-color .2s; cursor: pointer; } .ext-row-available:hover { background: #f8fafc; border-color: #e2e8f0; } .ext-row-available:hover .ext-add-btn { opacity: 1; } .ext-add-btn { opacity: 0; transition: opacity .2s; } /* ── Spin animation (forever, no interruption) ──────────────────────────── */ /* * Lives here — NOT in the .razor