Spaces:
Running
Running
| /* ========================================================== | |
| ISPG PREMIUM UI CSS (FINAL CLEAN 100%) | |
| Project: Intelligent Scientific Poster Generator (ISPG) | |
| Supported Pages: | |
| - pages/index.html | |
| - pages/upload.html | |
| - pages/processing.html | |
| - pages/template.html | |
| - pages/poster_preview.html | |
| - pages/edit_poster.html | |
| Notes: | |
| - Posters (posterL1-L6.html) use their own inline CSS. | |
| - This file handles all UI pages. | |
| ========================================================== */ | |
| /* ========================================================== | |
| GOOGLE FONT | |
| ========================================================== */ | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap'); | |
| /* ========================================================== | |
| ROOT VARIABLES (GLOBAL THEME) — now Luminara Academic | |
| ========================================================== */ | |
| :root { | |
| --accent: #C59B3F; | |
| --bg-primary: #F8F9FC; | |
| --bg-secondary: #F1F4F9; | |
| --bg-card: #ffffff; | |
| --text-primary: #1A2332; | |
| --text-secondary: #54657E; | |
| --text-muted: #93A2B7; | |
| --border: #DCE3EC; | |
| --shadow-soft: 0 4px 12px rgba(27, 94, 132, 0.08), 0 1px 3px rgba(0,0,0,0.02); | |
| --shadow-strong: 0 12px 28px rgba(27, 94, 132, 0.12), 0 3px 10px rgba(0,0,0,0.03); | |
| --nav-bg: rgba(255, 255, 255, 0.85); | |
| --nav-link: #334155; | |
| --nav-hover: #1B5E84; | |
| --radius-lg: 22px; | |
| --radius-md: 14px; | |
| --radius-sm: 8px; | |
| --font-main: "Inter", sans-serif; | |
| } | |
| /* ========================================================== | |
| RESET & GLOBAL BASE | |
| ========================================================== */ | |
| * { | |
| box-sizing: border-box; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| margin: 0; | |
| font-family: var(--font-main); | |
| line-height: 1.6; | |
| overflow-x: hidden; | |
| background: linear-gradient(135deg, var(--bg-primary), var(--bg-secondary)); | |
| color: var(--text-primary); | |
| } | |
| /* Container layout */ | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 22px; | |
| } | |
| p { | |
| color: var(--text-secondary); | |
| font-size: 1.05rem; | |
| } | |
| h1, h2, h3, h4 { | |
| color: var(--text-primary); | |
| } | |
| /* ========================================================== | |
| GLOBAL BUTTONS | |
| ========================================================== */ | |
| .btn-cta { | |
| background: var(--accent); | |
| color: white; | |
| padding: 14px 35px; | |
| border-radius: 14px; | |
| text-decoration: none; | |
| font-weight: 900; | |
| transition: 0.25s ease; | |
| border: none; | |
| cursor: pointer; | |
| } | |
| .btn-cta:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 0 25px rgba(197, 155, 63, 0.35); | |
| } | |
| .btn-outline { | |
| border: 1px solid var(--border); | |
| color: var(--text-primary); | |
| padding: 14px 35px; | |
| border-radius: 14px; | |
| text-decoration: none; | |
| font-weight: 900; | |
| transition: 0.25s ease; | |
| background: white; | |
| cursor: pointer; | |
| } | |
| .btn-outline:hover { | |
| transform: scale(1.05); | |
| border-color: rgba(197, 155, 63, 0.4); | |
| box-shadow: var(--shadow-soft); | |
| } | |
| /* ========================================================== | |
| SECTION TITLES (INDEX PAGE GLOBAL) | |
| ========================================================== */ | |
| .section-title { | |
| font-size: 2.6rem; | |
| font-weight: 950; | |
| text-align: center; | |
| margin-bottom: 18px; | |
| } | |
| .section-title::after { | |
| content: ""; | |
| display: block; | |
| width: 70px; | |
| height: 4px; | |
| background: var(--accent); | |
| margin: 15px auto 0; | |
| border-radius: 10px; | |
| box-shadow: 0 0 12px rgba(197, 155, 63, 0.35); | |
| } | |
| .section-subtitle { | |
| text-align: center; | |
| color: var(--text-muted); | |
| margin-bottom: 60px; | |
| font-size: 1.1rem; | |
| } | |
| /* ========================================================== | |
| NAVBAR (ALL PAGES) | |
| ========================================================== */ | |
| .navbar { | |
| position: fixed; | |
| top: 0; | |
| width: 100%; | |
| background: var(--nav-bg); | |
| backdrop-filter: blur(18px); | |
| padding: 16px 0; | |
| z-index: 1000; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .nav-flex { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| font-size: 1.8rem; | |
| font-weight: 900; | |
| color: var(--text-primary); | |
| letter-spacing: -1px; | |
| text-decoration: none; | |
| } | |
| .logo span { | |
| color: var(--accent); | |
| } | |
| .nav-links { | |
| list-style: none; | |
| display: flex; | |
| gap: 25px; | |
| align-items: center; | |
| } | |
| .nav-links a { | |
| text-decoration: none; | |
| color: var(--nav-link); | |
| font-weight: 700; | |
| transition: 0.3s; | |
| } | |
| .nav-links a:hover { | |
| color: var(--nav-hover); | |
| } | |
| .nav-links a i { | |
| font-size: 1.2rem; | |
| color: var(--nav-link); | |
| transition: 0.3s; | |
| } | |
| .nav-links a:hover i { | |
| color: var(--accent); | |
| transform: translateY(-2px); | |
| } | |
| /* ========================================================== | |
| GLOBAL BACKGROUND GLOW (DECORATION) | |
| ========================================================== */ | |
| .bg-glow { | |
| position: absolute; | |
| top: 20%; | |
| right: -10%; | |
| width: 750px; | |
| height: 480px; | |
| background: radial-gradient(circle, rgba(197, 155, 63, 0.25) 0%, transparent 70%); | |
| filter: blur(120px); | |
| z-index: -1; | |
| transform: rotate(-20deg); | |
| } | |
| /* ========================================================== | |
| INDEX PAGE (pages/index.html) | |
| ========================================================== */ | |
| /* ---------- HERO (two‑column layout) ---------- */ | |
| .hero { | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| position: relative; | |
| padding-top: 150px; | |
| padding-bottom: 100px; | |
| background: linear-gradient(160deg, #ffffff 0%, #f1f4f9 100%); | |
| overflow: hidden; | |
| } | |
| /* Soft gold radial glow behind hero */ | |
| .hero::before { | |
| content: ""; | |
| position: absolute; | |
| top: -200px; | |
| right: -150px; | |
| width: 700px; | |
| height: 700px; | |
| background: radial-gradient(circle, rgba(197,155,63,0.12) 0%, transparent 70%); | |
| border-radius: 50%; | |
| z-index: 0; | |
| } | |
| /* Two‑column grid */ | |
| .hero .container { | |
| position: relative; | |
| z-index: 2; | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 60px; | |
| align-items: center; | |
| } | |
| /* Left content */ | |
| .hero-content { | |
| max-width: 100%; | |
| } | |
| .hero-content h1 { | |
| font-family: 'Playfair Display', Georgia, serif; | |
| font-size: clamp(2.8rem, 5vw, 4.2rem); | |
| font-weight: 800; | |
| line-height: 1.1; | |
| letter-spacing: -1px; | |
| color: var(--text-primary); | |
| margin-bottom: 22px; | |
| } | |
| /* Gradient text for "Stunning Scientific Posters" */ | |
| .hero-content h1 .highlight { | |
| /* Fallback solid colour (deep teal) */ | |
| color: var(--primary, #1B5E84); | |
| /* Gradient text for modern browsers */ | |
| background: linear-gradient(135deg, var(--primary, #1B5E84), var(--secondary, #5B8C5A)); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| /* Prevents the gradient from disappearing if something overrides */ | |
| display: inline-block; | |
| } | |
| .hero-content p { | |
| font-size: 1.15rem; | |
| margin: 24px 0 40px; | |
| max-width: 90%; | |
| color: var(--text-secondary); | |
| } | |
| .hero-btns { | |
| display: flex; | |
| gap: 16px; | |
| flex-wrap: wrap; | |
| } | |
| /* Primary CTA – Gold gradient button */ | |
| .btn-cta { | |
| background: var(--gradient-gold); /* from :root */ | |
| color: #1A2332; | |
| padding: 16px 40px; | |
| border-radius: 50px; | |
| font-weight: 700; | |
| letter-spacing: 0.3px; | |
| box-shadow: 0 15px 30px rgba(197,155,63,0.25); | |
| transition: all 0.3s ease; | |
| border: none; | |
| cursor: pointer; | |
| text-decoration: none; | |
| display: inline-block; | |
| } | |
| .btn-cta:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 22px 40px rgba(197,155,63,0.35); | |
| } | |
| /* Secondary outline button */ | |
| .btn-outline { | |
| border: 2px solid var(--border); | |
| background: transparent; | |
| color: var(--text-primary); | |
| padding: 16px 40px; | |
| border-radius: 50px; | |
| font-weight: 700; | |
| transition: 0.3s ease; | |
| text-decoration: none; | |
| display: inline-block; | |
| cursor: pointer; | |
| } | |
| .btn-outline:hover { | |
| border-color: var(--accent); | |
| background: rgba(197,155,63,0.05); | |
| } | |
| /* ---------- Right side decorative poster mockup ---------- */ | |
| .hero-visual { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| position: relative; | |
| } | |
| .poster-mockup { | |
| width: 90%; | |
| max-width: 420px; | |
| aspect-ratio: 3 / 4; /* mimics A4 ratio */ | |
| background: white; | |
| border-radius: var(--radius-lg); | |
| box-shadow: var(--shadow-strong); | |
| padding: 24px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| transform: rotate(2deg); | |
| transition: transform 0.4s ease; | |
| } | |
| .poster-mockup:hover { | |
| transform: rotate(0deg) scale(1.03); | |
| } | |
| /* Dummy bars inside the mockup */ | |
| .mock-title { | |
| width: 60%; | |
| height: 14px; | |
| background: linear-gradient(90deg, var(--primary), var(--secondary)); | |
| border-radius: 10px; | |
| } | |
| .mock-line { | |
| height: 8px; | |
| background: #E2E8F0; | |
| border-radius: 10px; | |
| } | |
| .mock-line.short { width: 80%; } | |
| .mock-line.medium { width: 50%; } | |
| .mock-block { | |
| height: 40px; | |
| background: rgba(91,140,90,0.1); /* soft sage tint */ | |
| border-radius: 10px; | |
| margin-top: 8px; | |
| } | |
| /* Floating badge */ | |
| .float-badge { | |
| position: absolute; | |
| bottom: -20px; | |
| left: -10px; | |
| background: white; | |
| border-radius: 30px; | |
| padding: 10px 24px; | |
| box-shadow: var(--shadow-soft); | |
| font-weight: 700; | |
| color: var(--primary); | |
| font-size: 0.9rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| animation: floatBadge 3s ease-in-out infinite; | |
| } | |
| @keyframes floatBadge { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-8px); } | |
| } | |
| /* ---------- PROCESS & FEATURES SECTIONS ---------- */ | |
| .process-section { | |
| padding: 100px 0; | |
| border-top: 1px solid rgba(15, 23, 42, 0.08); | |
| position: relative; | |
| } | |
| /* Section titles now use serif for elegance */ | |
| .section-title { | |
| font-family: 'Playfair Display', serif; | |
| font-size: 2.8rem; | |
| font-weight: 700; | |
| text-align: center; | |
| margin-bottom: 18px; | |
| } | |
| .section-title::after { | |
| content: ""; | |
| display: block; | |
| width: 80px; | |
| height: 4px; | |
| background: var(--gradient-gold); | |
| margin: 15px auto 0; | |
| border-radius: 10px; | |
| } | |
| .section-subtitle { | |
| text-align: center; | |
| color: var(--text-muted); | |
| margin-bottom: 60px; | |
| font-size: 1.1rem; | |
| } | |
| .process-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 28px; | |
| } | |
| /* Cards with left accent bar */ | |
| .step-card { | |
| background: white; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-lg); | |
| padding: 45px 35px; | |
| transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1); | |
| box-shadow: var(--shadow-soft); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .step-card::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 6px; | |
| height: 100%; | |
| background: var(--gradient-accent); | |
| border-radius: 10px 0 0 10px; | |
| transition: width 0.3s ease; | |
| } | |
| .step-card:hover::before { | |
| width: 10px; | |
| } | |
| .step-card:hover { | |
| transform: translateY(-12px); | |
| border-color: var(--accent); | |
| box-shadow: var(--shadow-strong); | |
| } | |
| /* Icon boxes */ | |
| .icon-box { | |
| width: 60px; | |
| height: 60px; | |
| background: linear-gradient(135deg, var(--primary-soft), #ffffff); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 18px; | |
| font-size: 2rem; | |
| color: var(--primary); | |
| margin-bottom: 28px; | |
| transition: 0.3s; | |
| } | |
| .step-card:hover .icon-box { | |
| background: var(--gradient-accent); | |
| color: white; | |
| transform: scale(1.1) rotate(-4deg); | |
| box-shadow: 0 10px 25px rgba(27,94,132,0.25); | |
| } | |
| .step-card h3 { | |
| font-size: 1.4rem; | |
| margin-bottom: 15px; | |
| font-weight: 950; | |
| } | |
| /* ---------- SAMPLES / SHOWCASE ---------- */ | |
| .samples-section { | |
| padding: 100px 0; | |
| background: rgba(255,255,255,0.7); | |
| backdrop-filter: blur(20px); | |
| border-top: 1px solid rgba(15, 23, 42, 0.08); | |
| } | |
| .poster-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 35px; | |
| } | |
| /* Premium gradient border on poster items */ | |
| .poster-item { | |
| position: relative; | |
| border-radius: var(--radius-lg); | |
| overflow: hidden; | |
| width: 100%; | |
| aspect-ratio: 594 / 841; | |
| background: linear-gradient(white, white) padding-box, | |
| linear-gradient(135deg, var(--accent), var(--primary)) border-box; | |
| border: 2px solid transparent; | |
| transition: all 0.4s ease; | |
| box-shadow: var(--shadow-soft); | |
| } | |
| .poster-item img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| object-position: top; | |
| transition: 0.4s; | |
| } | |
| .poster-item:hover { | |
| transform: translateY(-14px) scale(1.02); | |
| box-shadow: 0 30px 45px rgba(27,94,132,0.15); | |
| } | |
| .poster-item:hover img { | |
| transform: scale(1.06); | |
| } | |
| .poster-overlay { | |
| position: absolute; | |
| inset: 0; | |
| background: linear-gradient(transparent 50%, rgba(15,23,42,0.9)); | |
| display: flex; | |
| align-items: flex-end; | |
| padding: 28px; | |
| opacity: 0; | |
| transition: 0.35s; | |
| color: white; | |
| } | |
| .poster-overlay span { | |
| font-size: 1.1rem; | |
| font-weight: 900; | |
| transform: translateY(15px); | |
| transition: 0.35s; | |
| } | |
| .poster-item:hover .poster-overlay { | |
| opacity: 1; | |
| } | |
| .poster-item:hover .poster-overlay span { | |
| transform: translateY(0); | |
| } | |
| /* ---------- FOOTER (polished) ---------- */ | |
| .footer { | |
| background: white; | |
| border-top: 1px solid var(--border); | |
| padding: 50px 0 30px; | |
| text-align: center; | |
| } | |
| .footer .project-title { | |
| font-weight: 800; | |
| font-size: 1.3rem; | |
| color: var(--primary); | |
| margin-bottom: 8px; | |
| } | |
| .footer .academic-info, | |
| .footer .university { | |
| color: var(--text-secondary); | |
| font-size: 0.95rem; | |
| margin-bottom: 4px; | |
| } | |
| .footer-divider { | |
| height: 2px; | |
| background: var(--gradient-gold); | |
| width: 80px; | |
| margin: 20px auto; | |
| border-radius: 5px; | |
| } | |
| .footer .copyright { | |
| color: var(--text-muted); | |
| font-size: 0.85rem; | |
| margin-top: 10px; | |
| } | |
| /* ========================================================== | |
| UPLOAD PAGE (pages/upload.html) | |
| ========================================================== */ | |
| /* Lock the page height & prevent scrolling */ | |
| body.upload-page { | |
| height: 100vh; | |
| overflow: hidden; | |
| } | |
| /* Make the main container fill the available space (below fixed navbar) */ | |
| body.upload-page .upload-container { | |
| height: calc(100vh - var(--header-height, 72px)); /* adjust 72px if your navbar is taller */ | |
| margin: 0 auto; /* center horizontally */ | |
| padding: 0 22px; /* horizontal padding only */ | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| text-align: center; | |
| position: relative; | |
| max-width: 1200px; /* your global container width */ | |
| } | |
| /* Prevent background glow from pushing layout */ | |
| body.upload-page .bg-glow { | |
| position: fixed; | |
| top: 0; | |
| right: 0; | |
| z-index: -1; | |
| } | |
| /* ---------- Step Indicator (top) ---------- */ | |
| .step-indicator { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| margin-bottom: 30px; | |
| font-weight: 700; | |
| } | |
| .step-indicator .step { | |
| width: 36px; | |
| height: 36px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 0.9rem; | |
| background: white; | |
| border: 2px solid var(--border); | |
| color: var(--text-muted); | |
| transition: all 0.3s ease; | |
| } | |
| .step-indicator .step.active { | |
| background: var(--gradient-accent); | |
| color: white; | |
| border-color: var(--primary); | |
| box-shadow: 0 0 0 4px rgba(27,94,132,0.1); | |
| } | |
| .step-indicator .step-connector { | |
| width: 40px; | |
| height: 2px; | |
| background: var(--border); | |
| border-radius: 2px; | |
| } | |
| /* ---------- Upload Header ---------- */ | |
| .upload-header { | |
| margin-bottom: 28px; | |
| max-width: 750px; | |
| } | |
| /* Gradient headline – visible even without custom properties */ | |
| .upload-title { | |
| font-family: 'Playfair Display', serif; | |
| font-size: clamp(2.2rem, 4vw, 2.8rem); | |
| font-weight: 700; | |
| margin-bottom: 10px; | |
| background: linear-gradient(135deg, var(--primary, #1B5E84), var(--secondary, #5B8C5A)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| color: var(--primary, #1B5E84); /* fallback solid colour */ | |
| display: inline-block; /* helps multi-line rendering */ | |
| } | |
| .upload-subtitle { | |
| font-size: 1.05rem; | |
| color: var(--text-secondary); | |
| line-height: 1.6; | |
| } | |
| /* ---------- Drop Zone ---------- */ | |
| .drop-zone { | |
| width: 100%; | |
| min-width: 300px; | |
| max-width: 680px; | |
| padding: 50px 40px; | |
| border: 2px dashed rgba(197, 155, 63, 0.45); | |
| border-radius: var(--radius-lg); | |
| background: linear-gradient(135deg, | |
| rgba(255,255,255,0.95) 0%, | |
| rgba(240,227,198,0.25) 100%); | |
| backdrop-filter: blur(14px); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); | |
| box-shadow: var(--shadow-soft); | |
| position: relative; | |
| overflow: hidden; | |
| animation: borderPulse 3s ease-in-out infinite alternate; | |
| } | |
| /* Floating sparkle */ | |
| .drop-zone::after { | |
| content: "✦"; | |
| position: absolute; | |
| top: 18px; | |
| right: 24px; | |
| font-size: 2.4rem; | |
| color: var(--accent); | |
| opacity: 0.25; | |
| pointer-events: none; | |
| animation: floatSparkle 4s ease-in-out infinite; | |
| } | |
| @keyframes floatSparkle { | |
| 0%, 100% { transform: translateY(0) rotate(0deg); } | |
| 50% { transform: translateY(-10px) rotate(12deg); } | |
| } | |
| @keyframes borderPulse { | |
| from { border-color: rgba(197, 155, 63, 0.35); } | |
| to { border-color: rgba(197, 155, 63, 0.7); } | |
| } | |
| .drop-zone:hover { | |
| animation: none; | |
| border-color: rgba(197, 155, 63, 0.9); | |
| box-shadow: var(--shadow-strong); | |
| transform: translateY(-3px); | |
| } | |
| .drop-zone.drag-active { | |
| border-color: var(--accent); | |
| background: rgba(197, 155, 63, 0.12); | |
| transform: scale(1.01); | |
| animation: none; | |
| } | |
| .drop-zone.file-chosen { | |
| border-style: solid; | |
| border-color: var(--success); | |
| background: rgba(62,142,106,0.05); | |
| animation: none; | |
| } | |
| /* ---------- Upload Icon ---------- */ | |
| .upload-icon { | |
| font-size: 3.6rem; | |
| margin-bottom: 16px; | |
| color: var(--accent); | |
| filter: drop-shadow(0 12px 35px rgba(197, 155, 63, 0.35)); | |
| transition: transform 0.3s; | |
| } | |
| .drop-zone:hover .upload-icon { | |
| transform: translateY(-4px); | |
| } | |
| /* ---------- Text inside Drop Zone ---------- */ | |
| .upload-text { | |
| font-size: 1.2rem; | |
| font-weight: 800; | |
| margin-bottom: 10px; | |
| color: var(--text-primary); | |
| } | |
| .upload-note { | |
| font-size: 0.95rem; | |
| color: var(--text-muted); | |
| margin-bottom: 18px; | |
| } | |
| /* ---------- Browse Button ---------- */ | |
| .btn-browse { | |
| background: white; | |
| color: var(--text-primary); | |
| padding: 13px 35px; | |
| border-radius: 50px; | |
| font-weight: 700; | |
| border: 1.5px solid var(--accent); | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 2px 8px rgba(0,0,0,0.02); | |
| } | |
| .btn-browse:hover { | |
| transform: translateY(-2px); | |
| background: rgba(197, 155, 63, 0.05); | |
| color: var(--accent); | |
| box-shadow: 0 0 25px rgba(197, 155, 63, 0.2); | |
| } | |
| /* ---------- File Name Display ---------- */ | |
| .file-selected { | |
| margin-top: 14px; | |
| font-size: 0.95rem; | |
| font-weight: 700; | |
| color: var(--accent); | |
| white-space: nowrap; | |
| display: block; | |
| text-overflow: ellipsis; | |
| overflow: hidden; | |
| max-width: 300px; | |
| } | |
| /* ---------- Upload Button ---------- */ | |
| .btn-upload { | |
| margin-top: 16px; | |
| padding: 14px 35px; | |
| border-radius: 50px; | |
| font-weight: 800; | |
| border: none; | |
| cursor: pointer; | |
| font-size: 0.95rem; | |
| background: linear-gradient(90deg, var(--accent), var(--secondary)); | |
| color: var(--text-primary, #1A2332); /* dark text, visible on light gradient */ | |
| box-shadow: 0 18px 60px rgba(197, 155, 63, 0.25); | |
| transition: all 0.3s ease; | |
| } | |
| .btn-upload:hover { | |
| transform: translateY(-2px); | |
| filter: brightness(1.05); | |
| box-shadow: 0 22px 50px rgba(197, 155, 63, 0.35); | |
| } | |
| .btn-upload:disabled { | |
| opacity: 0.4; | |
| cursor: not-allowed; | |
| transform: none; | |
| box-shadow: none; | |
| filter: none; | |
| } | |
| /* ---------- Info Text ---------- */ | |
| .info-text { | |
| color: var(--text-muted); | |
| margin-top: 22px; | |
| font-size: 0.95rem; | |
| max-width: 650px; | |
| line-height: 1.7; | |
| } | |
| .info-text strong { | |
| color: var(--accent); | |
| font-weight: 700; | |
| } | |
| /* ========================================================== | |
| POSTER PREVIEW PAGE (pages/poster_preview.html) | |
| ========================================================== */ | |
| .preview-wrapper{ | |
| width: 100%; | |
| min-height: 100vh; | |
| padding: 120px 20px 40px; | |
| background: linear-gradient(120deg,#f8fafc,#eef2ff); | |
| display: flex; | |
| justify-content: center; | |
| } | |
| .preview-container{ | |
| width: 100%; | |
| max-width: 1400px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 18px; | |
| } | |
| .preview-bar{ | |
| background: rgba(255,255,255,0.92); | |
| border: 1px solid rgba(15,23,42,0.12); | |
| border-radius: 18px; | |
| padding: 18px 20px; | |
| box-shadow: 0 12px 30px rgba(15,23,42,0.08); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| gap: 12px; | |
| } | |
| .preview-left{ | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| } | |
| .preview-title{ | |
| font-size: 1.2rem; | |
| font-weight: 950; | |
| color: #0f172a; | |
| } | |
| .preview-subtitle{ | |
| font-size: 0.9rem; | |
| font-weight: 800; | |
| color: #475569; | |
| } | |
| .preview-actions{ | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| justify-content: flex-end; | |
| } | |
| .preview-btn{ | |
| padding: 11px 16px; | |
| border-radius: 14px; | |
| border: 1px solid rgba(15,23,42,0.12); | |
| background: rgba(255,255,255,0.95); | |
| font-weight: 900; | |
| font-size: 0.9rem; | |
| cursor: pointer; | |
| transition: 0.25s ease; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| text-decoration: none; | |
| color: #0f172a; | |
| box-shadow: 0 6px 16px rgba(15,23,42,0.06); | |
| white-space: nowrap; | |
| } | |
| .preview-btn:hover{ | |
| transform: translateY(-2px); | |
| background: rgba(255,255,255,1); | |
| } | |
| .preview-btn.primary{ | |
| background: linear-gradient(90deg,#4f46e5,#06b6d4); | |
| color: white; | |
| border: none; | |
| } | |
| .preview-btn.primary:hover{ | |
| opacity: 0.95; | |
| } | |
| .preview-btn.success{ | |
| background: linear-gradient(90deg,#22c55e,#16a34a); | |
| color: white; | |
| border: none; | |
| } | |
| .preview-btn.success:hover{ | |
| opacity: 0.95; | |
| } | |
| .preview-btn.danger{ | |
| background: linear-gradient(90deg,#ef4444,#dc2626); | |
| color: white; | |
| border: none; | |
| } | |
| .preview-btn.danger:hover{ | |
| opacity: 0.95; | |
| } | |
| /* ========================================================== | |
| 1. DEFAULT PORTRAIT POSTER SETTINGS (DO NOT TOUCH) | |
| ========================================================== */ | |
| .poster-frame-box { | |
| width: 100%; | |
| height: 82vh; | |
| border-radius: 18px; | |
| overflow: hidden; | |
| border: 1px solid rgba(15,23,42,0.12); | |
| background: white; | |
| box-shadow: 0 15px 40px rgba(15,23,42,0.10); | |
| transition: height 0.2s ease; /* added for smooth js resizing */ | |
| } | |
| .poster-frame-box iframe { | |
| width: 100%; | |
| height: 100%; | |
| border: none; | |
| } | |
| /* ========================================================== | |
| 2. LANDSCAPE OVERRIDE (CONTROLLED BY JAVASCRIPT NOW) | |
| ========================================================== */ | |
| .poster-frame-box.landscape-mode { | |
| height: auto; | |
| padding-top: 20px; | |
| background: transparent ; | |
| overflow: hidden ; /* completely kills horizontal scroll */ | |
| border: none; | |
| box-shadow: none; | |
| } | |
| .poster-frame-box.landscape-mode iframe { | |
| border: none; | |
| background: transparent; | |
| } |