/* org-layout.css andrewhillman.org — mint paper, emerald ink, mango pop. Bricolage Grotesque (display) + Manrope (body). Paper #F0FDF4, ink #064E3B, emerald #10B981, mango #F59E0B. Linked last in . Visual only — no copy changes. */ @import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700&family=Manrope:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap"); html { overflow-x: hidden; } :root { --bg: #F0FDF4; --panel: #D1FAE5; --surface: #FFFFFF; --cream: #F0FDF4; --paper: #F0FDF4; --ink: #064E3B; --ink-2: #065F46; --emerald: #10B981; --mango: #F59E0B; --mango-deep: #D97706; --accent: #10B981; --line: #A7F3D0; --hair: #D1FAE5; --line-strong: #047857; --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif; --serif: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif; --sans: "Manrope", "Gill Sans", "Trebuchet MS", "Segoe UI", system-ui, sans-serif; /* leftover token aliases — do not use forest / museum gold */ --navy: #064E3B; --navy-2: #022C22; --forest: #064E3B; --forest-d: #022C22; --gold: #F59E0B; --gold-ink: #064E3B; --gold-deep: #B45309; --gold-text: #064E3B; --star: #F59E0B; --blue: #064E3B; --red: #064E3B; --red-deep: #022C22; --accent-warm: #F59E0B; --accent-warm-ink: #064E3B; --accent-warm-deep: #D97706; } body { font-family: var(--sans) !important; font-size: 17.5px; font-weight: 400; line-height: 1.72; color: var(--ink); background: var(--bg); letter-spacing: 0; } img, svg { max-width: 100%; height: auto; } h1, h2, h3, h4, h5, h6, h1[style], h2[style], h3[style], .brand, .brand-name, .award h3, .princ .p h3, .gtl-h, .gtl-year, .ic .n { font-family: var(--display) !important; color: #064E3B; } h1, h2, h3 { text-wrap: balance; font-weight: 600; } h1 { letter-spacing: -0.03em; } h2 { letter-spacing: -0.022em; } h1 em, h2 em, h3 em, .hero h1 em { color: #064E3B !important; -webkit-text-fill-color: #064E3B !important; background: none !important; background-image: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; font-style: italic; } /* Wordmark */ .brand { display: inline-flex !important; align-items: center; gap: 0.55rem; color: #064E3B !important; font-weight: 600; letter-spacing: -0.03em; text-decoration: none; } .brand-mark, .brand img, .nav .brand img { width: 28px !important; height: 28px !important; margin: 0 !important; border-radius: 8px; object-fit: contain; display: block; } .brand-name { letter-spacing: -0.03em; font-weight: 650; line-height: 1; } .flagrule { height: 5px; background: linear-gradient(90deg, #10B981 0 28%, #F0FDF4 28% 58%, #F59E0B 58% 100%); } .nav { background: rgba(240, 253, 244, 0.94) !important; border-bottom: 1px solid var(--hair) !important; backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); } .nav-links a { color: #065F46; font-family: var(--sans); font-weight: 650; } .nav-links a:hover { color: #047857; } .hero { color: var(--ink); background: radial-gradient(78% 58% at 18% -8%, rgba(16, 185, 129, 0.22), transparent 64%), radial-gradient(56% 48% at 92% 108%, rgba(245, 158, 11, 0.18), transparent 70%), radial-gradient(40% 36% at 72% 8%, rgba(209, 250, 229, 0.55), transparent 72%), #F0FDF4; padding: 88px 32px 104px; } .hero::after { height: 5px; background: linear-gradient(90deg, #10B981 0 28%, #F0FDF4 28% 58%, #F59E0B 58% 100%); opacity: 1; } .hero .eyebrow { color: #064E3B; letter-spacing: 0.2em; font-family: var(--sans); font-weight: 700; } .hero h1 { color: #064E3B !important; } .hero h1 em { color: #064E3B; font-style: italic; font-weight: 500; } .hero p { color: #065F46; font-family: var(--sans); } .org-tree-mark { display: block; width: fit-content; margin: 0 auto 28px; padding: 10px; background: #FFFFFF; border-radius: 22px; box-shadow: 0 14px 36px rgba(6, 78, 59, 0.1); } .org-tree-mark img, .hero > img[src*="logo-org-tree"] { width: clamp(110px, 22vw, 156px) !important; border-radius: 16px; box-shadow: none; display: block; } html body .hero li.lbl-badge, html body header.hero .lbl-badge, li.lbl-badge { color: #064E3B !important; border-color: #A7F3D0 !important; background: rgba(255, 255, 255, 0.78); border-radius: 999px; padding: 0.4rem 0.95rem; font-family: var(--sans); } /* Rounded mint mat. object-fit contain. */ .hero-portrait, .speaking-portrait { --portrait-cream: #F0FDF4; --portrait-navy: #064E3B; --portrait-gold: #F59E0B; box-sizing: border-box; max-width: 300px; width: min(80vw, 300px); margin: 2.2rem auto 0.7rem; padding: 16px 16px 22px; background: var(--portrait-cream); border: 1px solid var(--portrait-navy); box-shadow: 0 0 0 10px var(--portrait-cream), 0 0 0 11px var(--portrait-gold), 0 24px 48px rgba(6, 78, 59, 0.12); border-radius: 20px; } .hero-portrait::before, .speaking-portrait::before, .hero-portrait::after, .speaking-portrait::after { content: none !important; display: none !important; } .hero-portrait picture, .speaking-portrait picture, .hero-portrait img, .speaking-portrait img { display: block !important; width: 100% !important; max-width: 268px !important; height: auto !important; aspect-ratio: auto !important; object-fit: contain !important; object-position: center top !important; margin-left: auto !important; margin-right: auto !important; border-radius: 12px; border: 1px solid rgba(6, 78, 59, 0.28); box-shadow: none; filter: none; background: #ECFDF5; } .hero-portrait figcaption, .speaking-portrait figcaption { text-align: center; margin-top: 0.95rem; font-family: var(--sans); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); } section { padding-block: clamp(3rem, 7vw, 6rem); } section .wrap > .kicker, section .wrap > h2, section .wrap > p.lede, #kidswing .kicker, #kidswing h2, #affiliations > div > div:first-child, #affiliations h2, #faq > div > div:first-child, #faq h2, #book-last-part-standing h2 { text-align: center; margin-left: auto; margin-right: auto; } section .wrap > h2, #affiliations h2, #faq h2 { max-width: 22ch; } section .wrap > p.lede, p.lede, .lede { max-width: 65ch; } .kicker, #affiliations [style*="letter-spacing:.15em"], #affiliations [style*="letter-spacing:.14em"], #faq [style*="letter-spacing:.16em"], .hero .eyebrow, .lbl-eyebrow, .lbl-badge--accent { color: #064E3B !important; font-family: var(--sans); font-weight: 700; } section.alt { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .lamp-logo { background: #0B0B0B; border-radius: 12px; padding: 12px 16px; margin: 0 0 32px; } .lamp-logo img { width: 132px !important; max-width: 70% !important; height: auto !important; } .lamp-logo-sm { background: #0B0B0B; border-radius: 8px; padding: 6px 10px; margin: 0 0 18px; } .lamp-logo-sm img { width: 92px !important; height: auto !important; } .parish-logo { margin: 0 0 32px; } .parish-logo img { width: 118px !important; max-width: 48% !important; height: auto !important; } .parish-logo-sm img { width: 78px !important; height: auto !important; } .org-logo { display: inline-block; line-height: 0; vertical-align: middle; margin: 0 10px 24px; text-decoration: none; } .org-logo img, .org-logo-inline img, img[src*="temple-emanu-el"], img[src*="scottish-rite"], img[src*="kidswing"], img[src*="lamplighter"], img[src*="parish"] { object-fit: contain !important; } .org-logo img, .org-logo-inline img { height: 36px !important; width: auto !important; max-width: 148px !important; display: block; border: 0; box-shadow: none; } .org-logo-src { background: #fff; border-radius: 12px; padding: 14px 20px; border: 1px solid var(--line); } .org-logo-src img { height: 42px !important; max-width: 168px !important; } .org-logo-tee { border-radius: 12px; overflow: hidden; background: #064E3B; } .org-marks { display: flex; flex-wrap: wrap; gap: 44px 72px; justify-content: center; align-items: center; margin: 0.6rem auto 2.8rem; padding: 28px 16px 12px; } .award { border-top-color: #F59E0B; background: var(--surface); border-radius: 18px; } .award .yr { color: #064E3B; } .princ .p .num { color: #064E3B; font-family: var(--display); } .facts { border-left-color: #F59E0B; } .facts a { color: #064E3B; } .gtl-year { color: #064E3B; } .gtl-body::before { background: #F59E0B; box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px rgba(245, 158, 11, 0.35); } #affiliations a[style*="color:#1E6E52"], #affiliations a[style*="color:#1C7A50"], #affiliations span[style*="color:#1C7A50"], #affiliations [style*="color:#1b3d2f"], #affiliations [style*="color:#1B3D2F"] { color: #064E3B !important; } #affiliations, #faq { background: var(--panel); border-top-color: var(--line) !important; } #affiliations h2, #faq h2, #faq summary { color: #064E3B !important; font-family: var(--display) !important; } .impact { background: #064E3B; color: #fff; } .ic .n { color: #fff; } .ic .l { color: #D1FAE5; font-family: var(--sans); } .chip { color: #064E3B; min-width: 44px; min-height: 44px; } .chip svg { width: 18px; height: 18px; display: block; } #social-cluster-bar { background: var(--panel); border-top: 1px solid var(--line); } footer { background: var(--bg); border-top: 1px solid var(--line); } footer .fl a:hover, footer .pl a:hover { color: #047857; } .nav-links a, .brand, a, .facts a { color: #064E3B; } p a, li a, dd a { color: #064E3B; text-decoration: underline; text-underline-offset: 2px; } .nav-links a, .brand, .org-logo { text-decoration: none; } .btn-pri, a.btn-pri, button.send, #inquire button.send, .nav-cta, .dl .btn, .dl a.btn { background: #F59E0B !important; color: #064E3B !important; border-color: #F59E0B !important; } .btn-pri:hover, a.btn-pri:hover, button.send:hover, .nav-cta:hover { background: #D97706 !important; color: #064E3B !important; border-color: #D97706 !important; } #book-last-part-standing [style*="#A98B3E"] { border-left-color: #F59E0B !important; } a:focus-visible { outline-color: #064E3B; } figcaption { text-align: center; } /* Tools restore. Visibility + 44px tap only. */ .skip-to-content:focus, .skip-to-content:focus-visible, a.skip-to-content:focus, .skip:focus, .skip:focus-visible, .skip-link:focus, .skip-link:focus-visible, a.skip-link:focus { position: fixed !important; left: 12px !important; top: 12px !important; width: auto !important; height: auto !important; min-width: 44px; min-height: 44px; overflow: visible !important; clip: auto !important; clip-path: none !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; display: inline-flex !important; align-items: center; z-index: 2147483646 !important; } .enh-bar, .enh-panel, .enh-lang { opacity: 1; visibility: visible; pointer-events: auto; } .enh-btn, .enh-toggle, .enh-step, .enh-reset { min-width: 44px; min-height: 44px; } .nav-cta, .btn, a.btn, .btn-pri, a.btn-pri, .btn-sec, button.send, #inquire button.send, #inquire input, #inquire select, .dl .btn, .dl a.btn, a[download] { min-height: 44px; } .index a, nav.az a, nav.index a { min-width: 44px; min-height: 44px; box-sizing: border-box; } .cc-search, input.cc-search, input[type="search"] { min-height: 44px; box-sizing: border-box; } #site-search-modal { position: fixed; inset: 0; background: rgba(10, 10, 10, 0.85); z-index: 10000; display: none; align-items: flex-start; justify-content: center; padding: 6rem 1rem 1rem; } #site-search-modal.open { display: flex !important; } #site-search-modal-inner { background: #fff; max-width: 720px; width: 100%; border-radius: 14px; padding: 1.5rem; max-height: 75vh; overflow-y: auto; } #site-search-close { min-width: 44px; min-height: 44px; background: transparent; border: none; cursor: pointer; float: right; font-size: 1.4rem; } #site-tools-bar { position: fixed; bottom: 1rem; right: 1rem; z-index: 9999; display: flex; flex-direction: column; gap: 0.5rem; pointer-events: auto; opacity: 1; visibility: visible; } #site-tools-bar .stb-btn, .stb-btn { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; min-width: 44px; min-height: 44px; background: #0A0A0A; color: #fff; border: none; border-radius: 50%; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); font-size: 1.1rem; position: relative; } .stb-btn[data-label]::after { content: attr(data-label); position: absolute; right: 56px; white-space: nowrap; background: #0A0A0A; color: #fff; padding: 0.45rem 0.8rem; border-radius: 6px; font-size: 0.85rem; opacity: 0; pointer-events: none; } .stb-btn:hover::after, .stb-btn:focus::after { opacity: 0.98; } #google_translate_widget { position: fixed; bottom: 1rem; right: 5rem; z-index: 9998; background: #fff; padding: 0.4rem 0.6rem; border-radius: 8px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); display: none; } #google_translate_widget.open { display: block !important; } @media print { #site-tools-bar, #site-search-modal, #google_translate_widget, .enh-bar, .enh-panel, .enh-lang { display: none !important; } } /* Mobile-first ≤640px */ @media (max-width: 640px) { html { overflow-x: hidden; } body { font-size: 16px; } h1, .hero h1 { font-size: 2rem !important; letter-spacing: -0.03em; } h2 { font-size: 1.4rem; } .wrap, .nav-in { padding-left: 20px; padding-right: 20px; } .hero { padding: 56px 20px 64px; } .nav-in { flex-wrap: wrap; gap: 10px; justify-content: space-between; } .nav-links { flex-wrap: wrap; justify-content: flex-start; } .feature, .awards, .princ, .impact .row, .heroart .body { grid-template-columns: 1fr !important; } .btn, a.btn, .btn-pri, a.btn-pri, .btn-sec, .nav-cta, button.send, #inquire button.send, .dl .btn, .dl a.btn { width: 100%; min-height: 44px; justify-content: center; box-sizing: border-box; } .hbtns { flex-direction: column; width: 100%; } img { max-width: 100%; height: auto; } .lamp-logo img { width: 110px !important; max-width: 58% !important; } .lamp-logo-sm img { width: 80px !important; } .parish-logo img { width: 96px !important; max-width: 42% !important; } .parish-logo-sm img { width: 68px !important; } .org-logo img, .org-logo-inline img { height: 28px !important; max-width: 120px !important; } .org-logo-src img { height: 32px !important; max-width: 132px !important; } .org-tree-mark img, .hero > img[src*="logo-org-tree"] { width: clamp(88px, 28vw, 120px) !important; } .hero-portrait, .speaking-portrait { max-width: 256px; width: min(84vw, 256px); margin-left: auto; margin-right: auto; } .hero-portrait img, .speaking-portrait img, .hero-portrait picture, .speaking-portrait picture { max-width: 224px !important; } .org-marks { gap: 24px 28px; padding: 16px 8px 8px; } } /* ==== 2026-08-20 modern bg + type + fine print ==== Visual only. Solid paper / light wash. Type hierarchy + 60–68ch measure. Fine print 0.75rem / 1.45 / centered. Linked last so these win. */ :root { --paper: #F0FDF4 !important; --fine: rgba(6, 78, 59, 0.55) !important; --measure: 68ch; } html, body { background-color: #F0FDF4 !important; background-image: none !important; } .impact { background: #064E3B !important; } /* ----- Type hierarchy (home + inner pages share the system) ----- */ h1, .cover-title, .lb-title { text-wrap: balance; line-height: 1.12; } h2, .block h2, .sec-title, .section-title { text-wrap: balance; line-height: 1.18; margin-top: 1.65em; margin-bottom: 0.48em; } h3 { text-wrap: balance; line-height: 1.22; margin-top: 1.3em; margin-bottom: 0.38em; } h1 + p, h2 + p, h3 + p, h1 + .lede, h2 + .lede, h3 + .lede { margin-top: 0.2em; } /* Inner pages: same faces, calmer scale, not cramped */ body > .wrap > h1, main > .wrap > h1, main > h1:first-child, body > .wrap h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); line-height: 1.14; margin: 0.15em 0 0.4em; max-width: 22ch; } body > .wrap > h2, main > .wrap > h2, body > .wrap h2 { font-size: clamp(1.18rem, 2.2vw, 1.5rem); margin-top: 1.7em; margin-bottom: 0.45em; } body > .wrap > h3, main > .wrap > h3, body > .wrap h3 { font-size: 1.05rem; margin-top: 1.3em; } body > .wrap { max-width: 44rem; margin-inline: auto; padding: clamp(2.6rem, 5.5vw, 4.8rem) 1.25rem 3rem; } main > .wrap { padding-block: clamp(0.4rem, 2vw, 1.2rem); } /* Body measure ~60–68ch, paragraph air */ main p, article p, .wrap > p, .col-wide p, .col-narrow p, .block p, .lede, p.lede, p.body, dd { max-width: 68ch; } main p, article p, .wrap > p, .col-wide p, .col-narrow p, .block p.body, p.body { margin: 0 0 1.08em; line-height: 1.65; } .sub, p.sub { font-size: 0.95rem; line-height: 1.5; margin: 0 0 1.35em; color: var(--fine); max-width: 68ch; } a.back { display: inline-block; margin-bottom: 1.25rem; font-size: 0.92rem; } /* Lists readable */ main ul, main ol, article ul, article ol, .wrap ul, .wrap ol, .col-wide ul, .col-narrow ul { max-width: 68ch; padding-left: 1.25em; margin: 0 0 1.2em; line-height: 1.6; } main li + li, article li + li, .wrap li + li { margin-top: 0.4em; } main li, article li, .wrap li { padding-left: 0.15em; } /* ----- Mobile stacks ----- */ @media (max-width: 640px) { .grid, .grid2, .cards3, .feature, .cols, .stats .row, .hero .in, .statement .row, .cover-grid, .port, .card-grid, .princ, .impact .row, .contact, .bigfoot .cols, .heroart .body, .statband .row { grid-template-columns: 1fr !important; } body > .wrap, main .wrap, .nav-in, footer { padding-left: 1.25rem; padding-right: 1.25rem; } .btnrow, .hero .btns, .hbtns, .cta { display: flex; flex-direction: column; align-items: stretch; width: 100%; } } /* ----- Fine print: small, uniform, centered ----- */ /* Simple footers (copyright / legal / network strip) */ html body footer:not(.bigfoot):not(:has(.footer-inner)), html body footer.fine:not(:has(.footer-inner)), html body .fine { font-size: 0.75rem !important; line-height: 1.45 !important; text-align: center !important; color: var(--fine) !important; padding: 1.25rem 1.25rem 2rem !important; max-width: 42rem; margin-inline: auto; letter-spacing: 0.01em; } html body footer:not(.bigfoot):not(:has(.footer-inner)) .wrap, html body footer.fine:not(:has(.footer-inner)) .wrap { max-width: 42rem; margin-inline: auto; text-align: center !important; } /* Legal bits everywhere — including designed footers */ html body footer .legal, html body footer p.legal, html body footer .disclaimer, html body footer .footer-bottom, html body footer .footer-bottom div, html body footer .ah-identity, html body footer .ah-identity a, html body footer .base, html body footer .base span, html body footer p.fine, html body .legal, html body p.legal, html body .ah-identity, html body [data-legal], html body [data-legal] p, html body [data-legal] div, html body [data-legal] span, html body [data-legal-band], html body footer:not(:has(.footer-inner)):not(.bigfoot) p, html body footer:not(:has(.footer-inner)):not(.bigfoot) li, html body footer:not(:has(.footer-inner)):not(.bigfoot) small, html body footer:not(:has(.footer-inner)):not(.bigfoot) .note, html body footer:not(:has(.footer-inner)):not(.bigfoot) .fnet-h, html body footer:not(:has(.footer-inner)):not(.bigfoot) .fl, html body footer:not(:has(.footer-inner)):not(.bigfoot) .pl, html body footer:not(:has(.footer-inner)):not(.bigfoot) .netf, html body footer:not(:has(.footer-inner)):not(.bigfoot) span, html body footer:not(:has(.footer-inner)):not(.bigfoot) a { font-size: 0.75rem !important; line-height: 1.45 !important; text-align: center !important; color: var(--fine) !important; } html body [data-legal], html body [data-legal-band], html body .ah-identity, html body .legal, html body footer .disclaimer, html body footer .footer-bottom, html body footer .base { max-width: 42rem; margin-inline: auto; } html body footer .disclaimer, html body footer .footer-bottom, html body [data-legal] { padding: 1.25rem 1.25rem 2rem !important; } html body footer:not(:has(.footer-inner)):not(.bigfoot) a, html body footer.fine:not(:has(.footer-inner)) a, html body .fine a, html body footer .legal a, html body footer .pl a, html body footer .fl a, html body footer .ah-identity a, html body footer .netf a, html body footer .disclaimer a, html body footer .footer-bottom a, html body .legal a, html body .ah-identity a, html body [data-legal] a, html body [data-legal] a[style], html body .pl a { font-size: 0.75rem !important; line-height: 1.45 !important; color: var(--fine) !important; text-decoration: underline !important; text-decoration-style: dotted !important; text-underline-offset: 2px; font-weight: 400 !important; } /* Designed footers keep brand / columns; legal strip only shrinks */ html body footer:has(.footer-inner), html body footer.bigfoot { max-width: none; padding-left: 0; padding-right: 0; } html body footer:has(.footer-inner) .footer-inner, html body footer:has(.footer-inner) .footer-inner a, html body footer:has(.footer-inner) .footer-h, html body footer:has(.footer-inner) .brand-mark, html body footer.bigfoot .cols, html body footer.bigfoot .cols a, html body footer.bigfoot .blurb, html body footer.bigfoot h3 { font-size: revert; line-height: revert; text-align: revert; color: revert; max-width: none; } html body footer.bigfoot .base, html body footer.bigfoot .base span, html body footer.bigfoot [data-legal], html body footer.bigfoot [data-legal] p, html body footer.bigfoot [data-legal] div, html body footer.bigfoot [data-legal] span, html body footer.bigfoot [data-legal] a { font-size: 0.75rem !important; line-height: 1.45 !important; text-align: center !important; color: var(--fine-on-dark, rgba(255,255,255,0.62)) !important; } html body footer.bigfoot [data-legal], html body footer.bigfoot .base { max-width: 42rem; margin-inline: auto; padding: 1.25rem 1.25rem 1.5rem !important; } html body footer.bigfoot [data-legal] a { text-decoration: underline !important; text-decoration-style: dotted !important; text-underline-offset: 2px; } html body footer:not(.bigfoot):not(:has(.footer-inner)) .fl, html body footer:not(.bigfoot):not(:has(.footer-inner)) .pl { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem 0.85rem; max-width: 42rem; margin-inline: auto; }