, so it inherits none of Divi's module padding. Vertical rhythm is set per section with --pt / --pb, and the values are deliberately unequal down the page: S2 is the spacious one, S5 the tight one, and no two neighbours share a height, an alignment, or a background. ========================================================================== */ .et-l--post .ks-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding-left: 40px; padding-right: 40px; } .et-l--post .ks-sec { position: relative; padding-top: var(--pt); padding-bottom: var(--pb); } /* Bare-element resets: .entry-content styles p / ul / li / h2 / blockquote. The element list is wrapped in :where() so the whole selector weighs exactly (0,2,0) — enough to beat Divi's `p{padding-bottom:1em}` and `.entry-content ul`, but low enough that every component rule below (also two classes, and later in the file) reclaims its own margins without needing !important. */ .et-l--post .ks-sec :where(p, h2, ul, li, figure, figcaption, blockquote), .et-l--post .ks-hero :where(p, h1) { margin: 0; padding: 0; border: 0; list-style: none; line-height: inherit; background: transparent; } #page-container .et-l--post .ks-sec img { display: block; width: 100%; height: auto; } /* --- Display type --------------------------------------------------------- Weight 800 against Roboto 17px body is a ~3.9x size jump at the top of the clamp, which is the point: the contrast is doing the work the extra typeface would have done. Long display lines are set sentence-case on purpose — the site's uppercase treatment is kept for the short shouts (hero, markers, picker title, buttons), where it still reads as Keystone. To put the long statements back in caps, add `text-transform: uppercase` to .ks-display. ------------------------------------------------------------------------ */ #page-container .et-l--post .ks-display { font-family: var(--ks-display); font-weight: 800; font-style: normal; color: var(--ks-ink); letter-spacing: -0.017em; text-transform: none; } #page-container .et-l--post .ks-display--xl { font-size: clamp(34px, 4.7vw, 68px); line-height: 1.02; max-width: 17ch; } #page-container .et-l--post .ks-display--l { font-size: clamp(30px, 3.7vw, 52px); line-height: 1.06; max-width: 19ch; } #page-container .et-l--post .ks-display--onDark { color: #ffffff; } /* --- Section marker — the one red element most sections get --------------- */ #page-container .et-l--post .ks-marker { display: flex; align-items: baseline; gap: 0.95em; font-family: var(--ks-display); font-weight: 600; font-size: 11px; line-height: 1; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ks-ink-3); margin-bottom: clamp(22px, 2.4vw, 32px); } .et-l--post .ks-marker__no { font-weight: 700; color: var(--ks-accent); } #page-container .et-l--post .ks-marker--onDark { color: rgba(255, 255, 255, 0.5); } /* --- Body prose — 65–75ch measure ---------------------------------------- */ #page-container .et-l--post .ks-prose p { font-family: var(--ks-body); font-weight: 400; font-size: 17px; line-height: 1.75; color: var(--ks-ink-2); max-width: 68ch; margin-bottom: 1.15em; } #page-container .et-l--post .ks-prose p:last-child { margin-bottom: 0; } /* --- Photo captions — small, tracked, documentary ------------------------- The video's "coming soon" caption is excluded: it is an overlay, not a caption under a photo, and it carries its own type. */ #page-container .et-l--post .ks-sec figcaption:not(.ks-video__soon) { margin-top: 14px; font-family: var(--ks-display); font-weight: 500; font-size: 11px; line-height: 1.5; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ks-ink-3); } /* --- CTA — the accent's other job ---------------------------------------- */ #page-container .et-l--post .ks-cta { display: inline-flex; align-items: center; gap: 0.8em; margin-top: clamp(26px, 3vw, 36px); padding: 17px 30px; border: 0; border-radius: 4px; background-color: var(--ks-accent); font-family: var(--ks-display); font-weight: 600; font-size: 13px; line-height: 1; letter-spacing: 1.9px; text-transform: uppercase; text-decoration: none; color: #ffffff; transition: background-color 0.3s ease; } .et-l--post .ks-cta::after { content: ""; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(135deg) translate(-1px, -1px); transition: transform 0.3s ease; } #page-container .et-l--post .ks-cta:hover, #page-container .et-l--post .ks-cta:focus-visible { background-color: var(--ks-accent-deep); color: #ffffff; text-decoration: none; } .et-l--post .ks-cta:hover::after, .et-l--post .ks-cta:focus-visible::after { transform: rotate(135deg) translate(-3px, -3px); } #page-container .et-l--post .ks-cta:focus-visible { outline: 3px solid var(--ks-ink); outline-offset: 3px; } /* ============================================================================ 1. S1 — HERO ---------------------------------------------------------------------------- Full first screen under a #353a42 scrim, with the lockup at the bottom-left rather than dead-centre — which does two things: it sets the left-aligned editorial axis the rest of the page runs on, and it clears the bottom-right quadrant for the photo that breaks up out of S2. 2026-08-20: the background is now a film, with the original photo kept underneath it as poster and fallback. See "Background film" below. ========================================================================== */ .et-l--post .ks-hero { position: relative; display: grid; align-content: end; min-height: 100vh; min-height: 100svh; padding: 0 0 clamp(52px, 8vh, 104px); background-color: var(--ks-dark); /* The photo stays the hero's own background even now that a film sits on top of it: it is the frame the film fades up from, and the entire fallback if the film never plays. Deliberately NOT removed. */ background-image: url(../assets/img/Keystone-Church-Who-We-Are-Current-Weekend.jpg); background-repeat: no-repeat; background-position: 50% 42%; background-size: cover; } /* --- Background film (2026-08-20) ----------------------------------------- Three layers now, bottom to top: photo (the hero's background) → film (z-index 0) → scrim (z-index 1) → lockup (z-index 2). The scrim used to be the first layer of the background-image stack; it is its own layer now so the film can slot between it and the photo, and the recipe is byte-identical. The film starts at opacity 0 and is only revealed on the `playing` event, so there is never a black frame between poster and playback and any failure just leaves the photo hero standing. No src ships in the markup — see index.html. .ks-hero sets no z-index, so it creates no stacking context and S2's overlapping photo (z-index 3) still paints above all of this, as before. ------------------------------------------------------------------------ */ .et-l--post .ks-hero__video { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; border: 0; object-fit: cover; background-color: transparent; opacity: 0; pointer-events: none; transition: opacity 0.7s ease; } .et-l--post .ks-hero__video.is-ready { opacity: 1; } .et-l--post .ks-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background-image: var(--ks-hero-scrim); pointer-events: none; } .et-l--post .ks-hero__inner { position: relative; z-index: 2; width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 40px; } #page-container .et-l--post .ks-hero__meta { font-family: var(--ks-display); font-weight: 600; font-size: 11px; line-height: 1; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); margin-bottom: clamp(20px, 2.6vw, 32px); } .et-l--post .ks-hero__dash { margin: 0 0.4em; color: var(--ks-accent); } #page-container .et-l--post .ks-hero__title { font-family: var(--ks-display); font-weight: 800; font-style: normal; font-size: clamp(66px, 13vw, 188px); line-height: 0.84; letter-spacing: -0.028em; text-transform: uppercase; color: #ffffff; } .et-l--post .ks-hero__rule { display: block; width: 76px; height: 3px; margin: clamp(24px, 3vw, 36px) 0 0; background-color: var(--ks-accent); } #page-container .et-l--post .ks-hero__sub { margin-top: clamp(18px, 2.2vw, 26px); font-family: var(--ks-display); font-weight: 200; font-size: clamp(21px, 2.7vw, 36px); line-height: 1.2; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.92); } /* The page's ONE coordinated motion moment: the hero lockup settles in once, on load. Transform + opacity only, ease-out, and nothing else on the page animates on scroll. */ @keyframes ks-rise { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: no-preference) { .et-l--post .ks-hero__meta, .et-l--post .ks-hero__title, .et-l--post .ks-hero__rule, .et-l--post .ks-hero__sub { animation: ks-rise 0.8s cubic-bezier(0.2, 0.65, 0.25, 1) both; } .et-l--post .ks-hero__meta { animation-delay: 0.05s; } .et-l--post .ks-hero__title { animation-delay: 0.14s; } .et-l--post .ks-hero__rule { animation-delay: 0.30s; } .et-l--post .ks-hero__sub { animation-delay: 0.38s; } } /* ============================================================================ 2. S2 — WHY GROUPS (spacious light band, 7/5 text-left) ---------------------------------------------------------------------------- LAYOUT EVENT 1 — the portrait in the right column carries a negative top margin of exactly (section padding-top + overlap), so it climbs out of its own section and lands on the hero photo's empty bottom-right. Nothing is absolutely positioned; the figure stays in flow, so nothing can collide. Killed below 900px, where the columns stack. ========================================================================== */ /* WHITE since 2026-08-24 — S2 and S3 swapped grounds at Jose's call. Was var(--ks-bg) #f1f1f1. Side benefit: the photo caption's --ks-ink-3 grey gains a little contrast on white (2.84:1 -> 3.21:1), though see the note on that token below. */ .et-l--post .ks-sec--why { --pt: clamp(112px, 12vw, 168px); --pb: clamp(104px, 11vw, 160px); background-color: var(--ks-paper); } .et-l--post .ks-why { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(36px, 5vw, 76px); align-items: start; } .et-l--post .ks-why__text .ks-display { margin-bottom: clamp(28px, 3.4vw, 46px); } .et-l--post .ks-why__fig { position: relative; z-index: 3; margin-top: calc(-1 * (var(--pt) + clamp(56px, 6.6vw, 118px))); } /* The source is 900x1350; the column tops out around 460px, so it never renders above its own pixels. */ #page-container .et-l--post .ks-why__fig img { background-color: var(--ks-dark); } /* ============================================================================ 3. S3 — THE VIDEO (dark band, cinematic) ---------------------------------------------------------------------------- THE FILM IS NOT ON DISK YET. Drop it at: redesign-v1/assets/video/groups-invite.mp4 …and this section works with no code change. Until then the 404s, the inline script in index.html catches it, and the play affordance is replaced by a quiet "VIDEO COMING SOON" caption over the poster frame — the player itself is never shown broken. Poster borrows assets/img/Keystone-Church-Who-We-Are-Current-Weekend.jpg (1200x800) at a 1100px-wide frame, i.e. 0.92x its own pixels. ========================================================================== */ /* RE-GROUNDED LIGHT 2026-08-24 (Jose). Was var(--ks-dark). Cutting S4 and S5 left this band running straight into the dark picker; rather than lighten the picker (tried and reversed the same day), the seam is solved here. It went white first and then swapped with S2 the same day, so S2 is white and this is #f1f1f1 — the two only need to differ from each other, and no two identical grounds touch anywhere in the page. The film frame, poster, play affordance and fallback are untouched — the big dark video frame anchors the section. */ .et-l--post .ks-sec--video { --pt: clamp(84px, 8.4vw, 122px); --pb: clamp(92px, 9.2vw, 134px); background-color: var(--ks-bg); } .et-l--post .ks-video__head { max-width: 760px; } .et-l--post .ks-video__head .ks-display { margin-bottom: clamp(18px, 2vw, 24px); } #page-container .et-l--post .ks-video__line { font-family: var(--ks-body); font-weight: 400; font-size: 17px; line-height: 1.7; color: rgba(255, 255, 255, 0.66); max-width: 66ch; } /* HORIZONTAL SYMMETRY FIX 2026-08-24 (Jose: "make sure left and right padding is the same on both sides"). This carried max-width: 1100px with no auto margins, so inside the wrap's 1160px content column it sat FLUSH LEFT and stopped 60px short on the right at >=1240 (20px at 1200). Every band's wrap measured perfectly symmetric; this one element was the whole imbalance, and being the largest, darkest object on the page it was the one showing. The cap is removed rather than the frame centred: centring would have given equal insets but broken the left editorial axis that the hero lockup, the S2 heading, the S3 head, the picker names and the closing slug all share. Now the frame fills the column and lines up on BOTH edges with every other band. Consequence: the frame grows 1100 -> 1160 at >=1240. The 1200x800 poster then renders at 0.97x its own pixels, still under 1:1, so nothing softens. Nothing else about the film changes — the element, its poster, the play affordance and the drop-in/fallback logic are untouched. */ .et-l--post .ks-video { position: relative; width: 100%; margin-top: clamp(40px, 5vw, 68px); aspect-ratio: 16 / 9; overflow: hidden; background-color: #22262c; } #page-container .et-l--post .ks-video__el { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; background-color: #22262c; } /* --- Play affordance: bottom-left over the frame, film-title style --------- */ #page-container .et-l--post .ks-video__play { position: absolute; inset: 0; z-index: 2; display: grid; grid-auto-flow: column; align-content: end; align-items: center; justify-content: start; column-gap: clamp(16px, 1.8vw, 22px); width: 100%; padding: clamp(22px, 3vw, 40px); border: 0; background-color: transparent; background-image: var(--ks-film-scrim); text-align: left; cursor: pointer; -webkit-appearance: none; appearance: none; } .et-l--post .ks-video__disc { display: flex; align-items: center; justify-content: center; flex: none; width: clamp(56px, 5.4vw, 74px); height: clamp(56px, 5.4vw, 74px); border: 2px solid rgba(255, 255, 255, 0.82); border-radius: 50%; transition: background-color 0.3s ease, border-color 0.3s ease; } .et-l--post .ks-video__disc::after { content: ""; width: 0; height: 0; margin-left: 5px; border-left: 15px solid #ffffff; border-top: 9px solid transparent; border-bottom: 9px solid transparent; transition: border-left-color 0.3s ease; } .et-l--post .ks-video__playtext { font-family: var(--ks-display); font-weight: 600; font-size: 13px; line-height: 1.3; letter-spacing: 0.2em; text-transform: uppercase; color: #ffffff; } #page-container .et-l--post .ks-video__play:hover .ks-video__disc, #page-container .et-l--post .ks-video__play:focus-visible .ks-video__disc { background-color: var(--ks-accent); border-color: var(--ks-accent); } #page-container .et-l--post .ks-video__play:focus-visible { outline: 3px solid var(--ks-accent); outline-offset: -3px; } /* --- Quiet unavailable state ---------------------------------------------- Browsers disagree about whether a