yisroelbaum/Rabbi_Gerzi
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: yisroelbaum:b6982433cadf1f088cf43cb2d6262af5949b40f2
Branches Tags
yisroelbaum:master
..
compare: yisroelbaum:a56649dc0bfb4f355a454ffc88933d5291ae661c
Branches Tags
yisroelbaum:master

No commits in common. "b6982433cadf1f088cf43cb2d6262af5949b40f2" and "a56649dc0bfb4f355a454ffc88933d5291ae661c" have entirely different histories.
b6982433ca ... a56649dc0b

18 changed files with 395 additions and 437 deletions
Download patch file Download diff file Expand all files Collapse all files

6
frontend/rabbi_gerzi/cypress/e2e/about.cy.ts
View file

@ -8,12 +8,12 @@ describe('about page', () => {
cy.contains('Torah Media').should('be.visible') cy.contains('Torah Media').should('be.visible')
cy.contains('About').should('be.visible') cy.contains('About').should('be.visible')
cy.contains('Contact').should('be.visible') cy.contains('Contact').should('be.visible')
cy.contains('Invest in Pilzno').should('be.visible') cy.contains('Donate').should('be.visible')
}) })
cy.get('[data-cy="about-hero"]').within(() => { cy.get('[data-cy="about-hero"]').within(() => {
cy.contains('h1', 'About Rabbi Gerzi').should('be.visible') cy.contains('h1', 'About Rabbi Gerzi').should('be.visible')
cy.contains('Integrated Torah life') cy.contains('Healthy, Integrated and Balanced Torah living')
.should('be.visible') .should('be.visible')
cy.get('[data-cy="about-hero-image"]') cy.get('[data-cy="about-hero-image"]')
.should('be.visible') .should('be.visible')
@ -121,7 +121,7 @@ describe('about page', () => {
cy.get('[data-cy="footer"]').within(() => { cy.get('[data-cy="footer"]').within(() => {
cy.contains('Torah Media').should('be.visible') cy.contains('Torah Media').should('be.visible')
cy.contains('About').should('be.visible') cy.contains('About').should('be.visible')
cy.contains('Invest in Pilzno').should('be.visible') cy.contains('Donate').should('be.visible')
cy.contains('Contact').should('be.visible') cy.contains('Contact').should('be.visible')
cy.contains(/Rabbi Gerzi 2025/).should('be.visible') cy.contains(/Rabbi Gerzi 2025/).should('be.visible')
}) })

4
frontend/rabbi_gerzi/cypress/e2e/contact.cy.ts
View file

@ -8,7 +8,7 @@ describe('contact page', () => {
cy.contains('Torah Media').should('be.visible') cy.contains('Torah Media').should('be.visible')
cy.contains('About').should('be.visible') cy.contains('About').should('be.visible')
cy.contains('Contact').should('be.visible') cy.contains('Contact').should('be.visible')
cy.contains('Invest in Pilzno').should('be.visible') cy.contains('Donate').should('be.visible')
}) })
cy.get('[data-cy="contact-hero"]').within(() => { cy.get('[data-cy="contact-hero"]').within(() => {
@ -111,7 +111,7 @@ describe('contact page', () => {
cy.get('[data-cy="footer"]').within(() => { cy.get('[data-cy="footer"]').within(() => {
cy.contains('Torah Media').should('be.visible') cy.contains('Torah Media').should('be.visible')
cy.contains('About').should('be.visible') cy.contains('About').should('be.visible')
cy.contains('Invest in Pilzno').should('be.visible') cy.contains('Donate').should('be.visible')
cy.contains('Contact').should('be.visible') cy.contains('Contact').should('be.visible')
cy.contains(/Rabbi Gerzi 2025/).should('be.visible') cy.contains(/Rabbi Gerzi 2025/).should('be.visible')
}) })

95
frontend/rabbi_gerzi/cypress/e2e/home.cy.ts
View file

@ -8,14 +8,14 @@ describe('homepage hero', () => {
cy.contains('Torah Media').should('be.visible') cy.contains('Torah Media').should('be.visible')
cy.contains('About').should('be.visible') cy.contains('About').should('be.visible')
cy.contains('Contact').should('be.visible') cy.contains('Contact').should('be.visible')
cy.contains('Invest in Pilzno').should('be.visible') cy.contains('Donate').should('be.visible')
}) })
}) })
it('links the navbar investment item to Causematch', () => { it('links the navbar Donate item to Causematch', () => {
const donateHref = 'https://causematch.com/pilzno_donate' const donateHref = 'https://causematch.com/pilzno_donate'
cy.contains('header.site-header a', 'Invest in Pilzno') cy.contains('header.site-header a', 'Donate')
.should('be.visible') .should('be.visible')
.and('have.attr', 'href', donateHref) .and('have.attr', 'href', donateHref)
.and('have.attr', 'target', '_blank') .and('have.attr', 'target', '_blank')
@ -30,46 +30,74 @@ describe('homepage hero', () => {
cy.contains('Torah Media').should('be.visible') cy.contains('Torah Media').should('be.visible')
cy.contains('About').should('be.visible') cy.contains('About').should('be.visible')
cy.contains('Contact').should('be.visible') cy.contains('Contact').should('be.visible')
cy.contains('Invest in Pilzno').should('be.visible') cy.contains('Donate').should('be.visible')
}) })
cy.contains('h1', 'Torah Media').should('be.visible') cy.contains('h1', 'Torah Media').should('be.visible')
}) })
it('renders the Rabbi Gerzi hero in Pilzno language', () => { it('renders the hero headline with italic emphasis', () => {
cy.get('[data-cy="hero"]').within(() => { cy.get('[data-cy="hero"]').within(() => {
cy.contains('PILZNO').should('be.visible') cy.contains('upgrade our lives').should('be.visible')
cy.contains('RAMAT BET SHEMESH').should('be.visible') cy.contains('em', 'healthy').should('be.visible')
cy.contains('h1', 'Rabbi Yehoshua Gerzi').should('be.visible') cy.contains('em', 'integrated').should('be.visible')
cy.contains('Create Geula').should('be.visible') cy.contains('em', 'balanced').should('be.visible')
cy.contains('Elevate Life').should('be.visible') cy.contains('Torah existence').should('be.visible')
cy.contains('Geula mindset').should('be.visible') cy.contains('Rabbi Yehoshua Gerzi').should('be.visible')
cy.contains('Integrated Torah life').should('be.visible')
}) })
}) })
it('renders the rabbi portrait image in the brand hero', () => { it('renders the rabbi portrait image', () => {
cy.get('[data-cy="hero-rabbi-portrait"]') cy.get('[data-cy="hero-portrait"]')
.should('be.visible') .should('be.visible')
.and('have.attr', 'alt') .and('have.attr', 'alt')
.and('match', /Rabbi Yehoshua Gerzi/i) .and('match', /Rabbi Yehoshua Gerzi/i)
}) })
it('uses Pilzno brand colors and typography tokens', () => { it('lets the rabbi portrait rise above the circular frame', () => {
cy.get('[data-cy="hero"]').then((heroElements) => { cy.get<HTMLImageElement>('[data-cy="hero-portrait"]').then(
const heroStyle = getComputedStyle(heroElements[0]) (portraitElements) => {
const appDocument = heroElements[0].ownerDocument const portraitImage = portraitElements[0]
const documentStyle = getComputedStyle(appDocument.documentElement) const frameElement = portraitImage.parentElement
expect(documentStyle.getPropertyValue('--color-brand-purple').trim()) if (frameElement === null) {
.to.equal('#2a1f3d') throw new Error('Portrait frame is missing')
expect(documentStyle.getPropertyValue('--color-gold').trim()) }
.to.equal('#c9a84c')
expect(documentStyle.getPropertyValue('--font-display').trim()) const frameStyle = getComputedStyle(frameElement)
.to.contain('Cormorant Garamond')
expect(documentStyle.getPropertyValue('--font-ui').trim()) expect(frameStyle.overflowX).to.equal('visible')
.to.contain('Jost') expect(frameStyle.overflowY).to.equal('visible')
expect(heroStyle.backgroundColor).to.equal('rgb(42, 31, 61)') expect(portraitImage.getBoundingClientRect().top).to.be.lessThan(
}) frameElement.getBoundingClientRect().top,
)
},
)
})
it('extends the circular background to the portrait base edges', () => {
cy.get<HTMLImageElement>('[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)
},
)
}) })
}) })
@ -84,9 +112,8 @@ describe('homepage discover path section', () => {
.should('be.visible') .should('be.visible')
cy.contains('Rabbi Yehoshua Gerzi has dedicated his life') cy.contains('Rabbi Yehoshua Gerzi has dedicated his life')
.should('be.visible') .should('be.visible')
cy.contains('Integrated Torah life') cy.contains('Healthy, Integrated and Balanced Torah Living')
.should('be.visible') .should('be.visible')
cy.contains('Geula mindset').should('be.visible')
cy.contains('Ramat Beit Shemesh').should('be.visible') cy.contains('Ramat Beit Shemesh').should('be.visible')
cy.contains('Pilzno Institute of Higher Learning').should('be.visible') cy.contains('Pilzno Institute of Higher Learning').should('be.visible')
}) })
@ -550,16 +577,16 @@ describe('homepage get involved and footer', () => {
cy.get('[data-cy="footer"]').within(() => { cy.get('[data-cy="footer"]').within(() => {
cy.contains('Torah Media').should('be.visible') cy.contains('Torah Media').should('be.visible')
cy.contains('About').should('be.visible') cy.contains('About').should('be.visible')
cy.contains('Invest in Pilzno').should('be.visible') cy.contains('Donate').should('be.visible')
cy.contains('Contact').should('be.visible') cy.contains('Contact').should('be.visible')
cy.contains(/Rabbi Gerzi 2025/).should('be.visible') cy.contains(/Rabbi Gerzi 2025/).should('be.visible')
}) })
}) })
it('links the footer investment item to Causematch', () => { it('links the footer Donate item to Causematch', () => {
const donateHref = 'https://causematch.com/pilzno_donate' const donateHref = 'https://causematch.com/pilzno_donate'
cy.contains('[data-cy="footer"] a', 'Invest in Pilzno') cy.contains('[data-cy="footer"] a', 'Donate')
.should('be.visible') .should('be.visible')
.and('have.attr', 'href', donateHref) .and('have.attr', 'href', donateHref)
.and('have.attr', 'target', '_blank') .and('have.attr', 'target', '_blank')

2
frontend/rabbi_gerzi/cypress/e2e/media.cy.ts
View file

@ -9,7 +9,7 @@ describe('media page sets', () => {
cy.contains('Torah Media').should('be.visible') cy.contains('Torah Media').should('be.visible')
cy.contains('About').should('be.visible') cy.contains('About').should('be.visible')
cy.contains('Contact').should('be.visible') cy.contains('Contact').should('be.visible')
cy.contains('Invest in Pilzno').should('be.visible') cy.contains('Donate').should('be.visible')
}) })
cy.contains('h1', 'Torah Media').should('be.visible') cy.contains('h1', 'Torah Media').should('be.visible')
cy.get('[data-cy="media-set-grid"]').should('be.visible') cy.get('[data-cy="media-set-grid"]').should('be.visible')

2
frontend/rabbi_gerzi/index.html
View file

@ -12,7 +12,7 @@
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link <link
href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Frank+Ruhl+Libre:wght@400;500&family=Jost:wght@300;400;500;600;700&family=Lora:ital,wght@1,400;1,500&display=swap" href="https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,700&family=Inter:wght@400;500;600;700&display=swap"
rel="stylesheet" rel="stylesheet"
> >
</head> </head>

35
frontend/rabbi_gerzi/src/assets/global.css
View file

@ -1,27 +1,14 @@
:root { :root {
--color-brand-purple: #2a1f3d; --color-cream: #f4efe1;
--color-brand-purple-dark: #20182f; --color-slate: #2b3f4e;
--color-gold: #c9a84c; --color-slate-dark: #213240;
--color-cream: #faf9f5; --color-olive: #5e6b4c;
--color-light-bg: #f5f2ec; --color-text: #1f1f1f;
--color-body-text: #3d3530; --color-text-muted: #5a5a5a;
--color-text: var(--color-body-text); --color-white: #ffffff;
--color-text-muted: #756b62; --color-border: #e6e1d2;
--color-border: #ded6c8; --font-serif: 'Merriweather', Georgia, serif;
--color-white: var(--color-cream); --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
--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);
} }
* { * {
@ -34,7 +21,7 @@ body {
padding: 0; padding: 0;
font-family: var(--font-sans); font-family: var(--font-sans);
color: var(--color-text); color: var(--color-text);
background: var(--color-cream); background: var(--color-white);
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }

2
frontend/rabbi_gerzi/src/components/ElementParentLink.vue
View file

@ -34,7 +34,7 @@ defineProps<Props>()
gap: 0.35rem; gap: 0.35rem;
min-height: 2.2rem; min-height: 2.2rem;
padding: 0.35rem 0; padding: 0.35rem 0;
color: var(--color-brand-purple); color: var(--color-slate);
font-family: var(--font-sans); font-family: var(--font-sans);
font-size: 0.9rem; font-size: 0.9rem;
font-weight: 600; font-weight: 600;

4
frontend/rabbi_gerzi/src/components/ElementSiblingNavigation.vue
View file

@ -127,8 +127,8 @@ function siblingElementAtOffset(offset: number): ChildElement | null {
.element-sibling-navigation__link:hover, .element-sibling-navigation__link:hover,
.element-sibling-navigation__link:focus-visible { .element-sibling-navigation__link:focus-visible {
border-color: var(--color-brand-purple); border-color: var(--color-slate);
color: var(--color-brand-purple); color: var(--color-slate);
} }
.element-sibling-navigation__link:focus-visible { .element-sibling-navigation__link:focus-visible {

28
frontend/rabbi_gerzi/src/components/RichTextEditor.vue
View file

@ -775,11 +775,11 @@ function deleteTable(): void {
overflow: hidden; overflow: hidden;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 4px; border-radius: 4px;
background: var(--color-cream); background: var(--color-white);
} }
.rich-text-editor:focus-within { .rich-text-editor:focus-within {
border-color: var(--color-brand-purple); border-color: var(--color-slate);
} }
.rich-text-editor__toolbar { .rich-text-editor__toolbar {
@ -789,7 +789,7 @@ function deleteTable(): void {
gap: 0.45rem; gap: 0.45rem;
padding: 0.55rem; padding: 0.55rem;
border-bottom: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
background: var(--color-light-bg); background: #fbfaf6;
} }
.rich-text-editor__select { .rich-text-editor__select {
@ -798,7 +798,7 @@ function deleteTable(): void {
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 4px; border-radius: 4px;
color: var(--color-text); color: var(--color-text);
background: var(--color-cream); background: var(--color-white);
font-family: var(--font-sans); font-family: var(--font-sans);
font-size: 0.86rem; font-size: 0.86rem;
} }
@ -808,7 +808,7 @@ function deleteTable(): void {
overflow: hidden; overflow: hidden;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 4px; border-radius: 4px;
background: var(--color-cream); background: var(--color-white);
} }
.rich-text-editor__button { .rich-text-editor__button {
@ -833,7 +833,7 @@ function deleteTable(): void {
.rich-text-editor__button:focus-visible, .rich-text-editor__button:focus-visible,
.rich-text-editor__button--active { .rich-text-editor__button--active {
color: var(--color-white); color: var(--color-white);
background: var(--color-brand-purple); background: var(--color-slate);
outline: none; outline: none;
} }
@ -844,7 +844,7 @@ function deleteTable(): void {
} }
.rich-text-editor__content { .rich-text-editor__content {
background: var(--color-cream); background: var(--color-white);
} }
.rich-text-editor__content :deep(.rich-text-editor__surface) { .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(h3),
.rich-text-editor__content :deep(h4) { .rich-text-editor__content :deep(h4) {
margin: 1.1rem 0 0.45rem; margin: 1.1rem 0 0.45rem;
color: var(--color-brand-purple); color: #2c2c2c;
font-family: var(--font-display); font-family: var(--font-serif);
font-weight: 500; font-weight: 500;
line-height: 1.25; line-height: 1.25;
} }
@ -900,19 +900,17 @@ function deleteTable(): void {
.rich-text-editor__content :deep(blockquote) { .rich-text-editor__content :deep(blockquote) {
margin: 1rem 0; margin: 1rem 0;
padding: 0.1rem 0 0.1rem 1rem; padding: 0.1rem 0 0.1rem 1rem;
border-left: 3px solid var(--color-gold); border-left: 3px solid var(--color-olive);
color: var(--color-text-muted); color: var(--color-text-muted);
font-family: var(--font-quote);
font-style: italic;
} }
.rich-text-editor__content :deep(mark) { .rich-text-editor__content :deep(mark) {
padding: 0 0.16em; padding: 0 0.16em;
background: rgb(201 168 76 / 28%); background: #fff3a7;
} }
.rich-text-editor__content :deep(a) { .rich-text-editor__content :deep(a) {
color: var(--color-brand-purple); color: var(--color-slate);
font-weight: 600; font-weight: 600;
text-decoration: underline; text-decoration: underline;
text-underline-offset: 0.16em; text-underline-offset: 0.16em;
@ -945,7 +943,7 @@ function deleteTable(): void {
} }
.rich-text-editor__content :deep(th) { .rich-text-editor__content :deep(th) {
background: var(--color-light-bg); background: #f6f3eb;
font-weight: 700; font-weight: 700;
} }

68
frontend/rabbi_gerzi/src/components/SiteFooter.vue
View file

@ -17,6 +17,11 @@ interface ExternalFooterLink {
type FooterLink = RouteFooterLink | ExternalFooterLink type FooterLink = RouteFooterLink | ExternalFooterLink
const signatureImage = {
src: '/assets/signature.png',
alt: "R' Yehoshua Gerzi",
}
const socialGlyphs: Record<SocialLinkLabel, string> = { const socialGlyphs: Record<SocialLinkLabel, string> = {
YouTube: '▶', YouTube: '▶',
Spotify: '♫', Spotify: '♫',
@ -38,7 +43,7 @@ const footerLinkColumns: FooterLink[][] = [
[ [
{ {
kind: 'external', kind: 'external',
label: 'Invest in Pilzno', label: 'Donate',
linkAttributes: donateLinkAttributes, linkAttributes: donateLinkAttributes,
}, },
{ kind: 'route', label: 'Contact', to: '/contact' }, { kind: 'route', label: 'Contact', to: '/contact' },
@ -50,13 +55,7 @@ const footerLinkColumns: FooterLink[][] = [
<footer class="site-footer" data-cy="footer"> <footer class="site-footer" data-cy="footer">
<div class="site-footer__inner"> <div class="site-footer__inner">
<div class="site-footer__brand"> <div class="site-footer__brand">
<RouterLink class="site-footer__brand-link" to="/"> <img v-bind="signatureImage" class="site-footer__signature" />
<span class="site-footer__brand-title">Rabbi Yehoshua Gerzi</span>
<span class="site-footer__brand-context">
PILZNO · RAMAT BET SHEMESH
</span>
</RouterLink>
<p class="site-footer__tagline">Create Geula · Elevate Life</p>
<div class="site-footer__social"> <div class="site-footer__social">
<a <a
v-for="socialLink in footerSocialLinks" v-for="socialLink in footerSocialLinks"
@ -95,8 +94,7 @@ const footerLinkColumns: FooterLink[][] = [
<style scoped> <style scoped>
.site-footer { .site-footer {
padding: 4rem 2rem 2rem; padding: 4rem 2rem 2rem;
color: var(--color-cream); background: var(--color-white);
background: var(--color-brand-purple);
border-top: 1px solid var(--color-border); border-top: 1px solid var(--color-border);
} }
@ -115,40 +113,9 @@ const footerLinkColumns: FooterLink[][] = [
gap: 1rem; gap: 1rem;
} }
.site-footer__brand-link { .site-footer__signature {
display: flex; width: auto;
flex-direction: column; height: 40px;
gap: 0.15rem;
}
.site-footer__brand-title {
color: var(--color-cream);
font-family: var(--font-display);
font-size: 1.55rem;
font-weight: 500;
line-height: 1;
}
.site-footer__brand-context,
.site-footer__tagline {
color: rgb(250 249 245 / 72%);
font-family: var(--font-sans);
}
.site-footer__brand-context {
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.08em;
line-height: 1.2;
text-transform: uppercase;
}
.site-footer__tagline {
margin: 0;
color: var(--color-gold);
font-family: var(--font-quote);
font-size: 1rem;
font-style: italic;
} }
.site-footer__social { .site-footer__social {
@ -162,14 +129,13 @@ const footerLinkColumns: FooterLink[][] = [
justify-content: center; justify-content: center;
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
color: var(--color-cream); color: var(--color-text-muted);
border: 1px solid rgb(201 168 76 / 72%); border: 1px solid var(--color-border);
border-radius: 6px; border-radius: 6px;
} }
.site-footer__social-link:hover { .site-footer__social-link:hover {
color: var(--color-brand-purple); background: var(--color-cream);
background: var(--color-gold);
} }
.site-footer__links { .site-footer__links {
@ -188,18 +154,18 @@ const footerLinkColumns: FooterLink[][] = [
} }
.site-footer__link-column a { .site-footer__link-column a {
color: rgb(250 249 245 / 84%); color: var(--color-text);
font-family: var(--font-sans); font-family: var(--font-sans);
font-size: 0.95rem; font-size: 0.95rem;
} }
.site-footer__link-column a:hover { .site-footer__link-column a:hover {
color: var(--color-gold); color: var(--color-slate);
} }
.site-footer__copyright { .site-footer__copyright {
margin: 0; margin: 0;
color: rgb(250 249 245 / 58%); color: var(--color-text-muted);
font-family: var(--font-sans); font-family: var(--font-sans);
font-size: 0.85rem; font-size: 0.85rem;
text-align: center; text-align: center;

110
frontend/rabbi_gerzi/src/components/SiteHeader.vue
View file

@ -11,6 +11,7 @@ interface ContextualNavAction {
interface HeaderNavItem { interface HeaderNavItem {
label: string label: string
icon: string
} }
interface InternalHeaderNavItem extends HeaderNavItem { interface InternalHeaderNavItem extends HeaderNavItem {
@ -20,6 +21,11 @@ interface InternalHeaderNavItem extends HeaderNavItem {
const authStore = useAuthStore() const authStore = useAuthStore()
const route = useRoute() const route = useRoute()
const signatureImage = {
src: '/assets/signature.png',
alt: "R' Yehoshua Gerzi",
}
onMounted(() => { onMounted(() => {
void authStore.fetchUser() void authStore.fetchUser()
}) })
@ -29,13 +35,14 @@ async function handleLogout(): Promise<void> {
} }
const navItems: InternalHeaderNavItem[] = [ const navItems: InternalHeaderNavItem[] = [
{ label: 'Torah Media', href: '/media' }, { label: 'Torah Media', href: '/media', icon: '▶' },
{ label: 'About', href: '/about' }, { label: 'About', href: '/about', icon: 'ⓘ' },
{ label: 'Contact', href: '/contact' }, { label: 'Contact', href: '/contact', icon: '➤' },
] ]
const donateNavItem: HeaderNavItem = { const donateNavItem: HeaderNavItem = {
label: 'Invest in Pilzno', label: 'Donate',
icon: '♡',
} }
const routeElementId = computed(() => { const routeElementId = computed(() => {
@ -78,10 +85,7 @@ const contextualNavAction = computed<ContextualNavAction | null>(() => {
<template> <template>
<header class="site-header"> <header class="site-header">
<RouterLink class="site-header__brand" to="/"> <RouterLink class="site-header__brand" to="/">
<span class="site-header__brand-title">Rabbi Yehoshua Gerzi</span> <img v-bind="signatureImage" class="site-header__signature" />
<span class="site-header__brand-context">
PILZNO · RAMAT BET SHEMESH
</span>
</RouterLink> </RouterLink>
<nav class="site-header__nav"> <nav class="site-header__nav">
<RouterLink <RouterLink
@ -90,12 +94,15 @@ const contextualNavAction = computed<ContextualNavAction | null>(() => {
:to="item.href" :to="item.href"
class="site-header__nav-link" class="site-header__nav-link"
> >
<span class="site-header__nav-icon" aria-hidden="true">
{{ item.icon }}
</span>
<span>{{ item.label }}</span> <span>{{ item.label }}</span>
</RouterLink> </RouterLink>
<a <a v-bind="donateLinkAttributes" class="site-header__nav-link">
v-bind="donateLinkAttributes" <span class="site-header__nav-icon" aria-hidden="true">
class="site-header__nav-link site-header__nav-link--invest" {{ donateNavItem.icon }}
> </span>
<span>{{ donateNavItem.label }}</span> <span>{{ donateNavItem.label }}</span>
</a> </a>
<RouterLink <RouterLink
@ -127,95 +134,60 @@ const contextualNavAction = computed<ContextualNavAction | null>(() => {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 0.9rem 2rem; padding: 1rem 2rem;
background: rgb(250 249 245 / 92%); background: rgba(244, 239, 225, 0.85);
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
border-bottom: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
} }
.site-header__brand { .site-header__brand {
display: flex; display: inline-flex;
flex-direction: column; align-items: center;
gap: 0.1rem;
min-width: 12rem;
} }
.site-header__brand-title { .site-header__signature {
color: var(--color-brand-purple); height: 36px;
font-family: var(--font-display); width: auto;
font-size: 1.25rem;
font-weight: 500;
line-height: 1;
}
.site-header__brand-context {
color: var(--color-text-muted);
font-family: var(--font-sans);
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 0.08em;
line-height: 1.2;
text-transform: uppercase;
} }
.site-header__nav { .site-header__nav {
display: flex; display: flex;
align-items: center; gap: 0.75rem;
flex-wrap: wrap; flex-wrap: wrap;
gap: 1.15rem;
} }
.site-header__nav-link { .site-header__nav-link {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
min-height: 2rem; gap: 0.4rem;
padding: 0.15rem 0; padding: 0.5rem 1rem;
background: transparent; background: var(--color-white);
border: 0; border: 1px solid var(--color-border);
border-bottom: 1px solid transparent; border-radius: 9999px;
font-family: var(--font-sans); font-size: 0.95rem;
font-size: 0.78rem;
font-weight: 500; font-weight: 500;
letter-spacing: 0.08em;
color: var(--color-text); color: var(--color-text);
text-transform: uppercase; transition: background 0.15s ease;
transition:
border-color 0.15s ease,
color 0.15s ease;
} }
.site-header__nav-link:hover { .site-header__nav-link:hover {
color: var(--color-brand-purple); background: var(--color-cream);
border-color: var(--color-gold);
} }
.site-header__nav-link--invest { .site-header__nav-icon {
padding: 0.45rem 0.8rem; display: inline-block;
color: var(--color-brand-purple); font-size: 0.85rem;
border: 1px solid var(--color-gold); color: var(--color-slate);
border-radius: 4px;
}
.site-header__nav-link--invest:hover {
color: var(--color-cream);
background: var(--color-brand-purple);
border-color: var(--color-gold);
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.site-header { .site-header {
align-items: flex-start;
flex-direction: column;
gap: 0.9rem;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
} }
.site-header__nav {
gap: 0.85rem;
}
.site-header__nav-link { .site-header__nav-link {
font-size: 0.72rem; padding: 0.4rem 0.75rem;
font-size: 0.85rem;
} }
} }
</style> </style>

60
frontend/rabbi_gerzi/src/views/AboutPage.vue
View file

@ -231,8 +231,8 @@ function submitNewsletter(submitEvent: Event): void {
<p class="about-hero__eyebrow">Pilzno Institute</p> <p class="about-hero__eyebrow">Pilzno Institute</p>
<h1 class="about-hero__heading">About Rabbi Gerzi</h1> <h1 class="about-hero__heading">About Rabbi Gerzi</h1>
<p class="about-hero__lede"> <p class="about-hero__lede">
Integrated Torah life, rooted in mesorah and made practical for Healthy, Integrated and Balanced Torah living, rooted in mesorah
real people building real lives. and made practical for real people building real lives.
</p> </p>
</div> </div>
<img <img
@ -314,7 +314,7 @@ function submitNewsletter(submitEvent: Event): void {
</div> </div>
<p class="about-section__closing"> <p class="about-section__closing">
Together, this yields an Integrated Torah life. Together, this yields Healthy, Integrated and Balanced Torah living.
</p> </p>
</div> </div>
</section> </section>
@ -335,7 +335,7 @@ function submitNewsletter(submitEvent: Event): void {
<p class="about-section__paragraph"> <p class="about-section__paragraph">
In 2005, the Pilzno Rav instructed Rabbi Gerzi to continue his In 2005, the Pilzno Rav instructed Rabbi Gerzi to continue his
legacy by building a community in Eretz Yisrael dedicated to this legacy by building a community in Eretz Yisrael dedicated to this
unique form of Integrated Torah life. unique form of Healthy, Integrated and Balanced Torah living.
</p> </p>
</div> </div>
</div> </div>
@ -452,11 +452,11 @@ function submitNewsletter(submitEvent: Event): void {
<style scoped> <style scoped>
.about-page { .about-page {
min-height: 100vh; min-height: 100vh;
background: var(--color-light-bg); background: var(--color-white);
} }
.about-hero { .about-hero {
background: var(--color-light-bg); background: var(--color-cream);
padding: 4rem 2rem 5rem; padding: 4rem 2rem 5rem;
} }
@ -476,7 +476,7 @@ function submitNewsletter(submitEvent: Event): void {
.about-hero__eyebrow, .about-hero__eyebrow,
.about-section__kicker { .about-section__kicker {
margin: 0 0 0.75rem; margin: 0 0 0.75rem;
color: var(--color-gold); color: var(--color-olive);
font-family: var(--font-sans); font-family: var(--font-sans);
font-size: 0.78rem; font-size: 0.78rem;
font-weight: 700; font-weight: 700;
@ -487,8 +487,8 @@ function submitNewsletter(submitEvent: Event): void {
.about-hero__heading, .about-hero__heading,
.about-section__heading { .about-section__heading {
margin: 0; margin: 0;
color: var(--color-brand-purple); color: var(--color-slate);
font-family: var(--font-display); font-family: var(--font-serif);
font-size: clamp(2rem, 4vw, 3.35rem); font-size: clamp(2rem, 4vw, 3.35rem);
font-weight: 400; font-weight: 400;
line-height: 1.12; line-height: 1.12;
@ -498,7 +498,7 @@ function submitNewsletter(submitEvent: Event): void {
max-width: 33rem; max-width: 33rem;
margin: 1.35rem 0 0; margin: 1.35rem 0 0;
color: var(--color-text-muted); color: var(--color-text-muted);
font-family: var(--font-sans); font-family: var(--font-serif);
font-size: clamp(1.05rem, 2vw, 1.25rem); font-size: clamp(1.05rem, 2vw, 1.25rem);
line-height: 1.65; line-height: 1.65;
} }
@ -517,15 +517,15 @@ function submitNewsletter(submitEvent: Event): void {
} }
.about-section--white { .about-section--white {
background: var(--color-cream); background: var(--color-white);
} }
.about-section--cream { .about-section--cream {
background: var(--color-light-bg); background: var(--color-cream);
} }
.about-section--slate { .about-section--slate {
background: var(--color-brand-purple); background: var(--color-slate);
color: var(--color-white); color: var(--color-white);
} }
@ -562,7 +562,7 @@ function submitNewsletter(submitEvent: Event): void {
.about-section__closing { .about-section__closing {
margin: 0; margin: 0;
color: var(--color-text-muted); color: var(--color-text-muted);
font-family: var(--font-sans); font-family: var(--font-serif);
font-size: 1.02rem; font-size: 1.02rem;
line-height: 1.78; line-height: 1.78;
} }
@ -593,7 +593,7 @@ function submitNewsletter(submitEvent: Event): void {
.mission-grid__item, .mission-grid__item,
.rabbanim__card { .rabbanim__card {
background: var(--color-cream); background: var(--color-white);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 8px; border-radius: 8px;
} }
@ -605,8 +605,8 @@ function submitNewsletter(submitEvent: Event): void {
.mission-grid__title, .mission-grid__title,
.rabbanim__name { .rabbanim__name {
margin: 0; margin: 0;
color: var(--color-brand-purple); color: var(--color-slate);
font-family: var(--font-display); font-family: var(--font-serif);
font-size: 1.12rem; font-size: 1.12rem;
font-weight: 500; font-weight: 500;
line-height: 1.35; line-height: 1.35;
@ -617,7 +617,7 @@ function submitNewsletter(submitEvent: Event): void {
.teacher-list__description { .teacher-list__description {
margin: 0.85rem 0 0; margin: 0.85rem 0 0;
color: var(--color-text-muted); color: var(--color-text-muted);
font-family: var(--font-sans); font-family: var(--font-serif);
font-size: 0.94rem; font-size: 0.94rem;
line-height: 1.65; line-height: 1.65;
} }
@ -636,14 +636,14 @@ function submitNewsletter(submitEvent: Event): void {
grid-template-columns: minmax(180px, 0.38fr) minmax(0, 1fr); grid-template-columns: minmax(180px, 0.38fr) minmax(0, 1fr);
gap: 1rem; gap: 1rem;
padding: 1.1rem 1.25rem; padding: 1.1rem 1.25rem;
background: var(--color-cream); background: var(--color-white);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 8px; border-radius: 8px;
} }
.teacher-list__name { .teacher-list__name {
color: var(--color-brand-purple); color: var(--color-slate);
font-family: var(--font-display); font-family: var(--font-serif);
font-weight: 500; font-weight: 500;
} }
@ -652,7 +652,7 @@ function submitNewsletter(submitEvent: Event): void {
} }
.rabbanim { .rabbanim {
background: var(--color-cream); background: var(--color-white);
padding: 5rem 2rem; padding: 5rem 2rem;
text-align: center; text-align: center;
} }
@ -692,7 +692,7 @@ function submitNewsletter(submitEvent: Event): void {
} }
.haskamot { .haskamot {
background: var(--color-light-bg); background: var(--color-cream);
padding: 5rem 2rem; padding: 5rem 2rem;
text-align: center; text-align: center;
} }
@ -711,13 +711,13 @@ function submitNewsletter(submitEvent: Event): void {
border-radius: 8px; border-radius: 8px;
object-fit: cover; object-fit: cover;
object-position: center top; object-position: center top;
background: var(--color-cream); background: var(--color-white);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
box-shadow: 0 10px 30px rgb(33 50 64 / 10%); box-shadow: 0 10px 30px rgb(33 50 64 / 10%);
} }
.get-involved { .get-involved {
background: var(--color-light-bg); background: var(--color-cream);
padding: 0 2rem 5rem; padding: 0 2rem 5rem;
} }
@ -729,7 +729,7 @@ function submitNewsletter(submitEvent: Event): void {
margin: 0 auto; margin: 0 auto;
padding: 3rem; padding: 3rem;
gap: 3rem; gap: 3rem;
background: rgb(250 249 245 / 54%); background: rgba(255, 255, 255, 0.48);
border: 1px solid rgb(230 225 210 / 70%); border: 1px solid rgb(230 225 210 / 70%);
border-radius: 8px; border-radius: 8px;
} }
@ -737,7 +737,7 @@ function submitNewsletter(submitEvent: Event): void {
.get-involved__heading { .get-involved__heading {
margin: 0 0 1.25rem; margin: 0 0 1.25rem;
color: var(--color-text); color: var(--color-text);
font-family: var(--font-display); font-family: var(--font-serif);
font-size: clamp(1.6rem, 2.6vw, 2.4rem); font-size: clamp(1.6rem, 2.6vw, 2.4rem);
font-weight: 400; font-weight: 400;
} }
@ -746,7 +746,7 @@ function submitNewsletter(submitEvent: Event): void {
max-width: 36ch; max-width: 36ch;
margin: 0; margin: 0;
color: var(--color-text-muted); color: var(--color-text-muted);
font-family: var(--font-sans); font-family: var(--font-serif);
font-size: 1rem; font-size: 1rem;
line-height: 1.55; line-height: 1.55;
} }
@ -780,7 +780,7 @@ function submitNewsletter(submitEvent: Event): void {
} }
.get-involved__input:focus { .get-involved__input:focus {
outline: 2px solid var(--color-brand-purple); outline: 2px solid var(--color-slate);
outline-offset: 2px; outline-offset: 2px;
} }
@ -797,7 +797,7 @@ function submitNewsletter(submitEvent: Event): void {
} }
.get-involved__submit:hover { .get-involved__submit:hover {
background: var(--color-brand-purple); background: var(--color-slate);
} }
@media (max-width: 860px) { @media (max-width: 860px) {

29
frontend/rabbi_gerzi/src/views/AdminElementPage.vue
View file

@ -721,7 +721,7 @@ function resetInput(changeEvent: Event): void {
<style scoped> <style scoped>
.admin-element-page { .admin-element-page {
min-height: 100vh; min-height: 100vh;
background: var(--color-light-bg); background: var(--color-white);
} }
.admin-element-page__main { .admin-element-page__main {
@ -739,8 +739,8 @@ function resetInput(changeEvent: Event): void {
.admin-element-page__heading { .admin-element-page__heading {
margin: 0.35rem 0 0; margin: 0.35rem 0 0;
color: var(--color-brand-purple); color: #2c2c2c;
font-family: var(--font-display); font-family: var(--font-serif);
font-size: 2rem; font-size: 2rem;
font-weight: 400; font-weight: 400;
line-height: 1.2; line-height: 1.2;
@ -768,7 +768,6 @@ function resetInput(changeEvent: Event): void {
padding: 0.9rem; padding: 0.9rem;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 4px; border-radius: 4px;
background: var(--color-cream);
} }
.admin-element-page__label { .admin-element-page__label {
@ -784,7 +783,7 @@ function resetInput(changeEvent: Event): void {
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 4px; border-radius: 4px;
color: var(--color-text); color: var(--color-text);
background: var(--color-cream); background: var(--color-white);
font-family: var(--font-sans); font-family: var(--font-sans);
font-size: 0.96rem; font-size: 0.96rem;
line-height: 1.5; line-height: 1.5;
@ -792,7 +791,7 @@ function resetInput(changeEvent: Event): void {
.admin-element-page__input:focus, .admin-element-page__input:focus,
.admin-element-page__textarea:focus { .admin-element-page__textarea:focus {
border-color: var(--color-brand-purple); border-color: var(--color-slate);
outline: none; outline: none;
} }
@ -805,7 +804,6 @@ function resetInput(changeEvent: Event): void {
height: 6rem; height: 6rem;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 4px; border-radius: 4px;
background: var(--color-light-bg);
object-fit: contain; object-fit: contain;
} }
@ -839,7 +837,6 @@ function resetInput(changeEvent: Event): void {
padding: 0.75rem; padding: 0.75rem;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 4px; border-radius: 4px;
background: var(--color-light-bg);
} }
.admin-element-page__child-body { .admin-element-page__child-body {
@ -851,7 +848,7 @@ function resetInput(changeEvent: Event): void {
} }
.admin-element-page__child-link { .admin-element-page__child-link {
color: var(--color-brand-purple); color: var(--color-slate);
font-size: 0.95rem; font-size: 0.95rem;
font-weight: 600; font-weight: 600;
} }
@ -902,8 +899,8 @@ function resetInput(changeEvent: Event): void {
.admin-element-page__icon-button:hover:not(:disabled), .admin-element-page__icon-button:hover:not(:disabled),
.admin-element-page__icon-button:focus-visible { .admin-element-page__icon-button:focus-visible {
border-color: var(--color-brand-purple); border-color: var(--color-slate);
color: var(--color-brand-purple); color: var(--color-slate);
} }
.admin-element-page__child-add { .admin-element-page__child-add {
@ -934,7 +931,7 @@ function resetInput(changeEvent: Event): void {
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 4px; border-radius: 4px;
color: var(--color-text); color: var(--color-text);
background: var(--color-cream); background: var(--color-white);
font-family: var(--font-sans); font-family: var(--font-sans);
font-size: 0.9rem; font-size: 0.9rem;
font-weight: 600; font-weight: 600;
@ -953,7 +950,7 @@ function resetInput(changeEvent: Event): void {
.admin-element-page__secondary-button:focus-visible, .admin-element-page__secondary-button:focus-visible,
.admin-element-page__pdf-link:hover, .admin-element-page__pdf-link:hover,
.admin-element-page__pdf-link:focus-visible { .admin-element-page__pdf-link:focus-visible {
border-color: var(--color-brand-purple); border-color: var(--color-slate);
} }
.admin-element-page__actions { .admin-element-page__actions {
@ -965,10 +962,10 @@ function resetInput(changeEvent: Event): void {
.admin-element-page__save { .admin-element-page__save {
padding: 0.7rem 1.4rem; padding: 0.7rem 1.4rem;
border: 1px solid var(--color-brand-purple); border: 1px solid var(--color-slate);
border-radius: 4px; border-radius: 4px;
color: var(--color-white); color: var(--color-white);
background: var(--color-brand-purple); background: var(--color-slate);
font-family: var(--font-sans); font-family: var(--font-sans);
font-size: 0.95rem; font-size: 0.95rem;
font-weight: 600; font-weight: 600;
@ -987,7 +984,7 @@ function resetInput(changeEvent: Event): void {
.admin-element-page__status--inline { .admin-element-page__status--inline {
margin: 0; margin: 0;
color: var(--color-brand-purple); color: var(--color-slate);
} }
.admin-element-page__status--error { .admin-element-page__status--error {

36
frontend/rabbi_gerzi/src/views/ContactPage.vue
View file

@ -188,11 +188,11 @@ function submitNewsletter(submitEvent: Event): void {
<style scoped> <style scoped>
.contact-page { .contact-page {
min-height: 100vh; min-height: 100vh;
background: var(--color-light-bg); background: var(--color-white);
} }
.contact-hero { .contact-hero {
background: var(--color-light-bg); background: var(--color-cream);
padding: 4rem 2rem; padding: 4rem 2rem;
} }
@ -204,7 +204,7 @@ function submitNewsletter(submitEvent: Event): void {
.contact-hero__eyebrow { .contact-hero__eyebrow {
margin: 0 0 0.75rem; margin: 0 0 0.75rem;
color: var(--color-gold); color: var(--color-olive);
font-family: var(--font-sans); font-family: var(--font-sans);
font-size: 0.78rem; font-size: 0.78rem;
font-weight: 700; font-weight: 700;
@ -217,8 +217,8 @@ function submitNewsletter(submitEvent: Event): void {
.contact-social__heading, .contact-social__heading,
.get-involved__heading { .get-involved__heading {
margin: 0; margin: 0;
color: var(--color-brand-purple); color: var(--color-slate);
font-family: var(--font-display); font-family: var(--font-serif);
font-weight: 400; font-weight: 400;
line-height: 1.15; line-height: 1.15;
} }
@ -231,13 +231,13 @@ function submitNewsletter(submitEvent: Event): void {
max-width: 42rem; max-width: 42rem;
margin: 1.35rem auto 0; margin: 1.35rem auto 0;
color: var(--color-text-muted); color: var(--color-text-muted);
font-family: var(--font-sans); font-family: var(--font-serif);
font-size: clamp(1.05rem, 2vw, 1.25rem); font-size: clamp(1.05rem, 2vw, 1.25rem);
line-height: 1.65; line-height: 1.65;
} }
.contact-main { .contact-main {
background: var(--color-cream); background: var(--color-white);
padding: 5rem 2rem; padding: 5rem 2rem;
} }
@ -252,7 +252,7 @@ function submitNewsletter(submitEvent: Event): void {
.contact-form, .contact-form,
.contact-social { .contact-social {
background: var(--color-cream); background: var(--color-white);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 8px; border-radius: 8px;
} }
@ -295,7 +295,7 @@ function submitNewsletter(submitEvent: Event): void {
width: 100%; width: 100%;
padding: 0.78rem 1rem; padding: 0.78rem 1rem;
color: var(--color-text); color: var(--color-text);
background: var(--color-light-bg); background: var(--color-cream);
border: 1px solid rgba(0, 0, 0, 0.08); border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 8px; border-radius: 8px;
font-family: var(--font-sans); font-family: var(--font-sans);
@ -310,7 +310,7 @@ function submitNewsletter(submitEvent: Event): void {
.contact-form__input:focus, .contact-form__input:focus,
.contact-form__textarea:focus, .contact-form__textarea:focus,
.get-involved__input:focus { .get-involved__input:focus {
outline: 2px solid var(--color-brand-purple); outline: 2px solid var(--color-slate);
outline-offset: 2px; outline-offset: 2px;
} }
@ -319,7 +319,7 @@ function submitNewsletter(submitEvent: Event): void {
margin-top: 1.25rem; margin-top: 1.25rem;
padding: 0.85rem 1rem; padding: 0.85rem 1rem;
color: var(--color-white); color: var(--color-white);
background: var(--color-brand-purple); background: var(--color-text);
border: none; border: none;
border-radius: 8px; border-radius: 8px;
font-family: var(--font-sans); font-family: var(--font-sans);
@ -329,12 +329,12 @@ function submitNewsletter(submitEvent: Event): void {
.contact-form__submit:hover, .contact-form__submit:hover,
.get-involved__submit:hover { .get-involved__submit:hover {
background: var(--color-brand-purple); background: var(--color-slate);
} }
.contact-social { .contact-social {
padding: 2rem; padding: 2rem;
background: var(--color-light-bg); background: var(--color-cream);
} }
.contact-social__heading { .contact-social__heading {
@ -353,7 +353,7 @@ function submitNewsletter(submitEvent: Event): void {
justify-content: space-between; justify-content: space-between;
padding: 0.95rem 1rem; padding: 0.95rem 1rem;
color: var(--color-text); color: var(--color-text);
background: var(--color-cream); background: var(--color-white);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 8px; border-radius: 8px;
font-family: var(--font-sans); font-family: var(--font-sans);
@ -361,11 +361,11 @@ function submitNewsletter(submitEvent: Event): void {
} }
.contact-social__link:hover { .contact-social__link:hover {
border-color: var(--color-brand-purple); border-color: var(--color-slate);
} }
.get-involved { .get-involved {
background: var(--color-light-bg); background: var(--color-cream);
padding: 5rem 2rem; padding: 5rem 2rem;
} }
@ -377,7 +377,7 @@ function submitNewsletter(submitEvent: Event): void {
margin: 0 auto; margin: 0 auto;
padding: 3rem; padding: 3rem;
gap: 3rem; gap: 3rem;
background: rgb(250 249 245 / 54%); background: rgba(255, 255, 255, 0.48);
border: 1px solid rgb(230 225 210 / 70%); border: 1px solid rgb(230 225 210 / 70%);
border-radius: 8px; border-radius: 8px;
} }
@ -392,7 +392,7 @@ function submitNewsletter(submitEvent: Event): void {
max-width: 36ch; max-width: 36ch;
margin: 0; margin: 0;
color: var(--color-text-muted); color: var(--color-text-muted);
font-family: var(--font-sans); font-family: var(--font-serif);
font-size: 1rem; font-size: 1rem;
line-height: 1.55; line-height: 1.55;
} }

45
frontend/rabbi_gerzi/src/views/ElementPage.vue
View file

@ -332,7 +332,7 @@ function isShortYoutubeHost(hostname: string): boolean {
<style scoped> <style scoped>
.element-page { .element-page {
min-height: 100vh; min-height: 100vh;
background: var(--color-light-bg); background: var(--color-white);
} }
.element-page__main { .element-page__main {
@ -361,8 +361,8 @@ function isShortYoutubeHost(hostname: string): boolean {
.element-page__heading { .element-page__heading {
margin: 0; margin: 0;
color: var(--color-brand-purple); color: #2c2c2c;
font-family: var(--font-display); font-family: var(--font-serif);
font-size: clamp(2.6rem, 4.8vw, 3.2rem); font-size: clamp(2.6rem, 4.8vw, 3.2rem);
font-weight: 400; font-weight: 400;
line-height: 1.1; line-height: 1.1;
@ -371,7 +371,7 @@ function isShortYoutubeHost(hostname: string): boolean {
.element-page__rich-text { .element-page__rich-text {
margin-top: 1.75rem; margin-top: 1.75rem;
color: var(--color-text); color: #333333;
font-family: var(--font-sans); font-family: var(--font-sans);
font-size: 1.05rem; font-size: 1.05rem;
line-height: 1.75; line-height: 1.75;
@ -389,8 +389,8 @@ function isShortYoutubeHost(hostname: string): boolean {
.element-page__rich-text :deep(h3), .element-page__rich-text :deep(h3),
.element-page__rich-text :deep(h4) { .element-page__rich-text :deep(h4) {
margin: 1.6rem 0 0.65rem; margin: 1.6rem 0 0.65rem;
color: var(--color-brand-purple); color: #2c2c2c;
font-family: var(--font-display); font-family: var(--font-serif);
font-weight: 500; font-weight: 500;
line-height: 1.25; line-height: 1.25;
} }
@ -420,24 +420,22 @@ function isShortYoutubeHost(hostname: string): boolean {
.element-page__rich-text :deep(blockquote) { .element-page__rich-text :deep(blockquote) {
margin: 1.35rem 0; margin: 1.35rem 0;
padding: 0.2rem 0 0.2rem 1.1rem; padding: 0.2rem 0 0.2rem 1.1rem;
border-left: 3px solid var(--color-gold); border-left: 3px solid var(--color-olive);
color: var(--color-text-muted); color: var(--color-text-muted);
font-family: var(--font-quote);
font-style: italic;
} }
.element-page__rich-text :deep(strong) { .element-page__rich-text :deep(strong) {
color: var(--color-brand-purple); color: #2c2c2c;
font-weight: 700; font-weight: 700;
} }
.element-page__rich-text :deep(mark) { .element-page__rich-text :deep(mark) {
padding: 0 0.16em; padding: 0 0.16em;
background: rgb(201 168 76 / 28%); background: #fff3a7;
} }
.element-page__rich-text :deep(a) { .element-page__rich-text :deep(a) {
color: var(--color-brand-purple); color: var(--color-slate);
font-weight: 600; font-weight: 600;
text-decoration: underline; text-decoration: underline;
text-underline-offset: 0.16em; text-underline-offset: 0.16em;
@ -470,7 +468,7 @@ function isShortYoutubeHost(hostname: string): boolean {
} }
.element-page__rich-text :deep(th) { .element-page__rich-text :deep(th) {
background: var(--color-light-bg); background: #f6f3eb;
font-weight: 700; font-weight: 700;
} }
@ -504,8 +502,7 @@ function isShortYoutubeHost(hostname: string): boolean {
min-height: 2.75rem; min-height: 2.75rem;
padding: 0.7rem 1.15rem; padding: 0.7rem 1.15rem;
color: var(--color-white); color: var(--color-white);
background: var(--color-brand-purple); background: var(--color-olive);
border: 1px solid var(--color-gold);
border-radius: 8px; border-radius: 8px;
font-family: var(--font-sans); font-family: var(--font-sans);
font-size: 0.95rem; font-size: 0.95rem;
@ -520,13 +517,13 @@ function isShortYoutubeHost(hostname: string): boolean {
.element-page__pdf-link:hover, .element-page__pdf-link:hover,
.element-page__pdf-link:focus-visible { .element-page__pdf-link:focus-visible {
background: var(--color-body-text); background: #4d5b3c;
box-shadow: 0 10px 24px rgb(44 44 44 / 12%); box-shadow: 0 10px 24px rgb(44 44 44 / 12%);
transform: translateY(-1px); transform: translateY(-1px);
} }
.element-page__pdf-link:focus-visible { .element-page__pdf-link:focus-visible {
outline: 3px solid rgb(201 168 76 / 42%); outline: 3px solid rgb(94 107 76 / 38%);
outline-offset: 4px; outline-offset: 4px;
} }
@ -545,11 +542,11 @@ function isShortYoutubeHost(hostname: string): boolean {
.element-page__child-link { .element-page__child-link {
display: block; display: block;
padding: 1rem 1.2rem; padding: 1rem 1.2rem;
background: var(--color-cream); background: var(--color-white);
border: 1px solid rgb(201 168 76 / 54%); border: 1px solid #e5cf9f;
border-radius: 8px; border-radius: 8px;
color: var(--color-brand-purple); color: #333333;
font-family: var(--font-display); font-family: var(--font-serif);
font-size: 1.25rem; font-size: 1.25rem;
line-height: 1.25; line-height: 1.25;
text-align: center; text-align: center;
@ -575,13 +572,13 @@ function isShortYoutubeHost(hostname: string): boolean {
.element-page__child-link:hover, .element-page__child-link:hover,
.element-page__child-link:focus-visible { .element-page__child-link:focus-visible {
border-color: var(--color-gold); border-color: #d4ad5f;
box-shadow: 0 10px 28px rgb(44 44 44 / 9%); box-shadow: 0 10px 28px rgb(44 44 44 / 9%);
transform: translateY(-1px); transform: translateY(-1px);
} }
.element-page__child-link:focus-visible { .element-page__child-link:focus-visible {
outline: 3px solid rgb(201 168 76 / 42%); outline: 3px solid rgb(212 173 95 / 45%);
outline-offset: 4px; outline-offset: 4px;
} }
@ -590,7 +587,7 @@ function isShortYoutubeHost(hostname: string): boolean {
margin: 0 auto; margin: 0 auto;
padding: 1rem 1.25rem; padding: 1rem 1.25rem;
color: var(--color-text-muted); color: var(--color-text-muted);
background: var(--color-cream); background: var(--color-white);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 8px; border-radius: 8px;
font-size: 0.95rem; font-size: 0.95rem;

265
frontend/rabbi_gerzi/src/views/HomePage.vue
View file

@ -260,22 +260,26 @@ function projectCardStyle(project: Project): string {
<SiteHeader /> <SiteHeader />
<section class="hero" data-cy="hero"> <section class="hero" data-cy="hero">
<div class="hero__backdrop">
<img src="/assets/sky.png" alt="" class="hero__sky" />
<img src="/assets/mountain.png" alt="" class="hero__mountain" />
<img src="/assets/man_on_rock.png" alt="" class="hero__hiker" />
</div>
<div class="hero__content"> <div class="hero__content">
<div class="hero__text"> <div class="hero__text">
<p class="hero__eyebrow">PILZNO · RAMAT BET SHEMESH</p> <h1 class="hero__headline">
<h1 class="hero__headline">Rabbi Yehoshua Gerzi</h1> Let&rsquo;s upgrade our lives to a
<p class="hero__tagline">Create Geula · Elevate Life</p> <em>healthy</em>, <em>integrated</em>, and <em>balanced</em> Torah
<p class="hero__lede"> existence.
Guiding you toward a Geula mindset and an Integrated Torah life </h1>
rooted in ancient wisdom, warm community, and deliberate growth. <p class="hero__attribution">Rabbi Yehoshua Gerzi</p>
</p>
</div> </div>
<div class="hero__portrait-panel"> <div class="hero__portrait-frame">
<img <img
src="/assets/portrait.png" src="/assets/portrait.png"
alt="Rabbi Yehoshua Gerzi" alt="Rabbi Yehoshua Gerzi"
class="hero__portrait" class="hero__portrait"
data-cy="hero-rabbi-portrait" data-cy="hero-portrait"
/> />
</div> </div>
</div> </div>
@ -301,10 +305,10 @@ function projectCardStyle(project: Project): string {
</h2> </h2>
<p class="discover-path__paragraph"> <p class="discover-path__paragraph">
Rabbi Yehoshua Gerzi has dedicated his life to empowering individuals Rabbi Yehoshua Gerzi has dedicated his life to empowering individuals
to build an Integrated Torah life from a Geula mindset. His teachings to achieve a state of &ldquo;Healthy, Integrated and Balanced Torah
weave together timeless Torah wisdom, mystical insights and practical Living.&rdquo; His teachings weave together timeless Torah wisdom,
guidance, making ancient wisdom accessible and transformative for mystical insights and practical guidance, making ancient wisdom
modern lives. accessible and transformative for modern lives.
</p> </p>
<p class="discover-path__paragraph"> <p class="discover-path__paragraph">
Rabbi Gerzi is based in Ramat Beit Shemesh, where he serves as Rav of Rabbi Gerzi is based in Ramat Beit Shemesh, where he serves as Rav of
@ -535,110 +539,123 @@ function projectCardStyle(project: Project): string {
.hero { .hero {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
min-height: min(760px, calc(100vh - 4rem)); min-height: 110vh;
display: flex; display: flex;
align-items: center; align-items: center;
color: var(--color-cream);
background: var(--color-brand-purple);
} }
.hero::after { .hero__backdrop {
content: '';
position: absolute; position: absolute;
inset: 0;
z-index: 0;
}
.hero__sky,
.hero__mountain,
.hero__hiker {
position: absolute;
left: 50%;
transform: translateX(-50%);
pointer-events: none;
}
.hero__sky {
top: 0; top: 0;
right: 0; width: 100%;
width: min(9rem, 22vw); height: 100%;
height: min(9rem, 22vw); object-fit: cover;
border-right: 1px solid var(--color-gold); object-position: center 44%;
border-bottom: 1px solid var(--color-gold); z-index: 0;
}
.hero__mountain {
bottom: calc(50% - 58.8vw);
width: 100vw;
max-width: none;
z-index: 1;
}
.hero__hiker {
bottom: min(-30vw, -13rem);
width: 100vw;
max-width: none;
z-index: 2;
} }
.hero__content { .hero__content {
position: relative; position: relative;
z-index: 1; z-index: 1;
display: grid; display: grid;
grid-template-columns: minmax(0, 0.98fr) minmax(260px, 0.52fr); grid-template-columns: 1fr auto;
align-items: center; align-items: center;
gap: clamp(2rem, 6vw, 5rem); gap: 0.5rem;
width: 100%; width: 100%;
max-width: 1180px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
padding: clamp(4rem, 8vw, 7rem) 2rem; padding: 6rem 2rem;
transform: translateY(clamp(-15.25rem, calc(-22vh - 20px), -8.25rem));
} }
.hero__text { .hero__text {
max-width: 44rem; max-width: 36rem;
}
.hero__eyebrow {
margin: 0 0 3rem;
color: rgb(250 249 245 / 72%);
font-family: var(--font-sans);
font-size: 0.82rem;
font-weight: 500;
letter-spacing: 0.08em;
line-height: 1.3;
text-transform: uppercase;
}
.hero__eyebrow::after {
content: '';
display: block;
width: 5rem;
height: 2px;
margin-top: 1.35rem;
background: var(--color-gold);
} }
.hero__headline { .hero__headline {
margin: 0; font-family: var(--font-serif);
color: var(--color-cream);
font-family: var(--font-display);
font-size: clamp(4.25rem, 8vw, 7rem);
font-weight: 400; font-weight: 400;
line-height: 0.92; font-size: clamp(1.75rem, 3.2vw, 2.8rem);
line-height: 1.25;
color: var(--color-white);
margin: 0;
} }
.hero__tagline { .hero__headline em {
margin: 1.4rem 0 0;
color: var(--color-gold);
font-family: var(--font-quote);
font-size: clamp(1.25rem, 2.5vw, 1.8rem);
font-style: italic; font-style: italic;
line-height: 1.35;
} }
.hero__lede { .hero__attribution {
max-width: 36rem; margin: 1.5rem 0 0 0;
margin: 1.8rem 0 0; font-size: 0.95rem;
color: rgb(250 249 245 / 82%); color: var(--color-white);
font-family: var(--font-sans); opacity: 0.85;
font-size: clamp(1.04rem, 1.8vw, 1.24rem);
font-weight: 300;
line-height: 1.8;
} }
.hero__portrait-panel { .hero__portrait-frame {
--portrait-frame-size: clamp(200px, 24vw, 350px);
width: var(--portrait-frame-size);
height: var(--portrait-frame-size);
position: relative; position: relative;
align-self: stretch; border-radius: 50%;
overflow: visible;
display: flex; display: flex;
align-items: flex-end;
justify-content: center; justify-content: center;
min-height: 28rem; }
border: 1px solid rgb(201 168 76 / 62%);
border-radius: 8px; .hero__portrait-frame::before {
background: rgb(250 249 245 / 7%); content: '';
position: absolute;
left: 50%;
bottom: 0;
z-index: 0;
width: 110%;
aspect-ratio: 1;
border-radius: 50%;
background: var(--color-slate);
transform: translateX(-50%);
} }
.hero__portrait { .hero__portrait {
display: block; position: relative;
align-self: end; z-index: 1;
width: min(88%, 25rem); width: 110%;
height: auto; height: auto;
object-fit: contain; display: block;
} }
.discover-path { .discover-path {
background: var(--color-brand-purple); background: var(--color-slate);
color: var(--color-white); color: var(--color-white);
padding: 5rem 2rem; padding: 5rem 2rem;
} }
@ -652,24 +669,24 @@ function projectCardStyle(project: Project): string {
.discover-path__icon { .discover-path__icon {
width: 110px; width: 110px;
height: auto; height: auto;
color: rgb(250 249 245 / 70%); color: rgba(255, 255, 255, 0.7);
margin: 0 auto 2rem; margin: 0 auto 2rem;
display: block; display: block;
} }
.discover-path__heading { .discover-path__heading {
font-family: var(--font-display); font-family: var(--font-serif);
font-weight: 400; font-weight: 400;
font-size: clamp(1.5rem, 2.4vw, 2rem); font-size: clamp(1.5rem, 2.4vw, 2rem);
margin: 0 0 1.5rem 0; margin: 0 0 1.5rem 0;
} }
.discover-path__paragraph { .discover-path__paragraph {
font-family: var(--font-sans); font-family: var(--font-serif);
font-weight: 300; font-weight: 300;
font-size: 1.05rem; font-size: 1.05rem;
line-height: 1.7; line-height: 1.7;
color: rgb(250 249 245 / 85%); color: rgba(255, 255, 255, 0.85);
margin: 0 0 1.25rem 0; margin: 0 0 1.25rem 0;
} }
@ -688,10 +705,10 @@ function projectCardStyle(project: Project): string {
} }
.core-teachings__heading { .core-teachings__heading {
font-family: var(--font-display); font-family: var(--font-serif);
font-weight: 400; font-weight: 400;
font-size: clamp(1.5rem, 2.4vw, 2rem); font-size: clamp(1.5rem, 2.4vw, 2rem);
color: var(--color-brand-purple); color: var(--color-slate);
text-align: center; text-align: center;
margin: 0 0 3rem 0; margin: 0 0 3rem 0;
} }
@ -712,20 +729,20 @@ function projectCardStyle(project: Project): string {
.core-teachings__glyph { .core-teachings__glyph {
font-size: 3rem; font-size: 3rem;
line-height: 1; line-height: 1;
color: var(--color-brand-purple); color: var(--color-slate);
margin-bottom: 1rem; margin-bottom: 1rem;
font-weight: 300; font-weight: 300;
} }
.core-teachings__label { .core-teachings__label {
font-family: var(--font-sans); font-family: var(--font-serif);
font-size: 1rem; font-size: 1rem;
color: var(--color-text-muted); color: var(--color-text-muted);
margin: 0; margin: 0;
} }
.unique-voice { .unique-voice {
background: var(--color-brand-purple); background: var(--color-slate);
color: var(--color-white); color: var(--color-white);
padding: 5rem 2rem; padding: 5rem 2rem;
} }
@ -739,32 +756,32 @@ function projectCardStyle(project: Project): string {
.unique-voice__icon { .unique-voice__icon {
width: 140px; width: 140px;
height: auto; height: auto;
color: rgb(250 249 245 / 70%); color: rgba(255, 255, 255, 0.7);
display: block; display: block;
margin: 0 auto 2rem; margin: 0 auto 2rem;
} }
.unique-voice__heading { .unique-voice__heading {
font-family: var(--font-display); font-family: var(--font-serif);
font-weight: 400; font-weight: 400;
font-size: clamp(1.5rem, 2.4vw, 2rem); font-size: clamp(1.5rem, 2.4vw, 2rem);
margin: 0 0 1.5rem 0; margin: 0 0 1.5rem 0;
} }
.unique-voice__paragraph { .unique-voice__paragraph {
font-family: var(--font-sans); font-family: var(--font-serif);
font-weight: 300; font-weight: 300;
font-size: 1.05rem; font-size: 1.05rem;
line-height: 1.7; line-height: 1.7;
color: rgb(250 249 245 / 85%); color: rgba(255, 255, 255, 0.85);
margin: 0 0 2.5rem 0; margin: 0 0 2.5rem 0;
} }
.unique-voice__cta-button { .unique-voice__cta-button {
background: var(--color-white); background: var(--color-white);
color: var(--color-text); color: var(--color-text);
border: 1px solid var(--color-gold); border: none;
border-radius: 4px; border-radius: 9999px;
padding: 0.85rem 1.75rem; padding: 0.85rem 1.75rem;
font-family: var(--font-sans); font-family: var(--font-sans);
font-weight: 500; font-weight: 500;
@ -793,10 +810,10 @@ function projectCardStyle(project: Project): string {
} }
.testimonials__heading { .testimonials__heading {
font-family: var(--font-display); font-family: var(--font-serif);
font-weight: 400; font-weight: 400;
font-size: clamp(1.5rem, 2.4vw, 2rem); font-size: clamp(1.5rem, 2.4vw, 2rem);
color: var(--color-brand-purple); color: var(--color-slate);
margin: 0 0 2.5rem 0; margin: 0 0 2.5rem 0;
} }
@ -804,15 +821,14 @@ function projectCardStyle(project: Project): string {
position: relative; position: relative;
width: min(100%, var(--testimonials-stage-width)); width: min(100%, var(--testimonials-stage-width));
height: var(--testimonials-card-height); height: var(--testimonials-card-height);
border-radius: 8px; border-radius: 14px;
margin: 0 auto; margin: 0 auto;
overflow: hidden; overflow: hidden;
} }
.testimonials__card { .testimonials__card {
background: var(--color-white); background: var(--color-white);
border: 1px solid var(--color-border); border-radius: 14px;
border-radius: 8px;
padding: 2rem; padding: 2rem;
text-align: left; text-align: left;
width: calc(50% - var(--testimonials-card-gap)); width: calc(50% - var(--testimonials-card-gap));
@ -862,7 +878,7 @@ function projectCardStyle(project: Project): string {
} }
.testimonials__name { .testimonials__name {
font-family: var(--font-display); font-family: var(--font-serif);
font-weight: 500; font-weight: 500;
font-size: 1.15rem; font-size: 1.15rem;
margin: 0 0 1rem 0; margin: 0 0 1rem 0;
@ -870,7 +886,7 @@ function projectCardStyle(project: Project): string {
} }
.testimonials__quote { .testimonials__quote {
font-family: var(--font-quote); font-family: var(--font-serif);
font-style: italic; font-style: italic;
font-size: 1rem; font-size: 1rem;
line-height: 1.6; line-height: 1.6;
@ -889,7 +905,7 @@ function projectCardStyle(project: Project): string {
width: 2.5rem; width: 2.5rem;
height: 2.5rem; height: 2.5rem;
border-radius: 50%; border-radius: 50%;
background: var(--color-brand-purple); background: var(--color-text);
color: var(--color-white); color: var(--color-white);
border: none; border: none;
font-size: 1.25rem; font-size: 1.25rem;
@ -900,7 +916,7 @@ function projectCardStyle(project: Project): string {
} }
.testimonials__arrow:hover { .testimonials__arrow:hover {
background: var(--color-body-text); background: var(--color-slate);
} }
.sponsors { .sponsors {
@ -915,10 +931,10 @@ function projectCardStyle(project: Project): string {
} }
.sponsors__heading { .sponsors__heading {
font-family: var(--font-display); font-family: var(--font-serif);
font-weight: 400; font-weight: 400;
font-size: clamp(1.4rem, 2.2vw, 1.85rem); font-size: clamp(1.4rem, 2.2vw, 1.85rem);
color: var(--color-brand-purple); color: var(--color-slate);
margin: 0 0 3rem 0; margin: 0 0 3rem 0;
} }
@ -989,10 +1005,10 @@ function projectCardStyle(project: Project): string {
} }
.projects__heading { .projects__heading {
font-family: var(--font-display); font-family: var(--font-serif);
font-weight: 400; font-weight: 400;
font-size: clamp(1.5rem, 2.4vw, 2rem); font-size: clamp(1.5rem, 2.4vw, 2rem);
color: var(--color-brand-purple); color: var(--color-slate);
text-align: center; text-align: center;
margin: 0 0 3rem 0; margin: 0 0 3rem 0;
} }
@ -1004,7 +1020,7 @@ function projectCardStyle(project: Project): string {
} }
.projects__card { .projects__card {
border-radius: 8px; border-radius: 14px;
padding: 3rem 2rem; padding: 3rem 2rem;
aspect-ratio: 16 / 10; aspect-ratio: 16 / 10;
min-height: 240px; min-height: 240px;
@ -1024,18 +1040,18 @@ function projectCardStyle(project: Project): string {
} }
.projects__card-title { .projects__card-title {
font-family: var(--font-display); font-family: var(--font-serif);
font-weight: 400; font-weight: 400;
font-size: clamp(1.25rem, 2vw, 1.6rem); font-size: clamp(1.25rem, 2vw, 1.6rem);
margin: 0 0 1rem 0; margin: 0 0 1rem 0;
} }
.projects__card-body { .projects__card-body {
font-family: var(--font-sans); font-family: var(--font-serif);
font-weight: 300; font-weight: 300;
font-size: 0.95rem; font-size: 0.95rem;
line-height: 1.55; line-height: 1.55;
color: rgb(250 249 245 / 90%); color: rgba(255, 255, 255, 0.9);
margin: 0; margin: 0;
max-width: 28ch; max-width: 28ch;
} }
@ -1052,10 +1068,10 @@ function projectCardStyle(project: Project): string {
} }
.journey__heading { .journey__heading {
font-family: var(--font-display); font-family: var(--font-serif);
font-weight: 400; font-weight: 400;
font-size: clamp(1.5rem, 2.4vw, 2rem); font-size: clamp(1.5rem, 2.4vw, 2rem);
color: var(--color-brand-purple); color: var(--color-slate);
margin: 0 0 3rem 0; margin: 0 0 3rem 0;
} }
@ -1073,7 +1089,7 @@ function projectCardStyle(project: Project): string {
text-align: center; text-align: center;
padding: 4rem 2rem; padding: 4rem 2rem;
min-height: 280px; min-height: 280px;
border-radius: 8px; border-radius: 14px;
color: var(--color-white); color: var(--color-white);
transition: transform 0.2s ease; transition: transform 0.2s ease;
} }
@ -1083,15 +1099,15 @@ function projectCardStyle(project: Project): string {
} }
.journey__card--olive { .journey__card--olive {
background: var(--color-gold); background: var(--color-olive);
} }
.journey__card--slate { .journey__card--slate {
background: var(--color-brand-purple); background: var(--color-slate);
} }
.journey__card-title { .journey__card-title {
font-family: var(--font-display); font-family: var(--font-serif);
font-weight: 400; font-weight: 400;
font-size: clamp(1.4rem, 2.2vw, 1.85rem); font-size: clamp(1.4rem, 2.2vw, 1.85rem);
margin: 0 0 1.5rem 0; margin: 0 0 1.5rem 0;
@ -1099,11 +1115,11 @@ function projectCardStyle(project: Project): string {
} }
.journey__card-body { .journey__card-body {
font-family: var(--font-sans); font-family: var(--font-serif);
font-weight: 300; font-weight: 300;
font-size: 1rem; font-size: 1rem;
line-height: 1.55; line-height: 1.55;
color: rgb(250 249 245 / 90%); color: rgba(255, 255, 255, 0.9);
margin: 0; margin: 0;
max-width: 30ch; max-width: 30ch;
} }
@ -1116,9 +1132,8 @@ function projectCardStyle(project: Project): string {
.get-involved__card { .get-involved__card {
max-width: 1100px; max-width: 1100px;
margin: 0 auto; margin: 0 auto;
background: rgb(250 249 245 / 54%); background: rgba(255, 255, 255, 0.4);
border: 1px solid var(--color-border); border-radius: 14px;
border-radius: 8px;
padding: 3rem; padding: 3rem;
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
@ -1127,7 +1142,7 @@ function projectCardStyle(project: Project): string {
} }
.get-involved__heading { .get-involved__heading {
font-family: var(--font-display); font-family: var(--font-serif);
font-weight: 400; font-weight: 400;
font-size: clamp(1.6rem, 2.6vw, 2.4rem); font-size: clamp(1.6rem, 2.6vw, 2.4rem);
color: var(--color-text); color: var(--color-text);
@ -1135,7 +1150,7 @@ function projectCardStyle(project: Project): string {
} }
.get-involved__subtext { .get-involved__subtext {
font-family: var(--font-sans); font-family: var(--font-serif);
font-size: 1rem; font-size: 1rem;
line-height: 1.55; line-height: 1.55;
color: var(--color-text-muted); color: var(--color-text-muted);
@ -1172,7 +1187,7 @@ function projectCardStyle(project: Project): string {
} }
.get-involved__input:focus { .get-involved__input:focus {
outline: 2px solid var(--color-brand-purple); outline: 2px solid var(--color-slate);
outline-offset: 2px; outline-offset: 2px;
} }
@ -1189,7 +1204,7 @@ function projectCardStyle(project: Project): string {
} }
.get-involved__submit:hover { .get-involved__submit:hover {
background: var(--color-brand-purple); background: var(--color-slate);
} }
@media (max-width: 768px) { @media (max-width: 768px) {

15
frontend/rabbi_gerzi/src/views/LoginPage.vue
View file

@ -77,7 +77,7 @@ async function handleSubmit(): Promise<void> {
} }
.login-card { .login-card {
background: var(--color-cream); background: var(--color-white);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 8px; border-radius: 8px;
padding: 2.5rem; padding: 2.5rem;
@ -86,9 +86,9 @@ async function handleSubmit(): Promise<void> {
} }
.login-card__title { .login-card__title {
font-family: var(--font-display); font-family: var(--font-serif);
font-size: 1.5rem; font-size: 1.5rem;
color: var(--color-brand-purple); color: var(--color-slate);
text-align: center; text-align: center;
margin: 0 0 1.5rem; margin: 0 0 1.5rem;
} }
@ -117,13 +117,13 @@ async function handleSubmit(): Promise<void> {
font-family: var(--font-sans); font-family: var(--font-sans);
font-size: 0.9375rem; font-size: 0.9375rem;
color: var(--color-text); color: var(--color-text);
background: var(--color-light-bg); background: var(--color-white);
outline: none; outline: none;
transition: border-color 0.15s ease; transition: border-color 0.15s ease;
} }
.login-card__input:focus { .login-card__input:focus {
border-color: var(--color-gold); border-color: var(--color-olive);
} }
.login-card__error { .login-card__error {
@ -138,8 +138,7 @@ async function handleSubmit(): Promise<void> {
.login-card__submit { .login-card__submit {
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
background: var(--color-brand-purple); background: var(--color-olive);
border: 1px solid var(--color-gold);
color: var(--color-white); color: var(--color-white);
font-family: var(--font-sans); font-family: var(--font-sans);
font-size: 0.9375rem; font-size: 0.9375rem;
@ -152,7 +151,7 @@ async function handleSubmit(): Promise<void> {
} }
.login-card__submit:hover:not(:disabled) { .login-card__submit:hover:not(:disabled) {
background: var(--color-brand-purple); background: var(--color-slate);
} }
.login-card__submit:disabled { .login-card__submit:disabled {

26
frontend/rabbi_gerzi/src/views/MediaPage.vue
View file

@ -77,7 +77,7 @@ onMounted(() => {
<style scoped> <style scoped>
.media-page { .media-page {
min-height: 100vh; min-height: 100vh;
background: var(--color-light-bg); background: var(--color-white);
} }
.media-page__main { .media-page__main {
@ -91,8 +91,8 @@ onMounted(() => {
.media-page__heading { .media-page__heading {
margin: 0; margin: 0;
color: var(--color-brand-purple); color: #2c2c2c;
font-family: var(--font-display); font-family: var(--font-serif);
font-size: clamp(2.6rem, 4.8vw, 3.2rem); font-size: clamp(2.6rem, 4.8vw, 3.2rem);
font-weight: 400; font-weight: 400;
line-height: 1.1; line-height: 1.1;
@ -107,7 +107,7 @@ onMounted(() => {
margin: 0 auto; margin: 0 auto;
padding: 1rem 1.25rem; padding: 1rem 1.25rem;
color: var(--color-text-muted); color: var(--color-text-muted);
background: var(--color-cream); background: var(--color-white);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 8px; border-radius: 8px;
font-size: 0.95rem; font-size: 0.95rem;
@ -129,9 +129,9 @@ onMounted(() => {
.media-page__card { .media-page__card {
min-height: 448px; min-height: 448px;
padding: 3.1rem 3rem 2.7rem; padding: 3.1rem 3rem 2.7rem;
background: var(--color-cream); background: var(--color-white);
border: 1px solid rgb(201 168 76 / 54%); border: 1px solid #e5cf9f;
border-radius: 8px; border-radius: 17px;
color: inherit; color: inherit;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
@ -143,13 +143,13 @@ onMounted(() => {
a.media-page__card:hover, a.media-page__card:hover,
a.media-page__card:focus-visible { a.media-page__card:focus-visible {
border-color: var(--color-gold); border-color: #d4ad5f;
box-shadow: 0 14px 35px rgb(44 44 44 / 10%); box-shadow: 0 14px 35px rgb(44 44 44 / 10%);
transform: translateY(-2px); transform: translateY(-2px);
} }
a.media-page__card:focus-visible { a.media-page__card:focus-visible {
outline: 3px solid rgb(201 168 76 / 42%); outline: 3px solid rgb(212 173 95 / 45%);
outline-offset: 4px; outline-offset: 4px;
} }
@ -167,8 +167,8 @@ a.media-page__card:focus-visible {
.media-page__card-title { .media-page__card-title {
margin: 0; margin: 0;
color: var(--color-brand-purple); color: #333333;
font-family: var(--font-display); font-family: var(--font-serif);
font-size: clamp(2rem, 3.7vw, 2.4rem); font-size: clamp(2rem, 3.7vw, 2.4rem);
font-weight: 400; font-weight: 400;
line-height: 1.2; line-height: 1.2;
@ -177,8 +177,8 @@ a.media-page__card:focus-visible {
.media-page__card-description { .media-page__card-description {
max-width: 35rem; max-width: 35rem;
margin: 2.15rem auto 0; margin: 2.15rem auto 0;
color: var(--color-text); color: #333333;
font-family: var(--font-sans); font-family: var(--font-serif);
font-size: clamp(1.25rem, 2.3vw, 1.45rem); font-size: clamp(1.25rem, 2.3vw, 1.45rem);
line-height: 1.38; line-height: 1.38;
} }