align pilzno brand design
This commit is contained in:
parent
ca6490d982
commit
b6fe734ccb
GPG key ID:
0FA60884F75520A9
15 changed files with 401 additions and 331 deletions
|
|
@ -57,7 +57,8 @@ describe('homepage hero', () => {
|
|||
it('uses Pilzno brand colors and typography tokens', () => {
|
||||
cy.get('[data-cy="hero"]').then((heroElements) => {
|
||||
const heroStyle = getComputedStyle(heroElements[0])
|
||||
const documentStyle = getComputedStyle(document.documentElement)
|
||||
const appDocument = heroElements[0].ownerDocument
|
||||
const documentStyle = getComputedStyle(appDocument.documentElement)
|
||||
|
||||
expect(documentStyle.getPropertyValue('--color-brand-purple').trim())
|
||||
.to.equal('#2a1f3d')
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<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"
|
||||
>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,27 @@
|
|||
:root {
|
||||
--color-cream: #f4efe1;
|
||||
--color-slate: #2b3f4e;
|
||||
--color-slate-dark: #213240;
|
||||
--color-olive: #5e6b4c;
|
||||
--color-text: #1f1f1f;
|
||||
--color-text-muted: #5a5a5a;
|
||||
--color-white: #ffffff;
|
||||
--color-border: #e6e1d2;
|
||||
--font-serif: 'Merriweather', Georgia, serif;
|
||||
--font-sans: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
--color-brand-purple: #2a1f3d;
|
||||
--color-brand-purple-dark: #20182f;
|
||||
--color-gold: #c9a84c;
|
||||
--color-cream: #faf9f5;
|
||||
--color-light-bg: #f5f2ec;
|
||||
--color-body-text: #3d3530;
|
||||
--color-text: var(--color-body-text);
|
||||
--color-text-muted: #756b62;
|
||||
--color-border: #ded6c8;
|
||||
--color-white: var(--color-cream);
|
||||
--color-slate: var(--color-brand-purple);
|
||||
--color-slate-dark: var(--color-brand-purple-dark);
|
||||
--color-olive: var(--color-gold);
|
||||
--color-pillar-physical: #dce6d4;
|
||||
--color-pillar-relationships: #e8d8d4;
|
||||
--color-pillar-wisdom: #dbd6e8;
|
||||
--color-pillar-guidance: #d0dce8;
|
||||
--font-display: 'Cormorant Garamond', Georgia, serif;
|
||||
--font-ui: 'Jost', system-ui, -apple-system, sans-serif;
|
||||
--font-hebrew: 'Frank Ruhl Libre', serif;
|
||||
--font-quote: 'Lora', Georgia, serif;
|
||||
--font-serif: var(--font-display);
|
||||
--font-sans: var(--font-ui);
|
||||
}
|
||||
|
||||
* {
|
||||
|
|
@ -21,7 +34,7 @@ body {
|
|||
padding: 0;
|
||||
font-family: var(--font-sans);
|
||||
color: var(--color-text);
|
||||
background: var(--color-white);
|
||||
background: var(--color-cream);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ defineProps<Props>()
|
|||
gap: 0.35rem;
|
||||
min-height: 2.2rem;
|
||||
padding: 0.35rem 0;
|
||||
color: var(--color-slate);
|
||||
color: var(--color-brand-purple);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
|
|
|
|||
|
|
@ -127,8 +127,8 @@ function siblingElementAtOffset(offset: number): ChildElement | null {
|
|||
|
||||
.element-sibling-navigation__link:hover,
|
||||
.element-sibling-navigation__link:focus-visible {
|
||||
border-color: var(--color-slate);
|
||||
color: var(--color-slate);
|
||||
border-color: var(--color-brand-purple);
|
||||
color: var(--color-brand-purple);
|
||||
}
|
||||
|
||||
.element-sibling-navigation__link:focus-visible {
|
||||
|
|
|
|||
|
|
@ -775,11 +775,11 @@ function deleteTable(): void {
|
|||
overflow: hidden;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
background: var(--color-white);
|
||||
background: var(--color-cream);
|
||||
}
|
||||
|
||||
.rich-text-editor:focus-within {
|
||||
border-color: var(--color-slate);
|
||||
border-color: var(--color-brand-purple);
|
||||
}
|
||||
|
||||
.rich-text-editor__toolbar {
|
||||
|
|
@ -789,7 +789,7 @@ function deleteTable(): void {
|
|||
gap: 0.45rem;
|
||||
padding: 0.55rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
background: #fbfaf6;
|
||||
background: var(--color-light-bg);
|
||||
}
|
||||
|
||||
.rich-text-editor__select {
|
||||
|
|
@ -798,7 +798,7 @@ function deleteTable(): void {
|
|||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
color: var(--color-text);
|
||||
background: var(--color-white);
|
||||
background: var(--color-cream);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 0.86rem;
|
||||
}
|
||||
|
|
@ -808,7 +808,7 @@ function deleteTable(): void {
|
|||
overflow: hidden;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
background: var(--color-white);
|
||||
background: var(--color-cream);
|
||||
}
|
||||
|
||||
.rich-text-editor__button {
|
||||
|
|
@ -833,7 +833,7 @@ function deleteTable(): void {
|
|||
.rich-text-editor__button:focus-visible,
|
||||
.rich-text-editor__button--active {
|
||||
color: var(--color-white);
|
||||
background: var(--color-slate);
|
||||
background: var(--color-brand-purple);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
|
@ -844,7 +844,7 @@ function deleteTable(): void {
|
|||
}
|
||||
|
||||
.rich-text-editor__content {
|
||||
background: var(--color-white);
|
||||
background: var(--color-cream);
|
||||
}
|
||||
|
||||
.rich-text-editor__content :deep(.rich-text-editor__surface) {
|
||||
|
|
@ -869,8 +869,8 @@ function deleteTable(): void {
|
|||
.rich-text-editor__content :deep(h3),
|
||||
.rich-text-editor__content :deep(h4) {
|
||||
margin: 1.1rem 0 0.45rem;
|
||||
color: #2c2c2c;
|
||||
font-family: var(--font-serif);
|
||||
color: var(--color-brand-purple);
|
||||
font-family: var(--font-display);
|
||||
font-weight: 500;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
|
@ -900,17 +900,19 @@ function deleteTable(): void {
|
|||
.rich-text-editor__content :deep(blockquote) {
|
||||
margin: 1rem 0;
|
||||
padding: 0.1rem 0 0.1rem 1rem;
|
||||
border-left: 3px solid var(--color-olive);
|
||||
border-left: 3px solid var(--color-gold);
|
||||
color: var(--color-text-muted);
|
||||
font-family: var(--font-quote);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.rich-text-editor__content :deep(mark) {
|
||||
padding: 0 0.16em;
|
||||
background: #fff3a7;
|
||||
background: rgb(201 168 76 / 28%);
|
||||
}
|
||||
|
||||
.rich-text-editor__content :deep(a) {
|
||||
color: var(--color-slate);
|
||||
color: var(--color-brand-purple);
|
||||
font-weight: 600;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 0.16em;
|
||||
|
|
@ -943,7 +945,7 @@ function deleteTable(): void {
|
|||
}
|
||||
|
||||
.rich-text-editor__content :deep(th) {
|
||||
background: #f6f3eb;
|
||||
background: var(--color-light-bg);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -17,11 +17,6 @@ interface ExternalFooterLink {
|
|||
|
||||
type FooterLink = RouteFooterLink | ExternalFooterLink
|
||||
|
||||
const signatureImage = {
|
||||
src: '/assets/signature.png',
|
||||
alt: "R' Yehoshua Gerzi",
|
||||
}
|
||||
|
||||
const socialGlyphs: Record<SocialLinkLabel, string> = {
|
||||
YouTube: '▶',
|
||||
Spotify: '♫',
|
||||
|
|
@ -43,7 +38,7 @@ const footerLinkColumns: FooterLink[][] = [
|
|||
[
|
||||
{
|
||||
kind: 'external',
|
||||
label: 'Donate',
|
||||
label: 'Invest in Pilzno',
|
||||
linkAttributes: donateLinkAttributes,
|
||||
},
|
||||
{ kind: 'route', label: 'Contact', to: '/contact' },
|
||||
|
|
@ -55,7 +50,13 @@ const footerLinkColumns: FooterLink[][] = [
|
|||
<footer class="site-footer" data-cy="footer">
|
||||
<div class="site-footer__inner">
|
||||
<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">
|
||||
<a
|
||||
v-for="socialLink in footerSocialLinks"
|
||||
|
|
@ -94,7 +95,8 @@ const footerLinkColumns: FooterLink[][] = [
|
|||
<style scoped>
|
||||
.site-footer {
|
||||
padding: 4rem 2rem 2rem;
|
||||
background: var(--color-white);
|
||||
color: var(--color-cream);
|
||||
background: var(--color-brand-purple);
|
||||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
|
|
@ -113,9 +115,40 @@ const footerLinkColumns: FooterLink[][] = [
|
|||
gap: 1rem;
|
||||
}
|
||||
|
||||
.site-footer__signature {
|
||||
width: auto;
|
||||
height: 40px;
|
||||
.site-footer__brand-link {
|
||||
display: flex;
|
||||
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 {
|
||||
|
|
@ -129,13 +162,14 @@ const footerLinkColumns: FooterLink[][] = [
|
|||
justify-content: center;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
color: var(--color-text-muted);
|
||||
border: 1px solid var(--color-border);
|
||||
color: var(--color-cream);
|
||||
border: 1px solid rgb(201 168 76 / 72%);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.site-footer__social-link:hover {
|
||||
background: var(--color-cream);
|
||||
color: var(--color-brand-purple);
|
||||
background: var(--color-gold);
|
||||
}
|
||||
|
||||
.site-footer__links {
|
||||
|
|
@ -154,18 +188,18 @@ const footerLinkColumns: FooterLink[][] = [
|
|||
}
|
||||
|
||||
.site-footer__link-column a {
|
||||
color: var(--color-text);
|
||||
color: rgb(250 249 245 / 84%);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.site-footer__link-column a:hover {
|
||||
color: var(--color-slate);
|
||||
color: var(--color-gold);
|
||||
}
|
||||
|
||||
.site-footer__copyright {
|
||||
margin: 0;
|
||||
color: var(--color-text-muted);
|
||||
color: rgb(250 249 245 / 58%);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 0.85rem;
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@ interface ContextualNavAction {
|
|||
|
||||
interface HeaderNavItem {
|
||||
label: string
|
||||
icon: string
|
||||
}
|
||||
|
||||
interface InternalHeaderNavItem extends HeaderNavItem {
|
||||
|
|
@ -21,11 +20,6 @@ interface InternalHeaderNavItem extends HeaderNavItem {
|
|||
const authStore = useAuthStore()
|
||||
const route = useRoute()
|
||||
|
||||
const signatureImage = {
|
||||
src: '/assets/signature.png',
|
||||
alt: "R' Yehoshua Gerzi",
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
void authStore.fetchUser()
|
||||
})
|
||||
|
|
@ -35,14 +29,13 @@ async function handleLogout(): Promise<void> {
|
|||
}
|
||||
|
||||
const navItems: InternalHeaderNavItem[] = [
|
||||
{ label: 'Torah Media', href: '/media', icon: '▶' },
|
||||
{ label: 'About', href: '/about', icon: 'ⓘ' },
|
||||
{ label: 'Contact', href: '/contact', icon: '➤' },
|
||||
{ label: 'Torah Media', href: '/media' },
|
||||
{ label: 'About', href: '/about' },
|
||||
{ label: 'Contact', href: '/contact' },
|
||||
]
|
||||
|
||||
const donateNavItem: HeaderNavItem = {
|
||||
label: 'Donate',
|
||||
icon: '♡',
|
||||
label: 'Invest in Pilzno',
|
||||
}
|
||||
|
||||
const routeElementId = computed(() => {
|
||||
|
|
@ -85,7 +78,10 @@ const contextualNavAction = computed<ContextualNavAction | null>(() => {
|
|||
<template>
|
||||
<header class="site-header">
|
||||
<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>
|
||||
<nav class="site-header__nav">
|
||||
<RouterLink
|
||||
|
|
@ -94,15 +90,12 @@ const contextualNavAction = computed<ContextualNavAction | null>(() => {
|
|||
:to="item.href"
|
||||
class="site-header__nav-link"
|
||||
>
|
||||
<span class="site-header__nav-icon" aria-hidden="true">
|
||||
{{ item.icon }}
|
||||
</span>
|
||||
<span>{{ item.label }}</span>
|
||||
</RouterLink>
|
||||
<a v-bind="donateLinkAttributes" class="site-header__nav-link">
|
||||
<span class="site-header__nav-icon" aria-hidden="true">
|
||||
{{ donateNavItem.icon }}
|
||||
</span>
|
||||
<a
|
||||
v-bind="donateLinkAttributes"
|
||||
class="site-header__nav-link site-header__nav-link--invest"
|
||||
>
|
||||
<span>{{ donateNavItem.label }}</span>
|
||||
</a>
|
||||
<RouterLink
|
||||
|
|
@ -134,60 +127,95 @@ const contextualNavAction = computed<ContextualNavAction | null>(() => {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 2rem;
|
||||
background: rgba(244, 239, 225, 0.85);
|
||||
padding: 0.9rem 2rem;
|
||||
background: rgb(250 249 245 / 92%);
|
||||
backdrop-filter: blur(8px);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.site-header__brand {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.1rem;
|
||||
min-width: 12rem;
|
||||
}
|
||||
|
||||
.site-header__signature {
|
||||
height: 36px;
|
||||
width: auto;
|
||||
.site-header__brand-title {
|
||||
color: var(--color-brand-purple);
|
||||
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 {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 1.15rem;
|
||||
}
|
||||
|
||||
.site-header__nav-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
padding: 0.5rem 1rem;
|
||||
background: var(--color-white);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 9999px;
|
||||
font-size: 0.95rem;
|
||||
min-height: 2rem;
|
||||
padding: 0.15rem 0;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-bottom: 1px solid transparent;
|
||||
font-family: var(--font-sans);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.08em;
|
||||
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 {
|
||||
background: var(--color-cream);
|
||||
color: var(--color-brand-purple);
|
||||
border-color: var(--color-gold);
|
||||
}
|
||||
|
||||
.site-header__nav-icon {
|
||||
display: inline-block;
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-slate);
|
||||
.site-header__nav-link--invest {
|
||||
padding: 0.45rem 0.8rem;
|
||||
color: var(--color-brand-purple);
|
||||
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) {
|
||||
.site-header {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
gap: 0.9rem;
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
.site-header__nav {
|
||||
gap: 0.85rem;
|
||||
}
|
||||
|
||||
.site-header__nav-link {
|
||||
padding: 0.4rem 0.75rem;
|
||||
font-size: 0.85rem;
|
||||
font-size: 0.72rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -231,8 +231,8 @@ function submitNewsletter(submitEvent: Event): void {
|
|||
<p class="about-hero__eyebrow">Pilzno Institute</p>
|
||||
<h1 class="about-hero__heading">About Rabbi Gerzi</h1>
|
||||
<p class="about-hero__lede">
|
||||
Healthy, Integrated and Balanced Torah living, rooted in mesorah
|
||||
and made practical for real people building real lives.
|
||||
Integrated Torah life, rooted in mesorah and made practical for
|
||||
real people building real lives.
|
||||
</p>
|
||||
</div>
|
||||
<img
|
||||
|
|
@ -314,7 +314,7 @@ function submitNewsletter(submitEvent: Event): void {
|
|||
</div>
|
||||
|
||||
<p class="about-section__closing">
|
||||
Together, this yields Healthy, Integrated and Balanced Torah living.
|
||||
Together, this yields an Integrated Torah life.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -335,7 +335,7 @@ function submitNewsletter(submitEvent: Event): void {
|
|||
<p class="about-section__paragraph">
|
||||
In 2005, the Pilzno Rav instructed Rabbi Gerzi to continue his
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -452,11 +452,11 @@ function submitNewsletter(submitEvent: Event): void {
|
|||
<style scoped>
|
||||
.about-page {
|
||||
min-height: 100vh;
|
||||
background: var(--color-white);
|
||||
background: var(--color-light-bg);
|
||||
}
|
||||
|
||||
.about-hero {
|
||||
background: var(--color-cream);
|
||||
background: var(--color-light-bg);
|
||||
padding: 4rem 2rem 5rem;
|
||||
}
|
||||
|
||||
|
|
@ -476,7 +476,7 @@ function submitNewsletter(submitEvent: Event): void {
|
|||
.about-hero__eyebrow,
|
||||
.about-section__kicker {
|
||||
margin: 0 0 0.75rem;
|
||||
color: var(--color-olive);
|
||||
color: var(--color-gold);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
|
|
@ -487,8 +487,8 @@ function submitNewsletter(submitEvent: Event): void {
|
|||
.about-hero__heading,
|
||||
.about-section__heading {
|
||||
margin: 0;
|
||||
color: var(--color-slate);
|
||||
font-family: var(--font-serif);
|
||||
color: var(--color-brand-purple);
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(2rem, 4vw, 3.35rem);
|
||||
font-weight: 400;
|
||||
line-height: 1.12;
|
||||
|
|
@ -498,7 +498,7 @@ function submitNewsletter(submitEvent: Event): void {
|
|||
max-width: 33rem;
|
||||
margin: 1.35rem 0 0;
|
||||
color: var(--color-text-muted);
|
||||
font-family: var(--font-serif);
|
||||
font-family: var(--font-sans);
|
||||
font-size: clamp(1.05rem, 2vw, 1.25rem);
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
|
@ -517,15 +517,15 @@ function submitNewsletter(submitEvent: Event): void {
|
|||
}
|
||||
|
||||
.about-section--white {
|
||||
background: var(--color-white);
|
||||
}
|
||||
|
||||
.about-section--cream {
|
||||
background: var(--color-cream);
|
||||
}
|
||||
|
||||
.about-section--cream {
|
||||
background: var(--color-light-bg);
|
||||
}
|
||||
|
||||
.about-section--slate {
|
||||
background: var(--color-slate);
|
||||
background: var(--color-brand-purple);
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
|
|
@ -562,7 +562,7 @@ function submitNewsletter(submitEvent: Event): void {
|
|||
.about-section__closing {
|
||||
margin: 0;
|
||||
color: var(--color-text-muted);
|
||||
font-family: var(--font-serif);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 1.02rem;
|
||||
line-height: 1.78;
|
||||
}
|
||||
|
|
@ -593,7 +593,7 @@ function submitNewsletter(submitEvent: Event): void {
|
|||
|
||||
.mission-grid__item,
|
||||
.rabbanim__card {
|
||||
background: var(--color-white);
|
||||
background: var(--color-cream);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
|
@ -605,8 +605,8 @@ function submitNewsletter(submitEvent: Event): void {
|
|||
.mission-grid__title,
|
||||
.rabbanim__name {
|
||||
margin: 0;
|
||||
color: var(--color-slate);
|
||||
font-family: var(--font-serif);
|
||||
color: var(--color-brand-purple);
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.12rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.35;
|
||||
|
|
@ -617,7 +617,7 @@ function submitNewsletter(submitEvent: Event): void {
|
|||
.teacher-list__description {
|
||||
margin: 0.85rem 0 0;
|
||||
color: var(--color-text-muted);
|
||||
font-family: var(--font-serif);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 0.94rem;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
|
@ -636,14 +636,14 @@ function submitNewsletter(submitEvent: Event): void {
|
|||
grid-template-columns: minmax(180px, 0.38fr) minmax(0, 1fr);
|
||||
gap: 1rem;
|
||||
padding: 1.1rem 1.25rem;
|
||||
background: var(--color-white);
|
||||
background: var(--color-cream);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.teacher-list__name {
|
||||
color: var(--color-slate);
|
||||
font-family: var(--font-serif);
|
||||
color: var(--color-brand-purple);
|
||||
font-family: var(--font-display);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
|
@ -652,7 +652,7 @@ function submitNewsletter(submitEvent: Event): void {
|
|||
}
|
||||
|
||||
.rabbanim {
|
||||
background: var(--color-white);
|
||||
background: var(--color-cream);
|
||||
padding: 5rem 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -692,7 +692,7 @@ function submitNewsletter(submitEvent: Event): void {
|
|||
}
|
||||
|
||||
.haskamot {
|
||||
background: var(--color-cream);
|
||||
background: var(--color-light-bg);
|
||||
padding: 5rem 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -711,13 +711,13 @@ function submitNewsletter(submitEvent: Event): void {
|
|||
border-radius: 8px;
|
||||
object-fit: cover;
|
||||
object-position: center top;
|
||||
background: var(--color-white);
|
||||
background: var(--color-cream);
|
||||
border: 1px solid var(--color-border);
|
||||
box-shadow: 0 10px 30px rgb(33 50 64 / 10%);
|
||||
}
|
||||
|
||||
.get-involved {
|
||||
background: var(--color-cream);
|
||||
background: var(--color-light-bg);
|
||||
padding: 0 2rem 5rem;
|
||||
}
|
||||
|
||||
|
|
@ -729,7 +729,7 @@ function submitNewsletter(submitEvent: Event): void {
|
|||
margin: 0 auto;
|
||||
padding: 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-radius: 8px;
|
||||
}
|
||||
|
|
@ -737,7 +737,7 @@ function submitNewsletter(submitEvent: Event): void {
|
|||
.get-involved__heading {
|
||||
margin: 0 0 1.25rem;
|
||||
color: var(--color-text);
|
||||
font-family: var(--font-serif);
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(1.6rem, 2.6vw, 2.4rem);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
|
@ -746,7 +746,7 @@ function submitNewsletter(submitEvent: Event): void {
|
|||
max-width: 36ch;
|
||||
margin: 0;
|
||||
color: var(--color-text-muted);
|
||||
font-family: var(--font-serif);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 1rem;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
|
@ -780,7 +780,7 @@ function submitNewsletter(submitEvent: Event): void {
|
|||
}
|
||||
|
||||
.get-involved__input:focus {
|
||||
outline: 2px solid var(--color-slate);
|
||||
outline: 2px solid var(--color-brand-purple);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
|
|
@ -797,7 +797,7 @@ function submitNewsletter(submitEvent: Event): void {
|
|||
}
|
||||
|
||||
.get-involved__submit:hover {
|
||||
background: var(--color-slate);
|
||||
background: var(--color-brand-purple);
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
|
|
|
|||
|
|
@ -721,7 +721,7 @@ function resetInput(changeEvent: Event): void {
|
|||
<style scoped>
|
||||
.admin-element-page {
|
||||
min-height: 100vh;
|
||||
background: var(--color-white);
|
||||
background: var(--color-light-bg);
|
||||
}
|
||||
|
||||
.admin-element-page__main {
|
||||
|
|
@ -739,8 +739,8 @@ function resetInput(changeEvent: Event): void {
|
|||
|
||||
.admin-element-page__heading {
|
||||
margin: 0.35rem 0 0;
|
||||
color: #2c2c2c;
|
||||
font-family: var(--font-serif);
|
||||
color: var(--color-brand-purple);
|
||||
font-family: var(--font-display);
|
||||
font-size: 2rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.2;
|
||||
|
|
@ -768,6 +768,7 @@ function resetInput(changeEvent: Event): void {
|
|||
padding: 0.9rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
background: var(--color-cream);
|
||||
}
|
||||
|
||||
.admin-element-page__label {
|
||||
|
|
@ -783,7 +784,7 @@ function resetInput(changeEvent: Event): void {
|
|||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
color: var(--color-text);
|
||||
background: var(--color-white);
|
||||
background: var(--color-cream);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 0.96rem;
|
||||
line-height: 1.5;
|
||||
|
|
@ -791,7 +792,7 @@ function resetInput(changeEvent: Event): void {
|
|||
|
||||
.admin-element-page__input:focus,
|
||||
.admin-element-page__textarea:focus {
|
||||
border-color: var(--color-slate);
|
||||
border-color: var(--color-brand-purple);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
|
@ -804,6 +805,7 @@ function resetInput(changeEvent: Event): void {
|
|||
height: 6rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
background: var(--color-light-bg);
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
|
|
@ -837,6 +839,7 @@ function resetInput(changeEvent: Event): void {
|
|||
padding: 0.75rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
background: var(--color-light-bg);
|
||||
}
|
||||
|
||||
.admin-element-page__child-body {
|
||||
|
|
@ -848,7 +851,7 @@ function resetInput(changeEvent: Event): void {
|
|||
}
|
||||
|
||||
.admin-element-page__child-link {
|
||||
color: var(--color-slate);
|
||||
color: var(--color-brand-purple);
|
||||
font-size: 0.95rem;
|
||||
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:focus-visible {
|
||||
border-color: var(--color-slate);
|
||||
color: var(--color-slate);
|
||||
border-color: var(--color-brand-purple);
|
||||
color: var(--color-brand-purple);
|
||||
}
|
||||
|
||||
.admin-element-page__child-add {
|
||||
|
|
@ -931,7 +934,7 @@ function resetInput(changeEvent: Event): void {
|
|||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
color: var(--color-text);
|
||||
background: var(--color-white);
|
||||
background: var(--color-cream);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
|
|
@ -950,7 +953,7 @@ function resetInput(changeEvent: Event): void {
|
|||
.admin-element-page__secondary-button:focus-visible,
|
||||
.admin-element-page__pdf-link:hover,
|
||||
.admin-element-page__pdf-link:focus-visible {
|
||||
border-color: var(--color-slate);
|
||||
border-color: var(--color-brand-purple);
|
||||
}
|
||||
|
||||
.admin-element-page__actions {
|
||||
|
|
@ -962,10 +965,10 @@ function resetInput(changeEvent: Event): void {
|
|||
|
||||
.admin-element-page__save {
|
||||
padding: 0.7rem 1.4rem;
|
||||
border: 1px solid var(--color-slate);
|
||||
border: 1px solid var(--color-brand-purple);
|
||||
border-radius: 4px;
|
||||
color: var(--color-white);
|
||||
background: var(--color-slate);
|
||||
background: var(--color-brand-purple);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
|
|
@ -984,7 +987,7 @@ function resetInput(changeEvent: Event): void {
|
|||
|
||||
.admin-element-page__status--inline {
|
||||
margin: 0;
|
||||
color: var(--color-slate);
|
||||
color: var(--color-brand-purple);
|
||||
}
|
||||
|
||||
.admin-element-page__status--error {
|
||||
|
|
|
|||
|
|
@ -188,11 +188,11 @@ function submitNewsletter(submitEvent: Event): void {
|
|||
<style scoped>
|
||||
.contact-page {
|
||||
min-height: 100vh;
|
||||
background: var(--color-white);
|
||||
background: var(--color-light-bg);
|
||||
}
|
||||
|
||||
.contact-hero {
|
||||
background: var(--color-cream);
|
||||
background: var(--color-light-bg);
|
||||
padding: 4rem 2rem;
|
||||
}
|
||||
|
||||
|
|
@ -204,7 +204,7 @@ function submitNewsletter(submitEvent: Event): void {
|
|||
|
||||
.contact-hero__eyebrow {
|
||||
margin: 0 0 0.75rem;
|
||||
color: var(--color-olive);
|
||||
color: var(--color-gold);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
|
|
@ -217,8 +217,8 @@ function submitNewsletter(submitEvent: Event): void {
|
|||
.contact-social__heading,
|
||||
.get-involved__heading {
|
||||
margin: 0;
|
||||
color: var(--color-slate);
|
||||
font-family: var(--font-serif);
|
||||
color: var(--color-brand-purple);
|
||||
font-family: var(--font-display);
|
||||
font-weight: 400;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
|
@ -231,13 +231,13 @@ function submitNewsletter(submitEvent: Event): void {
|
|||
max-width: 42rem;
|
||||
margin: 1.35rem auto 0;
|
||||
color: var(--color-text-muted);
|
||||
font-family: var(--font-serif);
|
||||
font-family: var(--font-sans);
|
||||
font-size: clamp(1.05rem, 2vw, 1.25rem);
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.contact-main {
|
||||
background: var(--color-white);
|
||||
background: var(--color-cream);
|
||||
padding: 5rem 2rem;
|
||||
}
|
||||
|
||||
|
|
@ -252,7 +252,7 @@ function submitNewsletter(submitEvent: Event): void {
|
|||
|
||||
.contact-form,
|
||||
.contact-social {
|
||||
background: var(--color-white);
|
||||
background: var(--color-cream);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
|
@ -295,7 +295,7 @@ function submitNewsletter(submitEvent: Event): void {
|
|||
width: 100%;
|
||||
padding: 0.78rem 1rem;
|
||||
color: var(--color-text);
|
||||
background: var(--color-cream);
|
||||
background: var(--color-light-bg);
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
border-radius: 8px;
|
||||
font-family: var(--font-sans);
|
||||
|
|
@ -310,7 +310,7 @@ function submitNewsletter(submitEvent: Event): void {
|
|||
.contact-form__input:focus,
|
||||
.contact-form__textarea:focus,
|
||||
.get-involved__input:focus {
|
||||
outline: 2px solid var(--color-slate);
|
||||
outline: 2px solid var(--color-brand-purple);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
|
|
@ -319,7 +319,7 @@ function submitNewsletter(submitEvent: Event): void {
|
|||
margin-top: 1.25rem;
|
||||
padding: 0.85rem 1rem;
|
||||
color: var(--color-white);
|
||||
background: var(--color-text);
|
||||
background: var(--color-brand-purple);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-family: var(--font-sans);
|
||||
|
|
@ -329,12 +329,12 @@ function submitNewsletter(submitEvent: Event): void {
|
|||
|
||||
.contact-form__submit:hover,
|
||||
.get-involved__submit:hover {
|
||||
background: var(--color-slate);
|
||||
background: var(--color-brand-purple);
|
||||
}
|
||||
|
||||
.contact-social {
|
||||
padding: 2rem;
|
||||
background: var(--color-cream);
|
||||
background: var(--color-light-bg);
|
||||
}
|
||||
|
||||
.contact-social__heading {
|
||||
|
|
@ -353,7 +353,7 @@ function submitNewsletter(submitEvent: Event): void {
|
|||
justify-content: space-between;
|
||||
padding: 0.95rem 1rem;
|
||||
color: var(--color-text);
|
||||
background: var(--color-white);
|
||||
background: var(--color-cream);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
font-family: var(--font-sans);
|
||||
|
|
@ -361,11 +361,11 @@ function submitNewsletter(submitEvent: Event): void {
|
|||
}
|
||||
|
||||
.contact-social__link:hover {
|
||||
border-color: var(--color-slate);
|
||||
border-color: var(--color-brand-purple);
|
||||
}
|
||||
|
||||
.get-involved {
|
||||
background: var(--color-cream);
|
||||
background: var(--color-light-bg);
|
||||
padding: 5rem 2rem;
|
||||
}
|
||||
|
||||
|
|
@ -377,7 +377,7 @@ function submitNewsletter(submitEvent: Event): void {
|
|||
margin: 0 auto;
|
||||
padding: 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-radius: 8px;
|
||||
}
|
||||
|
|
@ -392,7 +392,7 @@ function submitNewsletter(submitEvent: Event): void {
|
|||
max-width: 36ch;
|
||||
margin: 0;
|
||||
color: var(--color-text-muted);
|
||||
font-family: var(--font-serif);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 1rem;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -332,7 +332,7 @@ function isShortYoutubeHost(hostname: string): boolean {
|
|||
<style scoped>
|
||||
.element-page {
|
||||
min-height: 100vh;
|
||||
background: var(--color-white);
|
||||
background: var(--color-light-bg);
|
||||
}
|
||||
|
||||
.element-page__main {
|
||||
|
|
@ -361,8 +361,8 @@ function isShortYoutubeHost(hostname: string): boolean {
|
|||
|
||||
.element-page__heading {
|
||||
margin: 0;
|
||||
color: #2c2c2c;
|
||||
font-family: var(--font-serif);
|
||||
color: var(--color-brand-purple);
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(2.6rem, 4.8vw, 3.2rem);
|
||||
font-weight: 400;
|
||||
line-height: 1.1;
|
||||
|
|
@ -371,7 +371,7 @@ function isShortYoutubeHost(hostname: string): boolean {
|
|||
|
||||
.element-page__rich-text {
|
||||
margin-top: 1.75rem;
|
||||
color: #333333;
|
||||
color: var(--color-text);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.75;
|
||||
|
|
@ -389,8 +389,8 @@ function isShortYoutubeHost(hostname: string): boolean {
|
|||
.element-page__rich-text :deep(h3),
|
||||
.element-page__rich-text :deep(h4) {
|
||||
margin: 1.6rem 0 0.65rem;
|
||||
color: #2c2c2c;
|
||||
font-family: var(--font-serif);
|
||||
color: var(--color-brand-purple);
|
||||
font-family: var(--font-display);
|
||||
font-weight: 500;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
|
@ -420,22 +420,24 @@ function isShortYoutubeHost(hostname: string): boolean {
|
|||
.element-page__rich-text :deep(blockquote) {
|
||||
margin: 1.35rem 0;
|
||||
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);
|
||||
font-family: var(--font-quote);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.element-page__rich-text :deep(strong) {
|
||||
color: #2c2c2c;
|
||||
color: var(--color-brand-purple);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.element-page__rich-text :deep(mark) {
|
||||
padding: 0 0.16em;
|
||||
background: #fff3a7;
|
||||
background: rgb(201 168 76 / 28%);
|
||||
}
|
||||
|
||||
.element-page__rich-text :deep(a) {
|
||||
color: var(--color-slate);
|
||||
color: var(--color-brand-purple);
|
||||
font-weight: 600;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 0.16em;
|
||||
|
|
@ -468,7 +470,7 @@ function isShortYoutubeHost(hostname: string): boolean {
|
|||
}
|
||||
|
||||
.element-page__rich-text :deep(th) {
|
||||
background: #f6f3eb;
|
||||
background: var(--color-light-bg);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
|
|
@ -502,7 +504,8 @@ function isShortYoutubeHost(hostname: string): boolean {
|
|||
min-height: 2.75rem;
|
||||
padding: 0.7rem 1.15rem;
|
||||
color: var(--color-white);
|
||||
background: var(--color-olive);
|
||||
background: var(--color-brand-purple);
|
||||
border: 1px solid var(--color-gold);
|
||||
border-radius: 8px;
|
||||
font-family: var(--font-sans);
|
||||
font-size: 0.95rem;
|
||||
|
|
@ -517,13 +520,13 @@ function isShortYoutubeHost(hostname: string): boolean {
|
|||
|
||||
.element-page__pdf-link:hover,
|
||||
.element-page__pdf-link:focus-visible {
|
||||
background: #4d5b3c;
|
||||
background: var(--color-body-text);
|
||||
box-shadow: 0 10px 24px rgb(44 44 44 / 12%);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
|
|
@ -542,11 +545,11 @@ function isShortYoutubeHost(hostname: string): boolean {
|
|||
.element-page__child-link {
|
||||
display: block;
|
||||
padding: 1rem 1.2rem;
|
||||
background: var(--color-white);
|
||||
border: 1px solid #e5cf9f;
|
||||
background: var(--color-cream);
|
||||
border: 1px solid rgb(201 168 76 / 54%);
|
||||
border-radius: 8px;
|
||||
color: #333333;
|
||||
font-family: var(--font-serif);
|
||||
color: var(--color-brand-purple);
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.25;
|
||||
text-align: center;
|
||||
|
|
@ -572,13 +575,13 @@ function isShortYoutubeHost(hostname: string): boolean {
|
|||
|
||||
.element-page__child-link:hover,
|
||||
.element-page__child-link:focus-visible {
|
||||
border-color: #d4ad5f;
|
||||
border-color: var(--color-gold);
|
||||
box-shadow: 0 10px 28px rgb(44 44 44 / 9%);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
|
|
@ -587,7 +590,7 @@ function isShortYoutubeHost(hostname: string): boolean {
|
|||
margin: 0 auto;
|
||||
padding: 1rem 1.25rem;
|
||||
color: var(--color-text-muted);
|
||||
background: var(--color-white);
|
||||
background: var(--color-cream);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
font-size: 0.95rem;
|
||||
|
|
|
|||
|
|
@ -260,26 +260,22 @@ function projectCardStyle(project: Project): string {
|
|||
<SiteHeader />
|
||||
|
||||
<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__text">
|
||||
<h1 class="hero__headline">
|
||||
Let’s upgrade our lives to a
|
||||
<em>healthy</em>, <em>integrated</em>, and <em>balanced</em> Torah
|
||||
existence.
|
||||
</h1>
|
||||
<p class="hero__attribution">Rabbi Yehoshua Gerzi</p>
|
||||
<p class="hero__eyebrow">PILZNO · RAMAT BET SHEMESH</p>
|
||||
<h1 class="hero__headline">Rabbi Yehoshua Gerzi</h1>
|
||||
<p class="hero__tagline">Create Geula · Elevate Life</p>
|
||||
<p class="hero__lede">
|
||||
Guiding you toward a Geula mindset and an Integrated Torah life
|
||||
rooted in ancient wisdom, warm community, and deliberate growth.
|
||||
</p>
|
||||
</div>
|
||||
<div class="hero__portrait-frame">
|
||||
<div class="hero__portrait-panel">
|
||||
<img
|
||||
src="/assets/portrait.png"
|
||||
alt="Rabbi Yehoshua Gerzi"
|
||||
class="hero__portrait"
|
||||
data-cy="hero-portrait"
|
||||
data-cy="hero-rabbi-portrait"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -305,10 +301,10 @@ function projectCardStyle(project: Project): string {
|
|||
</h2>
|
||||
<p class="discover-path__paragraph">
|
||||
Rabbi Yehoshua Gerzi has dedicated his life to empowering individuals
|
||||
to achieve a state of “Healthy, Integrated and Balanced Torah
|
||||
Living.” His teachings weave together timeless Torah wisdom,
|
||||
mystical insights and practical guidance, making ancient wisdom
|
||||
accessible and transformative for modern lives.
|
||||
to build an Integrated Torah life from a Geula mindset. His teachings
|
||||
weave together timeless Torah wisdom, mystical insights and practical
|
||||
guidance, making ancient wisdom accessible and transformative for
|
||||
modern lives.
|
||||
</p>
|
||||
<p class="discover-path__paragraph">
|
||||
Rabbi Gerzi is based in Ramat Beit Shemesh, where he serves as Rav of
|
||||
|
|
@ -539,123 +535,110 @@ function projectCardStyle(project: Project): string {
|
|||
.hero {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
min-height: 110vh;
|
||||
min-height: min(760px, calc(100vh - 4rem));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--color-cream);
|
||||
background: var(--color-brand-purple);
|
||||
}
|
||||
|
||||
.hero__backdrop {
|
||||
.hero::after {
|
||||
content: '';
|
||||
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;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center 44%;
|
||||
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;
|
||||
right: 0;
|
||||
width: min(9rem, 22vw);
|
||||
height: min(9rem, 22vw);
|
||||
border-right: 1px solid var(--color-gold);
|
||||
border-bottom: 1px solid var(--color-gold);
|
||||
}
|
||||
|
||||
.hero__content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
grid-template-columns: minmax(0, 0.98fr) minmax(260px, 0.52fr);
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
gap: clamp(2rem, 6vw, 5rem);
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
max-width: 1180px;
|
||||
margin: 0 auto;
|
||||
padding: 6rem 2rem;
|
||||
transform: translateY(clamp(-15.25rem, calc(-22vh - 20px), -8.25rem));
|
||||
padding: clamp(4rem, 8vw, 7rem) 2rem;
|
||||
}
|
||||
|
||||
.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 {
|
||||
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;
|
||||
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;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.hero__attribution {
|
||||
margin: 1.5rem 0 0 0;
|
||||
font-size: 0.95rem;
|
||||
color: var(--color-white);
|
||||
opacity: 0.85;
|
||||
.hero__lede {
|
||||
max-width: 36rem;
|
||||
margin: 1.8rem 0 0;
|
||||
color: rgb(250 249 245 / 82%);
|
||||
font-family: var(--font-sans);
|
||||
font-size: clamp(1.04rem, 1.8vw, 1.24rem);
|
||||
font-weight: 300;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.hero__portrait-frame {
|
||||
--portrait-frame-size: clamp(200px, 24vw, 350px);
|
||||
|
||||
width: var(--portrait-frame-size);
|
||||
height: var(--portrait-frame-size);
|
||||
.hero__portrait-panel {
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
overflow: visible;
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hero__portrait-frame::before {
|
||||
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%);
|
||||
min-height: 28rem;
|
||||
border: 1px solid rgb(201 168 76 / 62%);
|
||||
border-radius: 8px;
|
||||
background: rgb(250 249 245 / 7%);
|
||||
}
|
||||
|
||||
.hero__portrait {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 110%;
|
||||
height: auto;
|
||||
display: block;
|
||||
align-self: end;
|
||||
width: min(88%, 25rem);
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.discover-path {
|
||||
background: var(--color-slate);
|
||||
background: var(--color-brand-purple);
|
||||
color: var(--color-white);
|
||||
padding: 5rem 2rem;
|
||||
}
|
||||
|
|
@ -669,24 +652,24 @@ function projectCardStyle(project: Project): string {
|
|||
.discover-path__icon {
|
||||
width: 110px;
|
||||
height: auto;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
color: rgb(250 249 245 / 70%);
|
||||
margin: 0 auto 2rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.discover-path__heading {
|
||||
font-family: var(--font-serif);
|
||||
font-family: var(--font-display);
|
||||
font-weight: 400;
|
||||
font-size: clamp(1.5rem, 2.4vw, 2rem);
|
||||
margin: 0 0 1.5rem 0;
|
||||
}
|
||||
|
||||
.discover-path__paragraph {
|
||||
font-family: var(--font-serif);
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 300;
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.7;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
color: rgb(250 249 245 / 85%);
|
||||
margin: 0 0 1.25rem 0;
|
||||
}
|
||||
|
||||
|
|
@ -705,10 +688,10 @@ function projectCardStyle(project: Project): string {
|
|||
}
|
||||
|
||||
.core-teachings__heading {
|
||||
font-family: var(--font-serif);
|
||||
font-family: var(--font-display);
|
||||
font-weight: 400;
|
||||
font-size: clamp(1.5rem, 2.4vw, 2rem);
|
||||
color: var(--color-slate);
|
||||
color: var(--color-brand-purple);
|
||||
text-align: center;
|
||||
margin: 0 0 3rem 0;
|
||||
}
|
||||
|
|
@ -729,20 +712,20 @@ function projectCardStyle(project: Project): string {
|
|||
.core-teachings__glyph {
|
||||
font-size: 3rem;
|
||||
line-height: 1;
|
||||
color: var(--color-slate);
|
||||
color: var(--color-brand-purple);
|
||||
margin-bottom: 1rem;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.core-teachings__label {
|
||||
font-family: var(--font-serif);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 1rem;
|
||||
color: var(--color-text-muted);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.unique-voice {
|
||||
background: var(--color-slate);
|
||||
background: var(--color-brand-purple);
|
||||
color: var(--color-white);
|
||||
padding: 5rem 2rem;
|
||||
}
|
||||
|
|
@ -756,32 +739,32 @@ function projectCardStyle(project: Project): string {
|
|||
.unique-voice__icon {
|
||||
width: 140px;
|
||||
height: auto;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
color: rgb(250 249 245 / 70%);
|
||||
display: block;
|
||||
margin: 0 auto 2rem;
|
||||
}
|
||||
|
||||
.unique-voice__heading {
|
||||
font-family: var(--font-serif);
|
||||
font-family: var(--font-display);
|
||||
font-weight: 400;
|
||||
font-size: clamp(1.5rem, 2.4vw, 2rem);
|
||||
margin: 0 0 1.5rem 0;
|
||||
}
|
||||
|
||||
.unique-voice__paragraph {
|
||||
font-family: var(--font-serif);
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 300;
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.7;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
color: rgb(250 249 245 / 85%);
|
||||
margin: 0 0 2.5rem 0;
|
||||
}
|
||||
|
||||
.unique-voice__cta-button {
|
||||
background: var(--color-white);
|
||||
color: var(--color-text);
|
||||
border: none;
|
||||
border-radius: 9999px;
|
||||
border: 1px solid var(--color-gold);
|
||||
border-radius: 4px;
|
||||
padding: 0.85rem 1.75rem;
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 500;
|
||||
|
|
@ -810,10 +793,10 @@ function projectCardStyle(project: Project): string {
|
|||
}
|
||||
|
||||
.testimonials__heading {
|
||||
font-family: var(--font-serif);
|
||||
font-family: var(--font-display);
|
||||
font-weight: 400;
|
||||
font-size: clamp(1.5rem, 2.4vw, 2rem);
|
||||
color: var(--color-slate);
|
||||
color: var(--color-brand-purple);
|
||||
margin: 0 0 2.5rem 0;
|
||||
}
|
||||
|
||||
|
|
@ -821,14 +804,15 @@ function projectCardStyle(project: Project): string {
|
|||
position: relative;
|
||||
width: min(100%, var(--testimonials-stage-width));
|
||||
height: var(--testimonials-card-height);
|
||||
border-radius: 14px;
|
||||
border-radius: 8px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.testimonials__card {
|
||||
background: var(--color-white);
|
||||
border-radius: 14px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
padding: 2rem;
|
||||
text-align: left;
|
||||
width: calc(50% - var(--testimonials-card-gap));
|
||||
|
|
@ -878,7 +862,7 @@ function projectCardStyle(project: Project): string {
|
|||
}
|
||||
|
||||
.testimonials__name {
|
||||
font-family: var(--font-serif);
|
||||
font-family: var(--font-display);
|
||||
font-weight: 500;
|
||||
font-size: 1.15rem;
|
||||
margin: 0 0 1rem 0;
|
||||
|
|
@ -886,7 +870,7 @@ function projectCardStyle(project: Project): string {
|
|||
}
|
||||
|
||||
.testimonials__quote {
|
||||
font-family: var(--font-serif);
|
||||
font-family: var(--font-quote);
|
||||
font-style: italic;
|
||||
font-size: 1rem;
|
||||
line-height: 1.6;
|
||||
|
|
@ -905,7 +889,7 @@ function projectCardStyle(project: Project): string {
|
|||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
border-radius: 50%;
|
||||
background: var(--color-text);
|
||||
background: var(--color-brand-purple);
|
||||
color: var(--color-white);
|
||||
border: none;
|
||||
font-size: 1.25rem;
|
||||
|
|
@ -916,7 +900,7 @@ function projectCardStyle(project: Project): string {
|
|||
}
|
||||
|
||||
.testimonials__arrow:hover {
|
||||
background: var(--color-slate);
|
||||
background: var(--color-body-text);
|
||||
}
|
||||
|
||||
.sponsors {
|
||||
|
|
@ -931,10 +915,10 @@ function projectCardStyle(project: Project): string {
|
|||
}
|
||||
|
||||
.sponsors__heading {
|
||||
font-family: var(--font-serif);
|
||||
font-family: var(--font-display);
|
||||
font-weight: 400;
|
||||
font-size: clamp(1.4rem, 2.2vw, 1.85rem);
|
||||
color: var(--color-slate);
|
||||
color: var(--color-brand-purple);
|
||||
margin: 0 0 3rem 0;
|
||||
}
|
||||
|
||||
|
|
@ -1005,10 +989,10 @@ function projectCardStyle(project: Project): string {
|
|||
}
|
||||
|
||||
.projects__heading {
|
||||
font-family: var(--font-serif);
|
||||
font-family: var(--font-display);
|
||||
font-weight: 400;
|
||||
font-size: clamp(1.5rem, 2.4vw, 2rem);
|
||||
color: var(--color-slate);
|
||||
color: var(--color-brand-purple);
|
||||
text-align: center;
|
||||
margin: 0 0 3rem 0;
|
||||
}
|
||||
|
|
@ -1020,7 +1004,7 @@ function projectCardStyle(project: Project): string {
|
|||
}
|
||||
|
||||
.projects__card {
|
||||
border-radius: 14px;
|
||||
border-radius: 8px;
|
||||
padding: 3rem 2rem;
|
||||
aspect-ratio: 16 / 10;
|
||||
min-height: 240px;
|
||||
|
|
@ -1040,18 +1024,18 @@ function projectCardStyle(project: Project): string {
|
|||
}
|
||||
|
||||
.projects__card-title {
|
||||
font-family: var(--font-serif);
|
||||
font-family: var(--font-display);
|
||||
font-weight: 400;
|
||||
font-size: clamp(1.25rem, 2vw, 1.6rem);
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
.projects__card-body {
|
||||
font-family: var(--font-serif);
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 300;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.55;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
color: rgb(250 249 245 / 90%);
|
||||
margin: 0;
|
||||
max-width: 28ch;
|
||||
}
|
||||
|
|
@ -1068,10 +1052,10 @@ function projectCardStyle(project: Project): string {
|
|||
}
|
||||
|
||||
.journey__heading {
|
||||
font-family: var(--font-serif);
|
||||
font-family: var(--font-display);
|
||||
font-weight: 400;
|
||||
font-size: clamp(1.5rem, 2.4vw, 2rem);
|
||||
color: var(--color-slate);
|
||||
color: var(--color-brand-purple);
|
||||
margin: 0 0 3rem 0;
|
||||
}
|
||||
|
||||
|
|
@ -1089,7 +1073,7 @@ function projectCardStyle(project: Project): string {
|
|||
text-align: center;
|
||||
padding: 4rem 2rem;
|
||||
min-height: 280px;
|
||||
border-radius: 14px;
|
||||
border-radius: 8px;
|
||||
color: var(--color-white);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
|
@ -1099,15 +1083,15 @@ function projectCardStyle(project: Project): string {
|
|||
}
|
||||
|
||||
.journey__card--olive {
|
||||
background: var(--color-olive);
|
||||
background: var(--color-gold);
|
||||
}
|
||||
|
||||
.journey__card--slate {
|
||||
background: var(--color-slate);
|
||||
background: var(--color-brand-purple);
|
||||
}
|
||||
|
||||
.journey__card-title {
|
||||
font-family: var(--font-serif);
|
||||
font-family: var(--font-display);
|
||||
font-weight: 400;
|
||||
font-size: clamp(1.4rem, 2.2vw, 1.85rem);
|
||||
margin: 0 0 1.5rem 0;
|
||||
|
|
@ -1115,11 +1099,11 @@ function projectCardStyle(project: Project): string {
|
|||
}
|
||||
|
||||
.journey__card-body {
|
||||
font-family: var(--font-serif);
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 300;
|
||||
font-size: 1rem;
|
||||
line-height: 1.55;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
color: rgb(250 249 245 / 90%);
|
||||
margin: 0;
|
||||
max-width: 30ch;
|
||||
}
|
||||
|
|
@ -1132,8 +1116,9 @@ function projectCardStyle(project: Project): string {
|
|||
.get-involved__card {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
border-radius: 14px;
|
||||
background: rgb(250 249 245 / 54%);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
padding: 3rem;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
|
|
@ -1142,7 +1127,7 @@ function projectCardStyle(project: Project): string {
|
|||
}
|
||||
|
||||
.get-involved__heading {
|
||||
font-family: var(--font-serif);
|
||||
font-family: var(--font-display);
|
||||
font-weight: 400;
|
||||
font-size: clamp(1.6rem, 2.6vw, 2.4rem);
|
||||
color: var(--color-text);
|
||||
|
|
@ -1150,7 +1135,7 @@ function projectCardStyle(project: Project): string {
|
|||
}
|
||||
|
||||
.get-involved__subtext {
|
||||
font-family: var(--font-serif);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 1rem;
|
||||
line-height: 1.55;
|
||||
color: var(--color-text-muted);
|
||||
|
|
@ -1187,7 +1172,7 @@ function projectCardStyle(project: Project): string {
|
|||
}
|
||||
|
||||
.get-involved__input:focus {
|
||||
outline: 2px solid var(--color-slate);
|
||||
outline: 2px solid var(--color-brand-purple);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
|
|
@ -1204,7 +1189,7 @@ function projectCardStyle(project: Project): string {
|
|||
}
|
||||
|
||||
.get-involved__submit:hover {
|
||||
background: var(--color-slate);
|
||||
background: var(--color-brand-purple);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@ async function handleSubmit(): Promise<void> {
|
|||
}
|
||||
|
||||
.login-card {
|
||||
background: var(--color-white);
|
||||
background: var(--color-cream);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
padding: 2.5rem;
|
||||
|
|
@ -86,9 +86,9 @@ async function handleSubmit(): Promise<void> {
|
|||
}
|
||||
|
||||
.login-card__title {
|
||||
font-family: var(--font-serif);
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-slate);
|
||||
color: var(--color-brand-purple);
|
||||
text-align: center;
|
||||
margin: 0 0 1.5rem;
|
||||
}
|
||||
|
|
@ -117,13 +117,13 @@ async function handleSubmit(): Promise<void> {
|
|||
font-family: var(--font-sans);
|
||||
font-size: 0.9375rem;
|
||||
color: var(--color-text);
|
||||
background: var(--color-white);
|
||||
background: var(--color-light-bg);
|
||||
outline: none;
|
||||
transition: border-color 0.15s ease;
|
||||
}
|
||||
|
||||
.login-card__input:focus {
|
||||
border-color: var(--color-olive);
|
||||
border-color: var(--color-gold);
|
||||
}
|
||||
|
||||
.login-card__error {
|
||||
|
|
@ -138,7 +138,8 @@ async function handleSubmit(): Promise<void> {
|
|||
|
||||
.login-card__submit {
|
||||
padding: 0.75rem 1rem;
|
||||
background: var(--color-olive);
|
||||
background: var(--color-brand-purple);
|
||||
border: 1px solid var(--color-gold);
|
||||
color: var(--color-white);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 0.9375rem;
|
||||
|
|
@ -151,7 +152,7 @@ async function handleSubmit(): Promise<void> {
|
|||
}
|
||||
|
||||
.login-card__submit:hover:not(:disabled) {
|
||||
background: var(--color-slate);
|
||||
background: var(--color-brand-purple);
|
||||
}
|
||||
|
||||
.login-card__submit:disabled {
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@ onMounted(() => {
|
|||
<style scoped>
|
||||
.media-page {
|
||||
min-height: 100vh;
|
||||
background: var(--color-white);
|
||||
background: var(--color-light-bg);
|
||||
}
|
||||
|
||||
.media-page__main {
|
||||
|
|
@ -91,8 +91,8 @@ onMounted(() => {
|
|||
|
||||
.media-page__heading {
|
||||
margin: 0;
|
||||
color: #2c2c2c;
|
||||
font-family: var(--font-serif);
|
||||
color: var(--color-brand-purple);
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(2.6rem, 4.8vw, 3.2rem);
|
||||
font-weight: 400;
|
||||
line-height: 1.1;
|
||||
|
|
@ -107,7 +107,7 @@ onMounted(() => {
|
|||
margin: 0 auto;
|
||||
padding: 1rem 1.25rem;
|
||||
color: var(--color-text-muted);
|
||||
background: var(--color-white);
|
||||
background: var(--color-cream);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
font-size: 0.95rem;
|
||||
|
|
@ -129,9 +129,9 @@ onMounted(() => {
|
|||
.media-page__card {
|
||||
min-height: 448px;
|
||||
padding: 3.1rem 3rem 2.7rem;
|
||||
background: var(--color-white);
|
||||
border: 1px solid #e5cf9f;
|
||||
border-radius: 17px;
|
||||
background: var(--color-cream);
|
||||
border: 1px solid rgb(201 168 76 / 54%);
|
||||
border-radius: 8px;
|
||||
color: inherit;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
|
|
@ -143,13 +143,13 @@ onMounted(() => {
|
|||
|
||||
a.media-page__card:hover,
|
||||
a.media-page__card:focus-visible {
|
||||
border-color: #d4ad5f;
|
||||
border-color: var(--color-gold);
|
||||
box-shadow: 0 14px 35px rgb(44 44 44 / 10%);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
|
|
@ -167,8 +167,8 @@ a.media-page__card:focus-visible {
|
|||
|
||||
.media-page__card-title {
|
||||
margin: 0;
|
||||
color: #333333;
|
||||
font-family: var(--font-serif);
|
||||
color: var(--color-brand-purple);
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(2rem, 3.7vw, 2.4rem);
|
||||
font-weight: 400;
|
||||
line-height: 1.2;
|
||||
|
|
@ -177,8 +177,8 @@ a.media-page__card:focus-visible {
|
|||
.media-page__card-description {
|
||||
max-width: 35rem;
|
||||
margin: 2.15rem auto 0;
|
||||
color: #333333;
|
||||
font-family: var(--font-serif);
|
||||
color: var(--color-text);
|
||||
font-family: var(--font-sans);
|
||||
font-size: clamp(1.25rem, 2.3vw, 1.45rem);
|
||||
line-height: 1.38;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue