/* accents.css — ambient detail layer for the top-level pages. * * Every mark here is drawn from the same vocabulary as the hero simulations in * js/swarm.js: five glyph types (square, triangle, plus, cross, ring) in the * five --grad stops. The static layer and the moving layer are the same thing * at different speeds. * * Intensity is baked at 0.5. There is no runtime dial: the specimen had one so * the level could be chosen, and this ships the chosen level. * * Almost all of it is pseudo-elements and :nth-child, so wiring a page costs a * body class, a stylesheet link and one for the sigil. Nothing else. * * Requires from the page: a .sheet wrapper, a .sim host (see swarm.js), and * .sheet > *:not(.sim){position:relative;z-index:1}. */ :root{ --s1:#FF5A2C; --s2:#FF3E9D; --s3:#6A5CFF; --s4:#3A8DFF; --s5:#46D6FF; --stop:var(--s1); /* the sim's five glyphs as a tile. Two copies at 200 and 317 are layered below: one tile alone shows its repeat as a visible grid. */ --glyphs:url("data:image/svg+xml;utf8,"); } /* one stop per page, in gradient order, matching the nav order */ body.p-work { --stop:var(--s1) } body.p-about { --stop:var(--s2) } body.p-thoughts { --stop:var(--s4) } body.p-contact { --stop:var(--s5) } body.p-loadout { --stop:var(--s3) } body.p-home { --stop:var(--s1) } /* 404 stays neutral: the right register for an error, and it keeps one page deliberately outside the system */ body.p-404 { --stop:#8A8A88 } /* --------------------------------------------------------------- 1 — RESIDUE + TINT Rides on .sim::before, which is already a positioned zero-height host, so .sheet never needs a position of its own. Decays downward because the simulation it is shed from is at the top; that is also what keeps it off the card grid. --------------------------------------------------------------- */ .sim::before{ content:"";position:absolute;top:0;left:0;right:0;height:1500px; pointer-events:none;z-index:0;opacity:.08; background-image:var(--glyphs),var(--glyphs), radial-gradient(120% 90% at 82% 0%,var(--stop),transparent 62%); background-size:200px 200px,317px 317px,100% 100%; background-position:0 0,113px 61px,0 0; -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.42) 30%,transparent 58%); mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.42) 30%,transparent 58%); } /* the glyph field is decoration and reads as noise at phone width */ @media(max-width:767px){ .sim::before{ display:none } } @media(prefers-reduced-motion:reduce){ .sim::before{ opacity:.08 } } /* --------------------------------------------------------------- 2 — SPINE The full gradient as a 2px hairline on the sheet's top edge, done as a background layer so it costs no element and no positioning. Alpha is baked into the stops. --------------------------------------------------------------- */ .sheet,.has-spine{ background-image:linear-gradient(150deg, rgba(255,90,44,.55),rgba(255,62,157,.55),rgba(106,92,255,.55), rgba(58,141,255,.55),rgba(70,214,255,.55)); background-size:100% 2px; background-repeat:no-repeat; background-position:top left; } /* The loadout page is a fixed-card film with no scrolling sheet to sit on, so its spine is pinned to the viewport instead. z-index clears #sitenav (60). */ .spine-abs{position:absolute;top:0;left:0;right:0;height:2px;z-index:20;pointer-events:none; background:linear-gradient(150deg, rgba(255,90,44,.55),rgba(255,62,157,.55),rgba(106,92,255,.55), rgba(58,141,255,.55),rgba(70,214,255,.55))} /* .has-spine paints on the element's own background layer, so it is hidden by any absolutely positioned child that fills the box. The homepage's #blackhole-container does exactly that, hence the element variant above. */ .spine-fixed{position:fixed;top:0;left:0;right:0;height:2px;z-index:61;pointer-events:none; background:linear-gradient(150deg, rgba(255,90,44,.55),rgba(255,62,157,.55),rgba(106,92,255,.55), rgba(58,141,255,.55),rgba(70,214,255,.55))} /* --------------------------------------------------------------- 3 — SIGIL A 14px line drawing of the page's own formation, before the kicker. The only element on the page that names what is moving above it. Markup: one carrying inline SVG. --------------------------------------------------------------- */ .sigil{display:inline-block;width:14px;height:14px;margin-right:.6rem; vertical-align:-2px;color:var(--stop);opacity:.8} .sigil svg{display:block;width:100%;height:100%} /* --------------------------------------------------------------- 4 — PARTICLE RULE The trailing rule on a section head is a row of the sim's glyphs thinning out, not a dashed line. Zero markup: .era-head is already a flex row, so ::after just takes the remaining space. --------------------------------------------------------------- */ .era-head::after,.show-head::after{ content:"";flex:1;height:14px;min-width:60px;opacity:.75; background-image:var(--glyphs); background-size:200px 200px;background-position:0 -92px; -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.5) 46%,transparent 92%); mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.5) 46%,transparent 92%); } @media(max-width:600px){ .era-head::after,.show-head::after{ display:none } } /* --------------------------------------------------------------- 5 — ORBIT TICKS Two corner marks per card and no extra markup. The key corner is a quarter ARC, the curve the disk and ring formations trace; the opposite corner is a plain square crop mark. Cards cycle the five stops by position, so a grid of different projects looks like different projects. --------------------------------------------------------------- */ .grid .card:nth-child(5n+1){--cs:var(--s1)} .grid .card:nth-child(5n+2){--cs:var(--s2)} .grid .card:nth-child(5n+3){--cs:var(--s3)} .grid .card:nth-child(5n+4){--cs:var(--s4)} .grid .card:nth-child(5n+5){--cs:var(--s5)} /* The card clips its overflow so the thumbnail's top corners round. Ticks sit 4px outside the border, so that clipping has to move down to .thumb, which already has its own overflow:hidden and only needs the radius. */ .grid .card{position:relative;overflow:visible} .grid .card .thumb{border-radius:15px 15px 0 0} .grid .card::before,.grid .card::after{ content:"";position:absolute;width:9px;height:9px;pointer-events:none;z-index:2; border:1.2px solid var(--ink,#141414);opacity:.25;transition:opacity .25s,border-color .25s} .grid .card::before{top:-4px;left:-4px;border-right:0;border-bottom:0; border-color:var(--cs);border-radius:9px 0 0 0;border-width:1.4px;opacity:.75} .grid .card::after{bottom:-4px;right:-4px;border-left:0;border-top:0} /* --------------------------------------------------------------- 6 — CARD HOVER in the card's own stop rather than a shared grey --------------------------------------------------------------- */ a.card:hover{border-color:color-mix(in srgb,var(--cs,var(--stop)) 40%,var(--line))} a.card:hover::before{opacity:1} /* Reduced motion: the ticks and sigil are static, so they stay. Only the things that move or shimmer are worth suppressing, and none of them are in this file. */