diff --git a/index.html b/index.html new file mode 100644 index 0000000..6a0f3b6 --- /dev/null +++ b/index.html @@ -0,0 +1,168 @@ + + + + + + Clarence Gets a Bargain | Kid Lit Is a Hit + + + + + + +
+ +
+

Financial Literacy Adventure Series

+

Clarence Gets a Bargain.

+

Approved by at least 3 teachers (my mother (retired), brother, and neighbor)

+ +

A clever tale for clever kids, by Jonathan Bach — author, illustrator, wordsmith supreme.

+

Financial literacy sneaks in behind a hilarious, high-stakes mission: Clarence will score a robot… IF he can make cents of his dollars.

+ +
+
5Pages
+
1Mission
+
∞Giggles
+
+ +

KID LIT IS A HIT! AND KID FIN IS A WIN!

+

Stealthy Edutainment for growing money-smart minds.

+ +
+ Shop the Book + Explore Coupon Adventure +
+
+ Parents + Educators + Storytime Leaders +
+
+
+ +
+

Wish You Were Here!

+
+ +
+
+
+

Step Into Clarence's Coupon Quest

+

Quick start: drag a cover image into either side card (or click the card) and it saves automatically. Then click the center magazine to pop it front-and-center.

+
+
+
+

Book Cover

+
+ +

Drop Front Cover Hereor click to choose

+
+ + +
+ +
+ +

Click here to see about Clarence's quest for the perfect smart robot

+
+ +
+

Alternate / Back Cover

+
+ +

Drop Back Cover Hereor click to choose

+
+ + +
+
+
+ +
+

Why Families & Educators Love It

+
+
+

Read Together

+

A polished, grown-up visual style made for parents and educators reading to kids.

+
+
+

Classroom Friendly

+

Built-in coupon pages support activities, incentive moments, and lesson tie-ins.

+
+
+

Fully Editable Coupons

+

Each page has multiple coupon spaces with resizable text areas and editable dotted cut-lines.

+
+
+
+ +
+

Kid Lit Adventure + Money Mission = Big Fun

+
+ +
+

“A story with heart, humor, and practical money-smarts — perfect for read-aloud moments and classroom chats.”

+
+ +
+

FAQ

+
Is this mostly for kids or adults?

It's written so adults can enjoy reading it aloud while kids absorb the lessons through story and laughs.

+
Can I edit the coupon content?

Yes. Every coupon area and dotted cut-line text is editable right in the browser.

+
Can schools place bulk orders?

Absolutely. Use the bulk/school pricing button below for classroom and literacy-program orders.

+
+ +
+

Join Our Mailing List for New Adventures

+

Get updates, bonus classroom ideas, and launch specials.

+ +
+ +
+

Purchase & Classroom Orders

+

Ready to bring Clarence Gets a Bargain to your home, school, or literacy program?

+
+ + +
+
+
+ + + + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..07fd66a --- /dev/null +++ b/script.js @@ -0,0 +1,238 @@ +const modal = document.getElementById('magazineModal'); +const openBtn = document.getElementById('openMagazine'); +const closeBtn = document.getElementById('closeMagazineBtn'); +const closeOverlay = document.getElementById('closeMagazine'); +const magazine = document.getElementById('magazineBook'); +const slotTemplate = document.getElementById('couponSlotTemplate'); + +const frontCoverInput = document.getElementById('frontCoverInput'); +const backCoverInput = document.getElementById('backCoverInput'); +const frontCoverSlot = document.getElementById('frontCoverSlot'); +const backCoverSlot = document.getElementById('backCoverSlot'); +const frontCoverPreview = document.getElementById('frontCoverPreview'); +const backCoverPreview = document.getElementById('backCoverPreview'); +const magazineFrontPreview = document.getElementById('magazineFrontPreview'); + +const pageData = [ + { title: 'Front Cover Coupon Spread', theme: 'Welcome and Starter Offers' }, + { title: 'Coupon Page 2', theme: 'Smart Saver Challenges' }, + { title: 'Coupon Page 3', theme: 'Reading Night Rewards' }, + { title: 'Coupon Page 4', theme: 'Classroom Value Deals' }, + { title: 'Coupon Page 5', theme: 'Family Bundle Savings' }, + { title: 'Back Cover Coupons', theme: 'Final Bonus & Thank You' } +]; + +const sheetCount = 3; +let current = 0; + +const memoryStore = new Map(); +function getSavedValue(key) { + try { + return localStorage.getItem(key) || memoryStore.get(key) || ''; + } catch { + return memoryStore.get(key) || ''; + } +} + +function saveValue(key, value) { + memoryStore.set(key, value); + try { + localStorage.setItem(key, value); + } catch { + // Continue with in-memory storage when localStorage is unavailable + } +} + +function setCoverImage(dataUrl, targetImg) { + if (!targetImg) return; + if (dataUrl) { + targetImg.src = dataUrl; + targetImg.hidden = false; + const txt = targetImg.parentElement?.querySelector('.cover-placeholder__text, .magazine-preview__tag'); + if (txt) txt.hidden = true; + } else { + targetImg.hidden = true; + const txt = targetImg.parentElement?.querySelector('.cover-placeholder__text, .magazine-preview__tag'); + if (txt) txt.hidden = false; + } +} + +function applyFrontCover(dataUrl) { + setCoverImage(dataUrl, frontCoverPreview); + setCoverImage(dataUrl, magazineFrontPreview); +} + +function applyBackCover(dataUrl) { + setCoverImage(dataUrl, backCoverPreview); +} + +function readFileToDataUrl(file, done) { + if (!file || !file.type.startsWith('image/')) return; + const reader = new FileReader(); + reader.onload = () => done(String(reader.result || '')); + reader.readAsDataURL(file); +} + +function wireImageInput(input, storageKey, applyFn) { + if (!input) return; + input.addEventListener('change', () => { + const file = input.files?.[0]; + readFileToDataUrl(file, (dataUrl) => { + saveValue(storageKey, dataUrl); + applyFn(dataUrl); + }); + }); +} + +function wireDropAndClick(slot, input, storageKey, applyFn) { + if (!slot || !input) return; + + slot.addEventListener('click', () => input.click()); + slot.addEventListener('keydown', (event) => { + if (event.key === 'Enter' || event.key === ' ') { + event.preventDefault(); + input.click(); + } + }); + + ['dragenter', 'dragover'].forEach((evtName) => { + slot.addEventListener(evtName, (event) => { + event.preventDefault(); + slot.classList.add('is-dragover'); + }); + }); + + ['dragleave', 'dragend', 'drop'].forEach((evtName) => { + slot.addEventListener(evtName, () => slot.classList.remove('is-dragover')); + }); + + slot.addEventListener('drop', (event) => { + event.preventDefault(); + const file = event.dataTransfer?.files?.[0]; + readFileToDataUrl(file, (dataUrl) => { + saveValue(storageKey, dataUrl); + applyFn(dataUrl); + }); + }); +} + +window.addEventListener('dragover', (event) => event.preventDefault()); +window.addEventListener('drop', (event) => event.preventDefault()); + +applyFrontCover(getSavedValue('clarence-front-cover')); +applyBackCover(getSavedValue('clarence-back-cover')); +wireImageInput(frontCoverInput, 'clarence-front-cover', applyFrontCover); +wireImageInput(backCoverInput, 'clarence-back-cover', applyBackCover); +wireDropAndClick(frontCoverSlot, frontCoverInput, 'clarence-front-cover', applyFrontCover); +wireDropAndClick(backCoverSlot, backCoverInput, 'clarence-back-cover', applyBackCover); + +function beep() { + const ctx = new (window.AudioContext || window.webkitAudioContext)(); + const osc = ctx.createOscillator(); + const gain = ctx.createGain(); + osc.type = 'triangle'; + osc.frequency.value = 510; + gain.gain.setValueAtTime(0.08, ctx.currentTime); + gain.gain.exponentialRampToValueAtTime(0.0001, ctx.currentTime + 0.12); + osc.connect(gain); + gain.connect(ctx.destination); + osc.start(); + osc.stop(ctx.currentTime + 0.12); +} + +function makeCouponSlot(index) { + const slot = slotTemplate.content.firstElementChild.cloneNode(true); + slot.querySelector('h4').textContent = `Coupon ${index}`; + slot.querySelector('p').textContent = 'Editable details and instructions. Resize this coupon box if you need more room.'; + slot.querySelector('.coupon-slot__offer').textContent = `$${index} OFF`; + return slot; +} + +function makeCouponPage(data) { + const page = document.createElement('section'); + page.className = 'page-face coupon-page'; + + const heading = document.createElement('h3'); + heading.className = 'coupon-page__title'; + heading.textContent = `${data.title} • ${data.theme}`; + heading.contentEditable = 'true'; + + const grid = document.createElement('div'); + grid.className = 'coupon-grid'; + for (let i = 1; i <= 4; i++) { + grid.appendChild(makeCouponSlot(i)); + } + + page.append(heading, grid); + return page; +} + +function buildMagazine() { + magazine.innerHTML = ''; + for (let i = 0; i < sheetCount; i++) { + const sheet = document.createElement('article'); + sheet.className = 'sheet'; + sheet.style.zIndex = String(sheetCount - i); + + const front = makeCouponPage(pageData[i * 2]); + const back = makeCouponPage(pageData[i * 2 + 1]); + + front.classList.add('page-front'); + back.classList.add('page-back'); + + sheet.append(front, back); + magazine.appendChild(sheet); + } +} + +function updateFlips() { + [...magazine.children].forEach((sheet, idx) => { + sheet.classList.toggle('flipped', idx < current); + sheet.style.zIndex = idx < current ? String(idx + 1) : String(sheetCount - idx); + }); +} + +magazine.addEventListener('click', (event) => { + const bounds = magazine.getBoundingClientRect(); + const x = event.clientX - bounds.left; + const y = event.clientY - bounds.top; + + if (y <= bounds.height * 0.64) return; + + if (x > bounds.width * 0.7 && current < sheetCount) { + current += 1; + updateFlips(); + beep(); + } else if (x < bounds.width * 0.3 && current > 0) { + current -= 1; + updateFlips(); + beep(); + } +}); + +function openMagazine() { + modal.classList.add('open'); + modal.setAttribute('aria-hidden', 'false'); +} + +function closeMagazineModal() { + modal.classList.remove('open'); + modal.setAttribute('aria-hidden', 'true'); +} + +openBtn.addEventListener('click', openMagazine); +openBtn.addEventListener('keydown', (event) => { + if (event.key === 'Enter' || event.key === ' ') { + event.preventDefault(); + openMagazine(); + } +}); + +closeBtn.addEventListener('click', closeMagazineModal); +closeOverlay.addEventListener('click', closeMagazineModal); +document.addEventListener('keydown', (event) => { + if (event.key === 'Escape') closeMagazineModal(); +}); + +buildMagazine(); +updateFlips(); diff --git a/style.css b/style.css new file mode 100644 index 0000000..14b3f26 --- /dev/null +++ b/style.css @@ -0,0 +1,748 @@ +@font-face { + font-family: 'OpenDyslexic'; + src: url('https://cdn.jsdelivr.net/gh/antijingoist/open-dyslexic/web/OpenDyslexic-Regular.otf') format('opentype'); + font-weight: 400; + font-style: normal; +} +@font-face { + font-family: 'OpenDyslexic'; + src: url('https://cdn.jsdelivr.net/gh/antijingoist/open-dyslexic/web/OpenDyslexic-Bold.otf') format('opentype'); + font-weight: 700; + font-style: normal; +} + +:root { + --bg: #f4f5fb; + --ink: #1f2240; + --brand: #5a3cf0; + --brand-2: #e0508a; + --brand-3: #1da8b8; + --card: #ffffff; + --shadow: 0 18px 36px rgba(25, 16, 85, 0.18); +} + +* { box-sizing: border-box; } +body { + margin: 0; + font-family: 'Manrope', 'OpenDyslexic', sans-serif; + background: #f3f3f5; + color: var(--ink); +} + +.hero { + position: relative; + display: grid; + grid-template-columns: 1fr; + max-width: 1400px; + margin: 0 auto; + padding: 0 2rem 4rem; +} + +.top-nav { + background: rgba(255, 255, 255, 0.65); + border-radius: 999px; + backdrop-filter: blur(6px); + box-shadow: 0 12px 24px rgba(60, 49, 125, 0.08); + + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + align-items: center; + text-align: center; + padding: 1rem 0; + color: #8b8b8f; + font-weight: 600; + font-size: clamp(1rem, 1.35vw, 1.2rem); +} +.top-nav__brand { + color: #121317; + font-weight: 800; +} +.top-nav__link { + color: inherit; + text-decoration: none; +} +.top-nav__link:hover, +.top-nav__link:focus-visible { + color: #2f3163; + text-decoration: underline; + text-underline-offset: 4px; +} + +.hero::before, +.hero::after { + content: ''; + position: absolute; + border-radius: 999px; + filter: blur(2px); + opacity: .7; + pointer-events: none; +} +.hero::before { + width: clamp(180px, 24vw, 360px); + height: clamp(180px, 24vw, 360px); + background: radial-gradient(circle at 35% 35%, #f7cdde, #f1e6ff 65%, transparent 75%); + top: 5rem; + left: 1rem; +} +.hero::after { + width: clamp(160px, 20vw, 300px); + height: clamp(160px, 20vw, 300px); + background: radial-gradient(circle at 35% 35%, #bcefff, #dcd2ff 68%, transparent 78%); + right: 3rem; + top: 16rem; +} + +.hero-statement { + max-width: 1200px; + margin: 0 auto; + text-align: center; + padding-top: clamp(4rem, 10vh, 7rem); +} + +.eyebrow { + display: none; +} +h1 { + font-family: 'OpenDyslexic', 'Manrope', sans-serif; + font-size: clamp(2.8rem, 5.2vw, 5.1rem); + margin: 0; + line-height: 1.06; +} +.tagline { + margin: clamp(2rem, 5vh, 3.25rem) 0 0; + font-weight: 800; + font-size: 1.15rem; + background: linear-gradient(90deg, var(--brand-2), var(--brand-3)); + -webkit-background-clip: text; + background-clip: text; + color: transparent; +} +.stealth-note { + margin: 1rem 0 0; + display: inline-block; + padding: .35rem .7rem; + border-radius: 999px; + background: linear-gradient(90deg, #e3f8fb, #ece8ff); + color: #2a2f63; + font-weight: 700; +} +.approval { + margin: 1rem 0 clamp(4.25rem, 12vh, 8.5rem); + font-family: 'OpenDyslexic', 'Manrope', sans-serif; + font-size: clamp(1.3rem, 3.2vw, 3rem); + color: #939399; + font-weight: 700; + line-height: 1.15; +} +.author-line { + margin: 0 0 1rem; + font-family: 'OpenDyslexic', 'Manrope', sans-serif; + font-size: clamp(2rem, 4vw, 4.2rem); + font-weight: 700; + line-height: 1.08; + max-width: 19ch; + margin-left: auto; + margin-right: auto; +} +.mission-line { + margin: 0 0 clamp(4rem, 11vh, 8rem); + font-family: 'OpenDyslexic', 'Manrope', sans-serif; + font-size: clamp(1.75rem, 3.8vw, 3.8rem); + font-weight: 700; + line-height: 1.08; + color: #8f9095; + max-width: 20ch; + margin-left: auto; + margin-right: auto; +} +.hero-stats { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: clamp(2rem, 6vw, 8rem); + margin: 0 auto; + max-width: 960px; +} +.hero-stat { + background: transparent; + border-radius: 0; + padding: 0; + text-align: center; + box-shadow: none; +} +.hero-stat strong { + display: block; + font-family: 'OpenDyslexic', 'Manrope', sans-serif; + font-size: clamp(3.3rem, 6vw, 6.2rem); + line-height: 1; + color: #0f1013; +} +.hero-stat span { + display: block; + margin-top: .55rem; + color: #7f8086; + font-family: 'OpenDyslexic', 'Manrope', sans-serif; + font-weight: 700; + font-size: clamp(1.35rem, 2.2vw, 2.4rem); +} +.intro { max-width: 52ch; line-height: 1.6; color: #31345a; } +.hero__cta { + display: flex; + gap: .8rem; + margin-top: 2rem; + justify-content: center; + flex-wrap: wrap; +} +.hero-flair { + margin: 1.25rem auto 0; + display: flex; + justify-content: center; + flex-wrap: wrap; + gap: .6rem; +} +.hero-flair span { + border-radius: 999px; + padding: .45rem .85rem; + font-weight: 700; + letter-spacing: .02em; + color: #3a2e8a; + background: linear-gradient(120deg, #fff7fb, #e7f3ff); + box-shadow: 0 8px 16px rgba(65, 49, 142, 0.12); +} + +.btn { + border: 2px solid var(--brand); + border-radius: 999px; + padding: .75rem 1.2rem; + font-weight: 700; + cursor: pointer; + text-decoration: none; +} +.btn--solid { background: linear-gradient(120deg, var(--brand), #7950f2); color: #fff; } +.btn--ghost { background: rgba(255,255,255,.55); color: var(--brand); } +.btn:hover { + transform: translateY(-2px); + box-shadow: 0 12px 20px rgba(72, 56, 158, 0.2); +} + +.cover-card { + background: linear-gradient(170deg, #ffffff, #faf9ff); + border-radius: 16px; + padding: .8rem; + box-shadow: var(--shadow); +} +.cover-card h3 { margin: .4rem 0 .8rem; font-size: 1rem; } +.cover-placeholder { + min-height: 260px; + border-radius: 12px; + display: grid; + place-items: center; + text-align: center; + color: #676b8a; + padding: 1rem; + background: linear-gradient(150deg, #f4f3ff, #ebe9ff); + box-shadow: inset 0 0 0 2px rgba(124, 106, 231, 0.18); +} + + +.cover-placeholder--image { + position: relative; + overflow: hidden; + cursor: pointer; + transition: transform 180ms ease, box-shadow 180ms ease; +} +.cover-placeholder--image:hover { + transform: translateY(-1px); +} +.cover-placeholder--image.is-dragover { + box-shadow: inset 0 0 0 3px #6956ea, 0 0 0 4px rgba(105, 86, 234, 0.18); + transform: scale(1.01); +} +.cover-placeholder--image img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 10px; +} +.cover-placeholder__text { + margin: 0; + font-family: 'OpenDyslexic', 'Manrope', sans-serif; + display: grid; + gap: .35rem; + text-align: center; +} +.cover-placeholder__text strong { + font-size: 1rem; + color: #5247a8; +} +.cover-placeholder__text span { + color: #75799f; + font-size: .92rem; +} +.cover-upload-btn { + display: inline-block; + margin-top: .7rem; + background: linear-gradient(130deg, #4f39ca, #6a50e6); + color: white; + padding: .5rem .8rem; + border-radius: 999px; + font-weight: 700; + cursor: pointer; + font-family: 'OpenDyslexic', 'Manrope', sans-serif; +} +.cover-upload-input { + position: absolute; + opacity: 0; + pointer-events: none; + width: 0; + height: 0; +} + +main { max-width: 1200px; margin: 0 auto 4rem; padding: 0 2rem; } +.feature-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1rem; + margin: 2rem 0; +} +.feature-card { + background: linear-gradient(160deg, #ffffff 20%, #f9f7ff 70%, #eef9ff); + border-radius: 14px; + padding: 1.2rem; + box-shadow: var(--shadow); + min-height: 170px; + border: 1px solid rgba(124, 106, 231, 0.14); + transition: transform 180ms ease, box-shadow 180ms ease; +} +.feature-card:hover { + transform: translateY(-4px); + box-shadow: 0 20px 28px rgba(45, 31, 109, 0.16); +} + +.magazine-launch, .payment { + background: linear-gradient(165deg, #ffffff, #faf9ff 55%, #eef9ff); + border-radius: 16px; + padding: 1.5rem; + box-shadow: var(--shadow); + margin: 1rem 0; +} +.magazine-launch { + display: grid; + gap: 1rem; + justify-items: center; + position: relative; + overflow: hidden; +} +.magazine-launch::after { + content: ''; + position: absolute; + width: 220px; + height: 220px; + right: -70px; + top: -80px; + border-radius: 999px; + background: radial-gradient(circle, rgba(229, 106, 178, 0.18), transparent 70%); + pointer-events: none; +} +.quick-start { + margin: .35rem 0 0; + color: #555a86; + text-align: center; + font-family: 'OpenDyslexic', 'Manrope', sans-serif; + font-size: .96rem; +} +.magazine-centerline { + width: 100%; + display: grid; + grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr); + align-items: center; + gap: 1rem; +} +.cover-card--side { + min-height: 420px; +} + +.magazine-dock { + border-radius: 18px; + width: min(370px, 88vw); + min-height: 570px; + background: linear-gradient(145deg, #2a2750, #151227); + border: 2px solid #3f3a71; + display: grid; + justify-items: center; + align-content: center; + gap: 1rem; + color: #f7f7ff; + cursor: pointer; + padding: 1.2rem; +} +.magazine-dock:focus-visible { outline: 3px solid #a493ff; outline-offset: 3px; } +.magazine-preview { + width: 270px; + min-height: 390px; + border-radius: 12px; + background: linear-gradient(170deg, #ffffff, #f0ecff 55%, #e6ddff); + box-shadow: 0 12px 22px rgba(0,0,0,.35); + color: #2f2466; + padding: 1rem; + text-align: center; + display: grid; + align-content: start; + gap: .7rem; +} +.magazine-preview__eyebrow { + text-transform: uppercase; + letter-spacing: .08em; + font-size: .75rem; + margin: 0; + font-weight: 700; + color: #5a3cf0; +} +.magazine-preview h3 { margin: 0; font-family: 'Playfair Display', serif; color: #3f2a97; } +.magazine-preview__image-wrap { + min-height: 170px; + border-radius: 10px; + background: linear-gradient(160deg, #efebff, #f7f4ff); + display: grid; + place-items: center; + overflow: hidden; +} +.magazine-preview__image-wrap img { + width: 100%; + height: 100%; + object-fit: cover; +} +.magazine-preview__tag { margin: 0; font-weight: 700; color: #7a6cb5; padding: .4rem; text-align: center; } +.magazine-preview__burst { + margin: .4rem 0 0; + border-radius: 12px; + padding: .7rem; + font-weight: 800; + color: #4e33d4; + background: linear-gradient(160deg, #e8e2ff, #f4efff); +} +.magazine-dock__cta { + margin: 0; + text-align: center; + font-weight: 700; + max-width: 30ch; + color: #fff8ff; + text-shadow: 0 2px 8px rgba(0,0,0,.35); + font-family: 'OpenDyslexic', 'Manrope', sans-serif; +} + +.quote-band { + margin: 1.4rem 0; + border-radius: 18px; + padding: 1.15rem 1.4rem; + background: linear-gradient(120deg, #2f2864, #6c46cf 45%, #2ca8b8); + color: #fefeff; + text-align: center; + box-shadow: var(--shadow); +} +.quote-band p { + margin: 0; + font-family: 'OpenDyslexic', 'Manrope', sans-serif; + font-size: clamp(1rem, 1.55vw, 1.3rem); + line-height: 1.35; +} + +.payment__actions { display: flex; gap: .8rem; flex-wrap: wrap; } + +.modal { + position: fixed; + inset: 0; + display: none; + align-items: center; + justify-content: center; + z-index: 99; +} +.modal.open { display: flex; } +.modal__overlay { position: absolute; inset: 0; background: rgba(9, 7, 29, .5); } +.modal__close { + position: fixed; + top: .7rem; + right: 1rem; + z-index: 3; + border: none; + background: rgba(255,255,255,.75); + width: 44px; + height: 44px; + border-radius: 99px; + font-size: 2rem; + cursor: pointer; +} +.stage-tilt { perspective: 1800px; display: grid; place-items: center; margin: 0; z-index: 2; } +.magazine { + width: min(420px, 88vw); + height: min(620px, 84vh); + position: relative; + transform-style: preserve-3d; + transform: rotateX(9deg); + animation: shootOut 500ms ease; +} +@keyframes shootOut { + from { transform: rotateX(9deg) scale(.75) translateY(100px); opacity: 0; } + to { transform: rotateX(9deg) scale(1) translateY(0); opacity: 1; } +} + +.sheet { + position: absolute; + inset: 0; + transform-style: preserve-3d; + transform-origin: left center; + transition: transform 750ms ease; +} +.sheet.flipped { transform: rotateY(-178deg); } +.page-face { + position: absolute; + width: 50%; + height: 100%; + top: 0; + backface-visibility: hidden; + overflow: hidden; + background: white; + border-radius: 8px; + box-shadow: 0 8px 26px rgba(0, 0, 0, 0.15); +} +.page-front { right: 0; border-left: 1px solid #ddd; } +.page-back { + left: 0; + transform: rotateY(180deg); + border-right: 1px solid #ddd; +} +.page-face::before, +.page-face::after { + content: ''; + position: absolute; + width: 38px; + height: 38px; + bottom: 0; + opacity: .38; +} +.page-front::after { + right: 0; + background: linear-gradient(135deg, transparent 50%, #b9b9d1 51%); +} +.page-back::before { + left: 0; + background: linear-gradient(225deg, transparent 50%, #b9b9d1 51%); +} + +.coupon-page { + padding: .75rem; + display: grid; + gap: .65rem; + background: linear-gradient(180deg, #fff, #fefcff 60%, #f7f6ff); +} +.coupon-page__title { margin: 0; color: var(--brand); font-size: .9rem; } +.coupon-grid { + display: grid; + grid-template-columns: 1fr; + gap: .55rem; +} +.coupon-slot { + border: 2px solid #cdc3ff; + border-radius: 12px; + padding: .5rem; + min-height: 80px; + resize: vertical; + overflow: auto; + background: #fff; + font-family: 'OpenDyslexic', 'Manrope', sans-serif; +} +.coupon-slot h4 { margin: 0 0 .2rem; color: #4326c6; font-size: .85rem; } +.coupon-slot p { margin: 0 0 .3rem; font-size: .72rem; } +.coupon-slot__offer { + border: 2px solid #8f74ff; + border-radius: 8px; + text-align: center; + font-weight: 800; + font-size: .72rem; + padding: .3rem; + margin-bottom: .3rem; +} +.coupon-slot__line { color: #545676; } +.coupon-slot__cutline { + border: 2px dotted #8f74ff; + border-radius: 8px; + padding: .35rem; + text-align: center; + font-weight: 600; + font-size: .68rem; +} +.hint { + position: fixed; + bottom: 10px; + left: 50%; + transform: translateX(-50%); + color: #fff; + z-index: 2; + margin: 0; + font-size: .9rem; + font-family: 'OpenDyslexic', 'Manrope', sans-serif; +} + +.feature-card p, .payment p { + color: #31345a; +} + +@media (max-width: 900px) { + .feature-grid { grid-template-columns: 1fr; } + .magazine-centerline { grid-template-columns: 1fr; } + .hero-stats { max-width: 680px; gap: 2rem; } + .top-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: .6rem; } + .approval { margin-bottom: 3.2rem; } + .mission-line { margin-bottom: 3rem; } + .hero-flair { justify-content: center; } + .top-nav { border-radius: 18px; } +} + +.cover-placeholder--image:focus-visible { + outline: 3px solid #8f81f2; + outline-offset: 3px; +} + +/* Storybook-inspired flair update */ +.hero--storybook { + max-width: 100%; + padding-bottom: 2rem; + background: + radial-gradient(circle at 10% 25%, rgba(117, 211, 255, 0.35), transparent 32%), + radial-gradient(circle at 90% 20%, rgba(247, 205, 222, 0.5), transparent 30%), + linear-gradient(180deg, #8bd7ff 0%, #d8f4ff 38%, #f3f3f5 88%); +} +.hero--storybook .top-nav { + max-width: 1200px; + margin: 0 auto; + background: rgba(13, 34, 99, 0.88); + color: #e8f1ff; +} +.hero--storybook .top-nav__brand, +.hero--storybook .top-nav__link:hover, +.hero--storybook .top-nav__link:focus-visible { + color: #ffffff; +} +.story-ribbon { + background: linear-gradient(120deg, #2c1d67, #5d2ca1 50%, #1c8ca7); + color: #ffe66d; + text-align: center; + padding: .95rem 1rem; + font-family: 'OpenDyslexic', 'Manrope', sans-serif; + font-size: clamp(1.3rem, 2.2vw, 2rem); + letter-spacing: .02em; + text-transform: uppercase; + text-shadow: 0 3px 8px rgba(0, 0, 0, .35); +} +.story-ribbon p { margin: 0; } + +main { + max-width: 1200px; + margin: 0 auto 4rem; + padding: 0 2rem; +} +.section-card { + border: 2px solid rgba(105, 86, 234, 0.14); +} +.magazine-launch.section-card { + margin-top: 2rem; + background: linear-gradient(170deg, #fffef8, #f6fbff 55%, #eef9ff); +} +.magazine-launch h2 { + font-size: clamp(1.7rem, 2.4vw, 2.5rem); + margin: 0; + color: #1f2d55; +} +.dark-showcase { + margin: 2rem 0; + border-radius: 18px; + padding: 1.4rem; + background: linear-gradient(180deg, #291a62 0%, #241651 100%); + color: #f4f6ff; + box-shadow: var(--shadow); +} +.section-title { + margin: .2rem 0 1rem; + text-align: center; + color: #64e8ff; + text-transform: uppercase; + letter-spacing: .08em; + font-size: clamp(1.05rem, 1.8vw, 1.4rem); +} +.dark-showcase .feature-grid { + margin: 0; +} +.dark-showcase .feature-card { + background: linear-gradient(165deg, #34267c, #241651 78%); + border: 1px solid rgba(104, 232, 255, 0.24); + color: #f2f5ff; +} +.dark-showcase .feature-card h3, +.dark-showcase .feature-card p { + color: #f2f5ff; +} +.scene-strip { + margin: 1.6rem 0; + border-radius: 18px; + padding: 4.3rem 1.2rem; + text-align: center; + background: + linear-gradient(0deg, rgba(8, 71, 101, 0.35), rgba(8, 71, 101, 0.35)), + linear-gradient(145deg, #53c7ff, #5fd18f 45%, #396eb3); + color: #fff6a8; + font-family: 'OpenDyslexic', 'Manrope', sans-serif; + font-size: clamp(1.25rem, 2vw, 1.7rem); + text-transform: uppercase; + text-shadow: 0 3px 10px rgba(0, 0, 0, .4); +} +.scene-strip p { margin: 0; } +.faq { + margin: 1.6rem 0; + background: #fff; + border-radius: 16px; + padding: 1.4rem; + box-shadow: var(--shadow); +} +.faq h2 { margin-top: 0; } +.faq details { + border: 1px solid #d6d9ef; + border-radius: 10px; + padding: .75rem .9rem; + background: #fafbff; +} +.faq details + details { margin-top: .6rem; } +.faq summary { + cursor: pointer; + font-weight: 700; +} +.faq p { margin: .6rem 0 0; color: #3f4467; } +.newsletter { + margin: 1.7rem 0; + border-radius: 16px; + padding: 1.5rem; + text-align: center; + color: #f4f4ff; + background: linear-gradient(160deg, #2a185f, #1e1450); +} +.newsletter h2 { + margin: 0 0 .4rem; + font-size: clamp(1.25rem, 2.2vw, 2rem); +} +.newsletter p { margin: 0 0 1rem; color: #d5d7f8; } +.newsletter__form { + display: flex; + gap: .6rem; + justify-content: center; + flex-wrap: wrap; +} +.newsletter__form input { + width: min(360px, 90vw); + border-radius: 999px; + border: none; + padding: .78rem 1rem; + font: inherit; +} + +@media (max-width: 900px) { + .story-ribbon { font-size: 1.05rem; } + .scene-strip { padding: 2.8rem 1rem; } +}