/* ============================================================================ feed.css — THE TIMELINE. A social column in the dojo's language: black plate, gold rules, heavy uppercase headers, the story cards doing the talking. Layout: one narrow column (a feed is read, not scanned), posts separated by air rather than boxes-in-boxes. Each post is a small header, ONE horizontal plate that says what happened, and the room to react, comment and share. ========================================================================== */ /* The column is bounded by the SCREEN, never the other way round. #app is a flex item of , so its automatic minimum size would otherwise let a wide plate (a long tag, a long headline) stretch the whole document sideways. .pagecol shrink-wraps its content everywhere else (see the board); here that would hand the width to whatever the widest post happened to hold — a battle with eight paintings on it made the whole timeline wider than one with none. It takes the full column instead, the same way the seasons directory does, so the feed is 620 because it is a feed, not because of what is in it. */ body.on-feed .pagecol { width: 100%; min-width: 0; } body.on-feed .app { min-width: 0; width: 100%; } /* .card.wide would otherwise open this to 980px — a feed is read in a column. The column itself carries no side padding: the media runs edge to edge and every other row pays the --gut gutter, the way a social post is built. */ .card.wide.feedwrap { --gut: 14px; max-width: 620px; margin: 0 auto; min-width: 0; padding-left: 0; padding-right: 0; } .feedwrap .feedlist, .feedwrap .composer { min-width: 0; } /* Column flex containers give their items min-width:auto, which would let one wide headline set the floor for the whole column. Every link in the chain is pinned to zero so the shrink can happen. */ .feedlist > .fpost, .cmp-list > .cmp-row { min-width: 0; } .fp-media, .fm, .fm-side, .fm-text { min-width: 0; } /* (No page title: the nav says TIMELINE and the posts say the rest.) */ /* --- composer: the beats waiting to be told ------------------------------- */ .composer { margin: 18px var(--gut) 6px; padding: 16px 16px 12px; background: linear-gradient(180deg, rgba(246,194,67,.1), rgba(246,194,67,.03)); border: 1px solid rgba(246,194,67,.34); border-radius: 16px; } .cmp-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .cmp-spark { display: inline-flex; width: 30px; height: 30px; flex: none; align-items: center; justify-content: center; } .cmp-spark .swordsicon { width: 100%; height: 100%; object-fit: contain; } .cmp-title { font-family: var(--font-head); font-weight: 900; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; color: var(--gold); } .cmp-sub { font-family: var(--font-body); font-size: 10.5px; color: #a2916a; margin-top: 3px; } .cmp-list { display: flex; flex-direction: column; gap: 8px; } .cmp-row { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; border-radius: 12px; background: rgba(0,0,0,.34); border: 1px solid rgba(246,194,67,.16); } .cmp-art { width: 34px; height: 34px; flex: none; display: inline-flex; align-items: center; justify-content: center; } .cmp-art img { width: 100%; height: 100%; object-fit: contain; } .cmp-art .ms-mini { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; } .cmp-art .ms-mini img { width: 100%; height: 100%; object-fit: cover; } .cmp-art .ms-mini .hatmark { width: 62%; height: 62%; object-fit: contain; } .cmp-label { flex: 1 1 auto; min-width: 0; font-family: var(--font-head); font-weight: 900; text-transform: uppercase; letter-spacing: .03em; font-size: 10.5px; line-height: 1.3; color: var(--text); } .cmp-post { padding: 6px 12px; font-size: 9.5px; flex: none; } .cmp-x { flex: none; width: 26px; height: 26px; border-radius: 50%; background: none; border: 1px solid rgba(246,194,67,.22); color: #8d7f5c; font-size: 16px; line-height: 1; } .cmp-x:hover { color: var(--red); border-color: rgba(224,52,72,.5); } .cmp-preview { margin: 4px 0 16px; padding: 12px 14px; text-align: left; background: rgba(0,0,0,.34); border: 1px solid rgba(246,194,67,.16); border-radius: 12px; } .cmp-preview .fp-line { margin: 0; } /* --- the column ----------------------------------------------------------- */ .feedlist { display: flex; flex-direction: column; gap: 20px; margin-top: 18px; } .feed-empty { text-align: center; padding: 30px var(--gut); } .feed-foot { display: flex; justify-content: center; margin-top: 22px; padding: 0 var(--gut); } /* --- a post --------------------------------------------------------------- */ .fpost { border-top: 1px solid rgba(246,194,67,.16); padding-top: 14px; } .fpost:first-child { border-top: none; padding-top: 0; } /* a post that landed while you were watching */ .fpost.fresh { animation: fp-in .5s ease-out; } @keyframes fp-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } /* --- a line: everything that isn't a settled fight (a challenge issued, an achievement, a new face, a streak) — a sentence and a time, no frame. --- */ .fline { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 var(--gut); font-family: var(--font-body); font-size: 12.5px; line-height: 1.4; color: var(--text); } .fline.fresh { animation: fp-in .5s ease-out; } .fline-text a, .fline-text b { font-family: var(--font-head); font-weight: 900; text-transform: uppercase; letter-spacing: .02em; font-size: 12px; color: var(--gold); } .fline-text a:hover { text-decoration: underline; } .fline-time { flex: none; font-family: var(--font-body); font-size: 10px; letter-spacing: .04em; color: #6f6448; text-transform: uppercase; } /* --- header: faces + who, nothing else (the hour lives at the foot) -------- */ .fp-head { display: flex; align-items: center; gap: 9px; padding: 0 var(--gut) 8px; } .fp-faces { display: inline-flex; flex: none; } .fp-faces .fp-ava { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(246,194,67,.4); background: #241a4d; } .fp-faces .fp-ava img { width: 100%; height: 100%; object-fit: cover; } .fp-faces .fp-ava .hatmark { width: 62%; height: 62%; object-fit: contain; } .fp-faces.two .fp-ava + .fp-ava { margin-left: -11px; } /* The header line IS the sentence: shouted names in gold, the words between them in the body face. Nothing repeats it further down. */ .fp-who { min-width: 0; flex: 1 1 auto; font-family: var(--font-body); font-size: 12.5px; line-height: 1.35; color: var(--text); } .fp-who a, .fp-who b { font-family: var(--font-head); font-weight: 900; text-transform: uppercase; letter-spacing: .02em; font-size: 12px; color: var(--gold); } .fp-who a:hover { text-decoration: underline; } /* --------------------------------------------------------------------------- THE PLATE — one universal horizontal rectangle for every kind of post. A post is scrolled past, not framed on a wall: it registers what happened (who, against whom, the score / the beat) and stops there. All the detail — rivalry record, aura, ladder pills — lives on the shareable poster. --------------------------------------------------------------------------- */ /* Full-bleed, like the photo in a social post: the chrome keeps the gutter, the media runs edge to edge. */ .fp-media { overflow: hidden; } /* One cinematic strip, the same shape on a phone and on a desktop. */ .fm { position: relative; aspect-ratio: 21 / 9; min-height: 124px; display: flex; align-items: center; justify-content: center; padding: 12px 14px; overflow: hidden; background: #100d09; border-top: 1px solid #2b2418; border-bottom: 1px solid #2b2418; } .fm > *:not(.fm-glow):not(.fm-tex):not(.fm-label) { position: relative; z-index: 2; width: 100%; } /* mood wash — gold for a papeada, red for a challenge or a purge */ .fm-glow { position: absolute; inset: 0; z-index: 0; } .fm.m-gold .fm-glow, .fm.m-crown .fm-glow { background: radial-gradient(110% 90% at 50% 0%, rgba(246,194,67,.16), transparent 64%), radial-gradient(120% 80% at 50% 100%, rgba(246,194,67,.1), transparent 62%); } .fm.m-fire .fm-glow { background: radial-gradient(110% 90% at 50% 0%, rgba(246,194,67,.08), transparent 62%), radial-gradient(130% 90% at 50% 100%, rgba(255,59,48,.2), transparent 62%); } .fm.m-ember .fm-glow { background: radial-gradient(120% 90% at 50% 100%, rgba(224,52,72,.2), transparent 62%); } /* the crew's halftone, whispered */ .fm-tex { position: absolute; inset: 0; z-index: 1; opacity: .14; background-image: radial-gradient(currentColor 1px, transparent 1.2px); background-size: 13px 13px; color: var(--gold); } .fm.m-fire .fm-tex, .fm.m-ember .fm-tex { color: var(--red); } /* the strip label (VICTORIA · NUEVO RETO · RACHA) */ .fm-label { position: absolute; top: 12px; left: 0; right: 0; z-index: 3; text-align: center; font-family: var(--font-head); font-weight: 900; text-transform: uppercase; letter-spacing: .22em; font-size: 8px; color: var(--gold-deep); } .fm.m-fire .fm-label, .fm.m-ember .fm-label { color: #ff7a70; } .fm-label.inline { position: static; text-align: left; margin-bottom: 5px; } /* --- duel: face · score · face --------------------------------------------- */ .fm-duel { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 8px; margin-top: 8px; } .fm-side { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; } .fm-ava { width: clamp(42px, 12vw, 68px); height: clamp(42px, 12vw, 68px); border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #241a4d; border: 2px solid #3a332a; } .fm-side.win .fm-ava { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(246,194,67,.16); } .fm-ava img { width: 100%; height: 100%; object-fit: cover; } .fm-ava .hatmark { width: 62%; height: 62%; object-fit: contain; } .fm-tag { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-head); font-weight: 900; text-transform: uppercase; letter-spacing: .02em; font-size: clamp(8.5px, 2.4vw, 12px); color: #cdbd8f; } .fm-side.win .fm-tag { color: var(--gold); } .fm-mid { display: flex; align-items: center; justify-content: center; } .fm-score { display: inline-flex; align-items: center; gap: 3px; padding: 5px 10px 6px; border-radius: 8px; font-family: 'PP Monument Extended', var(--font-head); font-weight: 900; font-size: clamp(16px, 4.4vw, 26px); line-height: 1; color: var(--ink); background: linear-gradient(180deg, var(--gold-row), var(--gold-deep)); border: 1px solid rgba(255,243,206,.55); box-shadow: inset 0 1px 0 rgba(255,251,232,.5); } .fm-score i { font-style: normal; opacity: .45; } .fm-swords { display: inline-flex; align-items: center; justify-content: center; width: clamp(38px, 11vw, 56px); height: clamp(38px, 11vw, 56px); border-radius: 10px; border: 1px solid rgba(224,52,72,.5); background: rgba(224,52,72,.1); } .fm-swords .swordsicon { width: 66%; height: 66%; object-fit: contain; } /* --- the words under the row ---------------------------------------------- */ .fp-body { padding: 0 var(--gut); } /* the composer preview shows the sentence exactly as the header will say it */ .fp-line { font-family: var(--font-body); font-size: 13px; line-height: 1.4; color: var(--text); } .fp-line a { font-family: var(--font-head); font-weight: 900; text-transform: uppercase; font-size: 12px; letter-spacing: .02em; color: var(--gold); } .fp-line a:hover { text-decoration: underline; } .fp-line b { color: var(--gold); font-weight: 700; } .fp-caption { margin-top: 5px; font-family: var(--font-body); font-size: 13px; line-height: 1.4; color: var(--text); } .fp-caption b { font-family: var(--font-head); font-weight: 900; text-transform: uppercase; font-size: 12px; letter-spacing: .02em; color: var(--gold); margin-right: 3px; } /* the hour, last and quiet */ .fp-stamp { margin-top: 7px; font-family: var(--font-body); font-size: 10px; letter-spacing: .04em; color: #6f6448; text-transform: uppercase; } /* --- the action row: bare icons under the media, no boxes ----------------- */ .fp-bar { display: flex; align-items: center; gap: 9px; padding: 9px var(--gut) 0; } .fp-act { display: inline-flex; align-items: center; gap: 4px; padding: 0; background: none; border: none; color: var(--text); font-family: var(--font-head); font-weight: 900; font-size: 11px; transition: transform .12s ease, color .16s ease; } .fp-act:hover { color: var(--gold); } .fp-act:active { transform: scale(.92); } .fp-act svg { width: 17px; height: 17px; } .fp-act .n { letter-spacing: .02em; } .fp-act .n:empty { display: none; } /* GG is a word, not a glyph — outlined so it sits with the two icons */ .gg-glyph { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 17px; padding: 0 4px; border-radius: 5px; border: 1.6px solid currentColor; font-family: var(--font-head); font-weight: 900; font-size: 9px; letter-spacing: .04em; } .fp-act.gg.on { color: var(--gold); animation: gg-pop .32s ease-out; } .fp-act.gg.on .gg-glyph { background: var(--gold); border-color: var(--gold); color: var(--ink); } @keyframes gg-pop { 0% { transform: scale(1); } 45% { transform: scale(1.14); } 100% { transform: scale(1); } } /* --- comments ------------------------------------------------------------- */ /* In the feed the thread is a link, not a preview; the box only appears when the comment button asks for it. The full thread lives at #/post/. */ .fp-comments { margin-top: 6px; } .fp-comments:empty { margin-top: 0; } .fp-viewall { display: inline-block; background: none; border: none; padding: 0; font-family: var(--font-body); font-size: 10.5px; color: #8d7f5c; } .fp-viewall:hover { color: var(--gold); } .fp-writer[hidden] { display: none; } /* --- one post on its own screen ------------------------------------------- */ .onepost .feedlist { margin-top: 0; } .post-top { display: flex; align-items: center; justify-content: space-between; margin: 0 var(--gut) 14px; } .fp-back, .fp-link { background: none; border: none; padding: 0; font-family: var(--font-head); font-weight: 900; text-transform: uppercase; letter-spacing: .08em; font-size: 9.5px; color: #8d7f5c; } .fp-back:hover, .fp-link:hover { color: var(--gold); } .fpost.is-full .fp-clist { margin-top: 4px; } .fp-clist { display: flex; flex-direction: column; gap: 7px; } .fc { display: flex; align-items: flex-start; gap: 8px; } .fc-ava { width: 22px; height: 22px; flex: none; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #241a4d; } .fc-ava img { width: 100%; height: 100%; object-fit: cover; } .fc-ava .hatmark { width: 62%; height: 62%; object-fit: contain; } .fc-body { flex: 1 1 auto; min-width: 0; font-family: var(--font-body); font-size: 11.5px; line-height: 1.45; } .fc-tag { font-family: var(--font-head); font-weight: 900; text-transform: uppercase; font-size: 9.5px; letter-spacing: .03em; color: var(--gold); margin-right: 5px; } .fc-tag:hover { text-decoration: underline; } .fc-text { color: var(--text); word-break: break-word; } .fc-time { flex: none; font-family: var(--font-body); font-size: 8.5px; color: #6f6448; padding-top: 3px; } .fc-del { flex: none; background: none; border: none; color: #6f6448; font-size: 13px; line-height: 1; padding: 0 2px; } .fc-del:hover { color: var(--red); } .fp-add { display: flex; align-items: center; gap: 7px; margin-top: 9px; } .fp-add input { flex: 1 1 auto; min-width: 0; padding: 7px 11px; border-radius: 999px; background: rgba(0,0,0,.4); border: 1px solid var(--card-border); color: var(--text); font-family: var(--font-body); font-size: 11.5px; } .fp-add input:focus { outline: none; border-color: rgba(246,194,67,.5); } .fp-send { flex: none; background: none; border: none; color: var(--gold); font-family: var(--font-head); font-weight: 900; text-transform: uppercase; letter-spacing: .08em; font-size: 9.5px; padding: 5px 4px; } .fp-send:hover { color: var(--cream); } /* --------------------------------------------------------------------------- THE SHARE SHEET — 9:16, rasterized to 1080×1920 by app.js renderCardToFile. The post's own painting bleeds edge to edge under its 70% black; the post is reproduced in the middle as a card with a real drop shadow, crest above and the url below. Rendered off-screen, never seen in the page itself. --------------------------------------------------------------------------- */ .sharepost { --gut: 0px; /* the card is already inset; its rows need no extra gutter */ position: fixed; left: -99999px; top: 0; width: 660px; height: 1173px; overflow: hidden; background: #0b0a08; color: var(--text); font-family: var(--font-body); } .sharepost * { box-sizing: border-box; } .sharepost img { filter: none !important; } /* html2canvas checkerboards filtered images */ /* the sheet has to be a place, not a void */ .sp-shade { position: absolute; inset: 0; background: radial-gradient(90% 40% at 50% 0%, rgba(246,194,67,.14), transparent 60%), radial-gradient(120% 45% at 50% 100%, rgba(224,52,72,.14), transparent 60%), #0b0a08; } .sp-inner { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 48px; padding: 60px 54px; } .sp-logo { width: 210px; height: auto; display: block; } .sp-url { font-family: var(--font-head); font-weight: 900; text-transform: uppercase; letter-spacing: .24em; font-size: 15px; color: var(--cream); margin-left: .24em; } /* the post itself, floating */ .sp-card { width: 100%; padding: 26px 26px 28px; border-radius: 22px; background: rgba(11,10,8,.9); border: 1px solid rgba(246,194,67,.22); box-shadow: 0 30px 60px rgba(0,0,0,.75), 0 8px 20px rgba(0,0,0,.6); } /* one step up from the feed's type — this is printed, not scrolled */ .sp-card .fp-head { gap: 12px; padding: 0 0 14px; } .sp-card .fp-media { border-radius: 12px; } /* (the sheet carries no action row — nothing to tap on a picture) */ .sp-card .fp-faces .fp-ava { width: 40px; height: 40px; } .sp-card .fp-faces.two .fp-ava + .fp-ava { margin-left: -14px; } .sp-card .fp-who { font-size: 17px; line-height: 1.35; } .sp-card .fp-who a, .sp-card .fp-who b { font-size: 16px; } .sp-card .fp-caption { font-size: 16px; margin-top: 6px; } .sp-card .fp-stamp { font-size: 12px; margin-top: 10px; } .sp-card .fm { border-radius: 14px; } .sp-card .fm-label { font-size: 11px; top: 14px; } .sp-card .fm-ava { width: 74px; height: 74px; } .sp-card .fm-tag { font-size: 14px; } .sp-card .fm-score { font-size: 28px; padding: 7px 13px 8px; } /* --- nav: something new is up there --------------------------------------- */ .mainnav a.nav-feed { position: relative; } .nav-dot { position: absolute; top: 4px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--red-hot); box-shadow: 0 0 0 2px rgba(11,10,8,.9); } @media (max-width: 560px) { /* the card frame gives its side padding back to the story cards */ .feedwrap { padding-left: 14px; padding-right: 14px; } .feedlist { gap: 18px; } .fp-title { font-size: 9.5px; } .fp-react { padding: 4px 8px; } /* the draft row breaks in two: what you unlocked, then what to do about it */ .cmp-row { flex-wrap: wrap; row-gap: 8px; } .cmp-label { font-size: 11px; flex: 1 1 60%; } .cmp-post { margin-left: auto; } }