Proje dosyaları eklendi
This commit is contained in:
@@ -0,0 +1,218 @@
|
||||
@import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
|
||||
:root {
|
||||
--tp-brand-rgb: 91, 75, 255;
|
||||
--bs-primary-rgb: var(--tp-brand-rgb);
|
||||
--bs-link-color-rgb: var(--tp-brand-rgb);
|
||||
}
|
||||
|
||||
[data-bs-theme="light"] {
|
||||
--tp-page-accent: rgba(var(--tp-brand-rgb), .08);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] {
|
||||
--tp-page-accent: rgba(var(--tp-brand-rgb), .16);
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
background:
|
||||
radial-gradient(circle at 85% 15%, var(--tp-page-accent), transparent 32rem),
|
||||
var(--bs-body-bg);
|
||||
}
|
||||
.tp-topbar{min-height:68px;position:sticky;top:0;z-index:1025}.tp-user-chip{align-items:center;gap:.65rem;padding:.25rem .6rem;border:1px solid var(--bs-border-color);border-radius:12px}.tp-user-chip span:last-child{display:flex;flex-direction:column;line-height:1.15}.tp-user-chip small{color:var(--bs-secondary-color);font-size:.7rem}.tp-avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(var(--tp-brand-rgb),.16);color:rgb(var(--tp-brand-rgb));font-weight:800}.tp-customer-shell{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:calc(100vh - 68px)}.tp-customer-sidebar{background:linear-gradient(180deg,#111936,#0a1027);color:#d8def5;border:0!important;padding:1.25rem}.tp-customer-sidebar .offcanvas-body{padding:0}.tp-side-nav{display:grid;gap:.75rem}.tp-side-link,.tp-nav-section a,.tp-nav-section span{display:flex;align-items:center;gap:.65rem;color:#aeb8d8;text-decoration:none;padding:.65rem .75rem;border-radius:10px;font-size:.9rem}.tp-side-link.active,.tp-nav-section a.active{color:#fff;background:linear-gradient(90deg,rgba(91,75,255,.45),rgba(91,75,255,.12));box-shadow:inset 3px 0 #8d7cff}.tp-nav-section>button{width:100%;display:flex;justify-content:space-between;border:0;background:none;color:#fff;padding:.75rem;font-weight:700;text-align:left}.tp-nav-section .collapse{border-left:1px solid rgba(255,255,255,.12);margin-left:1rem;padding-left:.45rem}.tp-nav-section small{margin-left:auto;background:rgba(255,255,255,.08);padding:.1rem .35rem;border-radius:5px;font-size:.6rem}.tp-customer-main{padding:clamp(1rem,2.5vw,2.25rem);min-width:0;background:linear-gradient(145deg,var(--bs-body-bg),rgba(var(--tp-brand-rgb),.045))}.tp-page-header{display:flex;align-items:end;justify-content:space-between;gap:1.5rem;margin-bottom:1.5rem}.tp-page-header p,.tp-panel-heading p{margin:0;color:rgb(var(--tp-brand-rgb));font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem}.tp-page-header h1{font-size:clamp(1.7rem,3vw,2.35rem);margin:.15rem 0}.tp-page-header>div>span{color:var(--bs-secondary-color)}.tp-dashboard-filters{display:flex;gap:.75rem}.tp-dashboard-filters label{font-size:.72rem;color:var(--bs-secondary-color);font-weight:700}.tp-dashboard-filters select{min-width:150px;margin-top:.25rem}.tp-metric-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1rem;margin-bottom:1rem}.tp-metric-card,.tp-panel{background:color-mix(in srgb,var(--bs-body-bg) 92%,rgb(var(--tp-brand-rgb)));border:1px solid color-mix(in srgb,var(--bs-border-color) 78%,rgb(var(--tp-brand-rgb)));border-radius:16px;box-shadow:0 12px 35px rgba(8,15,45,.07)}.tp-metric-card{padding:1.15rem;display:flex;align-items:center;gap:.8rem;min-width:0}.tp-metric-icon{display:grid;place-items:center;flex:0 0 40px;height:40px;border-radius:12px;background:rgba(var(--tp-brand-rgb),.13);color:rgb(var(--tp-brand-rgb));font-size:1.25rem}.tp-metric-card p{margin:0;color:var(--bs-secondary-color);font-size:.72rem}.tp-metric-card strong{font-size:1.6rem}.tp-panel{padding:1.25rem;margin-bottom:1rem;overflow:hidden}.tp-panel-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.tp-panel-heading h2{font-size:1.05rem;margin:.2rem 0 0}.tp-chart-panel{min-height:280px}.tp-rank-bars{display:grid;gap:.65rem}.tp-rank-bars>div{display:grid;grid-template-columns:minmax(110px,180px) 1fr 45px;align-items:center;gap:.8rem;font-size:.8rem}.tp-rank-bars i{display:block;height:9px;border-radius:9px;background:linear-gradient(90deg,#6d5dfc,#16c7a3);width:calc((101 - var(--rank)) * 1%);min-width:4px}.tp-data-table{--bs-table-bg:transparent;margin:0}.tp-data-table th{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--bs-secondary-color);white-space:nowrap}.tp-data-table td{vertical-align:middle;white-space:nowrap}.tp-rank-up{color:#14a879;font-weight:700}.tp-rank-down{color:#e45175;font-weight:700}.tp-empty-state{text-align:center;padding:2rem;color:var(--bs-secondary-color)}.tp-empty-state>div{font-size:2rem;color:rgb(var(--tp-brand-rgb))}.tp-empty-state h3{font-size:1rem;color:var(--bs-body-color);margin:.5rem}.tp-empty-state p{margin:0;font-size:.85rem}.tp-two-columns{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.tp-mover{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0;border-bottom:1px solid var(--bs-border-color)}.tp-mover span:first-child{display:flex;flex-direction:column}.tp-mover small{color:var(--bs-secondary-color)}.tp-sidebar-toggle{position:fixed;left:.75rem;top:.8rem;z-index:1040}.tp-mobile-menu-slot{width:42px}
|
||||
|
||||
.tp-brand-logo-link {
|
||||
display: inline-flex;
|
||||
max-width: min(52vw, 19rem);
|
||||
flex: 0 1 auto;
|
||||
border-radius: .25rem;
|
||||
}
|
||||
.tp-brand-logo-link:focus-visible { outline: .2rem solid rgba(var(--tp-brand-rgb), .45); outline-offset: .2rem; }
|
||||
.tp-brand-logo { display: inline-block; height: var(--tp-logo-height); max-width: 100%; aspect-ratio: 2172 / 724; }
|
||||
.tp-brand-logo img { display: block; width: auto; height: 100%; max-width: 100%; object-fit: contain; object-position: center; }
|
||||
.tp-brand-logo-dark { display: none !important; }
|
||||
[data-bs-theme="dark"] .tp-brand-logo-light { display: none !important; }
|
||||
[data-bs-theme="dark"] .tp-brand-logo-dark { display: block !important; }
|
||||
|
||||
.tp-sidebar { min-height: calc(100vh - 73px); }
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.tp-sidebar { min-height: auto; }
|
||||
.tp-customer-shell{display:block}.tp-customer-sidebar{width:min(86vw,290px)}.tp-metric-grid{grid-template-columns:repeat(3,1fr)}
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.tp-brand-logo-link { max-width: 42vw; }
|
||||
.tp-brand-logo-auth { --tp-logo-height: 60px !important; }
|
||||
.tp-page-header,.tp-dashboard-filters{align-items:stretch;flex-direction:column}.tp-dashboard-filters select{min-width:0}.tp-metric-grid{grid-template-columns:1fr 1fr}.tp-two-columns{grid-template-columns:1fr}.tp-customer-main{padding:.85rem}
|
||||
}
|
||||
|
||||
.tp-public-topbar { min-width: 0; min-height: 52px; flex-wrap: nowrap; }
|
||||
.tp-public-topbar .tp-brand-logo-link {
|
||||
display: block;
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
max-width: min(11.25rem, calc(100vw - 5rem));
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.tp-public-topbar .tp-brand-logo {
|
||||
display: block;
|
||||
width: auto;
|
||||
height: 36px;
|
||||
max-width: 100%;
|
||||
}
|
||||
.tp-public-topbar .tp-brand-logo img {
|
||||
display: block;
|
||||
width: auto;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
object-fit: contain;
|
||||
object-position: left center;
|
||||
}
|
||||
.tp-public-desktop-actions { min-width: 0; }
|
||||
.tp-public-desktop-actions .btn,
|
||||
.tp-public-mobile-menu .btn { white-space: nowrap; word-break: normal; overflow-wrap: normal; }
|
||||
.tp-public-menu-toggle { flex: 0 0 auto; width: 2.5rem; height: 2.5rem; padding: .35rem; }
|
||||
.tp-public-menu-toggle:focus-visible { outline: .2rem solid rgba(var(--tp-brand-rgb), .45); outline-offset: .15rem; box-shadow: none; }
|
||||
.tp-public-mobile-menu { width: min(20rem, 100vw); max-width: 100%; }
|
||||
.tp-public-mobile-menu .offcanvas-body { min-width: 0; }
|
||||
.tp-public-mobile-menu .offcanvas-body > .btn { width: 100%; min-height: 2.75rem; text-align: start; }
|
||||
.tp-public-mobile-menu .dropdown,
|
||||
.tp-public-mobile-menu .dropdown-toggle { min-width: 0; max-width: 100%; }
|
||||
.tp-public-mobile-menu .dropdown-menu { width: max-content; max-width: calc(100vw - 2rem); }
|
||||
.tp-public-mobile-menu .dropdown-item { white-space: normal; overflow-wrap: break-word; }
|
||||
.tp-public-mobile-preferences { display: grid !important; grid-template-columns: minmax(0, auto) minmax(0, 1fr); flex-wrap: wrap; }
|
||||
.tp-public-mobile-preferences .tp-theme-picker { justify-self: end; min-width: 0; }
|
||||
.tp-public-mobile-preferences .tp-theme-picker .dropdown-toggle { width: 100%; }
|
||||
.tp-public-mobile-preferences .btn { min-height: 2.375rem; padding: .35rem .6rem; }
|
||||
.tp-public-mobile-preferences .tp-theme-picker .btn { gap: .35rem !important; }
|
||||
@media (max-width: 575.98px) {
|
||||
.tp-public-topbar .tp-brand-logo-link { display: block; }
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
.tp-public-topbar .tp-brand-logo { height: 40px; }
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.tp-public-topbar .tp-brand-logo { height: 44px; }
|
||||
.tp-public-topbar .tp-brand-logo-link { max-width: 13.5rem; }
|
||||
}
|
||||
|
||||
.tp-auth-page { width: 100%; padding-right: 1rem; padding-left: 1rem; }
|
||||
.tp-auth-column,.tp-auth-card,.tp-auth-card .card-body,.tp-auth-card form { min-width: 0; max-width: 100%; }
|
||||
.tp-auth-card .form-control,.tp-auth-card .form-select,.tp-auth-card .btn { max-width: 100%; }
|
||||
.tp-auth-card h1,.tp-auth-card p,.tp-auth-card .alert,.tp-auth-card .form-check-label { overflow-wrap: break-word; }
|
||||
.tp-auth-card .form-check { min-width: 0; }
|
||||
.tp-auth-card .tp-brand-logo-link { max-width: 100%; }
|
||||
.tp-auth-links { min-width: 0; }
|
||||
@media (max-width: 359.98px) {
|
||||
.tp-auth-links { align-items: flex-start; flex-direction: column; }
|
||||
.tp-public-mobile-preferences { grid-template-columns: 1fr; }
|
||||
.tp-public-mobile-preferences .tp-theme-picker { justify-self: stretch; }
|
||||
}
|
||||
|
||||
.card,
|
||||
.navbar,
|
||||
.dropdown-menu,
|
||||
.btn {
|
||||
transition: background-color .2s ease, border-color .2s ease, color .2s ease;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.card,
|
||||
.navbar,
|
||||
.dropdown-menu,
|
||||
.btn {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.tp-project-metrics { grid-template-columns: repeat(6, minmax(0, 1fr)); }
|
||||
.tp-detail-list { margin: 0; }
|
||||
.tp-detail-list > div { display: grid; grid-template-columns: minmax(110px, 35%) 1fr; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--bs-border-color); }
|
||||
.tp-detail-list > div:last-child { border: 0; }
|
||||
.tp-detail-list dt { color: var(--bs-secondary-color); font-size: .8rem; }
|
||||
.tp-detail-list dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
|
||||
.tp-technical-detail { opacity: .75; }
|
||||
.tp-form-panel { max-width: 760px; }
|
||||
.tp-keyword-metrics{grid-template-columns:repeat(6,minmax(0,1fr))}.tp-keyword-filters{display:grid;grid-template-columns:minmax(180px,2fr) repeat(3,minmax(130px,1fr)) auto;gap:.75rem}.tp-history-list{display:grid;gap:.75rem}.tp-history-list>div{display:grid;grid-template-columns:100px 1fr 45px;align-items:center;gap:.75rem}.tp-history-list span{height:9px;border-radius:9px;background:linear-gradient(90deg,#6d5dfc,#16c7a3);width:calc((101 - var(--rank))*1%);min-width:4px}
|
||||
@media(max-width:991.98px){.tp-keyword-filters{grid-template-columns:1fr 1fr}.tp-keyword-metrics{grid-template-columns:repeat(3,1fr)}}
|
||||
@media(max-width:575.98px){.tp-keyword-filters,.tp-keyword-metrics{grid-template-columns:1fr}.tp-panel{padding:.85rem}.tp-data-table td,.tp-data-table th{font-size:.78rem}}
|
||||
|
||||
/* Customer navigation starts at 20px; its only brand mark lives in the topbar. */
|
||||
.tp-sidebar-closebar{position:absolute;top:.75rem;right:.75rem;z-index:2;padding:0}
|
||||
@media(max-width:575.98px){.tp-customer-top-logo{margin-left:3.25rem}.tp-customer-top-logo .tp-brand-logo-link{display:inline-flex}}
|
||||
.tp-user-chip{color:var(--bs-body-color);text-decoration:none;min-width:0;max-width:280px;transition:background-color .15s,border-color .15s}.tp-user-chip:hover{background:var(--bs-secondary-bg);border-color:rgb(var(--tp-brand-rgb))}.tp-user-chip:focus-visible{outline:3px solid rgba(var(--tp-brand-rgb),.35);outline-offset:2px}.tp-user-chip-copy{display:flex;flex-direction:column;line-height:1.15;min-width:0}.tp-user-chip strong,.tp-user-chip small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||||
.tp-ranking-filters{display:grid;grid-template-columns:repeat(3,minmax(140px,1fr)) repeat(2,minmax(130px,.8fr));gap:.75rem}.tp-ranking-metrics{grid-template-columns:repeat(6,minmax(0,1fr))}.tp-ranking-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(250px,1fr);gap:1rem}.tp-ranking-chart{width:100%;overflow:hidden}.tp-ranking-chart svg{display:block;width:100%;min-height:260px}.tp-ranking-chart polyline{fill:none;stroke:var(--series);stroke-width:3}.tp-ranking-chart circle{fill:var(--bs-body-bg);stroke:var(--series);stroke-width:3}.tp-chart-grid line{stroke:var(--bs-border-color);stroke-width:1}.tp-chart-grid text{fill:var(--bs-secondary-color);font-size:12px}.tp-chart-legend{display:flex;flex-wrap:wrap;gap:.75rem;font-size:.75rem}.tp-chart-legend span{display:flex;align-items:center;gap:.3rem}.tp-chart-legend i{width:10px;height:10px;border-radius:50%}.tp-distribution{display:grid;gap:.75rem}.tp-distribution>div{display:grid;grid-template-columns:90px 1fr 30px;align-items:center;gap:.5rem;font-size:.8rem}.tp-distribution i{height:8px;width:min(100%,calc(var(--count)*12%));min-width:3px;border-radius:8px;background:linear-gradient(90deg,#6d5dfc,#16c7a3)}.tp-movement{font-weight:700}.tp-winner{color:#148563}.tp-loser{color:#c83c61}.tp-organic-result{display:grid;gap:.2rem;padding:.7rem 0;border-bottom:1px solid var(--bs-border-color);overflow-wrap:anywhere}
|
||||
@media(max-width:991.98px){.tp-ranking-filters{grid-template-columns:1fr 1fr}.tp-ranking-metrics{grid-template-columns:repeat(3,1fr)}.tp-ranking-grid{grid-template-columns:1fr}}
|
||||
@media(max-width:575.98px){.tp-ranking-filters,.tp-ranking-metrics{grid-template-columns:1fr}.tp-ranking-chart svg{min-width:0;height:auto}.tp-ranking-grid{min-width:0}}
|
||||
.tp-serp-filters{display:grid;grid-template-columns:repeat(3,minmax(140px,1fr));gap:.75rem}.tp-serp-metrics{grid-template-columns:repeat(6,minmax(0,1fr))}.tp-status-pending{background:#806f2a;color:#fff}.tp-status-running{background:#2867a8;color:#fff}.tp-status-completed{background:#14785d;color:#fff}.tp-status-failed{background:#ad3655;color:#fff}
|
||||
@media(max-width:991.98px){.tp-serp-filters{grid-template-columns:1fr 1fr}.tp-serp-metrics{grid-template-columns:repeat(3,1fr)}}@media(max-width:575.98px){.tp-serp-filters,.tp-serp-metrics{grid-template-columns:1fr}}
|
||||
.tp-visibility-filters{display:grid;grid-template-columns:repeat(3,minmax(140px,1fr));gap:.75rem}.tp-visibility-chart svg{display:block;width:100%;min-height:260px}.tp-visibility-chart polyline{fill:none;stroke-width:3}.tp-visibility-chart circle{fill:var(--bs-body-bg);stroke:var(--series);stroke-width:3}@media(max-width:991.98px){.tp-visibility-filters{grid-template-columns:1fr 1fr}}@media(max-width:575.98px){.tp-visibility-filters{grid-template-columns:1fr}.tp-visibility-chart svg{min-width:0;height:auto}}
|
||||
.tp-metric-grid,.tp-project-metrics,.tp-keyword-metrics,.tp-ranking-metrics,.tp-serp-metrics,.tp-visibility-metrics{grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr))}.tp-metric-card{min-height:96px;min-width:0}.tp-metric-content{display:flex;flex:1 1 auto;min-width:0;flex-direction:column;justify-content:center}.tp-metric-label{white-space:normal;overflow-wrap:break-word;line-height:1.3}.tp-metric-value{display:block;min-width:0;white-space:nowrap;line-height:1.15}.tp-metric-description{display:block;margin-top:.22rem;color:var(--bs-secondary-color);font-size:.8125rem;line-height:1.35;white-space:normal;overflow-wrap:break-word}@media(max-width:767.98px) and (min-width:576px){.tp-metric-grid,.tp-project-metrics,.tp-keyword-metrics,.tp-ranking-metrics,.tp-serp-metrics,.tp-visibility-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:575.98px){.tp-metric-grid,.tp-project-metrics,.tp-keyword-metrics,.tp-ranking-metrics,.tp-serp-metrics,.tp-visibility-metrics{grid-template-columns:minmax(0,1fr)}}
|
||||
.tp-winners-filters{display:grid;grid-template-columns:repeat(3,minmax(140px,1fr));gap:.75rem}.tp-winners-metrics{grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr))}@media(max-width:767.98px){.tp-winners-filters{grid-template-columns:1fr 1fr}}@media(max-width:575.98px){.tp-winners-filters,.tp-winners-metrics{grid-template-columns:minmax(0,1fr)}}
|
||||
.tp-losers-filters{display:grid;grid-template-columns:repeat(3,minmax(140px,1fr));gap:.75rem}.tp-losers-metrics{grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr))}.tp-critical-losses{border-color:color-mix(in srgb,#c83c61 35%,var(--bs-border-color))}.tp-distribution .tp-loss-bar{background:linear-gradient(90deg,#c83c61,#ef718e)}@media(max-width:767.98px){.tp-losers-filters{grid-template-columns:1fr 1fr}}@media(max-width:575.98px){.tp-losers-filters,.tp-losers-metrics{grid-template-columns:minmax(0,1fr)}}
|
||||
.tp-competitor-form{display:grid;grid-template-columns:1fr 1fr auto;gap:.75rem}@media(max-width:575.98px){.tp-competitor-form{grid-template-columns:1fr}}
|
||||
.tp-profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.tp-profile-grid>*{min-width:0}.tp-profile-grid .form-label{display:block;margin-bottom:.8rem}.tp-profile-sessions{grid-column:1/-1}.tp-session-row{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--bs-border-color);overflow-wrap:anywhere}@media(max-width:767.98px){.tp-profile-grid{grid-template-columns:1fr}.tp-profile-sessions{grid-column:auto}.tp-session-row{flex-direction:column;gap:.2rem}}
|
||||
.tp-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.tp-settings-grid>*{min-width:0}.tp-settings-grid .form-label{display:block;margin-bottom:.8rem}.tp-settings-reset{grid-column:1/-1}html[data-reduced-motion="true"] *{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}@media(max-width:767.98px){.tp-settings-grid{grid-template-columns:1fr}.tp-settings-reset{grid-column:auto}}
|
||||
|
||||
.tp-landing { overflow-x: clip; }
|
||||
.tp-landing-hero { padding: clamp(4rem, 9vw, 7.5rem) 0; background: color-mix(in srgb, #111936 94%, var(--bs-body-bg)); color: #f7f8ff; }
|
||||
.tp-landing-hero .container { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(18rem, .8fr); align-items: center; gap: clamp(2rem, 6vw, 5rem); }
|
||||
.tp-landing-hero-copy { max-width: 48rem; }
|
||||
.tp-landing-eyebrow,.tp-section-heading>span { display: inline-block; margin-bottom: .8rem; color: #8f9cff; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
|
||||
.tp-landing-hero h1 { margin: 0; max-width: 52rem; font-size: clamp(2.15rem, 5vw, 4.4rem); line-height: 1.06; letter-spacing: -.035em; overflow-wrap: break-word; }
|
||||
.tp-landing-hero-copy>p { max-width: 44rem; margin: 1.4rem 0 0; color: #c8cee6; font-size: clamp(1rem, 1.6vw, 1.18rem); line-height: 1.7; }
|
||||
.tp-landing-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
|
||||
.tp-landing-actions .btn-primary,.tp-landing-cta .btn-primary { background: #6d5dfc; border-color: #6d5dfc; }
|
||||
.tp-landing-actions .btn-outline-secondary { color: #f7f8ff; border-color: #66708f; }
|
||||
.tp-landing-preview { min-width: 0; padding: 1.5rem; border: 1px solid #384260; border-radius: 1rem; background: #161f3e; box-shadow: 0 1.5rem 4rem rgba(4,8,24,.28); }
|
||||
.tp-preview-heading,.tp-preview-metric,.tp-preview-status { display: flex; justify-content: space-between; gap: 1rem; }
|
||||
.tp-preview-heading { color: #aeb8d8; font-size: .8rem; }
|
||||
.tp-preview-heading strong { color: #fff; }
|
||||
.tp-preview-metric { align-items: end; margin-top: 2rem; color: #aeb8d8; }
|
||||
.tp-preview-metric strong { color: #fff; font-size: 2.35rem; line-height: 1; }
|
||||
.tp-preview-chart { display: flex; align-items: end; gap: .6rem; height: 9rem; margin: 1.5rem 0; border-bottom: 1px solid #384260; }
|
||||
.tp-preview-chart i { width: 100%; border-radius: .3rem .3rem 0 0; background: #6d5dfc; }
|
||||
.tp-preview-chart i:nth-child(1){height:32%}.tp-preview-chart i:nth-child(2){height:48%}.tp-preview-chart i:nth-child(3){height:42%}.tp-preview-chart i:nth-child(4){height:65%}.tp-preview-chart i:nth-child(5){height:74%}.tp-preview-chart i:nth-child(6){height:88%}
|
||||
.tp-preview-status { color: #aeb8d8; font-size: .75rem; }.tp-preview-status span:first-child { color: #53d2ae; }
|
||||
.tp-landing-section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
|
||||
.tp-section-heading { max-width: 48rem; margin-bottom: 2rem; }.tp-section-heading h2 { margin: 0; font-size: clamp(1.8rem, 3.5vw, 2.8rem); }.tp-section-heading p { margin: .9rem 0 0; color: var(--bs-secondary-color); font-size: 1.05rem; }
|
||||
.tp-feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1rem; }
|
||||
.tp-feature-card { min-width: 0; padding: 1.35rem; border: 1px solid var(--bs-border-color); border-radius: 1rem; background: var(--bs-body-bg); }
|
||||
.tp-feature-icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .7rem; background: rgba(var(--tp-brand-rgb),.12); color: rgb(var(--tp-brand-rgb)); font-size: 1.25rem; }
|
||||
.tp-feature-card h3 { margin: 1rem 0 .5rem; font-size: 1.02rem; }.tp-feature-card p { margin: 0; color: var(--bs-secondary-color); font-size: .9rem; line-height: 1.6; }
|
||||
.tp-how-section { background: var(--bs-tertiary-bg); }.tp-how-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
|
||||
.tp-how-grid li { display: flex; gap: 1rem; min-width: 0; padding: 1.5rem; }.tp-how-grid>li>span { display: grid; place-items: center; flex: 0 0 2.5rem; height: 2.5rem; border-radius: 999px; background: #111936; color: #fff; font-weight: 800; }.tp-how-grid h3 { margin: .35rem 0 .5rem; font-size: 1.05rem; }.tp-how-grid p { margin: 0; color: var(--bs-secondary-color); line-height: 1.6; }
|
||||
.tp-landing-cta { padding: 3rem 0; background: #111936; color: #fff; }.tp-landing-cta .container { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }.tp-landing-cta h2 { margin: 0; font-size: clamp(1.5rem,3vw,2.25rem); }.tp-landing-cta p { margin: .65rem 0 0; color: #c8cee6; }
|
||||
.tp-landing-footer { padding: 1.5rem 0; border-top: 1px solid var(--bs-border-color); }.tp-landing-footer .container { display: flex; align-items: center; gap: 1.5rem; }.tp-footer-brand { color: var(--bs-body-color); font-weight: 800; text-decoration: none; }.tp-landing-footer nav { display: flex; gap: 1rem; margin-left: auto; }.tp-landing-footer a { text-underline-offset: .2rem; }.tp-landing-footer small { color: var(--bs-secondary-color); }
|
||||
@media(max-width:991.98px){.tp-landing-hero .container{grid-template-columns:1fr}.tp-landing-preview{max-width:40rem}.tp-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
|
||||
@media(max-width:575.98px){.tp-landing-hero{padding:3.5rem 0}.tp-landing-actions{display:grid;grid-template-columns:1fr}.tp-landing-actions .btn{width:100%}.tp-feature-grid,.tp-how-grid{grid-template-columns:1fr}.tp-how-grid li{padding:1rem 0}.tp-landing-cta .container,.tp-landing-footer .container{align-items:flex-start;flex-direction:column}.tp-landing-footer nav{margin-left:0}.tp-landing-preview{padding:1rem}.tp-preview-status{flex-direction:column;gap:.35rem}}
|
||||
|
||||
.tp-earn { overflow-x: clip; }.tp-earn-hero { padding: clamp(4rem,8vw,7rem) 0; background:#111936; color:#fff; }.tp-earn-hero .container { display:grid; grid-template-columns:minmax(0,1fr) minmax(18rem,.8fr); align-items:center; gap:clamp(2rem,6vw,5rem); }.tp-earn-hero h1 { margin:0; max-width:48rem; font-size:clamp(2.1rem,5vw,4.1rem); line-height:1.08; letter-spacing:-.035em; }.tp-earn-hero-copy>p { max-width:43rem; margin:1.3rem 0 0; color:#c8cee6; font-size:clamp(1rem,1.6vw,1.15rem); line-height:1.7; }.tp-coming-soon { display:inline-flex; margin-top:1rem; padding:.35rem .7rem; border:1px solid #4d5879; border-radius:999px; color:#c8cee6; font-size:.75rem; font-weight:700; }.tp-coming-soon-light { margin:0; color:#fff; }
|
||||
.tp-device-scene { position:relative; min-height:22rem; }.tp-device { position:absolute; border:2px solid #596583; background:#161f3e; box-shadow:0 1.5rem 4rem rgba(4,8,24,.3); }.tp-device>span { display:block; background:#090f25; }.tp-device>div { display:grid; gap:.7rem; padding:1.2rem; }.tp-device i { display:block; height:.65rem; border-radius:1rem; background:#374261; }.tp-device i:nth-child(2){width:76%;background:#6d5dfc}.tp-device strong { color:#dce1f4; font-size:.8rem; }.tp-device-desktop { inset:1rem 0 3rem 0; border-radius:1rem; }.tp-device-desktop>span { height:1.5rem; border-radius:.8rem .8rem 0 0; }.tp-device-mobile { right:-.5rem; bottom:0; width:8.5rem; min-height:13rem; border-radius:1.4rem; }.tp-device-mobile>span { width:2.5rem; height:.35rem; margin:.55rem auto; border-radius:1rem; }
|
||||
.tp-earn-rate { padding:2rem 0; background:#15213e; color:#fff; }.tp-earn-rate .container { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:2rem; }.tp-earn-rate span { color:#62d7b5; font-size:.75rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.tp-earn-rate h2 { margin:.35rem 0; font-size:clamp(1.7rem,4vw,3rem); }.tp-earn-rate p { max-width:45rem; margin:0; color:#c8cee6; }.tp-earn-rate dl { display:flex; gap:2rem; margin:0; }.tp-earn-rate dl div { min-width:10rem; }.tp-earn-rate dt { color:#aeb8d8; font-size:.75rem; }.tp-earn-rate dd { margin:.3rem 0 0; font-size:1.25rem; font-weight:800; }
|
||||
.tp-earn-process { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin:0; padding:0; list-style:none; counter-reset:step; }.tp-earn-process li { display:flex; gap:1rem; min-width:0; padding:1.25rem; border:1px solid var(--bs-border-color); border-radius:1rem; }.tp-earn-process>li>span { display:grid; place-items:center; flex:0 0 2.4rem; height:2.4rem; border-radius:999px; background:#6d5dfc; color:#fff; font-weight:800; }.tp-earn-process h3 { margin:.2rem 0 .5rem; font-size:1rem; }.tp-earn-process p { margin:0; color:var(--bs-secondary-color); font-size:.88rem; line-height:1.55; }
|
||||
.tp-earn-calculation { background:var(--bs-tertiary-bg); }.tp-calculation-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }.tp-calculation-card { display:grid; grid-template-columns:1fr auto; align-items:center; gap:.35rem 1rem; min-width:0; padding:1.5rem; border:1px solid var(--bs-border-color); border-radius:1rem; background:var(--bs-body-bg); }.tp-calculation-card strong { font-size:clamp(1.4rem,3vw,2rem); }.tp-calculation-card span { color:var(--bs-secondary-color); }.tp-calculation-card i { grid-row:1/3; grid-column:2; color:rgb(var(--tp-brand-rgb)); font-style:normal; font-size:1.4rem; }.tp-calculation-card b { grid-column:1/-1; margin-top:.7rem; color:#18a47e; font-size:1.35rem; }.tp-calculation-card small { grid-column:1/-1; color:#18a47e; }.tp-payout-card { border-color:#18a47e; }.tp-earn-disclosures { display:grid; gap:.6rem; margin:1.5rem 0 0; color:var(--bs-secondary-color); }
|
||||
.tp-safety-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem 1.5rem; margin:0; padding:0; list-style:none; }.tp-safety-grid li { display:flex; align-items:flex-start; gap:.65rem; min-width:0; line-height:1.55; }.tp-safety-grid li span { color:#18a47e; font-weight:900; }
|
||||
@media(max-width:991.98px){.tp-earn-hero .container{grid-template-columns:1fr}.tp-device-scene{max-width:36rem}.tp-earn-rate .container{grid-template-columns:1fr}.tp-earn-process{grid-template-columns:repeat(2,minmax(0,1fr))}}
|
||||
@media(max-width:575.98px){.tp-earn-hero{padding:3.5rem 0}.tp-device-scene{min-height:18rem}.tp-device-desktop{right:1rem}.tp-device-mobile{right:0}.tp-earn-rate dl{display:grid;gap:1rem}.tp-earn-process,.tp-calculation-grid,.tp-safety-grid{grid-template-columns:1fr}.tp-earn-process li{padding:1rem}.tp-calculation-card{padding:1.15rem}}
|
||||
/* Earn legal drafts: readable long-form content without horizontal overflow. */
|
||||
.tp-legal-document { overflow-wrap: anywhere; }
|
||||
|
||||
/* Keep the Earn device illustration and translated copy inside their grid track. */
|
||||
.tp-device-scene { width: 100%; max-width: 100%; min-width: 0; }
|
||||
.tp-device { max-width: 100%; }
|
||||
@media (max-width: 575.98px) {
|
||||
.tp-earn-hero h1 { font-size: clamp(1.9rem, 10vw, 2.65rem); overflow-wrap: break-word; }
|
||||
.tp-earn-hero-copy,.tp-earn-hero .container > * { min-width: 0; }
|
||||
.tp-device-mobile { right: 0; width: min(8.5rem, 42vw); }
|
||||
.tp-earn-rate dl div { min-width: 0; }
|
||||
.tp-earn-process,.tp-calculation-grid,.tp-safety-grid { grid-template-columns: minmax(0, 1fr); }
|
||||
}
|
||||
.tp-legal-document article { line-height: 1.7; }
|
||||
.tp-legal-section { scroll-margin-top: 1rem; }
|
||||
@media print {
|
||||
.tp-legal-document nav, .tp-legal-document .btn, .tp-topbar { display: none !important; }
|
||||
.tp-legal-document article { width: 100%; max-width: none; }
|
||||
}
|
||||
Reference in New Issue
Block a user