/* ============================================================
Raw.Space — the minimal signature [PROTOTYPE]
Threshold model — "recede and return".
A self-contained, full-bleed piece (the homepage collage; the pulse
environments) is a whole world the frame must never sit on top of (§10,
no-colonising). The signature is CORNER MARKS in the margin — never bands
spanning an edge (§4, the recurring failure shape) — and how many marks
depends on whether the page has content to scroll through:
- SINGLE-VIEW page (homepage, single-canvas pulse — the piece IS the whole
page): the signature appears ONCE, as the title-block FIXED bottom-right,
visible on load. NO top entry mark — a top+bottom pairing reads as
header/footer and duplicates what the title-block already states.
(In-flow-at-foot was tried and reverted — it fell below the fold.)
- SCROLL-CONTENT page (a piece with reading/material below it): recede and
return — a top entry coordinate (.sig-head) that recedes as you scroll in,
and the title-block returning at the foot. The full screen of content
between them is what stops the pair reading as header/footer.
Because the marks sit on cool ground (never over the canvas), legibility over
dark or busy imagery is automatic: chrome and artwork never share pixels.
Deliberately NOT concrete.css: no global reset, no box-sizing, no body font
(any of those would resize a piece's sized boxes / perturb its physics).
Structure a page as:
coordinate … (SCROLL-CONTENT pages only)
the piece (full-bleed)
============================================================ */
@font-face{font-family:'IBM Plex Mono'; src:url('../fonts/IBMPlexMono-Light.woff2') format('woff2'); font-weight:300; font-style:normal; font-display:swap;}
@font-face{font-family:'IBM Plex Mono'; src:url('../fonts/IBMPlexMono-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap;}
:root{ --ground:#f5f5f4; --ink:#1A1A1A; --oxblood:#6c0000; --sig-mono:'IBM Plex Mono', ui-monospace, Menlo, monospace; }
/* ---- entry threshold: TWO CORNER COORDINATES (never a band) ----
SCROLL-CONTENT PAGES ONLY. Single-view pages (homepage, single-canvas pulse) omit this
entirely and carry the foot title-block alone — see the header note.
Coordinate anchored in the top-left corner; KIND label floating in the top-right.
On ground, in flow (so they recede as you scroll in). No full-width rule, no fill, no
header-style left/right justification — marks in the margin, not a bar spanning the
edge. z keeps them above resting collage tiles (hover lifts to 555555, transient). */
.sig-head{position:relative; z-index:5; padding:22px 24px 20px; font-family:var(--sig-mono); font-size:11px; letter-spacing:.16em; color:var(--ink); line-height:1;}
.sig-head .coord{display:inline-flex; align-items:center; font-weight:300;}
.sig-head .coord .wm{opacity:.8;}
.sig-head .coord .rule{display:inline-block; width:30px; height:0; border-top:1px solid rgba(26,26,26,.5); margin:0 11px;}
.sig-head .coord .loc{color:var(--oxblood);}
.sig-head .kind{position:absolute; top:22px; right:24px; font-weight:300; opacity:.5; text-transform:uppercase;}
/* ---- the piece: full-bleed stage between the thresholds ---- */
.sig-stage{position:relative; min-height:100vh;} /* the piece owns the viewport; chrome never covers it */
/* ---- the signature: the title-block FIXED in the bottom-right corner ----
Single-view pages (homepage, single-canvas pulse): the title-block is the sole signature
and is FIXED bottom-right, visible on load. It is opaque (see .sig-tb) and z above the
collage's hover lift (555555), so it stays legible over the moving collage / dark canvas.
No top mark — a top+bottom pairing reads as header/footer (§10).
(In-flow-at-foot was tried and reverted: it fell below the fold, leaving single-view
pages with no signature on arrival.)
SCROLL-CONTENT pages instead let the title-block return in normal flow — add .sig-foot--flow. */
.sig-foot{position:fixed; right:24px; bottom:24px; z-index:600000;}
.sig-foot--flow{position:static; z-index:5; padding:52px 24px; display:flex; justify-content:flex-end;}
/* the title-block, rendered IN FLOW here (never position:fixed). It is a solid sheet
object with its own ground fill (a corner mark, not a band) — opaque so it stays
legible if a stray tile ever sits behind it. */
.sig-tb{background:var(--ground); border:1px solid var(--ink); width:15rem; max-width:calc(100vw - 48px); box-sizing:border-box; font-family:var(--sig-mono); font-size:10.5px; letter-spacing:.06em; color:var(--ink);}
.sig-tb .r{display:grid; grid-template-columns:5rem auto; border-bottom:1px solid var(--ink);}
.sig-tb .k{padding:6px 10px; border-right:1px solid var(--ink); text-transform:uppercase; opacity:.5;}
.sig-tb .v{padding:6px 16px 6px 12px; text-align:right; min-width:6.5rem; opacity:.8;}
.sig-tb .v.loc{color:var(--oxblood); opacity:1; font-weight:500;}
.sig-tb nav{display:flex;}
.sig-tb nav a{flex:1; text-align:center; padding:7px 14px; color:var(--ink); text-decoration:none; text-transform:uppercase; letter-spacing:.16em;}
.sig-tb nav a:first-child{border-right:1px solid var(--ink);}
.sig-tb nav a:hover, .sig-tb nav a:focus{color:var(--oxblood);}
@media (max-width:760px){
.sig-head{padding:16px 16px 14px; font-size:10px;}
.sig-head .kind{top:16px; right:16px;}
.sig-foot{right:14px; bottom:14px;} /* fixed bottom-right, tighter offsets */
.sig-tb{font-size:10px;}
.sig-tb nav a{padding:11px 14px;} /* touch-comfortable */
}
/* ---- hardening against host CSS frameworks ----
Some pieces load a full framework (e.g. style-oil.css) whose global reset + grid
stretches block