Remove Jerusalem Stone / Kotel style directions and textures.

Keep the four calm Chabad/Israel options without the stone masonry experiment.

viewer-frontend/app/styles/PageMockups.tsx

@@ -4,45 +4,26 @@ import type { CSSProperties, ReactNode } from 'react';
 import { cn } from '@/lib/utils';
 import type { PageTypeId, StyleOption, StyleTokens } from './styleOptions';
 
-/** Kotel limestone photo texture (procedural Herodian courses). */
-const KOTEL_TEXTURE = '/brand/kotel-stone-texture.jpg';
-const KOTEL_TILE = '/brand/kotel-stone-tile.jpg';
-
 function shellStyle(t: StyleTokens): CSSProperties {
-  const isKotel = t.texture === 'kotel';
   return {
-    backgroundColor: t.bg,
-    backgroundImage: isKotel
-      ? `linear-gradient(180deg, rgba(255,245,220,0.12), rgba(40,28,16,0.18)), url(${KOTEL_TEXTURE})`
-      : undefined,
-    backgroundSize: isKotel ? 'cover' : undefined,
-    backgroundPosition: isKotel ? 'center top' : undefined,
+    background: t.bg,
     color: t.text,
     fontFamily: t.body,
     borderRadius: t.radius === '999px' ? '16px' : t.radius,
     border: `1px solid ${t.border}`,
-    boxShadow: isKotel ? 'inset 0 0 50px rgba(40,28,16,0.25)' : undefined,
   };
 }
 
 function HeaderBar({ t, title }: { t: StyleTokens; title: string }) {
-  const isKotel = t.texture === 'kotel';
   return (
     <div
       className="flex items-center justify-between gap-2 px-2.5 py-1.5 border-b"
-      style={{
-        borderColor: t.border,
-        backgroundColor: t.surface,
-        backgroundImage: isKotel
-          ? `linear-gradient(rgba(255,248,230,0.35), rgba(255,248,230,0.2)), url(${KOTEL_TILE})`
-          : undefined,
-        backgroundSize: isKotel ? 'cover' : undefined,
-      }}
+      style={{ borderColor: t.border, background: t.surface }}
     >
       <div className="min-w-0">
         <div
           className="text-[8px] font-bold tracking-wide truncate"
-          style={{ fontFamily: t.display, color: isKotel ? t.text : t.accent }}
+          style={{ fontFamily: t.display, color: t.accent }}
         >
           JRCC
         </div>
@@ -78,31 +59,13 @@ function PhotoTile({
   tall?: boolean;
 }) {
   const bg = tone === 'A' ? t.photoA : tone === 'B' ? t.photoB : t.photoC;
-  const isKotel = t.texture === 'kotel';
-  const pos =
-    tone === 'A' ? '15% 20%' : tone === 'B' ? '55% 40%' : '80% 65%';
   return (
     <div
       className={cn('relative overflow-hidden flex items-end', tall ? 'aspect-[3/4]' : 'aspect-square')}
       style={{
-        backgroundColor: bg,
-        backgroundImage: isKotel
-          ? `linear-gradient(135deg, rgba(255,245,220,0.15), rgba(40,28,16,0.2)), url(${KOTEL_TEXTURE})`
-          : undefined,
-        backgroundSize: isKotel ? '220%' : undefined,
-        backgroundPosition: isKotel ? pos : undefined,
-        borderRadius: isKotel
-          ? '2px'
-          : t.vibe === 'arcade'
-            ? '4px'
-            : t.radius === '999px'
-              ? '12px'
-              : t.radius,
-        boxShadow: isKotel
-          ? 'inset 0 0 0 1px rgba(55,40,25,0.45), inset 0 0 12px rgba(40,28,16,0.2)'
-          : t.vibe === 'cinematic'
-            ? `0 0 0 1px ${t.border}`
-            : undefined,
+        background: bg,
+        borderRadius: t.vibe === 'arcade' ? '4px' : t.radius === '999px' ? '12px' : t.radius,
+        boxShadow: t.vibe === 'cinematic' ? `0 0 0 1px ${t.border}` : undefined,
       }}
     >
       {t.vibe === 'festive' && (
@@ -115,12 +78,11 @@ function PhotoTile({
       )}
       {label && (
         <span
-          className="m-1 text-[7px] px-1 py-0.5 font-medium relative z-[1]"
+          className="m-1 text-[7px] px-1 py-0.5 font-medium"
           style={{
-            background: isKotel ? 'rgba(255,248,230,0.88)' : `${t.surface}cc`,
+            background: `${t.surface}cc`,
             color: t.text,
-            borderRadius: '2px',
-            boxShadow: isKotel ? '0 1px 2px rgba(40,28,16,0.25)' : undefined,
+            borderRadius: '3px',
           }}
         >
           {label}
@@ -132,21 +94,18 @@ function PhotoTile({
 
 function MockHome({ t }: { t: StyleTokens }) {
   const gap = t.density === 'airy' ? 'gap-2' : t.density === 'dense' ? 'gap-1' : 'gap-1.5';
-  const isKotel = t.texture === 'kotel';
   return (
     <div style={shellStyle(t)} className="overflow-hidden text-left shadow-md">
       <HeaderBar t={t} title="Browse our photo collection" />
       <div className="px-2.5 pt-2 pb-1 flex items-center justify-between">
         <div style={{ fontFamily: t.display }} className="text-[11px] font-semibold leading-tight">
-          {isKotel
-            ? 'At the Wall · faces & notes'
-            : t.vibe === 'arcade'
-              ? 'High scores tonight'
-              : t.vibe === 'festive'
-                ? 'Parade wall · live'
-                : t.vibe === 'cinematic' && t.radius === '999px'
-                  ? 'Your constellation'
-                  : 'This week at JRCC'}
+          {t.vibe === 'arcade'
+            ? 'High scores tonight'
+            : t.vibe === 'festive'
+              ? 'Parade wall · live'
+              : t.vibe === 'cinematic' && t.radius === '999px'
+                ? 'Your constellation'
+                : 'This week at JRCC'}
         </div>
         <span className="text-[8px]" style={{ color: t.muted }}>
           248 photos
@@ -181,22 +140,6 @@ function MockHome({ t }: { t: StyleTokens }) {
             <line x1="48%" y1="22%" x2="48%" y2="62%" stroke={t.accent} strokeWidth="0.5" />
           </svg>
         </div>
-      ) : isKotel ? (
-        <div className="px-2.5 pb-2.5 space-y-1">
-          {/* masonry row: large Herodian course */}
-          <div className="grid grid-cols-3 gap-1">
-            <PhotoTile t={t} tone="A" label="note" />
-            <PhotoTile t={t} tone="B" />
-            <PhotoTile t={t} tone="C" />
-          </div>
-          {/* staggered second course */}
-          <div className="grid grid-cols-4 gap-1 pl-3">
-            <PhotoTile t={t} tone="B" />
-            <PhotoTile t={t} tone="A" />
-            <PhotoTile t={t} tone="C" />
-            <PhotoTile t={t} tone="B" />
-          </div>
-        </div>
       ) : (
         <div className={cn('grid grid-cols-3 px-2.5 pb-2.5', gap)}>
           <PhotoTile t={t} tone="A" label={t.vibe === 'festive' ? 'named' : undefined} />
@@ -207,7 +150,7 @@ function MockHome({ t }: { t: StyleTokens }) {
           <PhotoTile t={t} tone="A" />
         </div>
       )}
-      {(t.vibe === 'playful' || t.vibe === 'arcade') && (
+      {t.vibe === 'playful' || t.vibe === 'arcade' ? (
         <div
           className="mx-2.5 mb-2.5 px-2 py-1.5 flex items-center justify-between text-[9px] font-semibold"
           style={{
@@ -219,26 +162,12 @@ function MockHome({ t }: { t: StyleTokens }) {
           <span>{t.vibe === 'arcade' ? 'START DAILY MATCH' : 'Daily challenge · 3/5'}</span>
           <span>→</span>
         </div>
-      )}
-      {isKotel && (
-        <div
-          className="mx-2.5 mb-2.5 px-2 py-1.5 text-[9px] border"
-          style={{
-            borderColor: t.border,
-            background: `${t.surface}cc`,
-            borderRadius: '2px',
-            color: t.text,
-          }}
-        >
-          Place a name · like a note in the Wall
-        </div>
-      )}
+      ) : null}
     </div>
   );
 }
 
 function MockPhoto({ t }: { t: StyleTokens }) {
-  const isKotel = t.texture === 'kotel';
   return (
     <div style={shellStyle(t)} className="overflow-hidden text-left shadow-md">
       <HeaderBar t={t} title="Photo · Aug 2024" />
@@ -246,14 +175,8 @@ function MockPhoto({ t }: { t: StyleTokens }) {
         <div
           className="flex-1 aspect-[4/3] relative"
           style={{
-            backgroundColor: t.photoA,
-            backgroundImage: isKotel
-              ? `linear-gradient(180deg, rgba(255,245,220,0.1), rgba(40,28,16,0.15)), url(${KOTEL_TEXTURE})`
-              : `linear-gradient(145deg, ${t.photoA}, ${t.photoB})`,
-            backgroundSize: isKotel ? 'cover' : undefined,
-            backgroundPosition: isKotel ? 'center' : undefined,
+            background: `linear-gradient(145deg, ${t.photoA}, ${t.photoB})`,
             borderRadius: t.radius === '999px' ? '12px' : t.radius,
-            boxShadow: isKotel ? 'inset 0 0 0 1px rgba(55,40,25,0.4)' : undefined,
           }}
         >
           <div

viewer-frontend/app/styles/StylesPickerClient.tsx

@@ -81,7 +81,7 @@ export default function StylesPickerClient() {
           </h1>
           <p className="mt-3 text-muted-foreground leading-relaxed">
             Not just swatches — each direction shows Home, Photo, Search, Identify, Upload, and
-            Login. The six marked <span className="text-foreground font-medium">NEW</span> lean
+            Login. The four marked <span className="text-foreground font-medium">NEW</span> lean
             Jewish / Israel / Chabad: modern, calm, not flashy. Expand a style, then{' '}
             <strong>Pick this style</strong>.
           </p>

viewer-frontend/app/styles/styleOptions.ts

@@ -11,9 +11,7 @@ export type StyleId =
   | 'matchmaker-arcade'
   | 'parade-mosaic'
   | 'orbit-kin'
-  | 'jerusalem-stone'
   | 'chabad-blue'
-  | 'kotel-quiet'
   | 'olive-grove'
   | 'shabbat-linen'
   | 'tel-aviv-bauhaus';
@@ -35,8 +33,6 @@ export type StyleTokens = {
   body: string;
   density: 'airy' | 'cozy' | 'dense';
   vibe: 'editorial' | 'playful' | 'cinematic' | 'festive' | 'lab' | 'arcade';
-  /** Optional surface treatment for mockups (e.g. Kotel masonry). */
-  texture?: 'kotel' | 'none';
 };
 
 export type StyleOption = {
@@ -374,34 +370,6 @@ export const STYLES: StyleOption[] = [
       vibe: 'cinematic',
     },
   },
-  {
-    id: 'jerusalem-stone',
-    name: 'Jerusalem Stone',
-    tagline: 'Kotel courses — golden limestone',
-    whyComeBack: 'Browse against Herodian block courses: warm gold stone, soft mortar, faces first.',
-    fonts: 'Display: Frank Ruhl Libre · Body: Assistant',
-    mood: 'Western Wall masonry — sunlit gold limestone, not flat beige',
-    isNew: true,
-    tokens: {
-      bg: '#D4BC8A',
-      surface: '#E8D5A8',
-      text: '#2A2218',
-      muted: '#6B5A45',
-      accent: '#8B6F45',
-      accentText: '#FFF8E8',
-      border: 'rgba(42,34,24,0.28)',
-      chip: '#C9B078',
-      photoA: '#C9B078',
-      photoB: '#B89868',
-      photoC: '#8B7355',
-      radius: '2px',
-      display: '"Frank Ruhl Libre", Georgia, serif',
-      body: '"Assistant", system-ui, sans-serif',
-      density: 'cozy',
-      vibe: 'editorial',
-      texture: 'kotel',
-    },
-  },
   {
     id: 'chabad-blue',
     name: 'Chabad Blue',
@@ -429,34 +397,6 @@ export const STYLES: StyleOption[] = [
       vibe: 'editorial',
     },
   },
-  {
-    id: 'kotel-quiet',
-    name: 'Kotel Quiet',
-    tagline: 'Western Wall — notes in the cracks',
-    whyComeBack: 'Slow looking against massive courses: paper notes, soft names, no scoreboard.',
-    fonts: 'Display: David Libre · Body: Heebo',
-    mood: 'Heavy Herodian blocks, deep mortar, prayerful shadow',
-    isNew: true,
-    tokens: {
-      bg: '#C9B078',
-      surface: '#D4BC8A',
-      text: '#1F1A12',
-      muted: '#5C4A35',
-      accent: '#4A3A28',
-      accentText: '#F5EBD8',
-      border: 'rgba(31,26,18,0.32)',
-      chip: '#B89868',
-      photoA: '#B89868',
-      photoB: '#8B7355',
-      photoC: '#6B5640',
-      radius: '2px',
-      display: '"David Libre", Georgia, serif',
-      body: '"Heebo", system-ui, sans-serif',
-      density: 'cozy',
-      vibe: 'editorial',
-      texture: 'kotel',
-    },
-  },
   {
     id: 'olive-grove',
     name: 'Olive Grove',

viewer-frontend/public/brand/README.md

@@ -5,8 +5,6 @@
 | `jrcc-logo-light.png` | Top-left header in **light** mode (classic B&W bilingual) |
 | `jrcc-logo-dark.png` | Top-left header in **dark** mode (white bilingual, transparent) |
 | `jrcc-watermark.png` | Diagonal guest watermark on photos |
-| `kotel-stone-texture.jpg` | Western Wall limestone texture for style mockups |
-| `kotel-stone-tile.jpg` | Cropped tile of the same stone |
 | `../logo.png` | SSR / fallback copy of the light logo |
 
 Source PDFs (not committed): `JRCC Logo - Rus-Eng.pdf`, `JRCC Logo 1 - Vector.pdf`.