/* portfolio.css — project index page */ .pf-hero{min-height:0;padding:97px 0 44px;position:relative} .pf-hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(46vw 38vw at 97% -4%, rgba(86,148,255,.13), transparent 62%)} .pf-hero .wrap{position:relative;z-index:1} .pf-hero .hero-sub{max-width:760px} /* filter row */ .pf-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap; padding:0 0 26px;border-bottom:1px solid var(--line);margin-bottom:38px} .pf-chips{display:flex;gap:10px;flex-wrap:wrap} .pf-chips button{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase; color:var(--soft);background:rgba(13,21,38,.6);border:1px solid var(--line-strong); border-radius:3px;padding:10px 16px;cursor:pointer;transition:.25s} .pf-chips button:hover{color:var(--ink);border-color:var(--faint)} .pf-chips button.active{color:var(--ink);border-color:var(--agents);background:rgba(255,169,0,.1)} .pf-meta{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:var(--faint)} /* grid */ .pf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:22px;padding-bottom:110px} .pf-card{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line); border-radius:5px;overflow:hidden;position:relative; transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .3s} .pf-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent); opacity:.55;transition:opacity .3s;z-index:2} /* hover is defined once, in the FourthWeb colour block at the end of this file */ .pf-card.g-live{--accent:var(--humans)} .pf-card.g-tools{--accent:var(--agents)} .pf-card.g-games{--accent:var(--assets)} /* media */ .pf-media{position:relative;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center; background:linear-gradient(150deg,var(--panel-2),var(--bg-2));border-bottom:1px solid var(--line);overflow:hidden} .pf-media::after{content:'';position:absolute;inset:0; background:radial-gradient(75% 65% at 50% 40%,transparent,rgba(6,9,15,.55));pointer-events:none} .pf-media img{width:100%;height:100%;object-fit:contain;padding:26px; transition:transform .45s cubic-bezier(.2,.7,.2,1)} .pf-card:not(.is-static):hover .pf-media img{transform:scale(1.045)} .pf-mark{font-size:62px;line-height:1;color:var(--accent);opacity:.82;letter-spacing:.04em} /* body */ .pf-body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:11px;flex:1} .pf-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .pf-status{font-size:10px;letter-spacing:.14em;color:var(--accent); border:1px solid var(--accent);border-radius:2px;padding:3px 8px;opacity:.9} .pf-role{font-size:10px;letter-spacing:.12em;color:var(--faint)} .pf-body h3{font-size:29px;line-height:1.05;letter-spacing:.02em;font-weight:400} .pf-body p{font-size:14.5px;line-height:1.62;color:var(--read);font-weight:300;flex:1} .pf-tags{display:flex;gap:7px;flex-wrap:wrap} .pf-tags span{font-size:9.5px;letter-spacing:.12em;color:var(--soft); background:rgba(120,160,230,.07);border:1px solid var(--line);border-radius:2px;padding:4px 8px} .pf-go{font-size:10.5px;letter-spacing:.12em;color:var(--accent);margin-top:3px; opacity:.82;transition:opacity .25s} .pf-card:hover .pf-go{opacity:1} @media(max-width:560px){ .pf-hero{padding:97px 0 30px} .pf-grid{grid-template-columns:1fr;gap:18px} .pf-body h3{font-size:25px} .pf-bar{padding-bottom:20px;margin-bottom:28px} } /* cards with no outbound link still reserve the link line so tag rows align */ .pf-card.is-static .pf-body::after{content:'';display:block;height:17px;margin-top:3px} /* logos that ship as dark-on-light lockups sit on their own brand plate */ .pf-media img.plate{background:#fbfaf7;border-radius:6px;padding:20px 24px; box-shadow:0 8px 26px rgba(0,0,0,.34);width:auto;max-width:78%;height:auto;max-height:64%} /* Acquired reads white so an exit stands apart from the Live/In build pills */ .pf-status.s-acquired{color:var(--ink);border-color:var(--ink); background:rgba(233,239,249,.07);opacity:1} /* cards carrying their own sub-links */ .pf-card.has-links .pf-body{padding-bottom:14px} .pf-links{display:flex;flex-wrap:wrap;gap:8px;padding:0 24px 22px;margin-top:auto} .pf-links a{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent); border:1px solid var(--accent);border-radius:2px;padding:7px 11px; background:transparent;opacity:.82;transition:background .25s,color .25s,opacity .25s} .pf-links a:hover{opacity:1;background:var(--accent);color:#06090F} .pf-links .pf-arrow{margin-left:1px} @media(max-width:560px){.pf-links{padding:0 20px 20px}} /* Creative work (books, screenplays, story IP) is not one of the three Web4 parties, so it takes the neutral ink accent rather than a 4th hue */ .pf-card.g-creative{--accent:var(--ink)} /* a portrait cover (book, poster) is height-bound in a 16:9 box, so give it back the vertical padding it would otherwise waste */ .pf-media img.portrait{padding:10px 26px} /* ── FourthWeb colour per card ───────────────────────────────────────── Explicit accents beat the group default, so a card can carry the colour the project actually is. Declared last so it wins the cascade. */ .pf-card.a-humans{--accent:var(--humans)} .pf-card.a-agents{--accent:var(--agents)} .pf-card.a-assets{--accent:var(--assets)} /* a link that wants its own colour, e.g. Amazon orange on a blue card */ .pf-go.go-agents{color:var(--agents)} .pf-go.go-humans{color:var(--humans)} .pf-go.go-assets{color:var(--assets)} /* ── resting state: just the lit top edge ─────────────────────────── */ .pf-card{transition:transform .38s cubic-bezier(.2,.7,.2,1), border-color .38s ease, box-shadow .5s ease} .pf-card::before{transition:opacity .38s ease,box-shadow .5s ease} /* the glow wash, held at zero until hover */ .pf-card::after{content:'';position:absolute;inset:0;z-index:1;opacity:0; pointer-events:none;transition:opacity .5s ease; background:radial-gradient(120% 62% at 50% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 72%)} /* ── hover: the whole card lights up in its own colour ────────────── */ .pf-card:hover, .pf-card:not(.is-static):hover{ border-color:color-mix(in srgb, var(--accent) 50%, var(--line-strong)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent), 0 24px 60px -14px color-mix(in srgb, var(--accent) 42%, transparent), 0 0 96px -24px color-mix(in srgb, var(--accent) 66%, transparent), 0 18px 44px rgba(0,0,0,.44)} .pf-card:hover::before, .pf-card:not(.is-static):hover::before{opacity:1; box-shadow:0 0 16px color-mix(in srgb, var(--accent) 75%, transparent)} .pf-card:hover::after{opacity:1} /* only the cards that actually go somewhere lift */ .pf-card:not(.is-static):hover{transform:translateY(-6px)} @media(prefers-reduced-motion:reduce){ .pf-card:not(.is-static):hover{transform:none} .pf-card,.pf-card::before,.pf-card::after{transition:none} } /* ── project brand colours ───────────────────────────────────────────── Beyond the FourthWeb triad, some projects carry their own identity. Hex values sampled from the actual logo art, then lifted for contrast on the dark card: CoinResearch #8D7FD4, VidDL #C655FE, PunchUpp #FE55AA. */ :root{ --brand-purple:#A57BFF; /* CoinResearch.ai, GetAnswers.app */ --brand-violet:#C655FE; /* VidDL, straight off its logo */ --brand-pink:#FF56A9; /* PunchUpp neon */ --brand-green:#35D96A; /* Sports Sudoku */ --brand-lime:#C2FF33; /* GenZ.tv */ --brand-gold:#FFBF3F; /* Healing Circle, sampled off the rim of its emblem */ } .pf-card.a-purple{--accent:var(--brand-purple)} .pf-card.a-violet{--accent:var(--brand-violet)} .pf-card.a-pink{--accent:var(--brand-pink)} .pf-card.a-green{--accent:var(--brand-green)} .pf-card.a-lime{--accent:var(--brand-lime)} .pf-card.a-gold{--accent:var(--brand-gold)} /* lime is very light, so its pill text needs a darker footing to stay legible */ .pf-card.a-lime .pf-status{color:var(--brand-lime)}