/* ══ THE UNLOCK PANEL — SHARED, ONE COPY, TWO PLACES ═══════════════════════ The "Unlock the free companion guide" opt-in. It appears in exactly two places and they must stay identical: 1. /oracle-deck/ — after a card lands (#unlockPanel) 2. /oracle-deck/guide/ — the gate on all SIX guide pages (#gGate), shown to anyone who hasn't opted in yet This file exists because those two used to be different: the deck had the full panel (key, benefits, three page previews) and the guide gate had a bare title + note + form. Simone, 2026-08-08, looking at the guide on her phone: "it is only showing the text of 'Want the full guide?...' and the opt-in fields. I want this page to show the entire opt-in section we worked on, with the screenshots, etc." The rules were inline in oracle-deck/index.html until then. They were lifted out rather than copy-pasted into guide.css on purpose: the day before, the key icon's size was fixed in one place, and a duplicated copy would already have been wrong. EDIT HERE AND BOTH PAGES CHANGE. Don't re-inline it. No url() in this file, so it doesn't care what folder it's linked from. The IMAGE SRCs live in the markup and DO differ by depth: deck uses assets/…, the guide uses ../assets/… ─────────────────────────────────────────────────────────────────────────── */ .unlock-panel{position:relative;max-width:640px;margin:2.2rem auto 0;background:rgba(255,255,255,0.05);border:1px solid rgba(201,168,118,0.16);border-radius:20px;padding:2.2rem 2.4rem 1.8rem;box-shadow:0 8px 40px rgba(0,0,0,0.3);text-align:center} .unlock-panel__close{position:absolute;top:10px;right:12px;background:none;border:none;color:var(--card-gold);opacity:0.7;font-size:1.5rem;line-height:1;cursor:pointer;padding:6px} .unlock-panel__close:hover{opacity:1} /* A key, for "unlock". Deliberately the one solid/shaded graphic in the set -- it lives on the opt-in only, never beside the flat gold line art inside the guide, so the difference in style never shows. The key art is a tall, narrow, very detailed engraving (112x360, so ~1:3.2). It was set to height:22px, which makes it SIX PIXELS WIDE -- at that size all the filigree collapses into a single scratchy vertical line, which is what Simone saw as "the key icon is broken" (2026-08-08). It needs real height to be readable as a key at all; 46px gives it ~14px of width, which is where the bow and the bit start to be legible. flex:0 0 auto stops the row from shrinking an already-narrow item any further on a phone. It also gets NO flanking dashes, unlike the other motifs in this project: at a legible size, a horizontal rule either side of a tall vertical key reads as a crucifix, which is the wrong symbol for this deck. */ .unlock-panel__motif{display:flex;align-items:center;justify-content:center;gap:0.7rem;margin-bottom:1.1rem} .unlock-panel__motif img{width:20px;opacity:0.8} .unlock-panel__motif .unlock-panel__key{width:auto;height:46px;flex:0 0 auto;opacity:0.55;filter:none} .unlock-panel__motif .dash{width:20px;height:1px;background:rgba(201,168,118,0.35)} .unlock-panel__title{font-family:'Walter Turncoat',cursive;font-size:1.5rem;color:var(--sg-cream);margin-bottom:0.8rem;line-height:1.3} .unlock-panel__intro{font-size:0.92rem;color:var(--ink-soft);margin-bottom:0.9rem} /* DRAFT COPY per Simone, 2026-08-07: she invited a first draft for these 3 benefit lines rather than a bracket placeholder -- grounded in the real guide pages (Welcome's "recognizing the spirit's voice" theme, the deck page's live tips copy "feel stuck, want clarity", and practice.html's "2-Minute Version"/practices content) but NOT live copy anywhere, so still needs Simone's sign-off before this ships. */ .unlock-panel__benefits{list-style:none;text-align:left;max-width:440px;margin:0 auto 1.4rem;font-size:0.9rem;color:var(--ink-soft)} .unlock-panel__benefits li{position:relative;padding-left:1.6rem;margin-bottom:0.55rem} .unlock-panel__benefits li::before{content:"✓";position:absolute;left:0;top:0;color:var(--sg-yellow);font-weight:700} /* Page-preview thumbnails -- real captures of the guide's own pages (guide-preview-lineage/practice/faq.jpg; reshoot them whenever the guide's layout or titles change, or this panel advertises a guide that no longer exists). Rebuilt 2026-08-08 against "oracle mockup-2 - opt in" because Simone said the old row looked "less polished than in the mock-ups" -- three differences, all from that file: 1. CORNERS. Radius was 8px on a 160px card, which read soft and blobby. 4px, so they read as photographs rather than app tiles. 2. LABELS. They sat ON the image under a dark gradient, which muddied the picture. In the mockup they sit BELOW, on one shared baseline. .preview-thumb__label has a fixed height so a title that wraps to two lines (e.g. "Where this idea came from") can't knock that baseline out. 3. OVERLAP + HIERARCHY. They were three equal tiles with gaps between. In the mockup the middle one is bigger, raised, and on top, and the outer two tilt inward and tuck BEHIND its edges -- so negative margins, not a gap. The images also get a brightness lift: the guide is dark navy sitting on a dark navy panel, so ungraded captures disappeared into the background (Simone: "maybe it's the color of the background"). */ .unlock-panel__previews{display:flex;align-items:flex-end;justify-content:center;margin-bottom:1.8rem;padding:0 0.4rem} .preview-thumb{position:relative;display:flex;flex-direction:column;align-items:center;flex:0 0 auto;width:148px} .preview-thumb__shot{display:block;width:100%;aspect-ratio:5/4;border-radius:4px;overflow:hidden;background:var(--card-navy);border:1px solid rgba(201,168,118,0.3);box-shadow:0 10px 22px rgba(0,0,0,0.45)} .preview-thumb img{width:100%;height:100%;object-fit:cover;object-position:top left;filter:brightness(1.16) saturate(1.06)} /* Outer two: tilted inward, tucked behind the middle one. Rotated about their CENTRE, not a corner -- a corner origin swings the low edge down far enough to sit on top of the label underneath. */ .preview-thumb:first-child,.preview-thumb:last-child{z-index:1} .preview-thumb:first-child{margin-right:-18px} .preview-thumb:last-child{margin-left:-18px} .preview-thumb:first-child .preview-thumb__shot{transform:rotate(-6deg)} .preview-thumb:last-child .preview-thumb__shot{transform:rotate(6deg)} /* Middle: the anchor -- bigger, level, on top. It's bottom-aligned with the other two, so being taller is what makes it stand up higher. */ .preview-thumb:nth-child(2){z-index:2;width:176px} .preview-thumb:nth-child(2) .preview-thumb__shot{box-shadow:0 14px 30px rgba(0,0,0,0.55)} /* Fixed height so a two-line title can't push this row's baseline around. */ .preview-thumb__label{display:block;width:100%;height:3.1em;padding-top:1.05rem;font-size:0.66rem;line-height:1.3;letter-spacing:0.03em;color:var(--sg-cream);text-align:center} .unlock-panel__note{font-size:0.82rem;color:var(--ink-muted);margin-top:1rem} .unlock-panel__resend{margin-top:0.9rem;font-size:0.82rem} .unlock-panel__resend a{color:var(--sg-yellow);text-decoration:underline;opacity:0.85} .unlock-panel__resend a:hover{opacity:1} /* The guide gate's version is a plain sentence, not a link (see that page's markup for why). Sitting directly under the "we'll email you a link" note in the same grey, it read as a second paragraph of that note rather than a line for a different person. A hairline and a warmer italic separate the two. */ .unlock-panel__resend--plain{margin-top:1.3rem;padding-top:1.1rem;border-top:1px solid rgba(201,168,118,0.12);color:rgba(201,168,118,0.8);font-style:italic} .unlock-panel__link{display:inline-block;margin-top:0.4rem} /* ══ .btn — THE BUTTON, ALSO ONE COPY ══════════════════════════════════════ Moved here 2026-08-08. It lived twice: in guide.css and in the deck page's inline