/* ═══════════════════════════════════════════════════════════════ alsumait-said v1.0.0 — «What they said of him» (page 335) Loads only where the content carries dsc-said. Conventions inherited from alsumait-umma: dsc-said root + dss-* parts, full-bleed section with layout:default + an inner .dss-wrap that sets the width in CSS (avoids traps 22 and 48). ═══════════════════════════════════════════════════════════════ */ .dsc-said{ --dss-wrap:1120px; --dss-pad:clamp(20px,4vw,26px); --dss-serif:"Amiri",Georgia,"Times New Roman",serif; --dss-primary:#1F6F5F; --dss-main:#10322B; --dss-ink:#0B1614; --dss-main-accent:#C9E6DC; --dss-base:#fff; --dss-tertiary:#F3F6F5; --dss-sprout:#92D8D8; --dss-muted:#4C6B63; --dss-rule:#DCE8E3; --dss-accent:#E4F1EC; --dss-gold:#C79A3A; } /* the seven sections butt against each other — the theme's blockGap would otherwise leave a white band between every full-bleed band */ .dsc-said{margin-block-start:0!important;margin-block-end:0!important} .dsc-said .dss-wrap{max-width:var(--dss-wrap);margin-inline:auto;padding-inline:var(--dss-pad)} .dsc-said .dss-lab{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600; line-height:1.6;color:var(--dss-muted);margin:0} .dsc-said .dss-num{font-variant-numeric:tabular-nums} .dsc-said h1,.dsc-said h2,.dsc-said h3{font-family:var(--dss-serif);font-weight:400; line-height:1.08;text-wrap:balance} .dsc-said .dss-flag{display:inline-block;width:6px;height:6px;border-radius:50%; background:var(--dss-gold);margin-inline-start:7px;vertical-align:middle} /* reveal start states — set only when JS has added the body class */ body.dsc-said-anim .dsc-said .dss-rise{opacity:0;transform:translateY(26px); transition:opacity .7s ease,transform .7s ease} body.dsc-said-anim .dsc-said .dss-rise.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ body.dsc-said-anim .dsc-said .dss-rise{opacity:1!important;transform:none!important} } /* ── 1 · COVER ─────────────────────────────────────────────── */ .dsc-said.dss-hero{min-height:100vh;align-items:flex-end;overflow:hidden} .dsc-said.dss-hero .wp-block-cover__image-background{ transform:scale(1.06);transition:transform 14s linear} .dsc-said.dss-hero.go .wp-block-cover__image-background{transform:scale(1)} .dsc-said.dss-hero>.wp-block-cover__background{ background:linear-gradient(180deg,rgba(11,22,20,.42) 0%,rgba(11,22,20,.62) 45%,rgba(11,22,20,.97) 100%)!important; opacity:1!important} /* trap 58: core gives the inner container position:relative, which would make it the containing block for the watermark and drop the mark onto the headline. Made static, so the mark is measured from the cover itself; the two children that must sit above the overlay carry their own z-index instead. */ .dsc-said.dss-hero .wp-block-cover__inner-container{ position:static!important;max-width:var(--dss-wrap);margin-inline:auto;width:100%} .dsc-said.dss-hero .dss-mark{position:absolute;right:3vw;top:11vh;z-index:2; font-family:var(--dss-serif);direction:rtl;font-size:clamp(46px,6.4vw,96px);line-height:.9; opacity:.24;white-space:nowrap;pointer-events:none;user-select:none;margin:0} .dsc-said.dss-hero .dss-herotxt{position:relative;z-index:2} .dsc-said.dss-hero .dss-lab{color:var(--dss-gold)!important} .dsc-said.dss-hero h1{font-size:clamp(40px,7vw,100px);letter-spacing:-.012em; margin:14px 0 0;max-width:15ch} .dsc-said.dss-hero .dss-sub{font-family:var(--dss-serif);font-style:italic; font-size:clamp(19px,2.3vw,31px);margin:16px 0 0;max-width:48ch;line-height:1.3} .dsc-said.dss-hero .dss-row{margin-top:34px;padding-top:26px; border-top:1px solid rgba(255,255,255,.2);align-items:flex-end} .dsc-said.dss-hero .dss-stand{font-size:17px;margin:0;max-width:54ch} .dsc-said.dss-hero .dss-metaset{display:flex;gap:clamp(20px,3vw,36px);flex-wrap:wrap} .dsc-said.dss-hero .dss-metaset .dss-lab{color:var(--dss-sprout)!important} .dsc-said.dss-hero .dss-v{font-family:var(--dss-serif);font-size:30px;line-height:1.1;margin:4px 0 0} /* ── 2 · THE THREE ACTS ────────────────────────────────────── */ .dsc-said.dss-acts-sec{background:var(--dss-ink)} .dsc-said.dss-acts-sec .dss-acthead{padding-block:clamp(52px,8vh,88px) 30px} .dsc-said.dss-acts-sec .dss-acthead h2{font-size:clamp(27px,3.6vw,46px);margin:10px 0 0;max-width:21ch} .dsc-said.dss-acts-sec .dss-acthead .dss-lab{color:var(--dss-gold)} .dsc-said.dss-acts-sec .dss-acthead p:not(.dss-lab){max-width:56ch;margin:14px 0 0;font-size:15.5px} .dsc-said .dss-acts{gap:1px!important;margin-block:0;border-block:1px solid #24413B;background:#24413B} .dsc-said .dss-act{padding:36px clamp(20px,3vw,38px) 44px} .dsc-said .dss-act .dss-n{font-family:var(--dss-serif);font-size:56px;line-height:1;margin:0} .dsc-said .dss-act h3{font-size:23px;margin:12px 0 12px} .dsc-said .dss-act p:not(.dss-n):not(.dss-turn):not(.dss-src){margin:0;font-size:15.5px;line-height:1.62} .dsc-said .dss-act .dss-turn{font-family:var(--dss-serif);font-size:22px;line-height:1.42; margin:18px 0 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.28)} .dsc-said .dss-act .dss-src{margin:14px 0 0;font-size:10px;letter-spacing:.13em; text-transform:uppercase;line-height:1.7} /* ── 3 · THE HINGE ─────────────────────────────────────────── */ .dsc-said.dss-hinge{background:var(--dss-tertiary);border-bottom:1px solid var(--dss-rule); padding-block:clamp(56px,9vh,106px);text-align:center} .dsc-said.dss-hinge .dss-said-q{font-family:var(--dss-serif);direction:rtl; font-size:clamp(24px,4.2vw,54px);line-height:1.55;margin:14px auto 0;max-width:22ch; color:var(--dss-main)} .dsc-said.dss-hinge .dss-tr{font-family:var(--dss-serif);font-style:italic;color:var(--dss-muted); font-size:clamp(17px,1.9vw,23px);margin:20px auto 0;max-width:46ch;line-height:1.45} .dsc-said.dss-hinge .dss-src{margin:16px 0 0;font-size:10.5px;letter-spacing:.15em; text-transform:uppercase;color:var(--dss-muted)} .dsc-said.dss-hinge .dss-rule-note{margin:34px auto 0;max-width:62ch;font-size:16px; color:var(--dss-main);padding-top:26px;border-top:1px solid var(--dss-rule)} .dsc-said.dss-hinge .dss-rule-note strong{color:var(--dss-primary)} /* ── 4 · TWO REGISTERS ─────────────────────────────────────── */ .dsc-said.dss-reg{border-bottom:1px solid var(--dss-rule)} .dsc-said .dss-regrow{gap:0!important;margin-block:0} .dsc-said .dss-regcol{padding:clamp(36px,6vh,62px) clamp(22px,4vw,52px)} .dsc-said .dss-regcol+.dss-regcol{border-left:1px solid var(--dss-rule)} .dsc-said .dss-k{font-family:var(--dss-serif);font-size:clamp(58px,8vw,112px);line-height:.88;margin:8px 0 0} .dsc-said .dss-regcol h3{font-size:clamp(20px,2.2vw,28px);margin:14px 0 8px} .dsc-said .dss-regcol p:not(.dss-lab):not(.dss-k){margin:0;color:var(--dss-muted); font-size:15px;max-width:46ch} .dsc-said .dss-regcol.b .dss-k{color:var(--dss-primary)} .dsc-said .dss-regcol.a .dss-k{color:var(--dss-muted)} /* ── 5 · THE WALL ──────────────────────────────────────────── */ .dsc-said.dss-wall{padding-block:clamp(56px,8vh,92px) clamp(66px,10vh,116px);background:var(--dss-base)} .dsc-said .dss-whead{display:flex;justify-content:space-between;align-items:flex-end; gap:26px;flex-wrap:wrap} .dsc-said .dss-whead h2{font-size:clamp(27px,3.6vw,46px);margin:10px 0 0} .dsc-said .dss-whead .dss-note{max-width:38ch;font-size:13.5px;color:var(--dss-muted);margin:0} .dsc-said .dss-chips{gap:8px!important;margin:28px 0 0;padding-bottom:24px; border-bottom:1px solid var(--dss-rule)} .dsc-said .dss-chips .wp-block-button{margin:0} .dsc-said .dss-chips .wp-block-button__link{ background:#fff!important;border:1px solid var(--dss-rule)!important; color:var(--dss-muted)!important;border-radius:100px!important; padding:8px 16px!important;font-size:12.5px!important;line-height:1.4!important; font-weight:500;letter-spacing:0;white-space:nowrap; transition:background .2s ease,color .2s ease,border-color .2s ease} .dsc-said .dss-chips .wp-block-button__link:hover{ border-color:var(--dss-primary)!important;color:var(--dss-main)!important} .dsc-said .dss-chips .wp-block-button__link b{font-variant-numeric:tabular-nums; margin-inline-start:6px;font-weight:600;color:var(--dss-main)} .dsc-said .dss-chips .is-on .wp-block-button__link{ background:var(--dss-main)!important;border-color:var(--dss-main)!important;color:#fff!important} .dsc-said .dss-chips .is-on .wp-block-button__link b{color:var(--dss-sprout)} .dsc-said .dss-chips .dss-goldchip.is-on .wp-block-button__link{ background:var(--dss-gold)!important;border-color:var(--dss-gold)!important;color:#3c2c07!important} .dsc-said .dss-chips .dss-goldchip.is-on .wp-block-button__link b{color:#3c2c07} .dsc-said .dss-grid{columns:3;column-gap:16px;margin-block-start:34px} .dsc-said .dss-grid>*{margin-block:0} .dsc-said .dss-card{break-inside:avoid;margin:0 0 16px!important; border:1px solid var(--dss-rule);border-radius:16px;padding:26px 24px;background:#fff; transition:border-color .22s ease,transform .22s ease,box-shadow .22s ease} .dsc-said .dss-card:hover{border-color:var(--dss-primary);transform:translateY(-2px); box-shadow:0 10px 30px rgba(16,50,43,.07)} .dsc-said .dss-card .dss-q{font-family:var(--dss-serif);font-size:19.5px;line-height:1.46;margin:0} .dsc-said .dss-card .dss-who{margin:18px 0 0;font-size:12.5px;color:var(--dss-muted);line-height:1.5} .dsc-said .dss-card .dss-who strong{display:block;color:var(--dss-main);font-weight:600; font-size:13.5px;line-height:1.3} .dsc-said .dss-card .dss-src{margin:16px 0 0;padding-top:13px;border-top:1px solid var(--dss-rule); font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--dss-muted);line-height:1.7} .dsc-said .dss-card.dss-hidden{display:none} .dsc-said .dss-card.dss-big{background:var(--dss-accent);border-color:#bcd8ce} .dsc-said .dss-card.dss-big .dss-q{font-size:26px;line-height:1.34} .dsc-said .dss-card.dss-dark{background:var(--dss-main);border-color:var(--dss-main)} .dsc-said .dss-card.dss-dark .dss-src{border-top-color:#2A4A42} .dsc-said .dss-card.dss-dark:hover{border-color:var(--dss-sprout)} .dsc-said .dss-card.dss-arb .dss-q{direction:rtl;text-align:right;font-size:22px;line-height:1.65} .dsc-said .dss-card.dss-tile{background:var(--dss-primary);border-color:var(--dss-primary)} .dsc-said .dss-card.dss-tile h3{font-size:24px;line-height:1.18;margin:0} .dsc-said .dss-card.dss-tile p{font-size:14.5px;margin:12px 0 18px} .dsc-said .dss-card.dss-tile .wp-block-button__link{ background:#fff!important;color:var(--dss-primary)!important;border-radius:100px!important; font-size:12.5px!important;padding:11px 20px!important;font-weight:600} .dsc-said .dss-legend{margin-block-start:30px;font-size:12.5px;color:var(--dss-muted)} .dsc-said .dss-empty{display:none;padding:36px 0;color:var(--dss-muted);font-size:15px} .dsc-said .dss-empty.is-on{display:block} /* ── 6 · THE TWIN ──────────────────────────────────────────── */ .dsc-said.dss-twin{background:var(--dss-main);padding-block:clamp(56px,9vh,100px)} .dsc-said .dss-twincols{gap:clamp(30px,4vw,54px)!important;align-items:center} .dsc-said.dss-twin h2{font-size:clamp(27px,3.4vw,44px);margin:10px 0 16px} .dsc-said.dss-twin .dss-lab{color:var(--dss-sprout)} .dsc-said.dss-twin p:not(.dss-lab):not(.dss-line){margin:0 0 16px} .dsc-said .dss-line{font-family:var(--dss-serif);font-size:clamp(20px,2.4vw,29px); line-height:1.4;margin:0 0 8px} .dsc-said .dss-scale{border:1px solid #2A4A42;border-radius:14px;overflow:hidden} .dsc-said .dss-scale .dss-srow{display:flex;justify-content:space-between;align-items:baseline; gap:16px;padding:18px 22px;border-top:1px solid #2A4A42;margin:0} .dsc-said .dss-scale .dss-srow:first-child{border-top:0} .dsc-said .dss-scale .dss-srow .l{font-size:14px} .dsc-said .dss-scale .dss-srow .r{font-family:var(--dss-serif);font-size:26px} /* ── 7 · SOURCES FOOT ──────────────────────────────────────── */ .dsc-said.dss-foot{border-top:1px solid var(--dss-rule);padding-block:42px; background:var(--dss-tertiary)} .dsc-said.dss-foot p{margin:0;font-size:13px;color:var(--dss-muted);max-width:80ch;line-height:1.7} /* ── mobile: the acts become a rail, per the chapter-07 device ── */ .dsc-said .dss-hud{display:none} @media(max-width:900px){ .dsc-said.dss-hero{min-height:88vh} .dsc-said.dss-hero h1{font-size:clamp(34px,10vw,56px)} .dsc-said.dss-hero .dss-mark{font-size:clamp(40px,15vw,84px);top:6vh} .dsc-said .dss-acts{display:flex!important;flex-wrap:nowrap!important; overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;gap:10px!important;padding:0 var(--dss-pad) 4px; background:none;border:0;scrollbar-width:none;min-width:0;max-width:100%} .dsc-said .dss-acts::-webkit-scrollbar{display:none} .dsc-said .dss-act{flex:0 0 84vw!important;scroll-snap-align:center;border-radius:16px; padding:26px 22px 30px} .dsc-said .dss-hud{display:flex;justify-content:space-between;align-items:center; padding:12px var(--dss-pad) 0;font-size:11px;letter-spacing:.16em;text-transform:uppercase; font-weight:600;color:#7fa39d} .dsc-said .dss-hud .bar{flex:1;height:2px;background:#2A4A42;margin:0 14px;position:relative} .dsc-said .dss-hud .bar i{position:absolute;inset:0 auto 0 0;background:var(--dss-sprout); width:33%;transition:.25s} .dsc-said .dss-regrow{flex-wrap:wrap!important} .dsc-said .dss-regcol+.dss-regcol{border-left:0;border-top:1px solid var(--dss-rule)} .dsc-said .dss-grid{columns:1} .dsc-said .dss-chips{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none; padding-bottom:18px;min-width:0;max-width:100%} .dsc-said .dss-chips::-webkit-scrollbar{display:none} .dsc-said .dss-twincols{flex-wrap:wrap!important} .dsc-said .dss-scale .dss-srow{padding:15px 18px} } @media(max-width:1200px) and (min-width:901px){ .dsc-said .dss-grid{columns:2} } /* ── colour lock ───────────────────────────────────────────── Every text block in the content carries an explicit colour token so it gains .has-text-color and stops matching the theme's colour rules (trap 57). WordPress preset colour classes are !important, so the exact hues this design needs are re-asserted here at higher specificity. */ .dsc-said .dss-lab{color:var(--dss-muted)!important} .dsc-said.dss-hero .dss-lab{color:var(--dss-gold)!important} .dsc-said.dss-hero .dss-metaset .dss-lab{color:var(--dss-sprout)!important} .dsc-said.dss-hero .dss-sub{color:var(--dss-main-accent)!important} .dsc-said.dss-hero .dss-stand{color:#cfe4de!important} .dsc-said.dss-hero h1,.dsc-said.dss-hero .dss-v,.dsc-said.dss-hero .dss-mark{color:#fff!important} .dsc-said.dss-acts-sec .dss-acthead .dss-lab{color:var(--dss-gold)!important} .dsc-said.dss-acts-sec .dss-acthead h2{color:#fff!important} .dsc-said.dss-acts-sec .dss-acthead p:not(.dss-lab){color:#9dbdb6!important} .dsc-said .dss-act h3,.dsc-said .dss-act .dss-turn{color:#fff!important} .dsc-said .dss-act p:not(.dss-n):not(.dss-turn):not(.dss-src){color:#9dbdb6!important} .dsc-said .dss-act .dss-n{color:#2f5a51!important} .dsc-said .dss-act .dss-src{color:#6f948c!important} .dsc-said .dss-act.dss-act3 p:not(.dss-n):not(.dss-turn):not(.dss-src){color:#d6efe7!important} .dsc-said .dss-act.dss-act3 .dss-n{color:#8ed3c2!important} .dsc-said .dss-act.dss-act3 .dss-src{color:#bfe3d8!important} .dsc-said.dss-hinge .dss-said-q{color:var(--dss-main)!important} .dsc-said.dss-hinge .dss-said-q strong{color:var(--dss-primary)!important;font-weight:400} .dsc-said.dss-hinge .dss-tr,.dsc-said.dss-hinge .dss-src{color:var(--dss-muted)!important} .dsc-said.dss-hinge .dss-rule-note{color:var(--dss-main)!important} .dsc-said .dss-regcol h3{color:var(--dss-main)!important} .dsc-said .dss-regcol p:not(.dss-lab):not(.dss-k){color:var(--dss-muted)!important} .dsc-said .dss-whead h2{color:var(--dss-main)!important} .dsc-said .dss-whead .dss-note,.dsc-said .dss-legend,.dsc-said .dss-empty{color:var(--dss-muted)!important} .dsc-said .dss-card .dss-q{color:var(--dss-main)!important} .dsc-said .dss-card .dss-who{color:var(--dss-muted)!important} .dsc-said .dss-card .dss-who strong{color:var(--dss-main)!important} .dsc-said .dss-card .dss-src{color:var(--dss-muted)!important} .dsc-said .dss-card.dss-dark .dss-q,.dsc-said .dss-card.dss-dark .dss-who strong{color:#fff!important} .dsc-said .dss-card.dss-dark .dss-who,.dsc-said .dss-card.dss-dark .dss-src{color:var(--dss-main-accent)!important} .dsc-said .dss-card.dss-tile h3{color:#fff!important} .dsc-said .dss-card.dss-tile p{color:#d6efe7!important} .dsc-said.dss-twin h2,.dsc-said.dss-twin .dss-line{color:#fff!important} .dsc-said.dss-twin p:not(.dss-lab):not(.dss-line){color:#a9c6c0!important} .dsc-said.dss-twin .dss-lab{color:var(--dss-sprout)!important} .dsc-said .dss-scale .dss-srow .l{color:#a9c6c0!important} .dsc-said .dss-scale .dss-srow .r{color:#fff!important} .dsc-said .dss-scale .dss-srow.dss-last{background:#0F1C1C} .dsc-said .dss-scale .dss-srow.dss-last .r{color:var(--dss-sprout)!important} .dsc-said.dss-foot p{color:var(--dss-muted)!important} .dsc-said.dss-foot a{color:var(--dss-primary)!important} /* ── section grounds (kept in CSS so the content carries no raw hex) ── */ .dsc-said .dss-act1{background:var(--dss-ink)} .dsc-said .dss-act2{background:#102520} .dsc-said .dss-act3{background:var(--dss-primary)} .dsc-said .dss-regcol.dss-rega{background:var(--dss-base)} .dsc-said .dss-regcol.dss-regb{background:var(--dss-accent)} .dsc-said .dss-scale{background:var(--dss-main)} .dsc-said .dss-regcol.dss-rega .dss-k{color:var(--dss-muted)!important} .dsc-said .dss-regcol.dss-regb .dss-k{color:var(--dss-primary)!important} /* ── mobile: the wall becomes a rail too (no very long column) ── */ @media(max-width:900px){ .dsc-said .dss-grid{columns:auto;display:flex;flex-wrap:nowrap;align-items:flex-start; overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;gap:12px;padding:0 var(--dss-pad) 6px; margin-inline:calc(-1 * var(--dss-pad));scrollbar-width:none;min-width:0;max-width:none} .dsc-said .dss-grid::-webkit-scrollbar{display:none} .dsc-said .dss-card{flex:0 0 82vw;scroll-snap-align:center;margin:0!important} .dsc-said .dss-hud{color:var(--dss-muted)} .dsc-said .dss-hud .bar{background:var(--dss-rule)} .dsc-said .dss-hud .bar i{background:var(--dss-primary)} .dsc-said.dss-acts-sec .dss-hud{color:#7fa39d} .dsc-said.dss-acts-sec .dss-hud .bar{background:#2A4A42} .dsc-said.dss-acts-sec .dss-hud .bar i{background:var(--dss-sprout)} } /* ═══ v1.3.1 — the wall is a Query Loop over the Testimonials content type ═══ .dss-grid is now the post-template