manan77709's picture
feat: redesign application layout and interface
692d6f0
Raw
History Blame Contribute Delete
19.2 kB
/* =======================================================
Layout
======================================================= */
.app {
min-height: 100vh;
display: flex;
flex-direction: column;
background: transparent;
}
.main {
flex: 1;
width: min(1280px, 94%);
margin: 0 auto;
padding: calc(var(--header-h) + 64px) 32px 96px;
}
@media (max-width:768px){
.main{
width:100%;
padding:calc(var(--header-h) + 40px) 20px 72px;
}
}
/* =======================================================
Buttons
======================================================= */
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
padding:12px 22px;
border-radius:14px;
border:1px solid transparent;
font-size:14px;
font-weight:600;
cursor:pointer;
transition:
background .25s,
color .25s,
border-color .25s,
transform .25s,
box-shadow .25s;
white-space:nowrap;
}
.btn:disabled{
opacity:.45;
cursor:not-allowed;
}
.btn:hover:not(:disabled){
transform:translateY(-2px);
}
.btn-sm{
padding:9px 16px;
font-size:13px;
}
.btn-primary{
background:var(--accent);
color:white;
border-color:var(--accent);
}
.btn-primary:hover:not(:disabled){
background:var(--accent-bright);
border-color:var(--accent-bright);
box-shadow:0 18px 35px rgba(77,120,163,.28);
}
.btn-outline{
background:transparent;
color:var(--text);
border-color:var(--border-strong);
}
.btn-outline:hover:not(:disabled){
background:var(--accent-dim);
border-color:var(--accent);
color:white;
}
.btn-ghost{
background:none;
border:none;
color:var(--text-muted);
}
.btn-ghost:hover:not(:disabled){
background:var(--social-bg);
color:white;
}
.btn-chip{
padding:8px 14px;
border-radius:999px;
border:1px solid var(--border);
background:var(--social-bg);
color:var(--text-muted);
font-size:12px;
transition:.25s;
}
.btn-chip:hover{
border-color:var(--accent-border);
background:var(--accent-dim);
color:white;
}
/* =======================================================
Header
======================================================= */
.site-header{
position:fixed;
inset:0 0 auto 0;
z-index:100;
height:var(--header-h);
background:rgba(16,18,20,.82);
backdrop-filter:blur(18px);
border-bottom:1px solid rgba(255,255,255,.06);
}
.site-header__inner{
width:min(1320px,94%);
height:100%;
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
}
.site-logo{
display:flex;
align-items:center;
gap:14px;
border:none;
background:none;
cursor:pointer;
}
.site-logo__mark{
width:42px;
height:42px;
display:grid;
place-items:center;
border-radius:14px;
background:linear-gradient(
135deg,
var(--accent-bg),
rgba(255,255,255,.03)
);
border:1px solid var(--accent-border);
color:var(--accent-bright);
transition:.25s;
}
.site-logo:hover .site-logo__mark{
transform:rotate(-6deg) scale(1.05);
}
.site-logo__text strong{
font-size:20px;
font-family:var(--font-display);
font-weight:400;
color:white;
}
.site-logo__text small{
color:var(--text-faint);
font-size:12px;
}
.site-nav{
display:flex;
gap:6px;
align-items:center;
}
/* =======================================================
Hero
======================================================= */
.hero-section{
margin-bottom:80px;
}
.hero-section__content{
max-width:920px;
margin-bottom:42px;
}
.hero-section__eyebrow{
font-size:13px;
letter-spacing:.18em;
text-transform:uppercase;
font-weight:700;
color:var(--accent);
margin-bottom:22px;
}
.hero-section__title{
font-family:var(--font-display);
font-size:clamp(3rem,6vw,5rem);
line-height:1.02;
letter-spacing:-.05em;
max-width:900px;
color:white;
margin-bottom:24px;
}
.hero-section__desc{
font-size:19px;
line-height:1.85;
max-width:720px;
color:var(--text-muted);
}
/* =======================================================
Verify Card
======================================================= */
.verify-card{
background:linear-gradient(
180deg,
rgba(255,255,255,.03),
rgba(255,255,255,.015)
);
border:1px solid var(--border);
border-radius:28px;
padding:34px;
backdrop-filter:blur(12px);
box-shadow:var(--shadow);
}
.verify-card__label{
font-size:12px;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--text-muted);
margin-bottom:12px;
}
.verify-card__input{
width:100%;
min-height:180px;
background:var(--bg-input);
border:1px solid var(--border);
border-radius:18px;
padding:20px;
color:white;
font-size:16px;
line-height:1.75;
resize:none;
transition:.25s;
}
.verify-card__input::placeholder{
color:var(--text-faint);
}
.verify-card__input:focus{
outline:none;
border-color:var(--accent);
box-shadow:0 0 0 4px var(--accent-bg);
}
.sample-claims{
margin-top:18px;
}
.sample-claims__list{
display:flex;
flex-wrap:wrap;
gap:10px;
}
.verify-card__actions{
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:18px;
margin-top:26px;
padding-top:22px;
border-top:1px solid var(--border);
}
/* =======================================================
Error
======================================================= */
.error-banner{
background:linear-gradient(
135deg,
rgba(188,100,100,.12),
rgba(188,100,100,.04)
);
border:1px solid var(--danger-border);
border-left:4px solid var(--danger);
border-radius:18px;
padding:18px 22px;
color:#ffbcbc;
font-size:15px;
margin-bottom:28px;
box-shadow:var(--shadow);
}
/* =======================================================
Results
======================================================= */
.results{
display:flex;
flex-direction:column;
gap:24px;
margin-bottom:80px;
}
.results-card{
background:linear-gradient(
180deg,
rgba(255,255,255,.03),
rgba(255,255,255,.015)
);
border:1px solid var(--border);
border-radius:28px;
padding:34px;
box-shadow:var(--shadow);
}
.results-card__header{
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:24px;
margin-bottom:28px;
}
.results-card__row{
display:flex;
justify-content:space-between;
align-items:center;
gap:18px;
margin-bottom:18px;
}
.results-stats{
display:flex;
gap:36px;
}
.results-stat{
display:flex;
flex-direction:column;
align-items:flex-end;
}
.results-stat__value{
font-size:2rem;
color:white;
font-family:var(--font-display);
line-height:1;
}
.results-stat__label{
margin-top:6px;
font-size:11px;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--text-faint);
}
/* =======================================================
Verdict Badge
======================================================= */
.verdict-badge{
display:inline-flex;
align-items:center;
gap:10px;
padding:10px 18px;
border-radius:999px;
font-size:14px;
font-weight:700;
border:1px solid;
}
.verdict--success{
background:var(--success-bg);
border-color:var(--success-border);
color:#84d39f;
}
.verdict--danger{
background:var(--danger-bg);
border-color:var(--danger-border);
color:#ffb0b0;
}
.verdict--warning{
background:var(--warning-bg);
border-color:var(--warning-border);
color:#ffd27f;
}
.verdict--neutral{
background:var(--neutral-bg);
border-color:var(--neutral-border);
color:#c0c7cf;
}
/* =======================================================
Cache
======================================================= */
.results-cache{
display:inline-flex;
align-items:center;
gap:8px;
color:var(--accent);
margin-bottom:18px;
font-size:13px;
}
/* =======================================================
Evidence Blocks
======================================================= */
.results-block{
margin-bottom:22px;
}
.results-block:last-child{
margin-bottom:0;
}
.results-block--accent{
background:linear-gradient(
180deg,
rgba(77,120,163,.12),
rgba(77,120,163,.04)
);
border:1px solid var(--accent-border);
border-radius:18px;
padding:18px;
}
.results-block__heading{
display:flex;
align-items:center;
gap:10px;
margin-bottom:12px;
font-size:12px;
text-transform:uppercase;
letter-spacing:.1em;
font-weight:700;
color:var(--text-muted);
}
.results-block__text{
margin:0;
color:var(--text);
line-height:1.8;
}
.results-block__text--muted{
color:var(--text-muted);
font-size:15px;
}
.results-list{
margin:0;
padding-left:20px;
color:var(--text-muted);
}
.results-list li{
margin-bottom:8px;
}
/* =======================================================
Takeaway
======================================================= */
.results-takeaway{
display:flex;
gap:14px;
align-items:flex-start;
background:var(--bg-elevated);
border:1px solid var(--border);
border-radius:18px;
padding:18px;
}
.results-takeaway strong{
color:var(--accent);
}
.results-takeaway p{
margin:0;
color:var(--text-muted);
line-height:1.7;
}
/* =======================================================
Citations
======================================================= */
.citations{
margin-top:28px;
padding-top:20px;
border-top:1px solid var(--border);
}
.citations__title{
margin-bottom:14px;
font-size:12px;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--text-faint);
}
.citation-row{
margin-bottom:12px;
}
.citation-link{
color:var(--accent-bright);
text-decoration:none;
transition:.25s;
}
.citation-link:hover{
color:white;
text-decoration:underline;
}
.citation-text{
color:var(--text-muted);
margin-top:4px;
font-size:14px;
}
/* =======================================================
Quality Badge
======================================================= */
.quality-badge{
display:inline-flex;
align-items:center;
padding:6px 14px;
border-radius:999px;
font-size:11px;
letter-spacing:.08em;
text-transform:uppercase;
font-weight:700;
}
.quality-badge--high{
background:var(--success-bg);
border:1px solid var(--success-border);
color:#84d39f;
}
.quality-badge--medium{
background:var(--warning-bg);
border:1px solid var(--warning-border);
color:#ffd27f;
}
.quality-badge--low{
background:var(--danger-bg);
border:1px solid var(--danger-border);
color:#ffb0b0;
}
/* =======================================================
Papers
======================================================= */
.papers-list{
display:flex;
flex-direction:column;
gap:16px;
margin-top:28px;
}
.paper-item{
background:rgba(255,255,255,.015);
border:1px solid var(--border);
border-radius:20px;
overflow:hidden;
transition:.25s;
}
.paper-item:hover{
border-color:var(--accent-border);
transform:translateY(-2px);
}
.paper-item__toggle{
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 20px;
background:none;
border:none;
color:inherit;
}
.paper-item__body{
padding:20px;
border-top:1px solid var(--border);
}
.paper-metrics{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px;
margin-bottom:18px;
}
.paper-metric{
background:var(--bg-elevated);
border-radius:14px;
padding:14px;
text-align:center;
}
.paper-metric span{
display:block;
font-size:11px;
color:var(--text-faint);
text-transform:uppercase;
margin-bottom:6px;
}
.paper-metric strong{
color:white;
}
.paper-item__summary{
color:var(--text-muted);
line-height:1.8;
}
.paper-item__journal{
margin-top:10px;
color:var(--text-faint);
font-size:13px;
}
/* =======================================================
Sections
======================================================= */
.section{
padding:90px 0;
border-top:1px solid var(--border);
}
.section--last{
padding-bottom:60px;
}
.section__header{
margin-bottom:48px;
}
.section__eyebrow{
color:var(--accent);
font-size:13px;
letter-spacing:.16em;
text-transform:uppercase;
font-weight:700;
margin-bottom:18px;
}
.section__title{
font-family:var(--font-display);
font-size:clamp(2rem,5vw,3.3rem);
line-height:1.1;
color:white;
margin-bottom:18px;
}
.section__desc{
max-width:760px;
color:var(--text-muted);
font-size:18px;
line-height:1.85;
}
/* =======================================================
About
======================================================= */
.steps-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:24px;
}
.step-card{
background:linear-gradient(
180deg,
rgba(255,255,255,.03),
rgba(255,255,255,.015)
);
border:1px solid var(--border);
border-radius:24px;
padding:28px;
transition:.3s;
box-shadow:var(--shadow);
}
.step-card:hover{
transform:translateY(-6px);
border-color:var(--accent-border);
}
.step-card__icon{
width:52px;
height:52px;
border-radius:16px;
display:grid;
place-items:center;
background:var(--accent-bg);
border:1px solid var(--accent-border);
color:var(--accent);
margin-bottom:20px;
}
.step-card h3{
margin:0 0 12px;
font-size:20px;
color:white;
}
.step-card p{
margin:0;
color:var(--text-muted);
line-height:1.8;
}
/* =======================================================
Feature Strip
======================================================= */
.feature-strip{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-top:30px;
}
.feature-strip__item{
display:flex;
align-items:center;
gap:8px;
padding:12px 18px;
border-radius:999px;
border:1px solid var(--border);
background:var(--social-bg);
transition:.25s;
}
.feature-strip__item:hover{
background:var(--accent-dim);
border-color:var(--accent-border);
}
/* =======================================================
Founder
======================================================= */
.founder-card{
display:flex;
gap:28px;
background:linear-gradient(
180deg,
rgba(255,255,255,.03),
rgba(255,255,255,.015)
);
border:1px solid var(--border);
border-radius:28px;
padding:34px;
box-shadow:var(--shadow);
}
@media(max-width:760px){
.founder-card{
flex-direction:column;
}
}
.founder-card__avatar{
width:84px;
height:84px;
border-radius:22px;
display:grid;
place-items:center;
background:var(--accent-bg);
border:1px solid var(--accent-border);
color:var(--accent);
font-size:28px;
font-family:var(--font-display);
}
.founder-card h3{
margin:0;
color:white;
font-size:2rem;
}
.founder-card__role{
margin:8px 0 18px;
color:var(--accent);
}
.founder-card__bio{
color:var(--text-muted);
line-height:1.9;
}
.founder-card__actions{
display:flex;
gap:12px;
flex-wrap:wrap;
}
/* =======================================================
Contact
======================================================= */
.contact-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:24px;
}
.contact-card{
background:linear-gradient(
180deg,
rgba(255,255,255,.03),
rgba(255,255,255,.015)
);
border:1px solid var(--border);
border-radius:22px;
padding:26px;
transition:.3s;
box-shadow:var(--shadow);
}
.contact-card:hover{
transform:translateY(-5px);
border-color:var(--accent-border);
}
.contact-card__icon{
width:48px;
height:48px;
border-radius:14px;
display:grid;
place-items:center;
background:var(--accent-bg);
color:var(--accent);
margin-bottom:20px;
}
.contact-card__label{
font-size:12px;
text-transform:uppercase;
letter-spacing:.12em;
color:var(--text-faint);
}
.contact-card__value{
font-size:20px;
color:white;
margin:10px 0;
}
.contact-card__desc{
color:var(--text-muted);
line-height:1.7;
}
/* =======================================================
Footer
======================================================= */
.site-footer{
margin-top:90px;
border-top:1px solid var(--border);
background:rgba(255,255,255,.02);
}
.site-footer__inner{
width:min(1280px,94%);
margin:auto;
padding:50px 24px;
}
.site-footer__brand{
display:flex;
align-items:center;
gap:16px;
margin-bottom:28px;
}
.site-footer__name{
color:white;
font-family:var(--font-display);
font-size:26px;
}
.site-footer__tagline{
color:var(--text-muted);
}
.site-footer__links{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-bottom:28px;
}
.site-footer__copy{
padding-top:24px;
border-top:1px solid var(--border);
color:var(--text-faint);
font-size:13px;
}
/* =======================================================
Scrollbar
======================================================= */
::-webkit-scrollbar{
width:10px;
}
::-webkit-scrollbar-track{
background:var(--bg);
}
::-webkit-scrollbar-thumb{
background:rgba(255,255,255,.12);
border-radius:999px;
}
::-webkit-scrollbar-thumb:hover{
background:var(--accent);
}
/* =======================================================
Animations
======================================================= */
.verify-card,
.results-card,
.step-card,
.paper-item,
.contact-card,
.founder-card{
animation:fadeUp .6s ease both;
}
@keyframes fadeUp{
from{
opacity:0;
transform:translateY(20px);
}
to{
opacity:1;
transform:translateY(0);
}
}
/* =======================================================
Mobile
======================================================= */
@media(max-width:768px){
.results-card,
.verify-card,
.contact-card,
.step-card,
.founder-card{
padding:22px;
}
.hero-section__title{
font-size:3rem;
}
.hero-section__desc{
font-size:17px;
}
.results-stats{
gap:18px;
}
.paper-metrics{
grid-template-columns:1fr;
}
}