/* ============================================================ SIC City Stories — participant voices listed vertically. Portrait left, quote and attribution right, optional audio. ============================================================ */ .sicvoices { --sv-bg: #ffffff; --sv-text: #16203f; --sv-muted: #55617d; --sv-accent: #c8102e; --sv-rule: rgba(22,32,63,.14); --sv-tag: rgba(22,32,63,.30); background: var(--sv-bg); color: var(--sv-text); padding: 92px 48px 96px; font-family: var(--sic-body-font); } .sicvoices-inner { max-width: 1240px; margin: 0 auto; } /* ---- intro ---- */ .sicvoices-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 28px; font-family: var(--sic-label-font); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--sv-accent); } .sicvoices-eyebrow span { width: 34px; height: 1px; background: var(--sv-accent); display: inline-block; } .sicvoices-head { display: grid; /* The heading takes the room it needs and the intro follows in the space that is left. Two equal columns held the heading to half the section however short the intro was — and to the full half even when there was no intro at all. */ grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 56px; align-items: start; margin-bottom: 64px; } /* With no intro beside it, the heading has the whole width. */ .sicvoices-head:not(:has(.sicvoices-intro)) { grid-template-columns: minmax(0, 1fr); } .sicvoices-heading { margin: 0; font-family: var(--sic-heading-font); font-weight: 400; font-size: clamp(30px, 3.8vw, 54px); line-height: 1.08; /* A line break typed into the field breaks the line here. The text is stored with its newlines intact — HTML simply collapses them. */ white-space: pre-line; } .sicvoices-intro { margin: 0; color: var(--sv-muted); /* 20px default, matching About and City About. A Design-tab Font size for this element outranks the plain class, so a block set by hand keeps its own value. */ font-size: 20px; line-height: 1.7; } /* ---- list ---- */ .sicvoices-list { display: flex; flex-direction: column; } /* Scroll focus: in focus mode every row dims, and the one nearest the middle of the screen returns to full strength. The photo also desaturates while inactive, which is what gives the effect its weight. */ .sicvoices-list.is-focusmode .sicvoices-item { opacity: .28; transition: opacity .45s ease; } .sicvoices-list.is-focusmode .sicvoices-item.is-active { opacity: 1; } .sicvoices-list.is-focusmode .sicvoices-photo img { filter: grayscale(1); transition: filter .45s ease, transform .5s cubic-bezier(.2,.7,.3,1); } .sicvoices-list.is-focusmode .sicvoices-item.is-active .sicvoices-photo img { filter: grayscale(0); } .sicvoices-item { display: grid; grid-template-columns: 200px 1fr; gap: 44px; align-items: start; padding: 46px 0; border-top: 1px solid var(--sv-rule); } .sicvoices-item:first-child { border-top: 0; padding-top: 0; } /* portrait */ /* ---- topic, title and intro, above the quote ---- */ .sicvoices-topic { display: flex; align-items: baseline; gap: 12px; margin: 0 0 12px; font-family: var(--sic-label-font); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--sv-accent); } .sicvoices-title { margin: 0 0 14px; max-width: 22ch; font-family: var(--sic-heading-font); font-weight: 400; /* Through a variable, not a per-layout override. A rule like `.sicvoices-list.is-horizontal .sicvoices-title` (0,3,0) would outrank the Design tab's `[data-sd] .sicvoices-title` (0,2,0), so setting a font size for this element would silently do nothing in the card layout — the same trap the Columns control fell into. */ font-size: var(--sv-title-size, clamp(21px, 1.9vw, 30px)); line-height: 1.18; color: var(--sv-text); } .sicvoices-intro2 { margin: 0 0 22px; max-width: 46ch; /* 20px default — the shared body size. A Design-tab Font size for this element outranks the plain class, so a hand-set block keeps its own value. */ font-size: 20px; line-height: 1.7; color: var(--sv-muted); } .sicvoices-photo { aspect-ratio: 3 / 4; overflow: hidden; background: rgba(22,32,63,.06); } .sicvoices-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.7,.3,1); } .sicvoices-item:hover .sicvoices-photo img { transform: scale(1.05); } /* body */ .sicvoices-body { min-width: 0; } .sicvoices-mark { /* Space above, almost none below: the mark belongs to the quote it opens, so it sits tight against it and is separated from whatever comes before. The glyph's own box already carries empty space beneath it, which is why -2px reads as touching rather than overlapping. */ margin: clamp(18px, 2vw, 30px) 0 -2px; font-family: var(--sic-heading-font); font-size: 26px; line-height: 1; color: var(--sv-accent); } /* Nothing above it to be separated from, so no leading gap. */ .sicvoices-body > .sicvoices-mark:first-child { margin-top: 0; } /* A line break typed into the field is a line break on the page. The text is stored with its newlines intact; without this HTML collapses them and the paragraph runs on regardless of where Enter was pressed. */ .sicvoices-quote, .sicvoices-intro2, .sicvoices-text { white-space: pre-line; } .sicvoices-quote { margin: 0 0 26px; font-family: var(--sic-heading-font); font-style: italic; font-weight: 400; font-size: clamp(19px, 1.9vw, 27px); line-height: 1.42; color: var(--sv-text); } .sicvoices-name { margin: 0 0 10px; font-size: clamp(15px, 1.2vw, 18px); color: var(--sv-text); } .sicvoices-meta { margin: 0; font-family: var(--sic-label-font); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--sv-muted); } /* tags */ .sicvoices-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } .sicvoices-tag { border: 1px solid var(--sv-tag); border-radius: 999px; padding: 7px 16px; font-family: var(--sic-label-font); font-size: 11px; letter-spacing: .06em; color: var(--sv-muted); } /* audio */ /* Three controls now — button, bar, clock — so one line is enough and the row no longer needs to wrap. */ .sicvoices-audio { display: flex; align-items: center; gap: 12px; margin-top: 24px; } .sicvoices-play { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 999px; border: 0; cursor: pointer; background: var(--sv-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; transition: filter .15s ease, transform .15s ease; } .sicvoices-play:hover { filter: brightness(1.08); transform: scale(1.05); } .sicvoices-audio.is-playing .sicvoices-audio audio { display: none; } @media (max-width: 860px) { .sicvoices { padding: 60px 24px 64px; } .sicvoices-head { grid-template-columns: 1fr; gap: 22px; margin-bottom: 42px; } .sicvoices-item { grid-template-columns: 1fr; gap: 24px; padding: 34px 0; } .sicvoices-photo { aspect-ratio: 4 / 3; max-width: 260px; } } @media (prefers-reduced-motion: reduce) { .sicvoices-photo img { transition: none; } .sicvoices-list.is-focusmode .sicvoices-item { opacity: 1; transition: none; } .sicvoices-list.is-focusmode .sicvoices-photo img { filter: none; transition: none; } .sicvoices-item:hover .sicvoices-photo img { transform: none; } } /* ============================================================ Horizontal layout — cards, three to a row ------------------------------------------------------------ Six voices give two rows of three, three give one row: the track count is fixed and the rows come from the wrap, so the grid never has to be told how many items there are. ============================================================ */ .sicvoices-list.is-horizontal { display: grid; /* minmax(0, …): a bare 1fr will not shrink below its content, so one long unbroken quote would widen the whole page. */ grid-template-columns: repeat(3, minmax(0, 1fr)); /* Stated separately rather than as one `gap`, so a Gap set in the Design tab cannot take the space between ROWS with it — the columns are a matter of taste, the row spacing is what stops the fourth card arriving against the bottom of the first. */ column-gap: clamp(20px, 2.2vw, 32px); row-gap: clamp(28px, 3vw, 44px); /* Every card in a row takes the height of the tallest, so the space below them is the same across the row however much text each holds. Without this a short card ends early and the row below looks unevenly spaced beneath it. */ align-items: stretch; align-content: start; } /* The base list is a flex column; its items carry margins that would collapse into the grid's own spacing and make the rows uneven. */ .sicvoices-list.is-horizontal > .sicvoices-item { margin: 0; } .sicvoices-list.is-horizontal .sicvoices-item { /* The row rule and the two-column split belong to the vertical list. */ display: flex; flex-direction: column; grid-template-columns: none; gap: 0; border-top: 0; padding: 30px 32px 34px; border-radius: 14px; background: var(--sv-cardbg, #f2e0df); /* The accent cap along the top edge, as in the reference. */ box-shadow: inset 0 3px 0 0 var(--sv-accent); overflow: hidden; } .sicvoices-list.is-horizontal .sicvoices-item:first-child { padding-top: 30px; } /* The portrait in a three-up card is a supporting detail, not the subject, so it takes about 60% of the height it has in the vertical list — 3:4 becomes a wide 5:3 — and the card stays readable at a third of the width. */ .sicvoices-list.is-horizontal .sicvoices-photo { aspect-ratio: 5 / 3; max-width: none; margin-bottom: 20px; border-radius: 3px; } /* Audio belongs in the card too: the player is the point of the excerpt, and hiding it in this layout would make the Features choice depend on the Layout choice. It sits at the foot, after the attribution. */ .sicvoices-list.is-horizontal .sicvoices-audio { margin-top: auto; /* pinned to the foot so cards line up */ padding-top: 18px; } .sicvoices-list.is-horizontal /* The topic block reads tighter at card size. Set as a variable on the list, so the Design tab can still override the element itself. */ .sicvoices-list.is-horizontal { --sv-title-size: clamp(19px, 1.5vw, 24px); } .sicvoices-list.is-horizontal .sicvoices-intro2 { margin-bottom: 16px; } /* Hover: a small lift and the faintest shadow. Only in this layout — the vertical list has no card to lift. transform and box-shadow are both compositor-friendly, so a row of six costs nothing to animate. The inset accent cap is repeated in the shadow because box-shadow replaces rather than adds to the existing one. */ .sicvoices-list.is-horizontal .sicvoices-item { transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease; } .sicvoices-list.is-horizontal .sicvoices-item:hover { transform: translateY(-4px) scale(1.012); box-shadow: inset 0 3px 0 0 var(--sv-accent), 0 10px 30px rgba(2,24,89,.10); } /* Name and role sit at the foot of the card, so cards in a row line up however long their quotes are. */ .sicvoices-list.is-horizontal .sicvoices-body { display: flex; flex-direction: column; flex: 1 1 auto; } .sicvoices-list.is-horizontal .sicvoices-quote { flex: 1 1 auto; } @media (max-width: 1000px) { .sicvoices-list.is-horizontal { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .sicvoices-list.is-horizontal { grid-template-columns: minmax(0, 1fr); } } /* ============================================================ Initials — quotes with no photographs ------------------------------------------------------------ The portrait is replaced by a small disc carrying the first letter of the name, sitting with the attribution at the foot of the item rather than in a column of its own. ============================================================ */ /* No portrait column: the quote runs the full width of the item. Keyed off the item, not the list, because whether a voice shows a small round portrait depends on that voice's own fields — two in the same list can differ. The list-level rule is kept for the initials layout, where every item is the same. */ .sicvoices-list.is-initials .sicvoices-item, .sicvoices-item.is-avatar { display: block; grid-template-columns: none; gap: 0; } /* The face, small and round, in the initial disc's place. */ .sicvoices-avatar { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 999px; object-fit: cover; display: block; background: rgba(22,32,63,.06); } .sicvoices-attrib { display: flex; align-items: center; gap: 13px; margin-top: 22px; } .sicvoices-initial { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: #ffffff; font-family: var(--sic-heading-font); font-size: 17px; line-height: 1; /* Cycled per item through a custom property, so a Background set on this element in the Design tab still wins. */ background: var(--sv-initial-bg, var(--sv-accent)); } .sicvoices-attrib-text { display: flex; flex-direction: column; min-width: 0; } /* In this layout the name is a label beside the disc, not a dashed attribution line, so it drops the em dash and the indent. */ .sicvoices-list.is-initials .sicvoices-name, .sicvoices-item.is-avatar .sicvoices-name { margin: 0; font-weight: 600; font-family: var(--sic-body-font); font-size: 15px; color: var(--sv-text); } .sicvoices-list.is-initials .sicvoices-meta, .sicvoices-item.is-avatar .sicvoices-meta { margin: 2px 0 0; } /* Reduced motion, declared AFTER the hover rules above: media queries add no specificity, so an override placed earlier in the file would simply lose to them on source order — which is exactly what happened. The card keeps its shadow, since that is not motion, and stops moving. */ @media (prefers-reduced-motion: reduce) { .sicvoices-list.is-horizontal .sicvoices-item { transition: box-shadow .28s ease; } .sicvoices-list.is-horizontal .sicvoices-item:hover { transform: none; } } /* ============================================================ Audio transport ------------------------------------------------------------ The bars that used to sit here were 34 elements at pseudo- random heights from a hash of the row index — a picture of a waveform, not the audio. They showed nothing about the file and nothing about the position, so they are gone and the space is given to a real seek bar. The