/* ICGC Praise Temple - home page, 2026 redesign. * * GENERATED by data/home-canvas/build-wp.mjs from praise-template.mjs and * content.json. Edit those and re-run; edits made here are lost on the next * build and, worse, make the shipped page differ from the one that was signed * off. * * Every rule is scoped to .icgc-home-2026. Nothing here may reach another page: * this loads alongside Divi and alongside adinkra.css wherever both apply. */ .icgc-home-2026 p { padding-bottom: 0; } .icgc-home-2026 ul, .icgc-home-2026 ol { margin: 0; padding: 0; } .icgc-home-2026 h1, .icgc-home-2026 h2, .icgc-home-2026 h3, .icgc-home-2026 h4 { padding-bottom: 0; color: inherit; } /* ------------------------------------------------------------------------ Apple's Human Interface Guidelines, applied as principles rather than as an imitation: clarity, deference and depth; content first with the chrome receding; depth used to say what sits above what. Not used: SF Pro, which is licensed for Apple platforms and not for the web, and none of Apple's own interface chrome. The church's own faces stay. ---------------------------------------------------------------------- */ .icgc-home-2026 { --ink: #161009; --page: #F5F2EA; --panel: #FFFFFF; --tx: #191D18; --tx2: #5A6158; --gold: #B8801F; --goldLit: #E3A93F; --goldText: #7C5514; --green: #0F5D4E; --clay: #A34032; --hair: rgba(20,16,12,.10); /* --gold fills buttons and pills, where 3:1 is the floor. --goldText sets 11-13px labels, where the floor is 4.5:1 and the bright gold measured 3.05:1 on paper and 2.75:1 on the countdown material - so every section eyebrow on the page was failing. Two tokens because one cannot serve both jobs. */ /* THE SAME DISPLAY STACK EVERY OTHER PAGE ON THIS SITE USES, character for character - it is --ad-display in adinkra.css. The first cut led with Jost, a Futura revival served from Google Fonts, which meant this page set its headings in a face that appears nowhere else on the site: close enough to look like a rendering fault rather than a decision. No webfont is fetched for headings now, which is also one less request. */ --display: Futura, "Avenir Next", "Century Gothic", "URW Gothic", "Trebuchet MS", sans-serif; --body: "Newsreader", "Iowan Old Style", "Hoefler Text", Palatino, "Palatino Linotype", Georgia, serif; /* ELEVATION, not decoration. Three levels, and a shadow means one thing: how far off the page a surface sits. Ad-hoc shadows per component are what make a page read as busy rather than as layered. */ --e1: 0 1px 2px rgba(24,18,10,.05), 0 8px 18px -12px rgba(24,18,10,.34); --e2: 0 2px 5px rgba(24,18,10,.06), 0 20px 38px -22px rgba(24,18,10,.44); --e3: 0 4px 10px rgba(24,18,10,.08), 0 44px 70px -38px rgba(24,18,10,.6); --e4: 0 6px 14px rgba(24,18,10,.10), 0 62px 96px -42px rgba(24,18,10,.66); /* MOTION. One curve, weighted like a spring settling rather than an ease-out, and short enough to feel like a response to the pointer. */ --spring: cubic-bezier(.32, .72, 0, 1); --quick: .24s; /* SPACING on a 4px base, which is what keeps the rhythm even at the in-between widths the clamps interpolate through. */ --gut: clamp(20px, 3.2vw, 48px); --radius: clamp(20px, 2.4vw, 32px); --radiusSm: clamp(16px, 1.7vw, 24px); /* CONCENTRIC RADII: a rounded thing inside a rounded thing takes the outer radius minus the padding between them, or the curves fight. */ --radiusInner: 12px; /* THE TYPE RAMP, named and finite. Every size on the page comes from this list - nothing is set ad hoc - and every one is in rem so a reader who has raised their browser's text size gets a bigger page rather than a broken one. That is the web's Dynamic Type. */ --t-hero: clamp(2.375rem, 6.1vw, 5.5rem); --t-title1: clamp(2.375rem, 4.4vw, 4rem); /* every section heading */ --t-title2: clamp(2.125rem, 4.3vw, 3.875rem); --t-title3: clamp(1.6875rem, 2.9vw, 2.625rem); --t-head: clamp(1.1875rem, 1.8vw, 1.5625rem); --t-lede: clamp(1.0625rem, 1.45vw, 1.3125rem); --t-body: clamp(1.0625rem, 1.35vw, 1.1875rem); --t-callout: clamp(0.9375rem, 1.3vw, 1.125rem); --t-sub: clamp(0.875rem, 1.15vw, 1rem); --t-foot: 0.8125rem; --t-caption: 0.6875rem; } /* A reader who has asked for less transparency gets a solid surface, and one who has asked for more contrast gets firmer edges. Both are real settings that real people in this congregation will have switched on. */ @media (prefers-reduced-transparency: reduce) { .icgc-home-2026 { --materialBlur: none; } } .icgc-home-2026 * { box-sizing: border-box; } .icgc-home-2026 { margin: 0; background: var(--page); color: var(--tx); font-family: var(--body); -webkit-font-smoothing: antialiased; } .icgc-home-2026 img { max-width: 100%; } .icgc-home-2026 a { color: var(--gold); } .icgc-home-2026 a:hover { color: var(--goldLit); } .icgc-home-2026 a:focus-visible, .icgc-home-2026 .cta:focus-visible { outline: 3px solid var(--goldLit); outline-offset: 3px; border-radius: 6px; } /* Nothing you can tap is smaller than 44px in either direction. Stated on the class rather than left to whatever the padding happens to add up to. */ .icgc-home-2026 .cta { min-height: 52px; min-width: 44px; } .icgc-home-2026 .wrap { width: 100%; background: var(--page); overflow-x: clip; } .icgc-home-2026 .inner { width: 100%; max-width: 1600px; margin-inline: auto; padding-left: var(--gut); padding-right: var(--gut); } .icgc-home-2026 .eyebrow { font-family: var(--display); font-weight: 700; font-size: var(--t-foot); letter-spacing: 0.24em; text-transform: uppercase; margin: 0; } /* Every heading states its own colour. Leaving it unset let Divi's global heading rule through - the sermon title rendered near-black on the dark green message field, which is the same shape of fault as its p{padding-bottom:1em}: a bare-element rule reaching into a shortcode's markup. Inherit, so a heading takes the colour of whatever surface it is on rather than needing a rule per surface. */ .icgc-home-2026 h1, .icgc-home-2026 h2, .icgc-home-2026 h3, .icgc-home-2026 h4 { font-family: var(--display); margin: 0; color: inherit; } /* ---- hero ---- */ .icgc-home-2026 .hero { position: relative; padding: clamp(12px, 1.9vw, 28px); padding-bottom: 0; background: var(--ink); } .icgc-home-2026 .hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 55% at 88% 8%, rgba(227,169,63,.34) 0%, transparent 62%), radial-gradient(65% 60% at 6% 96%, rgba(15,93,78,.42) 0%, transparent 66%); } .icgc-home-2026 .heroInner { position: relative; max-width: 1600px; margin-inline: auto; } /* No card edge and no shadow: the photograph is not a picture ON the hero, it IS the hero, and it fades out before it reaches an edge (below). A rounded plate with a drop shadow around a picture whose edges have already dissolved draws a border around nothing. */ .icgc-home-2026 .plate { position: relative; border-radius: var(--radius); overflow: hidden; min-height: clamp(520px, 54vw, 760px); background: transparent; } /* THE EDGE FADE. Two linear masks intersected, rather than one radial: a radial mask on a 1440x760 box is a circle stretched into an ellipse, so it eats the left and right edges hard while barely touching the top - the fade looks lopsided even though the gradient is symmetrical. Two axes, each with its own inset, fade evenly on all four sides. Where mask-composite is not understood the two layers are ADDED instead of intersected, which unions to fully opaque - so the photograph simply keeps its old hard edge. That is the right way round for a fallback. */ .icgc-home-2026 .plate .frames { position: absolute; inset: 0; /* WIDER AND SOFTER than the first cut, which ran a straight ramp over 9% and still read as an edge - a linear ramp spends half its length in the top quarter of opacity, so the eye finds the line where the photograph reaches full strength and calls that the edge. These fade over roughly a sixth of the plate and ease into it: a quarter opacity is already reached in the first 5%, so what the eye meets first is a long, weak tail rather than the start of a slope. Stopping short of the headline is deliberate - the copy begins about 5% in and the photograph behind it must not dissolve, or the hero is type on a dark rectangle. */ --fadeX: linear-gradient(to right, transparent 0%, rgba(0,0,0,.22) 5%, rgba(0,0,0,.68) 10%, #000 17%, #000 83%, rgba(0,0,0,.68) 90%, rgba(0,0,0,.22) 95%, transparent 100%); --fadeY: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.22) 4%, rgba(0,0,0,.68) 9%, #000 15%, #000 85%, rgba(0,0,0,.68) 91%, rgba(0,0,0,.22) 96%, transparent 100%); -webkit-mask-image: var(--fadeX), var(--fadeY); mask-image: var(--fadeX), var(--fadeY); -webkit-mask-composite: source-in; mask-composite: intersect; } /* ---- THE PHOTOGRAPHS, AND WHOSE CODE ROTATES THEM ------------------ These classes belong to adinkra.js, which already drives every rotating picture on this site. This page had its own: three and a pair of CSS keyframes. It looked identical and it was not, because the site's rotator does two things a keyframe cannot. 1. It opens each group on a RANDOM photograph, in the browser, after the page is served - so a refresh brings a different picture. It has to happen client-side: LiteSpeed caches the HTML, so a pick made in PHP would be baked into the cache and every visitor would get the same one until it cleared. 2. It loads just in time. Only the first two frames of a group carry a src; the rest ship with data-src and are promoted a few beats before they are due, so 27 hero photographs cost two on first paint. Writing a second rotator would have meant two of them to keep saying the same thing, and this page would still have been the one that did not reshuffle on a refresh. The CSS below is adinkra.css's, scoped - that file is not loaded here, because its rules would reach these elements. TWO LAYERS, NOT A CROSS-FADE. The outgoing photograph stays fully opaque one layer down while the incoming one fades in over it. Fading one out while the other fades in leaves both near half opacity at the midpoint, so neither covers the other and the ground shows through - which reads as a blink rather than as a dissolve. */ .icgc-home-2026 .ad-rot { position: relative; } .icgc-home-2026 .ad-rot > img { position: absolute; inset: 0; width: 100%; max-width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; z-index: 0; transition: opacity var(--rot-fade, 1.4s) ease-in-out; will-change: opacity; } .icgc-home-2026 .ad-rot > img.is-out { opacity: 1; z-index: 1; } .icgc-home-2026 .ad-rot > img.is-on { opacity: 1; z-index: 2; } /* Read off the GROUP by the rotator AND used by the transition above, so the script and the fade cannot disagree. 3.5s ON EVERY GROUP, hero and cards alike, at the church's request. The live page is not quite uniform - adinkra.css sets 3.5s/1s on the hero and on the connect cards but lets the four service tiles fall through to :root's 5.2s/1.4s, so those turn over half again as slowly. Nobody wanted two speeds; they were the default showing through. One pair here. The fade is 1s: 29% of the beat, which is the proportion the rest of the site already reads at. */ .icgc-home-2026 .plate .frames, .icgc-home-2026 .card .shot, .icgc-home-2026 .tile .shot { --rot-period: 3.5s; --rot-fade: 1s; } .icgc-home-2026 .plate .veil { position: absolute; inset: 0; background: linear-gradient(103deg, rgba(14,11,7,.86) 0%, rgba(14,11,7,.42) 46%, rgba(0,0,0,.12) 100%); } .icgc-home-2026 .plate .copy { position: relative; padding: clamp(34px, 5.4vw, 84px) clamp(24px, 5vw, 72px) clamp(44px, 6.4vw, 96px); max-width: 860px; } .icgc-home-2026 .plate .eyebrow { color: var(--goldLit); } .icgc-home-2026 .plate h1 { color: #fff; font-weight: 500; font-size: var(--t-hero); line-height: 1.0; letter-spacing: -0.035em; color: #fff; margin: clamp(14px, 1.6vw, 22px) 0 0; max-width: 15ch; text-wrap: balance; } .icgc-home-2026 .plate h1 em { font-family: var(--body); font-style: italic; font-weight: 400; color: var(--goldLit); letter-spacing: -0.01em; } .icgc-home-2026 .plate .sub { font-size: var(--t-lede); line-height: 1.58; color: rgba(255,255,255,.9); max-width: 56ch; margin: clamp(16px, 1.8vw, 26px) 0 0; font-weight: 300; } .icgc-home-2026 .plate .sub em { font-style: normal; font-weight: 500; color: #fff; box-shadow: inset 0 -2px 0 var(--goldLit); } .icgc-home-2026 .cta { display: inline-flex; align-items: center; gap: 14px; margin: clamp(22px, 2.5vw, 36px) 0 0; min-height: 52px; background: var(--gold); color: #1B1206; text-decoration: none; font-family: var(--display); font-weight: 700; font-size: var(--t-sub); letter-spacing: 0.12em; text-transform: uppercase; padding: 16px clamp(24px, 2.4vw, 34px); border-radius: 999px; box-shadow: 0 10px 24px rgba(184,128,31,.4); transition: transform var(--quick) var(--spring), background-color var(--quick) var(--spring), box-shadow var(--quick) var(--spring); } .icgc-home-2026 .cta:hover { background: var(--goldLit); color: #1B1206; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(184,128,31,.4); } .icgc-home-2026 .cta:active { transform: translateY(0); } /* ---- the countdown ------------------------------------------------- The markup is NOT this file's. It comes from [icgc_countdown], which already owns the schedule, the skip list, the live cut-over and both states - so this styles that plugin's classes rather than reimplementing a ticker that would immediately drift from the real one. */ .icgc-home-2026 .cd { position: absolute; right: clamp(20px, 3.4vw, 72px); bottom: -44px; z-index: 3; padding: 22px clamp(20px, 2.2vw, 30px); border-radius: var(--radiusSm); background: rgba(255,253,248,.82); box-shadow: var(--e3); border: 1px solid rgba(255,255,255,.7); -webkit-backdrop-filter: var(--materialBlur, blur(30px) saturate(180%)); backdrop-filter: var(--materialBlur, blur(30px) saturate(180%)); } @supports not (backdrop-filter: blur(1px)) { .icgc-home-2026 .cd { background: var(--panel); } } @media (prefers-reduced-transparency: reduce) { .icgc-home-2026 .cd { background: var(--panel); } } .icgc-home-2026 .cd .ad-cd-countdown { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 32px); } .icgc-home-2026 .cd .ad-cd-meta { display: flex; flex-direction: column; } .icgc-home-2026 .cd .ad-cd-label { font-family: var(--display); font-weight: 700; font-size: var(--t-caption); letter-spacing: 0.22em; text-transform: uppercase; color: var(--goldText); } .icgc-home-2026 .cd .ad-cd-service { font-family: var(--display); font-weight: 500; font-size: var(--t-head); letter-spacing: -0.01em; color: var(--tx); margin-top: 5px; width: 13ch; line-height: 1.16; } .icgc-home-2026 .cd .ad-cd-skipped { font-size: var(--t-foot); color: var(--tx2); margin: 6px 0 0; width: 22ch; line-height: 1.4; } .icgc-home-2026 .cd .ad-cd-clock { display: flex; gap: 10px; } .icgc-home-2026 .cd .ad-cd-unit { min-width: 62px; text-align: center; padding: 10px 8px; border-radius: var(--radiusInner); background: rgba(20,16,12,.05); display: flex; flex-direction: column; } .icgc-home-2026 .cd .ad-cd-num { font-family: var(--display); font-weight: 600; font-size: clamp(1.5rem, 2.1vw, 1.875rem); line-height: 1; color: var(--tx); font-variant-numeric: tabular-nums; } .icgc-home-2026 .cd .ad-cd-den { font-family: var(--display); font-weight: 600; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tx2); margin-top: 6px; } /* The live state. [icgc_countdown] renders both and adds .is-live to swap them, so the only job here is to make the live half look like the card. */ .icgc-home-2026 .cd .ad-cd-live { display: none; } .icgc-home-2026 .cd .ad-cd.is-live .ad-cd-countdown { display: none; } .icgc-home-2026 .cd .ad-cd.is-live .ad-cd-live { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 22px); } .icgc-home-2026 .cd .ad-live-dot { width: 10px; height: 10px; border-radius: 50%; background: #0F5D4E; box-shadow: 0 0 0 4px rgba(15,93,78,.18); flex: none; animation: pulse 2.4s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } @media (prefers-reduced-motion: reduce) { .icgc-home-2026 .cd .ad-live-dot { animation: none; } } .icgc-home-2026 .cd .ad-live-copy { display: flex; flex-direction: column; } .icgc-home-2026 .cd .ad-live-label { font-family: var(--display); font-weight: 700; font-size: var(--t-caption); letter-spacing: 0.22em; text-transform: uppercase; color: #0F5D4E; } .icgc-home-2026 .cd .ad-live-service { font-family: var(--display); font-weight: 500; font-size: var(--t-head); letter-spacing: -0.01em; color: var(--tx); margin-top: 5px; line-height: 1.16; } .icgc-home-2026 .cd .ad-live-until { font-size: var(--t-foot); color: var(--tx2); margin-top: 4px; } .icgc-home-2026 .cd .ad-live-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 14px clamp(20px, 2vw, 28px); border-radius: 999px; background: #0F5D4E; color: #fff; text-decoration: none; font-family: var(--display); font-weight: 700; font-size: var(--t-sub); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; transition: transform var(--quick) var(--spring), background-color var(--quick) var(--spring); } .icgc-home-2026 .cd .ad-live-btn:hover { background: #0C4A3E; color: #fff; transform: translateY(-2px); } /* ---- sections ---- */ /* Tightened deliberately. The first cut ran a 118px top and a 40px bottom, so two sections met in a 158px seam and the page read as mostly ground. These are the seams the eye reads, not the paddings. */ /* Measured before it was changed: from the bottom of the service tiles to the top of "How You Can Serve." was 181px, of which 54 was a margin on the heading left over from when a gold label sat above it. Section padding and that margin were both paying for the same gap. */ .icgc-home-2026 .sec { padding-top: clamp(34px, 3.6vw, 52px); padding-bottom: clamp(14px, 1.6vw, 24px); } .icgc-home-2026 .sec.first { padding-top: clamp(40px, 4.2vw, 60px); } .icgc-home-2026 .sec .eyebrow { color: var(--goldText); } .icgc-home-2026 .sec { color: var(--tx); } /* One heading, nothing above it and nothing under it. margin 0 because there is no longer a gold label for it to sit beneath. */ .icgc-home-2026 .sec h2, .icgc-home-2026 .ghead { font-family: var(--display); font-weight: 500; font-size: var(--t-title1); line-height: 1.04; letter-spacing: -0.032em; color: var(--tx); margin: 0; text-wrap: balance; } /* ---- message ---- */ /* TWO COLUMNS, and the card is capped. A single column of body copy capped at a readable measure inside a 1,500px card left two thirds of the green empty, and the text piled up against the left edge - which reads as a fault, not as space. The title block takes the left column, the summary the right, and the cap stops the card growing wider than the copy can fill on a large monitor. */ .icgc-home-2026 .msg { margin-top: clamp(22px, 2.4vw, 34px); max-width: 1320px; border-radius: var(--radius); background: linear-gradient(128deg, #0F5D4E 0%, #0C4A3E 58%, #123F36 100%); color: #fff; padding: clamp(28px, 3.1vw, 44px) clamp(22px, 3.4vw, 50px) clamp(30px, 3.2vw, 46px); box-shadow: var(--e3); position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr 1.25fr; gap: 0 clamp(28px, 3.6vw, 56px); align-items: start; transition: transform var(--quick) var(--spring), box-shadow var(--quick) var(--spring); } /* The same lift as a card, on the one panel that did not have it. It already rested at --e3 because it is the largest surface on the page, so its hover needs a fourth step rather than the third. */ .icgc-home-2026 .msg:hover { transform: translateY(-4px); box-shadow: var(--e4); } .icgc-home-2026 .msg .lead { grid-column: 1; } .icgc-home-2026 .msg .read { grid-column: 2; } .icgc-home-2026 .msg::after { content: ""; position: absolute; right: -140px; top: -160px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(227,169,63,.26) 0%, transparent 68%); pointer-events: none; } .icgc-home-2026 .msg > * { position: relative; } .icgc-home-2026 .msg .eyebrow { color: var(--goldLit); } .icgc-home-2026 .msg .top { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; } .icgc-home-2026 .msg .date { font-family: var(--display); font-weight: 600; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,.74); white-space: nowrap; } .icgc-home-2026 .msg h3 { color: #fff; font-weight: 500; font-size: var(--t-title2); line-height: 1.02; letter-spacing: -0.032em; margin: 16px 0 0; text-wrap: balance; } .icgc-home-2026 .msg .body { font-size: var(--t-body); line-height: 1.72; color: rgba(255,255,255,.88); margin: 0; font-weight: 300; } .icgc-home-2026 .ctaRow { display: block; } .icgc-home-2026 .msg .ctaRow { margin-top: clamp(22px, 2.4vw, 34px); } .icgc-home-2026 .msg .cta { margin-top: 0; } /* ---- the sermon, and whose markup it is ---------------------------- [icgc_latest_message] renders this card: it reads the church's YouTube feed, takes the newest video, and pairs it with the summary somebody wrote in wp-admin under Messages. The first cut of this page did NOT call it - the title, the date, the summary and the Watch link were interpolated from content.json and baked into the plugin, frozen at 7 September 2026. It matched the live page on the day it was built and would have been wrong by the following Sunday, with nothing to say so: a stale string is still a string, so every parity check passed. Worse, it quietly orphaned the Messages admin screen, whose ONLY consumer anywhere is that shortcode - staff would have gone on writing summaries that reached no page at all. So the markup below is the shortcode's, not this file's, exactly as the countdown is. What is left here is placement. The shortcode emits a flat sequence - eyebrow, title, date, summary, button - and the approved design is two columns with the date beside the eyebrow, so the card is a grid and each part is placed by name. Three columns, because the eyebrow and the date share the first row and neither should stretch. */ /* .msg is ITSELF a two-column grid - it has to be, because the static card inside it is two columns of this file's own markup. The shortcode's card is a single child, so without this it lands in column one and the summary is squeezed into a 100px ribbon. It spans instead, and does its own columns. */ .icgc-home-2026 .msg .ytm-card { display: grid; width: 100%; grid-column: 1 / -1; grid-template-columns: max-content 1fr 1.25fr; grid-template-rows: auto auto 1fr; gap: 0 clamp(28px, 3.6vw, 56px); align-items: start; } .icgc-home-2026 .msg .ytm-eyebrow { grid-column: 1; grid-row: 1; margin: 0; font-family: var(--display); font-weight: 700; font-size: var(--t-foot); letter-spacing: 0.24em; text-transform: uppercase; color: var(--goldLit); white-space: nowrap; } .icgc-home-2026 .msg .ytm-meta { grid-column: 2; grid-row: 1; margin: 0; font-family: var(--display); font-weight: 600; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,.74); white-space: nowrap; } .icgc-home-2026 .msg .ytm-title { grid-column: 1 / 3; grid-row: 2; color: #fff; font-weight: 500; font-size: var(--t-title2); line-height: 1.02; letter-spacing: -0.032em; margin: 16px 0 0; text-wrap: balance; } .icgc-home-2026 .msg .ytm-actions { grid-column: 1 / 3; grid-row: 3; align-self: start; margin: clamp(22px, 2.4vw, 34px) 0 0; } .icgc-home-2026 .msg .ytm-summary { grid-column: 3; grid-row: 1 / -1; } .icgc-home-2026 .msg .ytm-summary p, .icgc-home-2026 .msg .ytm-note { font-size: var(--t-body); line-height: 1.72; color: rgba(255,255,255,.88); margin: 0 0 0.8em; font-weight: 300; } .icgc-home-2026 .msg .ytm-summary p:last-child { margin-bottom: 0; } /* The card has three states and only one of them has a summary. With no right-hand column the grid would leave a third of the panel empty, so the two states that carry no summary run full width instead. */ .icgc-home-2026 .msg .ytm-card-plain, .icgc-home-2026 .msg .ytm-card-empty { grid-template-columns: max-content 1fr; } .icgc-home-2026 .msg .ytm-card-plain .ytm-title, .icgc-home-2026 .msg .ytm-card-empty .ytm-title, .icgc-home-2026 .msg .ytm-card-plain .ytm-actions, .icgc-home-2026 .msg .ytm-card-empty .ytm-actions { grid-column: 1 / -1; } .icgc-home-2026 .msg .ytm-note { grid-column: 1 / -1; grid-row: 3; margin-top: 14px; } .icgc-home-2026 .msg .ytm-card-empty .ytm-actions { grid-row: 4; } /* The button is the page's own, so a visitor does not meet a second button style on the one card that is not this file's markup. */ .icgc-home-2026 .msg .ytm-btn { display: inline-flex; align-items: center; gap: 14px; min-height: 52px; min-width: 44px; background: var(--gold); color: #1B1206; text-decoration: none; font-family: var(--display); font-weight: 700; font-size: var(--t-sub); letter-spacing: 0.12em; text-transform: uppercase; padding: 16px clamp(24px, 2.4vw, 34px); border-radius: 999px; box-shadow: 0 10px 24px rgba(184,128,31,.4); transition: transform var(--quick) var(--spring), background-color var(--quick) var(--spring); } .icgc-home-2026 .msg .ytm-btn:hover { background: var(--goldLit); color: #1B1206; transform: translateY(-2px); } .icgc-home-2026 .msg .ytm-btn:active { transform: translateY(0); } /* ---- service tiles ---- */ .icgc-home-2026 .times { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 20px); margin-top: clamp(22px, 2.4vw, 32px); } /* FLOATING AT REST. --e1 is a contact shadow: it says the card is lying on the page. --e2 has a wide, soft, offset lower half, which is what reads as "held above it". The hover shadow is unchanged - it still deepens under the card as the pointer arrives, which is the whole point of it. */ .icgc-home-2026 .tile { border-radius: var(--radiusSm); overflow: hidden; background: var(--panel); display: flex; flex-direction: column; border: 1px solid var(--hair); box-shadow: var(--e2); transition: transform var(--quick) var(--spring), box-shadow var(--quick) var(--spring); } .icgc-home-2026 .tile:hover { transform: translateY(-4px); box-shadow: var(--e3); } .icgc-home-2026 .tile .shot { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: var(--hair); } .icgc-home-2026 .tile .shot img { width: 100%; height: 100%; object-fit: cover; display: block; } .icgc-home-2026 .tile .shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(12,9,6,.72), transparent 58%); } .icgc-home-2026 .tile .day { position: absolute; left: 14px; bottom: 13px; z-index: 2; font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #1B1206; background: var(--goldLit); padding: 6px 12px; border-radius: 999px; } .icgc-home-2026 .tile .cap { padding: clamp(16px, 1.6vw, 20px) clamp(16px, 1.7vw, 22px) clamp(18px, 1.9vw, 24px); flex: 1; display: flex; flex-direction: column; } /* Pushed to the foot of the cell so the four pills sit on one line whatever the location above them does. */ .icgc-home-2026 .tile .tag { margin-top: auto; align-self: flex-start; } .icgc-home-2026 .tile h3 { color: var(--tx); font-weight: 500; font-size: var(--t-head); line-height: 1.1; letter-spacing: -0.018em; color: var(--tx); min-height: 2.2em; } .icgc-home-2026 .tile .hour { font-family: var(--display); font-weight: 500; font-size: var(--t-callout); color: var(--tx); margin-top: 8px; font-variant-numeric: tabular-nums; } .icgc-home-2026 .tile .where { font-size: var(--t-callout); line-height: 1.45; color: var(--tx2); margin-top: 4px; } .icgc-home-2026 .tile .tag { display: inline-block; margin-top: 14px; font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; padding: 7px 13px; border-radius: 999px; background: rgba(15,93,78,.12); color: #0C4A3E; } .icgc-home-2026 .tile .tag.online { background: rgba(184,128,31,.16); color: #7C5514; } /* ---- connect ---- */ .icgc-home-2026 .ghead { margin: clamp(40px, 4.2vw, 60px) 0 clamp(18px, 1.8vw, 26px); } /* The first heading in a section has the section's own padding above it and needs nothing of its own. The margin is kept on the class for any second heading that ever follows a grid. */ .icgc-home-2026 .ghead.first { margin-top: 0; } /* No .sec h2 + .ghead rule: "Get Connected" was removed rather than spaced, because once the gold labels went it sat directly above "How You Can Serve." at the same size and said the same thing twice. */ .icgc-home-2026 .sec h2 + .msg, .icgc-home-2026 .sec h2 + .times { margin-top: clamp(22px, 2.4vw, 34px); } .icgc-home-2026 .grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); } .icgc-home-2026 .grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); } /* Flex, so the coloured panel FILLS the cell. The grid stretches every card to the tallest in its row, but a block-level .body only ever grew to fit its own words - so a card with one line less of copy ended with a 25px strip of bare paper under the colour, rounded at the bottom, which reads as the panel having come up short. Measured, not guessed: three of the four Serve cards and one of the six Belong cards had exactly that gap. */ .icgc-home-2026 .card { border-radius: var(--radiusSm); overflow: hidden; box-shadow: var(--e2); display: flex; flex-direction: column; transition: transform var(--quick) var(--spring), box-shadow var(--quick) var(--spring); } .icgc-home-2026 .card:hover { transform: translateY(-4px); box-shadow: var(--e3); } .icgc-home-2026 .card .shot { aspect-ratio: 16 / 10; overflow: hidden; background: var(--hair); flex: none; } .icgc-home-2026 .card .shot img { width: 100%; height: 100%; object-fit: cover; display: block; } .icgc-home-2026 .card .body { padding: clamp(18px, 1.8vw, 22px) clamp(18px, 1.9vw, 24px) clamp(20px, 2.1vw, 26px); color: #fff; flex: 1 1 auto; } /* A step up each, at the church's request: these are the smallest words on the page and they are the ones that say what a ministry actually is. The min-height is in em, so the row alignment it buys follows the size rather than needing a second number. */ .icgc-home-2026 .card .name { font-family: var(--display); font-weight: 500; font-size: var(--t-lede); line-height: 1.14; letter-spacing: -0.016em; min-height: 2.28em; /* "Evangelism/Outreach" is one 19-character token with no space in it. At the old size it fitted a 160px phone column and at this one it does not, so it ran straight out of the card and was cut off by the panel's overflow. Let the browser hyphenate it first - is set, so it can - and break it anywhere only if that fails. Without the second half a language the browser has no dictionary for would still overflow. */ hyphens: auto; overflow-wrap: anywhere; } .icgc-home-2026 .card .copy { font-size: var(--t-callout); line-height: 1.55; color: rgba(255,255,255,.9); margin-top: 8px; font-weight: 400; text-wrap: pretty; } /* FIVE, because four cannot fill six cells without a repeat that touches. With four colours the Belong grid runs green, gold, clay, ink, green, gold - and at three across that puts the two greens and the two golds on facing diagonals, while at two across rows one and three are the same pair twice. A fifth colour moves the single unavoidable repeat to opposite corners of the grid at every width. Measured with tools/measure-home-card-surfaces.py: all five clear AA for the name and for the copy, which is white at 88% and has to be composited rather than read off as a grey. */ .icgc-home-2026 .c-green .body { background: #0F5D4E; } .icgc-home-2026 .c-gold .body { background: #8A5F1B; } .icgc-home-2026 .c-clay .body { background: #A34032; } .icgc-home-2026 .c-ink .body { background: #26302B; } .icgc-home-2026 .c-slate .body { background: #1C4E66; } /* Nothing. The last seam sweeps straight into the footer, which is dark and is its own full stop - 57px of empty paper between them was a gap, not a rest. Kept as a hook rather than deleted: whatever follows this page's last section is the thing that decides whether it needs air. */ .icgc-home-2026 .tail { height: 0; } /* The forced-live preview note. Deliberately unlike everything else on the page - it is scaffolding for a reviewer, not part of the design, and it is only ever rendered for somebody who can edit. */ .icgc-home-2026-previewnote { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 999; margin: 0; padding: 12px 16px; border-radius: 10px; background: #14100C; color: #FFF; font-family: var(--display); font-weight: 500; font-size: 14px; line-height: 1.4; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.4); } .icgc-home-2026-previewnote code { font-family: ui-monospace, Menlo, Consolas, monospace; background: rgba(255,255,255,.14); padding: 2px 6px; border-radius: 5px; } /* ---- curved seams -------------------------------------------------- The same swept curve the site already draws between its bands, kept as a mask rather than a background image so it works over the photograph at the top of the hero and over paper lower down. Height scales with the viewport: a 46px curve across 1600px is a straight line. */ .icgc-home-2026 .curve { display: block; height: clamp(26px, 3vw, 52px); line-height: 0; pointer-events: none; } .icgc-home-2026 .curve svg { display: block; width: 100%; height: 100%; } /* The path is filled with currentColor, so which colour a seam sweeps into is set by one property on the wrapper rather than by editing the SVG. */ .icgc-home-2026 .curve path { fill: currentColor; } /* Background = the section ABOVE, fill = the section BELOW. Both halves stated, on both classes: leaving the background off is what made the band-to-page seams invisible. */ .icgc-home-2026 .curve.into-band { background: var(--page); color: #E7DCC4; } .icgc-home-2026 .curve.into-page { background: #E7DCC4; color: var(--page); } /* A shade less than a paper section, because the band's own colour arrives at the seam and already announces the break - but not the 12px it was, which left the heading sitting on the curve once the label above it went. */ .icgc-home-2026 .sec.band { background: #E7DCC4; padding-top: clamp(24px, 2.6vw, 38px); } /* The seam at the foot of the hero: the paper sweeping up into the ink. Inside the hero and absolutely placed, because there is no ink below the section to draw on otherwise - and under the countdown card, which owns z-index 3. */ /* TALLER THAN THE SEAMS BETWEEN SECTIONS, and the reason is arithmetic rather than emphasis: an S has to rise and fall inside the strip's height, and 39px of rise-and-fall spread over 1,290px of width is a straight line with a kink in it. The section seams are single sweeps and read fine at that height; this one is the only S against ink and it needs about twice the amplitude before the shape is legible at arm's length. The hero's bottom padding moves with it so the strip still sits in ink rather than climbing over the photograph. */ .icgc-home-2026 .hero { padding-bottom: clamp(42px, 4.8vw, 84px); } .icgc-home-2026 .hero .seam { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: clamp(40px, 5vw, 88px); line-height: 0; color: var(--page); } .icgc-home-2026 .hero .seam svg { display: block; width: 100%; height: 100%; } .icgc-home-2026 .hero .seam path { fill: currentColor; } @media (prefers-reduced-motion: reduce) { .icgc-home-2026 .tile, .icgc-home-2026 .card, .icgc-home-2026 .cta, .icgc-home-2026 .msg { transition: none; } .icgc-home-2026 .tile:hover, .icgc-home-2026 .card:hover, .icgc-home-2026 .cta:hover, .icgc-home-2026 .msg:hover { transform: none; } /* THE PHOTOGRAPH CROSS-FADE TOO. adinkra.js stops ADVANCING the rotation under reduced motion but still picks a random opening frame, and that pick swaps .is-on - so the transition on .ad-rot > img still runs a one-second dissolve on every group on the page. adinkra.css kills it with a rule this stylesheet had no counterpart for; somebody who asked their phone to stop things moving was getting fifteen fades on arrival. */ .icgc-home-2026 .ad-rot > img { transition: none; } } /* A reader who has asked for more contrast gets firmer edges and a heavier scrim under the hero type, which is where thin white-on-photograph loses first. */ @media (prefers-contrast: more) { .icgc-home-2026 .tile, .icgc-home-2026 .cd { border-color: #191D18; } .icgc-home-2026 .plate .veil { background: linear-gradient(103deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.72) 46%, rgba(0,0,0,.4) 100%); } .icgc-home-2026 .plate .sub { color: #fff; } .icgc-home-2026 .tile .where, .icgc-home-2026 .sec .lede { color: var(--tx); } } /* ---- 1120: laptops. The four-across rows are the first thing to give. ---- */ @media (max-width: 1120px) { .icgc-home-2026 .times, .icgc-home-2026 .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .icgc-home-2026 .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---- 900: the countdown stops floating and takes its own line ---- */ @media (max-width: 900px) { /* One column: at this width the split leaves neither side a usable measure. */ .icgc-home-2026 .msg { grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 3vw, 28px) 0; } .icgc-home-2026 .msg .lead, .icgc-home-2026 .msg .read { grid-column: 1; } .icgc-home-2026 .msg .ctaRow { margin-top: clamp(18px, 2.4vw, 26px); } .icgc-home-2026 .cd { position: static; margin-top: 18px; width: 100%; } .icgc-home-2026 .cd .ad-cd-countdown { justify-content: space-between; } .icgc-home-2026 .cd .ad-cd-service { width: auto; } .icgc-home-2026 .plate .copy { padding-bottom: clamp(34px, 5vw, 56px); } } /* ---- 560: phones ---- */ @media (max-width: 560px) { .icgc-home-2026 .plate { min-height: 500px; } .icgc-home-2026 .cd .ad-cd-countdown { flex-direction: column; align-items: flex-start; gap: 16px; } .icgc-home-2026 .cd .ad-cd-clock { width: 100%; justify-content: space-between; gap: 6px; } .icgc-home-2026 .cd .ad-cd-unit { min-width: 0; flex: 1; } .icgc-home-2026 .cd .ad-cd.is-live .ad-cd-live { flex-direction: column; align-items: flex-start; } .icgc-home-2026 .cd .ad-live-btn { width: 100%; } /* A FLAT SCRIM ON A PHONE, which is what adinkra.css does and this did not. The desktop veil is directional - .86 at the left falling to .12 at the right - which is right when the type occupies the left half of a wide plate. On a phone the words fill the width, so the end of every line sits on almost bare photograph: measured over the brightest frames in the rotation the 17px lede lands at 3.1:1 against the 4.5:1 it needs. The live page's own comment records the same finding and the same floor. */ .icgc-home-2026 .plate .veil { background: linear-gradient(180deg, rgba(14,11,7,.82) 0%, rgba(14,11,7,.78) 55%, rgba(14,11,7,.70) 100%); } .icgc-home-2026 .msg .top { flex-direction: column; align-items: flex-start; gap: 10px; } /* One column at this width, the same as the static card above. */ .icgc-home-2026 .msg .ytm-card, .icgc-home-2026 .msg .ytm-card-plain, .icgc-home-2026 .msg .ytm-card-empty { grid-template-columns: minmax(0, 1fr); } .icgc-home-2026 .msg .ytm-eyebrow, .icgc-home-2026 .msg .ytm-meta, .icgc-home-2026 .msg .ytm-title, .icgc-home-2026 .msg .ytm-actions, .icgc-home-2026 .msg .ytm-summary, .icgc-home-2026 .msg .ytm-note { grid-column: 1; grid-row: auto; } /* Stacked, the date falls under the title instead of beside the eyebrow, and with both margins at zero it sat on the descenders. */ .icgc-home-2026 .msg .ytm-meta { margin-top: 8px; } .icgc-home-2026 .msg .ytm-summary { margin-top: 14px; } .icgc-home-2026 .card .name { min-height: 2.6em; } /* ONE LINE FOR THE SECTION HEADING, and the number is measured rather than picked. "Where You Can Belong." is the longest of the four and, in this face at these tracking values, it occupies 10.74px of width for every 1px of type size. The line it has to fit in is the viewport less the 20px gutter on each side, so the largest size that holds it on one line is (100vw - 40px) / 10.74 - which is 8.6vw minus a hair, and that is what this says. At 375px it lands on 29px against a 31px ceiling. The 1.5rem floor is for the narrow phones below 320px, where nothing fits and something has to give; the 2.375rem cap is --t-title1's own floor, so nothing here ever makes a heading BIGGER than the ramp says. */ .icgc-home-2026 .sec h2, .icgc-home-2026 .ghead { font-size: clamp(1.5rem, calc(8.6vw - 3px), 2.375rem); } } /* ---- 340: only the very narrowest phones go single-column ---- Two-up is deliberate and it is the site's own finding: dropping the fourteen cards to full width put 7,007px of scroll on a 375px screen, most of it photographs. adinkra.css records the same conclusion from the live page - "four full-width cards were 1,705px of scroll on a 375px screen". Single column is kept for the widths where two columns genuinely cannot hold a word. */ @media (max-width: 340px) { .icgc-home-2026 .tile h3 { min-height: 0; } .icgc-home-2026 .card .name { min-height: 0; } .icgc-home-2026 .times, .icgc-home-2026 .grid4, .icgc-home-2026 .grid3 { grid-template-columns: minmax(0, 1fr); } }