Spaces:
Running
Running
| :root { | |
| --primary-color: #ff8c00; | |
| /* Orange */ | |
| --secondary-color: #ffd700; | |
| /* Yellow */ | |
| --accent-color: #ff3b3b; | |
| /* Red */ | |
| --bg-color: #f4f4f4; | |
| --border-color: #111; | |
| --text-color: #111; | |
| --panel-bg: white; | |
| --font-heading: 'Bangers', cursive; | |
| --font-text: 'Comic Neue', sans-serif; | |
| } | |
| body.dark-mode { | |
| --bg-color: #121212; | |
| --border-color: #eee; | |
| --text-color: #eee; | |
| --panel-bg: #222; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| font-family: var(--font-text); | |
| background-color: var(--bg-color); | |
| color: var(--text-color); | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| position: relative; | |
| } | |
| /* Halftone Background */ | |
| .background-halftone { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100vw; | |
| height: 100vh; | |
| z-index: -1; | |
| background: radial-gradient(circle at center, transparent 30%, rgba(255, 140, 0, 0.4) 100%), | |
| radial-gradient(var(--primary-color) 10%, transparent 11%), | |
| radial-gradient(var(--primary-color) 10%, transparent 11%) 10px 10px; | |
| background-size: 100% 100%, 20px 20px, 20px 20px; | |
| background-position: center, 0 0, 10px 10px; | |
| opacity: 0.15; | |
| } | |
| .comic-container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 2rem; | |
| } | |
| /* Header Styles */ | |
| .comic-header { | |
| text-align: center; | |
| margin-bottom: 3rem; | |
| position: relative; | |
| } | |
| .comic-title { | |
| font-family: var(--font-heading); | |
| font-size: 3.5rem; | |
| letter-spacing: 3px; | |
| color: white; | |
| text-shadow: | |
| 4px 4px 0 #111, | |
| -1px -1px 0 #111, | |
| 1px -1px 0 #111, | |
| -1px 1px 0 #111, | |
| 1px 1px 0 #111, | |
| 6px 6px 0 var(--accent-color); | |
| transform: rotate(-2deg); | |
| display: inline-block; | |
| position: relative; | |
| cursor: pointer; | |
| } | |
| /* Pop Art Stickers */ | |
| .sticker { | |
| font-family: var(--font-heading); | |
| position: absolute; | |
| display: inline-block; | |
| padding: 10px 20px; | |
| background-color: var(--secondary-color); | |
| color: white; | |
| font-size: 2.5rem; | |
| border: 4px solid #111; | |
| border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; | |
| box-shadow: 4px 4px 0 #111; | |
| text-shadow: 2px 2px 0 #111; | |
| z-index: 10; | |
| } | |
| .sticker.boom { | |
| background-color: var(--accent-color); | |
| top: -20px; | |
| right: -60px; | |
| transform: rotate(15deg); | |
| border-radius: 0; | |
| clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); | |
| padding: 30px 20px; | |
| } | |
| .sticker.pow { | |
| background-color: var(--primary-color); | |
| bottom: -30px; | |
| right: -20px; | |
| transform: rotate(-10deg); | |
| border-radius: 40px 10px 40px 10px; | |
| } | |
| /* Controls */ | |
| .controls-panel { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| gap: 1.5rem; | |
| margin-top: 2rem; | |
| background: var(--panel-bg); | |
| padding: 15px; | |
| border: 4px solid var(--border-color); | |
| box-shadow: 8px 8px 0 var(--border-color); | |
| transform: rotate(1deg); | |
| max-width: 600px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .comic-select { | |
| font-family: var(--font-heading); | |
| font-size: 1.5rem; | |
| padding: 10px 15px; | |
| border: 3px solid var(--border-color); | |
| background-color: var(--secondary-color); | |
| cursor: pointer; | |
| outline: none; | |
| appearance: none; | |
| -webkit-appearance: none; | |
| border-radius: 0; | |
| } | |
| .select-wrapper { | |
| position: relative; | |
| } | |
| .select-wrapper::after { | |
| content: '▼'; | |
| position: absolute; | |
| right: 15px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| pointer-events: none; | |
| font-size: 1.2rem; | |
| } | |
| .comic-button { | |
| font-family: var(--font-heading); | |
| font-size: 1.5rem; | |
| padding: 10px 20px; | |
| background-color: var(--accent-color); | |
| color: white; | |
| border: 3px solid #111; | |
| cursor: pointer; | |
| box-shadow: 3px 3px 0 var(--border-color); | |
| transition: all 0.1s ease; | |
| text-shadow: 1px 1px 0 black; | |
| } | |
| .comic-button:hover:not(:disabled) { | |
| transform: translate(-2px, -2px); | |
| box-shadow: 5px 5px 0 var(--border-color); | |
| } | |
| .comic-button:active:not(:disabled) { | |
| transform: translate(2px, 2px); | |
| box-shadow: 1px 1px 0 var(--border-color); | |
| } | |
| .comic-button:disabled { | |
| background-color: #ccc; | |
| cursor: not-allowed; | |
| box-shadow: none; | |
| transform: none; | |
| } | |
| /* Comic Pages Grid */ | |
| .comic-pages-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); | |
| gap: 3rem; | |
| margin-top: 2rem; | |
| } | |
| .initial-message { | |
| grid-column: 1 / -1; | |
| text-align: center; | |
| background: var(--panel-bg); | |
| border: 4px solid var(--border-color); | |
| padding: 4rem; | |
| font-size: 1.5rem; | |
| box-shadow: 12px 12px 0 var(--primary-color); | |
| position: relative; | |
| transform: rotate(-1deg); | |
| } | |
| .initial-message h2 { | |
| font-family: var(--font-heading); | |
| font-size: 3rem; | |
| letter-spacing: 2px; | |
| } | |
| /* Comic Panel */ | |
| .comic-panel { | |
| background: var(--panel-bg); | |
| border: 6px solid var(--border-color); | |
| box-shadow: 10px 10px 0 var(--border-color); | |
| position: relative; | |
| overflow: hidden; | |
| transition: transform 0.3s ease; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .comic-panel:hover { | |
| transform: scale(1.02) rotate(1deg); | |
| z-index: 2; | |
| } | |
| /* Alternating rotations for comic feel */ | |
| .comic-panel:nth-child(even) { | |
| transform: rotate(1.5deg); | |
| } | |
| .comic-panel:nth-child(odd) { | |
| transform: rotate(-1.5deg); | |
| } | |
| .comic-panel:nth-child(3n) { | |
| transform: rotate(2deg); | |
| } | |
| .comic-panel img { | |
| width: 100%; | |
| height: auto; | |
| display: block; | |
| object-fit: cover; | |
| border-bottom: 4px solid var(--border-color); | |
| -webkit-user-drag: none; | |
| user-select: none; | |
| } | |
| .comic-panel-caption { | |
| padding: 10px 15px; | |
| background-color: var(--panel-bg); | |
| font-family: var(--font-heading); | |
| font-size: 1.2rem; | |
| text-align: right; | |
| } | |
| /* Footer */ | |
| .comic-footer { | |
| text-align: center; | |
| margin-top: 5rem; | |
| padding-bottom: 2rem; | |
| color: var(--text-color); | |
| opacity: 0.8; | |
| } | |
| .comic-footer > p:first-child { | |
| font-family: var(--font-heading); | |
| font-size: 2rem; | |
| opacity: 0.7; | |
| } | |
| .author-details { | |
| margin-top: 1rem; | |
| font-family: var(--font-text); | |
| font-size: 1.1rem; | |
| line-height: 1.5; | |
| } | |
| .author-details a { | |
| color: var(--primary-color); | |
| text-decoration: none; | |
| font-weight: bold; | |
| } | |
| .author-details a:hover { | |
| text-decoration: underline; | |
| } | |
| /* Loader */ | |
| .loader { | |
| grid-column: 1 / -1; | |
| text-align: center; | |
| font-family: var(--font-heading); | |
| font-size: 3rem; | |
| color: var(--accent-color); | |
| animation: pulse 1s infinite alternate; | |
| } | |
| @keyframes pulse { | |
| from { | |
| transform: scale(1); | |
| } | |
| to { | |
| transform: scale(1.1); | |
| } | |
| } | |
| /* Story Outline Box */ | |
| .story-outline-container { | |
| margin: 2rem auto 4rem auto; | |
| max-width: 900px; | |
| } | |
| .story-outline-box { | |
| background: var(--panel-bg); | |
| border: 5px solid var(--border-color); | |
| padding: 3rem; | |
| box-shadow: 12px 12px 0 var(--secondary-color); | |
| transform: rotate(-0.5deg); | |
| } | |
| .story-outline-box h2 { | |
| font-family: var(--font-heading); | |
| font-size: 3rem; | |
| color: var(--primary-color); | |
| text-shadow: 2px 2px 0 #111; | |
| margin-bottom: 1.5rem; | |
| text-align: center; | |
| } | |
| .story-outline-box h3 { | |
| font-family: var(--font-heading); | |
| font-size: 2rem; | |
| margin-top: 2rem; | |
| margin-bottom: 1rem; | |
| color: var(--text-color); | |
| } | |
| .story-outline-box p { | |
| font-size: 1.2rem; | |
| line-height: 1.6; | |
| margin-bottom: 1rem; | |
| } | |
| .story-outline-box hr { | |
| border: 0; | |
| border-top: 4px dashed var(--border-color); | |
| margin: 2rem 0; | |
| } | |
| /* ========================================= | |
| RESPONSIVE DESIGN (Media Queries) | |
| ========================================= */ | |
| /* 1. Laptops and small desktops (max-width: 1024px) */ | |
| @media (max-width: 1024px) { | |
| .comic-container { | |
| padding: 1.5rem; | |
| } | |
| .comic-title { | |
| font-size: 3rem; | |
| } | |
| .sticker.boom { | |
| right: -30px; | |
| } | |
| } | |
| /* 2. Tablets (max-width: 768px) */ | |
| @media (max-width: 768px) { | |
| .comic-pages-grid { | |
| grid-template-columns: 1fr; | |
| gap: 2rem; | |
| } | |
| .comic-title { | |
| font-size: 2.5rem; | |
| } | |
| .story-outline-container { | |
| margin: 1.5rem auto 3rem auto; | |
| } | |
| .story-outline-box { | |
| padding: 2rem; | |
| box-shadow: 8px 8px 0 var(--secondary-color); | |
| } | |
| .sticker { | |
| font-size: 2rem; | |
| } | |
| .sticker.boom { | |
| top: -15px; | |
| right: -20px; | |
| padding: 20px 15px; | |
| } | |
| .sticker.pow { | |
| bottom: -20px; | |
| right: -15px; | |
| } | |
| .story-outline-box h2 { | |
| font-size: 2rem; | |
| } | |
| .story-outline-box h3 { | |
| font-size: 1.5rem; | |
| } | |
| .story-outline-box p { | |
| font-size: 1rem; | |
| } | |
| } | |
| /* 3. Mobile Phones (max-width: 480px) */ | |
| @media (max-width: 480px) { | |
| .comic-container { | |
| padding: 1rem; | |
| } | |
| .comic-title { | |
| font-size: 1.8rem; | |
| } | |
| .sticker { | |
| font-size: 1.2rem; | |
| padding: 5px 10px; | |
| } | |
| .sticker.boom { | |
| top: -5px; | |
| right: -5px; | |
| padding: 10px 5px; | |
| } | |
| .sticker.pow { | |
| bottom: -10px; | |
| right: -5px; | |
| } | |
| .controls-panel { | |
| padding: 10px; | |
| gap: 1px; | |
| } | |
| .comic-select, | |
| .comic-button { | |
| font-size: 0.8rem; | |
| } | |
| .story-outline-container { | |
| margin: 1rem auto 2rem auto; | |
| } | |
| .story-outline-box { | |
| padding: 1.2rem; | |
| box-shadow: 4px 4px 0 var(--secondary-color); | |
| transform: rotate(0deg); | |
| border-width: 3px; | |
| } | |
| .story-outline-box h2 { | |
| font-size: 1.3rem; | |
| margin-bottom: 0.8rem; | |
| } | |
| .story-outline-box h3 { | |
| font-size: 1rem; | |
| margin-top: 1rem; | |
| margin-bottom: 0.4rem; | |
| } | |
| .story-outline-box p { | |
| font-size: 0.8rem; | |
| line-height: 1.4; | |
| margin-bottom: 0.6rem; | |
| } | |
| .theme-fab { | |
| width: 45px; | |
| height: 45px; | |
| font-size: 1.5rem; | |
| bottom: 15px; | |
| right: 15px; | |
| } | |
| .initial-message { | |
| padding: 2rem; | |
| } | |
| .initial-message h2 { | |
| font-size: 2rem; | |
| } | |
| } | |
| .hidden { | |
| display: none ; | |
| } | |
| /* Modal Styles */ | |
| .modal { | |
| display: none; | |
| position: fixed; | |
| z-index: 1000; | |
| left: 0; | |
| top: 0; | |
| width: 100vw; | |
| height: 100vh; | |
| background-color: rgba(0, 0, 0, 0.9); | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .modal:not(.hidden) { | |
| display: flex; | |
| } | |
| .modal-content { | |
| max-width: 95vw; | |
| max-height: 95vh; | |
| border: 8px solid white; | |
| box-shadow: 0 0 20px rgba(255, 140, 0, 0.5); | |
| object-fit: contain; | |
| } | |
| .close-modal { | |
| position: absolute; | |
| top: 20px; | |
| right: 40px; | |
| color: white; | |
| font-size: 5rem; | |
| font-family: var(--font-heading); | |
| cursor: pointer; | |
| transition: 0.3s; | |
| text-shadow: 3px 3px 0 var(--accent-color); | |
| } | |
| .close-modal:hover { | |
| color: var(--secondary-color); | |
| transform: scale(1.1); | |
| } | |
| /* Theme Floating Action Button */ | |
| .theme-fab { | |
| position: fixed; | |
| bottom: 30px; | |
| right: 30px; | |
| width: 70px; | |
| height: 70px; | |
| background-color: var(--accent-color); | |
| border: 4px solid #111; | |
| border-radius: 50%; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| font-size: 2.5rem; | |
| cursor: pointer; | |
| box-shadow: 4px 4px 0 #111; | |
| z-index: 900; | |
| /* below modal */ | |
| transition: transform 0.2s, box-shadow 0.2s, background-color 0.3s; | |
| } | |
| .theme-fab:hover { | |
| transform: translateY(-5px) scale(1.1); | |
| box-shadow: 6px 8px 0 #111; | |
| background-color: var(--secondary-color); | |
| } | |
| .theme-fab:active { | |
| transform: translateY(2px); | |
| box-shadow: 2px 2px 0 #111; | |
| } |