/** * DWF Custom Theme - branch article and agency profile pages (3.0.6). * * Loaded only on the two page templates "DWF - Agency Profile" and * "DWF - Branch Article" (functions.php, dwf_enqueue_branch_article_assets()). * Source: the two templates Eric approved on 10/6 and 10/8/26, kept in the * Resource Hub under Page-Templates-Drafts/. Both templates share this file; * the profile's rules were a complete superset of the article's. * * PART 1 is the Style Guide's own components, which the theme's * style-guide.css does not carry yet (tabs, link rows, stepper, pills, * quote, color box, filter grid and so on). Every selector starts with * .dwf-branch-article so it cannot reach the header, footer or any other * page, and so it wins over base.css inside the wrapper. When these components move into * style-guide.css, delete Part 1. * * PART 2 is the rules that are not in the Style Guide yet (the templates' * "BLOCK 2"). They are approved for these two page types only. Their selectors * carry the wrapper class twice on purpose: in the approved drafts these * rules outranked the Part 1 rules by one class, and doubling it keeps * that order now that Part 1 carries the wrapper class too. * * No page width, no font family and no brand color is set here; all of * those come from the theme's tokens. */ /* ===== PART 0: hold the approved look ===== The theme's sitewide files (base.css, dwf-gtg-component-library.css) carry their own, different versions of a few of these components: a tighter heading line height, Committee List as two columns of rounded cards, finder cards with rounded corners and inner padding, and small uppercase At a Glance labels. Eric approved these two page types without those, so they are switched off here, inside the wrapper only. This block sits before Part 1 on purpose: Part 1 and Part 2 then set the approved values on top. If the Style Guide later settles on one version sitewide, delete the matching line here. */ .dwf-branch-article h2{line-height:inherit} .dwf-branch-article .body-wrap .article > .committee-list{margin-top:0;margin-bottom:0} .dwf-branch-article .committee-list{gap:normal} .dwf-branch-article .committee-list article,.dwf-branch-article .committee-list article:first-child{border:0;border-radius:0} .dwf-branch-article .filter-grid .card{border-radius:0} .dwf-branch-article .filter-grid .card-body{padding:0} .dwf-branch-article .fact-label{font-size:inherit;line-height:inherit;letter-spacing:normal;text-transform:none;margin-bottom:0} .dwf-branch-article .fact-value{font-size:inherit;line-height:inherit} /* ===== PART 1: Style Guide components, scoped ===== */ .dwf-branch-article *,.dwf-branch-article *::before,.dwf-branch-article *::after{box-sizing:border-box} .dwf-branch-article{color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.55} .dwf-branch-article h1,.dwf-branch-article h2,.dwf-branch-article h3,.dwf-branch-article h4,.dwf-branch-article p,.dwf-branch-article dl,.dwf-branch-article dt,.dwf-branch-article dd,.dwf-branch-article figure,.dwf-branch-article ul,.dwf-branch-article ol{margin:0} .dwf-branch-article a{color:var(--ink)} .dwf-branch-article .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .dwf-branch-article .dwf-page-title{font-family:var(--serif);font-style:normal;font-weight:400;font-size:clamp(36px,4.6vw,56px);line-height:1.05;letter-spacing:-.02em;color:var(--house);margin:0 0 8px} .dwf-branch-article .dwf-page-title-wrap{padding:32px 0 0} .dwf-branch-article .lede{font-size:20px;line-height:1.4;font-weight:400;color:var(--ink)} .dwf-branch-article .body-wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,1fr);gap:48px;margin:28px 0 40px;align-items:start} @media (max-width:900px){ .dwf-branch-article .body-wrap{grid-template-columns:minmax(0,1fr);gap:28px} } .dwf-branch-article h2{font-family:var(--font);font-style:normal;font-weight:700;font-size:clamp(24px,2.8vw,34px);letter-spacing:-.025em;line-height:1.2;margin-bottom:14px;color:var(--ink)} /* 3.4.0: upright sans h2, same as every page except chapters (Eric, 10/29/26); was italic serif. */ .dwf-branch-article h3{font-size:clamp(22px,2.4vw,32px);font-weight:700;letter-spacing:-.025em;line-height:1.3;color:var(--ink)} .dwf-branch-article h4{font-size:20px;font-weight:700;letter-spacing:-.025em;line-height:1.3;color:var(--ink)} .dwf-branch-article p{margin-bottom:1em} .dwf-branch-article .side-stack{display:grid;gap:14px} .dwf-branch-article .facts-box{background:var(--paper);border-radius:10px;overflow:hidden} .dwf-branch-article .facts-box-header{background:var(--agencies);color:#fff;padding:12px 16px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase} .dwf-branch-article .fact{margin:0 16px;padding:12px 0;border-bottom:1px solid var(--rule)} .dwf-branch-article .side-card{background:var(--paper);border-radius:10px;padding:18px 16px} .dwf-branch-article .side-card > h4{margin-bottom:8px} .dwf-branch-article .link-rows{display:grid;gap:14px} .dwf-branch-article .link-rows.cols-1{grid-template-columns:1fr} .dwf-branch-article .link-rows.cols-2{grid-template-columns:1fr 1fr} .dwf-branch-article .link-row{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink)} .dwf-branch-article .link-row .link-row-text{flex:1;min-width:0} .dwf-branch-article .link-row h4{font-size:14px;font-weight:700;margin-bottom:3px} .dwf-branch-article .link-row p{font-size:12.5px;color:var(--muted);line-height:1.4} .dwf-branch-article .link-row .arrow{flex-shrink:0;font-size:16px;color:var(--muted)} .dwf-branch-article .link-row:hover .arrow{color:var(--ink)} .dwf-branch-article .link-rows--list .link-row{padding:10px 0} .dwf-branch-article .link-rows--cards .link-row{padding:16px 18px} .dwf-branch-article .link-rows--cards .link-row:hover h4{text-decoration:underline} .dwf-branch-article .link-row .micro{display:block;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:6px} .dwf-branch-article .side-card .link-rows--list .link-row{padding:7px 0;display:flex;justify-content:space-between;align-items:center} .dwf-branch-article .side-card .link-rows--list .link-row h4{margin:0} .dwf-branch-article .side-card .link-rows--list .link-row:not(:has(.arrow))::after{content:"\2193";color:var(--muted);font-size:14px;margin-left:10px} @media (max-width:900px){ .dwf-branch-article .link-rows.cols-2{grid-template-columns:1fr} } .dwf-branch-article .tabset{border:1px solid var(--rule);border-radius:10px;overflow:hidden;max-width:640px} .dwf-branch-article .tabset input{position:absolute;opacity:0;pointer-events:none} .dwf-branch-article .tabset-nav{display:flex;border-bottom:1px solid var(--rule)} .dwf-branch-article .tabset-nav label{flex:1;text-align:center;padding:12px 10px 9px;font-size:12.5px;font-weight:700;letter-spacing:.03em;color:var(--muted);cursor:pointer;border-right:1px solid var(--rule);border-bottom:4px solid transparent} .dwf-branch-article .tabset-nav label:last-child{border-right:0} .dwf-branch-article .tabset-panels{position:relative;padding:20px 22px} .dwf-branch-article .tabset-panel{display:none;font-size:14.5px;color:var(--muted);line-height:1.6} .dwf-branch-article .tab-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:4px} .dwf-branch-article .tab-card{background:#fff;border:1px solid var(--rule);border-radius:8px;padding:14px 16px} .dwf-branch-article .tab-card-tag{display:block;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--rust);margin-bottom:6px} .dwf-branch-article .tab-card p{font-size:13.5px;color:var(--ink);line-height:1.5;margin:0} .dwf-branch-article .path-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px} .dwf-branch-article .path-tabs input{position:absolute;opacity:0;pointer-events:none} .dwf-branch-article .path-tabs label{flex:1;min-width:150px;border:1px solid var(--rule);border-radius:8px;padding:12px 14px;cursor:pointer} .dwf-branch-article .path-tabs label strong{display:block;font-size:13.5px;margin-bottom:3px} .dwf-branch-article .path-tabs label span{display:block;font-size:12px;color:var(--muted);line-height:1.4} .dwf-branch-article .path-tabs input:checked + label{border:2px solid var(--ink);background:var(--soft)} .dwf-branch-article .path-tabs input:checked + label strong::before{content:'\25B8 \0020'} .dwf-branch-article .path-panel{display:none} .dwf-branch-article #path-a:checked ~ .path-panels .path-panel-a,.dwf-branch-article #path-b:checked ~ .path-panels .path-panel-b{display:block} .dwf-branch-article .stepper-connected{display:flex;position:relative} .dwf-branch-article .stepper-connected .step-c{flex:1;text-align:center;position:relative;padding:0 6px} .dwf-branch-article .stepper-connected .step-c:not(:last-child)::after{content:'';position:absolute;top:24px;left:50%;width:100%;height:1px;background:var(--rule);z-index:0} .dwf-branch-article .stepper-connected .num-circle{width:48px;height:48px;border-radius:50%;border:1px solid var(--rule);background:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-style:italic;font-size:20px;color:var(--house);margin:0 auto 12px;position:relative;z-index:1} .dwf-branch-article .stepper-connected .step-c h4{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px;color:var(--ink)} .dwf-branch-article .stepper-connected .step-c p{font-size:13px;color:var(--muted);line-height:1.5;max-width:190px;margin:0 auto} .dwf-branch-article .pill-list{display:flex;flex-wrap:wrap;gap:8px} .dwf-branch-article .pill{display:inline-block;background:var(--soft);color:var(--muted);border:1px solid var(--rule);border-radius:999px;padding:6px 14px;font-size:12.5px;font-weight:700;letter-spacing:.02em;text-decoration:none} .dwf-branch-article a.pill:hover{color:var(--ink);border-color:var(--ink)} .dwf-branch-article .committee-list{display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:8px;overflow:hidden} .dwf-branch-article .committee-list article{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;padding:14px 18px;border-top:1px solid var(--rule)} .dwf-branch-article .committee-list article:first-child{border-top:0} .dwf-branch-article .committee-list h4{font-size:14.5px;font-weight:700;margin-bottom:3px} .dwf-branch-article .committee-list p{font-size:13px;color:var(--muted);line-height:1.4} .dwf-branch-article .committee-list .chamber-tag{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:5px 10px;border-radius:999px;color:#fff;white-space:nowrap} .dwf-branch-article .callout-block{background:var(--soft);border-radius:8px;padding:22px 26px} .dwf-branch-article .callout-block .eyebrow{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px} .dwf-branch-article .callout-block h4{font-size:19px;margin-bottom:8px} .dwf-branch-article .callout-block p{font-size:14px;color:var(--muted);line-height:1.55} .dwf-branch-article .footnote{font-size:12px;line-height:1.5;color:var(--muted);border-top:1px solid var(--rule);padding-top:8px;margin-top:14px} .dwf-branch-article .body-wrap .article > .callout-block{margin-top:24px;margin-bottom:24px} /* 3.3.2: "Try this" callout carries an icon on the left (Eric, Federalist No. 1 notes, 10/28/26). Content adds the class callout-block--try; the icon is a theme image. */ .dwf-branch-article .callout-block--try,.post-content .callout-block--try{position:relative;padding-left:86px} .dwf-branch-article .callout-block--try::before,.post-content .callout-block--try::before{content:"";position:absolute;left:24px;top:22px;width:44px;height:44px;background:url(../images/icons/try.png) center/contain no-repeat} /* 3.3.2: a quote in the article body (Key passages) uses the quote component at its natural height, with room around it. */ .dwf-branch-article .body-wrap .article > blockquote.quote{height:auto;margin-top:28px;margin-bottom:10px;padding:18px 0} .dwf-branch-article blockquote,.dwf-branch-article cite{margin:0} .dwf-branch-article .quote{background:#fff;width:100%;height:100%;display:flex;align-items:center;justify-content:center} .dwf-branch-article .quote-body{display:flex;gap:16px;align-items:center} .dwf-branch-article .quote--narrow .quote-body{gap:10px} .dwf-branch-article .quote-mark{font-family:var(--serif);font-size:112px;line-height:.7;color:#a39784;flex-shrink:0} .dwf-branch-article .quote--narrow .quote-mark{font-size:76px} .dwf-branch-article .quote-text{flex:1;min-width:0} .dwf-branch-article .quote-text p{font-family:var(--serif);font-style:normal;font-size:22px;line-height:1.4;color:var(--ink)} .dwf-branch-article .quote--narrow .quote-text p{font-size:16px} .dwf-branch-article .quote-text cite{display:block;text-align:right;margin-top:12px;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .dwf-branch-article .snapshot-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .dwf-branch-article .snapshot-strip div{padding:0} .dwf-branch-article .snapshot-strip span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px} .dwf-branch-article .snapshot-strip strong{display:block;font-size:16px} @media (max-width:700px){ .dwf-branch-article .snapshot-strip{grid-template-columns:1fr 1fr} } .dwf-branch-article .powers-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 26px} .dwf-branch-article .powers-grid > div{display:flex;gap:12px;align-items:flex-start} .dwf-branch-article .powers-grid img{width:30px;height:30px;flex-shrink:0;object-fit:contain} .dwf-branch-article .powers-grid h4{font-size:14px;font-weight:700;margin-bottom:4px} .dwf-branch-article .powers-grid p{font-size:12.5px;color:var(--muted);line-height:1.45} @media (max-width:800px){ .dwf-branch-article .powers-grid{grid-template-columns:1fr 1fr} } @media (max-width:500px){ .dwf-branch-article .powers-grid{grid-template-columns:1fr} } .dwf-branch-article .body-wrap .article > .powers-grid{margin-top:24px;margin-bottom:24px} .dwf-branch-article .box{border-radius:12px;color:#fff;padding:26px} .dwf-branch-article .box img.icon{width:58px;height:58px;object-fit:contain;flex-shrink:0} .dwf-branch-article .box .box-head{display:flex;gap:16px;align-items:flex-start} .dwf-branch-article .box .eyebrow{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.78;margin-bottom:8px} .dwf-branch-article .box h3{font-family:var(--serif);font-style:italic;font-weight:400;font-size:24px;line-height:1.1;margin-bottom:12px} .dwf-branch-article .box p.desc{font-size:14px;line-height:1.55;opacity:.95} .dwf-branch-article .box .stats{display:grid;gap:9px;margin-top:16px} .dwf-branch-article .box .stats > div,.dwf-branch-article .box .stats > a{background:rgba(255,255,255,.12);border-radius:8px;padding:9px 11px;color:#fff;text-decoration:none;display:block} .dwf-branch-article .box .stats a{transition:background .15s} .dwf-branch-article .box .stats a:hover{background:rgba(255,255,255,.22)} .dwf-branch-article .box .stats span{display:block;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.72;margin-bottom:2px} .dwf-branch-article .box .stats strong{display:block;font-family:var(--font);font-style:normal;font-size:17px;line-height:1.05} .dwf-branch-article .box-hero{display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:center;padding:32px 36px} .dwf-branch-article .box-hero .stats{grid-template-columns:repeat(2,1fr);margin-top:0;min-width:250px} @media (max-width:800px){ .dwf-branch-article .box-hero{grid-template-columns:1fr;text-align:left} .dwf-branch-article .box-hero .stats{grid-template-columns:1fr 1fr} } .dwf-branch-article .side-tabset{display:grid;grid-template-columns:200px 1fr;gap:36px} .dwf-branch-article .side-tabset input{position:absolute;opacity:0;pointer-events:none} .dwf-branch-article .side-nav{display:flex;flex-direction:column} .dwf-branch-article .side-nav label{padding:13px 14px 13px 16px;border-bottom:1px solid var(--rule);border-left:3px solid transparent;font-size:14px;font-weight:700;color:var(--muted);cursor:pointer} .dwf-branch-article .side-panels{position:relative} .dwf-branch-article .side-panel{display:none} .dwf-branch-article .side-panel a{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--rule);color:var(--house);font-weight:700;font-size:14px;text-decoration:none} @media (max-width:700px){ .dwf-branch-article .side-tabset{grid-template-columns:1fr} } .dwf-branch-article .dwf-plain-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin:0 0 2.5rem} .dwf-branch-article .dwf-plain-grid h3{margin:0 0 .5em} .dwf-branch-article .dwf-plain-grid p{margin:0;color:var(--muted);font-size:.92em;line-height:1.45} .dwf-branch-article .dwf-carousel{position:relative;display:flex;align-items:center;gap:8px} .dwf-branch-article .dwf-carousel-track{display:flex;gap:20px;overflow-x:auto;scroll-behavior:smooth;padding:8px 4px;flex:1;min-width:0} .dwf-branch-article .dwf-carousel-track::-webkit-scrollbar{height:6px} .dwf-branch-article .dwf-carousel-track::-webkit-scrollbar-thumb{background:var(--rule);border-radius:3px} .dwf-branch-article .dwf-carousel-item{display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0;width:100px;text-decoration:none;text-align:center} .dwf-branch-article .dwf-carousel-item .icon-circle{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:var(--soft);color:var(--ink);font-size:11px;font-weight:700;letter-spacing:.02em;flex-shrink:0;overflow:hidden} .dwf-branch-article .dwf-carousel-item .icon-circle img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block} .dwf-branch-article .dwf-carousel-item .label{font-size:12px;line-height:1.25;color:var(--muted);text-wrap:balance} .dwf-branch-article .dwf-carousel-item:hover .label{color:var(--ink)} .dwf-branch-article .dwf-carousel-item.current .icon-circle{box-shadow:0 0 0 3px var(--rust)} .dwf-branch-article .dwf-carousel-item.current .label{color:var(--ink);font-weight:700} .dwf-branch-article .dwf-carousel-arrow{flex-shrink:0;width:32px;height:32px;border-radius:50%;border:1px solid var(--rule);background:#fff;color:var(--ink);font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center} .dwf-branch-article .dwf-carousel-arrow:hover{background:var(--soft)} /* ===== PART 2: approved rules not yet in the Style Guide ===== */ /* BRANCH: the one line to change per branch. */ .dwf-branch-article.dwf-branch-article{--branch:var(--agencies)} /* Stand-in for the theme's page row, so this file previews alone. */ /* Intro paragraph: fills the full content width under the title. No rule under it. */ .dwf-branch-intro{padding:8px 0 0} /* Body 80% + sidebar 20%, as percentages. The space between them is padding inside the article column, so the two columns add up to 100%. */ .dwf-branch-article.dwf-branch-article .body-wrap{grid-template-columns:80% 20%;gap:0} .dwf-branch-article.dwf-branch-article .body-wrap > .article{padding-right:5%} @media (max-width:900px){.dwf-branch-article.dwf-branch-article .body-wrap{grid-template-columns:100%;gap:28px}.dwf-branch-article.dwf-branch-article .body-wrap > .article{padding-right:0}} /* 3.2.6 FULL-WIDTH PAGE ("DWF - Full-width Page", template-fullwidth.php): the same frame with no sidebar, so the article column is 100%. Three classes so it outranks the 80/20 rule above at every width. */ .dwf-branch-article.dwf-branch-article.dwf-branch-article--fullwidth .body-wrap{grid-template-columns:100%;gap:0} .dwf-branch-article.dwf-branch-article.dwf-branch-article--fullwidth .body-wrap > .article{padding-right:0} /* SIDEBAR (to be defined in the Style Guide as one element). At a Glance: header bar takes the branch color, like a color box. Each fact is two lines: first bold black, second plain black. Everything below At a Glance sits on white: a heading, then plain rows with an arrow at the right (down arrow for On This Page, right arrow for links). Topics uses the guide's pill list. */ .dwf-branch-article.dwf-branch-article .facts-box-header{background:var(--branch);border-radius:10px 10px 0 0} .dwf-branch-article.dwf-branch-article .fact{margin:0;padding:10px 0;font-size:87.5%;line-height:1.35;border-bottom:0} .dwf-branch-article.dwf-branch-article .fact-label{font-weight:700;color:var(--ink)} .dwf-branch-article.dwf-branch-article .fact-value{font-weight:400;color:var(--ink)} .dwf-branch-article.dwf-branch-article .side-card{padding:6px 0 0;background:#fff} /* Article spacing only. Footnote loses its rule line (no faint lines). */ .dwf-branch-article.dwf-branch-article .footnote{border-top:0;padding-top:0} .dwf-branch-article.dwf-branch-article .article > h2{margin-top:48px;scroll-margin-top:24px} .dwf-branch-article.dwf-branch-article .dwf-full-row > h2{scroll-margin-top:24px} /* Components fill their column (the guide caps .tabset at 640px). */ .dwf-branch-article.dwf-branch-article .tabset{max-width:none} .dwf-branch-article.dwf-branch-article .tabset-panel > h4{margin-bottom:6px} .dwf-branch-article.dwf-branch-article .path-panels{flex:1 0 100%;padding-top:24px} .dwf-branch-article.dwf-branch-article .stepper-connected .step-c p{max-width:none} @media (max-width:700px){ .dwf-branch-article.dwf-branch-article .stepper-connected{flex-direction:column;gap:20px} .dwf-branch-article.dwf-branch-article .stepper-connected .step-c:not(:last-child)::after{display:none} .dwf-branch-article.dwf-branch-article .tabset-nav{flex-wrap:wrap} .dwf-branch-article.dwf-branch-article .tabset-nav label{flex:1 1 50%} .dwf-branch-article.dwf-branch-article .committee-list article{grid-template-columns:1fr} } /* FILTER BAR + FILTER GRID: since 3.1.0 the finder lives once, sitewide, in dwf-gtg-component-library.css (script: assets/js/filter-bar.js). Only the full-row spacing below is specific to these pages. */ .dwf-branch-article.dwf-branch-article .dwf-full-row{margin:0 0 40px} /* Keyboard focus for the radio-driven tabs (the guide hides the inputs). */ .dwf-branch-article.dwf-branch-article .tabset:has(input:focus-visible) .tabset-nav, .dwf-branch-article.dwf-branch-article .path-tabs input:focus-visible + label{outline:2px solid var(--ink);outline-offset:2px} .dwf-branch-article.dwf-branch-article a:focus-visible,.dwf-branch-article.dwf-branch-article button:focus-visible{outline:2px solid var(--ink);outline-offset:2px} /* One motion moment: a tab panel fades in when chosen. Off for reduced motion. */ @media (prefers-reduced-motion:no-preference){ .dwf-branch-article.dwf-branch-article .tabset-panel,.dwf-branch-article.dwf-branch-article .path-panel{animation:dwf-panel-in .18s ease-out} @keyframes dwf-panel-in{from{opacity:0}to{opacity:1}} } /* ---- NEW IN THIS FILE (not in agencybranchtemplate.html). Twelve rules. Rules 6 to 12 answer Eric's 10/6 notes. ---- */ /* 1. TOP ROW. Title, intro and stat bar at the left (66%); the quote at the right (33%), centered top to bottom (layout standard, Eric 10/5/26). Percentages; the space between is padding inside the left column, the same way the body does it. Stacks on a phone. */ .dwf-branch-article.dwf-branch-article .dwf-top-row{display:grid;grid-template-columns:66.666% 33.334%;align-items:center} .dwf-branch-article.dwf-branch-article .dwf-top-row > div{padding-right:5%} .dwf-branch-article.dwf-branch-article .dwf-top-row .snapshot-strip{margin-top:24px} .dwf-branch-article.dwf-branch-article .dwf-top-row .quote{height:auto} @media (max-width:900px){.dwf-branch-article.dwf-branch-article .dwf-top-row{grid-template-columns:100%;gap:24px}.dwf-branch-article.dwf-branch-article .dwf-top-row > div{padding-right:0}} /* 2. LINK ROWS, list arrangement, in two columns: column gap only. */ .dwf-branch-article.dwf-branch-article .article > .link-rows--list.cols-2{gap:0 5%} /* 3. Row heading spacing for the full-width rows. */ .dwf-branch-article.dwf-branch-article .dwf-full-row > h3{margin-bottom:12px} /* 4. COMMITTEE LIST on a phone: the tag keeps its own width under the text (it stretched edge to edge). agencybranchtemplate.html needs the same line. */ @media (max-width:700px){.dwf-branch-article.dwf-branch-article .committee-list .chamber-tag{justify-self:start}} /* 5. Space above and below the components that sit straight in the article. */ .dwf-branch-article.dwf-branch-article .article > .side-tabset,.dwf-branch-article.dwf-branch-article .article > .box,.dwf-branch-article.dwf-branch-article .article > .dwf-plain-grid{margin-top:24px;margin-bottom:24px} /* 6. PAGE TITLE: red italic (Eric, 10/6). The live theme has it red and upright; the Style Guide's page title is italic. Goes into the theme. */ .dwf-branch-article.dwf-branch-article .dwf-page-title{font-style:normal} /* 3.4.0: upright like every page title except chapters (Eric, 10/29/26); was italic. */ /* 7. STAT BAR balance (Eric: "a little bit unbalanced"). The guide's four equal columns left the last fact stranded short of the right edge. Each column is now as wide as its fact and the row is spread edge to edge. */ .dwf-branch-article.dwf-branch-article .snapshot-strip{grid-template-columns:repeat(4,auto);justify-content:space-between} @media (max-width:700px){.dwf-branch-article.dwf-branch-article .snapshot-strip{grid-template-columns:1fr 1fr;justify-content:stretch}} /* 8. SIDEBAR inset (Eric: content should fill about 90 to 95%; on the Executive Order page: "text should have a slight move from left edge"). Everything under the At a Glance bar sits 5% in from each side. */ .dwf-branch-article.dwf-branch-article .side-stack .fact,.dwf-branch-article.dwf-branch-article .side-stack .side-card{padding-left:5%;padding-right:5%} /* 9. SIDE TABS fill the column in percentages (the guide fixes the tab column at 200px), and the tab bodies use the article's text, not the guide's link-list style. Every tab is white; the active one keeps the black line (Eric, 10/6, on the Senate page). */ .dwf-branch-article.dwf-branch-article .side-tabset{grid-template-columns:30% 1fr;gap:5%} .dwf-branch-article.dwf-branch-article .side-nav label{background:#fff} .dwf-branch-article.dwf-branch-article .side-panel .powers-grid{grid-template-columns:100%;margin-bottom:16px} .dwf-branch-article.dwf-branch-article .side-tabset:has(input:focus-visible) .side-nav{outline:2px solid var(--ink);outline-offset:2px} @media (max-width:700px){.dwf-branch-article.dwf-branch-article .side-tabset{grid-template-columns:100%;gap:16px}} /* 10. COLOR BOX icons are always white (Style Guide rule). The icon set is black line art, so the box turns it white. */ .dwf-branch-article.dwf-branch-article .box img.icon{filter:brightness(0) invert(1)} .dwf-branch-article.dwf-branch-article .box-hero .stats{min-width:0} .dwf-branch-article.dwf-branch-article .box p.desc{margin:0} .dwf-branch-article.dwf-branch-article .box a{color:#fff} .dwf-branch-article.dwf-branch-article .box h3{color:#fff} /* 11. LOGO at the left of a link row (Eric: "Can you add logos to the left?"). The logo is an from the media library. The whole logo shows; nothing is cropped. If the file is missing, the image removes itself and the circle shows the agency's initials instead, so a row is never broken. */ .dwf-branch-article.dwf-branch-article .link-row .icon-circle{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:3.4em;height:3.4em;border-radius:50%;background:var(--soft);color:var(--ink);font-weight:700;font-size:.8em;margin-right:1em} .dwf-branch-article.dwf-branch-article .link-row .icon-circle img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;background:#fff} .dwf-branch-article.dwf-branch-article .link-row .icon-circle:has(img){background:none;border-radius:0} .dwf-branch-article.dwf-branch-article .link-row .icon-circle:has(img) > span{visibility:hidden} /* 12. CABINET CAROUSEL (Eric: full logos must show; bigger arrows). The live theme crops each seal to a small circle. Here the whole seal shows, larger, and the arrows are larger. The live theme's arrows had no script; a few lines at the foot of this file make them scroll the row. Four plain columns drop to two, then one, on small screens. */ .dwf-branch-article.dwf-branch-article .dwf-carousel-item{width:7.5em} .dwf-branch-article.dwf-branch-article .dwf-carousel-item .icon-circle{width:5em;height:5em;border-radius:0;background:none;overflow:visible} .dwf-branch-article.dwf-branch-article .dwf-carousel-item .icon-circle img{object-fit:contain;border-radius:0} .dwf-branch-article.dwf-branch-article .dwf-carousel-item.current .icon-circle{box-shadow:none} .dwf-branch-article.dwf-branch-article .dwf-carousel-item.current .label{border-bottom:3px solid var(--agencies);padding-bottom:2px} .dwf-branch-article.dwf-branch-article .dwf-carousel-arrow{width:2.4em;height:2.4em;font-size:1.3em} .dwf-branch-article.dwf-branch-article .dwf-carousel-item .label{display:block;max-width:100%} /* The four plain columns use h4 here (h3 on the live Congress pages): at 80% width an h3 wraps to two lines. */ .dwf-branch-article.dwf-branch-article .dwf-plain-grid h4{margin:0 0 .5em} @media (max-width:900px){.dwf-branch-article.dwf-branch-article .dwf-plain-grid{grid-template-columns:1fr 1fr}} @media (max-width:500px){.dwf-branch-article.dwf-branch-article .dwf-plain-grid{grid-template-columns:100%}} /* ===== Article page only ===== */ .dwf-branch-article.dwf-branch-article--article .path-tabs input:checked + label{background:#fff} .dwf-branch-article.dwf-branch-article--article .stepper-connected .num-circle{border-color:var(--muted)} .dwf-branch-article.dwf-branch-article--article .stepper-connected .step-c:not(:last-child)::after{background:var(--muted)} .dwf-branch-article.dwf-branch-article--article .article > .box{margin-top:24px;margin-bottom:24px} /* ===== In WordPress: room under the last block; the theme's shell gives the width ===== */ .dwf-branch-article.dwf-branch-article{padding-bottom:60px} /* ===================================================================== 3.0.8 (10/8/26). Four additions, all from Eric's decisions that day. ===================================================================== */ /* A. ONE PARAGRAPH SIZE. Eric, on the Courts page: "all text same size, prefer upper", and yes to every template. The intro under the title, the article's paragraphs and the line under each heading were three sizes; they all take the intro's (.lede above). The class is doubled, as in Part 2, so this outranks the base rules. The source line and the finder's count stay small. */ .dwf-branch-article.dwf-branch-article .article > p:not(.footnote), .dwf-branch-article.dwf-branch-article .dwf-full-row > p:not(.filter-count){font-size:20px;line-height:1.4} /* B. POWERS GRID, TWO ACROSS (approved with the Courts page). The Style Guide's grid is three across, which leaves a fourth item alone on a second row. */ .dwf-branch-article.dwf-branch-article .powers-grid.cols-2{grid-template-columns:1fr 1fr} @media (max-width:500px){.dwf-branch-article.dwf-branch-article .powers-grid.cols-2{grid-template-columns:1fr}} /* C. BEIGE (dwf_branch = soft), for general Congress pages. Approved by Eric 10/8: "rules for at a glance would be the same as color box rules, so black text on beige is appropriate." Beige is light, so the At a Glance bar and the color box take dark text and a rule line, as the Style Guide's own .box-beige does. Copied from congressbranchtemplate.html; only the selector's first class differs. */ .dwf-branch-article.dwf-branch-article--soft .facts-box-header{color:var(--ink);border:1px solid var(--rule);border-bottom:0} .dwf-branch-article.dwf-branch-article--soft .box{color:var(--ink);border:1px solid var(--rule)} .dwf-branch-article.dwf-branch-article--soft .box h3{color:var(--ink)} .dwf-branch-article.dwf-branch-article--soft .box .eyebrow{color:var(--muted);opacity:1} .dwf-branch-article.dwf-branch-article--soft .box p.desc{color:var(--muted);opacity:1} .dwf-branch-article.dwf-branch-article--soft .box img.icon{filter:invert(1) grayscale(1) opacity(.6)} /* D. Every tab white and darker stepper circles were written for the article template only (lines marked --article above). An article page can now have a top row and a profile can have a stepper, so both kinds get them. */ .dwf-branch-article.dwf-branch-article .path-tabs input:checked + label{background:#fff} .dwf-branch-article.dwf-branch-article .stepper-connected .num-circle{border-color:var(--muted)} .dwf-branch-article.dwf-branch-article .stepper-connected .step-c:not(:last-child)::after{background:var(--muted)} /* E. COMMITTEE LIST: the tag stays at the right. The component library's later card version pins the tag to row 1 (.committee-list article .chamber-tag {grid-row:1}), which moved it to the LEFT of the text on these templates. Found 10/8/26 comparing the Courts page with its approved file; the two agency templates in 3.0.6 had the same fault. */ .dwf-branch-article .committee-list article .chamber-tag{grid-row:auto}