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

align pilzno brand design

Browse source
This commit is contained in:
Yisroel Baum 2026-06-22 11:28:35 +03:00
parent ca6490d982
commit b6fe734ccb
Signed by: yisroelbaum
GPG key ID: 0FA60884F75520A9
15 changed files with 401 additions and 331 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -57,7 +57,8 @@ describe('homepage hero', () => {
it('uses Pilzno brand colors and typography tokens', () => { it('uses Pilzno brand colors and typography tokens', () => {
cy.get('[data-cy="hero"]').then((heroElements) => { cy.get('[data-cy="hero"]').then((heroElements) => {
const heroStyle = getComputedStyle(heroElements[0]) 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()) expect(documentStyle.getPropertyValue('--color-brand-purple').trim())
.to.equal('#2a1f3d') .to.equal('#2a1f3d')

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=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" 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"
rel="stylesheet" rel="stylesheet"
> >
</head> </head>

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

@ -1,14 +1,27 @@
:root { :root {
--color-cream: #f4efe1; --color-brand-purple: #2a1f3d;
--color-slate: #2b3f4e; --color-brand-purple-dark: #20182f;
--color-slate-dark: #213240; --color-gold: #c9a84c;
--color-olive: #5e6b4c; --color-cream: #faf9f5;
--color-text: #1f1f1f; --color-light-bg: #f5f2ec;
--color-text-muted: #5a5a5a; --color-body-text: #3d3530;
--color-white: #ffffff; --color-text: var(--color-body-text);
--color-border: #e6e1d2; --color-text-muted: #756b62;
--font-serif: 'Merriweather', Georgia, serif; --color-border: #ded6c8;
--font-sans: 'Inter', system-ui, -apple-system, sans-serif; --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; padding: 0;
font-family: var(--font-sans); font-family: var(--font-sans);
color: var(--color-text); color: var(--color-text);
background: var(--color-white); background: var(--color-cream);
-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-slate); color: var(--color-brand-purple);
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-slate); border-color: var(--color-brand-purple);
color: var(--color-slate); color: var(--color-brand-purple);
} }
.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-white); background: var(--color-cream);
} }
.rich-text-editor:focus-within { .rich-text-editor:focus-within {
border-color: var(--color-slate); border-color: var(--color-brand-purple);
} }
.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: #fbfaf6; background: var(--color-light-bg);
} }
.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-white); background: var(--color-cream);
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-white); background: var(--color-cream);
} }
.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-slate); background: var(--color-brand-purple);
outline: none; outline: none;
} }
@ -844,7 +844,7 @@ function deleteTable(): void {
} }
.rich-text-editor__content { .rich-text-editor__content {
background: var(--color-white); background: var(--color-cream);
} }
.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: #2c2c2c; color: var(--color-brand-purple);
font-family: var(--font-serif); font-family: var(--font-display);
font-weight: 500; font-weight: 500;
line-height: 1.25; line-height: 1.25;
} }
@ -900,17 +900,19 @@ 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-olive); border-left: 3px solid var(--color-gold);
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: #fff3a7; background: rgb(201 168 76 / 28%);
} }
.rich-text-editor__content :deep(a) { .rich-text-editor__content :deep(a) {
color: var(--color-slate); color: var(--color-brand-purple);
font-weight: 600; font-weight: 600;
text-decoration: underline; text-decoration: underline;
text-underline-offset: 0.16em; text-underline-offset: 0.16em;
@ -943,7 +945,7 @@ function deleteTable(): void {
} }
.rich-text-editor__content :deep(th) { .rich-text-editor__content :deep(th) {
background: #f6f3eb; background: var(--color-light-bg);
font-weight: 700; font-weight: 700;
} }

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

@ -17,11 +17,6 @@ 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: '♫',
@ -43,7 +38,7 @@ const footerLinkColumns: FooterLink[][] = [
[ [
{ {
kind: 'external', kind: 'external',
label: 'Donate', label: 'Invest in Pilzno',
linkAttributes: donateLinkAttributes, linkAttributes: donateLinkAttributes,
}, },
{ kind: 'route', label: 'Contact', to: '/contact' }, { kind: 'route', label: 'Contact', to: '/contact' },
@ -55,7 +50,13 @@ 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">
<img v-bind="signatureImage" class="site-footer__signature" /> <RouterLink class="site-footer__brand-link" to="/">
<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"
@ -94,7 +95,8 @@ const footerLinkColumns: FooterLink[][] = [
<style scoped> <style scoped>
.site-footer { .site-footer {
padding: 4rem 2rem 2rem; padding: 4rem 2rem 2rem;
background: var(--color-white); color: var(--color-cream);
background: var(--color-brand-purple);
border-top: 1px solid var(--color-border); border-top: 1px solid var(--color-border);
} }
@ -113,9 +115,40 @@ const footerLinkColumns: FooterLink[][] = [
gap: 1rem; gap: 1rem;
} }
.site-footer__signature { .site-footer__brand-link {
width: auto; display: flex;
height: 40px; flex-direction: column;
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 {
@ -129,13 +162,14 @@ const footerLinkColumns: FooterLink[][] = [
justify-content: center; justify-content: center;
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
color: var(--color-text-muted); color: var(--color-cream);
border: 1px solid var(--color-border); border: 1px solid rgb(201 168 76 / 72%);
border-radius: 6px; border-radius: 6px;
} }
.site-footer__social-link:hover { .site-footer__social-link:hover {
background: var(--color-cream); color: var(--color-brand-purple);
background: var(--color-gold);
} }
.site-footer__links { .site-footer__links {
@ -154,18 +188,18 @@ const footerLinkColumns: FooterLink[][] = [
} }
.site-footer__link-column a { .site-footer__link-column a {
color: var(--color-text); color: rgb(250 249 245 / 84%);
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-slate); color: var(--color-gold);
} }
.site-footer__copyright { .site-footer__copyright {
margin: 0; margin: 0;
color: var(--color-text-muted); color: rgb(250 249 245 / 58%);
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,7 +11,6 @@ interface ContextualNavAction {
interface HeaderNavItem { interface HeaderNavItem {
label: string label: string
icon: string
} }
interface InternalHeaderNavItem extends HeaderNavItem { interface InternalHeaderNavItem extends HeaderNavItem {
@ -21,11 +20,6 @@ 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()
}) })
@ -35,14 +29,13 @@ async function handleLogout(): Promise<void> {
} }
const navItems: InternalHeaderNavItem[] = [ const navItems: InternalHeaderNavItem[] = [
{ label: 'Torah Media', href: '/media', icon: '▶' }, { label: 'Torah Media', href: '/media' },
{ label: 'About', href: '/about', icon: 'ⓘ' }, { label: 'About', href: '/about' },
{ label: 'Contact', href: '/contact', icon: '➤' }, { label: 'Contact', href: '/contact' },
] ]
const donateNavItem: HeaderNavItem = { const donateNavItem: HeaderNavItem = {
label: 'Donate', label: 'Invest in Pilzno',
icon: '♡',
} }
const routeElementId = computed(() => { const routeElementId = computed(() => {
@ -85,7 +78,10 @@ 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="/">
<img v-bind="signatureImage" class="site-header__signature" /> <span class="site-header__brand-title">Rabbi Yehoshua Gerzi</span>
<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
@ -94,15 +90,12 @@ 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 v-bind="donateLinkAttributes" class="site-header__nav-link"> <a
<span class="site-header__nav-icon" aria-hidden="true"> v-bind="donateLinkAttributes"
{{ donateNavItem.icon }} class="site-header__nav-link site-header__nav-link--invest"
</span> >
<span>{{ donateNavItem.label }}</span> <span>{{ donateNavItem.label }}</span>
</a> </a>
<RouterLink <RouterLink
@ -134,60 +127,95 @@ const contextualNavAction = computed<ContextualNavAction | null>(() => {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 1rem 2rem; padding: 0.9rem 2rem;
background: rgba(244, 239, 225, 0.85); background: rgb(250 249 245 / 92%);
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: inline-flex; display: flex;
align-items: center; flex-direction: column;
gap: 0.1rem;
min-width: 12rem;
} }
.site-header__signature { .site-header__brand-title {
height: 36px; color: var(--color-brand-purple);
width: auto; font-family: var(--font-display);
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;
gap: 0.75rem; align-items: center;
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;
gap: 0.4rem; min-height: 2rem;
padding: 0.5rem 1rem; padding: 0.15rem 0;
background: var(--color-white); background: transparent;
border: 1px solid var(--color-border); border: 0;
border-radius: 9999px; border-bottom: 1px solid transparent;
font-size: 0.95rem; font-family: var(--font-sans);
font-size: 0.78rem;
font-weight: 500; font-weight: 500;
letter-spacing: 0.08em;
color: var(--color-text); color: var(--color-text);
transition: background 0.15s ease; text-transform: uppercase;
transition:
border-color 0.15s ease,
color 0.15s ease;
} }
.site-header__nav-link:hover { .site-header__nav-link:hover {
background: var(--color-cream); color: var(--color-brand-purple);
border-color: var(--color-gold);
} }
.site-header__nav-icon { .site-header__nav-link--invest {
display: inline-block; padding: 0.45rem 0.8rem;
font-size: 0.85rem; color: var(--color-brand-purple);
color: var(--color-slate); border: 1px solid var(--color-gold);
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 {
padding: 0.4rem 0.75rem; font-size: 0.72rem;
font-size: 0.85rem;
} }
} }
</style> </style>

64
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">
Healthy, Integrated and Balanced Torah living, rooted in mesorah Integrated Torah life, rooted in mesorah and made practical for
and made practical for real people building real lives. 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 Healthy, Integrated and Balanced Torah living. Together, this yields an Integrated Torah life.
</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 Healthy, Integrated and Balanced Torah living. unique form of Integrated Torah life.
</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-white); background: var(--color-light-bg);
} }
.about-hero { .about-hero {
background: var(--color-cream); background: var(--color-light-bg);
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-olive); color: var(--color-gold);
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-slate); color: var(--color-brand-purple);
font-family: var(--font-serif); font-family: var(--font-display);
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-serif); font-family: var(--font-sans);
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-white);
}
.about-section--cream {
background: var(--color-cream); background: var(--color-cream);
} }
.about-section--cream {
background: var(--color-light-bg);
}
.about-section--slate { .about-section--slate {
background: var(--color-slate); background: var(--color-brand-purple);
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-serif); font-family: var(--font-sans);
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-white); background: var(--color-cream);
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-slate); color: var(--color-brand-purple);
font-family: var(--font-serif); font-family: var(--font-display);
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-serif); font-family: var(--font-sans);
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-white); background: var(--color-cream);
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-slate); color: var(--color-brand-purple);
font-family: var(--font-serif); font-family: var(--font-display);
font-weight: 500; font-weight: 500;
} }
@ -652,7 +652,7 @@ function submitNewsletter(submitEvent: Event): void {
} }
.rabbanim { .rabbanim {
background: var(--color-white); background: var(--color-cream);
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-cream); background: var(--color-light-bg);
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-white); background: var(--color-cream);
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-cream); background: var(--color-light-bg);
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: rgba(255, 255, 255, 0.48); background: rgb(250 249 245 / 54%);
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-serif); font-family: var(--font-display);
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-serif); font-family: var(--font-sans);
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-slate); outline: 2px solid var(--color-brand-purple);
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-slate); background: var(--color-brand-purple);
} }
@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-white); background: var(--color-light-bg);
} }
.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: #2c2c2c; color: var(--color-brand-purple);
font-family: var(--font-serif); font-family: var(--font-display);
font-size: 2rem; font-size: 2rem;
font-weight: 400; font-weight: 400;
line-height: 1.2; line-height: 1.2;
@ -768,6 +768,7 @@ 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 {
@ -783,7 +784,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-white); background: var(--color-cream);
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;
@ -791,7 +792,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-slate); border-color: var(--color-brand-purple);
outline: none; outline: none;
} }
@ -804,6 +805,7 @@ 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;
} }
@ -837,6 +839,7 @@ 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 {
@ -848,7 +851,7 @@ function resetInput(changeEvent: Event): void {
} }
.admin-element-page__child-link { .admin-element-page__child-link {
color: var(--color-slate); color: var(--color-brand-purple);
font-size: 0.95rem; font-size: 0.95rem;
font-weight: 600; font-weight: 600;
} }
@ -899,8 +902,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-slate); border-color: var(--color-brand-purple);
color: var(--color-slate); color: var(--color-brand-purple);
} }
.admin-element-page__child-add { .admin-element-page__child-add {
@ -931,7 +934,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-white); background: var(--color-cream);
font-family: var(--font-sans); font-family: var(--font-sans);
font-size: 0.9rem; font-size: 0.9rem;
font-weight: 600; font-weight: 600;
@ -950,7 +953,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-slate); border-color: var(--color-brand-purple);
} }
.admin-element-page__actions { .admin-element-page__actions {
@ -962,10 +965,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-slate); border: 1px solid var(--color-brand-purple);
border-radius: 4px; border-radius: 4px;
color: var(--color-white); color: var(--color-white);
background: var(--color-slate); background: var(--color-brand-purple);
font-family: var(--font-sans); font-family: var(--font-sans);
font-size: 0.95rem; font-size: 0.95rem;
font-weight: 600; font-weight: 600;
@ -984,7 +987,7 @@ function resetInput(changeEvent: Event): void {
.admin-element-page__status--inline { .admin-element-page__status--inline {
margin: 0; margin: 0;
color: var(--color-slate); color: var(--color-brand-purple);
} }
.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-white); background: var(--color-light-bg);
} }
.contact-hero { .contact-hero {
background: var(--color-cream); background: var(--color-light-bg);
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-olive); color: var(--color-gold);
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-slate); color: var(--color-brand-purple);
font-family: var(--font-serif); font-family: var(--font-display);
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-serif); font-family: var(--font-sans);
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-white); background: var(--color-cream);
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-white); background: var(--color-cream);
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-cream); background: var(--color-light-bg);
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-slate); outline: 2px solid var(--color-brand-purple);
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-text); background: var(--color-brand-purple);
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-slate); background: var(--color-brand-purple);
} }
.contact-social { .contact-social {
padding: 2rem; padding: 2rem;
background: var(--color-cream); background: var(--color-light-bg);
} }
.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-white); background: var(--color-cream);
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-slate); border-color: var(--color-brand-purple);
} }
.get-involved { .get-involved {
background: var(--color-cream); background: var(--color-light-bg);
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: rgba(255, 255, 255, 0.48); background: rgb(250 249 245 / 54%);
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-serif); font-family: var(--font-sans);
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-white); background: var(--color-light-bg);
} }
.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: #2c2c2c; color: var(--color-brand-purple);
font-family: var(--font-serif); font-family: var(--font-display);
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: #333333; color: var(--color-text);
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: #2c2c2c; color: var(--color-brand-purple);
font-family: var(--font-serif); font-family: var(--font-display);
font-weight: 500; font-weight: 500;
line-height: 1.25; line-height: 1.25;
} }
@ -420,22 +420,24 @@ 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-olive); border-left: 3px solid var(--color-gold);
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: #2c2c2c; color: var(--color-brand-purple);
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: #fff3a7; background: rgb(201 168 76 / 28%);
} }
.element-page__rich-text :deep(a) { .element-page__rich-text :deep(a) {
color: var(--color-slate); color: var(--color-brand-purple);
font-weight: 600; font-weight: 600;
text-decoration: underline; text-decoration: underline;
text-underline-offset: 0.16em; text-underline-offset: 0.16em;
@ -468,7 +470,7 @@ function isShortYoutubeHost(hostname: string): boolean {
} }
.element-page__rich-text :deep(th) { .element-page__rich-text :deep(th) {
background: #f6f3eb; background: var(--color-light-bg);
font-weight: 700; font-weight: 700;
} }
@ -502,7 +504,8 @@ 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-olive); background: var(--color-brand-purple);
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;
@ -517,13 +520,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: #4d5b3c; background: var(--color-body-text);
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(94 107 76 / 38%); outline: 3px solid rgb(201 168 76 / 42%);
outline-offset: 4px; outline-offset: 4px;
} }
@ -542,11 +545,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-white); background: var(--color-cream);
border: 1px solid #e5cf9f; border: 1px solid rgb(201 168 76 / 54%);
border-radius: 8px; border-radius: 8px;
color: #333333; color: var(--color-brand-purple);
font-family: var(--font-serif); font-family: var(--font-display);
font-size: 1.25rem; font-size: 1.25rem;
line-height: 1.25; line-height: 1.25;
text-align: center; text-align: center;
@ -572,13 +575,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: #d4ad5f; border-color: var(--color-gold);
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(212 173 95 / 45%); outline: 3px solid rgb(201 168 76 / 42%);
outline-offset: 4px; outline-offset: 4px;
} }
@ -587,7 +590,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-white); background: var(--color-cream);
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,26 +260,22 @@ 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">
<h1 class="hero__headline"> <p class="hero__eyebrow">PILZNO · RAMAT BET SHEMESH</p>
Let&rsquo;s upgrade our lives to a <h1 class="hero__headline">Rabbi Yehoshua Gerzi</h1>
<em>healthy</em>, <em>integrated</em>, and <em>balanced</em> Torah <p class="hero__tagline">Create Geula · Elevate Life</p>
existence. <p class="hero__lede">
</h1> Guiding you toward a Geula mindset and an Integrated Torah life
<p class="hero__attribution">Rabbi Yehoshua Gerzi</p> rooted in ancient wisdom, warm community, and deliberate growth.
</p>
</div> </div>
<div class="hero__portrait-frame"> <div class="hero__portrait-panel">
<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-portrait" data-cy="hero-rabbi-portrait"
/> />
</div> </div>
</div> </div>
@ -305,10 +301,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 achieve a state of &ldquo;Healthy, Integrated and Balanced Torah to build an Integrated Torah life from a Geula mindset. His teachings
Living.&rdquo; His teachings weave together timeless Torah wisdom, weave together timeless Torah wisdom, mystical insights and practical
mystical insights and practical guidance, making ancient wisdom guidance, making ancient wisdom accessible and transformative for
accessible and transformative for modern lives. 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
@ -539,123 +535,110 @@ function projectCardStyle(project: Project): string {
.hero { .hero {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
min-height: 110vh; min-height: min(760px, calc(100vh - 4rem));
display: flex; display: flex;
align-items: center; align-items: center;
color: var(--color-cream);
background: var(--color-brand-purple);
} }
.hero__backdrop { .hero::after {
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;
width: 100%; right: 0;
height: 100%; width: min(9rem, 22vw);
object-fit: cover; height: min(9rem, 22vw);
object-position: center 44%; border-right: 1px solid var(--color-gold);
z-index: 0; border-bottom: 1px solid var(--color-gold);
}
.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: 1fr auto; grid-template-columns: minmax(0, 0.98fr) minmax(260px, 0.52fr);
align-items: center; align-items: center;
gap: 0.5rem; gap: clamp(2rem, 6vw, 5rem);
width: 100%; width: 100%;
max-width: 1200px; max-width: 1180px;
margin: 0 auto; margin: 0 auto;
padding: 6rem 2rem; padding: clamp(4rem, 8vw, 7rem) 2rem;
transform: translateY(clamp(-15.25rem, calc(-22vh - 20px), -8.25rem));
} }
.hero__text { .hero__text {
max-width: 36rem; max-width: 44rem;
}
.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 {
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(1.75rem, 3.2vw, 2.8rem);
line-height: 1.25;
color: var(--color-white);
margin: 0; margin: 0;
color: var(--color-cream);
font-family: var(--font-display);
font-size: clamp(4.25rem, 8vw, 7rem);
font-weight: 400;
line-height: 0.92;
} }
.hero__headline em { .hero__tagline {
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__attribution { .hero__lede {
margin: 1.5rem 0 0 0; max-width: 36rem;
font-size: 0.95rem; margin: 1.8rem 0 0;
color: var(--color-white); color: rgb(250 249 245 / 82%);
opacity: 0.85; font-family: var(--font-sans);
font-size: clamp(1.04rem, 1.8vw, 1.24rem);
font-weight: 300;
line-height: 1.8;
} }
.hero__portrait-frame { .hero__portrait-panel {
--portrait-frame-size: clamp(200px, 24vw, 350px);
width: var(--portrait-frame-size);
height: var(--portrait-frame-size);
position: relative; position: relative;
border-radius: 50%; align-self: stretch;
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%);
.hero__portrait-frame::before { border-radius: 8px;
content: ''; background: rgb(250 249 245 / 7%);
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 {
position: relative;
z-index: 1;
width: 110%;
height: auto;
display: block; display: block;
align-self: end;
width: min(88%, 25rem);
height: auto;
object-fit: contain;
} }
.discover-path { .discover-path {
background: var(--color-slate); background: var(--color-brand-purple);
color: var(--color-white); color: var(--color-white);
padding: 5rem 2rem; padding: 5rem 2rem;
} }
@ -669,24 +652,24 @@ function projectCardStyle(project: Project): string {
.discover-path__icon { .discover-path__icon {
width: 110px; width: 110px;
height: auto; height: auto;
color: rgba(255, 255, 255, 0.7); color: rgb(250 249 245 / 70%);
margin: 0 auto 2rem; margin: 0 auto 2rem;
display: block; display: block;
} }
.discover-path__heading { .discover-path__heading {
font-family: var(--font-serif); font-family: var(--font-display);
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-serif); font-family: var(--font-sans);
font-weight: 300; font-weight: 300;
font-size: 1.05rem; font-size: 1.05rem;
line-height: 1.7; line-height: 1.7;
color: rgba(255, 255, 255, 0.85); color: rgb(250 249 245 / 85%);
margin: 0 0 1.25rem 0; margin: 0 0 1.25rem 0;
} }
@ -705,10 +688,10 @@ function projectCardStyle(project: Project): string {
} }
.core-teachings__heading { .core-teachings__heading {
font-family: var(--font-serif); font-family: var(--font-display);
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-slate); color: var(--color-brand-purple);
text-align: center; text-align: center;
margin: 0 0 3rem 0; margin: 0 0 3rem 0;
} }
@ -729,20 +712,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-slate); color: var(--color-brand-purple);
margin-bottom: 1rem; margin-bottom: 1rem;
font-weight: 300; font-weight: 300;
} }
.core-teachings__label { .core-teachings__label {
font-family: var(--font-serif); font-family: var(--font-sans);
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-slate); background: var(--color-brand-purple);
color: var(--color-white); color: var(--color-white);
padding: 5rem 2rem; padding: 5rem 2rem;
} }
@ -756,32 +739,32 @@ function projectCardStyle(project: Project): string {
.unique-voice__icon { .unique-voice__icon {
width: 140px; width: 140px;
height: auto; height: auto;
color: rgba(255, 255, 255, 0.7); color: rgb(250 249 245 / 70%);
display: block; display: block;
margin: 0 auto 2rem; margin: 0 auto 2rem;
} }
.unique-voice__heading { .unique-voice__heading {
font-family: var(--font-serif); font-family: var(--font-display);
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-serif); font-family: var(--font-sans);
font-weight: 300; font-weight: 300;
font-size: 1.05rem; font-size: 1.05rem;
line-height: 1.7; line-height: 1.7;
color: rgba(255, 255, 255, 0.85); color: rgb(250 249 245 / 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: none; border: 1px solid var(--color-gold);
border-radius: 9999px; border-radius: 4px;
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;
@ -810,10 +793,10 @@ function projectCardStyle(project: Project): string {
} }
.testimonials__heading { .testimonials__heading {
font-family: var(--font-serif); font-family: var(--font-display);
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-slate); color: var(--color-brand-purple);
margin: 0 0 2.5rem 0; margin: 0 0 2.5rem 0;
} }
@ -821,14 +804,15 @@ 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: 14px; border-radius: 8px;
margin: 0 auto; margin: 0 auto;
overflow: hidden; overflow: hidden;
} }
.testimonials__card { .testimonials__card {
background: var(--color-white); background: var(--color-white);
border-radius: 14px; border: 1px solid var(--color-border);
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));
@ -878,7 +862,7 @@ function projectCardStyle(project: Project): string {
} }
.testimonials__name { .testimonials__name {
font-family: var(--font-serif); font-family: var(--font-display);
font-weight: 500; font-weight: 500;
font-size: 1.15rem; font-size: 1.15rem;
margin: 0 0 1rem 0; margin: 0 0 1rem 0;
@ -886,7 +870,7 @@ function projectCardStyle(project: Project): string {
} }
.testimonials__quote { .testimonials__quote {
font-family: var(--font-serif); font-family: var(--font-quote);
font-style: italic; font-style: italic;
font-size: 1rem; font-size: 1rem;
line-height: 1.6; line-height: 1.6;
@ -905,7 +889,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-text); background: var(--color-brand-purple);
color: var(--color-white); color: var(--color-white);
border: none; border: none;
font-size: 1.25rem; font-size: 1.25rem;
@ -916,7 +900,7 @@ function projectCardStyle(project: Project): string {
} }
.testimonials__arrow:hover { .testimonials__arrow:hover {
background: var(--color-slate); background: var(--color-body-text);
} }
.sponsors { .sponsors {
@ -931,10 +915,10 @@ function projectCardStyle(project: Project): string {
} }
.sponsors__heading { .sponsors__heading {
font-family: var(--font-serif); font-family: var(--font-display);
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-slate); color: var(--color-brand-purple);
margin: 0 0 3rem 0; margin: 0 0 3rem 0;
} }
@ -1005,10 +989,10 @@ function projectCardStyle(project: Project): string {
} }
.projects__heading { .projects__heading {
font-family: var(--font-serif); font-family: var(--font-display);
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-slate); color: var(--color-brand-purple);
text-align: center; text-align: center;
margin: 0 0 3rem 0; margin: 0 0 3rem 0;
} }
@ -1020,7 +1004,7 @@ function projectCardStyle(project: Project): string {
} }
.projects__card { .projects__card {
border-radius: 14px; border-radius: 8px;
padding: 3rem 2rem; padding: 3rem 2rem;
aspect-ratio: 16 / 10; aspect-ratio: 16 / 10;
min-height: 240px; min-height: 240px;
@ -1040,18 +1024,18 @@ function projectCardStyle(project: Project): string {
} }
.projects__card-title { .projects__card-title {
font-family: var(--font-serif); font-family: var(--font-display);
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-serif); font-family: var(--font-sans);
font-weight: 300; font-weight: 300;
font-size: 0.95rem; font-size: 0.95rem;
line-height: 1.55; line-height: 1.55;
color: rgba(255, 255, 255, 0.9); color: rgb(250 249 245 / 90%);
margin: 0; margin: 0;
max-width: 28ch; max-width: 28ch;
} }
@ -1068,10 +1052,10 @@ function projectCardStyle(project: Project): string {
} }
.journey__heading { .journey__heading {
font-family: var(--font-serif); font-family: var(--font-display);
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-slate); color: var(--color-brand-purple);
margin: 0 0 3rem 0; margin: 0 0 3rem 0;
} }
@ -1089,7 +1073,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: 14px; border-radius: 8px;
color: var(--color-white); color: var(--color-white);
transition: transform 0.2s ease; transition: transform 0.2s ease;
} }
@ -1099,15 +1083,15 @@ function projectCardStyle(project: Project): string {
} }
.journey__card--olive { .journey__card--olive {
background: var(--color-olive); background: var(--color-gold);
} }
.journey__card--slate { .journey__card--slate {
background: var(--color-slate); background: var(--color-brand-purple);
} }
.journey__card-title { .journey__card-title {
font-family: var(--font-serif); font-family: var(--font-display);
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;
@ -1115,11 +1099,11 @@ function projectCardStyle(project: Project): string {
} }
.journey__card-body { .journey__card-body {
font-family: var(--font-serif); font-family: var(--font-sans);
font-weight: 300; font-weight: 300;
font-size: 1rem; font-size: 1rem;
line-height: 1.55; line-height: 1.55;
color: rgba(255, 255, 255, 0.9); color: rgb(250 249 245 / 90%);
margin: 0; margin: 0;
max-width: 30ch; max-width: 30ch;
} }
@ -1132,8 +1116,9 @@ function projectCardStyle(project: Project): string {
.get-involved__card { .get-involved__card {
max-width: 1100px; max-width: 1100px;
margin: 0 auto; margin: 0 auto;
background: rgba(255, 255, 255, 0.4); background: rgb(250 249 245 / 54%);
border-radius: 14px; border: 1px solid var(--color-border);
border-radius: 8px;
padding: 3rem; padding: 3rem;
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
@ -1142,7 +1127,7 @@ function projectCardStyle(project: Project): string {
} }
.get-involved__heading { .get-involved__heading {
font-family: var(--font-serif); font-family: var(--font-display);
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);
@ -1150,7 +1135,7 @@ function projectCardStyle(project: Project): string {
} }
.get-involved__subtext { .get-involved__subtext {
font-family: var(--font-serif); font-family: var(--font-sans);
font-size: 1rem; font-size: 1rem;
line-height: 1.55; line-height: 1.55;
color: var(--color-text-muted); color: var(--color-text-muted);
@ -1187,7 +1172,7 @@ function projectCardStyle(project: Project): string {
} }
.get-involved__input:focus { .get-involved__input:focus {
outline: 2px solid var(--color-slate); outline: 2px solid var(--color-brand-purple);
outline-offset: 2px; outline-offset: 2px;
} }
@ -1204,7 +1189,7 @@ function projectCardStyle(project: Project): string {
} }
.get-involved__submit:hover { .get-involved__submit:hover {
background: var(--color-slate); background: var(--color-brand-purple);
} }
@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-white); background: var(--color-cream);
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-serif); font-family: var(--font-display);
font-size: 1.5rem; font-size: 1.5rem;
color: var(--color-slate); color: var(--color-brand-purple);
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-white); background: var(--color-light-bg);
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-olive); border-color: var(--color-gold);
} }
.login-card__error { .login-card__error {
@ -138,7 +138,8 @@ async function handleSubmit(): Promise<void> {
.login-card__submit { .login-card__submit {
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
background: var(--color-olive); background: var(--color-brand-purple);
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;
@ -151,7 +152,7 @@ async function handleSubmit(): Promise<void> {
} }
.login-card__submit:hover:not(:disabled) { .login-card__submit:hover:not(:disabled) {
background: var(--color-slate); background: var(--color-brand-purple);
} }
.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-white); background: var(--color-light-bg);
} }
.media-page__main { .media-page__main {
@ -91,8 +91,8 @@ onMounted(() => {
.media-page__heading { .media-page__heading {
margin: 0; margin: 0;
color: #2c2c2c; color: var(--color-brand-purple);
font-family: var(--font-serif); font-family: var(--font-display);
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-white); background: var(--color-cream);
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-white); background: var(--color-cream);
border: 1px solid #e5cf9f; border: 1px solid rgb(201 168 76 / 54%);
border-radius: 17px; border-radius: 8px;
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: #d4ad5f; border-color: var(--color-gold);
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(212 173 95 / 45%); outline: 3px solid rgb(201 168 76 / 42%);
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: #333333; color: var(--color-brand-purple);
font-family: var(--font-serif); font-family: var(--font-display);
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: #333333; color: var(--color-text);
font-family: var(--font-serif); font-family: var(--font-sans);
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;
} }