/* ================================================================ PLOTMISTOREFRONT.CSS — universal hub for all storefront themes Activates when has any class starting with "storefront-" Each theme overrides color/font variables at the bottom ================================================================ */ /* ---------------- DEFAULT VARIABLES (Romance) ---------------- */ body[class*="storefront-"] { --sf-bg-1: #1a0d14; --sf-bg-2: #2a1620; --sf-banner-bg: #0a0608; --sf-accent: #e8a8b8; --sf-accent-deep: #9a5566; --sf-accent-mid: #c47a8a; --sf-text-strong: #fdf2e9; --sf-text-soft: #f5d6dc; --sf-font-display: 'Playfair Display', serif; --sf-font-body: 'Cormorant Garamond', serif; } /* ---------------- STRUCTURE (shared for all themes) ---------------- */ .storefront-cover-romance, .storefront-cover-fantasy, .storefront-cover-noir, .storefront-cover-scifi, .storefront-cover-gothic, .storefront-cover-thriller, .storefront-cover-horror, .storefront-cover-comedy, .storefront-cover-drama, .storefront-cover-literary { display: none; } body[class*="storefront-"] .storefront-cover-romance { display: block; position: relative; margin: 0 calc(50% - 50vw) 40px; width: 100vw; background-color: var(--sf-bg-1); background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; } /* BANNER */ body[class*="storefront-"] .sr-banner { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--sf-banner-bg); } body[class*="storefront-"] .sr-banner img { width: 100%; height: 100%; object-fit: cover; display: block; } body[class*="storefront-"] .sr-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, transparent 60%, var(--sf-bg-1) 100%); pointer-events: none; opacity: .9; } /* Floating Pre-Order button on banner */ body[class*="storefront-"] .sr-banner-cta { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 2; display: inline-flex; align-items: center; gap: 10px; padding: 18px 44px; background: linear-gradient(180deg, var(--sf-accent) 0%, var(--sf-accent-mid) 50%, var(--sf-accent-deep) 100%); color: #fff; font-family: var(--sf-font-body); font-size: 16px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; text-decoration: none; border: 1px solid rgba(255,255,255,.25); box-shadow: 0 20px 50px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.3); transition: all .3s ease; } body[class*="storefront-"] .sr-banner-cta:hover { transform: translateX(-50%) translateY(-3px); } /* TOP CTA — Pre-Order button right under banner */ body[class*="storefront-"] .sr-top-cta { display: flex; justify-content: center; padding: 36px 40px 0; } /* INFO STRIP */ body[class*="storefront-"] .sr-info-strip { padding: 40px 40px 30px; text-align: center; max-width: 980px; margin: 0 auto; border-bottom: 1px solid rgba(255,255,255,.06); } body[class*="storefront-"] .sr-eyebrow { font-family: var(--sf-font-body); font-size: 11px; font-weight: 500; letter-spacing: .42em; text-transform: uppercase; color: var(--sf-accent); margin-bottom: 14px; } body[class*="storefront-"] .sr-title { font-family: var(--sf-font-display); font-size: 56px; font-weight: 900; line-height: 1; letter-spacing: -.02em; color: var(--sf-text-strong); margin-bottom: 6px; } body[class*="storefront-"] .sr-author { font-family: var(--sf-font-body); font-size: 20px; font-style: italic; font-weight: 500; color: var(--sf-accent); margin-bottom: 22px; letter-spacing: .06em; } body[class*="storefront-"] .sr-logline { font-family: var(--sf-font-body); font-size: 22px; font-style: italic; line-height: 1.5; color: var(--sf-text-soft); max-width: 720px; margin: 0 auto 24px; } body[class*="storefront-"] .sr-meta-row { display: flex; gap: 36px; justify-content: center; flex-wrap: wrap; margin-bottom: 26px; } body[class*="storefront-"] .sr-meta-item { display: flex; flex-direction: column; gap: 4px; align-items: center; } body[class*="storefront-"] .sr-meta-label { font-family: var(--sf-font-body); font-size: 10px; letter-spacing: .32em; text-transform: uppercase; color: var(--sf-accent); opacity: .75; } body[class*="storefront-"] .sr-meta-value { font-family: var(--sf-font-display); font-size: 16px; font-weight: 700; color: var(--sf-text-strong); letter-spacing: .02em; } body[class*="storefront-"] .sr-action-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } body[class*="storefront-"] .sr-cta { display: inline-flex; align-items: center; gap: 10px; padding: 14px 32px; font-family: var(--sf-font-body); font-size: 13px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; text-decoration: none; border-radius: 999px; cursor: pointer; transition: all .2s; } body[class*="storefront-"] .sr-cta-primary { background: linear-gradient(180deg, var(--sf-accent) 0%, var(--sf-accent-deep) 100%); color: #fff; border: 1px solid rgba(255,255,255,.3); box-shadow: 0 8px 22px rgba(0,0,0,.4); } body[class*="storefront-"] .sr-cta-primary:hover { transform: translateY(-2px); } body[class*="storefront-"] .sr-cta-ghost { background: transparent; color: var(--sf-accent); border: 1px solid var(--sf-accent); opacity: .8; } body[class*="storefront-"] .sr-cta-ghost:hover { background: rgba(255,255,255,.06); opacity: 1; } /* AUTHOR BLOCK — centered, avatar on top */ body[class*="storefront-"] .sr-author-block { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; max-width: 760px; margin: 0 auto; padding: 36px 40px 50px; } body[class*="storefront-"] .sr-author-avatar { width: 100px; height: 100px; border-radius: 50%; overflow: hidden; border: 2px solid var(--sf-accent); box-shadow: 0 0 28px rgba(0,0,0,.3); background: rgba(0,0,0,.4); } body[class*="storefront-"] .sr-author-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } body[class*="storefront-"] .sr-author-info { text-align: center; } body[class*="storefront-"] .sr-author-label { font-family: var(--sf-font-body); font-size: 10px; letter-spacing: .32em; text-transform: uppercase; color: var(--sf-accent); opacity: .75; margin-bottom: 6px; } body[class*="storefront-"] .sr-author-name { font-family: var(--sf-font-display); font-size: 26px; font-weight: 700; color: var(--sf-text-strong); margin-bottom: 8px; line-height: 1.1; } body[class*="storefront-"] .sr-author-bio { font-family: var(--sf-font-body); font-size: 16px; font-style: italic; line-height: 1.5; color: var(--sf-text-soft); } body[class*="storefront-"] .sr-disclaimer { text-align: center; padding-bottom: 22px; font-family: var(--sf-font-body); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--sf-accent); opacity: .4; } /* RESPONSIVE */ @media (max-width: 760px) { body[class*="storefront-"] .sr-title { font-size: 38px; } body[class*="storefront-"] .sr-logline { font-size: 18px; } body[class*="storefront-"] .sr-author-block { grid-template-columns: 1fr; text-align: center; justify-items: center; } body[class*="storefront-"] .sr-author-info { text-align: center; } body[class*="storefront-"] .sr-banner-cta { padding: 14px 28px; font-size: 13px; bottom: 20px; } } /* ================================================================ THEME COLOR OVERRIDES Add a new theme by copying any block and changing colors/fonts ================================================================ */ /* ---------------- ROMANCE (default — pink/rose) ---------------- */ body.storefront-romance { --sf-bg-1: #1a0d14; --sf-bg-2: #2a1620; --sf-banner-bg: #0a0608; --sf-accent: #e8a8b8; --sf-accent-deep: #9a5566; --sf-accent-mid: #c47a8a; --sf-text-strong: #fdf2e9; --sf-text-soft: #f5d6dc; --sf-font-display: 'Playfair Display', serif; --sf-font-body: 'Cormorant Garamond', serif; } /* ---------------- FANTASY (gold/forest green — LOTR/Harry Potter) ---------------- */ body.storefront-fantasy { --sf-bg-1: #0d1a14; --sf-bg-2: #1a2e22; --sf-banner-bg: #06100a; --sf-accent: #d4af37; --sf-accent-deep: #7a5418; --sf-accent-mid: #a8851d; --sf-text-strong: #f4ede0; --sf-text-soft: #e8d9b0; --sf-font-display: 'Cinzel', serif; --sf-font-body: 'Cormorant Garamond', serif; } /* ---------------- NOIR THRILLER (black/gold) ---------------- */ body.storefront-noir, body.storefront-noir_thriller { --sf-bg-1: #050608; --sf-bg-2: #0a1014; --sf-banner-bg: #000; --sf-accent: #d4af37; --sf-accent-deep: #7a5418; --sf-accent-mid: #a8851d; --sf-text-strong: #f4ede0; --sf-text-soft: #c8bfb0; --sf-font-display: 'Playfair Display', serif; --sf-font-body: 'Special Elite', monospace; } /* ---------------- SCI-FI (cyan/electric blue) ---------------- */ body.storefront-scifi { --sf-bg-1: #050d18; --sf-bg-2: #0a1830; --sf-banner-bg: #02060d; --sf-accent: #5ec8e8; --sf-accent-deep: #1c5a7a; --sf-accent-mid: #3a8eb4; --sf-text-strong: #e8f4ff; --sf-text-soft: #b8d4e8; --sf-font-display: 'Orbitron', sans-serif; --sf-font-body: 'DM Sans', sans-serif; } /* ---------------- GOTHIC (deep burgundy/black) ---------------- */ body.storefront-gothic { --sf-bg-1: #0a0508; --sf-bg-2: #1a0a10; --sf-banner-bg: #000; --sf-accent: #9a3a4a; --sf-accent-deep: #4a1820; --sf-accent-mid: #6e2530; --sf-text-strong: #f0e6dc; --sf-text-soft: #c8b8a8; --sf-font-display: 'UnifrakturMaguntia', serif; --sf-font-body: 'Cormorant Garamond', serif; } /* ---------------- HORROR (blood red/black) ---------------- */ body.storefront-horror { --sf-bg-1: #0a0000; --sf-bg-2: #1a0606; --sf-banner-bg: #000; --sf-accent: #b8202a; --sf-accent-deep: #5a0810; --sf-accent-mid: #7e1218; --sf-text-strong: #f0e6dc; --sf-text-soft: #c8a8a8; --sf-font-display: 'Creepster', serif; --sf-font-body: 'DM Sans', sans-serif; } /* ---------------- THRILLER (slate/orange) ---------------- */ body.storefront-thriller { --sf-bg-1: #0e0e12; --sf-bg-2: #1a1a22; --sf-banner-bg: #06060a; --sf-accent: #e8853a; --sf-accent-deep: #8e4a1c; --sf-accent-mid: #b8632a; --sf-text-strong: #f4ede0; --sf-text-soft: #d4c8b8; --sf-font-display: 'Playfair Display', serif; --sf-font-body: 'DM Sans', sans-serif; } /* ---------------- COMEDY (bright yellow/red) ---------------- */ body.storefront-comedy { --sf-bg-1: #1a0e05; --sf-bg-2: #2e1c08; --sf-banner-bg: #1a0e05; --sf-accent: #f4c430; --sf-accent-deep: #b8841a; --sf-accent-mid: #d4a020; --sf-text-strong: #fff8e0; --sf-text-soft: #f0e2b8; --sf-font-display: 'Fredoka', sans-serif; --sf-font-body: 'DM Sans', sans-serif; } /* ---------------- DRAMA (deep navy/silver) ---------------- */ body.storefront-drama { --sf-bg-1: #050a14; --sf-bg-2: #0e1828; --sf-banner-bg: #02050a; --sf-accent: #c4c8d0; --sf-accent-deep: #6a7080; --sf-accent-mid: #8a92a0; --sf-text-strong: #f0f2f8; --sf-text-soft: #c4c8d0; --sf-font-display: 'Playfair Display', serif; --sf-font-body: 'Cormorant Garamond', serif; } /* ---------------- LITERARY (warm cream/sepia) ---------------- */ body.storefront-literary { --sf-bg-1: #1a1208; --sf-bg-2: #2a1e10; --sf-banner-bg: #100a05; --sf-accent: #c8a060; --sf-accent-deep: #6e4a1c; --sf-accent-mid: #946834; --sf-text-strong: #faf2e0; --sf-text-soft: #d8c8a8; --sf-font-display: 'Cormorant Garamond', serif; --sf-font-body: 'Cormorant Garamond', serif; }