/* sun-hero.css - isolated Sun "Evidence Board" landing (v3.13). * * An investigation / case-file board. The visitor is the investigator; R.C.F.S. * is the subject under review. Scattered clue cards drift on mouse movement; * red dashed linkages tie clues to the center dossier abstract. The folder * drawer (sun-drawer) stays docked at the bottom as the organized sub-files. * * Opening a folder sets .reading - this module blurs + recedes the board * in 3D so the disciplined column grid (the dossier surface) takes over. No new * JS coupling: the blur is pure CSS keyed on body.reading, reused from the drawer. * * Scoped to [data-theme="sun"]; Moon never sees it. */ /* Scoped to [data-theme="sun"] so these tokens NEVER leak into Moon (an unscoped :root would override --border/--ink globally and corrupt Moon). */ [data-theme="sun"]{ --paper:#F0E4D2; --paper-2:#E9DAC2; --ink:#241F1A; --ink-soft:#4A4138; --bone:#F4ECDB; --zinc:#3A7080; --zinc-dim:#6E8A8E; --border:#7C6E5C; --border-dim:#C7B79F; --pigment:#B5443B; --mono:'Departure Mono','JetBrains Mono',ui-monospace,monospace; --serif:'Fraunces',Georgia,serif; --sans:'Newsreader',Georgia,serif; --kicker:'Archivo','Arial Narrow',sans-serif; } #sun-hero-root{ position:fixed; inset:0; z-index:4; pointer-events:none; } .evidence-board{ position:absolute; inset:0; z-index:4; background: linear-gradient(rgba(58,112,128,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(58,112,128,.055) 1px, transparent 1px), linear-gradient(rgba(58,112,128,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(58,112,128,.10) 1px, transparent 1px), radial-gradient(120% 80% at 50% 0%, rgba(58,112,128,.10), transparent 60%), radial-gradient(90% 70% at 50% 100%, rgba(36,31,26,.12), transparent 55%), var(--paper); background-size: 16px 16px, 16px 16px, 96px 96px, 96px 96px, 100% 100%, 100% 100%, 100% 100%; overflow:hidden; perspective:1200px; pointer-events:none; } /* dark investigation margins where the owl / mask "observe" */ .evidence-board:after{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(60% 60% at 50% 50%, transparent 55%, rgba(36,31,26,.28) 100%); mix-blend-mode:multiply; } /* paper tooth - feTurbulence grain ON the board surface (the shared sun-paper-grain lives at body z3, *behind* this board at z4, so the board itself reads as bare stock without this). Soft-light so ink/type stay crisp. */ .evidence-board:before{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.5; mix-blend-mode:soft-light; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='ebn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23ebn)'/%3E%3C/svg%3E"); } /* ===== Editorial masthead (case-file header) ===== */ .eb-masthead{ position:absolute; top:18px; left:50%; transform:translateX(-50%); z-index:6; pointer-events:none; text-align:center; width:min(620px,86vw); } .eb-masthead .eb-kicker{ font-family:var(--mono); font-size:9px; letter-spacing:.42em; text-transform:uppercase; color:var(--zinc-dim); } .eb-masthead .eb-title{ font-family:var(--serif); font-style:italic; font-weight:600; font-size:23px; line-height:1.05; margin:3px 0 0; color:var(--ink); letter-spacing:-.01em; } .eb-masthead .eb-dateline{ font-family:var(--mono); font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:var(--zinc-dim); margin-top:4px; } /* folio sits bottom-right, outside the masthead column */ .eb-folio{ position:absolute; bottom:20px; right:26px; z-index:6; pointer-events:none; font-family:var(--mono); font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--zinc-dim); } /* dock-lock: folder open recedes + blurs the whole board */ body.reading .evidence-board{ filter:blur(9px) brightness(.78) saturate(.9); transform:translateZ(-160px) scale(.96); opacity:.45; transition:filter .6s cubic-bezier(.25,1,.5,1), transform .6s cubic-bezier(.25,1,.5,1), opacity .5s ease; } .evidence-board{ transition:filter .5s ease, transform .5s ease, opacity .5s ease; } /* board caption (flavor, non-interactive) */ .board-caption{ position:absolute; top:26px; left:30px; z-index:6; pointer-events:none; font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--zinc-dim); } .board-caption b{ color:var(--pigment); font-weight:400; } .board-caption .blink{ animation:ebBlink 1.4s steps(1) infinite; } @keyframes ebBlink{ 50%{ opacity:.25 } } /* ===== Center dossier abstract card ===== */ .dossier-center-card{ position:absolute; top:50%; left:50%; width:min(440px,82vw); transform:translate(-50%,-50%) rotate(-.6deg); background:linear-gradient(180deg, var(--bone), var(--paper-2)); border:1px solid var(--border); box-shadow:0 18px 50px rgba(36,31,26,.22); /* torn-paper edge (keeps type crisp; only the card border chews) */ -webkit-mask-image:radial-gradient(140% 140% at 50% 50%, #000 82%, transparent 100%); mask-image:radial-gradient(140% 140% at 50% 50%, #000 82%, transparent 100%); padding:26px 28px 30px; pointer-events:none; z-index:6; } .dossier-center-card:before{ /* paperclip / washer pin */ content:""; position:absolute; top:-14px; left:30px; width:26px; height:42px; border:3px solid var(--zinc); border-radius:14px; border-bottom-color:transparent; transform:rotate(18deg); opacity:.8; } .dossier-center-card .stamp-red{ position:absolute; top:14px; right:16px; transform:rotate(9deg); font-family:var(--mono); font-size:12px; letter-spacing:.18em; color:var(--pigment); border:2px solid var(--pigment); padding:3px 8px; text-transform:uppercase; opacity:.85; filter:url(#ink-bleed); /* fibrous stamped edge */ } .dossier-center-card .file-no{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--zinc-dim); text-transform:uppercase; } .dossier-center-card h2{ font-family:var(--serif); font-style:italic; font-weight:600; font-size:34px; line-height:1; margin:8px 0 0; color:var(--ink); letter-spacing:-.01em; } .dossier-center-card .eb-deck{ font-family:var(--sans); font-style:italic; font-size:12.5px; line-height:1.5; color:var(--zinc); margin:8px 0 0; } /* editorial title block - case-file metadata grid (content depth) */ .dossier-center-card .eb-titleblock{ display:grid; grid-template-columns:auto 1fr; gap:2px 14px; margin:14px 0 0; padding:11px 0; border-top:1px dashed var(--border); border-bottom:1px dashed var(--border); font-family:var(--mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; } .dossier-center-card .eb-titleblock dt{ color:var(--zinc-dim); } .dossier-center-card .eb-titleblock dd{ margin:0; color:var(--ink-soft); } .dossier-center-card .lede{ font-family:var(--sans); font-size:13.5px; line-height:1.6; color:var(--ink-soft); margin:14px 0 0; text-align:justify; hyphens:auto; } /* CASE SUMMARY - the through-line payoff: appears only when all redactions lift */ .dossier-center-card .eb-summary{ margin-top:14px; padding:11px 12px; border:1px solid var(--pigment); background:rgba(181,68,59,.06); opacity:0; max-height:0; overflow:hidden; transition:opacity .5s ease, max-height .5s ease; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--pigment); line-height:1.5; } .dossier-center-card .eb-summary b{ font-weight:400; } .dossier-center-card.case-closed .eb-summary{ opacity:1; max-height:120px; } .dossier-center-card .lede:first-letter{ font-family:var(--serif); font-weight:600; font-size:2.8em; float:left; line-height:.8; padding:4px 8px 0 0; color:var(--zinc); } .dossier-center-card .status{ margin-top:16px; padding-top:12px; border-top:1px dashed var(--border); font-family:var(--mono); font-size:10px; letter-spacing:.18em; color:var(--zinc); text-transform:uppercase; display:flex; justify-content:space-between; gap:10px; } /* ===== Scattered clue cards ===== */.clue-item{ position:absolute; top:var(--top); left:var(--left); right:var(--right); transform:rotate(var(--rot)); z-index:5; pointer-events:auto; cursor:grab; will-change:transform; touch-action:none; /* prevent native scroll/zoom from fighting Draggable on touch */ outline:none; /* we supply our own focus ring below */ } .clue-item:focus-visible{ outline:2px solid var(--pigment,#B5443B); outline-offset:3px; border-radius:2px; } .clue-item:focus-visible .clue-card{ transform:translate(-3px,-5px) rotate(-1deg); box-shadow:0 12px 20px -8px rgba(36,31,26,.4), 0 0 0 1px var(--pigment,#B5443B); } .clue-item:active{ cursor:grabbing; } .clue-card{ background:var(--bone); padding:8px 8px 26px; border:1px solid var(--border-dim); box-shadow:0 3px 7px -3px rgba(36,31,26,.42), inset 0 1px 0 rgba(255,255,255,.3); transform:translate(0,0); transition:transform .35s cubic-bezier(.25,1,.5,1), box-shadow .35s ease; } .clue-item:hover .clue-card{ transform:translate(-3px,-5px) rotate(-1deg); box-shadow:0 12px 20px -8px rgba(36,31,26,.4); } .clue-card img{ display:block; width:100%; max-width:172px; height:auto; filter:grayscale(1) contrast(1.18) brightness(.98); background:var(--paper-2,#E9DAC2); /* prevents blank white flash through transparent cutouts */ } .clue-card img.self{ filter:none; border-radius:50%; object-fit:cover; aspect-ratio:1 / 1; max-width:118px; margin:0 auto; border:2px solid var(--pigment); background:var(--paper-2,#E9DAC2); } .clue-card .clue-tag{ position:absolute; left:10px; bottom:8px; font-family:var(--mono); font-size:8px; letter-spacing:.12em; color:var(--zinc-dim); text-transform:uppercase; } .clue-card .clue-corner{ position:absolute; top:6px; right:8px; width:9px; height:9px; border:1.5px solid var(--pigment); border-radius:50%; opacity:.5; } .clue-item .pin{ position:absolute; top:-9px; left:50%; transform:translateX(-50%); width:16px; height:16px; border-radius:50%; z-index:3; background:radial-gradient(circle at 35% 28%, #e8795a 0%, var(--pigment) 55%, #8e2f29 100%); box-shadow:0 3px 4px rgba(36,31,26,.45), inset 0 1px 1px rgba(255,255,255,.35); } .clue-item .pin:after{ content:""; position:absolute; top:3px; left:4px; width:5px; height:4px; border-radius:50%; background:rgba(255,255,255,.55); } /* masking-tape anchors - rendered as crisp CSS, no PNG */ .clue-card::before, .clue-card::after{ content:""; position:absolute; top:-8px; width:42px; height:16px; z-index:2; opacity:.92; background:linear-gradient(180deg, rgba(230,216,186,.92), rgba(210,194,156,.82)); border-left:1px solid rgba(255,255,255,.5); border-right:1px solid rgba(140,120,86,.35); box-shadow:0 1px 2px rgba(36,31,26,.25); } .clue-card::before{ left:6px; transform:rotate(-7deg); } .clue-card::after{ right:6px; transform:rotate(6deg); } /* ===== Nomadic trace route (board-level accent) ===== */ .board-trace{ position:absolute; inset:0; width:100%; height:100%; z-index:3; pointer-events:none; overflow:visible; } .board-trace path{ fill:none; stroke:var(--zinc-dim); stroke-width:1; vector-effect:non-scaling-stroke; stroke-dasharray:2 3; opacity:.5; } .board-trace circle{ fill:var(--zinc-dim); opacity:.5; } /* ===== Pinned board accents (passport / map fragments / field notes) ===== */ .board-accent{ position:absolute; z-index:4; pointer-events:none; transform:rotate(var(--rot)); width:118px; } .board-accent::before{ content:""; position:absolute; top:-8px; left:50%; transform:translateX(-50%) rotate(-4deg); width:46px; height:15px; z-index:3; opacity:.92; background:linear-gradient(180deg, rgba(230,216,186,.92), rgba(210,194,156,.82)); border-left:1px solid rgba(255,255,255,.5); border-right:1px solid rgba(140,120,86,.35); box-shadow:0 1px 2px rgba(36,31,26,.25); } .board-accent img{ display:block; width:100%; filter:grayscale(1) contrast(1.25) brightness(.98); border:1px solid var(--border-dim); background:var(--paper-2,#E9DAC2); box-shadow:0 3px 7px -3px rgba(36,31,26,.4), inset 0 1px 0 rgba(255,255,255,.3); } .board-accent .note{ display:block; margin-top:5px; font-family:var(--mono); font-size:8px; letter-spacing:.08em; color:var(--zinc-dim); text-transform:uppercase; text-align:left; } .board-accent.accent-note{ width:152px; background:linear-gradient(180deg, var(--bone), var(--paper-2)); border:1px solid var(--border-dim); padding:10px 11px; box-shadow:0 3px 7px -3px rgba(36,31,26,.4), inset 0 1px 0 rgba(255,255,255,.3); } .board-accent.accent-note .note{ margin-top:0; color:var(--ink-soft); line-height:1.5; letter-spacing:.06em; } /* ===== Red evidentiary linkages (dynamic string network) ===== */ .board-linkages{ position:absolute; inset:0; width:100%; height:100%; z-index:5; pointer-events:none; overflow:visible; } /* continuous physical thread - anchored at each clue's pushpin, drawn in JS */ .board-linkages line{ stroke:var(--pigment); stroke-width:1.6; opacity:.62; transition:opacity .3s ease, stroke-width .3s ease, filter .3s ease; } .board-linkages line.dim{ opacity:.28; stroke-width:1.1; } .board-linkages .node{ fill:var(--pigment); opacity:.8; } /* coordinate radar: hovered clue's thread glows + magnetizes toward pointer */ .board-linkages line.thread.hot{ opacity:1; stroke-width:3; filter:drop-shadow(0 0 4px var(--pigment)); stroke:var(--pigment); } /* ===== Feature 1: Hand-Stamp toolbar badge ===== */ .eb-stamp-badge{ position:absolute; top:24px; right:26px; z-index:8; pointer-events:auto; display:flex; align-items:center; gap:8px; cursor:pointer; background:linear-gradient(180deg, var(--bone), var(--paper-2)); border:1px solid var(--border); border-radius:4px; padding:7px 11px 7px 8px; font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); box-shadow:0 4px 10px -4px rgba(36,31,26,.5); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease; } .eb-stamp-badge img{ width:24px; height:24px; object-fit:cover; border-radius:3px; } .eb-stamp-badge:hover{ transform:translateY(-1px); box-shadow:0 7px 14px -5px rgba(36,31,26,.55); } .eb-stamp-badge:focus-visible{ outline:2px solid var(--pigment); outline-offset:2px; } .eb-stamp-badge[aria-pressed="true"], .eb-stamp-badge.on{ color:var(--pigment); border-color:var(--pigment); box-shadow:0 0 0 1px var(--pigment), 0 6px 14px -5px rgba(181,68,59,.6); } /* In stamp mode the board cursor becomes the magnifier/hand; clicks drop stamps */ .evidence-board.stamping{ cursor:crosshair; } .evidence-board.stamping .clue-item{ cursor:crosshair; } /* Drop layer hosts rotated red SVG stamps (pointer-transparent) */ .eb-stamp-layer{ position:absolute; inset:0; z-index:7; pointer-events:none; overflow:hidden; } .eb-stamp{ position:absolute; width:96px; height:96px; color:var(--pigment); transform:translate(-50%,-50%) rotate(var(--rot)) scale(1.6); opacity:0; filter:blur(1px); transition:opacity .18s ease, transform .18s ease, filter .18s ease; } .eb-stamp.set{ opacity:.82; transform:translate(-50%,-50%) rotate(var(--rot)) scale(1); filter:blur(0); } .eb-stamp svg{ width:100%; height:100%; display:block; filter:url(#ink-bleed); } /* faint persistent pigment residue left after each sign-off (ink soaks paper) */ .eb-stamp-layer .eb-stain{ position:absolute; width:96px; height:96px; color:var(--pigment); transform:translate(-50%,-50%) rotate(var(--rot)) scale(1); opacity:0; pointer-events:none; background:radial-gradient(closest-side, var(--pigment) 0%, transparent 70%); mix-blend-mode:multiply; filter:blur(6px); transition:opacity 1.2s ease; } .eb-stamp-layer .eb-stain.set{ opacity:.08; } .eb-stamp text{ fill:currentColor; font-family:var(--mono); text-transform:uppercase; } .eb-stamp .eb-stamp-1{ font-size:17px; letter-spacing:2px; } .eb-stamp .eb-stamp-2{ font-size:13px; letter-spacing:3px; } .eb-stamp .eb-stamp-3{ font-size:6px; letter-spacing:1px; opacity:.85; } /* ===== Feature 2: Progressive intel (redaction reveal) ===== */ .redact{ background:var(--ink); color:var(--ink); border-radius:2px; transition:background .35s ease, color .35s ease; cursor:help; } .redact.revealed{ background:transparent; color:var(--pigment); filter:url(#ink-bleed); } /* ===== Feature 3: Interactive loupe ===== Shows the ENTIRE clue asset, enlarged + in true color (the board clips it to grayscale). contain (not cover) so no part is cropped - you can see all of it. */ .eb-loupe{ position:fixed; top:0; left:0; z-index:9; width:280px; height:280px; pointer-events:none; border-radius:12px; border:3px solid var(--zinc); background:var(--paper-2); box-shadow:0 14px 30px -8px rgba(36,31,26,.6), inset 0 0 0 2px rgba(255,255,255,.35); overflow:hidden; opacity:0; transition:opacity .15s ease; will-change:transform; } .eb-loupe.on{ opacity:1; } .eb-loupe:after{ /* glass glare */ content:""; position:absolute; inset:0; border-radius:12px; pointer-events:none; background:radial-gradient(60% 50% at 35% 28%, rgba(255,255,255,.28), transparent 60%); } .eb-loupe img{ width:100%; height:100%; object-fit:contain; object-position:center; filter:grayscale(0) contrast(1.08); background:var(--paper-2); } /* ===== Feature 4: Pencil marks + coordinate radar readout ===== */ .eb-coords{ position:absolute; bottom:22px; left:28px; z-index:8; pointer-events:none; font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--zinc-dim); background:rgba(244,236,219,.7); border:1px solid var(--border-dim); padding:5px 9px; border-radius:3px; backdrop-filter:blur(2px); } /* ===== Reduced-motion gating (Evidence Board enhancements) ===== */ @media (prefers-reduced-motion: reduce){ .eb-loupe{ display:none; } .eb-stamp{ transition:none; opacity:.82; transform:translate(-50%,-50%) rotate(var(--rot)) scale(1); } .evidence-board .clue-item{ transition:none; } .board-linkages line.thread.hot{ filter:none; } .eb-coords{ opacity:.7; } /* grain calmed, case-summary shown without slide, ink-bleed kept (static look) */ .evidence-board:before{ opacity:.28; } .dossier-center-card .eb-summary{ transition:none; } } /* ===== Touch Loupe Overlay (mobile inspect preview) ===== Shown on touch devices when a clue is tapped: a fixed centered overlay with the clue's full image, auto-dismissing after 1.5s. */ @media (hover: none) and (pointer: coarse){ .eb-touch-loupe{ position:fixed; top:0; left:0; right:0; bottom:0; z-index:900; display:flex; align-items:center; justify-content:center; background:rgba(36,31,26,.55); opacity:0; pointer-events:none; transition:opacity .25s ease; } .eb-touch-loupe.active{ opacity:1; pointer-events:auto; } .eb-touch-loupe .eb-tl-card{ width:min(320px,82vw); padding:14px 14px 20px; background:var(--bone,#F4ECDB); border:1px solid var(--border,#7C6E5C); box-shadow:0 30px 60px -20px rgba(36,31,26,.6); transform:translateY(12px); transition:transform .3s cubic-bezier(.25,1,.5,1), opacity .3s ease; opacity:0; } .eb-touch-loupe.active .eb-tl-card{ transform:translateY(0); opacity:1; } .eb-touch-loupe .eb-tl-card img{ display:block; width:100%; height:auto; filter:grayscale(0) contrast(1.08); background:var(--paper-2,#E9DAC2); } .eb-touch-loupe .eb-tl-card .eb-tl-caption{ display:block; margin-top:10px; font-family:var(--mono,'Departure Mono',monospace); font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--zinc-dim,#6E8A8E); text-align:center; } /* Touch stamp preview - a crosshair ghost that follows the finger */ .eb-touch-stamp-preview{ position:fixed; pointer-events:none; z-index:899; width:96px; height:96px; margin-left:-48px; margin-top:-48px; border:2px dashed var(--pigment,#B5443B); border-radius:6px; opacity:0; transition:opacity .15s ease; } .eb-touch-stamp-preview.active{ opacity:.5; } .eb-touch-stamp-preview:after{ content:""; position:absolute; top:50%; left:50%; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; background:var(--pigment); opacity:.6; } .eb-touch-stamp-preview .eb-ts-label{ position:absolute; bottom:-22px; left:50%; transform:translateX(-50%); font-family:var(--mono,'Departure Mono',monospace); font-size:7px; letter-spacing:.12em; text-transform:uppercase; color:var(--pigment); white-space:nowrap; } /* Hide desktop-only features on touch */ .eb-loupe{ display:none !important; } .eb-coords{ display:none !important; } }