/****************************************************************************** * * FAEM THEME * Filozof Advanced Equity Momentum * * Dark Luxury UI * Version 2.0 * * Autor: * ChatGPT + Filozof Inwestor * ******************************************************************************/ /****************************************************************************** * * KOLORY * ******************************************************************************/ :root{ /*************** TŁO ***************/ --bg-0:#020202; --bg-1:#070707; --bg-2:#0b0b0b; --bg-3:#111111; --bg-4:#171717; --bg-5:#202020; /*************** ZŁOTO ***************/ --gold-1:#fff5cf; --gold-2:#f9dfa1; --gold-3:#f0c96c; --gold-4:#d8a340; --gold-5:#b57d17; --gold-6:#8b5b0f; /*************** ZIELEŃ ***************/ --green-1:#62ff7f; --green-2:#3ff262; --green-3:#22d84c; --green-4:#17a53a; --green-5:#0f7f2d; /*************** CZERWIEŃ ***************/ --red-1:#ff8c8c; --red-2:#ff6262; --red-3:#ef4545; --red-4:#d92f2f; /*************** SZAROŚCI ***************/ --white:#ffffff; --gray-1:#f5f5f5; --gray-2:#d7d7d7; --gray-3:#b0b0b0; --gray-4:#8b8b8b; --gray-5:#666666; /*************** OBRAMOWANIA ***************/ --border-gold:rgba(216,163,64,.35); --border-dark:#2b2b2b; /*************** CIENIE ***************/ --shadow-small: 0 4px 12px rgba(0,0,0,.45); --shadow-medium: 0 10px 30px rgba(0,0,0,.55); --shadow-large: 0 25px 60px rgba(0,0,0,.75); --gold-glow: 0 0 8px rgba(216,163,64,.15), 0 0 20px rgba(216,163,64,.15); --green-glow: 0 0 10px rgba(34,216,76,.25); /*************** ZAOKRĄGLENIA ***************/ --radius-small:8px; --radius-medium:14px; --radius-large:22px; } /****************************************************************************** * * FAEM THEME * Filozof Advanced Equity Momentum * * Dark Luxury UI * Version 2.0 * * Autor: * ChatGPT + Filozof Inwestor * ******************************************************************************/ /****************************************************************************** * * KOLORY * ******************************************************************************/ :root{ /*************** TŁO ***************/ --bg-0:#020202; --bg-1:#070707; --bg-2:#0b0b0b; --bg-3:#111111; --bg-4:#171717; --bg-5:#202020; /*************** ZŁOTO ***************/ --gold-1:#fff5cf; --gold-2:#f9dfa1; --gold-3:#f0c96c; --gold-4:#d8a340; --gold-5:#b57d17; --gold-6:#8b5b0f; /*************** ZIELEŃ ***************/ --green-1:#62ff7f; --green-2:#3ff262; --green-3:#22d84c; --green-4:#17a53a; --green-5:#0f7f2d; /*************** CZERWIEŃ ***************/ --red-1:#ff8c8c; --red-2:#ff6262; --red-3:#ef4545; --red-4:#d92f2f; /*************** SZAROŚCI ***************/ --white:#ffffff; --gray-1:#f5f5f5; --gray-2:#d7d7d7; --gray-3:#b0b0b0; --gray-4:#8b8b8b; --gray-5:#666666; /*************** OBRAMOWANIA ***************/ --border-gold:rgba(216,163,64,.35); --border-dark:#2b2b2b; /*************** CIENIE ***************/ --shadow-small: 0 4px 12px rgba(0,0,0,.45); --shadow-medium: 0 10px 30px rgba(0,0,0,.55); --shadow-large: 0 25px 60px rgba(0,0,0,.75); --gold-glow: 0 0 8px rgba(216,163,64,.15), 0 0 20px rgba(216,163,64,.15); --green-glow: 0 0 10px rgba(34,216,76,.25); /*************** ZAOKRĄGLENIA ***************/ --radius-small:8px; --radius-medium:14px; --radius-large:22px; } /****************************************************************************** * * FAEM THEME - nagłówki * ******************************************************************************/ h1{ font-size:3rem; color:var(--gold-2); font-weight:700; } h2{ color:var(--gold-3); font-size:2.2rem; } h3{ color:var(--gold-3); } h4{ color:var(--gold-4); } h5{ color:var(--gold-4); } a{ color:var(--gold-3); transition:.25s; text-decoration:none; } a:hover{ color:white; text-shadow: 0 0 12px rgba(216,163,64,.4); } /* Zaznaczenie tekstu */ ::selection{ background:var(--gold-4); color:black; } /****************************************************************************** * * FAEM THEME - scrollbar * ******************************************************************************/ ::-webkit-scrollbar{ width:12px; } ::-webkit-scrollbar-track{ background:#111; } ::-webkit-scrollbar-thumb{ background:linear-gradient( var(--gold-2), var(--gold-5) ); border-radius:20px; } /****************************************************************************** * * FAEM THEME - linie oddzielające * ******************************************************************************/ hr{ border:none; height:1px; background: linear-gradient( to right, transparent, var(--gold-4), transparent ); } /****************************************************************************** * * FAEM THEME * PART 2 * * Layout * Header * Sidebar * Footer * Cards * Glass Effect * ******************************************************************************/ /****************************************************************************** * * BODY BACKGROUND * ******************************************************************************/ body{ position:relative; min-height:100vh; background: radial-gradient(circle at top,#242424 0%,#101010 30%,#050505 100%); background-attachment:fixed; } /* Delikatna tekstura */ body:before{ content:""; position:fixed; inset:0; background-image: linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px); background-size:60px 60px; opacity:.15; pointer-events:none; z-index:-1; } /****************************************************************************** * * MAIN * ******************************************************************************/ main{ padding:30px; min-height:100vh; } /****************************************************************************** * * CONTAINERS * ******************************************************************************/ .container, .container-fluid{ position:relative; } /****************************************************************************** * * HEADER * ******************************************************************************/ header{ height:82px; display:flex; align-items:center; justify-content:space-between; padding:0 30px; background: linear-gradient( 180deg, rgba(30,30,30,.96), rgba(10,10,10,.96) ); border-bottom:1px solid rgba(216,163,64,.35); box-shadow: 0 15px 35px rgba(0,0,0,.45); } /****************************************************************************** * * LOGO * ******************************************************************************/ .logoFilozof{ display:flex; align-items:center; gap:18px; background: linear-gradient( 180deg, #181818, #101010 ); border-radius:18px; padding:14px 20px; transition:.3s; } .logoFilozof:hover{ transform:translateY(-3px); box-shadow:var(--gold-glow); } .logoFilozof img{ width:54px; height:54px; } .logoTitle{ display:flex; flex-direction:column; } .logoTitle h1{ margin:0; font-size:28px; } .logoTitle span{ color:var(--gray-3); font-size:13px; letter-spacing:2px; } /****************************************************************************** * * NAVIGATION * ******************************************************************************/ nav{ display:flex; gap:12px; } nav a{ padding:12px 22px; border-radius:12px; color:#ddd; transition:.25s; font-weight:600; } nav a:hover{ background: rgba(216,163,64,.12); color:white; box-shadow: inset 0 0 0 1px rgba(216,163,64,.35); } /****************************************************************************** * * SIDEBAR * ******************************************************************************/ .sidebar{ width:280px !important; background: linear-gradient( 180deg, #151515, #0a0a0a ); border-right: 1px solid rgba(216,163,64,.20); box-shadow: 15px 0 30px rgba(0,0,0,.25); min-height:100vh; } .sidebar ul{ list-style:none; padding:25px; margin:0; } .sidebar li{ margin-bottom:8px; } .sidebar a{ display:flex; align-items:center; gap:15px; border-radius:14px; padding:14px 18px; transition:.25s; } .sidebar a:hover{ background: rgba(216,163,64,.10); color:white; transform:translateX(4px); } /****************************************************************************** * * PAGE TITLE * ******************************************************************************/ .page-title{ margin-bottom:35px; } .page-title h2{ font-size:40px; } .page-title p{ color:var(--gray-4); } /****************************************************************************** * * CARDS * ******************************************************************************/ .card{ background: linear-gradient( 180deg, #151515, #101010 ); border: 1px solid rgba(216,163,64,.20); border-radius:20px; overflow:hidden; transition:.3s; box-shadow: var(--shadow-medium); } .card:hover{ transform: translateY(-4px); border-color: rgba(216,163,64,.5); } .card-header{ padding:18px 25px; background: linear-gradient( 180deg, rgba(216,163,64,.12), rgba(216,163,64,.04) ); border-bottom: 1px solid rgba(216,163,64,.15); color: var(--gold-2); font-weight:700; } .card-body{ padding:24px; } /****************************************************************************** * * PANEL * ******************************************************************************/ .panel{ background: linear-gradient( 180deg, rgba(20,20,20,.95), rgba(12,12,12,.98) ); border-radius:20px; border:1px solid rgba(216,163,64,.22); padding:24px; box-shadow: var(--shadow-large); } /****************************************************************************** * * GLASS EFFECT * ******************************************************************************/ .glass{ backdrop-filter: blur(18px); background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.05); } /****************************************************************************** * * GOLD BORDER * ******************************************************************************/ .gold-border{ position:relative; } .gold-border:before{ content:""; position:absolute; inset:0; border-radius:20px; padding:1px; background: linear-gradient( 135deg, transparent, var(--gold-3), transparent ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; } /****************************************************************************** * * INFO BOX * ******************************************************************************/ .infoBox{ background: linear-gradient( 180deg, rgba(216,163,64,.08), rgba(216,163,64,.03) ); border-left:4px solid var(--gold-4); padding:18px; border-radius:14px; } /****************************************************************************** * * FOOTER * ******************************************************************************/ footer{ margin-top:80px; padding:30px; text-align:center; border-top: 1px solid rgba(216,163,64,.20); color:var(--gray-4); background: linear-gradient( 180deg, rgba(10,10,10,.90), rgba(4,4,4,.98) ); } /****************************************************************************** * * ANIMATIONS * ******************************************************************************/ .fadeIn{ animation: fadeIn .7s ease; } @keyframes fadeIn{ from{ opacity:0; transform: translateY(20px); } to{ opacity:1; transform: translateY(0); } } .hover-lift{ transition:.3s; } .hover-lift:hover{ transform: translateY(-6px); } /****************************************************************************** * * PREMIUM TITLE * ******************************************************************************/ .premium-title{ color:var(--gold-2); text-transform:uppercase; letter-spacing:3px; font-weight:700; } .premium-subtitle{ color:var(--gray-3); font-size:15px; } /****************************************************************************** * * FAEM THEME * PART 3 * * Buttons * Forms * Inputs * Selects * CheckBox * Radio * Search * ******************************************************************************/ /****************************************************************************** * * BUTTONS * ******************************************************************************/ .btn{ border-radius:14px; padding:12px 24px; font-weight:700; transition:.25s; border:none; letter-spacing:.5px; box-shadow:0 6px 18px rgba(0,0,0,.35); } .btn:hover{ transform:translateY(-2px); } /****************************************************************************** * * GOLD BUTTON * ******************************************************************************/ .btn-primary{ color:#111; background: linear-gradient( 180deg, var(--gold-2), var(--gold-4) ); border:1px solid var(--gold-5); } .btn-primary:hover{ background: linear-gradient( 180deg, #ffe8ad, #d8a340 ); box-shadow: var(--gold-glow); } /****************************************************************************** * * SUCCESS * ******************************************************************************/ .btn-success{ background: linear-gradient( var(--green-2), var(--green-5) ); border:1px solid var(--green-5); color:white; } .btn-success:hover{ box-shadow: var(--green-glow); } /****************************************************************************** * * DANGER * ******************************************************************************/ .btn-danger{ background: linear-gradient( #ff6b6b, #b01919 ); border:1px solid #8d1111; } /****************************************************************************** * * SECONDARY * ******************************************************************************/ .btn-secondary{ background:#222; color:white; border:1px solid #444; } .btn-secondary:hover{ background:#333; } /****************************************************************************** * * ICON BUTTON * ******************************************************************************/ .btn-icon{ width:48px; height:48px; display:flex; align-items:center; justify-content:center; border-radius:14px; } /****************************************************************************** * * INPUT * ******************************************************************************/ .form-control{ background:#111; border:1px solid rgba(216,163,64,.20); color:white; border-radius:14px; padding:13px 16px; transition:.25s; } .form-control:hover{ border-color: rgba(216,163,64,.5); } .form-control:focus{ background:#171717; color:white; border-color:var(--gold-4); box-shadow: 0 0 0 .18rem rgba(216,163,64,.18); } /****************************************************************************** * * PLACEHOLDER * ******************************************************************************/ .form-control::placeholder{ color:#777; } /****************************************************************************** * * LABEL * ******************************************************************************/ label{ color:var(--gold-3); font-weight:600; margin-bottom:8px; } /****************************************************************************** * * SELECT * ******************************************************************************/ select, .form-select{ background:#111; color:white; border:1px solid rgba(216,163,64,.20); border-radius:14px; padding:13px 16px; transition:.25s; } select:hover{ border-color:var(--gold-4); } select:focus{ border-color:var(--gold-3); box-shadow: 0 0 0 .2rem rgba(216,163,64,.16); } /****************************************************************************** * * OPTION * ******************************************************************************/ option{ background:#111; color:white; } /****************************************************************************** * * TEXTAREA * ******************************************************************************/ textarea{ background:#111; color:white; border-radius:18px; border:1px solid rgba(216,163,64,.22); padding:18px; } textarea:focus{ border-color:var(--gold-4); } /****************************************************************************** * * CHECKBOX * ******************************************************************************/ .form-check-input{ width:22px; height:22px; border-radius:6px; background:#111; border:1px solid var(--gold-4); } .form-check-input:checked{ background-color:var(--green-3); border-color:var(--green-3); } .form-check-input:focus{ box-shadow: 0 0 0 .2rem rgba(34,216,76,.20); } /****************************************************************************** * * RADIO * ******************************************************************************/ input[type=radio]{ accent-color:var(--gold-4); transform:scale(1.15); } /****************************************************************************** * * SWITCH * ******************************************************************************/ .form-switch .form-check-input{ width:52px; height:28px; } /****************************************************************************** * * RANGE * ******************************************************************************/ input[type=range]{ accent-color:var(--gold-4); } /****************************************************************************** * * SEARCH * ******************************************************************************/ .search-box{ position:relative; } .search-box input{ padding-left:48px; } .search-box i{ position:absolute; left:18px; top:50%; transform:translateY(-50%); color:var(--gold-4); } /****************************************************************************** * * INPUT GROUP * ******************************************************************************/ .input-group-text{ background:#1a1a1a; color:var(--gold-3); border:1px solid rgba(216,163,64,.20); } /****************************************************************************** * * VALIDATION * ******************************************************************************/ .valid{ border-color:var(--green-3)!important; } .invalid{ border-color:var(--red-3)!important; } .validation-message{ color:var(--red-2); margin-top:6px; font-size:13px; } /****************************************************************************** * * DATEPICKER * ******************************************************************************/ input[type=date]{ background:#111; color:white; border-radius:14px; } /****************************************************************************** * * FILE INPUT * ******************************************************************************/ input[type=file]{ color:white; } input[type=file]::file-selector-button{ background: linear-gradient( var(--gold-2), var(--gold-4) ); border:none; color:#111; padding:10px 18px; border-radius:10px; margin-right:16px; font-weight:700; } /****************************************************************************** * * DISABLED * ******************************************************************************/ .form-control:disabled, .btn:disabled, select:disabled{ opacity:.45; cursor:not-allowed; } /****************************************************************************** * * LOADING BUTTON * ******************************************************************************/ .btn-loading{ position:relative; overflow:hidden; } .btn-loading::after{ content:""; position:absolute; left:-120%; top:0; width:120%; height:100%; background: linear-gradient( transparent, rgba(255,255,255,.25), transparent ); animation: buttonSweep 1.8s infinite; } @keyframes buttonSweep{ to{ left:120%; } } /****************************************************************************** * * BADGES * ******************************************************************************/ .badge-gold{ background:var(--gold-4); color:#111; } .badge-green{ background:var(--green-3); } .badge-red{ background:var(--red-3); } /****************************************************************************** * * TOOLTIPS * ******************************************************************************/ .tooltip-inner{ background:#111; border:1px solid rgba(216,163,64,.25); color:white; } /****************************************************************************** * * FAEM THEME * PART 4 * * Dashboard * Portfolio * Scanner * Momentum * Statistics * Cards * Tables * ******************************************************************************/ /****************************************************************************** * * DASHBOARD GRID * ******************************************************************************/ .dashboard{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:24px; margin-top:25px; } /****************************************************************************** * * DASHBOARD TILE * ******************************************************************************/ .dashboard-tile{ background:linear-gradient(180deg,#161616,#0c0c0c); border:1px solid rgba(216,163,64,.25); border-radius:22px; overflow:hidden; transition:.3s; box-shadow:var(--shadow-medium); } .dashboard-tile:hover{ transform:translateY(-6px); border-color:rgba(216,163,64,.55); box-shadow: var(--gold-glow), var(--shadow-large); } .dashboard-header{ padding:20px; font-size:18px; color:var(--gold-2); border-bottom:1px solid rgba(216,163,64,.18); background:linear-gradient(180deg,#22190b,#15110b); } .dashboard-body{ padding:25px; } /****************************************************************************** * * STATISTICS * ******************************************************************************/ .stat-box{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; } .stat-title{ color:var(--gray-3); font-size:14px; } .stat-value{ font-size:30px; color:var(--gold-2); font-weight:700; } .stat-change-up{ color:var(--green-2); font-weight:700; } .stat-change-down{ color:var(--red-2); font-weight:700; } /****************************************************************************** * * PORTFOLIO SUMMARY * ******************************************************************************/ .portfolio-summary{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; } .summary-card{ background:#111; border-radius:18px; padding:24px; border:1px solid rgba(216,163,64,.2); } .summary-card h4{ margin-bottom:12px; } .summary-card .value{ font-size:34px; color:var(--gold-2); font-weight:700; } /****************************************************************************** * * MOMENTUM SCORE * ******************************************************************************/ .momentum-score{ display:inline-flex; align-items:center; justify-content:center; min-width:90px; padding:8px 18px; border-radius:50px; background: linear-gradient( var(--green-2), var(--green-5) ); color:white; font-weight:700; } .momentum-score.low{ background: linear-gradient( #ff7878, #d32222 ); } /****************************************************************************** * * QUALITY SCORE * ******************************************************************************/ .quality-score{ color:var(--gold-2); font-weight:700; } /****************************************************************************** * * PORTFOLIO TABLE * ******************************************************************************/ .portfolioTable, .currentPortfolioTable, .currentPortfolioTableNoWidth, .pricingAEMTable, .compareAEMTable, .tranchesAEMTable{ background:#101010; border-radius:18px; overflow:hidden; } .portfolioTable th, .currentPortfolioTable th, .compareAEMTable th{ background: linear-gradient( #2a1d0d, #1b1308 ); color:var(--gold-2); border-bottom:1px solid rgba(216,163,64,.3); padding:14px; } .portfolioTable td, .currentPortfolioTable td, .compareAEMTable td{ padding:14px; border-color:rgba(216,163,64,.12); } .portfolioTable tbody tr{ transition:.2s; } .portfolioTable tbody tr:hover{ background:rgba(216,163,64,.06); } /****************************************************************************** * * POSITIONS * ******************************************************************************/ .position-buy{ color:var(--green-2); font-weight:700; } .position-sell{ color:var(--red-2); font-weight:700; } .position-hold{ color:var(--gold-3); font-weight:700; } /****************************************************************************** * * STOCK CARD * ******************************************************************************/ .stock-card{ background:linear-gradient(180deg,#181818,#101010); border:1px solid rgba(216,163,64,.2); border-radius:22px; padding:22px; transition:.3s; } .stock-card:hover{ transform:translateY(-4px); } .stock-name{ font-size:24px; color:var(--gold-2); font-weight:700; } .stock-sector{ color:var(--gray-3); margin-bottom:16px; } .stock-price{ font-size:36px; color:white; font-weight:700; } /****************************************************************************** * * MOMENTUM RANK * ******************************************************************************/ .rank{ display:flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:50%; background:linear-gradient( var(--gold-2), var(--gold-5) ); color:black; font-weight:700; } /****************************************************************************** * * REBALANCING * ******************************************************************************/ .rebalance-buy{ border-left:5px solid var(--green-3); } .rebalance-sell{ border-left:5px solid var(--red-3); } .rebalance-hold{ border-left:5px solid var(--gold-3); } /****************************************************************************** * * SCANNER RESULTS * ******************************************************************************/ .scanner-row{ display:flex; align-items:center; justify-content:space-between; padding:18px; border-bottom:1px solid rgba(216,163,64,.08); transition:.2s; } .scanner-row:hover{ background:rgba(216,163,64,.06); } .scanner-symbol{ font-size:20px; color:var(--gold-2); font-weight:700; } .scanner-company{ color:var(--gray-3); } .scanner-momentum{ color:var(--green-2); font-size:22px; font-weight:700; } /****************************************************************************** * * WATCHLIST * ******************************************************************************/ .watchlist{ display:flex; flex-direction:column; gap:15px; } .watch-item{ display:flex; justify-content:space-between; align-items:center; padding:16px; background:#111; border-radius:14px; border:1px solid rgba(216,163,64,.15); } /****************************************************************************** * * TAGS * ******************************************************************************/ .tag{ display:inline-block; padding:6px 14px; border-radius:30px; background:#202020; color:var(--gold-2); border:1px solid rgba(216,163,64,.2); font-size:13px; } /****************************************************************************** * * KPI * ******************************************************************************/ .kpi{ text-align:center; } .kpi-value{ font-size:42px; color:var(--gold-2); font-weight:700; } .kpi-title{ color:var(--gray-3); margin-top:8px; } /****************************************************************************** * * CHART CONTAINER * ******************************************************************************/ .chart-card{ background:#101010; border-radius:22px; border:1px solid rgba(216,163,64,.18); padding:20px; } .chart-title{ margin-bottom:20px; color:var(--gold-2); font-size:20px; font-weight:700; } /****************************************************************************** * * FAEM BADGE * ******************************************************************************/ .faem-badge{ display:inline-flex; align-items:center; justify-content:center; padding:10px 22px; border-radius:40px; background:linear-gradient( var(--gold-2), var(--gold-5) ); color:black; font-weight:700; letter-spacing:1px; } /****************************************************************************** * * LOADER * ******************************************************************************/ .loading{ color:var(--gold-2); font-size:18px; font-weight:700; display:flex; align-items:center; gap:14px; } .loading::before{ content:""; width:18px; height:18px; border-radius:50%; border:3px solid rgba(216,163,64,.2); border-top-color:var(--gold-2); animation:faem-spin .8s linear infinite; } @keyframes faem-spin{ to{ transform:rotate(360deg); } } /****************************************************************************** * * EMPTY STATE * ******************************************************************************/ .empty-state{ text-align:center; padding:60px; color:var(--gray-4); } .empty-state h3{ color:var(--gold-3); margin-bottom:16px; } /****************************************************************************** * * FAEM THEME * PART 5 * * Premium Dashboard * Charts * Widgets * HeatMap * KPI * Progress * Timeline * ******************************************************************************/ /****************************************************************************** * * PREMIUM DASHBOARD * ******************************************************************************/ .dashboard-premium{ display:grid; grid-template-columns:repeat(auto-fit,minmax(380px,1fr)); gap:28px; margin-top:30px; } /****************************************************************************** * * WIDGET * ******************************************************************************/ .widget{ background: linear-gradient( 180deg, #171717, #0e0e0e ); border:1px solid rgba(216,163,64,.18); border-radius:24px; overflow:hidden; box-shadow:var(--shadow-medium); transition:.35s; } .widget:hover{ transform:translateY(-8px); border-color:rgba(216,163,64,.45); box-shadow: var(--gold-glow), var(--shadow-large); } .widget-header{ padding:22px; display:flex; justify-content:space-between; align-items:center; background: linear-gradient( 180deg, rgba(216,163,64,.10), rgba(216,163,64,.03) ); } .widget-title{ color:var(--gold-2); font-size:20px; font-weight:700; } .widget-body{ padding:26px; } /****************************************************************************** * * CHART * ******************************************************************************/ .chart-card{ background:#0d0d0d; border-radius:22px; border:1px solid rgba(216,163,64,.16); padding:24px; } .chart-card canvas{ width:100%!important; min-height:420px; } /****************************************************************************** * * CHART HEADER * ******************************************************************************/ .chart-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; } .chart-title{ color:var(--gold-2); font-size:22px; font-weight:700; } .chart-period{ color:var(--gray-4); } /****************************************************************************** * * CHART LEGEND * ******************************************************************************/ .chart-legend{ display:flex; gap:20px; margin-top:20px; } .legend-item{ display:flex; align-items:center; gap:8px; } .legend-color{ width:14px; height:14px; border-radius:50%; } .legend-green{ background:var(--green-3); } .legend-gold{ background:var(--gold-4); } .legend-red{ background:var(--red-3); } /****************************************************************************** * * KPI GRID * ******************************************************************************/ .kpi-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:20px; } .kpi-card{ background:#121212; border-radius:18px; padding:22px; border:1px solid rgba(216,163,64,.18); text-align:center; } .kpi-card:hover{ border-color:rgba(216,163,64,.45); } .kpi-number{ font-size:42px; color:var(--gold-2); font-weight:700; } .kpi-label{ margin-top:8px; color:var(--gray-3); } /****************************************************************************** * * PROGRESS BAR * ******************************************************************************/ .progress{ height:12px; border-radius:30px; background:#222; overflow:hidden; } .progress-bar{ background: linear-gradient( 90deg, var(--green-2), var(--green-5) ); } /****************************************************************************** * * MOMENTUM BAR * ******************************************************************************/ .momentum-bar{ width:100%; height:18px; border-radius:30px; background:#222; overflow:hidden; } .momentum-value{ height:100%; background: linear-gradient( 90deg, var(--gold-2), var(--green-3) ); } /****************************************************************************** * * HEATMAP * ******************************************************************************/ .heatmap{ display:grid; grid-template-columns:repeat(8,1fr); gap:8px; } .heat-cell{ aspect-ratio:1; border-radius:10px; transition:.2s; } .heat-cell:hover{ transform:scale(1.08); } .heat-positive{ background:#19b34b; } .heat-neutral{ background:#88784b; } .heat-negative{ background:#b32626; } /****************************************************************************** * * TIMELINE * ******************************************************************************/ .timeline{ position:relative; margin-left:25px; } .timeline:before{ content:""; position:absolute; left:12px; top:0; bottom:0; width:2px; background:rgba(216,163,64,.25); } .timeline-item{ position:relative; padding-left:45px; margin-bottom:26px; } .timeline-item:before{ content:""; position:absolute; left:4px; top:6px; width:18px; height:18px; border-radius:50%; background:var(--gold-3); } /****************************************************************************** * * LIVE PRICE * ******************************************************************************/ .live-price{ font-size:44px; color:white; font-weight:700; } .live-change{ color:var(--green-2); font-size:18px; font-weight:700; } /****************************************************************************** * * WATCHLIST * ******************************************************************************/ .watch-grid{ display:grid; gap:14px; } .watch-item{ display:flex; justify-content:space-between; align-items:center; padding:18px; border-radius:16px; background:#111; border:1px solid rgba(216,163,64,.15); transition:.25s; } .watch-item:hover{ border-color:rgba(216,163,64,.35); } /****************************************************************************** * * SIGNAL * ******************************************************************************/ .signal-buy{ color:var(--green-2); font-weight:700; } .signal-hold{ color:var(--gold-3); font-weight:700; } .signal-sell{ color:var(--red-3); font-weight:700; } /****************************************************************************** * * PREMIUM TABLE * ******************************************************************************/ .table-premium{ width:100%; border-collapse:collapse; } .table-premium thead{ background: linear-gradient( #261d10, #19130b ); } .table-premium th{ padding:16px; color:var(--gold-2); font-size:14px; text-transform:uppercase; } .table-premium td{ padding:16px; border-bottom:1px solid rgba(216,163,64,.08); } .table-premium tbody tr{ transition:.2s; } .table-premium tbody tr:hover{ background:rgba(216,163,64,.05); } /****************************************************************************** * * STOCK SCORE * ******************************************************************************/ .score-circle{ width:74px; height:74px; border-radius:50%; display:flex; justify-content:center; align-items:center; background: radial-gradient( circle, #2a2a2a, #111 ); border:2px solid var(--gold-4); color:var(--gold-2); font-size:22px; font-weight:700; } /****************************************************************************** * * QUICK ACTIONS * ******************************************************************************/ .quick-actions{ display:flex; gap:16px; flex-wrap:wrap; } .quick-action{ width:120px; height:120px; border-radius:22px; background:#111; border:1px solid rgba(216,163,64,.18); display:flex; flex-direction:column; justify-content:center; align-items:center; transition:.25s; } .quick-action:hover{ transform:translateY(-6px); box-shadow:var(--gold-glow); } .quick-action i{ font-size:36px; color:var(--gold-3); margin-bottom:12px; } /****************************************************************************** * * GLOW ANIMATION * ******************************************************************************/ @keyframes widgetGlow{ 0%{ box-shadow:0 0 0 rgba(216,163,64,0); } 50%{ box-shadow:0 0 26px rgba(216,163,64,.22); } 100%{ box-shadow:0 0 0 rgba(216,163,64,0); } } .live-widget{ animation:widgetGlow 3s infinite; } /****************************************************************************** * * MARKET STATUS * ******************************************************************************/ .market-open{ color:var(--green-2); font-weight:700; } .market-closed{ color:var(--red-2); font-weight:700; } .market-pre{ color:var(--gold-3); font-weight:700; } /****************************************************************************** * * FAEM THEME * PART 6 * * Existing FAEM Components * ******************************************************************************/ /****************************************************************************** * * STOCK PANELS * ******************************************************************************/ .stockDiv{ background: linear-gradient( 180deg, #181818, #101010 ); border:1px solid rgba(216,163,64,.22); border-radius:22px; padding:24px; margin-top:30px; transition:.30s; box-shadow:var(--shadow-medium); } .stockDiv:hover{ transform:translateY(-5px); border-color:rgba(216,163,64,.45); box-shadow: var(--gold-glow), var(--shadow-large); } /****************************************************************************** * * STOCK CHART * ******************************************************************************/ /****************************************************************************** STOCK CHART ******************************************************************************/ .stockChart{ position:relative; width:100%; height:550px; padding:25px; border-radius:24px; background: radial-gradient( circle at top, rgba(216,163,64,.04), transparent 40% ), linear-gradient( 180deg, #151515, #0d0d0d ); border:1px solid rgba(216,163,64,.16); overflow:hidden; } /****************************************************************************** GOLD TOP BAR ******************************************************************************/ .stockChart::before{ content:""; position:absolute; top:0; left:0; width:100%; height:3px; background: linear-gradient( 90deg, transparent, var(--gold-3), transparent ); } /****************************************************************************** BACKGROUND GRID ******************************************************************************/ .stockChart::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.06; background-image: linear-gradient(#ffffff 1px, transparent 1px), linear-gradient(90deg,#ffffff 1px,transparent 1px); background-size: 60px 60px; } /****************************************************************************** CANVAS ******************************************************************************/ .stockChart canvas{ position:relative; z-index:2; width:100%!important; height:100%!important; } /****************************************************************************** HOVER ******************************************************************************/ .stockChart:hover{ border-color:rgba(216,163,64,.35); box-shadow: 0 0 30px rgba(216,163,64,.12); } /****************************************************************************** * * STOCK HEADER * ******************************************************************************/ .stockData{ color:var(--gold-2); font-size:12px; font-weight:700; letter-spacing:.4px; } .stockDivTranchesAEM.quarter{ width: 24% !important; } .quarter .premium-grid th { padding: 4px; font-size: 9px; } .quarter .premium-grid td { padding: 4px; font-size: 9px; } /****************************************************************************** * * TRANCHES * ******************************************************************************/ .tranchDiv{ background:#111; border-radius:20px; border:1px solid rgba(216,163,64,.18); padding:24px; transition:.25s; } .tranchDiv:hover{ border-color:rgba(216,163,64,.40); } /****************************************************************************** * * TABLES * ******************************************************************************/ .portfolioTable, .currentPortfolioTable, .currentPortfolioTableNoWidth, .pricingAEMTable, .compareAEMTable, .tranchesAEMTable{ background:#111; border-radius:5px; overflow:hidden; border:1px solid rgba(216,163,64,.18); } /****************************************************************************** * * TABLE HEADER * ******************************************************************************/ .portfolioTable th, .currentPortfolioTable th, .currentPortfolioTableNoWidth th, .pricingAEMTable th, .compareAEMTable th, .tranchesAEMTable th{ background: linear-gradient( #2d220f, #1a130a ); color:var(--gold-2); font-size:7px; text-transform:uppercase; letter-spacing:1px; } /****************************************************************************** * * TABLE ROWS * ******************************************************************************/ .portfolioTable tr, .currentPortfolioTable tr, .pricingAEMTable tr, .compareAEMTable tr{ transition:.20s; } .portfolioTable tbody tr:hover, .currentPortfolioTable tbody tr:hover, .pricingAEMTable tbody tr:hover, .compareAEMTable tbody tr:hover{ background:rgba(216,163,64,.06); } /****************************************************************************** * * TABLE CELLS * ******************************************************************************/ .tableCell{ border-color:rgba(216,163,64,.12)!important; color:#e8e8e8; border-width: 1px; } /****************************************************************************** * * CURRENT PORTFOLIO * ******************************************************************************/ .stockDivPortfolio{ background:#121212; border-radius:20px; border:1px solid rgba(216,163,64,.20); padding:24px; } /****************************************************************************** * * CURRENT PORTFOLIO SUMMARY * ******************************************************************************/ .stockDivCurrentPortfolio{ background:#111; border-radius:22px; border:1px solid rgba(216,163,64,.20); padding:22px; } /****************************************************************************** * * LOGO * ******************************************************************************/ .logoFilozof{ background: linear-gradient( 180deg, #181818, #101010 ); border:1px solid rgba(216,163,64,.22); border-radius:18px; box-shadow:var(--shadow-small); } /****************************************************************************** * * MINI LOGO * ******************************************************************************/ .minilogo img{ border-radius:16px; border:1px solid rgba(216,163,64,.22); background:#111; } /****************************************************************************** * * INFO BOX * ******************************************************************************/ .info{ background:#111; border-left:4px solid var(--gold-4); border-radius:16px; color:#ddd; } /****************************************************************************** * * LOADING * ******************************************************************************/ .loading{ display:flex; align-items:center; gap:12px; color:var(--gold-2); font-weight:700; } .loading svg{ color:var(--gold-3); } /****************************************************************************** * * DOWNLOAD / UPLOAD * ******************************************************************************/ .uploadDiv, .downloadDiv{ background:#111; border-radius:18px; border:1px solid rgba(216,163,64,.18); padding:20px; } /****************************************************************************** * * WRAP * ******************************************************************************/ .wrap{ background: linear-gradient( 180deg, #181818, #101010 ); border-radius:22px; border:1px solid rgba(216,163,64,.22); } /****************************************************************************** * * COMMENTS * ******************************************************************************/ .wrapComment{ background:#111; border-left:4px solid var(--gold-4); border-radius:14px; } /****************************************************************************** * * BLOG POSTS * ******************************************************************************/ .postTile{ background:#111; border-radius:20px; overflow:hidden; border:1px solid rgba(216,163,64,.18); transition:.25s; } .postTile:hover{ transform:translateY(-5px); box-shadow:var(--gold-glow); } /****************************************************************************** * * POST PREVIEW * ******************************************************************************/ .preview{ background:#0e0e0e; border-radius:22px; border:1px solid rgba(216,163,64,.20); } /****************************************************************************** * * YOUTUBE * ******************************************************************************/ .youtube-container{ border-radius:20px; overflow:hidden; box-shadow:var(--shadow-medium); } /****************************************************************************** * * VIDEO TRANSCRIPT * ******************************************************************************/ .video-transcript{ background:#111; border-radius:18px; border:1px solid rgba(216,163,64,.18); } .video-transcript h2{ color:var(--gold-2); } .video-transcript p{ color:#cfcfcf; } /****************************************************************************** * * PRICING * ******************************************************************************/ .pricing{ background:#111; border-radius:20px; border:1px solid rgba(216,163,64,.18); } /****************************************************************************** * * BOTTOM * ******************************************************************************/ .bottom{ background:#101010; border-top:1px solid rgba(216,163,64,.20); color:var(--gold-3); } /****************************************************************************** * * MENU * ******************************************************************************/ .menuCollapse{ background:transparent; } .menuCollapse .nav-link{ border-radius:12px; } .menuCollapse .nav-link:hover{ background:rgba(216,163,64,.08); } /****************************************************************************** * * ICONS * ******************************************************************************/ .bi{ transition:.20s; } .bi:hover{ color:var(--gold-2); transform:scale(1.1); } /****************************************************************************** * * SUCCESS / ERROR * ******************************************************************************/ .bi-check2-square{ color:var(--green-2)!important; } .bi-x-square{ color:var(--red-2)!important; } /****************************************************************************** * * EMPTY STATES * ******************************************************************************/ .d-none{ opacity:.35; } .d-show{ opacity:1; } /****************************************************************************** * * HOVER ANIMATION * ******************************************************************************/ .stockDiv, .stockChart, .postTile, .wrap, .pricing{ transition: transform .25s, border-color .25s, box-shadow .25s; } /****************************************************************************** * * FAEM THEME * PART 7 * * Bootstrap Premium Override * ******************************************************************************/ /****************************************************************************** * * CARD * ******************************************************************************/ .card{ background: linear-gradient( 180deg, #181818, #0f0f0f ); border:1px solid rgba(216,163,64,.20); border-radius:22px; overflow:hidden; box-shadow:var(--shadow-medium); } .card:hover{ border-color:rgba(216,163,64,.45); } .card-header{ background: linear-gradient( 180deg, rgba(216,163,64,.10), rgba(216,163,64,.02) ); border-bottom:1px solid rgba(216,163,64,.18); color:var(--gold-2); font-weight:700; padding:18px 24px; } .card-footer{ background:#111; border-top:1px solid rgba(216,163,64,.15); } /****************************************************************************** * * ACCORDION * ******************************************************************************/ .accordion{ --bs-accordion-bg:#111; --bs-accordion-border-color:rgba(216,163,64,.18); } .accordion-item{ background:#111; border:1px solid rgba(216,163,64,.18); margin-bottom:14px; border-radius:18px!important; overflow:hidden; } .accordion-button{ background:#181818; color:var(--gold-2); font-weight:700; } .accordion-button:not(.collapsed){ background:#20180c; color:white; } .accordion-button:focus{ box-shadow:none; } /****************************************************************************** * * MODAL * ******************************************************************************/ .modal-content{ background: linear-gradient( 180deg, #181818, #111 ); border:1px solid rgba(216,163,64,.30); border-radius:24px; } .modal-header{ border-bottom:1px solid rgba(216,163,64,.18); } .modal-footer{ border-top:1px solid rgba(216,163,64,.18); } .modal-title{ color:var(--gold-2); } /****************************************************************************** * * DROPDOWN * ******************************************************************************/ .dropdown-menu{ background:#111; border:1px solid rgba(216,163,64,.20); border-radius:16px; overflow:hidden; } .dropdown-item{ color:#ddd; padding:12px 18px; } .dropdown-item:hover{ background:rgba(216,163,64,.08); color:white; } /****************************************************************************** * * PAGINATION * ******************************************************************************/ .page-link{ background:#111; color:var(--gold-3); border:1px solid rgba(216,163,64,.18); } .page-item.active .page-link{ background:var(--gold-4); color:black; border-color:var(--gold-5); } .page-link:hover{ background:#222; color:white; } /****************************************************************************** * * ALERTS * ******************************************************************************/ .alert{ border:none; border-radius:18px; padding:18px 22px; } .alert-success{ background:rgba(34,216,76,.12); color:#8dffae; border-left:5px solid var(--green-3); } .alert-danger{ background:rgba(217,47,47,.12); color:#ff9d9d; border-left:5px solid var(--red-3); } .alert-warning{ background:rgba(216,163,64,.12); color:#ffe6a5; border-left:5px solid var(--gold-3); } /****************************************************************************** * * BADGES * ******************************************************************************/ .badge{ border-radius:30px; padding:8px 14px; font-weight:700; } .bg-primary{ background:var(--gold-4)!important; color:#111!important; } .bg-success{ background:var(--green-3)!important; } .bg-danger{ background:var(--red-3)!important; } /****************************************************************************** * * LIST GROUP * ******************************************************************************/ .list-group{ border-radius:18px; overflow:hidden; } .list-group-item{ background:#111; color:#ddd; border-color:rgba(216,163,64,.12); } .list-group-item:hover{ background:#181818; } /****************************************************************************** * * NAV TABS * ******************************************************************************/ .nav-tabs{ border-bottom:1px solid rgba(216,163,64,.18); } .nav-tabs .nav-link{ color:#bbb; border:none; border-radius:16px 16px 0 0; } .nav-tabs .nav-link.active{ background:#1b150b; color:var(--gold-2); border-bottom:3px solid var(--gold-4); } /****************************************************************************** * * BREADCRUMB * ******************************************************************************/ .breadcrumb{ background:#111; padding:14px 18px; border-radius:16px; } .breadcrumb-item a{ color:var(--gold-3); } .breadcrumb-item.active{ color:white; } /****************************************************************************** * * SPINNER * ******************************************************************************/ .spinner-border{ color:var(--gold-4); } /****************************************************************************** * * PROGRESS * ******************************************************************************/ .progress{ background:#1d1d1d; border-radius:30px; height:14px; } .progress-bar{ background: linear-gradient( 90deg, var(--gold-2), var(--green-3) ); } /****************************************************************************** * * TOAST * ******************************************************************************/ .toast{ background:#111; border:1px solid rgba(216,163,64,.20); border-radius:18px; } .toast-header{ background:#181818; color:var(--gold-2); border-bottom:1px solid rgba(216,163,64,.15); } /****************************************************************************** * * TOOLTIP * ******************************************************************************/ .tooltip-inner{ background:#111; border:1px solid rgba(216,163,64,.25); color:white; } .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before{ border-top-color:#111; } /****************************************************************************** * * OFFCANVAS * ******************************************************************************/ .offcanvas{ background:#101010; border-left:1px solid rgba(216,163,64,.20); } .offcanvas-header{ border-bottom:1px solid rgba(216,163,64,.15); } .offcanvas-title{ color:var(--gold-2); } /****************************************************************************** * * FAEM THEME * PART 8 * * Premium Charts * Chart.js * ApexCharts * TradingView * ******************************************************************************/ /****************************************************************************** * * CHART WRAPPER * ******************************************************************************/ .chart-wrapper{ position:relative; padding:24px; border-radius:24px; background: linear-gradient( 180deg, #161616, #0d0d0d ); border:1px solid rgba(216,163,64,.18); overflow:hidden; box-shadow:var(--shadow-large); } /****************************************************************************** * * GOLD LINE * ******************************************************************************/ .chart-wrapper::before{ content:""; position:absolute; left:0; top:0; width:100%; height:3px; background: linear-gradient( 90deg, transparent, var(--gold-3), transparent ); } /****************************************************************************** * * CHART TITLE * ******************************************************************************/ .chart-title{ display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; } .chart-title h3{ color:var(--gold-2); margin:0; font-size:22px; } .chart-title small{ color:var(--gray-4); } /****************************************************************************** * * CHART BODY * ******************************************************************************/ .chart-body{ position:relative; min-height:420px; } /****************************************************************************** * * CANVAS * ******************************************************************************/ canvas{ border-radius:18px; } /****************************************************************************** * * STOCK CHART * ******************************************************************************/ .stockChart{ background:#0f0f0f; border-radius:24px; border:1px solid rgba(216,163,64,.18); overflow:hidden; } .stockChart canvas{ padding:10px; } /****************************************************************************** * * CHART LEGEND * ******************************************************************************/ .chart-legend{ display:flex; flex-wrap:wrap; gap:20px; margin-top:20px; } .chart-legend-item{ display:flex; align-items:center; gap:10px; font-size:14px; } .chart-dot{ width:14px; height:14px; border-radius:50%; } .chart-dot.gold{ background:var(--gold-3); } .chart-dot.green{ background:var(--green-3); } .chart-dot.red{ background:var(--red-3); } /****************************************************************************** * * CHART TOOLBAR * ******************************************************************************/ .chart-toolbar{ display:flex; gap:12px; margin-bottom:18px; } .chart-toolbar .btn{ padding:8px 18px; } /****************************************************************************** * * PERIOD BUTTONS * ******************************************************************************/ .chart-period{ background:#111; border:1px solid rgba(216,163,64,.18); color:#ddd; border-radius:30px; padding:8px 16px; transition:.25s; } .chart-period:hover{ background:#1d1d1d; border-color:var(--gold-4); } .chart-period.active{ background:var(--gold-4); color:#111; } /****************************************************************************** * * KPI ABOVE CHART * ******************************************************************************/ .chart-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:18px; margin-bottom:22px; } .chart-kpi{ background:#111; border-radius:16px; padding:18px; border:1px solid rgba(216,163,64,.15); } .chart-kpi h4{ color:var(--gray-3); font-size:13px; margin-bottom:8px; } .chart-kpi span{ font-size:30px; color:var(--gold-2); font-weight:700; } /****************************************************************************** * * CHART GRID * ******************************************************************************/ .chart-grid{ display:grid; grid-template-columns:2fr 1fr; gap:24px; } /****************************************************************************** * * MINI CHART * ******************************************************************************/ .mini-chart{ background:#111; border-radius:18px; padding:18px; border:1px solid rgba(216,163,64,.15); } /****************************************************************************** * * VOLUME PANEL * ******************************************************************************/ .volume-panel{ margin-top:18px; padding-top:18px; border-top:1px solid rgba(216,163,64,.10); } /****************************************************************************** * * MOMENTUM PANEL * ******************************************************************************/ .momentum-panel{ background: linear-gradient( 180deg, rgba(34,216,76,.05), rgba(34,216,76,.01) ); border-left:4px solid var(--green-3); border-radius:14px; padding:18px; } /****************************************************************************** * * TRADINGVIEW * ******************************************************************************/ .tradingview-widget-container{ border-radius:24px; overflow:hidden; border:1px solid rgba(216,163,64,.18); } /****************************************************************************** * * APEXCHARTS * ******************************************************************************/ .apexcharts-canvas{ margin:auto; } .apexcharts-tooltip{ background:#111!important; border:1px solid rgba(216,163,64,.25)!important; color:white!important; } .apexcharts-menu{ background:#111!important; border:1px solid rgba(216,163,64,.20)!important; } .apexcharts-menu-item{ color:#ddd!important; } .apexcharts-menu-item:hover{ background:#1d1d1d!important; } /****************************************************************************** * * CHART.JS TOOLTIP * ******************************************************************************/ #chartjs-tooltip{ background:#111; border:1px solid rgba(216,163,64,.25); border-radius:14px; color:white; padding:12px; } /****************************************************************************** * * ANALYTICS PANEL * ******************************************************************************/ .analytics-panel{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; margin-top:25px; } .analytics-card{ background:#111; border-radius:18px; border:1px solid rgba(216,163,64,.15); padding:20px; } .analytics-card h3{ color:var(--gold-2); margin-bottom:15px; } .analytics-value{ font-size:34px; font-weight:700; color:white; } .analytics-positive{ color:var(--green-3); } .analytics-negative{ color:var(--red-3); } /****************************************************************************** * * LIVE UPDATE GLOW * ******************************************************************************/ .chart-live{ animation:chartGlow 4s infinite; } @keyframes chartGlow{ 0%{ box-shadow:0 0 0 rgba(216,163,64,0); } 50%{ box-shadow:0 0 28px rgba(216,163,64,.20); } 100%{ box-shadow:0 0 0 rgba(216,163,64,0); } } /****************************************************************************** * * RESPONSIVE * ******************************************************************************/ @media(max-width:1200px){ .chart-grid{ grid-template-columns:1fr; } } @media(max-width:768px){ .chart-kpis{ grid-template-columns:1fr 1fr; } .chart-wrapper{ padding:16px; } .chart-title{ flex-direction:column; align-items:flex-start; gap:10px; } } /****************************************************************************** * * FAEM THEME * PART 9 * * Premium Header * Sidebar * Hero * Navigation * ******************************************************************************/ /****************************************************************************** * * APP LAYOUT * ******************************************************************************/ .app{ display:flex; min-height:100vh; background:#050505; } /****************************************************************************** * * PREMIUM SIDEBAR * ******************************************************************************/ .sidebar{ width:285px; background: linear-gradient( 180deg, #181818 0%, #101010 45%, #070707 100% ); border-right:1px solid rgba(216,163,64,.20); display:flex; position:sticky; top:0; height:100vh; overflow-y:auto; z-index:999; } /****************************************************************************** * * LOGO * ******************************************************************************/ .sidebar-logo{ padding:30px; display:flex; align-items:center; gap:18px; border-bottom:1px solid rgba(216,163,64,.12); } .sidebar-logo img{ width:58px; height:58px; border-radius:18px; } .sidebar-logo h1{ font-size:26px; margin:0; color:var(--gold-2); } .sidebar-logo span{ color:#888; font-size:12px; letter-spacing:2px; } /****************************************************************************** * * MENU * ******************************************************************************/ .sidebar-menu{ padding:25px 18px; } .sidebar-section{ color:var(--gold-3); font-size:12px; margin:24px 0 10px; text-transform:uppercase; letter-spacing:2px; } .sidebar-menu a, .sidebar-menu button { display:flex; align-items:center; gap:18px; color:#d7d7d7; padding:14px 18px; margin-bottom:6px; border-radius:14px; transition:.25s; text-decoration:none; } .sidebar-menu a:hover, .sidebar-menu button:hover{ background:rgba(216,163,64,.08); color:white; transform:translateX(6px); } .sidebar-menu a.active, .sidebar-menu button.active{ background: linear-gradient( 90deg, rgba(216,163,64,.18), rgba(216,163,64,.04) ); color:white; border-left:4px solid var(--gold-4); } /****************************************************************************** * * MENU ICONS * ******************************************************************************/ .sidebar-menu i{ font-size:22px; color:var(--gold-3); width:26px; text-align:center; } /****************************************************************************** * * USER PANEL * ******************************************************************************/ .sidebar-user{ margin-top:auto; padding:22px; border-top:1px solid rgba(216,163,64,.15); } .sidebar-user-card{ background:#111; border:1px solid rgba(216,163,64,.15); border-radius:18px; padding:18px; } .sidebar-user-name{ color:white; font-weight:700; } .sidebar-user-plan{ color:var(--gold-3); font-size:13px; } /****************************************************************************** * * HEADER * ******************************************************************************/ .header{ height:84px; background: linear-gradient( 180deg, rgba(20,20,20,.96), rgba(8,8,8,.96) ); display:flex; justify-content:space-between; align-items:center; padding:0 35px; border-bottom:1px solid rgba(216,163,64,.18); position:sticky; top:0; z-index:990; } /****************************************************************************** * * SEARCH * ******************************************************************************/ .header-search{ width:420px; position:relative; } .header-search input{ width:100%; background:#111; border:1px solid rgba(216,163,64,.18); border-radius:40px; padding:14px 20px 14px 52px; color:white; } .header-search i{ position:absolute; left:18px; top:50%; transform:translateY(-50%); color:var(--gold-4); } /****************************************************************************** * * HEADER ACTIONS * ******************************************************************************/ .header-actions{ display:flex; gap:18px; align-items:center; } .header-button{ width:48px; height:48px; border-radius:50%; display:flex; justify-content:center; align-items:center; background:#111; border:1px solid rgba(216,163,64,.18); transition:.25s; } .header-button:hover{ background:#1b1b1b; box-shadow:var(--gold-glow); } .header-button i{ color:var(--gold-3); font-size:20px; } /****************************************************************************** * * HERO * ******************************************************************************/ .hero{ position:relative; border-radius:30px; overflow:hidden; padding:50px; background: linear-gradient( 135deg, #20180d, #111, #0a0a0a ); border:1px solid rgba(216,163,64,.22); margin-bottom:35px; } /****************************************************************************** * * HERO GLOW * ******************************************************************************/ .hero::before{ content:""; position:absolute; right:-120px; top:-120px; width:320px; height:320px; border-radius:50%; background:rgba(216,163,64,.08); filter:blur(80px); } /****************************************************************************** * * HERO TITLE * ******************************************************************************/ .hero h1{ font-size:52px; color:white; margin-bottom:14px; } .hero h1 span{ color:var(--gold-2); } .hero p{ font-size:18px; color:#bbb; max-width:720px; line-height:1.7; } /****************************************************************************** * * HERO BUTTONS * ******************************************************************************/ .hero-buttons{ display:flex; gap:18px; margin-top:35px; } /****************************************************************************** * * HERO STATS * ******************************************************************************/ .hero-stats{ display:flex; gap:26px; margin-top:45px; } .hero-stat{ background:rgba(255,255,255,.03); border:1px solid rgba(216,163,64,.14); border-radius:18px; padding:20px 24px; min-width:180px; } .hero-stat h2{ margin:0; color:var(--gold-2); font-size:34px; } .hero-stat span{ color:#aaa; } /****************************************************************************** * * QUICK LINKS * ******************************************************************************/ .quick-links{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:22px; margin-top:35px; } .quick-link{ background:#111; border-radius:22px; border:1px solid rgba(216,163,64,.16); padding:24px; transition:.3s; } .quick-link:hover{ transform:translateY(-6px); border-color:rgba(216,163,64,.35); } .quick-link i{ font-size:42px; color:var(--gold-3); margin-bottom:18px; } .quick-link h3{ color:white; margin-bottom:10px; } .quick-link p{ color:#999; } /****************************************************************************** * * NOTIFICATION BADGE * ******************************************************************************/ .notification{ position:relative; } .notification::after{ content:""; position:absolute; top:8px; right:8px; width:10px; height:10px; border-radius:50%; background:var(--green-3); box-shadow:0 0 12px var(--green-3); } /****************************************************************************** * * MOBILE * ******************************************************************************/ @media(max-width:1200px){ .sidebar{ width:90px; } .sidebar-logo h1, .sidebar-logo span, .sidebar-menu span{ display:none; } .hero{ padding:35px; } .hero h1{ font-size:40px; } } @media(max-width:900px){ .header-search{ display:none; } .hero-stats{ flex-direction:column; } .hero-buttons{ flex-direction:column; } } /****************************************************************************** * * FAEM THEME * PART 10 * * FAEM DASHBOARD * Momentum Scanner * Rebalancing * Portfolio * Premium Widgets * ******************************************************************************/ /****************************************************************************** * * HERO DASHBOARD * ******************************************************************************/ .faem-dashboard{ display:grid; grid-template-columns:2fr 1fr; gap:28px; margin-bottom:35px; } /****************************************************************************** * * FEATURE CARD * ******************************************************************************/ .feature-card{ position:relative; overflow:hidden; border-radius:28px; background: linear-gradient( 135deg, #181818, #111111, #090909 ); border:1px solid rgba(216,163,64,.20); padding:34px; transition:.35s; } .feature-card:hover{ transform:translateY(-8px); border-color:rgba(216,163,64,.45); box-shadow: var(--gold-glow), var(--shadow-large); } .feature-card::before{ content:""; position:absolute; width:260px; height:260px; right:-120px; top:-120px; background:rgba(216,163,64,.06); border-radius:50%; filter:blur(70px); } /****************************************************************************** * * FEATURE ICON * ******************************************************************************/ .feature-icon{ width:74px; height:74px; display:flex; justify-content:center; align-items:center; border-radius:22px; background: linear-gradient( var(--gold-2), var(--gold-5) ); color:black; font-size:34px; margin-bottom:22px; } /****************************************************************************** * * FEATURE TITLE * ******************************************************************************/ .feature-title{ font-size:34px; color:white; font-weight:700; } .feature-title span{ color:var(--green-3); } /****************************************************************************** * * FEATURE DESCRIPTION * ******************************************************************************/ .feature-description{ margin-top:18px; color:#bfbfbf; line-height:1.8; max-width:700px; } /****************************************************************************** * * FEATURE BUTTON * ******************************************************************************/ .feature-actions{ margin-top:30px; display:flex; gap:18px; } /****************************************************************************** * * QUICK ACCESS * ******************************************************************************/ .quick-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:22px; margin-top:30px; } .quick-card{ background:#111; border-radius:22px; border:1px solid rgba(216,163,64,.18); padding:26px; transition:.25s; } .quick-card:hover{ transform:translateY(-6px); border-color:rgba(216,163,64,.40); } .quick-card i{ font-size:46px; color:var(--gold-3); margin-bottom:20px; } .quick-card h3{ color:white; margin-bottom:12px; } .quick-card p{ color:#999; line-height:1.7; } /****************************************************************************** * * MOMENTUM PANEL * ******************************************************************************/ .momentum-widget{ background: linear-gradient( 180deg, #151515, #101010 ); border-radius:24px; border:1px solid rgba(34,216,76,.25); padding:28px; } .momentum-widget h2{ color:var(--green-2); } .momentum-value{ font-size:64px; color:white; font-weight:700; } .momentum-description{ color:#9f9f9f; } /****************************************************************************** * * REBALANCING * ******************************************************************************/ .rebalance-widget{ background: linear-gradient( 180deg, #181818, #111111 ); border-radius:24px; border:1px solid rgba(216,163,64,.18); padding:28px; } .rebalance-score{ font-size:58px; color:var(--gold-2); font-weight:700; } /****************************************************************************** * * PORTFOLIO VALUE * ******************************************************************************/ .portfolio-widget{ background:#111; border-radius:24px; border:1px solid rgba(216,163,64,.18); padding:28px; } .portfolio-value{ font-size:52px; color:white; font-weight:700; } .portfolio-profit{ color:var(--green-3); font-size:20px; font-weight:700; } /****************************************************************************** * * PREMIUM KPI * ******************************************************************************/ .kpi-dashboard{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin:35px 0; } .kpi-dashboard .card{ text-align:center; padding:26px; } .kpi-dashboard h2{ color:var(--gold-2); font-size:42px; margin-bottom:8px; } .kpi-dashboard span{ color:#999; } /****************************************************************************** * * MARKET STATUS * ******************************************************************************/ .market-status{ display:flex; gap:12px; align-items:center; } .market-dot{ width:12px; height:12px; border-radius:50%; background:var(--green-3); box-shadow:0 0 14px var(--green-3); } /****************************************************************************** * * NEWS PANEL * ******************************************************************************/ .news-card{ background:#111; border-radius:20px; border:1px solid rgba(216,163,64,.16); padding:20px; margin-bottom:16px; transition:.2s; } .news-card:hover{ background:#171717; } .news-title{ color:white; font-weight:700; } .news-date{ color:#888; font-size:13px; } /****************************************************************************** * * FEATURE LIST * ******************************************************************************/ .feature-list{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px; } .feature-list .item{ background:#111; border-radius:18px; border:1px solid rgba(216,163,64,.16); padding:22px; display:flex; gap:18px; align-items:flex-start; } .feature-list .item i{ color:var(--gold-3); font-size:30px; } .feature-list .item h4{ color:white; margin-bottom:8px; } .feature-list .item p{ color:#999; margin:0; } /****************************************************************************** * * PREMIUM CTA * ******************************************************************************/ .faem-premium{ margin-top:40px; border-radius:30px; padding:45px; background: linear-gradient( 135deg, #2a1d0d, #171717, #101010 ); border:1px solid rgba(216,163,64,.25); text-align:center; } .faem-premium h2{ font-size:42px; color:white; } .faem-premium h2 span{ color:var(--gold-2); } .faem-premium p{ max-width:760px; margin:auto; margin-top:20px; color:#bbb; line-height:1.8; } .faem-premium .btn{ margin-top:30px; } /****************************************************************************** * * RESPONSIVE * ******************************************************************************/ @media(max-width:1400px){ .faem-dashboard{ grid-template-columns:1fr; } .kpi-dashboard{ grid-template-columns:repeat(2,1fr); } } @media(max-width:768px){ .kpi-dashboard{ grid-template-columns:1fr; } .quick-grid{ grid-template-columns:1fr; } .feature-title{ font-size:28px; } .feature-card{ padding:24px; } } /****************************************************************************** * youtube styles ******************************************************************************/ .youtube-container { position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; overflow: hidden; max-width: 100%; } .youtube-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .video-transcript { padding: 0.5rem 0 2.25rem 0; border-radius: 14px; line-height: 1.75; font-size: 1rem; max-width: 80ch; /* SEO sweet spot */ margin: 0 auto; text-align: center; } .video-transcript h2 { margin: 0 auto; font-size: 14px; font-weight: 700; } .video-transcript p { margin: 0 auto; text-align: center; font-size: 10px; } @media (max-width: 768px) { .video-transcript { padding: 1.5rem 1.25rem; } } .video-transcript--scroll { max-height: 60vh; overflow-y: auto; scrollbar-width: thin; } .video-transcript--scroll::-webkit-scrollbar { width: 6px; } .video-transcript--scroll::-webkit-scrollbar-thumb { border-radius: 4px; } /****************************************************************************** * * PREMIUM GRID WRAPPER * ******************************************************************************/ .premium-grid-wrapper{ overflow:auto; max-width:100%; max-height:calc(100vh - 260px); border-radius:24px; scroll-behavior:smooth; } /****************************************************************************** * * FAEM PREMIUM GRID * ******************************************************************************/ .premium-grid{ width:100%; border-collapse:separate; border-spacing:0; background:#111; border-radius:24px; overflow:hidden; border:1px solid rgba(216,163,64,.18); box-shadow:var(--shadow-medium); } /****************************************************************************** * * HEADER * ******************************************************************************/ .premium-grid thead{ background: linear-gradient( 180deg, #242424, #181818 ); position:sticky; top:0; z-index:50; } .premium-grid thead th{ position:sticky; top:0; background: linear-gradient( 180deg, #242424, #181818 ); z-index:50; } .premium-grid thead tr{ height:64px; } .premium-grid th{ color:var(--gold-2); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1px; border:none; padding:9px 11px; white-space:nowrap; } /****************************************************************************** * * STICKY FIRST COLUMN * ******************************************************************************/ .premium-grid th:first-child{ position:sticky; left:0; z-index:60; background: linear-gradient( 180deg, #242424, #181818 ); box-shadow:4px 0 12px rgba(0,0,0,.45); } .premium-grid td:first-child{ position:sticky; left:0; background:#111; z-index:20; box-shadow:4px 0 12px rgba(0,0,0,.35); } /****************************************************************************** * * TOP LEFT CELL * ******************************************************************************/ .premium-grid thead th:first-child{ z-index:100; } /****************************************************************************** * * Cień oddzielający pierwszą kolumnę od reszty tabeli * ******************************************************************************/ .premium-grid td:first-child::after, .premium-grid th:first-child::after{ content:""; position:absolute; top:0; right:0; width:1px; height:100%; background:rgba(216,163,64,.12); } /****************************************************************************** * * BODY * ******************************************************************************/ .premium-grid tbody{ background:#101010; } .premium-grid td{ padding:9px 11px; border-top:1px solid rgba(255,255,255,.05); color:#ddd; vertical-align:middle; } /****************************************************************************** * * ROW * ******************************************************************************/ .premium-grid tbody tr{ transition:.18s; } .premium-grid tbody tr:hover{ background:#181818; } /****************************************************************************** * * ZEBRA * ******************************************************************************/ .premium-grid tbody tr:nth-child(even){ background:#151515; } .premium-grid tbody tr:nth-child(even):hover{ background:#202020; } /****************************************************************************** * * SORT * ******************************************************************************/ .premium-grid th button{ background:none; border:none; color:inherit; font-weight:700; display:flex; align-items:center; gap:8px; } /****************************************************************************** * * LINKS * ******************************************************************************/ .premium-grid a{ color:var(--gold-3); text-decoration:none; } .premium-grid a:hover{ color:white; } /****************************************************************************** * * NUMBERS * ******************************************************************************/ .number{ text-align:right; font-variant-numeric:tabular-nums; } /****************************************************************************** * * POSITIVE * ******************************************************************************/ .positive{ color:#38d46a; font-weight:700; } /****************************************************************************** * * NEGATIVE * ******************************************************************************/ .negative{ color:#ff5a5a; font-weight:700; } /****************************************************************************** * * CENTER * ******************************************************************************/ .center{ text-align:center; } /****************************************************************************** * * BADGES * ******************************************************************************/ .grid-badge{ display:inline-flex; align-items:center; justify-content:center; padding:6px 12px; border-radius:30px; font-size:13px; font-weight:600; } .grid-badge.green{ background:rgba(56,212,106,.18); color:#38d46a; } .grid-badge.red{ background:rgba(255,90,90,.18); color:#ff5a5a; } .grid-badge.gold{ background:rgba(216,163,64,.18); color:var(--gold-2); } /****************************************************************************** * * IMAGES * ******************************************************************************/ .grid-logo{ width:36px; height:36px; border-radius:10px; } /****************************************************************************** * * RESPONSIVE * ******************************************************************************/ .table-wrapper{ overflow:auto; border-radius:24px; } /****************************************************************************** * CUSTOM STYLES ******************************************************************************/ p, div.indent { color: #888; } ul, ol { color: #aaa; } .left { float: left; } .right{ float: right; } .noleft{ float: none; } .stockDivTranchesAEM{ padding: 5px; width:33%; } tranchesAEMTable tbody, tranchesAEMTable td, tranchesAEMTable tfoot, tranchesAEMTable th, tranchesAEMTable thead, tranchesAEMTable tr { border-width: 1px; } .marginTop { margin-top: 20px; } .postCard { margin-bottom: 40px; } .sidebar{ width:300px; transition:transform .3s ease; } .sidebar.closed{ transform:translateX(-100%); }