/* ========================================================================== select.css - the senshi select screen ========================================================================== ONE stylesheet, ELEVEN palettes, same contract as senshi.css: every colour below is a var() set per-CARD by build_select.py. Nothing here is hardcoded to a character. THE ONE DELIBERATE DEPARTURE FROM senshi.css -------------------------------------------- The card FIELD paints from --wash, not --root. Root is the 1999 bgcolor and for four characters it is very dark: Saturn is #00008b, Mars #8b0000, Jupiter #006400. Their busts are dark-haired in dark uniforms, so on a root field they disappear. Root still owns the frame - it paints the card border and the group rule - which is where the eye-melt rule always said it belonged. The bust needs a surface, and wash is the surface. NO LAYOUT SHIFT --------------- All eleven panels are in the DOM at once, stacked absolutely inside a fixed-height stage, toggled by opacity and visibility. Two things fall out of that: changing selection cannot move a single pixel of the grid, and every panel's text is real DOM text that Google reads without running any script. A panel swapped in by JS would have neither property. ========================================================================== */ *{ box-sizing:border-box; } body.select{ font-family:Raleway,system-ui,sans-serif; line-height:1.7; } /* ========================================================================== THE SCROLLING BACKGROUND, same as the homepage ========================================================================== Lifted from body.--home in index.css, not reinvented, and reusing its @keyframes glyphslide rather than declaring a second copy - index.css is linked first, so the keyframes are already in scope and there is exactly one definition of the drift on the whole site. Two traps carried over from the note index.css leaves on this rule, both of which silently produce a background that does not move: LONGHANDS, never the `background` shorthand. The shorthand resets background-position to its initial value on every match, which overrides whatever the animation computed that frame - the keyframes run and nothing ever moves. background-attachment MUST be scroll, not fixed. `fixed` anchors the layer to the viewport, which pins background-position, which is the exact property the animation is animating. The tile is 250x249 and glyphslide travels -1250px/-996px: five tiles left, four tiles up. Whole multiples in both axes, so the loop never jumps. That maths belongs to the keyframes, which is another reason not to redeclare them here with different numbers. */ body.select{ background-image: url("images/backgrounds/glyphtile.png"), linear-gradient(#cce4ff, rgba(250, 250, 250, 0)); background-repeat: repeat, no-repeat; background-color: transparent; background-attachment: scroll, scroll; animation: glyphslide 200s linear infinite; } /* Same two exemptions the homepage makes. A drifting tiled background is expensive to composite on a phone and unkind to anyone who asked for less motion. */ @media (prefers-reduced-motion: reduce){ body.select{ animation:none; } } @media (max-width:1249px){ body.select{ animation:none; background-attachment:scroll, scroll; } } /* THE PANEL SPANS THE BANNER ROW. The banner is text, and text stops at about 60ch, so a full-width banner left a wide empty rectangle to the right of the title with nothing in it - and the panel started below all of that, so the artwork began a third of the way down the screen. Making .sel itself the two-column grid puts the panel in that space and lets it start at the top of the box, which is where the eye goes first on a select screen. The banner, the roster and the foot stay in column one; only the panel moves, and it moves by spanning two rows rather than by being repositioned. */ .sel{ background:#FFFFFB; border:3px solid #5A3268; box-shadow:5px 5px 0 rgba(90,50,104,.35); margin:0 0 20px 0; overflow:hidden; /* 386 = the panel's 360 plus its 26 right margin. If the panel width changes this changes with it, and so does the card width downstream. THE PANEL TOOK 20px AND IT CAME OUT OF PAGE PADDING, NOT OUT OF THE CARDS. Ashley: "can we scale the character select boxes down a bit without messing with glyphs or solar system images? might give more room for the large profile panel." Measured before answering: the roster row is 553px and four 132px cards with three 8px gaps use 552, so the grid has ONE pixel of slack. Every pixel a card gave up would have to come out of its name plate, and the plate is at its own ceiling already - CHIBI MOON is ten characters, Press Start 2P advances exactly one em, 10 x 11px is 110 inside 112 of usable plate. Narrowing the cards therefore means shrinking that type, and it would also deepen the side crop on the expanded busts, which is the actual reason they read as too big. The stage column was carrying 44px of its own horizontal padding. Cutting that to 24 hands the panel 20px with nothing else moving: same card width, same four per row, same glyphs and same discs. */ display:grid; grid-template-columns:minmax(0,1fr) 386px; align-items:start; } /* FULL-WIDTH BANNER, and this reverses the arrangement two rounds ago on measurement rather than taste. Ashley: "any ideas on how to make this whole thing look more proportinate? feels visually weirdly weighted." Measured, the weighting was this: the roster and the panel are the SAME height - 703 and 713 - but they were 174px out of step vertically, because the banner covered only column one and the panel started above it. So the top right of the box was dark artwork while the top left was pale type, and neither column shared a top or a bottom edge with the other. Spanning the banner fixes the step and, unexpectedly, makes the banner SHORTER: at 989px wide the title fits on one line instead of two, so the whole header comes down from 190px to 134. The roster now starts 62px HIGHER than it did before the intro paragraph was added, the two columns start level and end within 10px of each other, and the dead space below the panel is gone. */ .sel-banner{ grid-column:1 / -1; grid-row:1; } .sel-stage { grid-column:1; grid-row:2; } .sel-panels{ grid-column:2; grid-row:2; } .sm-plates { grid-column:1 / -1; grid-row:3; } .sel-foot { grid-column:1 / -1; grid-row:4; } /* ---- banner ------------------------------------------------------------- THE BANNER IS THE LOCKUP: logo in column one, title and intro stacked in column two. That stacking is what keeps it short. The text block comes to 84px, the logo is 100, and the taller of the two sets the row - so the intro is carried for free inside the logo's own height. When the same words sat in a paragraph BELOW the lockup instead they added their 56px on top of the logo's 100 and the banner went to 190. Same logo, same sentence, 56px cheaper, purely from which box they live in. align-items:center so the logo's optical middle lines up with the type beside it. min-width:0 on the text column so the track can actually shrink; a grid item otherwise refuses to go narrower than its longest word. Both earlier arrangements are gone rather than commented: a stacked kicker, logo and title ran to 234px with two thirds of the width empty, and the half-width lockup ran to 190. */ /* ---- THE TITLE CARD TAKES THE SKY ----------------------------------------- Ashley: "you can also consider background for the 'title card' or below the entire character select. don't use too much though so it's not visually disturbing." ONE surface, not four, and the banner is the one because it is the only band on the page with nothing in it - a logo and two lines of type - and because it is the first thing anybody sees. Below the select is already spoken for: the plate display took the frost tile last round. IT IS THE 1024x768 WALLPAPER, and the choice is a measurement rather than a preference. Of the six Ashley shortlisted, this one looks the busiest and measures the CALMEST: its value standard deviation is 3.7 out of 255, against 8.5 for tile19 and 27 for both bg12 and tile24. All of its variation is hue - pink to lilac to blue, soft doilies, light blooms, almost no dark anywhere - and hue variation is what a background can afford. Value variation is what fights the type on top of it, and this has none. bg12 and tile24 are lovely and are the two that would have been "too much"; they are built and unused. THE WHITE SCRIM IS THE RESTRAINT. Straight cover would put a full-strength wallpaper behind a heading. At 58% white over it the sky reads as a tint that happens to have doilies in it, the Press Start 2P title keeps its contrast, and the band still says something the flat gradient did not. */ .sel-banner{ padding:16px 26px 15px; display:grid; grid-template-columns:260px minmax(0,1fr); align-items:center; gap:24px; background-image: linear-gradient(180deg, rgba(255,255,251,.5), rgba(255,255,251,.72)), url("images/sailormoon/select/lace/sky.jpg"); background-repeat:no-repeat, no-repeat; background-size:cover, cover; background-position:center, center 24%; border-bottom:3px solid #C7C4D9; } .sel-titles{ min-width:0; } .sel-kicker{ margin:0 0 8px; font-family:"Press Start 2P",monospace; font-size:11px; letter-spacing:1px; color:#7A6E96; } .sel-title{ margin:0; font-family:"Press Start 2P",monospace; /* CAPPED AT 22, down from 24, and the ceiling is arithmetic rather than taste. "Choose Your Sailor Senshi" is 25 characters and Press Start 2P advances exactly one em each, so at 24px it wants 600px on one line. It has 287 beside the logo, so it must wrap, and the longest line it can wrap to is "Sailor Senshi" - 13 characters, 286px at 22 and 312 at 24. 22 fits with a pixel spare; 24 does not. Same trap as the SAGITTARIUS card, which is why it was worked out on paper: the real font is absent from the local mirror, the fallback measures much narrower, and this looks fine here while breaking on her screen. */ font-size:clamp(16px,2.4vw,22px); line-height:1.35; color:#5A3268; text-shadow:2px 2px 0 #f6ebbe, 4px 4px 0 rgba(90,50,104,.25); } /* The intro. TWO LINES, and that is a hard budget rather than a preference: every line costs 23px and pushes the whole roster down by it, and Ashley asked for an introduction that does not do that. The banner's full width is 571px, which is about 79 characters of Raleway at 14.5px, so two lines is roughly 158 characters and the copy was cut to fit rather than the box grown to hold it. Sized 14.5 rather than 16 for the same reason. */ .sel-lede{ margin:0; font-size:14.5px; line-height:1.6; color:#524860; } /* ---- THE LOGO ------------------------------------------------------------- The Japanese logo, 130x50, eleven frames of palette cycling with a twinkle on the final stroke. Ashley asked for a beautiful heading built around it. 2x AND NOTHING ELSE. It is pixel art, so 260x100 is the only enlargement available under the integer-scale rule - 1x is too small to be a heading and 1.5x would put half-pixels through every one of those diagonal strokes. image-rendering:pixelated keeps the doubling hard-edged instead of letting the browser smooth it into mush. width and height are ON the element as well as in CSS, so the 100px of banner it occupies is reserved before the gif arrives. A heading that reflows as its own logo loads is a heading that makes the whole page jump. The drop shadow is the site's plum at low alpha, offset like the other pixel furniture here rather than blurred - a soft glow under a hard-edged sprite reads as a mistake. It also does the work of separating the logo's magenta keyline from the banner's pale lavender, which are closer in value than they look. */ .sel-logo{ display:block; width:260px; height:100px; flex:none; image-rendering:pixelated; filter:drop-shadow(3px 3px 0 rgba(90,50,104,.28)); } /* ---- stage: grid left, one shared panel right ---------------------------- */ .sel-stage{ display:block; padding:8px 8px 22px 16px; } /* ---- THE ROSTER CONTAINER ------------------------------------------------- Ashley: "create a 'container' for the character select boxes and tighten them up. add a complementary background to this new box." One inset box holding all three groups, so the roster reads as a single unit sitting next to the preview rather than three loose rows floating on the page. Same border weight and offset shadow as the cabinet boxes elsewhere on the site, so it belongs to the furniture she already has, and a pale wash rather than a colour of its own - the cards are the colour here, and the box exists to hold them, not to compete. THE WASH IS TWO STOPS OF THE SAME HUE, not flat. Flat #f7f2f6 against the panel's #FFFFFB is so close that the border was doing all the work and the box read as an outline rather than a surface. A shallow gradient gives it a top edge that catches light, which is what makes it read as inset. */ /* ---- THE DOILY PLATE ----------------------------------------------------- Ashley sent the player-select screen from Jougai Rantou, the Sailor Moon fighting game, and asked what I thought about putting it behind the cards. It is the right reference: this whole page is a character select quoting that genre, and the lace is what the genre's own Sailor Moon entry actually did. IT IS USED AS TWO BANDS, NOT AS ONE PICTURE, and the reason is arithmetic. The plate is 828 x 1792 and the roster is 579 x 685. Stretched, the doilies go oval and the pixel art resamples; cropped, the bottom border is thrown away entirely. But the plate is not one image - it is a lace band, a flat gradient and another lace band, and CSS already makes gradients for free. So build_lace.py cuts the two bands out and they sit top and bottom at their own pixel size over the container's own gradient, which is how the original works on a CRT: the bands are the frame and the middle is fill. VIOLET, NOT THE SOURCE PINK. Ashley: "we can color shift to fit the palette." Eleven cards sitting on this bring every hue the section can carry, and a pink frame under pink, orange, green and teal cards is one more. The band is hue-shifted to the wing's own chrome; the pink build is still in the lace folder and swapping back is one word. */ .sel-roster{ background-image: url("images/sailormoon/select/lace/lace-top.png"), url("images/sailormoon/select/lace/lace-bottom.png"), url("images/sailormoon/select/lace/cloud-bold.png"), linear-gradient(180deg,#ece4f0 0%,#f7f2f8 52%,#eee7f2 100%); background-position:left top, left bottom, center center, left top; background-repeat:repeat-x, repeat-x, repeat, no-repeat; /* ---- tile24, MADE TO WORK ----------------------------------------------- Ashley: "try creating a new resized tile24.gif to your liking and see if that works better?" THE SIZE WAS NEVER THE VARIABLE. I built it at 1x, 1/2 and 1/3 first, and every one striped worse than the last - the motif is a horizontal cloud band, so shrinking it only fits more bands into the same height. What ruled tile24 out was value spread, 27.5 out of 255 against the frost tile's 2.7, and the fix for that is flattening, not resizing. Same tile, pulled in around its own mean: 27.5 down to 4.2, saturation to 45%, brightness up. IT TILES BOTH WAYS AT NATIVE SIZE, FROM THE CENTRE. It did not, for one round: I stretched it to 100% height to stop the horizontal banding, which meant a 224px tile blown up over a 685px box - a 3x vertical smear. Ashley: "it's way too zoomed into the top left corner. can't even tell its suposted ot be lace." Exactly right, and the diagnosis is in the word LACE. tile24 is not a cloud, which is what I had been treating it as; it is fine doily work that only reads at its own scale, and stretching it 3x destroyed the only thing worth having. The banding I was avoiding is the pattern. background-position:center is the second half of her fix and it matters more than it sounds: a tile anchored top-left puts its arbitrary starting phase in the corner and lets the roster's height decide where the motif lands. Centred, the pattern is composed around the middle of the box and grows out symmetrically, so it looks placed rather than left over. BOLD, AND THE FIRST PICK WAS WRONG. I chose the gentlest version that still measured as a texture, and Ashley: "I don't see the different background at all." She was right and it was checkable - diffed against a render with no tile, that version moved the roster by a mean of 1.44 levels out of 255. Not subtle. Nothing. Two reasons it disappeared. The flattening went too far, and THE SURFACE IS SMALL: eleven cards cover most of the roster and the lace bands own the top and bottom, so the tile only shows in the gutters between cards and the margins around them. A texture reading through that little area has to be stronger than one filling a page - which is not something you can judge by looking at the tile on its own, only by diffing the rendered box. Four builds now, measured the same way: ghost 1.09, soft 2.41, full 3.67, bold 4.91. Bold is the one you can see. Swapping down is one word. */ background-size:auto, auto, auto, 100% 100%; /* LONGHANDS, NOT THE SHORTHAND. The shorthand version of this was invalid and the browser threw the whole declaration away silently, which looked exactly like the images failing to load - the network showed two 200s and the computed style showed only the gradient. Three layers with three different repeat and size values is past the point where the shorthand is easier to read than it is to get wrong. */ border:2px solid #BDB6D2; /* The bands are pixel art at 1x, so nothing is being resampled, but the property costs nothing and guards against anyone scaling them later. */ image-rendering:pixelated; box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 3px 3px 0 rgba(90,50,104,.13); /* 11px, and this number is load-bearing. See the note on .sel-row: the stage hands the roster exactly 579px, the border spends 4 of it and this padding spends 22, leaving 553 - which is four 132px cards and three 8px gaps to the pixel. Change this and the grid drops a track without telling you. */ padding:11px; } /* ---- the grid ------------------------------------------------------------ */ /* 14, down from 20. Tightening the roster is mostly this and the gap: three groups at 20px plus three description lines was about 150px of vertical air inside a box 900px tall. */ .sel-group{ margin:0 0 10px; } .sel-group:last-child{ margin-bottom:0; } .sel-h{ margin:0 0 6px; font-family:"Press Start 2P",monospace; font-size:12px; color:#5A3268; padding-bottom:5px; border-bottom:2px dashed #C7C4D9; } /* .sel-note is no longer emitted - build_select.py drops the sentence under each heading. The rule stays for the roster page, which may still want it. */ .sel-note{ margin:0 0 12px; font-size:13px; font-style:italic; color:#6E6278; } .sel-row{ list-style:none; margin:0; padding:0; display:grid; gap:8px; justify-content:start; /* A grid item will not shrink below its own min-content width, so a long word inside a card can push that card WIDER THAN ITS TRACK and out through the side of the container. That is exactly what happened, and it is worth recording how it hid: the two cards that broke were Jupiter and Saturn, the two longest sign names, SAGITTARIUS and CAPRICORN. It could not be reproduced here because Press Start 2P loads from Google Fonts and is absent from the local mirror, so the fallback font measured narrower and every card sat obediently at 110. It only appeared on Ashley's screen, with the real font, where the plate needed about 131px. min-width:0 on the item plus overflow:hidden on the PLATE is the guard. Not on the card: the RPG cursor is a ::before sitting 17px outside the card's left edge and clipping the card would delete it. With the guard in place a font surprise costs a clipped letter instead of a broken grid, which is the right way round. The arithmetic below is still sized to fit properly. */ /* Capped rather than 1fr. With 1fr a three-card group stretched its cards half again as wide as a four-card group, so Luminaries and Inner senshi rendered at visibly different sizes and the roster stopped reading as one grid. A select screen's cards are all the same size; that is most of what makes it read as a roster. */ /* 132, and it is ARITHMETIC, not taste. Full chain, because it has silently broken five times now: .sel is 989 inside its border the panel column takes 366 the stage pads 26 left, 18 right 44 -> roster gets 579 the container border takes 4 the container padding takes 22 -> cards get 553 three 8px gaps take 24 -> four cards share 528 528 / 4 = 132 One pixel over and auto-fill drops a track with NO error: the four-card groups wrap 3 + 1 and the page grows about 300px. This is downstream of the panel width, the stage padding, the container padding AND the gap, so if any of those four move, recompute it. AND IT HAS TO CLEAR THE LONGEST SIGN NAME. Press Start 2P advances exactly one em per character, so at 7.5px "SAGITTARIUS" is 11 x 7.5 = 82.5px. The plate spends 15px on padding and the sign row spends 24 on the glyph plus 4 on the gap, so the text gets 132 - 43 = 89px. 82.5 fits with 6.5px to spare, which is why letter-spacing came off that one line - at 0.3px it was eating 3.3 of those 6.5 for nothing. */ grid-template-columns:repeat(auto-fill,minmax(104px,132px)); } /* Every card in a row is exactly as tall as the tallest. "Setsuna Meiou" wraps to two lines and "Rei Hino" does not, and without this the grid gets a 20px step in it that reads as a broken layout rather than as a longer name. The field stays fixed so the busts keep their shared baseline; the plate absorbs the difference. */ .sel-row > li{ display:flex; min-width:0; } /* ---- the card ------------------------------------------------------------ Field, then plate. Same three-layer logic as the profile page, shrunk, so the card is a genuine preview of the room it opens. */ .sel-card{ position:relative; display:flex; flex-direction:column; flex:1; text-align:left; text-decoration:none; cursor:pointer; font:inherit; /* The card no longer paints the wash itself. It used to, and with a translucent field on top of it the two stacked to something almost solid - the lace showed through the field and then hit the card's own wash and stopped. The plate below still paints, so the card is only transparent where the field is. */ background:transparent; color:var(--ink); border:2px solid var(--skirt); box-shadow:3px 3px 0 rgba(0,0,0,.26); transition:transform .07s, box-shadow .07s; } .sel-card:focus{ outline:none; } .sel-card:focus-visible{ outline:3px solid #5A3268; outline-offset:2px; } /* ---- 100, DOWN FROM 118, AND THE 18px WAS EMPTY SKY ----------------------- Ashley: "can we make the character cards not so tall? maybe that's what's bugging my eye." Measured before changing anything, because "too tall" could have been the field, the name plate or the row. It was the field, and specifically the part of it with nothing in it: the resting bust is an 80px box sitting on the field's foot, its drawn content starts about 11px into that box, and the field was 116px of content - so 47px, forty percent of the field, was blank sky above her head. The plate underneath is 64px carrying two lines of type, which is already tight. At 100 the sky is 29px, her head comes up near the planet symbol and the disc, and where she touches them she paints in front - which is the arrangement Ashley asked for two rounds ago ("if the senshi bust overlaps the glyph or the planet, that is totally okay. please stop trying to keep everything from touching"). Every card loses 18px and nothing inside one moves relative to anything else. */ .sel-field{ position:relative; display:block; flex:none; height:80px; /* TRANSLUCENT, so the doily reads through it. Ashley: "the character select cards, the lighter color behind the busts... can we add a slight transparancy to that?" --washa is the same wash with an alpha, derived in palettes.py rather than applied here, so the solid version stays available for every surface that is a reading surface. */ background:var(--washa, var(--wash)); border-bottom:2px solid var(--skirt); overflow:hidden; } /* Bottom-flush and centred. Every bust was cropped onto the same 80x80 canvas by the asset pass, so a single rule lands every head at the same height with no per-character nudging. */ /* The bust paints ABOVE the planet - it is second in the markup for exactly this reason. That is what lets Saturn keep his rings at 2x: 108px wide would otherwise cross the bust and cover her face, and instead she stands in front of her planet, which is the composition the panel already uses. */ /* BOTTOM LEFT, not bottom centre. The two marks sit in the top corners now, and a centred bust put her head directly under the gap between them; anchored left she sits under the symbol with the planet clear over her right shoulder, which is the arrangement Ashley described. STILL 80px, AND THAT IS A CEILING RATHER THAN A CHOICE. These sprites are 80px of source art, so 80 IS 1x - there is no 1.25 available under the integer-scale rule, and 2x is 160, which in a 128px field crops to her face alone and buries the planet behind her head. Tightening the crop does not help either: it would remove margin, and the figure is the same count of pixels afterwards. Making her genuinely bigger needs different source art, not different CSS. */ .sel-bust{ position:absolute; left:2px; bottom:0; width:80px; height:80px; image-rendering:pixelated; z-index:2; } /* Her planet's astrological symbol, top left, opposite the pixel planet. Same 1px dark keyline the orb wears and for the same reason: these glyphs are flat bright colours and the eleven fields they sit on are all pale, so several of them would otherwise wash straight out. 20px, DOWN FROM 40, on Ashley's "glyphs inside the character cards are too big". 20 and 40 are the only sizes available: the sprite is 20px of source art so those are 1x and 2x, and anything between them is a fractional zoom on pixel art. 40 was 2x and dominated the field; 20 is the mark it should have been, and it now reads as a small stamp rather than as a second planet. */ .sel-glyphmark{ position:absolute; top:6px; left:6px; z-index:3; width:20px; height:20px; image-rendering:pixelated; filter:drop-shadow(1px 0 0 rgba(0,0,0,.35)) drop-shadow(-1px 0 0 rgba(0,0,0,.35)) drop-shadow(0 1px 0 rgba(0,0,0,.35)) drop-shadow(0 -1px 0 rgba(0,0,0,.35)); } /* The card's planet: the pixel solar-system disc at 2x, in the corner. The sprite-sheet glyph used to live here at 32px and read as a symbol; at 52px this reads as a planet, which is what the card wants. The sprite glyph is still on the page - it sits beside the planet name in the panel head - so each surface carries exactly one planet mark. */ /* ---- THE EXPANDED BUST ---------------------------------------------------- Ashley: "add a slight bust expansion when a character is highlighted... i want the lighter pink to also expand down, filling the box down until the end of the larger bust... it's basically an expanded icon showing which character is selected... like a fighting game. their 'stats' show up in the panel box." So the FIELD ITSELF GROWS. The expanded bust lives inside it, and the field's height animates from 118px to --fieldlg, which is that character's bust height plus 8px of air. It has to be per-card and written by the build: the busts run from 126px tall to 144, so one number in this stylesheet would either clip the tall ones or leave a gap under the short ones. The bust is a DIFFERENT FILE at double the resolution, not a zoom - the icon set's own 2x, from the sprite rip Ashley added, with Uranus and Tuxedo Mask built here to match. That is the only way to grow pixel art without resampling it. SIDE CROP IS ACCEPTED, vertical is not. Eight of the eleven busts are wider than the 126px the card has inside its border, so something has to give; Ashley chose the crop over wider cards. Centring the bust splits it evenly, so the worst case is Pluto and Chibi Moon losing about 16px a side - the outer edge of hair and bows, never a face. NO LAYOUT SHIFT, and this is the part that had to be checked rather than assumed. The card is a flex column of field plus plate; the plate is flex:1 with min-height:0, so when the field takes 152px the plate gives up 152px and the CARD's height never changes. The tallest expanded field is 152 against a 186px card, so the plate always has room to absorb it. */ /* THE EXPANSION IS OUT OF FLOW, and that correction is the whole reason this works. The first version simply grew .sel-field's height, which looked right and quietly broke the grid: the plate is in the flow underneath, so the card's natural height grew with the field, the row grew to the tallest card, and hovering across the roster moved everything. Measured, the Luminaries row went 214 to 209 and the Outers 209 to 220 as the selection travelled, and the page moved 6px with it. So the field keeps its 118px in the layout FOREVER, and the expansion is a pseudo-element painted over the top of the plate. Nothing in the flow changes, so the card, the row and the document are the same height selected or not - which the shift harness checks on every run. */ /* ---- THE SELECTED CARD ---------------------------------------------------- Ashley, with a picture: "see how the darker red bar is so tall? it should only begin at the bottom of the sprite bust. in fact, the sprite bust should also be pushed down, and the darker red band only a thin bottom boarder." THE BAND IS GONE AND THE PLATE IS RECOLOURED INSTEAD, which is the whole fix and it removes code rather than adding it. Two rounds were spent painting a pale rectangle over the top of the dark name plate and arguing about how far down it should reach. But the dark thing on a selected card IS the name plate, sitting in the flow with its own height, and the plate is already exactly as tall as the card needs it to be. So do not cover it - repaint it. On a selected card the plate takes the wash, and an inset shadow leaves --bustfoot of skirt showing along its bottom edge as a rule. One declaration, no geometry, and it cannot drift out of step with the card's real height the way a hardcoded band did twice. --bustfoot is that rule's thickness and also the ledge the sprite stands on, so the two cannot disagree by construction. */ .sel{ --bustfoot:16px; } .sel-card[data-active] .sel-plate{ min-height:0; background:var(--washa, var(--wash)); box-shadow:inset 0 calc(0px - var(--bustfoot)) 0 var(--skirt); } /* ---- ICON -> BUST reveal, HISTORY ---------------------------------------- This slot has been three things. First a plain 1x->2x snap. Then a six-frame steps(6,jump-none) "Mode 7" ratchet that walked the scale through .5,.6,.7,.8, .9,1 to mimic a SNES affine resample - Ashley: "something closer to old school SNES mode 7 shit." That was a deliberate exception to the 1x/2x integer rule, because the fractional frames only existed for the 200ms in between. Now it is a CROSS-FADE, because Ashley asked to drop the zoom: "Replace it with a quick cross-fade, around 120ms. Nothing dynamic." So the integer-scale exception is retired with it - the sprite is only ever drawn at 1x (icon) or 2x (bust), never in between - and the busts still being an exact 2x NEAREST of the icons is what makes the dissolve read as one character stepping forward rather than two pictures swapping. The resting geometry (centred, standing on the --bustfoot ledge, expressed from the card bottom) is unchanged. */ /* ---- ICON -> BUST is a 120ms CROSS-FADE now, not a Mode 7 zoom ------------- Ashley: "Replace it with a quick cross-fade, around 120ms. Nothing dynamic." The six-step steps(6,jump-none) affine zoom is gone. The large bust simply sits at its final resting place (centred, standing on the --bustfoot ledge) and fades in over the small icon, which fades out under it. No transform, no movement, no per-frame scaling - so --busttop/--bustx are no longer read here (they stay emitted, harmless, in case the zoom is ever wanted back). Because the two sprites are the SAME art at 1x and 2x, the dissolve reads as the character stepping forward rather than one picture becoming another. */ .sel-bust-lg{ position:absolute; z-index:4; top:calc(100% - var(--bustfoot) - var(--busth,138px)); left:50%; margin-left:calc(var(--bustw,128px) / -2); image-rendering:pixelated; pointer-events:none; opacity:0; visibility:hidden; transition:opacity .12s ease, visibility 0s linear .12s; } .sel-card[data-active] .sel-bust-lg{ opacity:1; visibility:visible; transition:opacity .12s ease; } /* The resting icon fades out on the same 120ms clock as the big one fades in. */ .sel-bust{ transition:opacity .12s ease; } .sel-card[data-active] .sel-bust{ opacity:0; } /* The field's own foot rule goes: on a selected card the field and the plate are one continuous wash, and the only rule left is the one at the very bottom. */ .sel-card[data-active] .sel-field{ overflow:visible; border-bottom-color:transparent; } /* THE TYPE LEAVES ENTIRELY. Ashley: "the text moves out of the way, but not enough." It was sliding 20px and still showing under the bust. A selected card is a portrait and nothing else - her name, sign and guardian title are all on the panel by then, which is what the panel is for. 64px clears the plate, and the plate clips what is past its edge. */ .sel-plate{ transition:none; } .sel-card[data-active] .sel-name, .sel-card[data-active] .sel-civ{ transform:translateY(64px); opacity:0; } .sel-name, .sel-civ{ transition:transform .22s ease-out, opacity .18s ease-out; } .sel-card{ overflow:hidden; } /* The cursor moves to the list item, since the card now clips its own overflow and the cursor lives outside the card by design. */ .sel-row > li{ position:relative; } @media (prefers-reduced-motion:reduce){ .sel-bust-lg, .sel-name, .sel-civ{ transition:none; } } .sel-orb{ position:absolute; top:6px; right:6px; image-rendering:pixelated; /* A one-pixel dark outline, built from four drop-shadows rather than a border so it follows the disc and not its bounding box. Necessary, not decorative: every disc in the set has a pure WHITE outline ring, which reads beautifully on the dark panel and disappears completely on Venus's #ffeecd wash and Moon's #ffe7ee. The dark keyline is what lets one planet set sit on eleven different pale fields. */ filter:drop-shadow(1px 0 0 rgba(0,0,0,.34)) drop-shadow(-1px 0 0 rgba(0,0,0,.34)) drop-shadow(0 1px 0 rgba(0,0,0,.34)) drop-shadow(0 -1px 0 rgba(0,0,0,.34)); } .sel-glyph{ position:absolute; top:2px; right:2px; width:32px; height:32px; image-rendering:pixelated; opacity:.95; } .sel-plate{ display:block; flex:1; padding:4px 7px 5px; background:var(--skirt); color:var(--onskirt); /* The clipping half of the min-width guard. See the long note on .sel-row. */ min-width:0; overflow:hidden; } /* THE PLATE FILLS DOWNWARD. Ashley: "Please adjust the size of the character name text to fill downward." With the symbol line gone the plate holds two things instead of three, so both grew rather than the plate shrinking: the planet name 10 to 11, the civilian name 11.5 to 13.5. 11 IS THE CEILING and it is arithmetic, not taste. Press Start 2P advances one em per character, the plate's inner width is 132 - 16 = 116, and CHIBI MOON is the longest at 10 characters: 11px needs 110 and fits, 12px needs 120 and wraps. It was set to 12 first and looked fine here, because the real font is missing from this mirror and the fallback measures narrower - the same trap that hid the SAGITTARIUS overflow. Checked on paper rather than on screen. */ .sel-name{ display:block; font-family:"Press Start 2P",monospace; font-size:11px; line-height:1.2; text-shadow:1px 1px 0 rgba(0,0,0,.35); overflow-wrap:anywhere; } .sel-civ{ display:block; margin-top:7px; font-size:13.5px; font-weight:600; opacity:.94; } /* Her sun sign, on the card. It used to live only in the detail panel, which was fine until the panels started hiding with display:none - at which point the eleven signs left the strongly-weighted markup on the one page that is supposed to rank for them. Here it is always in the DOM, always visible, and it makes the card say the whole thing: planet, person, sign. */ /* THE CARD'S BOTTOM LINE IS THE PLANET SYMBOL NOW, not the sun sign. Ashley: "remove the zodiac sign from the character select boxes and replace it with their proper planet glyph." The sign is not lost - it moved to the panel strip, and it is still in the served HTML for every one of the eleven, which is what mattered when it was put on the card in the first place. Worth knowing that it did have a job here: the card is the most heavily weighted part of the page, so the astrology signal is a little quieter on the grid than it was. The mark is the 20x20 senshiglyph at 1x. Not 2x: at 40px it competes with the pixel planet in the field above it, and one surface should carry one planet mark at one size. */ .sel-signline{ display:flex; align-items:center; margin-top:6px; min-width:0; } .sel-signline img{ width:20px; height:20px; image-rendering:pixelated; flex:none; } .sel-card:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 rgba(0,0,0,.3); } /* ---- the RPG cursor ------------------------------------------------------ One cursor, on the active card only. That is the entire point of a cursor: a marker that appears on everything marks nothing. Drawn as a chunky pixel arrow rather than a border glow so it reads as a game and not as a focus ring, and sat OUTSIDE the card so it cannot reflow anything inside it. */ .sel-card[data-active]{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 rgba(0,0,0,.34); } .sel-row > li:has(.sel-card[data-active])::before{ content:""; position:absolute; left:-17px; top:34px; width:14px; height:20px; image-rendering:pixelated; background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='10' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h2v10H0z' fill='%235A3268'/%3E%3Cpath d='M2 1h2v8H2z' fill='%235A3268'/%3E%3Cpath d='M4 2h2v6H4z' fill='%235A3268'/%3E%3Cpath d='M6 4h1v2H6z' fill='%235A3268'/%3E%3Cpath d='M0 1h1v8H0z' fill='%23f6ebbe'/%3E%3C/svg%3E"); animation:sel-nudge .7s steps(2) infinite; } @keyframes sel-nudge{ 0%{margin-left:0} 50%{margin-left:3px} 100%{margin-left:0} } /* ---- THE PLANET SHEEN ----------------------------------------------------- Ashley: "the planet effect, make it not sparkles, use a light sheen." Fifth version of the selection effect and the quietest of the lot. A band of light passes across the disc once, then waits. Nothing else on the card moves. MASKED TO THE SPRITE, which is the part that makes it a sheen rather than a rectangle of light sitting on top of a planet. The pseudo-element is a moving diagonal gradient, and mask-image clips it to the orb's own silhouette - so the light travels across the DISC, runs off its curved edge, and never touches the field behind it. Saturn's rings get lit too, because the mask is his whole sprite and the rings are part of it. The sprite and its size arrive as --orb, --orbw and --orbh, written onto each card by build_select.py. That is deliberate: the orbs are three different sizes and eleven different files, and hardcoding any of that here would put character names in a stylesheet whose whole contract is that it contains none. 115deg, not 90: a vertical wipe reads as a shutter, an angled one reads as light. And the keyframes hold the band OFF the disc for two thirds of the cycle, so it passes about once every two seconds instead of strobing - a sheen that never stops is a barber's pole. */ .sel-card[data-active] .sel-field::after{ content:""; position:absolute; top:3px; right:3px; width:var(--orbw,52px); height:var(--orbh,52px); pointer-events:none; /* z-index 1: ABOVE the planet, BELOW the character. Ashley: "the planet light sheen goes over the character sprite bust. make sure the light sits behind the character's head." It was on 3 and the bust is on 2, so the light was crossing her face. The orb sits at auto, which paints at 0, so 1 is the only value that gets the sheen onto the disc without lifting it over her - and it matters because she OVERLAPS the planet by design: the bust was deliberately put in front of the disc so Saturn could keep her rings at 2x without them crossing her face. Light behind the subject is also simply what a sheen on a distant planet should do. */ z-index:1; /* HARD STOPS, NOT A RAMP. Ashley: "can the sheen be a bit more pixelated". A smooth gradient is the one thing in this grid that is not made of discrete values, and at this size it reads as an airbrush over pixel art. Four flat bands with no blend between them is the same light in the vocabulary of the rest of the page - each stop repeats its colour to the next boundary, so every band is one solid value and the edges between them are hard. */ background:linear-gradient(115deg, rgba(255,255,255,0) 0 41%, rgba(255,255,255,.22) 41% 46%, rgba(255,255,255,.55) 46% 50%, rgba(255,255,255,.88) 50% 54%, rgba(255,255,255,.42) 54% 59%, rgba(255,255,255,0) 59% 100%); background-size:260% 100%; -webkit-mask:var(--orb) no-repeat center / contain; mask:var(--orb) no-repeat center / contain; animation:sel-sheen 3.1s linear infinite; } @keyframes sel-sheen{ 0% { background-position:180% 0; } 32% { background-position:-80% 0; } 100% { background-position:-80% 0; } } /* The press is a different event from the selection and keeps its own signal: a touch darker, no colour, no script. */ .sel-card:active{ filter:brightness(.94); } @media (prefers-reduced-motion:reduce){ .sel-row > li:has(.sel-card[data-active])::before{ animation:none; } .sel-card[data-active] .sel-field::after{ display:none; } } /* ---- Tuxedo Mask, deliberately not a senshi card ------------------------- Double border and more air. He is the only one on the roster who is not a senshi and the card should say so before you read the name. */ .sel-card--wide{ outline:2px solid var(--skirt); outline-offset:3px; } /* SEATED FLUSH like the rest. The 8px lift was for his OLD icon, cut shorter than the senshi (63px content) so it needed air to match. His recut game icon is 68x69, the same as the others, so the lift now just makes him float above the field. Ashley: "tuxedo mask sprite is floating too high in his character box." bottom:0 seats him on the same line as everyone else. */ .sel-card--wide .sel-bust{ bottom:0; } /* ---- under construction -------------------------------------------------- Real cards, dashed, muted, inert. They are on the roster because the roster is the truth; an empty seat is information. */ .sel-card--soon{ background:#f4f2f7; border:2px dashed #B9B3C9; box-shadow:none; color:#6E6278; cursor:default; } .sel-card--soon .sel-field{ background:#f4f2f7; border-bottom:2px dashed #B9B3C9; height:96px; } .sel-card--soon .sel-plate{ background:#E7E3EE; color:#5B5470; } .sel-card--soon:hover{ transform:none; box-shadow:none; } .sel-soon-mark{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-family:"Press Start 2P",monospace; font-size:9px; color:#9A93AC; letter-spacing:1px; text-align:center; line-height:1.8; white-space:nowrap; } /* ---- the panel ----------------------------------------------------------- Sticky so it stays with you as the grid scrolls. Fixed height so a selection change cannot move anything. */ .sel-panels{ /* 340 x 713. Ashley: "this image panel box. It really is lovely, but fuck its big." Down from 429 x 900, keeping the plates' 429:900 aspect exactly so the backdrop still fits with no letterbox at all - the ratio is what makes that true, not the size, so it scales freely as long as both numbers move together. 340/0.47667 = 713. The 89px this frees does NOT become white space: it goes to the roster column, which is what lets the cards grow to 130 and is what stopped Jupiter and Saturn bursting their boxes. Inset 24 from the top and 26 from the right, the same 26 the stage uses on its left, so the two columns sit optically the same distance from the border. */ /* margin-top 8, matching .sel-stage's own 8px of top padding, so the panel and the roster container start on exactly the same line. */ /* 360 x 690, and the two numbers are no longer tied by the plates' ratio. They were: 429:900 exactly, so a contained backdrop filled the panel with no letterbox at all. That held while the roster was 751 tall and the matching panel height was 755. Shortening the cards took the roster to 685, and keeping the ratio would have meant either a panel 70px longer than the column beside it or giving back the width Ashley asked for. Breaking the tie costs nothing, because the thing the ratio was protecting is already protected twice over: .sel-fill is the same artwork again, blurred and covering, sitting behind the sharp copy precisely so that any bar contain leaves is filled with the picture itself. At 360 x 690 the bars are 16px at each side and they are invisible for exactly that reason. */ position:sticky; top:24px; height:690px; width:360px; margin:8px 26px 0 0; } /* display:none, not visibility:hidden, and this is a WEIGHT fix not a style one. loading="lazy" defers an image that is out of the viewport - but all eleven panels are absolutely positioned inside a VISIBLE container, so the browser counted every one of them as in-viewport and fetched the lot. The page measured 4.05MB over 72 requests: you downloaded eleven characters' artwork to look at one. display:none is the one hiding mechanism that actually suppresses a lazy fetch. Cost: it also weakens how Google weights the hidden text, which is why the sun sign moved onto the CARD - the signs are the thing this page is meant to rank for, and they now sit in markup that is never hidden. No fade, because you cannot transition display. Worth losing: 120ms of opacity was never the point of this page. */ .sel-panel{ position:absolute; inset:0; display:none; border:3px solid var(--skirt); background:#0e0c14; color:#fff; overflow:hidden; } .sel-panel[data-active]{ display:block; } /* CONTAIN, not cover, and this is the whole reason the panel got taller. These scans run as narrow as 1 wide by 2.9 tall (Saturn), so cover was throwing away up to half the height: you were seeing 49% of Saturn and 54% of Uranus, which is why the figures looked beheaded. Contain normally means visible letterbox bars. Not here. The crop pass normalised every plate to one black, #0e0c14, and that is exactly the panel's own background, so the bars are the same colour as the thing they sit next to and simply cannot be seen. Full figure, full planet, every character, no cropping, for free. */ .sel-back{ position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:contain; object-position:center; } /* THE LETTERBOX FILL, and the reason the panel does not need a matching black at all. Contain leaves a bar wherever the scan's aspect misses the panel's - 144px top and bottom on Pluto. The plan was to make that bar invisible by putting every plate on one black, and it very nearly worked, but these scans vignette: after normalising, Saturn's corner sits at 12 and its mid-edge at 26, so no single background value can match a plate that does not match itself. Chasing it further meant flattening a gradient that is part of the photograph. So do not match the black - remove the bar. The same image again, object-fit COVER this time, blurred and dimmed, fills the whole panel behind the sharp copy. There is no seam to see because there is no edge: the margin is the same artwork, out of focus. The browser has the file cached from the sharp copy, so it costs one decode and no extra bytes. */ .sel-fill{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:center; /* Barely dimmed. brightness(.5) left the fill DARKER than the sharp scan's own background, which put the seam back exactly where removing it was the point - just inverted. At .92 the two blacks sit on top of each other and the join disappears. */ filter:blur(30px) brightness(.92) saturate(1.1); transform:scale(1.18); } /* Behind the figure: Takeuchi's own planet, cut off the black plate and left on its black. mix-blend-mode:screen is what cuts it. Screen keeps the brighter of the two layers per channel, so the black contributes nothing and the disc composites with no alpha channel, no keying pass and no chance of a fringe. It sits ABOVE the scan, because below it only showed in the letterbox sliver contain leaves at the sides. Screen can only ADD light, so it blooms across the empty black around every one of these figures and barely touches the figure, who is already the brightest thing in frame. The pixel disc was tried in this slot and moved to the card. The division is the point: the panel is where the illustration lives and the grid is where the pixel art lives, and mixing them in one 340px box made both look like accidents. */ .sel-sphere{ position:absolute; left:50%; top:34%; z-index:2; width:135%; transform:translate(-50%,-50%); mix-blend-mode:screen; opacity:.34; pointer-events:none; /* These discs come off the plates at wildly different sizes - Chibi Moon's is 130px across, Pluto's is 27 - and blown up the small ones show the scan's halftone rosette as visible dots. Four pixels of blur kills the rosette and still leaves Saturn's rings legible. */ filter:blur(4px); } /* A wash in the character's own skirt, just enough that the type has something to sit on and that the panel reads as hers even before the name is legible. */ .sel-panel::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:3; background:linear-gradient(180deg, rgba(14,12,20,.9) 0%, rgba(14,12,20,.8) 11%, rgba(14,12,20,0) 36%, rgba(14,12,20,.15) 60%, rgba(14,12,20,.88) 100%); } /* ---- THE HEAD ------------------------------------------------------------- Ashley, twice: "please also fix the font at the top. still to small and still too dark." BIGGER: 16px, up from 13. That is affordable because the planet symbol beside it came down from 40 to 32 and gave the line 8px back. Press Start 2P advances exactly one em per character, so the longest name on the roster - SAILOR CHIBI MOON, seventeen characters - needs 272px against the 273 the line now has. That is one pixel of margin, which is not margin, so the head is allowed to WRAP: it is anchored to the top of the panel and nothing sits under it, so a second line costs nothing and the alternative is a name clipped mid-word on one card in eleven. The shadow layer wraps with it, or the two would desync. LIGHTER: the letters were being painted by the sheen gradient, whose base was white but whose middle stops are pink, and at 13px on a photograph the pink read as grey. The gradient keeps its shimmer but every stop is now white or nearly, and the drop shadow underneath went from one soft offset to a hard black outline on all four sides - so the name is white against the artwork whatever the artwork happens to be doing behind it. */ .sel-head{ position:absolute; top:0; left:0; right:0; z-index:4; display:flex; align-items:center; gap:9px; padding:11px 12px; } .sel-head img{ width:32px; height:32px; image-rendering:pixelated; flex:none; } .sel-planet{ /* 18px, Ashley's call for more of a nameplate. 16 was the one size that kept every name on one line; at 18 the two or three longest (SAILOR CHIBI MOON, SAILOR MERCURY) wrap to a second line, which the head allows since it is anchored to the top with nothing under it. The shadow and the shimmer overlay both wrap with it because all three are the same string at the same width. */ font-family:"Press Start 2P",monospace; font-size:18px; line-height:1.45; color:#fff; text-shadow:2px 2px 0 rgba(0,0,0,.92), -2px 2px 0 rgba(0,0,0,.92), 2px -2px 0 rgba(0,0,0,.92), -2px -2px 0 rgba(0,0,0,.92); } /* ---- THE NAME, AND WHY IT IS NOT CLIPPED TYPE ANY MORE -------------------- Ashley, third time: "the \"sailor ....\" font in the large character panel is still fucked." It was background-clip:text. The letters were painted BY a moving gradient, which meant `color` was transparent and the only thing making the name visible was paint arriving from the background. That has now failed in three different ways on her machine and been patched twice - a white base colour, then a whiter gradient - and both patches were treatments for a technique whose failure mode is an invisible name. A decoration that can delete the content it decorates is the wrong technique, however well it is patched. So the name is ORDINARY SOLID WHITE TEXT with a hard four-way outline. It cannot vanish, cannot go grey, does not depend on background-clip being supported or on the gradient's paint position, and renders identically everywhere. The light still crosses it, in sync with the planet, because the sheen moved OFF the letterforms and onto the head strip: ::after is a translucent white band swept across the whole block on the same 3.1s clock. Same effect to look at, and the worst thing it can do on any browser is nothing. */ .sel-panel[data-active] .sel-planet{ position:relative; color:#fff; } /* ---- THE SHIMMER, NOW ON THE TEXT ONLY ----------------------------------- Ashley: "there is a shimmer effect, but it should only shimmer over the text. right now it looks like a huge left to right swipe... match the shimmer to a light pretty version of the senshi colour." The old sheen swept the whole head strip, which is why it read as a big swipe. This puts it back on the letterforms - but NOT by painting the name with a gradient, which is the background-clip:text technique that made the name vanish on her machine three times (see the long note below). The base name stays ORDINARY SOLID WHITE. The shimmer is a SEPARATE overlay: a copy of the name in a light tint of the senshi's own --trim, revealed only through a diagonal band that sweeps across via mask-position. If the mask is ever unsupported the copy simply shows in full - a readable coloured name - so the worst case is still a visible name, never an invisible one. */ .sel-panel[data-active] .sel-planet::after{ content:attr(data-name); position:absolute; left:0; top:0; width:100%; font:inherit; letter-spacing:inherit; line-height:inherit; pointer-events:none; color:color-mix(in srgb, var(--trim) 58%, #fff); text-shadow:0 0 7px color-mix(in srgb, var(--trim) 65%, #fff); -webkit-mask-image:linear-gradient(105deg, transparent 41%, #000 50%, transparent 59%); mask-image:linear-gradient(105deg, transparent 41%, #000 50%, transparent 59%); -webkit-mask-size:240% 100%; mask-size:240% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; animation:sel-nameshimmer 3.4s linear infinite; } @keyframes sel-nameshimmer{ 0% { -webkit-mask-position:175% 0; mask-position:175% 0; } 58% { -webkit-mask-position:-75% 0; mask-position:-75% 0; } 100% { -webkit-mask-position:-75% 0; mask-position:-75% 0; } } @media (prefers-reduced-motion:reduce){ .sel-panel[data-active] .sel-planet::after{ animation:none; opacity:0; } } /* The large bust in its bordered window, bottom-left. This is the reveal: the card shows an 80px icon, the panel shows the fighting-game portrait. */ /* PADDED OFF EVERY EDGE. Ashley: "the pixel bust from moon fighter is touching the bottom of the box where the text begins. please create padding around each of the pixel busts in the large panel." It was worse than touching - the window's foot sat 26px INSIDE the name strip. Nothing moved the window; the strip grew. It went from two lines to four when the guardian title and the Japanese name were added, 46px to 84, and the window's bottom:58 had been measured against the old height. Anchoring one element to another's size by hand is exactly the kind of number that goes stale the moment the other element changes. 98 = the strip's 84 plus 14 of air, which matches the 14 it already sits in from the left. There was a SECOND, identical copy of this rule further down the file; it is deleted rather than edited, since two rules with one job means the loser is decided by source order rather than by intent. */ /* ---- 1x, AND THE ROUND AT 2x IS WHY THE NOTE IS THIS LONG ----------------- It went to 256x400 for one round on a real argument: a selected card was showing 144x138 of pixel art against the panel's 128x200, so the card held the larger sprite and the eye went there, and Ashley had said she wanted the panel to be the thing that catches attention. The argument was right about the ratio and wrong about which number to move. At 2x the portrait covered most of the Takeuchi plate it is supposed to be standing in front of, so the panel won the eye by deleting the thing that made it worth looking at. Ashley: "the pixel bust is way to big now in the full character panel. please make back to normal size it was." The ratio is fixed from the other end instead - the card's expansion comes down and its sprite is cropped harder by the card, which costs nothing. */ .sel-window{ position:absolute; left:14px; bottom:98px; z-index:4; width:128px; height:200px; border:2px solid var(--trim); box-shadow:0 0 0 2px rgba(0,0,0,.55), 4px 4px 0 rgba(0,0,0,.4); background:#0e0c14; } .sel-window img{ display:block; width:128px; height:200px; image-rendering:pixelated; } .sel-window--bust{ width:140px; height:142px; bottom:96px; } .sel-window--bust img{ display:block; width:136px; height:138px; image-rendering:pixelated; } .sel-window--none{ display:flex; align-items:center; justify-content:center; text-align:center; border-style:dashed; padding:10px; font-family:"Press Start 2P",monospace; font-size:8px; line-height:2; color:var(--trim); } /* ---- THE BLANK PANEL ------------------------------------------------------ Ashley: "when the page loads, don't start with moon expanded. let's have a 'blank'." It borrows the character panel's whole treatment - blurred cover fill behind, contained sharp copy in front, dark wash over the top - because Takeuchi's ten-up spread is on the same black as the character plates and needs no special handling. What it does NOT borrow is the palette: there is no character yet, so it takes the wing's own violet rather than borrowing somebody's, which would be the same mistake as starting on Moon. The plate sits centred rather than at the foot. A character panel's strip is at the bottom because the figure stands above it; here the artwork is a letterboxed band across the middle and the type belongs under it. */ /* NO BLACK ON THE BLANK PANEL. Ashley: "i don't like the black border around the blank image." It was inheriting the character panel's whole treatment, and that treatment is built for a scanned plate on #0e0c14: a near-black background so contain leaves no visible letterbox, and a heavy dark scrim at the top so a white name holds over the artwork. Neither applies here. This plate is on Takeuchi's own pale rainbow wash and there is no name to hold, so all the black was doing was drawing a frame nobody asked for around a picture that is already the right shape for the box. Pale background, pale border, no scrim, and the type at the foot goes dark-on-light instead of the reverse. */ /* DARK TREATMENT (redo of the uncommitted edit). The blank slot now carries the SNES cast portrait (roster-cast.png) on near-black, the same way the character panels treat their scanned plates, with the green keyline sampled off the plate and handed in as --blank-edge by build_select.py. */ .sel-panel--blank{ border-color:var(--blank-edge,#569868); background:#0e120f; } .sel-panel--blank::after{ display:none; } /* THE ART GOES UP, THE TYPE TAKES THE REST, and this is the arithmetic that decided it. The spread is 1.17 wide to 1 tall and the panel is 0.48, so no amount of cropping short of losing half the roster makes this image fill this box: contained, it is 340 by 292 inside 340 by 713, and 421px of the panel is never artwork. Centring it left that 421 split as two vague blurred margins, which reads as an image that failed to load properly. So stop trying to fill the panel with the picture. The picture takes the top, the type takes the bottom, and the blur between them is a gradient rather than a gap. That is also the shape a character panel already has - art above, plate below - so the two swap without the eye having to re-learn the box. */ /* ART ON TOP, TYPE UNDER IT, AND THE NUMBERS COME FROM THE PICTURE. The plate is 0.71 wide to 1 tall and the panel is 0.48, so contained it is 340 by 481 inside 340 by 713 and 232px is not artwork. Pushed to 18% of that slack the art sits 42px from the top and finishes at 523; the type block starts just under it at 76% and runs to the foot. The gradient does the joining, so the boundary between painting and prompt is a fade rather than an edge. This artwork is not on the character plates' black, it is on Takeuchi's own pale rainbow wash, so the blurred fill behind it is pale too - which is why the plate's gradient has to be this heavy at the bottom for white type to hold. */ .sel-panel--blank .sel-back{ object-position:center 42%; } .sel-blank-plate{ position:absolute; left:0; right:0; top:66%; bottom:0; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding:24px 16px 26px; text-align:center; background:linear-gradient(180deg, rgba(14,18,15,0) 0%, rgba(14,18,15,.72) 30%, rgba(14,18,15,.94) 62%, rgba(14,18,15,1) 100%); } .sel-blank-title{ margin:0; font-family:"Press Start 2P",monospace; /* 18 characters at one em each. The plate is 334 wide inside the border and 318 inside its own padding, so 15px fits at 270 with room to spare and 16 would be 288 - still fitting, but with nothing left if the string is ever edited. Press Start 2P advances exactly one em per character and does not wrap gracefully, so the ceiling gets the margin. */ font-size:17px; line-height:1.5; letter-spacing:1px; color:#fff; text-shadow:0 2px 0 #000, 0 0 10px rgba(86,152,104,.55); /* IT BOUNCES. Ashley: "the 'select your senshi' animate it in some way (bounce?) to indicate interaction." steps(1,end), so each keyframe segment HOLDS its own value and the type teleports between four positions instead of easing through them. A smooth bob would read as a web page; three hard frames read as a sprite, which is the only register this page is written in. It rests for most of the cycle and hops once, so it says "waiting for you" rather than "look at me". The sheen that used to be here is gone with the one on the panel name, and for the same reason - see the long note there. */ animation:sel-bob 1.5s steps(1,end) infinite; } @keyframes sel-bob{ 0%, 62% { transform:translateY(0); } 70% { transform:translateY(-3px); } 78% { transform:translateY(-6px); } 88% { transform:translateY(-3px); } 100% { transform:translateY(0); } } .sel-blank-note{ margin:9px 0 0; font-size:13px; line-height:1.45; color:#cfe0d2; } @media (prefers-reduced-motion:reduce){ .sel-blank-title{ animation:none; } } /* Bottom strip: civilian name and HER OWN SUN SIGN. Carries the palette. */ /* ---- THE NAME STRIP ------------------------------------------------------- Four pieces now: guardian title, roman name, Japanese name, sun sign. THE TITLE MOVED ABOVE THE NAME, and that is what let it get bigger. Ashley asked for it larger, and beside the sign it could not go past 8px - "Guardian of the Deep Sea" is 24 characters, Press Start 2P advances one em each, and the space left over after the sign block is 216px. On its own line it has the strip's full 316, so 11px fits with 52px to spare. It also reads better there: a role above a name is a nameplate, a role beside a name is a caption. The Japanese name sits under the roman one, per Ashley, with the sun sign moved down beside it - the sign is the smallest of the four and pairs naturally with the second-line type rather than competing with the title. */ /* ONE COPY OF THIS BLOCK. There were two, forty lines apart, and between them they set padding, civ size, sign size and sign image size twice with different numbers - so what the strip actually looked like was decided by source order rather than by intent, and reading either block told you something false. The values below are the ones that were winning, so nothing moves; the loser is deleted rather than commented out. Second time this file has grown a twin (see the note on .sel-window), so: if a rule here needs changing, change it here. */ .sel-strip{ position:absolute; left:0; right:0; bottom:0; z-index:5; padding:8px 12px 9px; background:var(--skirt); color:var(--onskirt); border-top:2px solid var(--trim); } .sel-strip-power{ display:block; font-family:"Press Start 2P",monospace; font-size:11px; letter-spacing:.5px; line-height:1.3; color:var(--onskirt); opacity:.94; margin-bottom:6px; } .sel-strip-civ{ display:block; font-size:14px; font-weight:700; letter-spacing:.2px; line-height:1.25; } .sel-strip-meta{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:3px; } /* The Japanese name takes the system's own CJK stack, not Raleway. Raleway has no kanji, so every glyph would fall back one at a time and the line would be set in whatever each character found first. */ .sel-strip-jp{ font-family:"Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo","MS PGothic", "Noto Sans JP",sans-serif; font-size:14px; letter-spacing:1px; opacity:.9; line-height:1.3; } .sel-strip-sign{ display:flex; align-items:center; gap:6px; flex:none; font-family:"Press Start 2P",monospace; font-size:9px; letter-spacing:.5px; white-space:nowrap; opacity:.9; } .sel-strip-sign img{ width:24px; height:24px; image-rendering:pixelated; } /* Bottom strip: civilian name and HER OWN SUN SIGN. Carries the palette. */ /* ---- THE NAME STRIP ------------------------------------------------------- Ashley: "styalize the panel at the bottom with the character name and their sign, their and their power." Three pieces now instead of two, so it becomes TWO ROWS rather than one crowded line: the civilian name on top, then the sun sign and the guardian title beneath it. Two rows and not three, because the strip sits ON the artwork - every pixel it grows covers more of the Takeuchi figure. Two rows costs 30px; three would cost 55 and start eating her skirt. The sign sits left and the title right, on the same rule the row above uses, so the strip reads as a small table rather than as a sentence. The title is the only text on the panel that is not a name, so it is set in the pale trim at reduced weight - present, clearly secondary, and it cannot be mistaken for part of the character's name. THE RULES THAT USED TO SIT UNDER THIS NOTE ARE DELETED, not moved. They were a second copy of the strip block that lives forty lines above, and between them the two set padding, civilian size, sign size and sign image size twice with different numbers - so the strip's real appearance was decided by source order instead of by intent, and reading either block told you something untrue. The winning values are folded into the one above. The writing stays because it explains why the strip has the shape it has. */ /* .sel-enter is gone with the button. Ashley: "remove the enter button from the character panel." Both the rule and the markup are deleted rather than hidden - a styled control that no longer exists is the sort of thing that reappears by accident. See build_select.py for what still commits without it. */ /* ---- foot ---------------------------------------------------------------- */ .sel-foot{ padding:16px 26px 22px; border-top:3px solid #C7C4D9; background:#f7f2f6; } .sel-foot .codex-strip-label{ color:#5A3268; } .sel-foot .codex-link{ color:#2e2838; background:#FFFFFB; border-color:#5A3268; } .sel-foot .codex-link:hover{ background:#f6ebbe; } /* The nine unfinished seats, said once in words instead of nine dashed cards. Still said - just not said on the front door twenty times. */ .sel-coming{ margin:12px 0 0; font-size:13.5px; color:#524860; } .sel-coming-door{ font-family:"Press Start 2P",monospace; font-size:10px; color:#5A3268; text-decoration:none; border-bottom:2px solid #C7A8B8; } .sel-coming-door:hover{ background:#f6ebbe; } /* The roster page has no panel, so its grid gets the whole width. */ /* ONE COLUMN, because this page has no preview panel. .sel is a two-column grid so the panel can span the banner row on the select screen. The roster page shares the stylesheet and does not build a panel, so it was inheriting that grid and holding 455px of the page open for an element that does not exist. The visible symptom was not an empty column - it was the four-card groups wrapping 3 + 1, because the roster only had 534px to lay out in. Caught by looking at the page; the card-count check passed the whole time, since wrapping loses no cards. */ .select--roster .sel{ display:block; } .select--roster .sel-stage{ display:block; } .select--roster .sel-roster{ padding:14px; } .select--roster .sel-row{ grid-template-columns:repeat(auto-fill,minmax(104px,140px)); } .sel-foot-note{ margin:12px 0 0; font-size:13px; font-style:italic; opacity:.72; } /* ---- the art credit ------------------------------------------------------ Quieter than the body copy and still readable, which is the whole balance a rights notice has to strike: it is not the content of the page, and it is not decoration either. 12px at .78 opacity on the site's ink measures about 5.5:1 against #FFFFFB, so it clears AA comfortably rather than hiding behind a technicality. Ruled off above so it reads as a separate register from the editorial note it follows. */ .sel-credit{ margin:14px 0 0; padding-top:12px; border-top:1px dotted #C7C4D9; font-size:12px; line-height:1.6; color:#4b4256; opacity:.78; max-width:88ch; } /* ========================================================================== MOBILE ========================================================================== The panel pins to the TOP of the screen in a short wide layout and the grid scrolls underneath it. Tap selects, the ENTER button commits. That two-step is not a compromise for small screens: on a phone there is no hover, so a tap that navigated immediately would mean you could never preview anything, which is the entire feature. ========================================================================== */ @media (max-width:900px){ /* The .sel grid collapses to one column, and the panel goes back to being a band pinned above the roster. */ .sel{ display:block; } .sel-panels{ width:auto; margin:0 -14px 16px; height:280px; } .sel-stage{ padding:14px 14px 18px; } /* THE BACKDROP HAS TO WIN A SPECIFICITY FIGHT IT WAS LOSING SILENTLY. index.css owns the mobile stack and its global hygiene block contains `.cabinet img{ max-width:100%; height:auto }`. That selector scores (0,1,1); `.sel-back{ height:100% }` scores (0,1,0), so on a phone, and ONLY on a phone, both backdrop layers lost their height and fell back to `auto`. The width/height attributes then supplied the aspect ratio, so a 392px-wide panel rendered its 429x900 plate 822px TALL inside a 280px box, absolutely positioned at top:0. object-fit had nothing to do: the box was already the wrong shape. What you saw was the top 280px of the plate, which on a bottom-weighted reframe is the empty sky above her head. The figure was below the panel, not missing. Two classes beats one class plus one type, so this is the minimum needed and it stays local to select.css. index.css is shared and is not touched. */ .sel-panel .sel-back, .sel-panel .sel-fill{ height:100%; } /* align-items:stretch, explicitly. The desktop rule sets align-items:start, which on a GRID controls the block axis and is what keeps the sticky panel from stretching to the height of the whole roster. Re-declaring display as flex here flips that same keyword onto the INLINE axis, and since every child of .sel-panels is absolutely positioned its content width is zero - so the panel collapsed to a 0px sliver and rendered as a blank gap. Same keyword, different axis, silent failure. */ .sel-stage{ display:flex; flex-direction:column; align-items:stretch; padding:14px 14px 18px; } /* The grid leads in the DOM because it is the page's real content and should come first for a reader with no CSS. On a phone the panel has to pin above it, so it is reordered here rather than in the markup. */ /* ONE rule for the phone panel. There were briefly two - an early one at 152px and a later one at 280 - and because they were both in this same media query the loser was decided by source order rather than by intent. The panel silently stayed short. */ .sel-panels{ order:-1; position:sticky; top:0; z-index:30; width:auto; height:280px; margin:0 -14px 16px; padding:0; } .sel-panel{ border-width:0 0 3px 0; } /* PORTRAIT PLATE, LANDSCAPE BAND: contain is the wrong answer here even though it is the right answer on desktop. The desktop panel is 429x900, which IS the plate's aspect, so contain fits it exactly and leaves no letterbox for .sel-fill to hide. The phone band is 392x277. Contain there gives a 132px-wide vertical strip of artwork with two thirds of the band left over, and .sel-fill has to cover a 0.48 plate into a 1.4 box, which blows it up so far that the "out of focus margin" stops being a margin and becomes a bright grey slab beside her. The technique that removes a 144px bar cannot remove 260px of it. So on a phone, crop instead. Cover at 30% down the plate: cover scales to the width, so the band shows the top 34% of the image, and 30% centring puts that window at roughly 13% to 47% of the plate height. Every figure now displays at 665-666px inside its 900px window and is bottom-weighted, which puts every head between 22% and 26% - inside the window, with the upper body under it. This is the crop an arcade banner uses. Cover was rejected for the desktop panel because centred cover beheaded people, at 49% of Saturn visible; the fix is where the window sits, not the fit. .sel-fill is switched off rather than left underneath, because with cover there is no bar to fill and it would only tint the edges. */ .sel-back{ object-fit:cover; object-position:center var(--focus,36%); } .sel-fill{ display:none; } .sel-panel::after{ background:linear-gradient(180deg, rgba(14,12,20,.78) 0%, rgba(14,12,20,0) 26%, rgba(14,12,20,.1) 55%, rgba(14,12,20,.9) 100%); } .sel-head{ left:0; padding:9px 12px; } .sel-planet{ font-size:13px; } .sel-head img{ width:28px; height:28px; } /* HALF SCALE on the phone, via transform rather than a new width. 8x of a 26px disc is 208px, which on a 280px panel stopped being a planet behind her and became a planet in front of her. scale(.5) lands it at exactly 4x, so the integer-scale rule survives and the pixels stay square - setting a CSS width instead would have given Saturn a fractional zoom. */ .sel-sphere{ width:210%; opacity:.34; } /* At 280px the phone panel is the desktop one, scaled: full figure via contain, portrait window bottom-left at 1x so the integer scale rule holds, strip across the foot. The old 152px band could only ever be a name plate. */ /* Same stale-number problem as the desktop window, same fix. The phone strip is 78px tall now that it carries four lines, and bottom:46 put the portrait 32px inside it. 92 = 78 plus 14 of air, the same 14 the desktop uses. The window shrinks to keep its head clear of the panel top: the phone panel is only 280 tall and the strip takes 78 of it. 64x100, NOT 56x88, and the note that used to sit here was wrong about why it did not matter. It claimed the img kept its own size inside a smaller container; the very next line set the img to 56x88 as well. 56/128 is .4375 and 88/200 is .44, so every phone was getting these portraits at a fractional scale AND at a slightly wrong aspect - squashed by half a percent on top of being resampled. 64x100 is exactly half of the source in both axes, which is the same integer-scale rule the sphere above it already follows, and it is 8px wider and 12px taller than what it replaces. */ .sel-window{ left:10px; bottom:92px; width:64px; height:100px; } .sel-window img{ width:64px; height:100px; } .sel-window--none{ font-size:6px; line-height:1.9; } /* THE BLANK PANEL IS THE ONE THAT WANTS THE PHONE'S SHAPE. Everything else in this media query crops the artwork, because a 429x900 portrait plate in a 366x280 band has to lose something. The spread is the opposite problem: it is 1.16 wide to 1 tall against a band that is 1.3, so CONTAIN very nearly fills it - 326 of 366 - and cover, which the rule above sets for characters, was throwing away three of the ten senshi to no purpose. So it opts back out of cover, and the type goes to the foot where the name strip sits on a character panel, so the two swap without anything jumping under your thumb. */ .sel-panel--blank .sel-back{ object-fit:contain; object-position:center center; } .sel-blank-plate{ top:auto; padding:10px 12px 11px; background:linear-gradient(180deg, rgba(246,241,248,0) 0%, rgba(246,241,248,.9) 40%, rgba(246,241,248,1) 100%); } .sel-blank-title{ font-size:11px; letter-spacing:.5px; } .sel-blank-note{ font-size:12px; margin-top:6px; } /* The strip carries four things now and the phone panel is 280px tall, so the type comes down a step across the board rather than the strip growing into the artwork. The title still leads at 9px, which is bigger than the 7px it was on desktop before this round. */ .sel-strip{ padding:7px 12px 8px; } .sel-strip-power{ font-size:9px; margin-bottom:4px; } .sel-strip-civ{ font-size:15px; } .sel-strip-jp{ font-size:12.5px; } .sel-strip-sign{ font-size:8px; } /* STACK IT. The desktop banner is a 260px logo column plus the rest, and on a 390px phone "the rest" is 52px - which crushed the title and the intro into a 52px ribbon 597px tall. The logo cannot shrink, because 2x is the only scale a pixel sprite may use, so the column has to go. One column, logo on top, type under it. */ .sel-banner{ padding:16px 14px 14px; grid-template-columns:minmax(0,1fr); justify-items:start; gap:12px; } /* The plate box loses the stage's side margins on a phone - 26px each side out of 390 is a tenth of the screen spent on nothing. */ .sm-plates{ margin:0 14px 16px; } .sel-foot{ padding:14px; } /* 11px is the floor for a pixel face. Nothing below it on a phone. */ .sel-kicker{ font-size:11px; } .sel-h{ font-size:12px; } .sel-name{ font-size:11px; } .sel-soon-mark{ font-size:9px; } .sel-row{ grid-template-columns:repeat(auto-fill,minmax(98px,1fr)); justify-content:stretch; } } /* ---- mobile stack order ------------------------------------------------- index.css owns the mobile stack: menu order 2, about card order 3. .sel is a new block, so it only needs its slot in that existing scale. Same slot wing.css takes. */ @media (max-width:1249px){ .sel{ order:4; width:100%; max-width:100%; margin:12px 0 20px 0; } } /* ---- shared column keeps SITE type, not select type ---------------------- Identical reason to the note in wing.css: body.select sets Raleway and line-height 1.7 for its own content, the shared right column lives inside that body and inherits it, and the menu grows from 333px. This has to live here rather than in index.css because index.css is linked first and would lose on source order at equal specificity. */ body.select .rightsidebox--home, body.select .rightsidebox--home *{ line-height:normal; } body.select #mainmenu .sidelinks li a{ line-height:1.2; } body.select #mainmenu .menu-title{ line-height:1.1; } /* ---- no JS --------------------------------------------------------------- Without script the first panel is the one marked active in the HTML and every live card is an ordinary link straight to its profile. The page is fully usable; it just does not preview. */ /* ========================================================================== THE PLATE DISPLAY ========================================================================== Ashley: "Below the entire the choose your senshi section, create a display a nice display of this artwork and the planetary spheres. ... no extra text or anything, just a beautiful display." So: no captions, no headings, no frame furniture beyond what the pictures need to sit properly. Two plates, side by side, in the site's own box. MATCHED ON HEIGHT, NOT WIDTH, and that is the whole trick. One plate is landscape (the engraving, about 1.15:1) and the other is portrait (Takeuchi's illustration, about 0.70:1). Matched on width they would finish at wildly different heights and read as two unrelated things dumped in a row. Matched on height they read as two prints hung on the same wall, which is what they are. At 500px tall the pair comes to about 950px, inside the 989 the box has. A CREAM MAT, NOT THE PANEL BLACK. The detail panel above is black because those plates were photographed on black. These two are on paper - one a hand-coloured engraving on cream, one a watercolour on pale blue wash - so a black mount would fight both of them. Cream is what a gallery would use, and it means the paper of each picture continues into the mount rather than stopping at a hard edge. The thin inner keyline on each figure is doing a real job rather than decorating: both plates run to a pale edge, so without it the artwork would dissolve into the mat and lose its shape. */ /* INSIDE the box now, above the goes-deeper strip, per Ashley. It was below the whole cabinet; it is now another compartment of it, so it takes the roster container's treatment rather than the outer box's - 2px lilac border and a 3px offset shadow, not the 3px plum and 5px the cabinet itself uses. A box inside a box should not have the heavier frame of the two. Margins match the stage's so it lines up with the roster above it. */ /* ---- THE PLATE DISPLAY ---------------------------------------------------- Ashley opened her sprite-background library with "you're welcome to look at and use any of these on the landing page." Most of it is SCENE art - the Crown arcade, Hikawa shrine, Crystal Tokyo at sunset - which is lovely and is not background material: a drawing of a place behind a grid of cards competes with the cards, and behind Takeuchi's own artwork it would be two illustrations arguing. Three files in there are TILES, and one of them is exactly right. tile25 is 256x190 frost lace and its opposite edges match to ZERO on both axes, so it repeats with no seam anywhere - measured, not assumed, which is the only way to know with a hand-drawn tile. It is hue-shifted to the same violet as the doily bands, so the page carries one chrome colour instead of two. It sits UNDER the radial, not instead of it. The radial is what keeps the middle of this box bright enough for scanned artwork to sit on; the tile is what stops the edges being flat. Two layers, the frost showing through where the radial has faded out. */ .sm-plates{ display:flex; gap:24px; align-items:center; justify-content:center; margin:0 26px 22px; padding:26px 22px; background-image: radial-gradient(120% 90% at 50% 0%, #fffdf6 0%, rgba(247,241,234,.94) 62%, rgba(239,231,224,.86) 100%), url("images/sailormoon/select/lace/frost.png"); background-repeat:no-repeat, repeat; border:2px solid #BDB6D2; image-rendering:pixelated; box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 3px 3px 0 rgba(90,50,104,.13); } .sm-plate{ margin:0; display:block; line-height:0; } .sm-plate img{ display:block; height:500px; width:auto; max-width:100%; border:1px solid rgba(90,50,104,.35); box-shadow:0 2px 10px rgba(60,40,70,.18); background:#fffdf6; } /* One plate on its own gets centred rather than stretched. This happens on purpose whenever a plate file is not on disk yet - build_select.py skips a missing path instead of emitting a broken image, so the section has to look deliberate with either one picture or two. */ .sm-plates:has(.sm-plate:only-child) .sm-plate img{ height:560px; } /* Stack on anything narrow, and stop matching heights - a 500px-tall portrait next to a 500px-tall landscape needs 950px of width and a phone has 390. Width governs instead, which is the right constraint once they are one per row. */ @media (max-width:900px){ .sm-plates{ flex-direction:column; gap:18px; padding:16px 14px; margin:0 0 18px; } .sm-plate img, .sm-plates:has(.sm-plate:only-child) .sm-plate img{ height:auto; width:100%; } } /* ========================================================================== THE TITLE SCREEN v2 -- persistent castle, menu floats over it ========================================================================== Ashley: "I want the castle to not disappear, and the character boxes and senshi panel remain above it." So the castle is no longer a hero that collapses on open - it is the PERSISTENT backdrop of the whole select box, and the frosted menu (banner + 4-wide roster + detail panel) floats on top of it, inset far enough that the castle frames it: the moon and palace show in the band above, the reflection in the band below, the sky in the side gutters. PROGRESSIVE ENHANCEMENT is unchanged: with no script or reduced-motion the page IS the menu over the static castle, roster in the served HTML and never display:none. The intro (crisp video + logo + PRESS START) is a JS overlay on load, and when it ends it fades away to leave the persistent castle behind the menu - the castle never resizes and never disappears. */ .sel--title{ display:block; position:relative; } .sm-stage{ position:relative; padding:16px 22px 40px; overflow:hidden; } /* the persistent castle backdrop (the 114kb poster, cover, lightly darkened for legibility - visible, not blurred into atmosphere) */ .sel--title .sm-bg{ position:absolute; inset:0; z-index:0; background:#0a1130 url("images/sailormoon/video/castle-poster.png") center 34% / cover no-repeat; filter:brightness(.86) saturate(1.08); } .sel--title .sm-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,17,48,.06) 0%, rgba(10,17,48,.20) 46%, rgba(8,10,28,.42) 100%); } .sm-stage > .frost-win{ position:relative; z-index:1; } /* ---- the frosted select window (the menu, floating over the castle) -------- */ .frost-win{ border:3px solid rgba(255,255,255,.62); box-shadow:0 20px 60px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.16); background:linear-gradient(rgba(247,242,250,.80), rgba(238,232,246,.82)); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); transition:opacity .5s ease .05s, transform .5s ease .05s; } .sel--title .frost-win{ display:grid; grid-template-columns:minmax(0,1fr) 360px; align-items:start; } .sel--title.is-intro .frost-win{ opacity:0; transform:translateY(16px); } /* First-paint guard: JS sets is-intro + no-anim synchronously so the menu is hidden instantly (no fade-out flash); no-anim is dropped a frame later so the auto-open still animates. */ .sel--title.no-anim .frost-win, .sel--title.no-anim .sm-intro{ transition:none !important; } /* the banner keeps its sky wallpaper but lets a little castle glow through */ /* Banner unified with the castle: its own pink sky wallpaper is gone, so the one sky at the top is the castle's, softened by the frost veil. A light gradient keeps the plum Press Start title legible over it. */ .sel--title .frost-win .sel-banner{ background-image:linear-gradient(rgba(255,255,251,.30), rgba(247,242,250,.52)); background-color:transparent; border-bottom-color:rgba(199,196,217,.55); } /* ---- FOUR ACROSS, always, and uniform ------------------------------------ Ashley: "shrink the character select boxes so you can fit 4 across in a row." auto-fill dropped a track whenever the frosted window was a hair narrow, which is what wrapped Jupiter and Saturn onto a second line. A fixed four-column grid makes it impossible: every row is four equal columns and the cards size to the window, so a three-card group (Luminaries) reads at exactly the same card size as a four-card group instead of stretching. The card is ~124 here instead of 132, so the name plate drops to 10px - CHIBI MOON is ten characters and clears at one em each. */ .sel--title .sel-row{ grid-template-columns:repeat(4, minmax(0,1fr)); justify-content:stretch; } .sel--title .sel-name{ font-size:10px; } /* ---- GROUP HEADINGS as a bracket rule ------------------------------------ Ashley picked this over a chip or a banner. A gold reticle bracket sits before the label and a gold rule fades off after it, so the group dividers echo the player-select reticle on the blank panel and the whole screen shares one motif. Select screen only; the roster page keeps its plain dashed heads. */ .sel--title .sel-h{ display:flex; align-items:center; gap:10px; margin:0 0 9px; padding:0; border-bottom:0; font-family:"Press Start 2P",monospace; font-size:12px; letter-spacing:1px; text-transform:uppercase; color:#5A3268; white-space:nowrap; } .sel--title .sel-h::before{ content:""; flex:none; width:11px; height:17px; border:3px solid #b98a2b; border-right:0; /* [ bracket, gold */ box-shadow:-1px 1px 0 rgba(90,50,104,.22); } .sel--title .sel-h::after{ content:""; flex:1; height:3px; background:#b98a2b; -webkit-mask:linear-gradient(90deg,#000 0,#000 44%,transparent 100%); mask:linear-gradient(90deg,#000 0,#000 44%,transparent 100%); } /* ---- SCROLLING TILE BACKGROUND behind the cards -------------------------- Ashley: "change it to tile24.gif and scroll it horizontally. this is what the game it's from does. maybe cycle between tile24.gif and tile25.gif." The Jougai Rantou select screen runs its doily background sideways, so ours does too: tile24 (lavender) and tile25 (blue, with stars) are two seamless lace tiles that both repeat on a 256px step, so a single -256px scroll loops cleanly for either. They ride on two layers that crossfade, so the field drifts sideways and shifts lavender<->blue the way the arcade one cycles. The cards sit above on z-index 1; the tile shows through their translucent fields and in the gutters, which is the whole point. */ .sel--title .sel-roster{ position:relative; overflow:hidden; background:linear-gradient(180deg,#ece4f0 0%,#f2ecf6 52%,#eae3f0 100%); } .sel--title .sel-roster > *{ position:relative; z-index:1; } .sel--title .sel-roster::before, .sel--title .sel-roster::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; image-rendering:pixelated; background-repeat:repeat; } .sel--title .sel-roster::before{ background-image:url("images/sailormoon/select/lace/tile24.gif"); animation:sel-tilescroll 26s linear infinite, sel-tilefadeA 20s ease-in-out infinite; } .sel--title .sel-roster::after{ background-image:url("images/sailormoon/select/lace/tile25.gif"); animation:sel-tilescroll 26s linear infinite, sel-tilefadeB 20s ease-in-out infinite; opacity:0; } @keyframes sel-tilescroll{ from{ background-position:0 0; } to{ background-position:-256px 0; } } @keyframes sel-tilefadeA{ 0%,38%{opacity:.9} 50%,88%{opacity:0} 100%{opacity:.9} } @keyframes sel-tilefadeB{ 0%,38%{opacity:0} 50%,88%{opacity:.9} 100%{opacity:0} } @media (prefers-reduced-motion:reduce){ .sel--title .sel-roster::before{ animation:none; opacity:.85; } .sel--title .sel-roster::after{ animation:none; opacity:0; } } /* ---- the blank panel, dressed as a fighting-game player select ------------ Ashley: "it just feels like an empty box... add something fighting menu-like." Gold reticle brackets frame the cast portrait, a PLAYER SELECT kicker sits over CHOOSE YOUR SENSHI, and a block cursor blinks after the prompt. */ /* The reticle hugs the cast portrait's ACTUAL painted rect. roster-cast is 1000x888 drawn object-fit:contain into the 360x690 panel, so it lands full width at top:156 and runs 320px tall (to 476). The frame sits just outside that: 150 down to 480, a hair inside the side edges since the art is full-bleed. Tied to the fixed panel height; hidden on the mobile bottom-sheet. */ .sel-blank-frame{ position:absolute; left:3px; right:3px; top:154px; bottom:214px; z-index:6; pointer-events:none; } .sel-blank-frame .c{ position:absolute; width:18px; height:18px; border:3px solid #f6ebbe; filter:drop-shadow(0 1px 0 rgba(0,0,0,.6)); } .sel-blank-frame .tl{ left:0; top:0; border-right:0; border-bottom:0; } .sel-blank-frame .tr{ right:0; top:0; border-left:0; border-bottom:0; } .sel-blank-frame .bl{ left:0; bottom:0; border-right:0; border-top:0; } .sel-blank-frame .br{ right:0; bottom:0; border-left:0; border-top:0; } .sel-blank-kicker{ margin:0 0 8px; font-family:"Press Start 2P",monospace; font-size:9px; letter-spacing:3px; text-transform:uppercase; color:#f6ebbe; text-shadow:0 2px 0 #000; } .sel-blank-cur{ display:inline-block; width:.62em; height:1.05em; margin-left:4px; background:#f6ebbe; vertical-align:-2px; animation:sel-blink 1.06s steps(1) infinite; } @keyframes sel-blink{ 0%,50%{opacity:1} 51%,100%{opacity:0} } @media (prefers-reduced-motion:reduce){ .sel-blank-cur{ animation:none; } } @media (max-width:900px){ .sel-blank-frame{ display:none; } } /* ---- the intro overlay (crisp castle + pulsing logo + PRESS START) --------- */ .sm-intro{ position:absolute; inset:0; z-index:3; overflow:hidden; display:flex; align-items:flex-start; justify-content:center; opacity:1; transition:opacity .5s ease; background:#000; /* start BLACK: hides the persistent finished-castle backdrop until the cut plays from frame 0 */ } .sel--title:not(.is-intro) .sm-intro{ opacity:0; pointer-events:none; } .sm-intro .sm-castle{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; image-rendering:pixelated; background:#000; } .sm-title{ position:static; z-index:2; pointer-events:none; display:flex; flex-direction:column; align-items:center; width:100%; } .sm-logo{ image-rendering:pixelated; width:260px; height:100px; margin-top:min(16vh,150px); filter:drop-shadow(0 3px 10px rgba(0,0,0,.7)) drop-shadow(0 0 2px #000); animation:sm-pulse 1.6s ease-in-out infinite; } @keyframes sm-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.05); } } .sm-prompt{ position:absolute; top:64%; left:0; right:0; margin:0; text-align:center; font-family:"Press Start 2P",monospace; font-size:18px; letter-spacing:2px; color:#fff; text-shadow:0 0 12px #e56aa6, 0 2px 0 #7a2450, 0 3px 6px #000; animation:sm-bounce 1.5s cubic-bezier(.5,-0.3,.5,1.3) infinite; } .sm-prompt span{ display:block; font-size:11px; margin-top:12px; color:#ffe9a8; letter-spacing:1px; } @keyframes sm-bounce{ 0%,100%{ transform:translateY(0); } 45%{ transform:translateY(-7px); } 60%{ transform:translateY(-3px); } } @media (prefers-reduced-motion:reduce){ .sm-logo, .sm-prompt{ animation:none; } .frost-win, .sm-intro{ transition:none; } } /* ---- MOBILE LITE ---------------------------------------------------------- No video on a phone: the persistent castle poster IS the backdrop, the menu stacks to one column, and the intro overlay just shows the logo. */ @media (max-width:900px){ .sm-stage{ padding:92px 8px 18px; } .sel--title .frost-win{ display:block; } .sel--title .sel-row{ grid-template-columns:repeat(2, minmax(0,1fr)); } .sel--title .sm-intro .sm-castle{ display:none; } /* poster backdrop is enough */ .sm-logo{ width:220px; height:85px; margin-top:20px; animation:none; } .sm-prompt{ top:auto; bottom:14px; font-size:13px; } .sm-prompt span{ display:none; } } /* ========================================================================== THE LOCKED / UNLOCKABLE SEAT (Helios, the Sun) ========================================================================== Ashley: a fourth Luminaries slot, "grayed out unlockable... think og smash 64." A grey silhouette bust and the gold Sun glyph, no name. It PREVIEWS on hover (its panel is the reveal) but is a
with no href, so it can never be entered. Kept out of the active-card machinery: no bust-lg swap, no sheen; the plate and silhouette stay put on hover. Appended last so these win the cascade. */ .sel-card--locked{ cursor:default; border-color:#8b8698; } .sel-card--locked .sel-field{ background:#d9d5e0; } .sel-card--locked .sel-plate{ background:#6b6675; color:#efeef3; } .sel-card--locked .sel-name{ letter-spacing:3px; } .sel-card--locked .sel-civ{ margin-top:6px; text-transform:uppercase; font-size:10px; letter-spacing:2px; opacity:.85; } /* the gold Sun glyph stays in colour - it names the seat */ .sel-card--locked .sel-glyphmark{ opacity:1; } /* a little padlock where the planet disc would sit */ .sel-lock{ position:absolute; top:7px; right:7px; width:18px; height:18px; z-index:3; opacity:.9; background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M4 7.5V5a4 4 0 0 1 8 0v2.5' fill='none' stroke='%235e5a68' stroke-width='2'/%3E%3Crect x='2.5' y='7' width='11' height='8' rx='1.4' fill='%235e5a68'/%3E%3Ccircle cx='8' cy='10.4' r='1.4' fill='%23d9d5e0'/%3E%3C/svg%3E"); } /* stays inert-looking when previewed (data-active): silhouette and plate hold */ .sel-card--locked[data-active] .sel-bust{ opacity:1; visibility:visible; } .sel-card--locked[data-active] .sel-name, .sel-card--locked[data-active] .sel-civ{ transform:none; opacity:1; } .sel-card--locked[data-active] .sel-field::after{ display:none; } .sel-card--locked:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 rgba(0,0,0,.26); } /* the locked panel: grayed Helios beneath a true-colour sun (baked into the backdrop). No name, no shimmer, a dark locked strip with one gold word. */ .sel-panel--locked .sel-planet{ letter-spacing:9px; } .sel-panel--locked .sel-planet::after{ display:none; } .sel-panel--locked .sel-strip{ background:#191521; color:#cbc5d6; border-top-color:#3a3350; } .sel-panel--locked .sel-strip-power{ color:#e4cb7e; letter-spacing:2px; text-transform:uppercase; } /* Helios locked panel: the sun rendered as the same enlarged glowing-disc layer the other planets use (.sel-sphere), but brighter and high in the sky above him. */ .sel-panel--locked .sel-sphere--sun{ top:19%; width:74%; opacity:.96; mix-blend-mode:screen; filter:blur(1px); } /* The blank-panel reticle now PULSES like a live selection cursor. */ .sel-blank-frame .c{ animation:sel-reticle 1.15s ease-in-out infinite; } @keyframes sel-reticle{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } } @media (prefers-reduced-motion:reduce){ .sel-blank-frame .c{ animation:none; opacity:.92; } } /* ============================================================================ FIVE-ROW RESTRUCTURE (August 2 2026) Ashley un-locked Helios and added the Asteroid senshi and Starlights rows, so the roster is 20 seats in five rows. Two consequences handled here. ============================================================================ */ /* FIXED CENTERED PANEL. Ashley: the tall panel "feels really skinny and tall... needs to feel more centralized." Pinned to the grid's height it only got worse with every row. It stops stretching now and centres vertically beside the roster, so it stays a comfortable portrait card no matter how tall the grid grows. */ .sel--title .sel-panels{ align-self:center; } /* The new seats are game-sprite-less, so their cards carry no 2x zoom bust. Without this the resting bust vanished on select (the CSS was hiding it to reveal a zoom sprite that is not there). Cards with no .sel-bust-lg keep their resting bust lit instead. */ .sel--title .sel-card:not(:has(.sel-bust-lg))[data-active] .sel-bust{ opacity:1; transform:none; filter:none; } /* Ashley: "starlights character select background color needs to be darker." The three leather Starlights get a dark field behind the bust instead of the pale wash - reads as rock/leather, and the star-twinkle orb pops on it. The field carries no text, so this sidesteps the wash's contrast guard; Kakyuu keeps her warm red-royal field. */ .sel--title .sel-card[data-key="fighter"] .sel-field{ background:#20233a; } .sel--title .sel-card[data-key="maker"] .sel-field{ background:#241f38; } .sel--title .sel-card[data-key="healer"] .sel-field{ background:#182a24; } .sel--title .sel-card[data-key="fighter"] .sel-name, .sel--title .sel-card[data-key="maker"] .sel-name, .sel--title .sel-card[data-key="healer"] .sel-name{ text-shadow:1px 1px 0 rgba(0,0,0,.6); } /* ============================================================================ THE EXTENDED ROSTER (August 2 2026) Ashley: the twenty seats read as one wall of equal importance and the starlights spilled below the fold. The Asteroid senshi and the Starlights - a later, B-tier cast - fold into a native
, collapsed by default, so the front door is the classic lineup and the extra cast is one click away. Native
keeps every card in the DOM (search, no-JS) and is keyboard accessible; no script involved. ============================================================================ */ .sel--title .sel-extended{ margin-top:8px; } .sel--title .sel-extended-toggle{ list-style:none; cursor:pointer; user-select:none; display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0; padding:9px 12px; border:2px dashed #b98a2b; border-radius:3px; background:linear-gradient(rgba(255,255,251,.55), rgba(244,239,250,.42)); } .sel--title .sel-extended-toggle::-webkit-details-marker{ display:none; } .sel--title .sel-extended-toggle::before{ content:"\25B8"; flex:none; color:#b98a2b; font-size:13px; line-height:1; transition:transform .2s ease; } .sel--title .sel-extended[open] > .sel-extended-toggle::before{ transform:rotate(90deg); } .sel--title .sel-extended-label{ font-family:"Press Start 2P",monospace; font-size:12px; letter-spacing:1px; text-transform:uppercase; color:#5A3268; } .sel--title .sel-extended-hint{ font-family:"Raleway",sans-serif; font-size:12.5px; font-weight:600; color:#8a7fa0; letter-spacing:0; } .sel--title .sel-extended-toggle:hover{ border-color:#8a5f1e; } .sel--title .sel-extended-toggle:focus-visible{ outline:3px solid #b98a2b; outline-offset:2px; } /* the two groups inside get their normal spacing back once revealed */ .sel--title .sel-extended[open] .sel-group:first-of-type{ margin-top:12px; } @media (prefers-reduced-motion:reduce){ .sel--title .sel-extended-toggle::before{ transition:none; } } /* ---- ZOOM FITS THE SHORTER CARD (August 2 2026) -------------------------- Ashley: "the 2x zoom on the sprite busts... they are way too big now." The cards shrank but the 2x bust did not, so it overflowed and cropped the face. Scale the highlighted bust down from its foot so it sits inside the card. */ .sel--title .sel-card[data-active] .sel-bust-lg{ transform:scale(.7); transform-origin:bottom center; } /* ---- PRETTIER EXTENDED TOGGLE (not graph paper) -------------------------- Ashley: "the drop down, can you stylize more pretty? not the grid paper." The dashed border read as graph paper; this is a soft pearl-gold-lilac jewel bar with a solid gold edge and a little gold star that turns when it opens. */ .sel--title .sel-extended{ margin-top:10px; } .sel--title .sel-extended-toggle{ gap:12px; padding:12px 18px; border-radius:10px; border:1.5px solid #d9b45c; background:linear-gradient(135deg, rgba(246,233,201,.92) 0%, rgba(243,225,241,.88) 50%, rgba(225,213,243,.92) 100%); box-shadow:0 1px 0 rgba(255,255,255,.85) inset, 0 3px 10px rgba(90,50,104,.14); transition:box-shadow .2s ease, transform .12s ease, background .2s ease; } .sel--title .sel-extended-toggle::before{ content:"\2726"; color:#c99a2e; font-size:15px; line-height:1; text-shadow:0 1px 0 rgba(255,255,255,.7); transition:transform .25s ease; } .sel--title .sel-extended[open] > .sel-extended-toggle::before{ transform:rotate(180deg); } .sel--title .sel-extended-label{ color:#6a3f78; } .sel--title .sel-extended-hint{ font-style:italic; font-size:13px; color:#9a7fa8; } .sel--title .sel-extended-toggle:hover{ transform:translateY(-1px); box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 5px 15px rgba(90,50,104,.2); } .sel--title .sel-extended[open] > .sel-extended-toggle{ border-radius:10px 10px 0 0; } /* ---- MOODY OUTER SENSHI (August 2 2026) ---------------------------------- Ashley: "a darker moodier tone for the outer senshi cards. inners pop fun, outers more dramatic." Their card field takes a deep tone behind the bust so the outer row reads dramatic against the bright inners; field carries no text so this sidesteps the wash guard, same as the leather Starlights. */ .sel--title .sel-card[data-key="uranus"] .sel-field{ background:#182038; } .sel--title .sel-card[data-key="neptune"] .sel-field{ background:#123c34; } .sel--title .sel-card[data-key="pluto"] .sel-field{ background:#100e18; } .sel--title .sel-card[data-key="saturn"] .sel-field{ background:#2a1638; } .sel--title .sel-card[data-key="uranus"] .sel-name, .sel--title .sel-card[data-key="neptune"] .sel-name, .sel--title .sel-card[data-key="pluto"] .sel-name, .sel--title .sel-card[data-key="saturn"] .sel-name{ text-shadow:1px 1px 0 rgba(0,0,0,.55); } /* ---- ZOOM: back to a CLEAN integer 2x that pops up (August 2 2026) -------- Ashley: the scaled-down zoom looked "totally crushed... small and smashed" - correct, scale(.7) is non-integer and breaks the pixel grid. Revert to the crisp 2x and, since the card is short, let the selected bust rise OUT of the card (overflow visible, lifted above its neighbours) - a clean fighting-game pop rather than a squashed sprite. "rather too big and clean than small and smashed." */ .sel--title .sel-card[data-active] .sel-bust-lg{ transform:none; } .sel--title .sel-card[data-active]{ overflow:hidden; } /* ---- SPRITE SITS FLUSH ON THE CARD FLOOR (August 2 2026) ----------------- Ashley: "each bust was sitting with a large bar from where the [n]ame text was. push the 2x sprite down to the bottom of the character box so that area that contains the name text doesn't look like a fat bottom border." That "fat bottom border" is the --bustfoot ledge: 16px did double duty as the shelf the sprite stood on AND, via the plate's inset shadow, a 16px band of skirt colour along the nameplate's bottom edge. Zero the ledge on the title screen and both go at once - the 2x bust drops to the very bottom of the card (its foot at 100%), and the skirt band collapses to nothing, so the plate under the sprite is one clean wash with no border stripe. Integer 2x is untouched; only the resting Y moves. */ .sel--title.sel{ --bustfoot:0px; } /* ========================================================================== THE "A MANGA BUILT ON THE PLANETS" INTRO HERO ========================================================================== A beautiful lead-in above the teaching panel, built on Takeuchi's 1994 Pretty Soldiers frontispiece. Beat 1: the poster drifts behind a frosted, gold-bordered card with gold-star sparkles. Beat 2: on scroll it zooms into the celestial-spheres chart at the centre of the guardians. Namespaced .lore-hero* so it never collides with the castle intro (.sm-intro). The poster path is set once as --lore-poster. Motion is fully reduced-gated. */ .lore-hero-wrap{ --lore-poster:url("images/sailormoon/plates/pretty-soldiers.jpg"); --lh-ink:#f4eefb; --lh-gold:#e6c15a; --lh-gold-deep:#b9862b; --lh-space1:#0a0616; --lh-space2:#1b1030; margin:26px 0 0; } .lore-hero{ position:relative; min-height:100svh; overflow:hidden; display:flex; align-items:center; background: radial-gradient(1200px 700px at 78% 38%, rgba(120,70,160,.35), transparent 60%), linear-gradient(160deg, var(--lh-space2) 0%, var(--lh-space1) 55%, #120a24 100%); } .lore-hero::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; background-image: radial-gradient(1.4px 1.4px at 12% 22%,#fff 50%,transparent 51%), radial-gradient(1.2px 1.2px at 26% 74%,#fff 50%,transparent 51%), radial-gradient(1.3px 1.3px at 62% 14%,#fff 50%,transparent 51%), radial-gradient(1.1px 1.1px at 88% 62%,#fff 50%,transparent 51%), radial-gradient(1.5px 1.5px at 45% 88%,#fff 50%,transparent 51%), radial-gradient(1.2px 1.2px at 8% 54%,#fff 50%,transparent 51%), radial-gradient(1.3px 1.3px at 72% 44%,#fff 50%,transparent 51%); } .lore-hero-art{ position:absolute; inset:0; z-index:0; background-image:var(--lore-poster); background-repeat:no-repeat; background-size:cover; background-position:66% 42%; transform:scale(1.06); transform-origin:70% 46%; animation:lh-kenburns 26s ease-in-out infinite alternate; will-change:transform; } @keyframes lh-kenburns{ from{transform:scale(1.05) translate(0,0);} to{transform:scale(1.12) translate(-1.5%,-1.2%);} } .lore-hero-scrim{ position:absolute; inset:0; z-index:1; pointer-events:none; background: linear-gradient(90deg, rgba(10,6,22,.92) 0%, rgba(10,6,22,.72) 26%, rgba(10,6,22,.20) 48%, rgba(10,6,22,0) 66%), radial-gradient(120% 90% at 50% 50%, transparent 62%, rgba(8,4,18,.7) 100%), linear-gradient(0deg, rgba(10,6,22,.85) 0%, transparent 26%); } .lore-sparkles{ position:absolute; inset:0; z-index:2; pointer-events:none; } .lore-sparkle{ position:absolute; width:10px; height:10px; opacity:0; background:radial-gradient(circle,#fff 0 12%, rgba(255,240,200,.85) 22%, transparent 60%); filter:drop-shadow(0 0 6px rgba(255,225,150,.9)); animation:lh-twinkle 3.6s ease-in-out infinite; } .lore-sparkle::before,.lore-sparkle::after{ content:""; position:absolute; inset:0; color:rgba(255,240,205,.95); background:linear-gradient(currentColor,currentColor) center/2px 100% no-repeat, linear-gradient(currentColor,currentColor) center/100% 2px no-repeat; } .lore-sparkle::after{ transform:rotate(45deg); opacity:.6; } @keyframes lh-twinkle{ 0%,100%{opacity:0; transform:scale(.4) rotate(0);} 50%{opacity:1; transform:scale(1) rotate(20deg);} } .lore-sparkle.s1{left:56%;top:30%;animation-delay:0s;} .lore-sparkle.s2{left:70%;top:52%;animation-delay:.7s;width:14px;height:14px;} .lore-sparkle.s3{left:82%;top:24%;animation-delay:1.3s;} .lore-sparkle.s4{left:63%;top:70%;animation-delay:2s;} .lore-sparkle.s5{left:88%;top:66%;animation-delay:1s;width:8px;height:8px;} .lore-sparkle.s6{left:52%;top:58%;animation-delay:2.6s;} .lore-sparkle.s7{left:76%;top:38%;animation-delay:1.8s;width:12px;height:12px;} .lore-hero-card{ position:relative; z-index:3; width:min(560px,46vw); margin-left:clamp(20px,6vw,110px); padding:34px 34px 30px; border:2px solid rgba(230,193,90,.55); border-radius:2px; background:linear-gradient(180deg, rgba(26,16,44,.72), rgba(14,8,26,.78)); box-shadow:0 24px 60px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.04), 6px 6px 0 rgba(0,0,0,.35); backdrop-filter:blur(3px) saturate(1.1); } .lore-hero-card .lh-kicker{ font-family:"Press Start 2P",monospace; font-size:10px; letter-spacing:1px; color:var(--lh-gold); margin-bottom:16px; text-shadow:1px 1px 0 rgba(0,0,0,.5); } .lore-hero-card h2{ font-family:"Press Start 2P",monospace; font-size:clamp(15px,2.1vw,22px); line-height:1.5; color:#fff; margin-bottom:20px; text-shadow:2px 2px 0 var(--lh-gold-deep), 4px 4px 0 rgba(0,0,0,.45); } .lore-hero-card p{ font-size:16px; line-height:1.72; margin-bottom:14px; color:rgba(244,238,251,.92); } .lore-hero-card p:last-child{ margin-bottom:0; } .lore-hero-card b{ color:#fff; } .lore-hero-card .lh-sig{ color:var(--lh-gold); font-style:italic; } .lore-scroll-hint{ position:absolute; z-index:3; left:50%; bottom:22px; transform:translateX(-50%); font-family:"Press Start 2P",monospace; font-size:8px; letter-spacing:1px; color:rgba(244,238,251,.7); text-align:center; animation:lh-bob 2s ease-in-out infinite; } .lore-scroll-hint span{ display:block; font-size:15px; margin-top:6px; } @keyframes lh-bob{ 0%,100%{transform:translate(-50%,0);} 50%{transform:translate(-50%,6px);} } .lore-chart{ position:relative; height:190vh; } .lore-chart-pin{ position:sticky; top:0; height:100svh; overflow:hidden; display:flex; align-items:center; justify-content:flex-end; background:var(--lh-space1); } .lore-chart-art{ position:absolute; inset:0; background-image:var(--lore-poster); background-repeat:no-repeat; background-size:cover; background-position:82% 50%; transform:scale(1.1); transform-origin:82% 50%; will-change:transform; } .lore-chart-veil{ position:absolute; inset:0; background:radial-gradient(60% 60% at 80% 50%, transparent 30%, rgba(8,4,18,.55) 78%), linear-gradient(90deg, rgba(8,4,18,.9) 0%, rgba(8,4,18,.35) 40%, transparent 62%); } .lore-chart-copy{ position:relative; z-index:2; width:min(520px,44vw); margin-left:clamp(20px,6vw,90px); margin-right:auto; } .lore-chart-copy .lh-kicker{ font-family:"Press Start 2P",monospace; font-size:10px; color:var(--lh-gold); letter-spacing:1px; margin-bottom:16px; } .lore-chart-copy h3{ font-family:"Press Start 2P",monospace; font-size:clamp(13px,1.7vw,18px); line-height:1.55; color:#fff; margin-bottom:18px; text-shadow:2px 2px 0 var(--lh-gold-deep); } .lore-chart-copy p{ font-size:16px; line-height:1.72; color:rgba(244,238,251,.92); } .lore-chart-copy .lh-cap{ margin-top:18px; font-size:12.5px; font-style:italic; color:rgba(244,238,251,.6); border-left:2px solid rgba(230,193,90,.5); padding-left:12px; } @media (max-width:820px){ .lore-hero-card{ width:min(92vw,560px); margin:0 auto; } .lore-hero{ align-items:flex-end; padding-bottom:64px; } .lore-chart-copy{ width:88vw; margin:0 auto; } .lore-chart-pin{ justify-content:center; } } @media (prefers-reduced-motion:reduce){ .lore-hero-art{ animation:none; transform:scale(1.04); } .lore-sparkle{ animation:none; opacity:.85; } .lore-scroll-hint{ animation:none; } } /* ========================================================================== THE LORE CHAPTER BREAK (9 Sep 2026) ========================================================================== Replaces the two-beat .lore-hero / .lore-chart scrollytelling above. That was 2900px and it worked while the lore was the END of this page; with the arc console below it, it stood between the reader and 30,757px of what they came for. One band now: the frontispiece, the kicker, one sentence, the caption. About 480px at desktop. The .lore-hero* and .lore-chart* rules above are left where they are rather than cut out of the middle of this file - house rule - so they now match nothing. They are the first thing to delete if this file is ever swept. Palette, poster path and the sparkles all come from .lore-hero-wrap and the .lore-sparkle rules above, so the band is the same object in a smaller box rather than a new look. */ .lore-band{ position:relative; overflow:hidden; min-height:clamp(360px,40vw,500px); display:flex; align-items:center; border-top:3px solid var(--lh-gold-deep); border-bottom:3px solid var(--lh-gold-deep); background: radial-gradient(900px 520px at 80% 46%, rgba(120,70,160,.35), transparent 60%), linear-gradient(160deg, var(--lh-space2) 0%, var(--lh-space1) 58%, #120a24 100%); } /* 82% 50% is the crop the pinned beat used to zoom TO: the celestial-spheres diagram at the centre of the guardians, not the figures around it. The whole point of keeping the image is that particular part of it. */ .lore-band-art{ position:absolute; inset:0; z-index:0; background-image:var(--lore-poster); background-repeat:no-repeat; background-size:cover; background-position:82% 50%; } .lore-band-veil{ position:absolute; inset:0; z-index:1; pointer-events:none; background: linear-gradient(90deg, rgba(10,6,22,.95) 0%, rgba(10,6,22,.88) 28%, rgba(10,6,22,.34) 54%, rgba(10,6,22,0) 70%), radial-gradient(120% 100% at 50% 50%, transparent 58%, rgba(8,4,18,.62) 100%); } .lore-band-copy{ position:relative; z-index:3; width:min(520px,46%); margin-left:clamp(20px,5vw,64px); padding:34px 0; } .lore-band-copy .lh-kicker{ font-family:"Press Start 2P",monospace; font-size:10px; letter-spacing:1px; color:var(--lh-gold); margin:0 0 16px; text-shadow:1px 1px 0 rgba(0,0,0,.5); } .lore-band-copy h2{ font-family:"Press Start 2P",monospace; font-size:clamp(14px,1.9vw,20px); line-height:1.5; color:#fff; margin:0 0 18px; text-shadow:2px 2px 0 var(--lh-gold-deep), 4px 4px 0 rgba(0,0,0,.45); } .lore-band-copy p{ font-size:16px; line-height:1.72; color:rgba(244,238,251,.92); margin:0; } .lore-band-copy .lh-cap{ margin-top:18px; font-size:12.5px; font-style:italic; color:rgba(244,238,251,.62); border-left:2px solid rgba(230,193,90,.5); padding-left:12px; } /* Phone: the art becomes a header strip and the copy sits under it, because a 46% column of 16px prose at 380px is four words a line. */ @media (max-width:820px){ .lore-band{ display:block; min-height:0; } /* 210, not 190: the poster is wide, so a phone-width box is cropped by its HEIGHT and the celestial-spheres diagram only clears the fold at 210. Tested four horizontal positions at this height and they are visually identical for the same reason - cover has no horizontal slack left. */ .lore-band-art{ position:relative; height:210px; } .lore-band-veil{ inset:0 0 auto 0; height:210px; background:linear-gradient(180deg, rgba(10,6,22,.15) 0%, rgba(10,6,22,.55) 58%, rgba(10,6,22,.92) 100%); } .lore-band-copy{ width:auto; margin:0; padding:22px 18px 26px; } .lore-sparkles{ height:210px; bottom:auto; } } /* ========================================================================== BEYOND THE SOLAR SYSTEM, LOCKED OUT OF SIGHT (9 Sep 2026) ========================================================================== The extended roster - guardian cats, asteroid senshi, starlights - is every seat under construction, so the drop-down opened onto nothing built. Hidden rather than cut: the seats stay in the served HTML, which is the whole reason this page renders them statically (see the note at the top of build_select.py about Google and the front door). Deleting this rule is the entire revert. */ body.wing.select .sel-extended{ display:none; } /* ========================================================================== THE SELECT PANEL COMES DOWN (9 Sep 2026) ========================================================================== Ashley: shrink the console so the content below it shows at the bottom of the screen. Measured, the height was never padding - .sel-panels is a fixed 690px and the framed plate inside is object-fit:contain, so the BOX was setting the art. 570 scales the art down with it; the whole figure stays and nothing crops. Console 894 -> 774, and the lore band's top moves from 923 to 803, so about 100px of it shows on a 900px screen. The contained bars go from 16px a side to 44 as the box squares up. That costs nothing: .sel-fill is the same artwork blurred and covering behind the sharp copy, which is what those bars have always been filled with - see the long note at .sel-panels above. */ body.wing.select .sel-panels{ height:570px; } /* ========================================================================== THE ASTROLOGY BAND, TIGHTENED (9 Sep 2026) ========================================================================== Two changes, and the first one is the reason the second is possible. THE CLAIM WAS ALREADY MADE. The console's own intro says "one guardian per planet, named for its god. That is why this site has a wing for it." The band was headed "A manga built on the planets" and said it again 500px later. The heading is now the thing only this section says - Ashley's line from the pinned beat that got cut - and the restatement is gone. NOTHING IS CROPPED. The old band used background-size:cover, which crops by definition; figures ran off both edges. This is a real holding the whole plate, sized by its column, so every face is in frame and so is the celestial-spheres diagram they are ringed around. Contain across the full width would have made it TALLER: the plate is 2134x1710, so at 989px it wants 792px of height. A 330px column brings it to 264 and the copy sits beside it. */ .senshi-art{} .lore-band{ display:flex; align-items:center; gap:26px; min-height:0; padding:22px 26px; border-top:3px solid var(--lh-gold-deep); border-bottom:3px solid var(--lh-gold-deep); background: radial-gradient(700px 380px at 76% 40%, rgba(120,70,160,.32), transparent 62%), linear-gradient(160deg, var(--lh-space2) 0%, var(--lh-space1) 58%, #120a24 100%); } .lore-plate{ margin:0; flex:0 0 330px; line-height:0; } .lore-plate img{ display:block; width:100%; height:auto; border:2px solid rgba(230,193,90,.55); box-shadow:0 6px 18px rgba(0,0,0,.45); } .lore-band-copy{ flex:1 1 auto; width:auto; margin:0; padding:0; } .lore-band-copy h2{ margin:0 0 14px; font-size:clamp(13px,1.6vw,17px); } .lore-band-copy .lh-kicker{ margin:0 0 12px; } .lore-band-copy p{ font-size:15px; line-height:1.68; } .lore-band-copy .lh-cap{ margin-top:14px; } @media (max-width:820px){ .lore-band{ display:block; padding:18px 16px 20px; } .lore-plate{ margin:0 0 16px; } .lore-band-copy p{ font-size:15px; } } /* ========================================================================== THE ASTROLOGY BLOCK, MERGED (9 Sep 2026) ========================================================================== Was two blocks - a 315px purple band and a 409px cream prose box. Now one: a bigger plate, the claim beside it, and the three paragraphs of background behind a CSS-only toggle, so they cost nothing until somebody asks. All of it to get "through the arcs" higher up the page. The plate grows by widening its column, which is the only lever there is: contained across the full width it would want 792px of height, so a wider column is how it gets bigger without getting taller than the copy beside it. Toggle is a hidden checkbox with the label as a sibling - same idiom as the chapters and .arc-powers, no script. */ .lore-band{ display:block; padding:24px 26px; } .lore-more-in{ position:absolute; opacity:0; width:0; height:0; pointer-events:none; } .lore-band-main{ display:flex; align-items:center; gap:30px; } .lore-plate{ margin:0; flex:0 0 var(--plate); line-height:0; } .lore-plate img{ display:block; width:100%; height:auto; border:2px solid rgba(230,193,90,.55); box-shadow:0 6px 18px rgba(0,0,0,.45); } .lore-band-copy{ flex:1 1 auto; width:auto; margin:0; padding:0; } .lore-band-copy h2{ margin:0 0 14px; font-size:clamp(13px,1.6vw,17px); } .lore-band-copy .lh-kicker{ margin:0 0 12px; } .lore-band-copy p{ font-size:15px; line-height:1.68; } .lore-band-copy .lh-cap{ margin-top:14px; } .lore-more{ display:inline-block; margin-top:16px; cursor:pointer; user-select:none; font-family:"Press Start 2P",monospace; font-size:9px; letter-spacing:.5px; color:var(--lh-gold); border:1.5px solid rgba(230,193,90,.55); border-radius:999px; padding:8px 14px; } .lore-more:hover{ background:rgba(230,193,90,.16); } .lore-more-mark{ margin-right:4px; } .lore-more-in:checked ~ .lore-band-main .lore-more .lore-more-mark{ transform:rotate(180deg); display:inline-block; } .lore-more-body{ display:none; } .lore-more-in:checked ~ .lore-more-body{ display:block; } @media (max-width:820px){ .lore-band{ padding:18px 16px 20px; } .lore-band-main{ display:block; } .lore-plate{ margin:0 0 16px; } } /* A - the background reads light on the purple, one unified box. */ .lore-band{ --plate:44%; } /* ========================================================================== THE SAILOR MOON DOSSIER (9 Sep 2026) ========================================================================== Every senshi page carries a stat block; the work they all come from had three paragraphs instead. This is the same component one level up, and it replaces those paragraphs rather than joining them. Two tiers, because Ashley picked the never-heard-of-it reader: what it is, then why it is on an astrology site. The toggle asks the stranger's own question rather than saying "the background", which only means something to someone who already knows. LITERAL COLOURS, NOT --paper/--ink. Those live on .senshi-art and this band sits outside it; using them here painted a panel transparent earlier today. Anything in this band takes explicit values. */ .lore-more-body{ margin-top:20px; padding-top:18px; border-top:1px solid rgba(230,193,90,.3); } .lore-stats-h{ margin:0 0 10px; font-family:"Press Start 2P",monospace; font-size:9px; letter-spacing:.5px; color:var(--lh-gold); } .lore-stats-h + .lore-stats{ margin-bottom:22px; } .lore-stats{ margin:0; columns:3; column-gap:30px; } .lore-stat{ break-inside:avoid; margin:0 0 12px; } .lore-stat dt{ font-family:rainyhearts, monospace; font-size:9px; letter-spacing:.4px; color:rgba(230,193,90,.85); margin-bottom:3px; } .lore-stat dd{ margin:0; font-size:14px; line-height:1.45; color:rgba(244,238,251,.94); } /* the bridge tier is the argument, so it gets the wider measure and a rule of its own rather than reading as more of the same list */ .lore-stats--bridge{ columns:2; column-gap:34px; } .lore-stats--bridge dd{ color:#fff; } @media (max-width:820px){ .lore-stats, .lore-stats--bridge{ columns:1; } .lore-stat dt{ font-size:11px; } .lore-stat dd{ font-size:15px; } } /* ========================================================================== THE DOSSIER TAKES THE COPY'S PLACE (9 Sep 2026) ========================================================================== Three notes from Ashley, in order: the box is huge; lay it over the manga image if needed; this image really needs to be highlighted, it is the astrology connection. The third rules out the second. The frontispiece is the only thing on this page that proves the claim rather than asserting it, so it does not get covered to save height. The COPY gets covered instead - by the time anyone opens the dossier they have read it. Opening swaps the kicker, headline, sentence and caption for the card, in the same column, with the plate untouched beside it. The band goes 385 to 420 rather than 385 to 760, because the card is ~376 against the plate's 331 and the taller column sets the row. Light, not reverse type: it is a card on its own ground now, so it takes the site's off-white and body ink, which is what the big-font rule wants. */ .lore-more-in:checked ~ .lore-band-main .lore-band-copy > *:not(.lore-more-body){ display:none; } .lore-band-copy{ position:relative; } .lore-more-body{ display:none; margin:0; background:#FFFFFB; border:2px solid rgba(230,193,90,.55); border-radius:9px; box-shadow:0 8px 22px rgba(8,4,18,.4); padding:15px 18px 13px; position:relative; } .lore-more-in:checked ~ .lore-band-main .lore-more-body{ display:block; } .lore-stats-h{ margin:0 0 7px; font-family:"Press Start 2P",monospace; font-size:8.5px; letter-spacing:.5px; color:#8b7137; } .lore-stats-h + .lore-stats{ margin-bottom:13px; } .lore-stats, .lore-stats--bridge{ columns:2; column-gap:22px; } .lore-stat{ break-inside:avoid; margin:0 0 7px; } .lore-stat dt{ font-family:rainyhearts, monospace; font-size:9px; letter-spacing:.4px; color:#8b7137; margin-bottom:1px; } .lore-stat dd{ margin:0; font-size:13px; line-height:1.38; color:#33323e; } .lore-stats--bridge dd{ color:#33323e; } .lore-close{ position:absolute; top:7px; right:9px; z-index:5; cursor:pointer; user-select:none; line-height:1; font-size:18px; color:#8b7137; padding:1px 7px 3px; border:1.5px solid rgba(139,113,55,.35); border-radius:999px; background:#fff; } .lore-close:hover{ background:#f6ebbe; } @media (max-width:820px){ .lore-stats, .lore-stats--bridge{ columns:1; } .lore-stat dd{ font-size:15px; } } /* ========================================================================== THE FRONTISPIECE AS THE SECTION (9 Sep 2026) ========================================================================== Ashley: larger, more visually important, text may cover it. THE PICTURE DECIDED WHERE THE TEXT GOES. Gridded at quarters: the Cosmos figure holds the left half with her face in the upper part; the celestial- spheres diagram sits about 60-85% across and 30-75% down with the ten guardians ringed around it; and the bottom strip is NOT free - Saturn is bottom centre, Venus and Mars bottom right, so a full-width caption band would cover three faces. The bottom-LEFT quarter is soft painted background with nothing in it to lose. That is the only place copy can sit, so that is where it sits. The plate now runs the full width of the band, and the diagram carries a marker: "more visually important" is not only bigger, it is pointed at. A reader is told which part of the picture is the astrology connection instead of being left to find it. The dossier opens over the LEFT half - the figure, never the chart. */ .lore-band--poster{ padding:0; border-radius:0; } .lore-poster{ position:relative; margin:0; line-height:0; } .lore-poster-img{ display:block; width:100%; height:auto; } /* the marker on the diagram. Percentages, so it holds at every width. */ .lore-mark{ position:absolute; left:60.1%; top:29.4%; width:28.1%; height:45.8%; border:2px solid rgba(230,193,90,.9); border-radius:50%; box-shadow:0 0 0 3px rgba(10,6,22,.35), 0 0 22px rgba(230,193,90,.35); pointer-events:none; } .lore-mark-tag{ position:absolute; left:60.1%; top:calc(25.7% - 26px); font-family:rainyhearts, monospace; font-size:11px; letter-spacing:.5px; color:#0a0616; background:rgba(230,193,90,.94); padding:3px 9px; border-radius:999px; line-height:1.2; pointer-events:none; } /* the copy, in the empty bottom-left quarter, on its own scrim */ .lore-poster-copy{ position:absolute; left:2.5%; top:45.8%; bottom:3%; width:49%; padding:20px 22px; line-height:1.58; overflow:auto; border:1px solid rgba(230,193,90,.34); border-radius:10px; background:rgba(11,7,24,.60); -webkit-backdrop-filter:blur(7px) saturate(.92); backdrop-filter:blur(7px) saturate(.92); box-shadow:0 10px 30px rgba(6,3,14,.34); text-shadow:0 1px 3px rgba(6,3,14,.75); } .lore-poster-copy .lh-kicker{ margin:0 0 10px; } .lore-poster-copy h2{ margin:0 0 12px; font-size:clamp(13px,1.6vw,18px); } .lore-poster-copy .lore-claim{ font-size:14.5px; line-height:1.62; margin:0; color:rgba(244,238,251,.94); } .lore-poster-copy .lh-cap{ margin-top:12px; font-size:12px; } .lore-poster-copy .lore-more{ margin-top:14px; } /* the dossier, over the figure only */ /* Opens where the closed copy already was, growing upward, so the panel a reader clicked is the panel that expands and the Cosmos figure's face is never under a card. */ .lore-band--poster .lore-more-body{ position:absolute; left:2.5%; top:41.4%; bottom:3%; width:49%; overflow:auto; display:none; z-index:6; } .lore-more-in:checked ~ .lore-poster .lore-more-body{ display:block; } .lore-more-in:checked ~ .lore-poster .lore-poster-copy{ display:none; } .lore-band--poster .lore-stats, .lore-band--poster .lore-stats--bridge{ columns:1; } @media (max-width:1010px){ /* Below this the picture is too short to hold the card in its lower half, so the copy goes back under the picture and the marker stays on it. */ .lore-poster-copy{ position:static; width:auto; background:linear-gradient(180deg, rgba(10,6,22,.9), rgba(10,6,22,.98)); padding:16px; } .lore-band--poster .lore-more-body{ position:static; width:auto; max-height:none; margin:0 16px 16px; } .lore-mark-tag{ font-size:10px; } } /* ========================================================================== 36. THE SEAM, THE GLASS, THE DRIFT, THE FADE (9 Sep 2026) ========================================================================== THE SEAM. The frontispiece is a two-page spread and the gutter is not in the middle of the file: sampling column brightness and then dropping guides on the plate at 40/45/50/55/60% puts it at about 55.5% across. So the seam has been sitting right of centre this whole time, which is what read as "not quite positioned correctly". Cropping c off the left moves it to (0.555 - c) / (1 - c); that equals 0.5 at c = 0.11. Eleven per cent off the left is page edge and soft background, no face and no chart. It is done with a frame at the CROPPED aspect ratio - 2134 x 0.89 = 1899 over 1710 - plus object-fit:cover and object-position:100%, so the browser does the crop and the original file is never cut. Every percentage in the marker rules above was remapped through the same transform, new = (old - 0.11) / 0.89, or the gold ring would have drifted off the chart it is pointing at. THE GLASS. The copy was a near-solid scrim in the bottom corner. It is now a translucent card raised to just under Usagi's chin. Readability is not left to luck: rgba(11,7,24,.60) over the brightest paint on this plate composites to about L*=95, and white on that is roughly 6.5:1, comfortably past the 4.5:1 the small text needs; over the dark lower half it is nearer 19:1. The blur is a second belt - it kills the high-frequency detail that makes type swim - and the text-shadow is the third. Any one of them alone would do; all three mean the box can be genuinely see-through. THE DRIFT. A very slow scale on the plate and a star layer creeping across it. Small enough that it reads as the picture breathing rather than as an animation, and both are switched off entirely under prefers-reduced-motion. THE FADE. The band used to end on a 3px gold rule, which is why the join to "through the arcs" landed like a door closing. The bottom of the plate now dissolves into #fefeff, the exact ground the arc console sits on, so the picture hands over to the section instead of stopping at it. */ .lore-poster{ overflow:hidden; } .lore-poster-frame{ position:relative; width:100%; aspect-ratio:1899 / 1380; overflow:hidden; } .lore-poster-img{ display:block; position:absolute; width:112.36%; height:123.916%; left:-12.36%; top:-9.665%; transform-origin:55.5% 48.2%; animation:lore-breathe 34s ease-in-out infinite alternate; will-change:transform; } @keyframes lore-breathe{ from{ transform:scale(1); } to{ transform:scale(1.04); } } /* the star layer, drifting across the paint */ .lore-drift{ position:absolute; inset:-8% -8% -8% -8%; pointer-events:none; z-index:2; opacity:.42; background-image: radial-gradient(1.6px 1.6px at 12% 22%,#fff 50%,transparent 51%), radial-gradient(1.3px 1.3px at 26% 74%,#fff 50%,transparent 51%), radial-gradient(1.5px 1.5px at 62% 14%,#fff 50%,transparent 51%), radial-gradient(1.2px 1.2px at 88% 62%,#fff 50%,transparent 51%), radial-gradient(1.7px 1.7px at 45% 88%,#fff 50%,transparent 51%), radial-gradient(1.3px 1.3px at 8% 54%,#fff 50%,transparent 51%), radial-gradient(1.4px 1.4px at 72% 44%,#fff 50%,transparent 51%), radial-gradient(1.2px 1.2px at 36% 36%,#fff 50%,transparent 51%); animation:lore-drift 42s linear infinite alternate; } @keyframes lore-drift{ from{ transform:translate3d(0,0,0); opacity:.30; } 50% { opacity:.52; } to { transform:translate3d(2.2%,-1.6%,0); opacity:.30; } } /* the hand-over to the arc console */ .lore-fade{ position:absolute; left:0; right:0; bottom:-1px; height:12%; z-index:3; pointer-events:none; background:linear-gradient(180deg, rgba(254,254,255,0) 0%, rgba(254,254,255,.10) 30%, rgba(254,254,255,.44) 58%, rgba(254,254,255,.86) 82%, #fefeff 96%, #fefeff 100%); } .lore-band--poster{ border-bottom:0; } .lore-poster-copy .lore-desc{ margin:11px 0 0; font-size:13.5px; line-height:1.6; color:rgba(238,231,248,.88); } .lore-poster-copy .lore-desc b{ color:#f0d98c; font-weight:600; } .lore-poster-copy .lore-desc i{ font-style:italic; color:rgba(244,238,251,.95); } .lore-poster-copy .lh-cap{ margin-top:11px; font-size:11.5px; } .lore-poster-copy .lore-more{ margin-top:12px; } @media (prefers-reduced-motion:reduce){ .lore-poster-img{ animation:none; transform:none; } .lore-drift{ animation:none; opacity:.34; } } @media (max-width:1010px){ .lore-poster-copy{ position:static; width:auto; inset:auto; border-radius:0; border:0; border-top:1px solid rgba(230,193,90,.34); padding:16px; background:rgba(11,7,24,.9); } .lore-band--poster .lore-more-body{ position:static; width:auto; inset:auto; margin:0 16px 16px; } .lore-fade{ display:none; } } /* ---- the card, tightened. Same words, about 30px less box, so the fit at 1024 stops being exact and starts being comfortable. ---- */ .lore-poster-copy{ padding:16px 20px; line-height:1.52; } .lore-poster-copy h2{ margin:0 0 9px; } .lore-poster-copy .lore-claim{ font-size:14px; line-height:1.55; } .lore-poster-copy .lore-desc{ margin-top:9px; font-size:13px; line-height:1.54; } .lore-poster-copy .lh-kicker{ margin:0 0 8px; } .lore-poster-copy .lh-cap{ margin-top:9px; } .lore-poster-copy .lore-more{ margin-top:10px; } /* ---- 39. the picture sits up against the console (9 Sep 2026) ---- */ body.wing.select .lore-hero-wrap{ margin-top:6px; } /* ---- 40. the label comes off the painting (9 Sep 2026) ---- The ring alone points at the chart, and the copy card already names it. The rules stay in the file rather than being cut out mid-stylesheet, per the house rule that nothing is edited above the end of the file. */ .lore-mark-tag{ display:none; } /* ---- 41. the copy card hugs its content (9 Sep 2026) ---- */ .lore-band--poster .lore-poster-copy{ top:auto; bottom:3%; max-height:51%; } .lore-band--poster .lore-more-body{ top:auto; bottom:3%; max-height:56%; } @media (max-width:1010px){ .lore-band--poster .lore-poster-copy, .lore-band--poster .lore-more-body{ max-height:none; } } /* ========================================================================== 42. THE CARD BECOMES PAPER (9 Sep 2026) ========================================================================== Ashley: the text is hard to read. Three separate causes, all real: 1. Glass over a painting. The contrast NUMBER was fine - white on rgba(11,7,24,.60) computes to about 6.5:1 over the brightest paint - but a number assumes a flat backdrop. Behind this card is Takeuchi's brushwork, and the blur softens it without stopping its edges reading as strokes running through the letterforms. 2. The text-shadow meant to rescue that was thickening every stem. 3. .lore-fade is z-index 3 and the card had no z-index, so the white bottom fade painted OVER the last lines of the card. That is why the bottom of the box looked washed out, and no amount of colour tuning would have fixed it. So it stops being glass: warm paper at 96%, ink at #33323e, no shadow, and z-index 4 so nothing paints over it again. That is 11.9:1, and it holds whatever is underneath it. It still reads as laid ON the picture - the 4% and the gold edge keep it from looking like a hole cut in the plate. And it is top-anchored now. Bottom-anchoring meant the top edge climbed towards her face every time the text grew; a fixed 58% keeps it a set distance under her chin, which sits at about 45%. */ .lore-band--poster .lore-poster-copy{ top:58%; bottom:auto; max-height:40.5%; z-index:4; background:rgba(255,253,247,.96); border:1px solid var(--lh-gold-deep); box-shadow:0 8px 26px rgba(6,3,14,.30); text-shadow:none; color:#33323e; -webkit-backdrop-filter:none; backdrop-filter:none; } .lore-poster-copy .lh-kicker{ color:#8b7137; } .lore-poster-copy h2{ color:#5A3268; font-size:17px; margin:0 0 8px; } .lore-poster-copy .lore-claim{ color:#33323e; font-size:14.5px; line-height:1.6; } .lore-poster-copy .lore-desc{ color:#4a4657; font-size:13.5px; line-height:1.58; } .lore-poster-copy .lore-desc b{ color:#7a5f2c; } .lore-poster-copy .lore-desc i{ color:#4a4657; } .lore-poster-copy .lh-kicker{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 0 7px; } .lore-poster-copy .lh-src{ font-size:11.5px; color:#6b6577; white-space:nowrap; } .lore-band--poster .lore-poster-copy{ padding:14px 20px 15px; } .lore-poster-copy h2{ margin-bottom:6px; } .lore-poster-copy .lore-more{ color:#5A3268; border-color:rgba(90,50,104,.45); background:rgba(90,50,104,.06); } .lore-poster-copy .lore-more-mark{ color:#8b7137; } @media (max-width:1010px){ .lore-band--poster .lore-poster-copy{ top:auto; max-height:none; border:0; border-top:1px solid var(--lh-gold-deep); background:#fffdf7; } } /* ========================================================================== 44. THE PHONE (9 Sep 2026) ========================================================================== Three faults that existed only below the breakpoint, which is exactly why they survived every desktop check. THE RING. .lore-mark, .lore-drift and .lore-fade were siblings of the frame, so their percentages resolved against
. At desktop the figure and the frame are the same box and it looked correct. On a phone the copy card goes static and lands inside the figure, the figure doubles in height, and the marker stretched into a gold ellipse running down over the paragraphs. They are children of the frame now - which also puts them inside its overflow:hidden, so the ring is clipped to the picture at every width. THE PLATE. A phone breakpoint sets img{max-width:100%}, and max-width is not a specificity fight - it clamps whatever width is declared. The 112.36% that performs the left crop was being capped to 100%, so on a phone the plate lost its crop, sat 364x292 inside a 364x302 frame, and left a strip of the band's dark ground showing beneath it. Declared max-width:none. THE KICKER. One flex line for the kicker and the plate credit reads well at 989px and folds badly at 364. It stacks below the breakpoint. */ .lore-band--poster .lore-poster-img{ max-width:none; } .lore-band--poster .lore-poster-frame{ background:#e9e4f2; } @media (max-width:1010px){ .lore-poster-copy .lh-kicker{ display:block; } .lore-poster-copy .lh-src{ display:block; margin-top:3px; white-space:normal; } } /* ========================================================================== 45. THE DOSSIER OPENS ON THE RIGHT (9 Sep 2026) ========================================================================== Ashley: pop it out to the right of the image, semi-transparent, over the guardians and the circle - and put back what was cut for space. DARK, NOT PAPER, AND ON PURPOSE. She was right that the old glass was hard to read, but the lesson there was contrast against BUSY rather than contrast in the abstract. The right half of this plate is mostly light paint: pale washes, white floral borders, the cream zodiac ring. A light panel over that has almost nothing to separate itself from. A dark one at 82% puts cream on a composite around L*=50 even where the paint is brightest - 10.9:1, better than the paper card on the left manages - and the ring and the guardians still read straight through it. So: smoked glass, light type, blur to stop the paint's own edges running through the letterforms. BOTH PANELS AT ONCE. The old rule hid the copy card whenever the dossier opened, which made sense when they shared the left half and would have been silly now they are side by side. The claim you clicked from stays on screen while you read the long version. It is top-anchored with a height cap rather than pinned top AND bottom: the panel is 120px shorter than the picture, and pinning both edges would have left that as dead space under the last paragraph - the same fault the copy card had. The cap only comes into play if the text ever outgrows the plate. The 93% cap replaces section 41's 56% one, which would hug its content in the bottom corner, and without the reset the new top/bottom would be silently clipped to just over half the picture. It stays a child of
rather than moving into the frame, unlike the marker: the frame's overflow:hidden would clip it, which is right while it is absolute but would erase it on a phone, where it goes static and stacks below the picture. At the widths where it IS absolute the figure and the frame are the same box, so it is clipped to the picture in practice. */ .lore-band--poster .lore-more-body{ left:50.5%; right:2.5%; width:auto; top:3.5%; bottom:auto; max-height:93%; overflow:auto; z-index:5; padding:16px 18px; border:1px solid rgba(230,193,90,.42); border-radius:10px; background:rgba(10,6,22,.82); -webkit-backdrop-filter:blur(6px) saturate(.9); backdrop-filter:blur(6px) saturate(.9); box-shadow:0 12px 34px rgba(4,2,10,.44); color:#f4eefb; } /* the copy card no longer disappears when the dossier opens */ .lore-more-in:checked ~ .lore-poster .lore-poster-copy{ display:block; } /* The stat labels were tuned for a small light card: 8.5px Press Start 2P for the group headings and 9px for each dt. On a dark panel this size they are decoration rather than text, and the second heading had no top margin at all so it crashed straight into the paragraph above it. Both go up, the heading gets air, and the row gap comes down to pay for it. */ .lore-band--poster .lore-more-body .lore-stats-h{ color:#e6c15a; font-size:11px; margin:18px 0 7px; line-height:1.5; } .lore-band--poster .lore-more-body .lore-stats-h:first-of-type{ margin-top:0; } .lore-band--poster .lore-more-body dt{ color:rgba(230,193,90,.86); font-size:11px; } .lore-band--poster .lore-more-body .lore-stat{ margin-bottom:5px; } .lore-band--poster .lore-more-body dd{ color:#f4eefb; } .lore-band--poster .lore-more-p{ margin:10px 0 0; font-size:13px; line-height:1.62; color:rgba(240,234,250,.92); } .lore-band--poster .lore-close{ position:sticky; top:0; float:right; z-index:2; color:#f4eefb; background:rgba(10,6,22,.9); border:1px solid rgba(230,193,90,.4); border-radius:50%; width:26px; height:26px; line-height:24px; text-align:center; } @media (max-width:1010px){ .lore-band--poster .lore-more-body{ left:auto; right:auto; top:auto; bottom:auto; width:auto; border-radius:0; border:0; border-top:1px solid rgba(230,193,90,.42); margin:0; padding:16px; } .lore-band--poster .lore-close{ position:static; } } /* ========================================================================== 46. CUT AT SATURN'S SKIRT (9 Sep 2026) ========================================================================== Ashley: crop the bottom up to the top of Saturn's skirt bow. Read off a 1% ruling of the bottom right quadrant: her chest bow is at 0.835-0.865 and the waist, where the bodice meets the purple skirt, is at 0.885. So b = 0.115, the visible band becomes y in [0.078, 0.885], and the frame goes to 1899 / 1380. The plate is 989x719 instead of 989x821. WHAT IT COSTS, stated because it is not free. Every vertical percentage remaps through (y - 0.078) / 0.807, Usagi's chin included: it moves from 45% of the frame to 51%. The copy card is 319px and the plate is now 719, so the card cannot start lower than 53% and still clear the bottom edge - 14px below her chin, where there were 107. That gap is the thing Ashley asked for two rounds ago, and it and this crop are not both available while the card holds this much text. The fade drops 28% -> 12% for the same arithmetic: 28% of 719px reaches up to y=0.66 of the painting and would wash out Saturn's and Mars's faces. At 12% it begins just under Saturn's chin. */ .lore-band--poster .lore-poster-copy{ top:53%; max-height:45.5%; } /* ========================================================================== 47. THE GAP UNDER HER CHIN, PROPERLY (9 Sep 2026) ========================================================================== Ashley, again: the card is too close to Usagi's chin. Section 46 explained why and then left it there, which was not good enough. The arithmetic: her chin is at 51% of a 719px plate, the card was 319px (44%), so 53% was the lowest it could start and still clear the bottom - 28px of air. The two obvious levers are both closed. Widening past 50% crosses the book seam and collides with the dossier; shrinking the type re-opens the readability complaint from two rounds ago. The third lever was content, and it turned out to be free. The dossier now opens with manga by / serialised / grew from / length / sold / anime - the same six facts the description paragraph was carrying in prose - and then gives the long version underneath. So the paragraph was saying the same thing twice on one screen. Out it comes, the card drops to about 205px, and it starts at 64%: roughly 93px under her chin instead of 28. */ .lore-band--poster .lore-poster-copy{ top:64%; max-height:33%; } /* ========================================================================== 48. THE TWO DEAD ZONES IN THE CONSOLE (9 Sep 2026) ========================================================================== Ashley circled two areas. Different faults, different fixes. THE BAND UNDER THE ROSTER. The frosted window fits the taller of its two columns. .sel-stage is 489px of actual content; .sel-panels was pinned to 570px earlier in this session. So 89px of frosted panel hung below the last row of cards with nothing in it. THE STRIP ABOVE THE ART. Letterbox, not padding. .sel-back is object-fit:contain and the artwork is 1000x888, which in a 360px-wide panel is 320px tall - so a 570px panel has 250px of slack, and object-position:center 42% puts 105 of it above the picture. What shows there is .sel-fill, the same artwork blurred, which is why it reads as a smear rather than as a margin. Shrinking the panel does not fix the strip on its own: .sel-blank-frame is pinned at top:154px, so the reticle absorbs the shrink and the letterbox survives. Both had to move. So the artwork goes to the TOP of the panel and every pixel of slack falls to the bottom, where .sel-blank-plate is already lying over it - the plate runs from 66% to the foot, so the slack ends up under type instead of showing as blur. Then the columns are squared up: the roster's group margins go 10px -> 4px and the preview panel is set to the roster's height. 471px is inside a window with two hard edges and both were checked: floor the plate gets 0.34H and needs 128px - three lines plus 50px of padding - which puts the floor at 377. ceiling the plate's gradient must START over the artwork or there is a bare strip between picture and type. The art ends at 320 and the plate starts at 0.66H, so H <= 485. Console 774 -> ~675, and the whole page below it comes up by the same amount. */ body.wing.select .sel-group{ margin-bottom:4px; } /* AND A BUG THIS TURNED UP. The phone block at max-width:900px sets .sel-panels{height:280px} - the panel is a sticky band above the roster there, not a column beside it. The height I appended earlier in this session was written as body.wing.select .sel-panels, which is both more specific and later, so it has been overriding that 280 on every phone: a 570px sticky band eating most of the viewport. It was never meant to apply below the breakpoint. Everything that is about the two-column console is inside min-width:901px now, and the phone gets its own rules back. */ @media (min-width:901px){ body.wing.select .sel-panels{ height:471px; } /* the artwork sits at the top; the slack goes under the type plate */ body.wing.select .sel-panel--blank .sel-back{ object-position:center top; } /* the reticle follows the artwork rather than the panel. Fixed pixels are right here and only here: the console is a fixed-width stage, so the panel is 360 wide at every desktop size, and below 900px the reticle is already switched off. */ body.wing.select .sel-blank-frame{ top:9px; bottom:161px; } } /* Scoping the new rules is not enough on its own - the 570px I appended earlier is still in the file above, still more specific than the phone block, and still wins below 901px. So the phone's designed height is stated here explicitly to take it back. 280 is the number the mobile block was written around: a sticky banner-shaped band with a cover crop, not a half-viewport column. */ @media (max-width:900px){ body.wing.select .sel-panels{ height:280px; } } /* ========================================================================== 49. THE SEAM STRIP (9 Sep 2026) ========================================================================== Ashley: at the fold you get the console, then a strip of painting, and nothing says a section starts there or that anything follows. The diagnosis was not "needs a scroll arrow". This band's title lives inside the copy card at 64% of the plate - about 460px below the fold on a 1080p screen - so what a reader meets is an unnamed decorative strip, which reads as trim on the console. An arrow answers "is there more"; it does not answer "more of what", and that is the question that was stopping her. Type, not a container. The page already has the console, the band, the credit plate and the arc console, and a fifth box would be the wrong answer to "it looks like nothing is here". So one 36px line on the seam: the name on the left, three counts in the middle - five arcs, 135 beats, 67 galleries, all counted out of the file - and a link on the right that tells the reader there is a SECOND section after this one. The chevron hops on the same three-frame steps() rhythm as "choose your senshi" in the console above it, because that is the only motion register this page uses. Reduced-motion gets a static arrow. */ body.wing.select .lore-seam{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin:0 0 6px; padding:8px 14px 9px; border-left:4px solid var(--lh-gold-deep); background:linear-gradient(90deg,#f4f0fa 0%,#fdfcff 78%); font-size:13px; line-height:1.5; } body.wing.select .lore-seam-k{ font-family:rainyhearts, monospace; font-size:14px; letter-spacing:.04em; color:#8b7137; } body.wing.select .lore-seam-n{ color:#6b6577; font-size:12.5px; letter-spacing:.02em; } body.wing.select .lore-seam-go{ margin-left:auto; color:#5A3268; text-decoration:none; font-weight:600; border-bottom:2px solid var(--lh-gold-deep); white-space:nowrap; } body.wing.select .lore-seam-go:hover{ background:rgba(90,50,104,.07); } body.wing.select .lore-seam-v{ display:inline-block; margin-left:4px; color:#8b7137; animation:seam-bob 1.5s steps(1,end) infinite; } @keyframes seam-bob{ 0%, 62% { transform:translateY(0); } 70% { transform:translateY(2px); } 78% { transform:translateY(4px); } 86%,100% { transform:translateY(0); } } @media (prefers-reduced-motion:reduce){ body.wing.select .lore-seam-v{ animation:none; } } @media (max-width:700px){ body.wing.select .lore-seam{ gap:4px 12px; } body.wing.select .lore-seam-go{ margin-left:0; } } /* the card keeps the plate credit and gives up the name, which the seam now carries; left-aligned, since it is no longer sharing the row */ body.wing.select .lore-poster-copy .lh-kicker{ display:block; } body.wing.select .lore-poster-copy .lh-src{ white-space:normal; } /* ========================================================================== 51. THE ARC RAIL (10 Sep 2026) ========================================================================== Ashley, twice: the band is not doing enough to make anyone scroll. She was right, and section 49 was the wrong SIZE of answer rather than the wrong idea. A line of type saying "five arcs" is an assertion; five colour lockups in a row is evidence. Nobody looks at that and concludes the page ends at the console. It is not new content either - these are the same five logos the season cards use, lifted to where they do the most work. And the full-size files are deliberate: small copies would be about 12KB each against 55, but then the same logo is fetched twice, once at 34px here and again at 82px in the card. One set means the cards are already cached before anyone opens an arc. WHAT NOW CLEARS THE FOLD. On a 1080p window the console ends around 810 and the fold is near 960 - 150px. The strip is 39 and this is about 78, so both fit with the top of the plate still showing underneath: the band's name, five season logos, and a sliver of the painting. THE FOUR LOCKED ARCS ARE SPANS, NOT LINKS. Their radios are disabled, so a link would carry someone to a console that then refuses to open the thing they clicked. Greyscale and "not yet" say the true thing, and it is the same promise the arc index and the season cards already make. */ body.wing.select .arc-rail{ margin:0 0 6px; } body.wing.select .arc-rail ul{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:10px; margin:0; padding:0; list-style:none; } body.wing.select .arc-rail-i{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:7px 6px 8px; border-radius:8px; text-decoration:none; background:linear-gradient(180deg,#f6f2fc 0%,#fdfcff 100%); border:1px solid #e7e2f0; } body.wing.select .arc-rail-i img{ display:block; height:34px; width:auto; max-width:100%; object-fit:contain; } body.wing.select .arc-rail-n{ font-family:rainyhearts, monospace; font-size:13px; letter-spacing:.03em; color:#5A3268; line-height:1.2; } body.wing.select .arc-rail-s{ font-size:10.5px; color:#8b7137; letter-spacing:.02em; } a.arc-rail-i:hover{ border-color:var(--lh-gold-deep); background:linear-gradient(180deg,#f3ecff 0%,#fffdf7 100%); } a.arc-rail-i:hover .arc-rail-n{ color:#3f2350; } body.wing.select .arc-rail-i.is-soon{ cursor:default; } body.wing.select .arc-rail-i.is-soon img{ filter:grayscale(1); opacity:.42; } body.wing.select .arc-rail-i.is-soon .arc-rail-n{ color:#8d8898; } body.wing.select .arc-rail-i.is-soon .arc-rail-s{ color:#a5a0b0; } @media (max-width:820px){ body.wing.select .arc-rail ul{ grid-template-columns:repeat(3, minmax(0,1fr)); } body.wing.select .arc-rail-i img{ height:28px; } body.wing.select .arc-rail-s{ display:none; } } @media (max-width:460px){ body.wing.select .arc-rail ul{ grid-template-columns:repeat(2, minmax(0,1fr)); } } /* ========================================================================== 56. THE CARD STOPS CROSSING THE SEAM (10 Sep 2026) ========================================================================== Ashley: the right edge of the copy box hangs too far over the edge of the image. She is right, and the number says why. The card is left:2.5% width:49%, so its right edge is at 51.5% of the plate - and the book seam is at 50%, because the entire left crop in section 46 exists to put it there. The box has been sitting 1.5% onto the right-hand page since it was built. It is not overhanging the picture; it is overhanging the PAGE inside the picture, which is why it looked wrong in a way that was hard to name. 44% puts the right edge at 46.5% with 3.5% of left page still showing before the gutter. The card gains a line doing it - 203px to 227 - and the cap is 33% of 719, which is 237. Measured, because a narrower box is a taller box, and this card has overflowed twice already. */ @media (min-width:1011px){ /* Scoped, and it has to be. Without the query this rule sits later in the file than the phone block that sets width:auto, and source order settles a specificity tie - so a phone got a 44%-wide column of text stacked under the picture. Above the breakpoint the card is positioned over the plate, which is the only place a percentage of the plate means anything. */ .lore-band--poster .lore-poster-copy{ width:44%; } } /* ========================================================================== 58. THE NAOKO STICKER (10 Sep 2026) ========================================================================== Asked for a long way back: Naoko in a tilted heart frame, sitting in the corner of the box like a sticker. It waited because I would not take a photograph of a living person off the web for this site; Ashley supplied the interview scan herself, so it can be built. IT IS A SIBLING OF THE COPY CARD, NOT A CHILD. The card is overflow:auto, so anything inside it that reaches past the edge is clipped or turns into a scrollbar - and hanging over the corner is the entire point of a sticker. It sits in the figure alongside the card, positioned against the plate at 39.5% / 55.5%, which is where the card's top-right corner is. THE HEART IS A REFERENCED SVG clipPath in objectBoundingBox units, not clip-path:path(). Both work in current browsers; this one scales with the element and has years more support behind it. The white rim is the wrapper's padding showing through the same clip. The shadow is a drop-shadow FILTER, because box-shadow would draw the rectangle that was clipped away rather than the heart. BELOW THE BREAKPOINT it stops being absolute, because the card stops being absolute - a percentage of the plate means nothing once the copy is stacked underneath it. It becomes a right-aligned block with a negative bottom margin so it still overlaps the top of the card. */ .sm-heart-def{ position:absolute; width:0; height:0; overflow:hidden; } .lore-band--poster .lore-naoko{ margin:0; z-index:6; width:104px; transform:rotate(-8deg); filter:drop-shadow(0 5px 10px rgba(20,10,40,.42)); } .lore-band--poster .lore-naoko-frame{ display:block; padding:5px; background:#fffdf7; -webkit-clip-path:url(#sm-heart); clip-path:url(#sm-heart); } .lore-band--poster .lore-naoko-frame img{ display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; -webkit-clip-path:url(#sm-heart); clip-path:url(#sm-heart); } /* NO CAPTION. I added one and it was wrong twice: pulled up, it ran through the heart's point as an illegible sliver; pushed down, it landed on the copy card's headline. Any vertical position collides with something, because the sticker is deliberately sitting on a corner where two things already meet. The name is in the alt text, the card beside it is credited, and the dossier behind the button names her in its first row - so the picture can just be a picture. */ @media (min-width:1011px){ /* 37.4%, not 39.5%. The rotation makes the bounding box 118px rather than 104, which pushed the right edge to 50.7% - across the book seam, the exact thing the copy card was just pulled back from. It now stops at 49.4%. */ .lore-band--poster .lore-naoko{ position:absolute; left:37.4%; top:55.5%; } } @media (max-width:1010px){ .lore-band--poster .lore-naoko{ width:84px; margin:10px 16px -26px auto; position:relative; } } /* ========================================================================== 62. THE HEART STAMP, LARGER (10 Sep 2026) ========================================================================== Ashley: bigger. The limit is the book gutter, not taste. The stamp straddles the copy card's top-right corner at 46.5% of the plate and the gutter is at 50%; anything centred on that corner grows straight across it. So it grows and moves left together - 104 -> 132px, left 37.4% -> 34.6% - which lands the right edge at 49.3%. That makes it sit more on the card than across its corner, about three quarters over rather than half. At this size that is the better reading anyway: a large shape hanging half in space looks unmoored, a large one pressed onto the card looks stuck there on purpose. Rotation is why the sums are not 132/989: at -8 degrees the bounding box is 132*cos8 + 132*sin8, about 149px. */ /* display:block, and this is a real bug, not tidiness. The sticker became an when it turned into a link to #naoko, and an anchor is inline by default - width does not apply to inline boxes. On desktop position:absolute blockifies it so nobody noticed; on a phone it is position:relative, stayed inline, ignored its width and let the img inside run to 100% of the column. Measured at 390: 364px wide instead of 104. */ .lore-band--poster .lore-naoko{ display:block; width:132px; } @media (min-width:1011px){ .lore-band--poster .lore-naoko{ left:34.6%; top:53.6%; } } @media (max-width:1010px){ .lore-band--poster .lore-naoko{ width:104px; margin:10px 16px -30px auto; } } /* ========================================================================== 66. THE HEART BEATS ON HOVER (10 Sep 2026) ========================================================================== Ashley: a little animation on hover. It is a heart, so it beats - twice, fast, then settles. THE KEYFRAMES CARRY THE ROTATION. The resting state is rotate(-8deg), and an animation that only scaled would replace that transform and snap the heart upright the moment the hover started. Every frame states its own rotation and the last returns to -8deg exactly, so it lands where it began. It straightens as it lifts, -8 to -5, because a sticker being pressed tilts less; holding the full tilt through a scale reads as a zoom instead of a press. GUARDED TWICE: (hover:hover) so a phone never starts a motion it cannot end, and reduced-motion keeps the shadow and drops the movement. Focus gets the same lift - a link you can only identify by hovering is not much of a link. */ .lore-band--poster a.lore-naoko{ cursor:pointer; transition:filter .25s ease; } @keyframes naoko-beat{ 0% { transform:rotate(-8deg) scale(1); } 16% { transform:rotate(-5deg) scale(1.09); } 30% { transform:rotate(-6deg) scale(1.01); } 46% { transform:rotate(-5deg) scale(1.07); } 68%, 100%{ transform:rotate(-8deg) scale(1); } } @media (hover:hover){ .lore-band--poster a.lore-naoko:hover{ filter:drop-shadow(0 8px 16px rgba(20,10,40,.52)); animation:naoko-beat 900ms ease-in-out both; } .lore-band--poster a.lore-naoko:hover .lore-naoko-frame{ background:#fffefb; } } .lore-band--poster a.lore-naoko:focus-visible{ outline:none; filter:drop-shadow(0 8px 16px rgba(20,10,40,.52)); animation:naoko-beat 900ms ease-in-out both; } @media (prefers-reduced-motion:reduce){ .lore-band--poster a.lore-naoko:hover, .lore-band--poster a.lore-naoko:focus-visible{ animation:none; } } /* ========================================================================== 67. THE ASTROLOGY CONNECTION (10 Sep 2026) ========================================================================== Ashley: rename it, and no bullets - one paragraph that makes the connection obvious. The five rows it replaces were a chain, not a list: planet, then the god the planet is named for, then the character written from that god, then the chart she drew at the centre of the plate. A definition list presents four links as four separate facts, which is the one shape that hides the argument. Prose runs the chain and finishes on why any of it belongs on a site about charts - which none of the rows ever said out loud. The canon note stays separate because it is not a connection. It is the rule for which text wins when the manga and the anime disagree, and burying that in a paragraph about mythology would lose the one line a reader might hold this wing to. */ /* The prose runs 673px where the cap allowed 666, so the panel had picked up a seven-pixel scrollbar - the sort of thing that reads as broken rather than as long. The cap goes 93% to 95%, which the panel has room for: it starts at 3.5% from the top, so 95 still lands inside the plate at 98.5%. */ .lore-band--poster .lore-more-body{ max-height:95%; } .lore-band--poster .lore-canon{ margin:11px 0 0; padding-top:9px; border-top:1px dashed rgba(230,193,90,.34); font-size:12px; line-height:1.55; color:rgba(230,193,90,.9); } /* ========================================================================== 69. THE HEART STAMP, LARGER AGAIN (10 Sep 2026) ========================================================================== Ashley: larger. Second growth. 132 -> 160px, and as before it has to move left as it grows, because the book seam down the middle of the plate is the hard limit and a shape centred near it grows straight across it. THE ARITHMETIC. Rotation makes the box bigger than the width: at -8 degrees a 160px square occupies 160*cos8 + 160*sin8 = 181px in both axes. The frame is 1014px wide, so that is 17.8%. Holding the right edge at 49.3% - the line the 132px version stopped on, just short of the 50% gutter - puts the left edge at 31.5%. AND IT MOVES UP, WHICH IS THE PART THAT IS EASY TO MISS. The sticker straddles the copy card's top edge at 64%, and at 132px it hung 51.5% above that line. Growing a top-anchored box only adds height downward, so the same top would have dropped it onto the card and eaten the overhang. Top goes 53.6% -> 51.4% to keep the straddle where it was. PHONE: 104 -> 124px, and the negative bottom margin deepens -30 -> -36px so the overlap stays proportional rather than shrinking to a touch. */ .lore-band--poster .lore-naoko{ width:160px; } @media (min-width:1011px){ .lore-band--poster .lore-naoko{ left:31.5%; top:51.4%; } } @media (max-width:1010px){ .lore-band--poster .lore-naoko{ width:124px; margin:10px 16px -36px auto; } } /* ---- Naoko's sticker, third growth ---- 160 -> 184px. Same arithmetic as the last two: at -8 degrees a 184px square occupies 184*cos8 + 184*sin8 = 208px, the plate is 989 wide and the book seam runs down the middle of it, so the shape has to move left as it grows or it walks across the gutter. Left 31.5% -> 29.5%, and top 51.4% -> 50.6% so it keeps straddling the copy card's top edge instead of sliding onto it. */ .lore-band--poster .lore-naoko{ width:184px; } @media (min-width:1011px){ .lore-band--poster .lore-naoko{ left:29.5%; top:50.6%; } } @media (max-width:1010px){ .lore-band--poster .lore-naoko{ width:140px; margin:10px 16px -40px auto; } } /* ========================================================================== 92. THE HEART STAMP, FOURTH GROWTH (10 Sep 2026) ========================================================================== Ashley: larger still. 184 -> 210px. Same sum as the last three: the book gutter runs down the middle of the plate at 50% and the shape must not cross it, and rotation makes it wider than its width - at -8 degrees a 210px square occupies 210*cos8 + 210*sin8 = 237px, or 24.0% of the 989px frame. Holding the right edge at 49.3%, where the last three sizes all stopped, puts left at 26.7% once the 13.5px the rotation adds each side is counted. Vertically 237px is 33.0% of 719, so top goes to 48.7% to keep about half the shape above the copy card's top edge. AND THIS IS NEARLY THE END OF THE ROAD, worth saying before the next request rather than after it. The gutter is the binding constraint, so every further growth has to move left by more than it gains in width - the shape walks further onto the copy card each time. At 210 it covers most of the card's top-right corner rather than straddling it. One more step this size would put its left edge past the card's midpoint, where it stops being a sticker on a corner and becomes a portrait with a card behind it. That may be the right object; it is not the same one. */ .lore-band--poster .lore-naoko{ width:210px; } @media (min-width:1011px){ .lore-band--poster .lore-naoko{ left:26.7%; top:48.7%; } } @media (max-width:1010px){ .lore-band--poster .lore-naoko{ width:160px; margin:10px 16px -46px auto; } } /* ---- the heart lifts clear of the headline (10 Sep 2026) ---- At 210px its point had come down over "She drew the sky they were named for". The headline occupies 70.4% to 74.0% of the plate; the heart's bottom was at 79.8%. Top moves 48.7% -> 38.7%, which finishes it at 69.8% - just above the headline, still crossing the card's top edge at 64%, and still clear of the credit line, which ends at 19.6% across where the heart starts at 25.3%. */ @media (min-width:1011px){ .lore-band--poster .lore-naoko{ top:38.7%; } } /* ---- the heart settles (10 Sep 2026) ---- Ashley: good size, sitting slightly too high. Measured on the plate: the copy card starts at 64.00%, the headline's box at 70.44% and its ink at 70.72%, and the heart's bottom was at 69.81% - about seven pixels of clear air. It comes down 1.3% to finish at 71.1%, which puts the point into the headline's leading rather than onto its letters (a text range's top is the em box; the cap height of that line sits lower again). THERE IS NO MORE ROOM BELOW THIS. Any further and the point lands on the word "She". Past here the only moves are shifting the card, shrinking the heart, or letting it cover type - which is where this started. */ @media (min-width:1011px){ .lore-band--poster .lore-naoko{ top:40.0%; } } /* ---- the heart sits on the corner (10 Sep 2026) ---- In band coordinates the copy card's top-right corner is (458, 463). The heart was 250..487 by 277..514 - its right edge two pixels shy of that corner and only its tip below the card's top edge, which is why it read as hovering next to the box instead of resting on it. It now straddles the corner at 430..667 by 316..553. IT CANNOT GO FURTHER LEFT. The headline's INK - not its box, which runs the full column - ends at x=418. 430 leaves twelve pixels of daylight. Anything less and the heart is back over "named for", which is what it was moved off two rounds ago. The kicker ends at 270 and the claim's longest line at 426, so those are clear by a wider margin. */ @media (min-width:1011px){ .lore-band--poster .lore-naoko{ left:44.9%; top:45.4%; } } /* ---- the heart sits on the corner, in pink, with a sparkle (10 Sep 2026) ---- POSITION PICKED BY EYE. Three candidates were rendered against the real card and compared. At 40.5%/44.6% the card's top-right corner falls inside the heart's lower-left lobe, which is what "sitting on the corner" looks like; further right and it floats beside the box instead. The headline's ink ends well clear of it either way. PINK IS THE FRAME. The sticker is a photograph clipped to a heart inside a slightly larger solid heart - so the heart you actually see is that border. It takes a candy gradient, lighter at the top-left, so the shape catches a highlight the way a vinyl sticker does. THE SPARKLE IS ONE INLINE SVG of eight four-point stars in a layer 26% wider than the heart, so they burst OUTSIDE its edge. No file to load, no script, and it fires on focus as well as hover so a keyboard gets it too. */ @media (min-width:1011px){ .lore-band--poster .lore-naoko{ width:130px; left:43.4%; top:56.4%; } } .lore-band--poster .lore-naoko-frame{ position:relative; z-index:1; background:linear-gradient(148deg,#ffe6f1 0%,#ffc2dc 46%,#ff9dc4 100%); } .lore-band--poster a.lore-naoko:hover .lore-naoko-frame, .lore-band--poster a.lore-naoko:focus-visible .lore-naoko-frame{ background:linear-gradient(148deg,#fff2f7 0%,#ffd3e6 46%,#ffabce 100%); } .lore-band--poster a.lore-naoko{ position:absolute; } .lore-band--poster a.lore-naoko::after{ content:""; position:absolute; inset:-14%; z-index:0; pointer-events:none; background-image:url("data:image/svg+xml,"); background-repeat:no-repeat; background-position:center; background-size:100% 100%; opacity:0; transform:scale(.66) rotate(-8deg); transition:opacity .18s ease, transform .18s ease; } .lore-band--poster a.lore-naoko:hover::after, .lore-band--poster a.lore-naoko:focus-visible::after{ animation:naoko-sparkle 900ms ease-out 1 both; } /* IT SPARKLES AND GOES, per Ashley - the burst is an event, not a state. The keyframes end back at zero, so hovering fires it once and the glints fade out rather than sitting there for as long as the pointer stays. */ @keyframes naoko-sparkle{ 0% { opacity:0; transform:scale(.55) rotate(-10deg); } 22% { opacity:1; transform:scale(1.10) rotate(2deg); } 55% { opacity:.85; transform:scale(1.00) rotate(0deg); } 100%{ opacity:0; transform:scale(1.14) rotate(4deg); } } @media (prefers-reduced-motion:reduce){ .lore-band--poster a.lore-naoko::after{ transition:none; } .lore-band--poster a.lore-naoko:hover::after, .lore-band--poster a.lore-naoko:focus-visible::after{ animation:none; } } /* ---- the chart: degrees, a gold Sun, and the notes inside the box (10 Sep 2026) ---- THE SUN was the only body without a pixel glyph - the favicons library has nine, Moon through Pluto, and no Sun - so it was the Unicode character inheriting the chart's ink, a dark purple sitting in a row of pink sprites. Gold, deepened only as far as each size needs: #b6891f in the wheel where 46px is large text, #906c19 in the placements where 20px is not. */ .nk-signbox .nk-g--sun{ color:#906c19; } /* ---- the notes now live inside the chart box ---- */ .nk-chart--wheel .nk-notes-col{ margin:16px 0 0; padding:14px 0 0; border-top:1px dashed rgba(90,50,104,.28); } .nk-chart--wheel .nk-notes-col .nk-col-h--chart{ margin-top:0; } /* ---- and the rising row says what it does not know ---- */ .nk-signbox .nk-chip--none .nk-sign, .nk-signbox .nk-chip--none .nk-deg{ font-style:italic; opacity:.82; } /* ========================================================================== 93. THE HEART MOVES LEFT (10 Sep 2026) ========================================================================== Ashley: "move the naoko sticker left. almost perfect." Four positions rendered against the real plate and compared: 43.4 (where it was), 42.4, 41.6 and 40.8. At 43.4 the heart's right lobe lands on Mercury's cheek. At 40.8 it has climbed so far onto the copy card that it stops reading as sitting ON the corner and starts reading as stuck TO the card. 41.6% is the one: the right edge stops at her hair instead of her face, and the card's top-right corner still tucks under the lower-left lobe. That is 18px left of where it was, in a window about 35px wide - the headline's ink ends at band x=418 on one side and her face begins at about 495 on the other, and the heart is 147px across. */ @media (min-width:1011px){ .lore-band--poster .lore-naoko{ left:41.6%; } } /* ========================================================================== 94. THE CARD LEADS WITH THE QUESTION (10 Sep 2026) ========================================================================== Ashley: start the box with a bigger header of "what is sailor moon?", then follow with the "she drew the sky they were named for" bit. So the reading order inverts. The question was a 9px pill at the foot of the card - the last thing you found, after two paragraphs explaining a claim you had not asked about yet. It is now the first line, in Press Start 2P at 14px, and it is still the toggle: the

wraps the

. It is hidden below the breakpoint rather than moved. The sticker's whole idea - a heart sitting on the corner of the copy card - is a fact about the desktop composition, where the card is laid ON the picture. Below 1011px the card goes static and stacks underneath, there is no corner to sit on, and nothing is lost by its absence: it links to #naoko, which has its own heading a screen further down. */ @media (max-width:1010px){ .lore-band--poster .lore-more-body{ top:auto; left:auto; right:auto; bottom:auto; max-height:none; } .lore-band--poster a.lore-naoko{ display:none; } } /* ========================================================================== 107. THE HEART, FURTHER LEFT AGAIN, AND A BUTTON THAT LOOKS LIKE ONE ========================================================================== THE HEART. Fourth pass, and the earlier three were all solving the wrong thing. 43.4 -> 41.6 -> 39.2 were each asking "how far from Mercury's face is it", and every one of them left the heart floating in the gap BESIDE the card's corner rather than on it. Ashley: "much closer to the text. It's a corner sticker for the box." 32.6% is where the card's rounded top-right corner lands inside the heart's lower-left lobe - the corner is under the sticker, not next to it, which is what a sticker stuck on a box looks like. The heart is 147px and the card's right edge is at band x=460, so its span is 314-461: it sits almost entirely over the card, with only its right tip past the edge. It clears everything that matters. The heart's box starts at y=397 and the card at y=446, so the only card content underneath it is the top 98px, and the button ends at x=280 while the subhead's ink stops short of the lobe. THE BUTTON. Ashley: "'what is sailor moon' doesn't look like a clickable element to me. make it more." She is right, and the reason is that section 94 took the affordance away without replacing it. As a 9px pill at the foot of the card it had a border, a background and a radius - it looked like a control and read like a footnote. Promoting it to the headline fixed the reading order and left it as bare text with an underline, which on a page this decorated is just a heading with a line under it. So it gets the chrome back at the new size, in the idiom this site already uses for anything raised: a 2px border with a hard offset shadow, no blur - the same 3px 3px 0 the profile-shot frames use. Hover lifts it a pixel and deepens the shadow; :active presses it fully into the shadow, which is the one interaction cue nothing else on the page does. That is a button. 7.8:1 for the ink against the darkest band of the button's own gradient. */ @media (min-width:1011px){ .lore-band--poster .lore-naoko{ left:32.6%; } } .lore-poster-copy .lore-poster-q{ margin:0 0 11px; } .lore-poster-copy .lore-poster-q .lore-more{ padding:9px 15px 9px 11px; background:linear-gradient(180deg,#fffaea 0%,#f6e2ad 100%); border:2px solid #8b7137; border-radius:9px; box-shadow:3px 3px 0 rgba(122,95,44,.55); transition:transform .12s ease, box-shadow .12s ease, background-color .18s ease; } .lore-poster-copy .lore-poster-q .lore-more:hover{ background:linear-gradient(180deg,#fffdf6 0%,#fbeec6 100%); transform:translate(-1px,-1px); box-shadow:4px 4px 0 rgba(122,95,44,.62); } .lore-poster-copy .lore-poster-q .lore-more:active{ transform:translate(3px,3px); box-shadow:0 0 0 rgba(122,95,44,0); } .lore-poster-copy .lore-poster-q .lore-more:focus-visible{ outline:3px solid rgba(90,50,104,.55); outline-offset:3px; } /* the underline was carrying the whole affordance; the chrome carries it now */ .lore-poster-copy .lore-poster-q .lore-more-t{ border-bottom:0; padding-bottom:0; } .lore-poster-copy .lore-poster-q .lore-more-mark{ background:#5A3268; border-color:#3f2350; color:#f6e2ad; } .lore-poster-copy .lore-poster-q .lore-more:hover .lore-more-mark{ background:#6d3d7f; } @media (prefers-reduced-motion:reduce){ .lore-poster-copy .lore-poster-q .lore-more{ transition:none; } .lore-poster-copy .lore-poster-q .lore-more:hover, .lore-poster-copy .lore-poster-q .lore-more:active{ transform:none; } } /* ========================================================================== 108. THE CROP COMES OFF THE BOTTOM (10 Sep 2026) ========================================================================== Section 46 cut the plate at Saturn's skirt bow and section 47 spent the whole budget it freed on getting the copy card away from Usagi's chin. Ashley wants the picture back, with the bottom dissolving into the section under it instead of stopping at an edge. THE ARITHMETIC, because every vertical percentage on this band is a fraction of the frame and the frame is about to get 102px taller. The source is 2134x1710, so 1.2480. The image is drawn at 112.36% of the frame's width with a -12.36% left offset, which crops 11% off the LEFT and runs to the right edge - that stays. At a 989px frame the image is 1111.2 x 890.4. The old window was y 0.078 to 0.885 of it: 0.807, giving 718.7px and the 1899/1380 ratio. Dropping the bottom cut makes the window 0.078 to 1.0 - 0.922 - which is 820.8px, so the frame becomes 1899/1576 and the image is 108.48% of it, offset -8.461%. NOTHING ABOVE THE OLD BOTTOM EDGE MOVES. The visible top is unchanged, so the same painted pixel keeps the same pixel offset; only its percentage changes, by a factor of 718.7/820.8 = 0.8756. Usagi's chin goes from 51% to 44.65% and stays exactly where it was on screen. Every fixed element is restated through that factor rather than re-eyeballed: copy card top 62% -> 54.3% max-height 35% -> 30.6% the heart top 56.4% -> 49.4% the dossier top 2.5% -> 2.2% max-height 96% -> 88% THE FADE was 12% of 718.7, which is 86px - built to sit under a hard crop, not to dissolve one. It is 22% now, 181px of the taller frame, which starts just under Saturn's skirt and reaches solid #fefeff before the frame ends. That is the same colour as .senshi-art, the section "the whole story" sits in, so the picture does not end anywhere in particular: it just becomes the page. */ .lore-band--poster .lore-poster-frame{ aspect-ratio:1899 / 1576; } .lore-band--poster .lore-poster-img{ width:112.36%; height:108.48%; left:-12.36%; top:-8.461%; } .lore-band--poster .lore-fade{ height:22%; background:linear-gradient(180deg, rgba(254,254,255,0) 0%, rgba(254,254,255,.06) 22%, rgba(254,254,255,.22) 44%, rgba(254,254,255,.52) 64%, rgba(254,254,255,.82) 80%, #fefeff 93%, #fefeff 100%); } .lore-band--poster .lore-poster-copy{ top:54.3%; max-height:31.6%; } /* 30.6% is the exact remap of the old 35%, and it left the card scrolling by 1-2px: section 107's button chrome - 2px border, 9px padding, the hard shadow - is about 3px taller than the bare text it replaced. The taller plate has 117px of room under the card, so this costs nothing. */ .lore-band--poster .lore-more-body{ top:2.2%; max-height:88%; } @media (min-width:1011px){ .lore-band--poster .lore-naoko{ top:49.4%; left:37.7%; } } /* THE HEART, FIFTH AND LAST. Ashley called 32.6% too far left and asked for "about 50px right". The band is 989px, so 50px is 5.06% - 32.6 -> 37.7, taken as read rather than re-litigated by eye. Its lower-left lobe still covers the card's top-right corner; it simply sits less far over the card. This restates section 107's left, and must stay after it. */ /* and the phone, restated after all of it - the same trap as section 97 */ @media (max-width:1010px){ .lore-band--poster .lore-poster-copy{ top:auto; max-height:none; } .lore-band--poster .lore-more-body{ top:auto; left:auto; right:auto; bottom:auto; max-height:none; } } /* ========================================================================== 110. THE CARD DROPS INTO THE TALLER PLATE (10 Sep 2026) ========================================================================== Ashley: lower the text box a little more now the image is taller. Section 108 restated every vertical position through 718.7/820.8 so that nothing MOVED when the crop came off. That was the right call for the un-crop itself - it proved the arithmetic and kept the composition intact - but it also means the card is still sitting where it sat on a plate that was 102px shorter. On the full picture it reads high. 61%, picked by rendering 54.3 / 58 / 61 / 64 against the plate and looking. At 64 the card's bottom is 43px off the frame edge and its lower corners start dissolving into the fade, which is a white card going white. At 61 it clears by 68px, and Usagi's chest bow and brooch - buried behind the card at 54.3 - are fully visible above it, which is most of what the extra height was for. THE HEART MOVES WITH IT. It is a sticker on the card's top-right corner, so its top is not an independent number: it is the card's top less 4.9 points, the offset set when it was placed. 61 - 4.9 = 56.1. The height cap is unchanged. 61 + 31.6 = 92.6%, which is 760px of an 820.8 frame, so the card still cannot reach the bottom edge even if the text grows. */ .lore-band--poster .lore-poster-copy{ top:61%; } @media (min-width:1011px){ .lore-band--poster .lore-naoko{ top:56.1%; } } @media (max-width:1010px){ .lore-band--poster .lore-poster-copy{ top:auto; } } /* ========================================================================== 111. THE DOSSIER TAKES THE ROOM, AND THE TYPE GOES UP (10 Sep 2026) ========================================================================== Ashley: it has room to be taller now, and some of the text is too small to read. Both are the same fault as the card, and the same cause: section 108 restated every vertical percentage so that nothing moved when the crop came off, which was right for proving the arithmetic and wrong to leave. The panel ended at 705 of an 821px frame with 116px of plate doing nothing under it, and its type was sized for a panel that had no room to spare. THE SIZES, worst first. The stat labels were 11px rainyhearts - and rainyhearts is the small pixel face, so 11px there is nearer 7px of actual ink. That is the "hard to read in some spots". 13px. The values under them go 13 to 15, the two long paragraphs 13 to 14.5 with a touch more leading, the gold group headings 11 to 12, and the canon note 12 to 13. THE ROOM. 2.2%/88% becomes 1.6%/95%: the panel now runs 13 to 793 of the 821, which leaves 28px at the foot - the same margin the copy card keeps. That is 97px more than it had. IT DOES NOT GET WIDER, and it is worth saying why, because widening is the cheaper way to buy height. The panel's left edge is at band x=480 and the copy card's right edge is at 460. They overlap vertically from 501 down, so there are 20px between them and no more. The height had to come from the bottom. THE STATS GO TWO ACROSS, and this is what actually paid for the larger type. Bigger text needed about 100px and the taller box only found 97, so something had to give. Six facts stacked as label-over-value is 216px of a 485px-wide panel using half its width; the same six in two columns of three are 135px. Each stat is already wrapped in its own .lore-stat, so a two-column grid can never split a label from its value the way CSS columns would. It reads better as a grid too - it is a specification block, and it now matches the placements list in the chart beside it. Measured after: no scroll at any desktop width. */ .lore-band--poster .lore-more-body{ top:1.6%; max-height:97%; /* the last four pixels: the foot padding, which the canon note's own top rule already stands in for */ padding:15px 18px 11px; } .lore-band--poster .lore-more-body .lore-stats-h{ font-size:12px; } /* dt HAD line-height:0, inherited from the dl. A zero line-height contributes nothing to layout, so the glyphs simply overflowed downward - at 11px that read as tight, and at 14px "manga by" sits on top of "Naoko Takeuchi". The label needs a real line box, and 1.0 is the smallest that separates them, which costs 42px across the three grid rows. That 42px is paid for, not borrowed: the two long paragraphs come from 1.66 leading to 1.58 (still 22.9px on 14.5px text), the group headings give up 4px of margin each, and the panel takes another 13px of the plate. */ .lore-band--poster .lore-more-body dt{ font-size:14px; line-height:1; } .lore-band--poster .lore-more-body .lore-stats-h{ margin:10px 0 5px; } .lore-band--poster .lore-more-body .lore-stats-h:first-of-type{ margin-top:0; } .lore-band--poster .lore-more-p{ margin-top:7px; } .lore-band--poster .lore-more-body dd{ font-size:15px; line-height:1.42; } .lore-band--poster .lore-more-p{ font-size:14.5px; line-height:1.58; } .lore-band--poster .lore-more-body .lore-canon{ font-size:13px; line-height:1.6; } .lore-band--poster .lore-more-body .lore-stats{ display:grid; grid-template-columns:1fr 1fr; column-gap:20px; row-gap:0; columns:auto; } .lore-band--poster .lore-more-body .lore-stat{ margin-bottom:0; } @container (max-width:340px){ .lore-band--poster .lore-more-body .lore-stats{ grid-template-columns:1fr; } } /* the phone, restated after - same trap as sections 97 and 108 */ @media (max-width:1010px){ .lore-band--poster .lore-more-body{ top:auto; max-height:none; } } /* ========================================================================== 112. THE "WATCH IT HERE" STICKER (13 Sep 2026) ========================================================================== Sits in the head of #arcs beside the Sailor Soapbox credit, because that corner of the page is already about where the material comes from. Floated, so the lede wraps around it rather than being pushed down - a sticker that costs a whole row is a banner, and a banner is the thing that was not wanted. The little television is spans and pseudo-elements: a generic set with rabbit-ear antennae, drawn rather than fetched. No request, crisp at any zoom, and nothing from the show is depicted - the sticker is type and shape. The tilt is on the link and it straightens on hover. Stickers go on crooked, and straightening says "this is a control" more cheaply than a colour change would. */ .arcframe .watch-sticker{ float:right; display:flex; align-items:center; gap:11px; margin:0 0 12px 20px; padding:11px 15px 11px 12px; text-decoration:none; background:#fffdf6; border:3px solid #2b2340; border-radius:4px; box-shadow:5px 5px 0 #f2a2c0; transform:rotate(-2.4deg); transition:transform .18s ease, box-shadow .18s ease; max-width:270px; } .arcframe .watch-sticker:hover, .arcframe .watch-sticker:focus-visible{ transform:rotate(0deg) translateY(-2px); box-shadow:7px 7px 0 #f2a2c0; } .arcframe .ws-tv{ position:relative; flex:0 0 auto; width:40px; height:33px; border:3px solid #2b2340; border-radius:5px; background:#8fd6c8; display:flex; align-items:center; justify-content:center; } .arcframe .ws-screen{ width:22px; height:16px; border:2px solid #2b2340; border-radius:2px; background:#fffdf6; } .arcframe .ws-tv::before, .arcframe .ws-tv::after{ content:""; position:absolute; top:-13px; width:3px; height:13px; background:#2b2340; border-radius:2px; } .arcframe .ws-tv::before{ left:7px; transform:rotate(-26deg); transform-origin:bottom; } .arcframe .ws-tv::after { right:7px; transform:rotate( 26deg); transform-origin:bottom; } .arcframe .ws-copy{ display:block; min-width:0; } .arcframe .ws-line{ display:block; font-family:"rainyhearts", monospace; font-size:14px; line-height:1.25; color:#2b2340; } .arcframe .ws-sub{ display:block; margin-top:2px; font-family:"rainyhearts", monospace; font-size:10.5px; line-height:1.3; color:#2b2340; opacity:.72; } @media (max-width: 700px){ .arcframe .watch-sticker{ float:none; max-width:none; margin:0 0 14px; transform:rotate(-1.2deg); } } @media (prefers-reduced-motion: reduce){ .arcframe .watch-sticker{ transition:none; } } /* ========================================================================== 113. TWO PLACES TO WATCH, SIDE BY SIDE (18 Sep 2026) ========================================================================== Ashley: "link to this playlist on youtube from viz media. all 200 eps. in japanese... give the view the choice between the two sites to watch", and an hour later: "put the youtube link fist." Section 112 built one floated sticker. A second float beside it is not a pair, and the first build showed why: floats stack right to left, so the sticker that came first in the source came out on the RIGHT and the row read backwards. The two boxes also measured 71px and 86px, because one sub-line wraps to two lines and the other does not. So the PAIR floats, once, as a flex row, and the stickers inside it stop floating. Source order is reading order again, and align-items:stretch makes them the same height whatever their words do. TOLD APART BY THE STICKER, NOT BY A LOGO. The second keeps section 112's drawn television and its type, and takes a mint drop shadow and the opposite tilt - the first leans left, the second leans right, the way two stickers actually land on a notebook. Neither carries a Tubi, YouTube or Viz mark; 112 drew its own television rather than fetching one for exactly that reason, and this follows it. AND THE SECOND ONE IS FOUND BY POSITION, NOT BY A NAME. The first build hung the tilt and the mint on a .watch-sticker--jp class. Then the YouTube link went first, at which point a class called "jp" meant "the Tubi one", which is how a stylesheet starts lying about itself. :nth-child(2) is what the rule actually means - the pair looks like a pair whichever service sits in which slot, and swapping them again costs nothing. ========================================================================== */ .arcframe .watch-pair{ float:right; display:flex; align-items:stretch; gap:14px; margin:0 0 12px 20px; } .arcframe .watch-pair .watch-sticker{ float:none; margin:0; flex:1 1 0; max-width:270px; } /* stretch reaches the ; the copy inside has to be told to fill it too, or the shorter sticker keeps its words pinned to the top of a taller box */ .arcframe .watch-pair .ws-copy{ display:flex; flex-direction:column; justify-content:center; } .arcframe .watch-pair .watch-sticker:nth-child(2){ transform:rotate(2.1deg); box-shadow:5px 5px 0 #8fd6c8; } .arcframe .watch-pair .watch-sticker:nth-child(2):hover, .arcframe .watch-pair .watch-sticker:nth-child(2):focus-visible{ transform:rotate(0deg) translateY(-2px); box-shadow:7px 7px 0 #8fd6c8; } .arcframe .watch-pair .watch-sticker:nth-child(2) .ws-tv{ background:#f2a2c0; } /* THE CONSOLE CLEARS THE PAIR, and this is a bug the swap exposed rather than caused. With section 112's single sticker the float was 71px tall and the lede and the Sailor Soapbox credit beside it always ran taller, so the arc console cleared it by accident and nobody noticed it was never told to. The pair is 84px, and shortening one sub-line by four words was enough to let the credit wrap one line shorter - which pulled the console up 24px, to 3px ABOVE the float's bottom edge. It was then squeezed into the 426px channel beside the stickers and ran 6,125px tall instead of 3,143. Measured, both ways. Stated now, so it cannot depend on the length of a sentence again. */ .arcframe .arc-console{ clear:right; } @media (max-width: 700px){ /* 112's phone rule unfloats the sticker. The wrapper is what floats now, so it needs the same treatment - and the two stack rather than splitting a 320px screen between them. */ .arcframe .watch-pair{ float:none; display:block; margin:0 0 14px; } .arcframe .watch-pair .watch-sticker{ max-width:none; } .arcframe .watch-pair .watch-sticker + .watch-sticker{ margin-top:12px; } } @media (prefers-reduced-motion: reduce){ .arcframe .watch-pair .watch-sticker{ transition:none; } } /* ========================================================================== 117. THE TITLE GOES INTO THE MIDDLE BOX (2 Oct 2026) ========================================================================== Replaces section 116 (c122, never deployed). Ash: "the top above the luminaries that says choose your senshi.... let move that text and the logo to the black box below the group shot in the middle. that will give you back that tall room and move the rest of the page up", "can we include their japanese script names below their written english name", "the planet gifs and the senshi glyphs. wanna make them a little bigger inside the boxes?", and "when hovering over the outer senshi, we get two colors showing in the box. please fix so its like the other ones with a single color." THE TITLE BAR IS GONE. The logo (1x, 130 x 50) and CHOOSE YOUR SAILOR SENSHI sit in the dark strip under the cast picture in the middle box, with "hover a senshi to preview, click to enter" under them. They show while nobody is picked, like the cast. The select screen is 56px shorter than c122's, and the page under it comes up by that. THE TITLE CARD lands there now: the intro script measures the logo where it sits, so the flying copy steps down into the middle box. Afterwards the menu opens on the cast picture (nobody picked) instead of on Sailor Moon, so the logo it has just landed on stays in view. THE CARDS. Under her own name, her name in Japanese (a