/* ORA Production — LP shared styles */ /* Primary palette variables — override per-IP via :root on */ :root { --color-accent: #c97a5a; --color-accent-dark: #a85e3e; --color-bg: #0f0f0f; --color-surface: #1a1a1a; --color-text: #f0ece6; --color-muted: #9a9390; --color-border: #2e2a26; } /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--color-bg); color: var(--color-text); font-family: 'Georgia', 'Times New Roman', serif; line-height: 1.65; -webkit-font-smoothing: antialiased; } /* ── Typography ── */ h1, h2, h3 { line-height: 1.2; } h1 { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 700; letter-spacing: -0.02em; } h2 { font-size: clamp(1.25rem, 3vw, 1.75rem); font-weight: 600; } p { font-size: 1.05rem; color: var(--color-text); } /* ── Layout helpers ── */ .container { max-width: 680px; margin: 0 auto; padding: 0 1.25rem; } /* ── Hero ── */ .hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 3rem; text-align: center; overflow: hidden; } .hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center top; background-repeat: no-repeat; filter: brightness(0.45); z-index: 0; } .hero-content { position: relative; z-index: 1; max-width: 640px; padding: 0 1.25rem; } .hero-badge { display: inline-block; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 0.85rem; } .hero h1 { color: #fff; margin-bottom: 1rem; text-shadow: 0 2px 24px rgba(0,0,0,0.7); } .hero .tagline { font-size: clamp(1rem, 2.5vw, 1.15rem); color: rgba(255,255,255,0.82); margin-bottom: 2rem; font-style: italic; } .scroll-cue { display: inline-block; margin-top: 1rem; color: rgba(255,255,255,0.5); font-size: 0.8rem; font-family: 'Helvetica Neue', Arial, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; animation: bounce 2s infinite; } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } /* ── Sections ── */ .section { padding: 4rem 0; } .section + .section { border-top: 1px solid var(--color-border); } /* ── Synopsis ── */ .synopsis-block { font-size: 1.08rem; line-height: 1.8; color: var(--color-text); } .synopsis-block em { color: var(--color-accent); font-style: italic; } .book-title { font-size: 1.15rem; font-style: italic; color: #fff; display: block; margin-top: 1.25rem; } /* ── Inkitt CTA ── */ .btn-inkitt { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--color-accent); color: #fff; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 1rem; font-weight: 700; letter-spacing: 0.04em; padding: 0.875rem 2rem; border-radius: 4px; text-decoration: none; transition: background 0.2s, transform 0.15s; margin-top: 1.5rem; } .btn-inkitt:hover { background: var(--color-accent-dark); transform: translateY(-1px); } .btn-inkitt svg { width: 18px; height: 18px; flex-shrink: 0; } /* ── Email signup ── */ .signup-section { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px; padding: 2.5rem 2rem; text-align: center; } .signup-section h2 { color: #fff; margin-bottom: 0.5rem; } .signup-section p { color: var(--color-muted); margin-bottom: 1.5rem; font-size: 0.95rem; } .signup-form { display: flex; flex-direction: column; gap: 0.75rem; max-width: 420px; margin: 0 auto; } .signup-form input[type="email"] { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 4px; color: var(--color-text); font-size: 1rem; padding: 0.8rem 1rem; outline: none; transition: border-color 0.2s; width: 100%; } .signup-form input[type="email"]:focus { border-color: var(--color-accent); } .signup-form input[type="email"]::placeholder { color: var(--color-muted); } .btn-submit { background: var(--color-accent); border: none; border-radius: 4px; color: #fff; cursor: pointer; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 1rem; font-weight: 700; letter-spacing: 0.04em; padding: 0.875rem 1.5rem; transition: background 0.2s, transform 0.15s; width: 100%; } .btn-submit:hover { background: var(--color-accent-dark); transform: translateY(-1px); } .btn-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } /* Thank-you state */ .thank-you { display: none; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1.5rem; color: #fff; } .thank-you.visible { display: flex; } .thank-you .check-icon { font-size: 2.5rem; } .thank-you p { color: var(--color-muted); font-size: 0.95rem; } /* ── Footer ── */ footer { padding: 2rem 0; text-align: center; color: var(--color-muted); font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.8rem; border-top: 1px solid var(--color-border); } footer a { color: var(--color-muted); text-decoration: underline; } /* ── Utility ── */ .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }