A full-screen character select: giant extended capitals, a row of full-body hero renders standing on a flat colour, and a character file that opens with the whole page changing to that hero's colour, with a ring cursor.
## Goal Design a character select page for Nova Legion, a superhero film franchise with six heroes. Keep the tone bold, confident and cinematic. Use the style, layout, image and motion rules below exactly. Replace the sample content with content that fits the goal, keeping the same structure, the same number of heroes, and similar text lengths. ## Style Keep this exactly: it is what makes the design look the way it does. The page is one full screen that never scrolls on desktop. It is a bold, flat colour field with giant extended white capitals, a row of full-body 3D character renders standing straight on the colour, and a character file that opens when you pick one, **with the whole page changing colour to that character's colour**. - Font, from Google Fonts: **Archivo** (variable, `wdth` 62..125, weight 100..900) for everything. All headings use `font-stretch: 125%`, weight 900, uppercase. Small labels are weight 800 uppercase with letter-spacing 0.1em. Body text is normal weight, normal case. - Base colour (the roster screen): blue #1C3FB8. Accent: red #E0242E (used only for thin 1px rules). Text is white. Muted white is rgb(255 255 255 / 0.52) for stat labels and 0.95 for stat values. - Each hero has its own page colour, used as the background of the whole page in the file view: Aegis #1C3FB8, Ember #8A2318, Tempest #2F4254, Verdant #17644B, Orbit #B5561C, Phantom #4A2A8C. The page background transitions between colours over 900ms. - Everything is flat: no cards, no borders around the heroes, no gradients except one soft white glow behind the standing figure (see Layout). The characters are transparent cut-outs (see Images) with a soft drop shadow: `drop-shadow(0 20px 20px rgb(0 0 0 / 0.3))` in the roster, `drop-shadow(0 30px 40px rgb(0 0 0 / 0.3))` for the big figure. - Buttons that are circles: 42px (roster arrows) or 38px (file arrows), 1.5px white border at 85%, white arrow icon; on hover they fill white with the page colour as the arrow colour and scale to 1.06. - Every focusable element shows a 2px white outline with 4px offset. - The page is fluid and fills the full width and height of the screen: side padding clamp(22px, 4.4vw, 84px), no max-width. - A small custom ring cursor on mouse devices (see Motion). ## Layout The page has a fixed 68px top bar and two views stacked on top of each other: the **roster** (default) and the **file** (one hero). Only one is visible at a time. The body never scrolls on desktop. **Top bar** (absolute, 68px tall, side padding as above, above everything): left a 40px round icon button with three short white lines (a menu icon: 16px, 10px, 16px wide, 2px tall); in the middle the brand (Nova Legion) as a small white star-in-hexagon mark (20px, the same mark as the corner one: a hexagon at 20% white with a solid white star in it, not an outline) plus the name in 13px weight 900, extended, uppercase, letter-spacing 0.1em, white, no underline; on the right a 40px round "account" icon button (a small person outline, 17px). Icon buttons get a white 14% fill on hover. In the file view the menu icon becomes an **X** (the top and bottom lines rotate ±45° into a cross, over 500ms), and it closes the file. **1. Roster view** - The heading "Choose / Character" on two lines, at the left padding, top = bar height + 5.5vh, `font-size: clamp(42px, 6.6vw, 124px)`, line-height 0.92, letter-spacing -0.015em, white. - Under it a 1px red rule from the left padding to the right padding, placed 22px below the heading. - The **roster strip**: starts at 40vh from the top and is 50vh tall, full screen width, scrolls horizontally with no scrollbar (`scroll-snap-type: x proximity`). Inside, a row of the six heroes, aligned to the top of a 43vh tall track, left and right padding as above. Each slot is `clamp(150px, 17.2vw, 330px)` wide and the full track height; the hero image fills the height of the slot (`height: 100%; width: auto; object-fit: contain; object-position: bottom`), standing on the bottom edge with 2vh of space under it, with the soft drop shadow. Behind each hero a very soft white ellipse glow (radial-gradient, white at 14% to transparent) 76% wide and 80% high. The heroes stand shoulder to shoulder, so about five and a half are visible at 1440px and the sixth is cut off by the screen edge. - Bottom-left, 8vh from the bottom: two 42px round arrow buttons (left, right) with 12px gap, then 28px later a small text block, vertically centred with the arrows: "Nova Legion" (12px, weight 800, extended, uppercase, letter-spacing 0.1em) and, 6px below it, a line of 10.5px text (line-height 1.5, white at 62%, max-width 300px). - Bottom-right, the brand mark (a 26px hexagon shape filled white at 25% with a solid white five-point star in the middle, 90% opacity), `right: clamp(18px, 2.6vw, 48px); bottom: clamp(16px, 3vh, 36px)`, kept in the corner of both views, above the file. **2. File view** (the page colour changes to the hero's colour) - A soft radial white glow (white at 20%, an ellipse 42% × 70% centred at 27% across and 60% down) behind the figure. - **The figure**: the hero image stands at the left (left 7vw, height 103vh, bottom -9vh, so the feet are cut off by the bottom of the screen and the head is just inside the top), with the bigger drop shadow. - **A ghost**: the previous hero (in roster order, wrapping round) as a blurred (16px) 42% opacity copy, 96vh tall, at left -9vw and bottom -6vh, behind the figure, so a dim shape shows at the left edge. - **The file** (right side; left edge at min(55vw, 100vw − 560px), top = bar height + 7vh, width min(36vw, 540px)): 1) a small label "Nova Legion" (11px, weight 800, uppercase, letter-spacing 0.1em); 2) a 1px red rule (10px above, 18px below); 3) the hero's name on two lines (first and last name), `font-size: clamp(34px, 4.6vw, 84px)`, line-height 0.94, letter-spacing -0.015em; 4) a **stats table** (22px above, 26px below, with a 1px white 28% rule on top and 18px padding): a two-column grid (28% / rest, min 80px for the first column) with an 8px row gap and **no column gap**, `font-size: clamp(10.5px, 0.82vw, 13px)`, line-height 1.4, one row per fact, the labels muted and the values near-white; 5) the heading "Appearances" (11px, weight 800, uppercase, letter-spacing 0.1em, 12px below it); 6) **three poster tiles** in a row with a 10px gap, each `clamp(54px, 4.8vw, 84px)` wide with aspect ratio 2 / 3, 3px radius, a 165deg gradient from the hero colour lightened (×1.5, ×1.38, ×1.26 for the three) to the hero colour darkened (×0.45), a soft white glow circle (white at 55% fading out by 42%) at 50% across and 36% down, a shadow `0 8px 14px -6px rgb(0 0 0 / 0.5)` and, at the bottom (6% in), the film title in 0.4vw (min 4.5px, max 6.5px) weight 900 extended uppercase text with a small text shadow. On hover a tile lifts 5px. - **Browse arrows** (two 38px round arrows, 12px gap) at the same left edge as the file, 7vh from the bottom: previous and next hero. Under 860px wide: the bar is 60px. The heading is 10vw. The strip starts at 36vh, is 44vh tall, with a 36vh track, and each slot is 46vw wide. The roster arrows and text stack vertically (arrows above the text, 18px gap, 5vh from the bottom). The file view scrolls vertically (the page may scroll): the figure sits in normal flow at the top (54vh tall, centred, starting below the bar), with no ghost; the file below it with side padding and 90px of bottom padding; the browse arrows sit in a bar fixed to the bottom of the screen (full width, 14px top and bottom padding plus the safe-area inset, side padding as above), filled with the current page colour with a soft fade of the same colour above it (box-shadow 0 -16px 20px -4px), so the stats scroll under the bar and never show through behind the arrows; the corner mark stays fixed inside that bar on the right, 20px from the bottom. ## Motion Easing for everything: cubic-bezier(0.22, 1, 0.36, 1). - **Opening a hero** (click a hero in the roster): over 900ms the roster fades out while it scales to 1.04 and blurs to 14px (and stops taking clicks); the page background colour fades to the hero colour; the figure comes in from 7vw to the left, from scale 0.9 and a 10px blur, to its place (150ms delay); the file's seven parts (label, rule, name, stats, "Appearances", posters) fade in and rise 18px over 700ms, staggered by 70ms starting at 350ms. The address updates to `#hero-N` (N = 0 to 5, in roster order) without adding history. - **Closing** (the X, or Escape): the reverse; the page colour returns to the blue. - **Browsing heroes** (the file arrows, or the left and right arrow keys): the figure and the file fade out over 250ms, the content switches to the next or previous hero (wrapping), the page colour fades to the new colour, and everything fades back in. - **Roster hover**: hovering a hero scales it to 1.14 from its feet and lifts it 1.5vh (600ms); while any hero is hovered, all the other heroes fade to 45% opacity and blur 2px (400ms). - **Roster scrolling**: the roster arrows, the left and right arrow keys, and the mouse wheel (vertical wheel movement scrolls the strip sideways) move the strip by one slot, smoothly. - **Ring cursor** (only for a real mouse; touch devices keep the normal cursor): the normal cursor is hidden and replaced by two white rings: a 34px ring with a 2px border that follows the pointer closely (each frame it moves 34% of the way to the pointer), and a 1px ring (60% opacity) that trails behind it (14% of the way). Over any button or link, the first ring grows to 64px and fills with white at 12% (300ms). - **Opening straight to a hero**: loading the page with `#hero-2` (any N from 0 to 5) shows that hero's file at once, with no transition. - **Reduced motion**: with prefers-reduced-motion: reduce, every transition takes 1ms. ## Sample content - Brand: "Nova Legion". Roster text: heading "Nova Legion", line "Six guardians sworn to protect the city of Halcyon. Pick a hero to read their file." - Heroes, in roster order (each has a page colour, a name on two lines, the stat rows in this order: Real name, Gender, Age, Born, Base, Height, Weight, Powers, Allies, Status, and three posters; the first poster is always "Rise of the Legion" and the last "Nova War"): 1. **Aegis / Ward**, #1C3FB8: Dr. Elias Ward; Male; 34; Lisbon, Portugal; Citadel One, Halcyon; 6′3″; 240 lbs; Photon armour, solar shield, enhanced strength; Ember, Orbit; Active. Middle poster: "Aegis: Last Light". 2. **Ember / Vega**, #8A2318: Marisol Vega; Female; 29; Seville, Spain; The Foundry, Halcyon; 5′8″; 140 lbs; Pyrokinesis, heat vision, flame flight; Aegis, Tempest; Active. Middle poster: "Ashes". 3. **Tempest / Tanaka**, #2F4254: Kai Tanaka; Male; 31; Osaka, Japan; Skyline Tower, Halcyon; 5′11″; 170 lbs; Storm control, lightning, flight; Ember, Phantom; Active. Middle poster: "Stormfront". 4. **Verdant / Okafor**, #17644B: Ife Okafor; Female; 36; Lagos, Nigeria; The Glasshouse, Halcyon; 6′0″; 155 lbs; Plant control, regeneration, bark armour; Orbit, Aegis; Active. Middle poster: "Overgrowth". 5. **Orbit / Sorensen**, #B5561C: Cmdr. Lena Sorensen; Female; 40; Oslo, Norway; Station Meridian; 5′9″; 150 lbs; Gravity manipulation, orbital flight; Verdant, Tempest; On mission. Middle poster: "Zero Gravity". 6. **Phantom / Unknown**, #4A2A8C: Redacted; Unknown; Unknown; Unknown; Unknown; 6′1″; Unknown; Phase shifting, stealth, shadow step; Tempest; Classified. Middle poster: "No Trace". ## Images Every hero needs a real image, never an empty box or emoji. Each hero has an image prompt in **Image prompts** at the end of this prompt. The images are **transparent PNG cut-outs** of the whole standing body. 1. If you can generate images, generate one for each hero from its prompt, all in the same style, then remove the plain background so the figure is transparent, and crop the picture tight to the figure with the feet at the bottom edge. 2. Otherwise, load each hero from the file name given below (in an `images/` folder next to the page), so the user can generate the images from the image prompts and drop them in. If an image fails to load, simply leave its slot empty (remove the broken image) and keep the layout. Slots, in roster order: `images/hero-aegis.png`, `images/hero-ember.png`, `images/hero-tempest.png`, `images/hero-verdant.png`, `images/hero-orbit.png`, `images/hero-phantom.png`. Each is used in three places (the roster, the big figure and the blurred ghost), so write the image path in one place in the script. ## Output A single self-contained HTML file with CSS in a `<style>` tag and vanilla JavaScript in a `<script>` tag, with the six heroes as one data array in the script. The only external files allowed are the Google Font and the images above; no libraries or frameworks. Designed for a 1440px-wide screen, filling the full width and height of any screen, and responsive down to 375px wide with no horizontal scrolling, with semantic HTML (a header with the top bar, a main landmark, the roster as a list of buttons, the file as an article with a definition list for the stats, real buttons with aria-labels). ## Image prompts Use these with any image generator, one image per hero, **3:4 portrait**. Shared style for all six: semi-realistic 3D character render, the whole body from head to toe inside the frame with a margin around it, standing in a heroic neutral pose facing slightly left in three-quarter view, soft studio lighting, crisp detail, isolated on a plain solid pure cyan background (#00FFFF), no cast shadow, no text, no logos, and no cyan or turquoise colours on the character. (The flat cyan makes the background easy to remove: remove it so only the hero is left.) - **hero-aegis.png**: A tall knight-like hero in sleek silver-white armour with gold trim, a golden sunburst emblem on the chest, a long white cape with a gold edge, and a round gold-and-white energy shield on his left arm. - **hero-ember.png**: A woman hero in a charcoal-black tactical suit with glowing orange lava-like cracks along the arms and legs, hair that looks like flickering flames, a red-and-black cropped jacket, her hands lightly glowing orange. - **hero-tempest.png**: A lean man hero in a grey-blue storm jacket with a high collar, silver bracers, short windswept hair, white-violet lightning arcing between his hands, rugged boots. - **hero-verdant.png**: A tall woman hero in forest-green armour made of bark and leaves with golden vein patterns, vines wrapping her forearms, a leafy shoulder mantle, braided hair with small flowers, a calm confident stance. - **hero-orbit.png**: A hero in a white and burnt-orange space-flight suit with a glowing amber chest ring, a helmet with an amber visor, and two thin metallic rings floating around her torso. - **hero-phantom.png**: A stealthy hero in a matte violet-and-black bodysuit with a hood, a glowing violet visor slit, light armour plates on the shoulders and knees, and a short tattered cloak.
