[Design] Option 3: Moleskine Notebook Cover & Ruled Paper Content

[realproject7]

Design Trial — Option 3

EXPERIMENTAL — This is a design trial. See revert points in comment below.
Base: current Option 2 warm bookshelf (4cac5bd)

Reference Design

T1 will upload reference images below.

Reference	Image
Moleskine notebook shape

|
| Ruled paper content |

|

Concept

Two core visual changes:

1. Moleskine Notebook Cards (Home Page)

Replace the current book cover cards with Moleskine-style notebook cards. On hover, the cover opens to reveal a page underneath (like opening a notebook).

Take from the CodePen: The shape, rounded corners (border-radius: 5px 15px 15px 5px), the elastic band (::before on cover), the cover-open animation on hover (rotateY(-50deg) with perspective), and the page layer underneath.

Do NOT take: The dark background or the specific colors (red, blue, yellow, green). Instead use the current warm palette — bright, minimal, cream/beige tones. The cover color should use --accent (#8B4513 saddle brown) or a similarly warm tone. Keep it bright and clean.

Moleskine CodePen CSS reference (shape + animation only):

.moleskine-notebook {
  height: 250px;
  width: 175px;
  position: relative;
  transition: .4s ease-in-out;
  border-radius: 5px 15px 15px 5px;
  transform-origin: left center 0px;
  display: inline-block;
  perspective: 800px;
  &:hover {
    transform: rotateZ(-10deg);
    .notebook-cover {
      transform: rotateY(-50deg);
      z-index: 999;
      box-shadow: 20px 10px 50px rgba(0,0,0,0.2);
    }
  }
}

.notebook-cover {
  background: /* USE WARM PALETTE COLOR */;
  height: 250px;
  width: 175px;
  position: absolute;
  border-radius: 5px 15px 15px 5px;
  z-index: 10;
  transition: .5s linear;
  transform-style: preserve-3d;
  transform-origin: left center 0px;
  /* Elastic band */
  &:before {
    content: "";
    position: absolute;
    width: 10px;
    height: calc(100% + 2px);
    top: -1px;
    z-index: 100;
    border-radius: 2px;
    right: 25px;
    transition: 2s ease;
    background: linear-gradient(
      to right,
      /* darker shade */ 0%, /* base color */ 12%,
      /* repeating pattern for elastic texture */
    );
  }
}

/* Label band across cover */
.notebook-skin {
  height: 50px;
  background: #e8e8e0;
  margin-top: 80px;
  padding: 15px;
  font-size: 12px;
  position: relative;
  z-index: 10;
  box-shadow: 0 1px 1px rgba(0,0,0,0.2);
}

/* Page underneath */
.notebook-page {
  height: 100%;
  width: 175px;
  position: absolute;
  background-color: #fbfae8;
  z-index: 0;
  border-radius: 5px 16px 16px 5px;
  overflow: hidden;
}

Adaptation notes:

• The title goes on the label band (.notebook-skin area) — centered, in Montserrat
• Author name below the label band
• Genre badge on top of cover
• The page underneath can show a preview or just be blank ruled paper
• Keep the 2:3 aspect ratio and responsive grid
• Mobile: The hover-open animation may need a tap alternative or be disabled on touch devices (cards just show the cover statically)

2. Ruled Paper Content Area (Story Detail Page)

Replace the current paper texture on the story/plot content area with a ruled notebook paper effect — like a real notebook page with horizontal lines.

Ruled Paper CodePen CSS reference:

:root {
  --main-line-color: hsl(234, 62%, 86%);   /* light blue lines */
  --side-line-color: hsl(350, 100%, 91%);   /* pink margin line */
  --paper-color: hsl(0, 15%, 95%);          /* off-white paper */
  --ink-color: hsl(0, 0%, 12%);             /* dark text */
  --line-thickness: 3px;
  --top-space: 4lh;
}

.paper {
  background: var(--paper-color);
  padding: calc(var(--top-space) - 0.5lh) 3rem 1rem 5.5rem;
  font-family: system-ui;
  font-size: 1.5rem;
  line-height: 1.6;
  color: var(--ink-color);
  background-image:
    /* the red/pink margin line */
    linear-gradient(
      90deg,
      transparent, transparent 4rem,
      var(--side-line-color) 4rem,
      var(--side-line-color) 4.25rem,
      transparent 4.25rem
    ),
    /* top blank space */
    linear-gradient(
      var(--paper-color), var(--paper-color) var(--top-space),
      transparent var(--top-space)
    ),
    /* the blue horizontal lines */
    repeating-linear-gradient(
      transparent,
      transparent calc(1lh - var(--line-thickness)),
      var(--main-line-color) calc(1lh - var(--line-thickness)),
      var(--main-line-color) 1lh,
      transparent 1lh
    );
  box-shadow: 0 0 1rem rgb(0 0 0 / 0.25);
}

Adaptation notes:

• Apply to plot content area in src/app/story/[storylineId]/page.tsx
• Adjust line spacing to match the font size used in the content area
• Use Libre Caslon Text (current body font) — the ruled lines should align with the text
• The margin line (pink/red) is optional — include it for authenticity but make it subtle
• Keep text readable — lines should be very light
• lh unit may need a fallback for older browsers — test or use a fixed px equivalent

Sub-Tickets

Split into 2 sequential sub-tickets:

1. Sub-1: Moleskine notebook cards — StoryCard, StoryGrid, home page
2. Sub-2: Ruled paper content area — Story detail page content

DO NOT

• Do not change any business logic, API routes, or data fetching
• Do not use the dark CodePen background colors — keep bright warm palette
• Do not remove functionality (filters, pagination, batch data)
• Do not change trading widgets, dashboards, or other pages (only home + story detail)

Acceptance Criteria

• All sub-tickets merged
• Moleskine notebook shape with cover-open hover animation
• Ruled paper lines on story content area
• Mobile responsive (cover animation graceful on touch)
• npm run typecheck passes
• npm run lint passes

[realproject7]

Option 3 complete. All sub-tickets merged plus hotfix PRs #420-#425. Design accepted by T1 at commit 3cc8702.