/* * Shared stylesheet for the Lily Bharat campaign site. * * Tailwind (loaded via CDN in each page's ) covers layout, spacing and * most color/typography utilities. This file holds only what Tailwind * utilities express badly: the mobile nav panel, the fact strip, the * numbered story cards, the priority cards, the trustee role lists, the * shared focus ring, and the reduced-motion override. Every rule uses the * brand tokens already defined in each page's tailwind.config block: * primary #1D358E, primary-container #152669, secondary #E5A11D, * secondary-container #FFBA3F, secondary-dark #B37A0D, * surface-subtle #F6F8FD, on-surface #131B2E, * on-surface-variant #4A5568, outline-light #E2E8F0. */ /* Mobile nav disclosure panel. Visibility is toggled via the `hidden` attribute/property from the nav script. The `display: flex` below is an author rule, so it outranks the user agent's `[hidden] { display: none }` and the panel would stay open with the attribute set. The `[hidden]` rule that follows is what actually closes it. */ .site-nav-panel { width: 100%; border-top: 1px solid #E2E8F0; display: flex; flex-direction: column; } .site-nav-panel[hidden] { display: none; } .site-nav-panel a { padding: 0.9rem 1.25rem; font-weight: 600; color: #131B2E; border-bottom: 1px solid #E2E8F0; } .site-nav-panel a:last-child { border-bottom: none; } /* Gold fact strip: four columns on desktop, two at tablet, one on phones. */ .fact-strip { background: #E5A11D; color: #131B2E; } .fact-strip .fact-strip-grid { display: grid; grid-template-columns: repeat(4, 1fr); } .fact-strip .fact-strip-item { border-left: 1px solid rgba(19, 27, 46, 0.18); padding: 1.5rem 1.25rem; text-align: center; } .fact-strip .fact-strip-item:first-child { border-left: none; } @media (max-width: 767px) { .fact-strip .fact-strip-grid { grid-template-columns: repeat(2, 1fr); } .fact-strip .fact-strip-item:nth-child(2n+1) { border-left: none; } .fact-strip .fact-strip-item:nth-child(-n+2) { border-bottom: 1px solid rgba(19, 27, 46, 0.18); } } @media (max-width: 374px) { .fact-strip .fact-strip-grid { grid-template-columns: 1fr; } .fact-strip .fact-strip-item { border-left: none; border-bottom: 1px solid rgba(19, 27, 46, 0.18); } .fact-strip .fact-strip-item:last-child { border-bottom: none; } } /* Numbered background cards ("My background" section). */ .story-card { background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 20px; display: grid; grid-template-columns: 80px 1fr; gap: 1.25rem; padding: 1.75rem; transition: transform 0.15s ease; } .story-card:hover { transform: translateY(-4px); } .story-num { font-size: 46px; line-height: 1; color: #E5A11D; font-weight: 800; } @media (max-width: 559px) { .story-card { grid-template-columns: 1fr; } .story-num { font-size: 34px; } } /* Priority cards ("What I'll focus on"). */ .priority-card { background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 20px; padding: 1.75rem; color: #1D358E; } .priority-card .priority-icon-well { width: 54px; height: 54px; border-radius: 16px; background: #FFF2CC; color: #1D358E; display: flex; align-items: center; justify-content: center; font-weight: 800; } /* Unstyled role lists with a gold bullet, used on the trustee-role comparison and reused wherever a plain gold-bulleted list is needed. */ .role-list { list-style: none; margin: 0; padding: 0; } .role-list li { position: relative; padding-left: 26px; margin-bottom: 0.85rem; } .role-list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 8px; height: 8px; border-radius: 999px; background: #E5A11D; } /* Gold date band, used on the homepage voting-day callout and the vote page's key-dates block. */ .date-band { background: #E5A11D; color: #131B2E; border-radius: 20px; padding: 1.5rem 1.75rem; } /* Shared focus-visible ring. Navy areas (bg-primary / bg-primary-container and anything carrying data-tone="navy", which is the footer on every page) get the lighter gold ring so it still reads against a dark background. The data-tone selector is deliberately not qualified by an element name. The attribute is on the