* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
body {
font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
background: #f8fafc;
color: #111827;
line-height: 1.6;
}
.site {
min-height: 100vh;
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
display:flex;
flex-direction:column;
}
/*
Header
*/
.header {
height: 80px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #e5e7eb;
}
.brand {
font-size: 24px;
font-weight: 700;
letter-spacing: -0.03em;
}
.nav {
display: flex;
gap: 28px;
}
.nav a {
color: #374151;
text-decoration: none;
font-size: 15px;
}
.nav a:hover {
color: #111827;
}
/*
Main
*/
.main {
flex: 1;
padding: 10px 0;
}
/*
Footer
*/
.footer {
padding: 30px 0;
border-top: 1px solid #e5e7eb;
color: #6b7280;
font-size: 14px;
}
.site-brand-logo {
width: 160px;
height: auto;
display: block;
}
/*
Responsive
*/
@media (max-width: 640px) {
.site {
padding: 0 18px;
}
.header {
height: auto;
padding: 22px 0;
flex-direction: column;
gap: 18px;
}
.main {
padding: 40px 0;
}
}
.upload-page {
width:100%;
display:flex;
flex-direction:column;
align-items:center;
}
.upload-page .hero {
width:100%;
max-width:100%;
}
.upload-page .upload-card {
width:100%;
max-width:100%;
}
.upload-page .features {
width:100%;
max-width:100%;
grid-template-columns:repeat(3, 1fr);
}
.upload-page .features div {
min-height:100px;
margin-bottom: 25px;
}
.hero {
text-align: center;
max-width: 620px;
margin-bottom: 45px;
}
.hero h1 {
margin: 0 0 16px;
font-size: 44px;
line-height: 1.1;
letter-spacing: -0.04em;
}
.hero p {
margin: 25px;
color: #6b7280;
font-size: 18px;
}
/*
Upload card
*/
.upload-card {
width: 100%;
max-width: 100%;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 18px;
padding: 36px;
box-shadow: 0 10px 30px rgba(0,0,0,0.04);
}
.upload-area {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 190px;
border: 2px dashed #d1d5db;
border-radius: 14px;
cursor: pointer;
text-align: center;
transition: border-color .2s ease;
}
.upload-area:hover {
border-color: #2563eb;
}
.upload-title {
font-size: 18px;
font-weight: 600;
}
.upload-description {
margin-top: 8px;
color: #6b7280;
font-size: 14px;
}
.upload-area input {
margin-top: 20px;
}
/*
Button
*/
button {
width: 100%;
margin-top: 24px;
padding: 14px 20px;
border: none;
border-radius: 10px;
background: #2563eb;
color: white;
font-size: 16px;
font-weight: 600;
cursor: pointer;
}
button:hover {
background: #1d4ed8;
}
/*
Features
*/
.features {
width: 100%;
max-width: 700px;
margin-top: 25px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.features div {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 14px;
padding: 10px;
text-align: center;
}
.features strong {
display: block;
font-size: 15px;
margin-bottom: 8px;
}
.features span {
display: block;
color: #6b7280;
font-size: 14px;
}
@media (max-width: 700px) {
.hero h1 {
font-size: 34px;
}
.features {
grid-template-columns: 1fr;
}
.upload-card {
padding: 22px;
}
}
.upload-area input {
display: none;
}
.file-button {
margin-top: 20px;
padding: 10px 22px;
background: #f3f4f6;
border: 1px solid #d1d5db;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
color: #374151;
cursor: pointer;
}
/*
File page
*/
.file-page {
display:flex;
justify-content:center;
}
.file-card {
width:100%;
max-width:620px;
background:#ffffff;
border:1px solid #e5e7eb;
border-radius:18px;
padding:36px;
box-shadow:0 10px 30px rgba(0,0,0,0.04);
}
.file-header {
margin-bottom:30px;
}
.file-header h1 {
margin:0 0 8px;
font-size:28px;
letter-spacing:-0.03em;
}
.file-header p {
color:#6b7280;
}
.file-info {
display:grid;
gap:15px;
margin-bottom:30px;
}
.file-info div {
display:flex;
justify-content:space-between;
padding:12px 0;
border-bottom:1px solid #f1f5f9;
}
.file-info span {
color:#6b7280;
}
.status-box {
text-align:center;
padding-top:20px;
}
.status-box h2 {
margin-bottom:10px;
}
.status-box p {
color:#6b7280;
margin-bottom:25px;
}
.actions {
display:flex;
gap:15px;
justify-content:center;
}
.primary-button,
.secondary-button {
display:inline-block;
padding:12px 22px;
border-radius:10px;
text-decoration:none;
font-weight:600;
}
.primary-button {
background:#2563eb;
color:white;
}
.secondary-button {
background:#f3f4f6;
color:#374151;
}
.upload-area.dragging {
border-color:#2563eb;
background:#f8fafc;
}
.upload-area input {
display:none;
}
.status-spinner {
width: 32px;
height: 32px;
margin: 0 auto 20px;
border: 3px solid #e5e7eb;
border-top-color: #2563eb;
border-radius: 50%;
animation: filepriv-spin 0.8s linear infinite;
}
@keyframes filepriv-spin {
to {
transform: rotate(360deg);
}
}
/*
Conversion options
*/
.conversion-options {
margin-top: 20px;
}
.conversion-options label {
display: block;
margin-bottom: 8px;
font-size: 14px;
font-weight: 600;
color: #374151;
}
.conversion-options select {
width: 100%;
padding: 13px 16px;
border: 1px solid #d1d5db;
border-radius: 10px;
background: #ffffff;
color: #111827;
font-family: inherit;
font-size: 15px;
cursor: pointer;
outline: none;
appearance: none;
background-image:
linear-gradient(45deg, transparent 50%, #6b7280 50%),
linear-gradient(135deg, #6b7280 50%, transparent 50%);
background-position:
calc(100% - 18px) 50%,
calc(100% - 13px) 50%;
background-size:
5px 5px,
5px 5px;
background-repeat: no-repeat;
padding-right: 42px;
}
.conversion-options select:focus {
border-color: #2563eb;
}
/*
Error page
*/
.error-page {
display: flex;
justify-content: center;
align-items: center;
}
.error-card {
width: 100%;
max-width: 560px;
padding: 40px;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 18px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
text-align: center;
}
.error-icon {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
margin: 0 auto 20px;
border-radius: 50%;
background: #fef2f2;
color: #dc2626;
font-size: 24px;
font-weight: 700;
}
.error-card h1 {
margin: 0;
font-size: 28px;
letter-spacing: -0.03em;
}
.error-card p {
margin: 12px 0 0;
color: #6b7280;
font-size: 15px;
}
.error-card .error-detail {
margin-top: 8px;
font-size: 14px;
}
.error-button {
display: inline-block;
margin-top: 26px;
padding: 12px 22px;
border-radius: 9px;
background: #2563eb;
color: #ffffff;
font-size: 14px;
font-weight: 600;
text-decoration: none;
}
/*
Private Notes
*/
.notes-page {
width: 100%;
display: flex;
justify-content: center;
}
.notes-card {
width: 100%;
max-width: 100%;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 18px;
padding: 36px;
margin-bottom: 35px;
box-shadow: 0 10px 30px rgba(0,0,0,0.04);
}
.notes-header {
margin-bottom: 30px;
}
.notes-header h1 {
margin: 0 0 10px;
font-size: 30px;
letter-spacing: -0.03em;
}
.notes-header p {
color: #6b7280;
}
.notes-card textarea {
width: 100%;
min-height: 180px;
padding: 14px;
border: 1px solid #d1d5db;
border-radius: 10px;
resize: vertical;
font-family: inherit;
font-size: 15px;
}
.notes-card textarea:focus {
outline: none;
border-color: #2563eb;
}
.notes-card select {
width: 100%;
padding: 13px 16px;
border-radius: 10px;
border: 1px solid #d1d5db;
background: #ffffff;
font-family: inherit;
font-size: 15px;
}
.notes-upload {
margin-top: 20px;
}
.notes-upload label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #374151;
}
.notes-upload input {
width: 100%;
}
.notes-button {
width: 100%;
margin-top: 25px;
}
/*
Created link page
*/
.note-link {
padding: 16px;
background: #f8fafc;
border: 1px solid #e5e7eb;
border-radius: 10px;
word-break: break-all;
font-size: 14px;
}
.note-warning {
margin-top: 20px;
padding: 14px;
background: #eff6ff;
border-radius: 10px;
color: #374151;
font-size: 14px;
}
/*
Reading page
*/
.note-content {
padding: 20px;
background: #f8fafc;
border-radius: 12px;
border: 1px solid #e5e7eb;
white-space: pre-wrap;
}
.note-images {
margin-top: 30px;
}
.note-images img {
max-width: 100%;
border-radius: 12px;
border: 1px solid #e5e7eb;
margin-top: 15px;
}
@media(max-width:700px){
.notes-card {
padding: 22px;
}
}
.notes-upload input {
display:none;
}
/*
Metadata Cleaner
*/
.metadata-page {
display:flex;
justify-content:center;
}
.metadata-card {
width:100%;
max-width:620px;
background:#ffffff;
border:1px solid #e5e7eb;
border-radius:18px;
padding:36px;
box-shadow:0 10px 30px rgba(0,0,0,0.04);
}
.metadata-header {
margin-bottom:30px;
}
.metadata-header h1 {
margin:0 0 10px;
font-size:30px;
letter-spacing:-0.03em;
}
.metadata-header p {
color:#6b7280;
}
/*
Steps
*/
.metadata-steps {
display:flex;
flex-direction:column;
gap:16px;
}
.metadata-step {
padding:18px;
border:1px solid #e5e7eb;
border-radius:12px;
background:#f8fafc;
}
.metadata-step strong {
display:block;
font-size:16px;
}
.metadata-step p {
margin:8px 0 0;
color:#6b7280;
font-size:14px;
}
/*
Metadata Cleaner Spinner Fix
*/
.metadata-spinner {
width: 38px;
height: 38px;
margin: 0 auto 18px;
border: 3px solid #e5e7eb;
border-top-color: #2563eb;
border-radius: 50%;
animation: filepriv-spin 0.8s linear infinite;
}
.metadata-step {
text-align: left;
}
.metadata-step strong {
color: #111827;
}
.metadata-result {
margin-top: 20px;
}
.metadata-result p {
color: #6b7280;
}
.metadata-result ul {
margin-top: 18px;
}
.metadata-result li {
margin-bottom: 8px;
}
/*
Result
*/
.metadata-result {
margin-top:25px;
padding:22px;
background:#f8fafc;
border:1px solid #e5e7eb;
border-radius:12px;
}
.metadata-result h2 {
margin-top:0;
}
.metadata-result ul {
padding-left:20px;
color:#374151;
}
.metadata-result li {
margin-bottom:8px;
}
@media(max-width:700px){
.metadata-card {
padding:22px;
}
}
/*
Conversion information
*/
.conversion-info {
width:100%;
max-width:800px;
margin-top:70px;
}
.conversion-info-header {
text-align:center;
margin-bottom:35px;
}
.conversion-info-header h2 {
margin:0 0 12px;
font-size:30px;
letter-spacing:-0.03em;
}
.conversion-info-header p {
color:#6b7280;
font-size:16px;
}
.conversion-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
}
.conversion-box {
background:#ffffff;
border:1px solid #e5e7eb;
border-radius:14px;
padding:24px;
}
.conversion-box h3 {
margin-top:0;
margin-bottom:10px;
font-size:18px;
}
.conversion-box p {
color:#6b7280;
font-size:14px;
min-height:70px;
}
.format-list {
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:18px;
}
.format-list span {
padding:6px 10px;
background:#f3f4f6;
border-radius:8px;
font-size:13px;
font-weight:600;
color:#374151;
}
@media(max-width:700px){
.conversion-grid {
grid-template-columns:1fr;
}
}
/*
Conversion landing page tightening
*/
.upload-page .hero {
width:100%;
max-width:1200px;
margin-bottom: -25px;
}
.upload-page .hero h1 {
font-size: 38px;
margin-bottom: 12px;
}
.upload-page .hero p {
font-size: 16px;
}
.conversion-info {
width:100%;
max-width:760px;
margin-top:40px;
}
.conversion-info-header {
text-align:center;
margin-bottom:25px;
}
.conversion-info-header h2 {
margin:0 0 10px;
font-size:28px;
letter-spacing:-0.03em;
}
.conversion-info-header p {
margin:0;
color:#6b7280;
font-size:15px;
}
.conversion-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
}
.conversion-box {
background:#ffffff;
border:1px solid #e5e7eb;
border-radius:14px;
padding:22px;
}
.conversion-box h3 {
margin:0 0 10px;
font-size:18px;
}
.conversion-box p {
margin:0 0 18px;
color:#6b7280;
font-size:14px;
}
.format-list {
display:flex;
flex-wrap:wrap;
gap:8px;
}
.format-list span {
padding:5px 10px;
background:#f3f4f6;
border-radius:8px;
font-size:13px;
font-weight:600;
color:#374151;
}
@media(max-width:700px){
.conversion-grid {
grid-template-columns:1fr;
}
}
.info-section {
width:100%;
max-width:620px;
margin-top:45px;
text-align:center;
}
.info-section h2 {
margin-bottom:12px;
font-size:28px;
letter-spacing:-0.03em;
}
.info-section p {
color:#6b7280;
font-size:15px;
}
.upload-page .features:last-of-type {
margin-top: -10px;
}
.display-logo {
width: 100px;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
}