/* ============================================================ Quote Component – V.3.3 Fonts: EB Garamond (quote text), Roboto (byline) Load in : ---NO, load in CSS as an import ============================================================ */ /* ---------- Quote block wrapper ---------- */ .quote-component.with-image .quote-block { width: 100%; max-width: 1400px; margin: 40px auto; display: grid; grid-template-columns: 1.2fr 1fr; align-items: stretch; overflow: hidden; } /* No-image: single column */ .quote-component.with-image .quote-block.no-image { grid-template-columns: 1fr; overflow: visible; } /* No-image: single column */ .quote-component.with-image .quote-block.no-image-column { grid-template-columns: 1fr; overflow: visible; } /* -------- Image side (RIGHT) -------- */ .quote-component.with-image .quote-block-media { position: relative; overflow: hidden; order: 2; display: flex; align-items: center; /* vertically centre photo in column */ padding: 48px 0; /* cream breathing room above/below */ } .quote-component.with-image .quote-block-media img { width: 100%; object-fit: cover; object-position: center 20%; display: block; flex-shrink: 0; } /* Hide media when no image */ .quote-component.with-image .quote-block.no-image .quote-block-media { display: none; } /* ---------- Content side (LEFT) ---------- quotemark.svg as a CSS background — dependency tag below. /_resources/images/campaign/quotemark.svg = https://www.pepperdine.edu/giving/images/quotemark.svg */ .quote-component.with-image .quote-block-content { order: 1; position: relative; background-color: #fdf7f3; background-image: url('/_resources/images/campaign/quotemark.svg'); background-repeat: no-repeat; background-size: 120px auto; /* size of the decorative mark */ background-position: center top 56px; /* centred, 56px from top of content */ padding: 72px 72px 72px 72px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } /* No-image: same left layout */ .quote-component.with-image .quote-block.no-image .quote-block-content { padding: 61px 100px; text-align: left; display: inline-block; background-size: 70px auto; background-position: 5% 29px; } /* No-image: same centered layout */ .quote-component.with-image .quote-block.no-image-column .quote-block-content { background-size: 70px auto; background-position: 5% 29px; padding-top: 70px; background-position: center top 56px; } /* Hide the inline mark element — SVG is now a CSS background */ .quote-component.with-image .quote-block-mark { display: none; } /* ---------- Quote text ---------- Top padding creates clearance below the background quote mark */ .quote-component.with-image .quote-block-text { font-family: 'EB Garamond', serif; font-weight: 400; font-size: 24px; line-height: 1.45; color: #606e7a; margin: 0 0 2.25rem 0; letter-spacing: 0.01em; padding-top: 0px; /* pushes text below the background quote mark */ } .quote-component.with-image .quote-block-text p { font-size: 24px; } /* ---------- Attribution ---------- */ .quote-component.with-image .quote-block-attribution { border-top: 0; padding-top: 0; } .quote-component.with-image .quote-block-name { font-family: 'Roboto', sans-serif; font-size: 1.3rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: #606e7a; margin: 0 0 0.3rem 0; } .quote-component.with-image .quote-block-role { font-family: 'Roboto', sans-serif; font-size: 1.2rem; font-weight: 400; font-style: italic; color: #606e7a; margin: 0; letter-spacing: 0.01em; } /* ============================================================= RESPONSIVE ============================================================= */ /* ---------- Tablet ---------- */ @media (max-width: 1024px) { .quote-component.with-image .quote-block { grid-template-columns: 1.1fr 1fr; width: calc(100% - 48px); /* fix: accounts for 24px margin each side */ margin: 24px auto; } .quote-component.with-image .quote-block-content { padding: 48px 40px; background-size: 140px auto; background-position: center top 40px; } .quote-component.with-image .quote-block.no-image .quote-block-content { padding: 48px 8%; text-align: center; display: inline-block; background-size: 70px auto; background-position: 50% 40px; } .quote-component.with-image .quote-block-media img { height: 360px; } .quote-component.with-image .quote-block-text { padding-top: 128px; } .quote-component.with-image .quote-block.no-image .quote-block-text { padding-top: 80px; } } /* ---------- Mobile: stacked ---------- */ @media (max-width: 720px) { .quote-component.with-image .quote-block { grid-template-columns: 1fr; margin: 0; width: 100%; } /* Image stacks on TOP */ .quote-component.with-image .quote-block-media { order: 1; padding: 0px 0; } .quote-component.with-image .quote-block-media img { height: 260px; object-position: center top; } .quote-component.with-image .quote-block-content { order: 2; padding: 36px 28px 44px; background-size: 120px auto; background-position: center top 36px; } .quote-component.with-image .quote-block.no-image .quote-block-content { padding: 32px 24px 44px; } .quote-component.with-image .quote-block-text { font-size: clamp(1.2rem, 4.5vw, 1.5rem); line-height: 1.5; margin-bottom: 1.5rem; padding-top: 110px; } } /* ---------- Small mobile ---------- */ @media (max-width: 480px) { .quote-component.with-image .quote-block-media { padding: 16px 0; } .quote-component.with-image .quote-block-media img { height: 220px; } .quote-component.with-image .quote-block-content { padding: 28px 20px 36px; background-size: 100px auto; background-position: center top 28px; } .quote-component.with-image .quote-block.no-image .quote-block-content { padding: 24px 18px 36px; } .quote-component.with-image .quote-block-text { font-size: clamp(1.1rem, 4vw, 1.3rem); margin-bottom: 1.25rem; padding-top: 90px; } } /* ---------- Extra small ---------- */ @media (max-width: 380px) { .quote-component.with-image .quote-block-media img { height: 190px; } .quote-component.with-image .quote-block-content { padding: 24px 16px 32px; background-size: 84px auto; background-position: center top 24px; } .quote-component.with-image .quote-block-text { font-size: 1.05rem; line-height: 1.55; margin-bottom: 1.1rem; padding-top: 76px; } .quote-component.with-image .quote-block-name { font-size: 0.68rem; } .quote-component.with-image .quote-block-role { font-size: 0.75rem; } }