/* ToFindAI - Unified Stylesheet */ /* Futuristic Metallic Theme (B/C Hybrid) */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); :root{ --bg-0:#06070a; --bg-1:#0b0e14; --bg-2:#101722; --surface-0:rgba(16,22,31,.78); --surface-1:rgba(20,28,40,.88); --surface-2:#141b26; --silver:#c7d0db; --silver-2:#aab6c6; --red:#ff2d2d; --red-2:#ff4b4b; --gold:#d4af37; --gold-2:#f5d76e; --primary:var(--red); --primary-dark:#c81f1f; --dark-bg:var(--bg-0); --darker-bg:var(--bg-1); --card-bg:rgba(16,22,31,.72); --card-hover:rgba(22,30,43,.88); --border:rgba(199,208,219,.18); --border-color:var(--border); --text:#ffffff; --text-color:var(--text); --text-muted:rgba(199,208,219,.90); --text-dim:rgba(199,208,219,.64); --success:#22c55e; --warning:#f59e0b; --danger:#ff3b3b; --radius:14px; --radius-sm:10px; --line-1:1px; --line-2:2px; --shadow:0 18px 60px rgba(0,0,0,.45); --glow-red:0 0 0 1px rgba(255,45,45,.28),0 0 28px rgba(255,45,45,.18); --glow-gold:0 0 0 1px rgba(212,175,55,.24),0 0 28px rgba(212,175,55,.14); } /* Optional: switch to light theme by setting */ body[data-theme="light"]{ --primary:#111827; --primary-dark:#0b1220; --dark-bg:#e9edf2; --darker-bg:#dde3ea; --card-bg:#ffffff; --card-hover:#f4f6f8; --border:#cfd6df; --text:#0b0e13; --text-muted:#2b3442; --text-dim:#6b7280; --shadow:0 10px 26px rgba(16,24,40,.08); } *{margin:0;padding:0;box-sizing:border-box} body{ font-family: var(--font-ui); background:linear-gradient(180deg,var(--dark-bg),var(--darker-bg)); color:var(--text); min-height:100vh; line-height:1.6; max-width:100%; overflow-x:clip; } /* Futuristic background layers: red edges + gold rails + metallic spine + subtle motion */ body::before{ content:""; position:fixed; inset:0; z-index:-2; pointer-events:none; background: radial-gradient(circle at 0% 50%, rgba(255,45,45,0.16) 0%, rgba(255,45,45,0.00) 55%), radial-gradient(circle at 100% 50%, rgba(255,45,45,0.16) 0%, rgba(255,45,45,0.00) 55%), linear-gradient(90deg, rgba(255,45,45,0.22) 0%, rgba(255,45,45,0.08) 3%, rgba(255,45,45,0.00) 10%, rgba(0,0,0,0.00) 90%, rgba(255,45,45,0.08) 97%, rgba(255,45,45,0.22) 100% ), linear-gradient(90deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.00) 36%, rgba(255,255,255,0.03) 43%, rgba(199,208,219,0.10) 46%, rgba(255,255,255,0.06) 50%, rgba(199,208,219,0.10) 54%, rgba(255,255,255,0.03) 57%, rgba(0,0,0,0.00) 64%, rgba(0,0,0,0.00) 100% ), linear-gradient(90deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.00) 38%, rgba(212,175,55,0.00) 41%, rgba(212,175,55,0.16) 42%, rgba(212,175,55,0.00) 43%, rgba(0,0,0,0.00) 57%, rgba(212,175,55,0.00) 58%, rgba(212,175,55,0.16) 59%, rgba(212,175,55,0.00) 60%, rgba(0,0,0,0.00) 100% ), radial-gradient(circle at 50% 40%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.00) 55%), repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,0.045) 0 1px, rgba(0,0,0,0.00) 1px 10px); opacity:0.44; mix-blend-mode:overlay; } body::after{ content:""; position:fixed; inset:-35vh -20vw; z-index:-1; pointer-events:none; background:linear-gradient(115deg, rgba(255,255,255,0.00) 0%, rgba(199,208,219,0.06) 18%, rgba(212,175,55,0.10) 30%, rgba(255,45,45,0.08) 44%, rgba(255,255,255,0.00) 62% ); filter:blur(18px); opacity:0.62; animation:tfa_sheen 12.5s linear infinite; } @keyframes tfa_sheen{ 0%{transform:translateX(-18%) translateY(-8%) rotate(.5deg)} 50%{transform:translateX(8%) translateY(6%) rotate(.5deg)} 100%{transform:translateX(18%) translateY(10%) rotate(.5deg)} } /* Header */ header{ background:linear-gradient(180deg, rgba(10,12,16,0.90), rgba(10,12,16,0.62)); border-bottom:var(--line-2) solid rgba(199,208,219,0.14); box-shadow:0 16px 56px rgba(0,0,0,0.62); padding:.85em 1.5em; position:sticky; top:0; z-index:100; backdrop-filter:blur(10px); } header::after{ content:""; position:absolute; left:0;right:0;bottom:-1px; height:3px; background:linear-gradient(90deg, rgba(255,45,45,0.00), rgba(255,45,45,0.80), rgba(212,175,55,0.60), rgba(199,208,219,0.00)); pointer-events:none; } .header-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1em} .brand{display:flex;align-items:center;gap:.5em} .brand-logo{font-size:1.5em;font-weight:700;color:var(--primary);text-decoration:none;letter-spacing:-.02em} .brand-logo span{color:var(--text-dim);font-weight:400} .brand-tagline{color:var(--text-dim);font-size:.85em;margin-left:.5em} nav{display:flex;align-items:center;gap:1.5em;flex-wrap:wrap} nav a{color:var(--text-muted);text-decoration:none;font-size:.95em;transition:color .2s} nav a:hover{color:var(--gold-2)} nav a.active{color:var(--primary);font-weight:600} .header-actions{display:flex;align-items:center;gap:.8em} .search-box{display:flex;align-items:center;background:rgba(0,0,0,0.22);border-radius:var(--radius-sm);padding:.32em .6em;border:var(--line-1) solid rgba(199,208,219,0.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.03)} .search-box input{background:none;border:none;color:var(--text);outline:none;width:160px;font-size:.9em} .search-box button{background:linear-gradient(180deg,var(--red-2),var(--red));border:none;color:#fff;padding:.42em .82em;border-radius:var(--radius-sm);cursor:pointer;font-weight:700;box-shadow:0 10px 24px rgba(255,45,45,0.22)} /* Buttons */ .btn{display:inline-block;padding:.62em 1.22em;border-radius:var(--radius-sm);text-decoration:none;font-weight:700;cursor:pointer;transition:all .2s;border:none;font-size:.95em} .btn-primary{background:linear-gradient(180deg,var(--red-2),var(--red));color:#fff;box-shadow:0 12px 34px rgba(255,45,45,0.22);border:var(--line-1) solid rgba(255,45,45,0.22)} .btn-primary:hover{background:linear-gradient(180deg,#ff6161,#d61f1f);box-shadow:0 16px 44px rgba(255,45,45,0.30);transform:translateY(-1px)} .btn-secondary{background:linear-gradient(180deg,rgba(255,255,255,0.07),rgba(255,255,255,0.02));color:var(--silver);border:var(--line-1) solid rgba(199,208,219,0.26);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.03)} .btn-secondary:hover{border-color:rgba(212,175,55,0.35);box-shadow:var(--glow-gold);transform:translateY(-1px)} /* Main */ main{max-width:1200px;margin:0 auto;padding:2em 1.5em} /* Hero */ .hero{text-align:center;padding:4em 1em;background:linear-gradient(180deg,rgba(255,255,255,0.02) 0%,transparent 100%);position:relative} .hero::before{content:"";position:absolute;inset:.5em;border-radius:18px;border:var(--line-1) solid rgba(199,208,219,0.10);box-shadow:inset 0 0 0 1px rgba(0,0,0,0.35);pointer-events:none} .hero h1{font-size:2.8em;margin-bottom:.5em;background:linear-gradient(90deg,var(--text),rgba(199,208,219,0.92),rgba(212,175,55,0.98),rgba(255,45,45,0.98));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .hero p{color:var(--text-muted);font-size:1.2em;max-width:650px;margin:0 auto 2em} /* Category Grid */ .category-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5em;margin:2em 0} .category-card{background:var(--card-bg);border-radius:var(--radius);padding:2em;text-align:center;transition:all .25s;border:var(--line-2) solid rgba(199,208,219,0.12);text-decoration:none;color:var(--text);box-shadow:0 12px 40px rgba(0,0,0,0.30);position:relative;overflow:hidden} .category-card::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,0.06),rgba(255,255,255,0.00) 35%,rgba(212,175,55,0.05) 60%,rgba(255,45,45,0.04) 85%,rgba(0,0,0,0.00));opacity:.55;pointer-events:none} .category-card:hover{transform:translateY(-4px);background:var(--card-hover);border-color:rgba(255,45,45,0.38);box-shadow:0 18px 60px rgba(0,0,0,0.42)} .category-icon{font-size:3em;margin-bottom:.5em} .category-card h3{color:var(--gold-2);margin-bottom:.5em;position:relative;z-index:1} .category-card p{color:var(--text-dim);font-size:.9em;position:relative;z-index:1} /* Forms */ .form-section{background:var(--card-bg);border-radius:var(--radius);padding:2em;max-width:800px;margin:0 auto;border:var(--line-2) solid rgba(199,208,219,0.12);box-shadow:0 18px 70px rgba(0,0,0,0.40)} .form-section h2{color:var(--gold-2);margin-bottom:.5em} .form-section .subtitle{color:var(--text-muted);margin-bottom:2em} .form-group{margin-bottom:1.5em} .form-group label{display:block;margin-bottom:.5em;color:var(--silver);font-weight:700} .form-group input,.form-group select,.form-group textarea{width:100%;padding:.8em;background:rgba(0,0,0,0.34);border:var(--line-2) solid rgba(199,208,219,0.12);border-radius:var(--radius-sm);color:var(--text);font-size:.95em;font-family:inherit} .form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:rgba(255,45,45,0.52);box-shadow:var(--glow-red)} .form-group small{color:var(--text-dim);font-size:.85em} select[multiple]{min-height:150px} select[multiple] option{padding:.5em} select[multiple] option:checked{background:var(--primary);color:#fff} /* Pricing display */ .pricing-box{background:rgba(0,0,0,0.22);border-radius:var(--radius);padding:1.5em;margin:1.5em 0;border:var(--line-2) solid rgba(199,208,219,0.12)} .pricing-box h3{color:var(--gold-2);margin-bottom:1em} .price-display{font-size:2em;font-weight:800;color:var(--gold-2)} .price-breakdown{margin-top:1em;padding-top:1em;border-top:var(--line-1) solid rgba(199,208,219,0.14)} .price-row{display:flex;justify-content:space-between;margin:.5em 0} .price-row.total{font-weight:800;font-size:1.1em;color:var(--silver)} .savings{color:var(--success);font-weight:700} /* Modal */ .modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.84);display:none;justify-content:center;align-items:center;z-index:1000} .modal-overlay.active{display:flex} .modal{background:var(--card-bg);border-radius:var(--radius);padding:2em;max-width:500px;width:90%;border:var(--line-2) solid rgba(255,45,45,0.28);text-align:center;box-shadow:0 24px 90px rgba(0,0,0,0.62)} .modal h2{color:var(--gold-2);margin-bottom:1em} .modal p{color:var(--text-muted);margin-bottom:1.5em} .modal-buttons{display:flex;gap:1em;justify-content:center;flex-wrap:wrap} /* Admin */ .admin-body{background:var(--dark-bg)} .admin-header{background:var(--card-bg);border-bottom:3px solid rgba(255,45,45,0.55)} .admin-nav{display:flex;gap:.5em;flex-wrap:wrap} .admin-nav a{padding:.5em 1em;border-radius:var(--radius-sm);background:rgba(0,0,0,0.28);border:var(--line-1) solid rgba(199,208,219,0.16)} .admin-nav a:hover,.admin-nav a.active{background:rgba(255,45,45,0.16);color:#fff;border-color:rgba(255,45,45,0.36);box-shadow:var(--glow-red)} .admin-card{background:var(--card-bg);border-radius:var(--radius);padding:1.5em;margin-bottom:1.5em;border:var(--line-2) solid rgba(199,208,219,0.12);box-shadow:0 18px 70px rgba(0,0,0,0.40)} .admin-card h3{color:var(--gold-2);margin-bottom:1em;padding-bottom:.5em;border-bottom:var(--line-1) solid rgba(199,208,219,0.14)} /* Stats */ .stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1em;margin-bottom:2em} .stat-card{background:var(--card-bg);border-radius:var(--radius);padding:1.5em;text-align:center;border:var(--line-2) solid rgba(199,208,219,0.12)} .stat-number{font-size:2.5em;font-weight:900;color:var(--gold-2)} .stat-label{color:var(--text-dim);font-size:.9em} /* Admin listing rows */ .listing-card{background:var(--card-bg);border-radius:var(--radius);padding:1.5em;margin-bottom:1em;border:var(--line-2) solid rgba(199,208,219,0.12);display:flex;gap:1em;align-items:flex-start} .listing-card.pending{border-left:4px solid var(--warning)} .listing-card.approved{border-left:4px solid var(--success)} .listing-card.rejected{border-left:4px solid var(--danger)} .listing-info{flex:1} .listing-info h4{color:var(--gold-2);margin-bottom:.3em} .listing-meta{color:var(--text-dim);font-size:.9em} .listing-actions{display:flex;gap:.5em;flex-wrap:wrap} .btn-small{padding:.4em .8em;font-size:.85em} .btn-success{background:var(--success);color:#0b0e13} .btn-danger{background:var(--danger);color:#fff} /* Toggle */ .toggle-switch{position:relative;display:inline-block;width:50px;height:26px} .toggle-switch input{opacity:0;width:0;height:0} .toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:rgba(199,208,219,0.18);border-radius:26px;transition:.3s;border:var(--line-1) solid rgba(199,208,219,0.18)} .toggle-slider:before{position:absolute;content:"";height:20px;width:20px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.3s} input:checked + .toggle-slider{background:rgba(255,45,45,0.62)} input:checked + .toggle-slider:before{transform:translateX(24px)} /* Footer */ footer{background:rgba(0,0,0,0.34);border-top:var(--line-2) solid rgba(199,208,219,0.14);padding:2em 1.5em;text-align:center;color:var(--text-dim);font-size:.9em} .footer-links{margin-bottom:1em} .footer-links a{color:var(--gold-2);text-decoration:none;margin:0 .5em} .footer-links a:hover{text-decoration:underline} /* Responsive */ @media (max-width:768px){ .header-inner{flex-direction:column;align-items:flex-start} nav{width:100%;justify-content:center} .hero h1{font-size:2em} .category-grid{grid-template-columns:1fr} .listing-card{flex-direction:column} .modal-buttons{flex-direction:column} } /* Utility */ .text-center{text-align:center} .text-primary{color:var(--primary)} .text-success{color:var(--success)} .text-muted{color:var(--text-muted)} .mb-1{margin-bottom:1em} .mb-2{margin-bottom:2em} .mt-1{margin-top:1em} .mt-2{margin-top:2em} .hidden{display:none!important} /* Submission notices */ .notice.notice-error{background:rgba(255,77,77,0.12);border:var(--line-2) solid rgba(255,77,77,0.30);color:var(--text);padding:1em;border-radius:var(--radius)} .notice.notice-error strong{color:var(--warning)} /* Subcategory selector */ .subcats-grid{display:grid;gap:1em} .subcat-group{background:var(--card-bg);border:var(--line-2) solid rgba(199,208,219,0.12);border-radius:var(--radius);padding:.8em} .subcat-title{font-weight:800;text-transform:capitalize;margin-bottom:.6em;color:var(--text)} .subcat-item{display:flex;align-items:center;gap:.5em;padding:.25em 0;cursor:pointer;color:var(--text-muted)} .subcat-item input{transform:translateY(1px)} .subcat-item:hover{color:var(--text)} /* Sponsored/native helpers */ .sponsored-card{background:rgba(255,255,255,0.03);border:var(--line-2) solid rgba(199,208,219,0.12);border-radius:14px;padding:.9em 1em;margin:.9em 0} .tfa-ad{margin:.9em 0} .tfa-ad--native{background:rgba(255,255,255,0.03);border:var(--line-2) solid rgba(199,208,219,0.12);border-radius:14px;padding:.9em 1em} .tfa-ad--native .tfa-ad__pill{display:inline-block;padding:.25em .55em;border-radius:999px;border:var(--line-1) solid rgba(255,255,255,0.18);color:var(--text-dim);font-size:.78em;letter-spacing:.02em} .tfa-ad--native .tfa-ad__row{display:flex;gap:.9em;align-items:flex-start} .tfa-ad--native .tfa-ad__logo{width:48px;height:48px;border-radius:12px;overflow:hidden;background:rgba(255,255,255,0.06);border:var(--line-1) solid rgba(255,255,255,0.12);flex:0 0 auto} .tfa-ad--native .tfa-ad__logo img{width:100%;height:100%;object-fit:cover;display:block} .tfa-ad--native .tfa-ad__content h4{margin:.25em 0 .3em 0} .tfa-ad--native .tfa-ad__content p{margin:0;color:var(--text-dim)} .tfa-ad--native .tfa-ad__cta{display:inline-block;margin-top:.75em;padding:.55em .85em;border-radius:12px;border:var(--line-1) solid rgba(255,255,255,0.18);background:rgba(255,255,255,0.04);color:var(--text);text-decoration:none} .tfa-ad--native .tfa-ad__cta:hover{background:rgba(255,255,255,0.06)} /* Ensure form controls use site font */ button, input, select, textarea { font-family: var(--font-ui); }