PixelVault

1. COLORS — Set these exact CSS custom properties on :root: --bg:#0C0418 (page background, deep purple-black), --surface:#150826 (cards and panels), --layer:#1E0F33 (elevated glass layer), --text:#F0EAFB (primary text), --muted:#8B7FA5 (secondary/muted text), --purple:#9B5CFF (brand primary, buttons), --cyan:#3DD7FF (accent, price-up indicators, eyebrow labels), --grad:linear-gradient(135deg,#9B5CFF,#3DD7FF) (hero, CTA, card sheen, logo text), --border:rgba(155,92,255,.2) (all hairline dividers), --success:#5EEAD4, --danger:#FB7185. Glass cards use background:rgba(255,255,255,0.06) with a 1px border rgba(255,255,255,0.14). The hero featured card has an animated gradient border: linear-gradient(135deg,#9B5CFF,#3DD7FF,#FF5CB8,#9B5CFF) at 300% 300% background-size, cycling with a 6s ease infinite keyframe animation. Overall palette mood: a deep-space void shot through with holographic refraction light. 2. TYPOGRAPHY — Load from Google Fonts: "Space Grotesk" weights 400,500,600,700 and "Inter" weights 400,500 using a single link tag. Space Grotesk is used for all headings, prices, and card names; Inter for all body, labels, and nav links. Type scale: H1 74px weight 700 line-height 1.0 tracking -0.03em; H2 48px weight 600 line-height 1.05 tracking -0.02em; H3 32px weight 600 line-height 1.2 tracking -0.01em; H4 22px weight 500 line-height 1.3 tracking -0.01em; Body-L 19px weight 400 line-height 1.6 tracking 0; Body 16px weight 400 line-height 1.6 tracking 0; Eyebrow/label 12px weight 600 line-height 1.4 tracking 0.10em UPPERCASE; Price/meta 14–15px weight 600–700 tracking 0.02em. Apply gradient text (linear-gradient(135deg,#9B5CFF,#3DD7FF) with -webkit-background-clip:text and -webkit-text-fill-color:transparent) to: the logo wordmark, any italic em inside H1 and H2, gradient step numbers (01/02/03), stats numerals, and price values on the featured card. 3. PAGE SECTIONS — Build sections in this exact order: sticky nav → hero (two-column: copy left, holographic featured card right) → trending grid (4 NFT cards, eyebrow "Trending now", H2 "Hot in the vault", 24h volume note) → how-it-works (3-step cards with gradient numbers 01/02/03, steps: "Connect your wallet", "Bid or buy instantly", "It's yours, on-chain") → top creators (ranked leaderboard table with 4 rows showing rank, avatar, .eth handle, volume in ETH, floor price with % delta) → stats band (4-up grid: "95%", "$0", "2.1M", "180K" with labels "Goes to creators", "Gas fees", "Items minted", "Active collectors") → mint CTA (centered, gradient glow behind, H2 with gradient em, two buttons) → footer (4-column: brand + tagline, Marketplace, Create, Company). Never ship just hero + one feature section + pricing — the full section sequence is mandatory. 4. SIGNATURE ELEMENT — The hero holographic featured card is the single most visually distinctive element. It wraps the inner card in a 3px gradient border achieved by padding:3px on the outer shell with background:linear-gradient(135deg,#9B5CFF,#3DD7FF,#FF5CB8,#9B5CFF); background-size:300% 300%; animation:holo 6s ease infinite; border-radius:22px; transform:rotate(2deg); transition:transform .3s ease. The inner card is background:#150826; border-radius:20px; overflow:hidden. The artwork area has an animated sheen overlay: position:absolute; inset:0; background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.25) 50%,transparent 70%); background-size:200% 200%; animation:sheen 4s ease infinite cycling from background-position:200% 200% to -100% -100%. On hover the outer card transitions to transform:rotate(0deg) scale(1.02). This layered animated gradient border + rotating presentation + sheen sweep defines the holographic glass aesthetic that sets PixelVault apart from all flat-design NFT platforms. 5. COMPONENT SPECS — Primary button (.btn-p): background:linear-gradient(135deg,#9B5CFF,#3DD7FF); color:#fff; font-size:14px; font-weight:600; padding:10px 22px (hero CTA overrides to 14px 30px, mint CTA to 16px 36px); border-radius:10px; border:none; transition:opacity .2s,transform .15s; hover: opacity:.92 + translateY(-1px). Secondary button (.btn-s): background:rgba(255,255,255,.04); border:1px solid rgba(155,92,255,.2); color:#F0EAFB; font-size:15px; font-weight:500; padding:14px 28px; border-radius:10px; hover: background:rgba(255,255,255,.08). Nav: height 64px; max-width 1180px inner container; position:sticky top:0 z-index:100; background:rgba(12,4,24,.85); backdrop-filter:blur(16px); border-bottom:1px solid rgba(155,92,255,.2). NFT cards: background:#150826; border:1px solid rgba(155,92,255,.2); border-radius:16px; overflow:hidden; hover: translateY(-6px) + border-color rgba(61,215,255,.4). How-it-works cards: background:rgba(255,255,255,.03); border:1px solid rgba(155,92,255,.2); border-radius:18px; padding:36px. 6. COPY VOICE — Audience: digital artists and collectors who are frustrated by gas fees, platform gatekeeping, and losing 30%+ of their earnings to intermediaries. Their core pain point: creating something valuable only to have platforms take the majority of the cut. Headlines must be punchy and concrete: H1 "Holographic. On-chain. Instant." Sub "Gas-free minting, instant settlement, and creators keep 95% on every primary sale. No hidden cuts." Stats "95% to creators · Zero gas · Carbon-neutral chain." CTA H2 "Mint your first drop gas-free today." Banned generic phrases for this industry: "Everything you need to succeed", "The future of digital ownership", "Empowering creators everywhere", "Join the revolution", "All-in-one NFT platform". Every line must state a specific number (95%, $0, 2.1M items) or a direct action ("Connect wallet", "Place bid", "Explore the vault") — never abstract claims without evidence. 7. BACKGROUND ZONES — Three distinct background levels: Level 1 --bg:#0C0418 used on page body, hero section, trending grid section, creators section, and CTA section. Level 2 --surface:#150826 used on how-it-works section (background:#150826 full-width) and footer (background:#150826). Level 3 --layer:#1E0F33 used for elevated card interiors and inner card of holo-card. Stats band is a gradient zone: background:linear-gradient(135deg,rgba(155,92,255,.1),rgba(61,215,255,.05)) bleeding full viewport width, with border-top and border-bottom each 1px solid rgba(155,92,255,.2). Hero background includes a radial glow pseudo-element: position:absolute top:-10% left:-5% width:700px height:700px background:radial-gradient(circle,rgba(155,92,255,.18),transparent 65%). CTA section has a centered elliptical glow: position:absolute top:50% left:50% translate(-50%,-50%) width:700px height:400px background:radial-gradient(ellipse,rgba(155,92,255,.2),transparent 70%). No repeating textures or patterns — atmosphere is pure radial/gradient glow on flat color fields. 8. SCROLL ANIMATIONS — Every section heading, eyebrow label, card, and stat gets class .reveal with initial state opacity:0; transform:translateY(24px); transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1). Cards within the trending grid and how-it-works section stagger using data-delay="1/2/3" attributes that add transition-delay of .1s/.2s/.3s respectively. An IntersectionObserver with threshold:0.12 adds class .in-view (opacity:1; transform:none) when each element enters the viewport, then unobserves it. Duration is 550ms. Cubic-bezier: cubic-bezier(0.16,1,0.3,1). Slide-up distance: 24px. Card stagger: 100ms between each. Honor prefers-reduced-motion: @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } 9. RESPONSIVE — Breakpoints: desktop >=1024px, tablet 768–1023px, mobile <=767px. Desktop: hero 2-column grid (1.1fr 0.9fr gap 64px), trending 4-column, how-it-works 3-column, creators table 4-column (rank 40px, name 2fr, volume 1fr, floor 1fr), stats 4-column, footer 4-column (2fr 1fr 1fr 1fr). Tablet @max-width:1023px: hero collapses to 1-column (featured card stacks below copy), trending 2-column, how-it-works 1-column, stats 2-column, creators drops .cr-vol-2 column (display:none), footer 2-column. Mobile @max-width:767px: H1 shrinks to 46px, H2 shrinks to 34px, body stays 16px; trending remains 2-column (1fr 1fr); stats goes 1-column; footer 1-column; .nl nav links display:none (mobile nav hidden). Primary and secondary buttons remain inline-flex in hero but wrap via flex-wrap:wrap. Section padding: 128px vertical desktop, 96px tablet, 64px mobile. 10. CRITICAL CSS — Always include these exact overrides: Add a style tag before the closing head tag containing: body { flex-direction: column !important; align-items: stretch !important; } .wrap { width: 100%; margin: 0 auto; padding: 0 80px; } — these are required because Framer Embed wraps the iframe document body in display:flex which otherwise stacks all top-level elements (nav, main, footer) horizontally. The .wrap class provides consistent horizontal padding of 80px per side and centers content within a fluid-width container (no max-width on .wrap itself — max-width 1180px lives on inner containers like .ni for nav). Additionally set html { scroll-behavior: smooth } and body { -webkit-font-smoothing: antialiased } in the main stylesheet block. 11. SEMANTIC HTML — Document structure: one <header> element wrapping the <nav> (sticky), then <main> containing one <section> per content block each with a descriptive id (id="hero", id="trending", id="how-it-works", id="creators", id="stats", id="mint-cta"), then <footer>. There is exactly one <h1> in the page, inside #hero. Each NFT card in the trending grid is an <article>; each creator row is a <div> inside the leaderboard. How-it-works steps are <article class="how-card">. SEO: <title>PixelVault — Holographic, On-Chain, Instant</title> (45 chars), <meta name="description" content="PixelVault is an NFT marketplace for generative and 1/1 digital art. Gas-free minting, instant settlement, creators keep 95%." (127 chars), og:image should be a 1200x630 holographic card visual. Every <img> and emoji-as-art placeholder gets a descriptive aria-label or alt attribute such as alt="Prism Echo #042 — abstract holographic refraction artwork by novaflux". 12. FOOTER STRUCTURE — Footer uses background:#150826; border-top:1px solid rgba(155,92,255,.2); padding:72px 0 44px. Inner .foot-grid is a 4-column CSS grid (2fr 1fr 1fr 1fr gap:40px) with margin-bottom:56px. Column 1 (.foot-brand): gradient wordmark "PixelVault" at 19px font-weight:700 Space Grotesk, then a <p> brand tagline at 14px color:#8B7FA5 line-height:1.65. Column 2 header "Marketplace" (uppercase 11px 0.10em tracking #8B7FA5) with links: Explore, Drops, Rankings, Activity. Column 3 header "Create" with links: Mint, Creator docs, Royalties, API. Column 4 header "Company" with links: About, Blog, Careers, Discord. All link column headers at 11px font-weight:600 letter-spacing:0.10em uppercase color:#8B7FA5 margin-bottom:18px; links at 14px color:#8B7FA5 hover color:#F0EAFB transition:color .2s; li margin-bottom:10px. Bottom bar (.foot-bot): border-top:1px solid rgba(155,92,255,.2); padding-top:28px; display:flex justify-content:space-between flex-wrap:wrap gap:12px; left side "© 2025 PixelVault Labs · Carbon-neutral chain." right side "Privacy · Terms · Smart contracts" both at 12px color:#8B7FA5. No newsletter input, no social icons row in this template. 13. UNIQUE INTERACTIVE — The page has two layered interactive systems. First, the .holo-card animated gradient border: the outer container continuously animates background-position via keyframes holo (0%,100% { background-position:0% 50% } 50% { background-position:100% 50% }) at 6s ease infinite, creating a slow-cycling rainbow border around the featured drop card; on hover it snaps transform from rotate(2deg) to rotate(0deg) scale(1.02) over 0.3s ease — no JavaScript needed, pure CSS. Second, the NFT card hover sheen: each .nft-art has an ::after pseudo-element with a 120deg gradient (transparent 40%, rgba(255,255,255,.12) 50%, transparent 60%) initially opacity:0; it transitions to opacity:1 over 0.3s on .nft-card:hover, simulating a light-sweep refraction. ARIA: the featured holo-card should have role="article" aria-label="Featured drop: Prism Echo #042 — current bid 4.2 ETH, auction ends in 6 hours 14 minutes". The bid countdown element should have aria-live="polite" so screen readers announce time updates. Under prefers-reduced-motion the @keyframes holo and sheen animations are disabled via animation:none !important and the card tilt (transform on hover) should also be suppressed. — Prompt set generated with Claude Sonnet 4.6 —