From ca6490d982449e56eb0be77094d7d88b5f03d316 Mon Sep 17 00:00:00 2001 From: Yisroel Baum Date: Mon, 22 Jun 2026 11:15:38 +0300 Subject: [PATCH 1/2] test pilzno brand alignment --- frontend/rabbi_gerzi/cypress/e2e/about.cy.ts | 6 +- .../rabbi_gerzi/cypress/e2e/contact.cy.ts | 4 +- frontend/rabbi_gerzi/cypress/e2e/home.cy.ts | 94 +++++++------------ frontend/rabbi_gerzi/cypress/e2e/media.cy.ts | 2 +- 4 files changed, 39 insertions(+), 67 deletions(-) diff --git a/frontend/rabbi_gerzi/cypress/e2e/about.cy.ts b/frontend/rabbi_gerzi/cypress/e2e/about.cy.ts index be249f8..5464354 100644 --- a/frontend/rabbi_gerzi/cypress/e2e/about.cy.ts +++ b/frontend/rabbi_gerzi/cypress/e2e/about.cy.ts @@ -8,12 +8,12 @@ describe('about page', () => { cy.contains('Torah Media').should('be.visible') cy.contains('About').should('be.visible') cy.contains('Contact').should('be.visible') - cy.contains('Donate').should('be.visible') + cy.contains('Invest in Pilzno').should('be.visible') }) cy.get('[data-cy="about-hero"]').within(() => { cy.contains('h1', 'About Rabbi Gerzi').should('be.visible') - cy.contains('Healthy, Integrated and Balanced Torah living') + cy.contains('Integrated Torah life') .should('be.visible') cy.get('[data-cy="about-hero-image"]') .should('be.visible') @@ -121,7 +121,7 @@ describe('about page', () => { cy.get('[data-cy="footer"]').within(() => { cy.contains('Torah Media').should('be.visible') cy.contains('About').should('be.visible') - cy.contains('Donate').should('be.visible') + cy.contains('Invest in Pilzno').should('be.visible') cy.contains('Contact').should('be.visible') cy.contains(/Rabbi Gerzi 2025/).should('be.visible') }) diff --git a/frontend/rabbi_gerzi/cypress/e2e/contact.cy.ts b/frontend/rabbi_gerzi/cypress/e2e/contact.cy.ts index ad066b2..d76f080 100644 --- a/frontend/rabbi_gerzi/cypress/e2e/contact.cy.ts +++ b/frontend/rabbi_gerzi/cypress/e2e/contact.cy.ts @@ -8,7 +8,7 @@ describe('contact page', () => { cy.contains('Torah Media').should('be.visible') cy.contains('About').should('be.visible') cy.contains('Contact').should('be.visible') - cy.contains('Donate').should('be.visible') + cy.contains('Invest in Pilzno').should('be.visible') }) cy.get('[data-cy="contact-hero"]').within(() => { @@ -111,7 +111,7 @@ describe('contact page', () => { cy.get('[data-cy="footer"]').within(() => { cy.contains('Torah Media').should('be.visible') cy.contains('About').should('be.visible') - cy.contains('Donate').should('be.visible') + cy.contains('Invest in Pilzno').should('be.visible') cy.contains('Contact').should('be.visible') cy.contains(/Rabbi Gerzi 2025/).should('be.visible') }) diff --git a/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts b/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts index e95938a..ed77143 100644 --- a/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts +++ b/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts @@ -8,14 +8,14 @@ describe('homepage hero', () => { cy.contains('Torah Media').should('be.visible') cy.contains('About').should('be.visible') cy.contains('Contact').should('be.visible') - cy.contains('Donate').should('be.visible') + cy.contains('Invest in Pilzno').should('be.visible') }) }) - it('links the navbar Donate item to Causematch', () => { + it('links the navbar investment item to Causematch', () => { const donateHref = 'https://causematch.com/pilzno_donate' - cy.contains('header.site-header a', 'Donate') + cy.contains('header.site-header a', 'Invest in Pilzno') .should('be.visible') .and('have.attr', 'href', donateHref) .and('have.attr', 'target', '_blank') @@ -30,74 +30,45 @@ describe('homepage hero', () => { cy.contains('Torah Media').should('be.visible') cy.contains('About').should('be.visible') cy.contains('Contact').should('be.visible') - cy.contains('Donate').should('be.visible') + cy.contains('Invest in Pilzno').should('be.visible') }) cy.contains('h1', 'Torah Media').should('be.visible') }) - it('renders the hero headline with italic emphasis', () => { + it('renders the Rabbi Gerzi hero in Pilzno language', () => { cy.get('[data-cy="hero"]').within(() => { - cy.contains('upgrade our lives').should('be.visible') - cy.contains('em', 'healthy').should('be.visible') - cy.contains('em', 'integrated').should('be.visible') - cy.contains('em', 'balanced').should('be.visible') - cy.contains('Torah existence').should('be.visible') - cy.contains('Rabbi Yehoshua Gerzi').should('be.visible') + cy.contains('PILZNO').should('be.visible') + cy.contains('RAMAT BET SHEMESH').should('be.visible') + cy.contains('h1', 'Rabbi Yehoshua Gerzi').should('be.visible') + cy.contains('Create Geula').should('be.visible') + cy.contains('Elevate Life').should('be.visible') + cy.contains('Geula mindset').should('be.visible') + cy.contains('Integrated Torah life').should('be.visible') }) }) - it('renders the rabbi portrait image', () => { - cy.get('[data-cy="hero-portrait"]') + it('renders the rabbi portrait image in the brand hero', () => { + cy.get('[data-cy="hero-rabbi-portrait"]') .should('be.visible') .and('have.attr', 'alt') .and('match', /Rabbi Yehoshua Gerzi/i) }) - it('lets the rabbi portrait rise above the circular frame', () => { - cy.get('[data-cy="hero-portrait"]').then( - (portraitElements) => { - const portraitImage = portraitElements[0] - const frameElement = portraitImage.parentElement + it('uses Pilzno brand colors and typography tokens', () => { + cy.get('[data-cy="hero"]').then((heroElements) => { + const heroStyle = getComputedStyle(heroElements[0]) + const documentStyle = getComputedStyle(document.documentElement) - if (frameElement === null) { - throw new Error('Portrait frame is missing') - } - - const frameStyle = getComputedStyle(frameElement) - - expect(frameStyle.overflowX).to.equal('visible') - expect(frameStyle.overflowY).to.equal('visible') - expect(portraitImage.getBoundingClientRect().top).to.be.lessThan( - frameElement.getBoundingClientRect().top, - ) - }, - ) - }) - - it('extends the circular background to the portrait base edges', () => { - cy.get('[data-cy="hero-portrait"]').then( - (portraitElements) => { - const portraitImage = portraitElements[0] - const frameElement = portraitImage.parentElement - - if (frameElement === null) { - throw new Error('Portrait frame is missing') - } - - const portraitBounds = portraitImage.getBoundingClientRect() - const frameBounds = frameElement.getBoundingClientRect() - const backgroundStyle = getComputedStyle(frameElement, '::before') - const backgroundWidth = Number.parseFloat(backgroundStyle.width) - const backgroundLeft = - frameBounds.left + (frameBounds.width - backgroundWidth) / 2 - const backgroundRight = backgroundLeft + backgroundWidth - - expect(backgroundStyle.content).to.not.equal('none') - expect(backgroundWidth).to.be.closeTo(portraitBounds.width, 1) - expect(backgroundLeft).to.be.closeTo(portraitBounds.left, 1) - expect(backgroundRight).to.be.closeTo(portraitBounds.right, 1) - }, - ) + expect(documentStyle.getPropertyValue('--color-brand-purple').trim()) + .to.equal('#2a1f3d') + expect(documentStyle.getPropertyValue('--color-gold').trim()) + .to.equal('#c9a84c') + expect(documentStyle.getPropertyValue('--font-display').trim()) + .to.contain('Cormorant Garamond') + expect(documentStyle.getPropertyValue('--font-ui').trim()) + .to.contain('Jost') + expect(heroStyle.backgroundColor).to.equal('rgb(42, 31, 61)') + }) }) }) @@ -112,8 +83,9 @@ describe('homepage discover path section', () => { .should('be.visible') cy.contains('Rabbi Yehoshua Gerzi has dedicated his life') .should('be.visible') - cy.contains('Healthy, Integrated and Balanced Torah Living') + cy.contains('Integrated Torah life') .should('be.visible') + cy.contains('Geula mindset').should('be.visible') cy.contains('Ramat Beit Shemesh').should('be.visible') cy.contains('Pilzno Institute of Higher Learning').should('be.visible') }) @@ -577,16 +549,16 @@ describe('homepage get involved and footer', () => { cy.get('[data-cy="footer"]').within(() => { cy.contains('Torah Media').should('be.visible') cy.contains('About').should('be.visible') - cy.contains('Donate').should('be.visible') + cy.contains('Invest in Pilzno').should('be.visible') cy.contains('Contact').should('be.visible') cy.contains(/Rabbi Gerzi 2025/).should('be.visible') }) }) - it('links the footer Donate item to Causematch', () => { + it('links the footer investment item to Causematch', () => { const donateHref = 'https://causematch.com/pilzno_donate' - cy.contains('[data-cy="footer"] a', 'Donate') + cy.contains('[data-cy="footer"] a', 'Invest in Pilzno') .should('be.visible') .and('have.attr', 'href', donateHref) .and('have.attr', 'target', '_blank') diff --git a/frontend/rabbi_gerzi/cypress/e2e/media.cy.ts b/frontend/rabbi_gerzi/cypress/e2e/media.cy.ts index 805be28..3f884db 100644 --- a/frontend/rabbi_gerzi/cypress/e2e/media.cy.ts +++ b/frontend/rabbi_gerzi/cypress/e2e/media.cy.ts @@ -9,7 +9,7 @@ describe('media page sets', () => { cy.contains('Torah Media').should('be.visible') cy.contains('About').should('be.visible') cy.contains('Contact').should('be.visible') - cy.contains('Donate').should('be.visible') + cy.contains('Invest in Pilzno').should('be.visible') }) cy.contains('h1', 'Torah Media').should('be.visible') cy.get('[data-cy="media-set-grid"]').should('be.visible') From b6fe734ccb38c36ef76ff8e71f875e872c69f167 Mon Sep 17 00:00:00 2001 From: Yisroel Baum Date: Mon, 22 Jun 2026 11:28:35 +0300 Subject: [PATCH 2/2] align pilzno brand design --- frontend/rabbi_gerzi/cypress/e2e/home.cy.ts | 3 +- frontend/rabbi_gerzi/index.html | 2 +- frontend/rabbi_gerzi/src/assets/global.css | 35 ++- .../src/components/ElementParentLink.vue | 2 +- .../components/ElementSiblingNavigation.vue | 4 +- .../src/components/RichTextEditor.vue | 28 +- .../rabbi_gerzi/src/components/SiteFooter.vue | 68 +++-- .../rabbi_gerzi/src/components/SiteHeader.vue | 110 +++++--- frontend/rabbi_gerzi/src/views/AboutPage.vue | 64 ++--- .../src/views/AdminElementPage.vue | 29 +- .../rabbi_gerzi/src/views/ContactPage.vue | 36 +-- .../rabbi_gerzi/src/views/ElementPage.vue | 45 +-- frontend/rabbi_gerzi/src/views/HomePage.vue | 265 +++++++++--------- frontend/rabbi_gerzi/src/views/LoginPage.vue | 15 +- frontend/rabbi_gerzi/src/views/MediaPage.vue | 26 +- 15 files changed, 401 insertions(+), 331 deletions(-) diff --git a/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts b/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts index ed77143..bdeb13f 100644 --- a/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts +++ b/frontend/rabbi_gerzi/cypress/e2e/home.cy.ts @@ -57,7 +57,8 @@ describe('homepage hero', () => { it('uses Pilzno brand colors and typography tokens', () => { cy.get('[data-cy="hero"]').then((heroElements) => { const heroStyle = getComputedStyle(heroElements[0]) - const documentStyle = getComputedStyle(document.documentElement) + const appDocument = heroElements[0].ownerDocument + const documentStyle = getComputedStyle(appDocument.documentElement) expect(documentStyle.getPropertyValue('--color-brand-purple').trim()) .to.equal('#2a1f3d') diff --git a/frontend/rabbi_gerzi/index.html b/frontend/rabbi_gerzi/index.html index 93c0fb1..62fd8a6 100644 --- a/frontend/rabbi_gerzi/index.html +++ b/frontend/rabbi_gerzi/index.html @@ -12,7 +12,7 @@ diff --git a/frontend/rabbi_gerzi/src/assets/global.css b/frontend/rabbi_gerzi/src/assets/global.css index 759e690..c9ff3b7 100644 --- a/frontend/rabbi_gerzi/src/assets/global.css +++ b/frontend/rabbi_gerzi/src/assets/global.css @@ -1,14 +1,27 @@ :root { - --color-cream: #f4efe1; - --color-slate: #2b3f4e; - --color-slate-dark: #213240; - --color-olive: #5e6b4c; - --color-text: #1f1f1f; - --color-text-muted: #5a5a5a; - --color-white: #ffffff; - --color-border: #e6e1d2; - --font-serif: 'Merriweather', Georgia, serif; - --font-sans: 'Inter', system-ui, -apple-system, sans-serif; + --color-brand-purple: #2a1f3d; + --color-brand-purple-dark: #20182f; + --color-gold: #c9a84c; + --color-cream: #faf9f5; + --color-light-bg: #f5f2ec; + --color-body-text: #3d3530; + --color-text: var(--color-body-text); + --color-text-muted: #756b62; + --color-border: #ded6c8; + --color-white: var(--color-cream); + --color-slate: var(--color-brand-purple); + --color-slate-dark: var(--color-brand-purple-dark); + --color-olive: var(--color-gold); + --color-pillar-physical: #dce6d4; + --color-pillar-relationships: #e8d8d4; + --color-pillar-wisdom: #dbd6e8; + --color-pillar-guidance: #d0dce8; + --font-display: 'Cormorant Garamond', Georgia, serif; + --font-ui: 'Jost', system-ui, -apple-system, sans-serif; + --font-hebrew: 'Frank Ruhl Libre', serif; + --font-quote: 'Lora', Georgia, serif; + --font-serif: var(--font-display); + --font-sans: var(--font-ui); } * { @@ -21,7 +34,7 @@ body { padding: 0; font-family: var(--font-sans); color: var(--color-text); - background: var(--color-white); + background: var(--color-cream); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } diff --git a/frontend/rabbi_gerzi/src/components/ElementParentLink.vue b/frontend/rabbi_gerzi/src/components/ElementParentLink.vue index f105b68..9baafea 100644 --- a/frontend/rabbi_gerzi/src/components/ElementParentLink.vue +++ b/frontend/rabbi_gerzi/src/components/ElementParentLink.vue @@ -34,7 +34,7 @@ defineProps() gap: 0.35rem; min-height: 2.2rem; padding: 0.35rem 0; - color: var(--color-slate); + color: var(--color-brand-purple); font-family: var(--font-sans); font-size: 0.9rem; font-weight: 600; diff --git a/frontend/rabbi_gerzi/src/components/ElementSiblingNavigation.vue b/frontend/rabbi_gerzi/src/components/ElementSiblingNavigation.vue index 7eaa976..56ba23f 100644 --- a/frontend/rabbi_gerzi/src/components/ElementSiblingNavigation.vue +++ b/frontend/rabbi_gerzi/src/components/ElementSiblingNavigation.vue @@ -127,8 +127,8 @@ function siblingElementAtOffset(offset: number): ChildElement | null { .element-sibling-navigation__link:hover, .element-sibling-navigation__link:focus-visible { - border-color: var(--color-slate); - color: var(--color-slate); + border-color: var(--color-brand-purple); + color: var(--color-brand-purple); } .element-sibling-navigation__link:focus-visible { diff --git a/frontend/rabbi_gerzi/src/components/RichTextEditor.vue b/frontend/rabbi_gerzi/src/components/RichTextEditor.vue index 7fef966..5f8f7ab 100644 --- a/frontend/rabbi_gerzi/src/components/RichTextEditor.vue +++ b/frontend/rabbi_gerzi/src/components/RichTextEditor.vue @@ -775,11 +775,11 @@ function deleteTable(): void { overflow: hidden; border: 1px solid var(--color-border); border-radius: 4px; - background: var(--color-white); + background: var(--color-cream); } .rich-text-editor:focus-within { - border-color: var(--color-slate); + border-color: var(--color-brand-purple); } .rich-text-editor__toolbar { @@ -789,7 +789,7 @@ function deleteTable(): void { gap: 0.45rem; padding: 0.55rem; border-bottom: 1px solid var(--color-border); - background: #fbfaf6; + background: var(--color-light-bg); } .rich-text-editor__select { @@ -798,7 +798,7 @@ function deleteTable(): void { border: 1px solid var(--color-border); border-radius: 4px; color: var(--color-text); - background: var(--color-white); + background: var(--color-cream); font-family: var(--font-sans); font-size: 0.86rem; } @@ -808,7 +808,7 @@ function deleteTable(): void { overflow: hidden; border: 1px solid var(--color-border); border-radius: 4px; - background: var(--color-white); + background: var(--color-cream); } .rich-text-editor__button { @@ -833,7 +833,7 @@ function deleteTable(): void { .rich-text-editor__button:focus-visible, .rich-text-editor__button--active { color: var(--color-white); - background: var(--color-slate); + background: var(--color-brand-purple); outline: none; } @@ -844,7 +844,7 @@ function deleteTable(): void { } .rich-text-editor__content { - background: var(--color-white); + background: var(--color-cream); } .rich-text-editor__content :deep(.rich-text-editor__surface) { @@ -869,8 +869,8 @@ function deleteTable(): void { .rich-text-editor__content :deep(h3), .rich-text-editor__content :deep(h4) { margin: 1.1rem 0 0.45rem; - color: #2c2c2c; - font-family: var(--font-serif); + color: var(--color-brand-purple); + font-family: var(--font-display); font-weight: 500; line-height: 1.25; } @@ -900,17 +900,19 @@ function deleteTable(): void { .rich-text-editor__content :deep(blockquote) { margin: 1rem 0; padding: 0.1rem 0 0.1rem 1rem; - border-left: 3px solid var(--color-olive); + border-left: 3px solid var(--color-gold); color: var(--color-text-muted); + font-family: var(--font-quote); + font-style: italic; } .rich-text-editor__content :deep(mark) { padding: 0 0.16em; - background: #fff3a7; + background: rgb(201 168 76 / 28%); } .rich-text-editor__content :deep(a) { - color: var(--color-slate); + color: var(--color-brand-purple); font-weight: 600; text-decoration: underline; text-underline-offset: 0.16em; @@ -943,7 +945,7 @@ function deleteTable(): void { } .rich-text-editor__content :deep(th) { - background: #f6f3eb; + background: var(--color-light-bg); font-weight: 700; } diff --git a/frontend/rabbi_gerzi/src/components/SiteFooter.vue b/frontend/rabbi_gerzi/src/components/SiteFooter.vue index f2ea224..e32bd9b 100644 --- a/frontend/rabbi_gerzi/src/components/SiteFooter.vue +++ b/frontend/rabbi_gerzi/src/components/SiteFooter.vue @@ -17,11 +17,6 @@ interface ExternalFooterLink { type FooterLink = RouteFooterLink | ExternalFooterLink -const signatureImage = { - src: '/assets/signature.png', - alt: "R' Yehoshua Gerzi", -} - const socialGlyphs: Record = { YouTube: '▶', Spotify: '♫', @@ -43,7 +38,7 @@ const footerLinkColumns: FooterLink[][] = [ [ { kind: 'external', - label: 'Donate', + label: 'Invest in Pilzno', linkAttributes: donateLinkAttributes, }, { kind: 'route', label: 'Contact', to: '/contact' }, @@ -55,7 +50,13 @@ const footerLinkColumns: FooterLink[][] = [