CENTO — One Hundred demo
CENTO — One Hundred

A contemporary glassmorphism design featuring frosted translucent panels, backdrop blur effects, and layered depth built with CSS Grid and Flexbox.
Category: Glass & Soft UI
Era: 2020s Modern
Prompt: 16.9 KB · 2327 words
**ROLE:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality glassmorphism landing page — theme **"CENTO — one hundred"** — on the first attempt. Generate the full final code (`index.html`, `style.css`, `script.js`) following every rule in this specification. Do not deliver partial code, stubs, or explanations outside code comments.

**PROJECT BRIEF**

- **Theme:** CENTO — one hundred · Glassmorphism · 2020s Digital · Keywords: *cento, hundred, tiles, glass, translucent, blur, grid-layout.*
- **Product narrative (locked):** CENTO is a premium glassmorphism design toolkit delivered as exactly **one hundred modular glass "tiles"** — frosted components (buttons, cards, inputs, navs) that snap together into interfaces. The number 100 is the brand motif everywhere: hero mosaic, stats, pricing tier names.
- **Palette:** Primary `#141419` (ink), `#e8e8f0` (lavender mist), `#6a6a78` (slate). Secondary `#f2f2f8` (near-white lavender), `#c9a84a` (gold accent), `#8a8a96` (cool gray).
- **Effects:** blur, glass effect, neumorphism, hover effects. **Techniques:** CSS Grid, Flexbox, backdrop-filter, CSS filters, transitions, transforms, box shadows, text shadows, border-radius, aspect-ratio.
- **Sections:** sticky header/nav, Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.

---

## 1. STRICT RULES & ARCHITECTURE

### 1.1 CSS-First Architecture & Zero Inline CSS
- All styling lives in `style.css`. **Forbidden:** `style="..."` attributes, `<style>` blocks in HTML, presentational attributes.
- Target everything via class/ID selectors only. HTML stays semantic and clean — changing the site's look must require editing only the CSS file.
- `script.js` is the single JavaScript file, referenced once with `defer`. JS handles behavior only: theme toggle, mobile nav, accordion, modal, form validation, hero tile generation. No other script blocks anywhere.

### 1.2 CSS Variables (`var(--...)`) & Theme Tokens
Store all tokens in `:root`; never use raw hex values in component rules:

- **Colors:** `--primary: #141419; --secondary: #6a6a78; --accent: #c9a84a;` · `--bg-primary: #f2f2f8; --bg-secondary: #e8e8f0;` (near-white surfaces use `#fefefe`, never `#ffffff`) · `--text-primary: #141419; --text-secondary: #6a6a78;` · `--text-success: #1e7a46; --text-error: #b3261e;` · `--border-default: rgba(20,20,25,0.12); --border-error: #b3261e; --border-success: #1e7a46;`
- **Contrast pair tokens (mandatory):** `--on-primary: #fefefe` (text on `--primary`), `--on-accent: #141419` (text on gold). Every light background token pairs with a dark text token and every dark background token pairs with a light text token — enforced in both themes, not just default.
- **Glass tokens:** `--glass-bg: rgba(232,232,240,0.55); --glass-border: rgba(255,255,255,0.65); --glass-blur: 16px; --glass-saturate: 160%;` (dark theme overrides these — see 1.3).
- **Shape & depth:** `--radius-sm: 8px; --radius-md: 14px; --radius-lg: 24px; --shadow-sm; --shadow-md` (neumorphic dual shadows built from the palette: light source top-left, e.g. soft `#6a6a78`-tinted shadow + white highlight).
- **Motion & space:** `--spacing-gap: 1.5rem; --transition-fast: 150ms; --transition-normal: 300ms; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);`
- **Stacking:** `--z-dropdown: 100; --z-modal: 1000; --z-toast: 1100;` — header uses the dropdown layer, modal and any toast never collide.
- **Type:** `--font-display: 'Space Grotesk', sans-serif; --font-base: 'Inter', sans-serif;`

### 1.3 Mandatory Dark Mode Support
- **Explicit exception:** the source spec marks Light as the default presentation — keep Light as the default theme, but Dark Mode must still be **fully implemented and toggleable** regardless.
- Define the complete dark token set (e.g., `--bg-primary: #141419; --bg-secondary: #1c1c24; --text-primary: #e8e8f0; --text-secondary: #8a8a96; --primary: #e8e8f0; --on-primary: #141419; --glass-bg: rgba(20,20,25,0.55); --glass-border: rgba(232,232,240,0.12); --border-default: rgba(232,232,240,0.14);` plus accessible dark `--text-success`/`--text-error` and inverted neumorphic shadows) under **both** `@media (prefers-color-scheme: dark)` and a `.dark` class on `<html>`. Token duplication across the two selectors is acceptable.
- Background and text variables must switch seamlessly with **zero HTML restructuring** — every surface, glass panel, tile, and neumorphic shadow must adapt.
- **Persistence:** store the user's choice in `localStorage` (key `cento-theme`); on first visit fall back to `prefers-color-scheme`. Provide a **visible toggle** in the header: neumorphic glass pill, Google Material Symbol icons (`light_mode` / `dark_mode`), correct `aria-pressed` state, and `aria-label` that reflects the action ("Switch to dark mode" / "Switch to light mode").

### 1.4 Flexbox Layout & Mobile-First Alignment
- Every flex container **defaults to `align-items: center`** unless a specific exception is justified in a code comment (e.g., `stretch` for equal-height card content, `column` for input groups).
- Build mobile-first: single-column layouts that expand at breakpoints (≥768px, ≥1024px). **No horizontal scrolling at any viewport width** — add an `overflow-x` guard.
- **Explicit exception (theme identity):** macro layouts **may and should use CSS Grid** — the 10×10 hero tile mosaic, the 3-card feature/pricing/testimonial rows, the step flow, and footer columns. Grid is permitted for these structures; every flex container inside them still defaults to `align-items: center`.

### 1.5 Styling Approach — Clean Custom CSS
- No CSS framework. Hand-author `style.css` as a coherent design system (the theme's heavy `backdrop-filter`/glass work demands it), organized with section comments.
- All utility styling maps to generic reusable classes: `.btn`, `.card`, `.glass-panel`, `.input-group`, `.tile`, `.section`, `.container`, `.badge` — plus BEM modifiers (`.btn--accent`, `.card--featured`).

### 1.6 Typography & Icons (Google Fonts Mandatory)
- **Text:** Google Fonts only — load **Space Grotesk** (600/700, display) and **Inter** (400/500/600, body) via `<link>` with `preconnect`. Bind to `--font-display` and `--font-base`. Headings use Space Grotesk; body/UI text uses Inter.
- **Icons:** Google Material Symbols (Rounded) via its font `<link>`; usage: `<span class="material-symbols-rounded" aria-hidden="true">check_circle</span>`.
- **Forbidden:** raw inline SVGs, local icon files, emoji used as icons, any non-Google icon source.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

### 2.1 Button Component
Style all states via classes; never inline:

- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px, `border-radius: var(--radius-md)`, `transition: var(--transition-normal)`. Variants: `.btn--primary` (`--primary` bg + `--on-primary` text), `.btn--accent` (gold bg + ink text), `.btn--glass` (glass tokens), `.btn--danger`.
- **Hover:** visible shift — brightness/saturate filter or shadow elevation — with `cursor: pointer`.
- **Focus:** distinct keyboard focus ring via CSS variables (`outline: 2px solid var(--accent); outline-offset: 2px;` on `:focus-visible`).
- **Active/Pressed:** `transform: scale(0.97)` click feedback.
- **Loading (`.is-loading`):** blocks pointer events, prevents double-clicks (JS guard), swaps the label for a CSS-animated spinner or rotating Material Symbol `progress` — **button dimensions must not change** (preserve `min-width`).
- **Disabled:** `opacity: 0.5`, grayscale filter, `cursor: not-allowed`, no transforms.
- **Success/Error (`.is-success` / `.is-error`):** temporary feedback driven by `--text-success` / `--text-error` — border/text/icon change plus a Material Symbol, never color alone.

### 2.2 Card Component
- **Default:** flexbox column layout, `background: var(--glass-bg)`, `backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate))`, 1px `var(--glass-border)` border, `border-radius: var(--radius-lg)`, `box-shadow: var(--shadow-md)`, `padding: var(--spacing-gap)`.
- **Hover:** `transform: translateY(-2px)` plus shadow growth and a subtle gold border brighten.
- **Focus-within:** when any child link/button is focused, the card border switches to `var(--accent)` with a soft glow ring.
- **Skeleton (`.card--skeleton`):** CSS shimmer keyframe (gradient sweep) over placeholder blocks; reserved dimensions must match final content — zero layout jump.
- **Empty state (`.card--empty`):** large Material Symbol in `--text-secondary`, short heading, guidance sentence, optional action button — defined in the design system.

### 2.3 Form & Input Requirements
- **Structure:** `.input-group` = flex **column** (justified exception to 1.4) wrapping a `<label for>`, the input, and a dedicated `.input-group__error` container with `aria-live="polite"`, linked via `aria-describedby`.
- **States, all via CSS:** empty (glass field), `:focus` (accent outline ring + accent border), filled, `.is-valid` (`--border-success` + small `check_circle` icon), `.is-invalid` (`--border-error` + `error` icon + visible message text), disabled (opacity + not-allowed), read-only.
- Error feedback is always text + icon, never color alone.

### 2.4 Modal / Popup
- **Trigger:** every pricing tier CTA opens a glass "Confirm your plan" modal seeded with that tier's name and price.
- **Structure:** `role="dialog"`, `aria-modal="true"`, `aria-labelledby`; fixed overlay, flex container with `align-items: center; justify-content: center`; backdrop = dark translucent ink with light backdrop blur.
- **States (all CSS-animated with `var(--transition-normal)`):** opening (fade + scale from 0.96), open, loading (confirm button shows spinner per 2.1), success/error (inline feedback per 2.1), closing (reverse animation).
- **UX:** Google Material Symbol `close` icon button (44px, `aria-label="Close dialog"`); Esc key closes; overlay click closes; focus is trapped inside (Tab/Shift+Tab cycle); focus returns to the trigger on close; body scroll locked while open.

---

## 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by default:** fluid `clamp()` typography, breakpoint stacking (3-col grids → 1 col below 768px), no horizontal overflow, all touch targets ≥44px.
- **Smooth animations:** `transition: var(--transition-normal)` on every state change (buttons, cards, accordion, modal, tiles). Honor `prefers-reduced-motion`: reduced-motion users get instant state swaps, no transforms, no stagger.
- **Accessibility:** WCAG AA contrast in **both** light and dark modes (verify pairings from 1.2). Never rely on color alone. Semantic HTML5 landmarks (`header`, `nav`, `main`, `section`, `footer`); each section `aria-labelledby` its heading; exactly one `h1` (hero); logical DOM/focus order; every widget fully keyboard operable (nav menu, accordion, modal, theme toggle); `aria-live` regions for all dynamic feedback (form errors, subscribe success).
- **Mandatory visual feedback:** every click, hover, and submission produces a visible state change — lifts, glows, chevron rotations, button press scale.
- **Destructive actions:** define `.btn--danger` (error-tinted glass with `--text-error` icon and label) distinct in both themes, even if the page doesn't use it.
- **Neumorphism:** soft dual box-shadows (palette-tinted dark shadow + white highlight) on the theme toggle, icon chips, and buttons sitting on glass surfaces; dark mode uses inverted dark neumorphism.
- **Glass discipline:** every glass surface uses `backdrop-filter` + glass tokens + a 1px translucent border; never place glass on glass without contrast separation.

---

## 4. DELIVERABLE & OUTPUT FORMAT

- **Files:** `index.html`, `style.css`, `script.js` — separate, complete. One single `<script src="script.js" defer>` reference; no inline scripts or styles anywhere else.
- **Naming:** BEM consistently across the entire deliverable (`.card__title`, `.card--featured`, `.btn--accent`) — never mix conventions.
- **Copy:** all user-facing copy in **English**, real and on-brand per the locked narrative. **No lorem ipsum.** Write complete marketing copy, realistic testimonial names/roles/quotes, and genuinely useful FAQ answers. Placeholder `href="#"` links are permitted only for pages that don't exist yet (footer legal/company links), each with a descriptive accessible name.

---

## 5. SECTION-BY-SECTION BUILD SPEC

### 5.1 Sticky Header
Fixed glass bar (glass tokens, `backdrop-filter`, `z-index: var(--z-dropdown)`). Left: wordmark "CENTO" in Space Grotesk with a gold "100" mark. Center: anchor links to Features, How It Works, Testimonials, Pricing, FAQ. Right: neumorphic theme toggle (per 1.3) + `.btn--accent` "Get CENTO" linking to pricing. Below 768px the nav collapses behind a Material Symbol `menu` button (`aria-expanded`, `aria-controls`), keyboard operable, auto-closing on link activation.

### 5.2 Hero
- **Signature mosaic:** a CSS Grid of **exactly 100 tiles** (10×10, `aspect-ratio: 1/1`, small gap) generated by a JS loop into an `aria-hidden="true"` container. Tiles are translucent palette gradients; staggered fade-in on load; hovering a tile produces a soft gold glow via CSS `:hover` + CSS filters. Compose it behind/beside the hero copy (your call — make it striking).
- **Copy block:** `h1` in Space Grotesk (`clamp()` sizing, subtle text-shadow) built on the hundred motif; supporting paragraph; two CTAs — `.btn--accent` linking to pricing, `.btn--glass` linking to How It Works; a row of 3 glass stat chips ("100 tiles · 1 kit · 0 clutter"-style, final wording yours).

### 5.3 Features — 3 Glass Cards
Grid 1 → 3 columns. Each `.card`: Material Symbol icon inside a neumorphic glass circle, title, 2–3 sentence real copy, "Learn more" link (card highlights via `:focus-within`). Suggested angles — the tile library (100 modular components), frosted flexibility (token-driven theming + dark mode), pixel-soft polish (neumorphic detail and hover feedback). Final copy is yours but must be polished and specific.

### 5.4 How It Works — 3 Steps
Numbered `01 / 02 / 03` gold Space Grotesk numerals over glass tiles, connected by a thin rule that hides on mobile. Steps: pick your tiles → compose on the grid → ship the glass. Grid layout stacking to a column below 768px.

### 5.5 Testimonials
3 glass quote cards (grid 1 → 3): oversized gold Material Symbol `format_quote`, realistic quote, neumorphic glass-circle avatar built from the person's **initials** (no external images — do not insert unrequested placeholder images), name + role. Hover lift per 2.2.

### 5.6 Pricing — 3 Tiers
- **"Dieci" — $10/mo** (10 tiles), **"Cinquanta" — $50/mo** (50 tiles), **"Cento" — $100/mo** (all 100 tiles).
- Middle tier is `.card--featured`: gold `--accent` border, "Most popular" `.badge`, slight elevation/scale.
- Each card: tier name, large Space Grotesk price, billing note, realistic feature list with Material Symbol `check` bullets, and a CTA — featured uses `.btn--accent`, others `.btn--glass`. **Every tier CTA opens the plan-confirmation modal** (2.4) seeded with that plan's name and price; the confirm button runs loading → success with visible feedback.

### 5.7 FAQ
5–6 real questions and answers (What is CENTO? What does "one hundred" mean? Do the tiles include dark mode? Can tiles be used in client work? How do updates work? What's the refund policy?).
Implement as an accessible disclosure accordion: trigger `<button>` with `aria-expanded` + `aria-controls`, Material Symbol `expand_more` chevron rotating 180°, panel with `role="region"` + `aria-labelledby`. Animate open/close purely in CSS (grid-template-rows `0fr → 1fr` technique — no JS height math). Fully keyboard operable; visible open/close feedback per Section 3.

### 5.8 Final CTA
Full-width glass panel floating over blurred radial-gradient orbs in ink and gold (pure CSS). Big Space Grotesk statement built on the hundred motif. Email capture: `.input-group` per 2.3 + `.btn--accent` "Claim your tiles". JS validates the email (regex): invalid → inline `aria-live` error with icon and message; valid → button loading spinner ~1s → success state (`check_circle`, "You're on the list — welcome to the hundred.") and `.is-valid` input. All feedback is text + icon, never color alone.

### 5.9 Footer
Ink band (`--primary: #141419` background with light `--text-primary: #e8e8f0` text — the mandatory dark-bg/light-text pairing). Grid of columns: brand block (wordmark + one-line tagline), then secondary link groups — **Product** (Tiles, Pricing, FAQ), **Company** (About, Journal, Contact), **Legal** (Privacy, Terms, Licenses) — linking to on-page sections where they exist, `href="#"` with descriptive accessible names otherwise. Include Material Symbol-based contact/social glyphs (`alternate_email`, `public`, `rss_feed`) and a copyright line: "© 2025 CENTO — one hundred."

**Final check before output:** light theme renders as default; dark theme fully switches via `.dark` class and `prefers-color-scheme`; theme persists via `localStorage`; every state in Sections 2.1–2.4 is defined; zero inline styles; zero inline SVGs; no horizontal scroll from 320px up; the code is complete on the first attempt.