/* ============================================================ EXCERPT PLACE — Platform Styles (platform.css) Photo-driven backgrounds · Custom logo image · Antiquarian feel ============================================================ PHOTO SETUP — TWO THINGS TO CONFIGURE: ───────────────────────────────────────────────────────────── 1. BACKGROUND PHOTO Replace "library-bg.jpg" in --bg-photo below with your photo filename. Upload the photo alongside your HTML files. Recommended: warm library/bookshelf photo, landscape, min 1920×1080 px. Dark or shadow-heavy photos work best. Adjust --bg-overlay to make the photo lighter or darker. 2. WORDMARK LOGO Replace "ep-logo.png" in --logo-photo below with your logo filename. Upload the logo file alongside your HTML. Recommended: transparent PNG, min 200×200 px. The logo appears in the nav of every page. If the file is missing, "EP" text shows as a fallback. ───────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,700;1,400;1,500&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Josefin+Sans:wght@200;300;400&display=swap'); :root { /* ── Photo configuration — edit these ─────────────────── */ --bg-photo: url("library-bg.jpg"); /* background photo filename */ --logo-photo: url("ep-logo.png"); /* wordmark logo filename */ --logo-size: 50px; /* logo display size in nav */ --bg-overlay: rgba(8, 4, 1, 0.70); /* overlay darkness: raise = darker, lower = more photo */ --bg-blur: 0px; /* blur on photo: 0px=sharp, 2px=soft */ --bg-position: center center; /* photo focal point */ --bg-size: cover; /* cover=fill frame, contain=show all */ /* ── Core palette ──────────────────────────────────────── */ --walnut: #1c0e04; --walnut-d: #0e0600; --leather: #5c3010; --leather-lt: #7a4520; --vellum: #f2e8d5; --vellum-lt: #faf5ec; --gold: #b8963c; --gold-lt: #d4af5c; --gold-dim: rgba(184,150,60,0.22); --ink: #1a1005; --mid: #3d2410; --muted: #7a5830; --cream: #fdf8f0; --brand: #8B2E12; --brand-lt: #b03818; /* ── Typography ────────────────────────────────────────── */ --ff-display: 'Playfair Display', 'Georgia', serif; --ff-body: 'Libre Baskerville', 'Georgia', serif; --ff-ui: 'Josefin Sans', sans-serif; --r: 1px; --ease: 0.2s ease; } /* ── Reset ───────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--ff-body); background-color: #0a0400; /* fallback color if photo is missing */ color: var(--ink); overflow-x: hidden; -webkit-font-smoothing: antialiased; } ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: #0a0400; } ::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 3px; } /* ══════════════════════════════════════════════════════════ PHOTO BACKGROUND SYSTEM ══════════════════════════════════════════════════════════ The .lib-bg element is placed at the top of every page's . It contains four layers that stack together: Layer 1: .lib-bg__photo — the actual background image Layer 2: .lib-bg__overlay — dark semi-transparent screen Layer 3: .lib-bg__vignette — darkens edges, focuses center Layer 4: .lib-bg__top-fade — keeps nav readable at top */ .lib-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; } /* Layer 1 — photo */ .lib-bg__photo { position: absolute; inset: 0; background-image: var(--bg-photo); background-size: var(--bg-size); background-position: var(--bg-position); background-repeat: no-repeat; background-attachment: fixed; /* Subtle warmth shift to complement the library palette */ filter: blur(var(--bg-blur)) sepia(0.12) saturate(0.92) brightness(0.95); /* Smooth in when photo loads */ animation: bgFadeIn 0.8s ease both; } @keyframes bgFadeIn { from { opacity: 0; } to { opacity: 1; } } /* Layer 2 — overlay */ .lib-bg__overlay { position: absolute; inset: 0; background: var(--bg-overlay); } /* Layer 3 — vignette (darkens edges) */ .lib-bg__vignette { position: absolute; inset: 0; background: radial-gradient( ellipse 88% 78% at 50% 44%, transparent 0%, rgba(4, 2, 0, 0.28) 55%, rgba(4, 2, 0, 0.68) 100% ); } /* Layer 4 — top fade (makes nav text legible) */ .lib-bg__top-fade { position: absolute; top: 0; left: 0; right: 0; height: 130px; background: linear-gradient(to bottom, rgba(4,2,0,0.65) 0%, transparent 100%); } /* Layer 5 — bottom fade */ .lib-bg__bottom-fade { position: absolute; bottom: 0; left: 0; right: 0; height: 90px; background: linear-gradient(to top, rgba(4,2,0,0.52) 0%, transparent 100%); } /* Floor strip — subtle parquet hint */ .floor { position: fixed; bottom: 0; left: 0; right: 0; height: 52px; z-index: 2; pointer-events: none; background: repeating-linear-gradient(90deg, rgba(184,150,60,.02) 0px, rgba(184,150,60,.02) 1px, transparent 1px, transparent 85px), linear-gradient(to top, rgba(3,1,0,.42), transparent); } /* ══════════════════════════════════════════════════════════ EXCERPT PLACE WORDMARK WITH PHOTO LOGO ══════════════════════════════════════════════════════════ The wordmark uses a photo/image logo instead of the generated "EP" circle. Three parts: 1. .ep-wordmark__logo — the container box 2. .ep-wordmark__logo-img — your logo image (ep-logo.png) 3. .ep-wordmark__logo-fb — "EP" text fallback if image fails JavaScript in each page handles the fallback switching. See the initWordmark() function in each HTML file. */ .ep-wordmark { font-family: var(--ff-display); font-size: 1.4rem; font-style: italic; color: var(--gold-lt); text-decoration: none; letter-spacing: 0.01em; display: inline-flex; align-items: center; gap: 11px; user-select: none; } /* Logo image container */ .ep-wordmark__logo { position: relative; width: var(--logo-size); height: var(--logo-size); flex-shrink: 0; display: flex; align-items: center; justify-content: center; } /* The photo logo */ .ep-wordmark__logo-img { width: 50%; height: 50%; object-fit: contain; object-position: center; display: block; /* If logo has hard edges, set border-radius: 0; for a sharp logo */ border-radius: 3px; /* Drop shadow adds depth against dark backgrounds */ filter: drop-shadow(0 1px 4px rgba(0,0,0,0.5)); } /* Text fallback (only visible if image fails to load) */ .ep-wordmark__logo-fb { display: none; /* JS shows this if img errors */ position: absolute; inset: 0; align-items: center; justify-content: center; border-radius: 50%; border: 1.5px solid var(--gold); font-family: var(--ff-ui); font-weight: 300; font-size: 0.78rem; color: var(--gold); font-style: normal; letter-spacing: 0.05em; background: rgba(28,14,4,0.55); } .ep-wordmark__logo-fb.show { display: flex; } /* Wordmark text parts */ .ep-wordmark__name { font-style: italic; } .ep-wordmark__sub { font-family: var(--ff-ui); font-weight: 200; font-size: 0.6rem; letter-spacing: 0.22em; color: rgba(212,175,92,0.38); font-style: normal; margin-left: 4px; } /* ── Panel / card ─────────────────────────────────────────── */ .panel { background: linear-gradient(155deg, rgba(250,245,236,0.96) 0%, rgba(235,220,198,0.97) 100%); border: 1px solid rgba(184,150,60,0.2); border-radius: var(--r); box-shadow: 0 20px 70px rgba(0,0,0,0.55), 0 2px 0 var(--gold), inset 0 1px 0 rgba(255,255,255,0.5); position: relative; overflow: hidden; } .panel::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: linear-gradient(to bottom, var(--gold-lt), var(--leather), var(--gold)); } .panel__hd { padding: 20px 22px 15px 27px; border-bottom: 1px solid rgba(184,150,60,0.12); } .panel__bd { padding: 18px 22px 22px 27px; } /* ── Video wrap ───────────────────────────────────────────── */ .vid-wrap { width: 100%; aspect-ratio: 16/9; background: #080300; border: 1px solid rgba(184,150,60,0.1); border-radius: 1px; position: relative; overflow: hidden; } .vid-wrap iframe, .vid-wrap video { position: absolute; inset: 0; width: 100%; height: 100%; border: none; } .vid-ph { position: absolute; inset: 0; background: radial-gradient(ellipse at center, #1c0e03 0%, #060200 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; } .vid-ph p { font-family: var(--ff-ui); font-weight: 200; font-size: .58rem; letter-spacing: .3em; text-transform: uppercase; color: rgba(184,150,60,.42); } .play-btn { width: 54px; height: 54px; border-radius: 50%; border: 1.5px solid var(--gold); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 0 24px rgba(184,150,60,.16); transition: transform .2s, box-shadow .2s; } .play-btn:hover { transform: scale(1.1); box-shadow: 0 0 44px rgba(184,150,60,.3); } .play-btn svg { fill: var(--gold); margin-left: 3px; } /* ── Passage caption ──────────────────────────────────────── */ .passage-block { margin-top: 13px; background: rgba(255,255,255,.36); border-left: 3px solid var(--gold-dim); padding: 14px 18px; } .passage-block__title { font-family: var(--ff-ui); font-weight: 200; font-size: .56rem; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; } .passage-block__text { font-family: var(--ff-body); font-size: .88rem; color: var(--mid); line-height: 1.82; font-style: italic; } /* ── Form ─────────────────────────────────────────────────── */ .field { margin-bottom: 17px; } .field label { display: block; font-family: var(--ff-ui); font-weight: 300; font-size: .58rem; letter-spacing: .28em; text-transform: uppercase; color: var(--leather); margin-bottom: 6px; } .field input, .field textarea, .field select { width: 100%; background: rgba(255,255,255,.46); border: 1px solid rgba(92,48,16,.15); border-bottom: 1.5px solid var(--leather); border-radius: 1px; padding: 10px 12px; font-family: var(--ff-body); font-size: .96rem; color: var(--ink); transition: border-color var(--ease), box-shadow var(--ease); outline: none; appearance: none; } .field input::placeholder, .field textarea::placeholder { color: rgba(92,48,16,.28); font-style: italic; } .field input:focus, .field textarea:focus { border-color: var(--gold); background: rgba(255,255,255,.68); box-shadow: 0 2px 0 rgba(184,150,60,.15); } .field textarea { resize: vertical; min-height: 84px; } /* ── Buttons ──────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 7px; padding: 12px 24px; border: none; border-radius: var(--r); cursor: pointer; font-family: var(--ff-ui); font-weight: 300; font-size: .62rem; letter-spacing: .28em; text-transform: uppercase; text-decoration: none; transition: opacity var(--ease), transform var(--ease); position: relative; overflow: hidden; white-space: nowrap; } .btn::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent); transition: left .36s; } .btn:hover { opacity: .9; transform: translateY(-1px); } .btn:hover::after { left: 100%; } .btn:active { transform: translateY(0); } .btn--primary { background: linear-gradient(135deg, var(--walnut), var(--leather)); color: var(--gold-lt); box-shadow: 0 4px 16px rgba(28,14,4,.45), inset 0 1px 0 rgba(255,255,255,.07); } .btn--brand { background: linear-gradient(135deg, var(--brand), var(--brand-lt)); color: var(--vellum); box-shadow: 0 4px 16px rgba(139,46,18,.35); } .btn--ghost { background: transparent; border: 1px solid var(--gold-dim); color: var(--gold-lt); } .btn--ghost:hover { border-color: var(--gold); background: rgba(184,150,60,.07); } .btn--outline { background: transparent; border: 1px solid rgba(92,48,16,.26); color: var(--leather); } .btn--full { width: 100%; justify-content: center; } /* ── Gold divider ─────────────────────────────────────────── */ .gold-rule { display: flex; align-items: center; gap: 13px; margin: 18px 0; } .gold-rule::before, .gold-rule::after { content: ''; flex: 1; height: 1px; background: linear-gradient(to right, transparent, var(--gold), transparent); } .gold-rule span { color: var(--gold); font-size: .76rem; } /* ── Badge ────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 20px; font-family: var(--ff-ui); font-weight: 300; font-size: .52rem; letter-spacing: .16em; text-transform: uppercase; } .badge--active { background: rgba(6,78,59,.12); color: #065f46; border: 1px solid rgba(6,78,59,.2); } .badge--scheduled { background: rgba(30,64,175,.08); color: #1e40af; border: 1px solid rgba(30,64,175,.16); } .badge--archived { background: rgba(92,48,16,.08); color: var(--muted); border: 1px solid rgba(92,48,16,.16); } /* ── Int note ─────────────────────────────────────────────── */ .int-note { background: rgba(28,14,4,.04); border: 1px dashed rgba(92,48,16,.18); border-radius: var(--r); padding: 8px 12px; font-size: .76rem; color: var(--muted); font-style: italic; line-height: 1.6; margin-top: 10px; } .int-note code { background: rgba(92,48,16,.08); padding: 1px 4px; border-radius: 2px; font-style: normal; font-size: .68rem; font-family: monospace; } /* ── Journey step bar ─────────────────────────────────────── */ .j-step { display: flex; align-items: center; gap: 6px; font-family: var(--ff-ui); font-weight: 200; font-size: .52rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(242,232,213,.28); transition: color .3s; } .j-step.active { color: var(--gold); } .j-step.done { color: rgba(184,150,60,.4); } .j-step__dot { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; } .j-step.active .j-step__dot, .j-step.done .j-step__dot { background: currentColor; } .j-conn { flex: 1; height: 1px; background: rgba(184,150,60,.1); margin: 0 5px; } /* ── Toast ────────────────────────────────────────────────── */ .toast { position: fixed; bottom: 26px; right: 26px; background: linear-gradient(135deg, var(--walnut), var(--leather)); color: var(--gold-lt); padding: 11px 18px; border-radius: var(--r); border-top: 2px solid var(--gold); font-family: var(--ff-ui); font-size: .6rem; letter-spacing: .1em; box-shadow: 0 9px 30px rgba(0,0,0,.5); z-index: 9999; opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; pointer-events: none; } .toast.show { opacity: 1; transform: translateY(0); } /* ── Live badge ───────────────────────────────────────────── */ .live-badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--ff-ui); font-size: .5rem; letter-spacing: .18em; text-transform: uppercase; color: #34d399; } .live-dot { width: 6px; height: 6px; border-radius: 50%; background: #34d399; box-shadow: 0 0 6px rgba(52,211,153,.5); animation: livePulse 2s ease-in-out infinite; } @keyframes livePulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .6; transform: scale(.82); } } /* ── Animations ───────────────────────────────────────────── */ @keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .au { animation: fadeUp .62s ease both; } .au-1 { animation-delay: .08s; } .au-2 { animation-delay: .16s; } .au-3 { animation-delay: .24s; } .au-4 { animation-delay: .32s; } /* ── Responsive ───────────────────────────────────────────── */ @media (max-width: 768px) { .floor { display: none; } /* On mobile, fixed background attachment can be slow — switch to scroll */ .lib-bg__photo { background-attachment: scroll; } }