/* 1000 Villagers — shared brand stylesheet (deep navy / warm orange / sage on cream). Brand fonts (DM Serif Display + Inter) are loaded via the same-origin fonts.css link in each page's . Matches the homepage (index.html) inline design system. */ :root { --warm: #F5F0EB; --cream: #FDF6EE; --deep: #2C3E50; /* deep navy — headings, brand, footer */ --accent: #E67E22; /* warm orange — decorative accents */ --accent-dark: #D35400; /* hover / emphasis */ --cta-bg: #B45309; /* white-on-orange button surfaces — WCAG AA on white (~5:1) */ --cta-hover: #99440A; --sage: #7D9B76; --sage-light: #E8F0E6; --text: #3A3A3A; --text-light: #6B7280; --white: #FFFFFF; --line: rgba(44, 62, 80, 0.12); --max-width: 760px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--text); line-height: 1.65; margin: 0; background: var(--warm); } /* Skip link (a11y) */ .skip-link { position: absolute; left: 8px; top: -52px; background: var(--deep); color: var(--white); padding: 10px 16px; border-radius: 8px; z-index: 200; text-decoration: none; font-weight: 600; transition: top 0.15s ease; } .skip-link:focus { top: 8px; } /* Header / nav */ header { background: var(--cream); border-bottom: 1px solid var(--line); } nav { max-width: 960px; margin: 0 auto; padding: 16px 24px; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; font-size: 15px; } nav .brand { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: 22px; color: var(--deep); margin-right: auto; text-decoration: none; letter-spacing: 0.2px; } nav a { color: var(--deep); text-decoration: none; font-weight: 500; } nav a:hover { color: var(--accent-dark); } nav a.cta { background: var(--cta-bg); color: var(--white); padding: 8px 16px; border-radius: 20px; font-weight: 600; } nav a.cta:hover { background: var(--cta-hover); color: var(--white); } main { max-width: var(--max-width); margin: 0 auto; padding: 48px 24px 24px 24px; } h1 { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: 40px; color: var(--deep); margin: 0 0 8px 0; line-height: 1.15; letter-spacing: -0.3px; } .subtitle { font-size: 19px; color: var(--text-light); margin: 0 0 40px 0; font-style: italic; } h2 { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: 28px; color: var(--deep); margin-top: 44px; margin-bottom: 10px; letter-spacing: -0.1px; } h3 { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: 21px; color: var(--deep); margin-top: 30px; margin-bottom: 8px; } p { margin: 12px 0; } a { color: var(--accent-dark); } ul, ol { padding-left: 24px; } li { margin: 8px 0; } .principle { background: var(--white); border-left: 4px solid var(--accent); padding: 20px 24px; margin: 22px 0; border-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); } .principle h3 { margin-top: 0; margin-bottom: 6px; display: flex; align-items: center; gap: 12px; } .principle .icon { font-size: 28px; } .principle p:last-child { margin-bottom: 0; } blockquote { border-left: 4px solid var(--sage); padding: 4px 0 4px 20px; margin: 24px 0; font-style: italic; color: var(--text-light); } .callout { background: var(--sage-light); border-radius: 8px; padding: 20px 24px; margin: 28px 0; } .callout strong { color: var(--deep); } /* Inline call-to-action button (e.g. on For Families) */ .btn-cta { display: inline-block; background: var(--cta-bg); color: var(--white); text-decoration: none; font-weight: 600; padding: 12px 24px; border-radius: 24px; } .btn-cta:hover { background: var(--cta-hover); color: var(--white); } details { background: var(--white); border-radius: 6px; padding: 16px 20px; margin: 12px 0; border: 1px solid var(--line); } details summary { cursor: pointer; font-weight: 600; color: var(--deep); list-style: none; padding-right: 24px; position: relative; } details summary::-webkit-details-marker { display: none; } details summary::after { content: "+"; position: absolute; right: 0; top: 0; font-size: 22px; font-weight: 400; color: var(--accent-dark); transition: transform 0.2s; } details[open] summary::after { content: "−"; } details[open] summary { margin-bottom: 14px; } figure { margin: 28px 0; text-align: center; } figure img { max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } figcaption { margin-top: 10px; font-size: 14px; color: var(--text-light); font-style: italic; } .lead { font-size: 18px; line-height: 1.6; } .tag { display: inline-block; background: var(--sage-light); color: var(--deep); padding: 3px 10px; border-radius: 12px; font-size: 13px; margin-right: 6px; } /* Footer — matches the homepage navy footer */ footer { background: var(--deep); color: rgba(255, 255, 255, 0.8); padding: 48px 24px 32px; text-align: center; margin-top: 60px; } footer .footer-brand { font-family: 'DM Serif Display', Georgia, serif; font-size: 22px; color: var(--white); margin: 0 auto 4px; } footer p { margin: 8px 0; font-size: 14px; } footer a { color: var(--accent); text-decoration: none; } footer a:hover { color: var(--white); } footer .links { margin: 16px 0; } footer .links a { margin: 0 8px; white-space: nowrap; } footer .disclaimer { font-style: italic; color: rgba(255, 255, 255, 0.6); font-size: 13px; max-width: 560px; margin: 16px auto 0; } /* Visible keyboard focus (a11y, WCAG 2.4.7) */ a:focus-visible, summary:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--accent-dark); outline-offset: 2px; border-radius: 2px; } @media (max-width: 760px) { h1 { font-size: 32px; } h2 { font-size: 24px; } .subtitle { font-size: 17px; } nav { gap: 14px; font-size: 14px; } main { padding: 32px 20px 20px 20px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }