/* ========================================================================= NTINDA BLO - site.css Ntinda Better Lives Organization for Development - NAK/18/044 One stylesheet for the whole site. No @import chains. ------------------------------------------------------------------------- HOW TO POINT THE DOMAIN AT THIS SITE ------------------------------------------------------------------------- 1. Upload the contents of the ntinda-blo folder to the web root (on cPanel that is public_html/). index.html must sit at the top. 2. In your DNS panel add: A @ CNAME www ntindabod.org. On Netlify, Cloudflare Pages or GitHub Pages, follow their custom-domain screen and add the same www CNAME. 3. Turn on the free SSL certificate (AutoSSL on cPanel). The site must load as https://www.ntindabod.org - every canonical tag says so. 4. Force https and force www in the host panel so the canonicals agree. 5. All internal links are relative and end in .html, so Apache needs no rewrite rules. ------------------------------------------------------------------------- SELF-HOSTING THE FONTS (only if the site moves off Google Fonts) ------------------------------------------------------------------------- Download from https://fonts.google.com: Instrument Serif (400, regular and italic) DM Sans (400, 500, 700) Put the .woff2 files in fonts/ next to css/ then delete the font tags in every and paste this at the top of this file: @font-face{font-family:"Instrument Serif";src:url("../fonts/InstrumentSerif-Regular.woff2") format("woff2");font-weight:400;font-display:swap;} @font-face{font-family:"DM Sans";src:url("../fonts/DMSans-Regular.woff2") format("woff2");font-weight:400;font-display:swap;} ... one @font-face per remaining weight. Nothing else in this file changes. ========================================================================= */ /* ------------------------------------------------------------------------- 1. TOKENS ------------------------------------------------------------------------- */ :root { /* ink and paper */ --ink: #17150F; --ink-soft: #5E584C; --ink-faint: #6E685C; --paper: #FAF7F1; --paper-2: #F2EEE5; --paper-3: #EAE4D8; --white: #FFFFFF; /* brand */ --forest: #1E3B2B; --forest-2: #2C5540; --clay: #A8462A; --clay-2: #C4653F; --clay-light: #E08A62; /* the accent, lightened for dark grounds */ --wa: #1F5C38; --line: #E4DED2; --line-strong: #D5CDBE; --line-dark: rgba(250, 247, 241, 0.18); /* type */ --font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif; --font-body: "DM Sans", -apple-system, "Segoe UI", system-ui, sans-serif; /* geometry */ --r-xs: 8px; --r-sm: 12px; --r-md: 18px; --r-lg: 26px; --r-xl: 34px; --measure: 1180px; --gutter: clamp(20px, 5vw, 64px); --section: clamp(64px, 9vw, 124px); --shadow-sm: 0 1px 2px rgba(23, 21, 15, 0.04), 0 6px 18px rgba(23, 21, 15, 0.04); --shadow-md: 0 2px 6px rgba(23, 21, 15, 0.05), 0 16px 40px rgba(23, 21, 15, 0.07); --ease: cubic-bezier(.22, .68, .3, 1); } /* ------------------------------------------------------------------------- 2. RESET ------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.7; font-weight: 400; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg { display: block; max-width: 100%; } img { height: auto; } h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0; } ol, ul { padding: 0; } table { border-collapse: collapse; width: 100%; } button { font: inherit; color: inherit; } .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; } /* ------------------------------------------------------------------------- 3. TYPE ------------------------------------------------------------------------- */ .display-hero { font-family: var(--font-display); font-weight: 400; font-size: clamp(42px, 6.4vw, 78px); line-height: 1.03; letter-spacing: -0.022em; max-width: 16ch; } .display-section, h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 3.9vw, 46px); line-height: 1.1; letter-spacing: -0.018em; } h3 { font-family: var(--font-body); font-size: 20px; font-weight: 500; line-height: 1.35; letter-spacing: -0.012em; } h4 { font-family: var(--font-body); font-size: 17px; font-weight: 500; line-height: 1.45; } .serif { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.015em; } .italic { font-style: italic; } .kicker { font-size: 12px; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; line-height: 1.5; color: var(--clay); margin: 0 0 20px; display: block; } p { max-width: 66ch; } p + p { margin-top: 18px; } .lede { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.62; max-width: 56ch; color: var(--ink-soft); } .caption, figcaption { font-size: 13.5px; line-height: 1.55; color: var(--ink-faint); max-width: 54ch; } .muted { color: var(--ink-soft); } .small { font-size: 14.5px; line-height: 1.6; } /* numerals: proportional-looking modern sans, tabular figures, never mono */ .num { font-family: var(--font-body); font-weight: 500; font-feature-settings: "tnum" 1, "lnum" 1; letter-spacing: -0.015em; } /* ------------------------------------------------------------------------- 4. LINKS AND FOCUS ------------------------------------------------------------------------- */ a { color: inherit; } main p a, main li a, main dd a, figcaption a, address a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--line-strong); transition: text-decoration-color 160ms var(--ease); } main p a:hover, main li a:hover, main dd a:hover, address a:hover { text-decoration-color: var(--clay); } :focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; border-radius: var(--r-xs); } .site-header :focus-visible, .site-footer :focus-visible, .nav-drawer :focus-visible, .wa-dock :focus-visible, .plaque :focus-visible { outline-color: var(--paper); } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--white); color: var(--ink); padding: 13px 20px; font-weight: 500; border-radius: var(--r-sm); box-shadow: var(--shadow-md); text-decoration: none; } .skip-link:focus { left: 16px; top: 16px; } /* ------------------------------------------------------------------------- 5. SHELL ------------------------------------------------------------------------- */ .wrap { max-width: var(--measure); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } .band { padding: var(--section) 0; } .band-tight { padding: clamp(40px, 5vw, 68px) 0; } .band-paper { background: var(--paper-2); } .grid { display: grid; gap: clamp(28px, 4vw, 56px); } .grid-2 { grid-template-columns: 1fr 1fr; } .grid-7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } .grid-6-6 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } .section-head { margin-bottom: clamp(28px, 3.5vw, 48px); max-width: 62ch; } .section-head p { margin-top: 14px; } .rail { position: fixed; left: 18px; top: 42vh; font-size: 11px; font-weight: 500; letter-spacing: 0.22em; color: var(--ink-faint); writing-mode: vertical-rl; text-orientation: mixed; pointer-events: none; z-index: 5; opacity: 0.55; } @media (max-width: 1339px) { .rail { display: none; } } /* ------------------------------------------------------------------------- 6. HEADER ------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 60; background: rgba(30, 59, 43, 0.92); -webkit-backdrop-filter: saturate(150%) blur(14px); backdrop-filter: saturate(150%) blur(14px); color: var(--paper); transition: transform 300ms var(--ease), box-shadow 240ms var(--ease), background 240ms var(--ease); will-change: transform; } /* Scrolling down, the bar gets out of the way. Scrolling up, or back at the top, it returns. It never hides while it holds keyboard focus. */ .site-header.is-away { transform: translateY(-100%); } .site-header.is-compact { background: rgba(30, 59, 43, 0.97); box-shadow: 0 1px 0 rgba(168, 70, 42, 0.35), 0 10px 30px rgba(23, 21, 15, 0.12); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 18px; padding-bottom: 18px; transition: padding 220ms var(--ease); } .site-header.is-compact .wrap { padding-top: 11px; padding-bottom: 11px; } .wordmark { display: inline-block; text-decoration: none; color: var(--paper); line-height: 1.05; } /* a comfortable tap target for the logo on a phone */ .site-header .wordmark { padding: 9px 0; } .wordmark .wm-ntinda { font-family: var(--font-body); font-weight: 500; font-size: 19px; letter-spacing: 0.09em; } .wordmark .wm-blo { font-family: var(--font-display); font-size: 25px; letter-spacing: -0.01em; margin-left: 8px; } .wordmark-sub { display: block; font-size: 11px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(250, 247, 241, 0.55); margin-top: 6px; transition: opacity 220ms var(--ease), max-height 220ms var(--ease); max-height: 20px; overflow: hidden; } .site-header.is-compact .wordmark-sub { opacity: 0; max-height: 0; margin-top: 0; } @media (max-width: 1023px) { .wordmark-sub { display: none; } } .nav-desktop ul { display: flex; align-items: center; gap: 4px; list-style: none; } .nav-desktop a { position: relative; display: inline-block; font-size: 14.5px; font-weight: 400; line-height: 1; text-decoration: none; color: rgba(250, 247, 241, 0.86); padding: 10px 13px; border-radius: var(--r-sm); transition: color 160ms var(--ease), background 160ms var(--ease); } .nav-desktop a::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--clay-2); transform: scaleX(0); transform-origin: left; transition: transform 220ms var(--ease); } .nav-desktop a:hover { color: var(--paper); background: rgba(250, 247, 241, 0.07); } .nav-desktop a:hover::after { transform: scaleX(1); } .nav-desktop a[aria-current="page"] { color: var(--paper); font-weight: 500; } .nav-desktop a[aria-current="page"]::after { transform: scaleX(1); } .nav-desktop .nav-wa { margin-left: 10px; } .nav-desktop .nav-wa a { display: inline-flex; align-items: center; gap: 8px; background: rgba(250, 247, 241, 0.1); border: 1px solid rgba(250, 247, 241, 0.24); padding: 10px 16px; border-radius: var(--r-sm); font-weight: 500; } .nav-desktop .nav-wa a::after { display: none; } .nav-desktop .nav-wa a:hover { background: var(--wa); border-color: var(--wa); color: var(--paper); } .nav-toggle { display: none; align-items: center; justify-content: center; background: rgba(250, 247, 241, 0.1); border: 1px solid rgba(250, 247, 241, 0.22); color: var(--paper); width: 46px; height: 46px; border-radius: var(--r-sm); cursor: pointer; transition: background 160ms var(--ease); } .nav-toggle:hover { background: rgba(250, 247, 241, 0.18); } @media (max-width: 1023px) { .nav-desktop { display: none; } .nav-toggle { display: inline-flex; } } /* drawer */ .nav-overlay { position: fixed; inset: 0; background: rgba(23, 21, 15, 0.45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); z-index: 70; opacity: 0; visibility: hidden; transition: opacity 220ms var(--ease), visibility 220ms var(--ease); } .nav-overlay.is-open { opacity: 1; visibility: visible; } .nav-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(90vw, 400px); background: var(--forest); color: var(--paper); z-index: 80; transform: translateX(101%); transition: transform 200ms var(--ease), visibility 200ms var(--ease); display: flex; flex-direction: column; padding: 20px clamp(20px, 6vw, 30px) calc(30px + env(safe-area-inset-bottom)); overflow-y: auto; visibility: hidden; border-top-left-radius: var(--r-lg); border-bottom-left-radius: var(--r-lg); } .nav-drawer.is-open { transform: translateX(0); visibility: visible; transition: transform 320ms var(--ease); } .nav-drawer-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; } .nav-drawer ul { list-style: none; } .nav-drawer a { display: block; padding: 14px 16px; font-size: 17px; font-weight: 400; text-decoration: none; color: rgba(250, 247, 241, 0.9); border-radius: var(--r-sm); transition: background 160ms var(--ease); } .nav-drawer a:hover { background: rgba(250, 247, 241, 0.08); } .drawer-links a[aria-current="page"] { background: rgba(250, 247, 241, 0.1); color: var(--paper); font-weight: 500; } .drawer-wa { margin-bottom: 18px; } .drawer-wa a { display: flex; align-items: center; gap: 11px; background: var(--wa); color: var(--paper); font-weight: 500; justify-content: center; border-radius: var(--r-sm); } .drawer-tel { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line-dark); } .drawer-tel h2 { font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(250, 247, 241, 0.55); margin: 0 0 6px 16px; } .drawer-tel a { font-size: 16px; } /* ------------------------------------------------------------------------- 7. BUTTONS ------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-body); font-size: 14.5px; font-weight: 500; line-height: 1; padding: 12px 20px; border-radius: var(--r-sm); text-decoration: none; border: 1px solid transparent; cursor: pointer; min-height: 44px; transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), background 180ms var(--ease), border-color 180ms var(--ease), color 180ms var(--ease); } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn-primary { background: var(--forest); color: var(--paper); box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--forest-2); box-shadow: var(--shadow-md); } .btn-secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); } .btn-secondary:hover { border-color: var(--ink); background: var(--white); box-shadow: var(--shadow-sm); } .btn-wa { background: var(--wa); color: var(--paper); box-shadow: var(--shadow-sm); } .btn-wa:hover { background: #247043; box-shadow: var(--shadow-md); } .btn-ghost-light { background: rgba(250, 247, 241, 0.1); color: var(--paper); border-color: rgba(250, 247, 241, 0.3); } .btn-ghost-light:hover { background: rgba(250, 247, 241, 0.2); } .btn-lg { font-size: 15.5px; padding: 15px 26px; min-height: 50px; } .btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 30px; } .inward { margin-top: clamp(36px, 5vw, 60px); } .text-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 500; text-decoration: none; color: var(--ink); padding: 6px 2px; } .text-link .arrow { transition: transform 220ms var(--ease); } .text-link:hover .arrow { transform: translateX(4px); } .text-link .u { position: relative; padding-bottom: 3px; } .text-link .u::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; border-radius: 2px; background: var(--clay); transform: scaleX(0); transform-origin: left; transition: transform 240ms var(--ease); } .text-link:hover .u::after { transform: scaleX(1); } .icon { width: 22px; height: 22px; flex: none; } .icon-sm { width: 18px; height: 18px; flex: none; } /* ------------------------------------------------------------------------- 8. STATS AND LEDGERS ------------------------------------------------------------------------- */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); } .stats > div { padding: clamp(24px, 3vw, 36px); border-right: 1px solid var(--line); transition: background 220ms var(--ease); } .stats > div:last-child { border-right: 0; } .stats > div:hover { background: var(--paper-2); } .stat-value { font-family: var(--font-display); font-weight: 400; font-size: clamp(34px, 3.6vw, 46px); line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); display: block; } .stat-value .sm { font-size: 0.55em; color: var(--ink-soft); } .stat-label { display: block; margin-top: 10px; font-size: 14px; line-height: 1.45; color: var(--ink-soft); } /* the horizontal fact rows */ .facts { border-top: 1px solid var(--line); } .fact-row { display: flex; align-items: baseline; justify-content: space-between; gap: 28px; padding: 22px 8px; border-bottom: 1px solid var(--line); border-radius: var(--r-sm); transition: background 200ms var(--ease), padding 200ms var(--ease); } .fact-row:hover { background: var(--white); } .fact-label { font-size: 16px; color: var(--ink-soft); } .fact-value { font-family: var(--font-display); font-size: clamp(20px, 2.2vw, 26px); letter-spacing: -0.015em; text-align: right; } /* tables */ .ledger { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; } .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-scroll table { min-width: 620px; } .scroll-cue { display: none; font-size: 12.5px; letter-spacing: 0.04em; color: var(--ink-faint); margin: 0 0 10px 2px; } /* On phones a wide table gets cut off, so stack each row into a labelled block instead of asking people to scroll sideways. */ @media (max-width: 767px) { .scroll-cue { display: none; } .table-scroll { overflow-x: visible; } .table-scroll table { min-width: 0; width: 100%; } .table-scroll thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .table-scroll tbody tr { display: block; padding: 20px clamp(20px, 5vw, 32px) 22px; border-bottom: 1px solid var(--line); } .table-scroll tbody tr:last-child { border-bottom: 0; } .table-scroll tbody tr:hover { background: transparent; } .table-scroll tbody th, .table-scroll tbody td, .table-scroll tbody th:first-child, .table-scroll tbody td:first-child, .table-scroll tbody th:last-child, .table-scroll tbody td:last-child { display: block; padding: 0; border-bottom: 0; } .table-scroll tbody th { font-size: 17px; font-weight: 500; line-height: 1.35; margin-bottom: 12px; } .table-scroll tbody td + td { margin-top: 14px; } .table-scroll tbody td[data-label]::before { content: attr(data-label); display: block; font-size: 11.5px; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 5px; } .table-scroll .amount { white-space: normal; } } table caption { text-align: left; font-size: 11.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); padding: clamp(20px, 2.5vw, 28px) clamp(20px, 3vw, 32px) 0; } thead th { text-align: left; font-size: 11.5px; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-faint); padding: 20px clamp(16px, 2vw, 24px) 14px; border-bottom: 1px solid var(--line); vertical-align: bottom; } thead th:first-child { padding-left: clamp(20px, 3vw, 32px); } thead th:last-child { padding-right: clamp(20px, 3vw, 32px); } tbody th, tbody td { text-align: left; padding: clamp(18px, 2vw, 24px) clamp(16px, 2vw, 24px); border-bottom: 1px solid var(--line); vertical-align: top; font-weight: 400; line-height: 1.6; } tbody th { font-weight: 500; } tbody th:first-child, tbody td:first-child { padding-left: clamp(20px, 3vw, 32px); } tbody th:last-child, tbody td:last-child { padding-right: clamp(20px, 3vw, 32px); } tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; } tbody tr { transition: background 200ms var(--ease); } tbody tr:hover { background: var(--paper); } .amount { font-family: var(--font-body); font-weight: 500; font-size: 16.5px; font-feature-settings: "tnum" 1, "lnum" 1; letter-spacing: -0.015em; white-space: nowrap; position: relative; display: inline-block; } .amount::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; border-radius: 2px; background: var(--clay); transform: scaleX(0); transform-origin: left; transition: transform 220ms var(--ease); } @media (hover: hover) and (pointer: fine) { tbody tr:hover .amount::after { transform: scaleX(1); } } /* three-figure summary */ .mini-ledger { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .mini-ledger > div { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 34px); box-shadow: var(--shadow-sm); transition: transform 260ms var(--ease), box-shadow 260ms var(--ease); } .mini-ledger > div:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .mini-ledger dt { font-size: 11.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--clay); margin-bottom: 14px; } .mini-ledger dd { margin: 0; font-family: var(--font-display); font-size: clamp(28px, 3vw, 38px); line-height: 1.05; letter-spacing: -0.02em; } .mini-ledger .unit { display: block; margin-top: 12px; font-family: var(--font-body); font-size: 14px; line-height: 1.5; letter-spacing: 0; color: var(--ink-soft); } /* definition rows */ .def-rows { border-top: 1px solid var(--line); } .def-rows > div { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 28px; padding: 24px 8px; border-bottom: 1px solid var(--line); border-radius: var(--r-sm); transition: background 200ms var(--ease); } .def-rows > div:hover { background: var(--white); } .def-rows dt { font-size: 11.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--clay); padding-top: 6px; } .def-rows dd { margin: 0; } /* program cards */ .cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2.2vw, 26px); } .card { position: relative; display: block; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(26px, 3vw, 38px); text-decoration: none; box-shadow: var(--shadow-sm); overflow: hidden; transition: transform 280ms var(--ease), box-shadow 280ms var(--ease), border-color 280ms var(--ease); } .card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--clay); transform: scaleY(0); transform-origin: top; transition: transform 320ms var(--ease); } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-strong); } .card:hover::before { transform: scaleY(1); } .card-eyebrow { font-size: 11.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--clay); } .card h3 { margin: 14px 0 12px; font-size: 22px; } .card p { font-size: 15.5px; line-height: 1.65; color: var(--ink-soft); max-width: 42ch; } .card-figure { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; align-items: baseline; justify-content: space-between; gap: 16px; } .card-figure .amount { font-size: 18px; } .card-figure .arrow { color: var(--ink-faint); transition: transform 240ms var(--ease), color 240ms var(--ease); } .card:hover .card-figure .arrow { transform: translateX(4px); color: var(--clay); } /* ------------------------------------------------------------------------- 9. THE SURVEY PLAQUE ------------------------------------------------------------------------- */ .plaque-band { padding: 0 0 clamp(20px, 3vw, 40px); } .plaque-band .wrap { padding-left: var(--gutter); padding-right: var(--gutter); } .plaque { background: var(--clay); color: var(--paper); border-radius: var(--r-xl); padding: clamp(34px, 5.5vw, 68px); box-shadow: var(--shadow-md); position: relative; overflow: hidden; } .plaque::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(250, 247, 241, 0.2); border-radius: calc(var(--r-xl) - 10px); pointer-events: none; } .plaque-inner { position: relative; max-width: 780px; } .plaque .p-eyebrow { font-size: 11.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(250, 247, 241, 0.92); margin: 0 0 22px; } .plaque .p-title { font-family: var(--font-display); font-size: clamp(30px, 4.4vw, 52px); line-height: 1.05; letter-spacing: -0.02em; margin: 0; } .plaque .p-place { margin-top: 12px; font-size: clamp(15px, 1.5vw, 17px); color: rgba(250, 247, 241, 0.94); letter-spacing: 0.01em; } .plaque .p-grid { display: grid; grid-template-columns: repeat(3, auto); gap: clamp(20px, 4vw, 56px); margin-top: clamp(26px, 3.4vw, 40px); padding-top: clamp(24px, 3vw, 34px); border-top: 1px solid rgba(250, 247, 241, 0.28); } .plaque .p-grid dt { font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(250, 247, 241, 0.92); margin-bottom: 8px; } .plaque .p-grid dd { margin: 0; font-family: var(--font-display); font-size: clamp(21px, 2.3vw, 28px); line-height: 1.15; letter-spacing: -0.015em; } .plaque .p-note { margin-top: clamp(24px, 3vw, 34px); font-size: 14.5px; line-height: 1.6; color: rgba(250, 247, 241, 0.94); max-width: 46ch; } .plaque a { color: var(--paper); } /* compact stamp in the footer */ .plaque-stamp { background: rgba(250, 247, 241, 0.06); border: 1px solid rgba(250, 247, 241, 0.16); border-radius: var(--r-md); padding: 22px 24px; max-width: 340px; } .plaque-stamp .s-eyebrow { font-size: 10.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--clay-light); margin: 0 0 10px; } .plaque-stamp .s-line { font-family: var(--font-display); font-size: 21px; line-height: 1.25; letter-spacing: -0.01em; color: var(--paper); } .plaque-stamp .s-note { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: rgba(250, 247, 241, 0.62); } /* ------------------------------------------------------------------------- 10. PHOTO PLACEMENTS A reserved photo keeps its exact shape whether or not the file exists. Empty frames stay quiet: a soft panel, a hairline, one small line of text. The slot id only shows on hover, so the page is not covered in labels while the photographs are still being taken. ------------------------------------------------------------------------- */ .slot { margin: 0; } .slot-frame { position: relative; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 24px; } .slot[data-status="filled"] .slot-frame { padding: 0; background: var(--paper-3); } .slot-frame img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; } .slot[data-status="empty"] .slot-frame img { display: none; } .slot-placeholder { text-align: center; max-width: 34ch; color: var(--ink-faint); } .slot[data-status="filled"] .slot-placeholder { display: none; } .slot-placeholder .ph-mark { width: 34px; height: 34px; margin: 0 auto 14px; border-radius: 50%; border: 1px solid var(--line-strong); display: flex; align-items: center; justify-content: center; color: var(--ink-faint); } .slot-placeholder .ph-text { font-size: 13.5px; line-height: 1.5; } .slot-placeholder .ph-id { display: block; margin-top: 8px; font-size: 10.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); opacity: 0; transition: opacity 220ms var(--ease); } .slot:hover .ph-id, .slot:focus-within .ph-id { opacity: 1; } .slot figcaption { margin-top: 14px; padding: 0 2px; } .slot-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.2vw, 26px); } /* ------------------------------------------------------------------------- 11. TIMELINE ------------------------------------------------------------------------- */ .timeline { list-style: none; } .timeline li { position: relative; padding: 0 0 clamp(28px, 3.4vw, 40px) 40px; } .timeline li::after { content: ""; position: absolute; left: 7px; top: 20px; bottom: 0; width: 1px; background: var(--line-strong); } .timeline li:last-child { padding-bottom: 0; } .timeline li:last-child::after { display: none; } .timeline li::before { content: ""; position: absolute; left: 0; top: 6px; width: 15px; height: 15px; border-radius: 50%; background: var(--paper); border: 3px solid var(--clay); z-index: 1; } .timeline .t-meta { display: block; font-size: 11.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--clay); margin-bottom: 8px; } .timeline h3 { font-family: var(--font-display); font-weight: 400; font-size: 24px; letter-spacing: -0.015em; margin-bottom: 8px; } .timeline p { color: var(--ink-soft); font-size: 15.5px; } /* ------------------------------------------------------------------------- 12. STEPS, NEWS, NOTES ------------------------------------------------------------------------- */ .steps { list-style: none; counter-reset: step; } .steps li { counter-increment: step; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--line); } .steps li:last-child { border-bottom: 0; } .steps li::before { content: counter(step); font-family: var(--font-display); font-size: 19px; color: var(--forest); background: var(--paper-2); border: 1px solid var(--line); width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 50%; } .steps h3 { margin-bottom: 6px; } .steps p { color: var(--ink-soft); font-size: 15.5px; } /* news: paste another
to add a story */ .news-list { display: grid; gap: clamp(18px, 2.2vw, 26px); } .news-item { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(26px, 3.4vw, 44px); box-shadow: var(--shadow-sm); transition: transform 280ms var(--ease), box-shadow 280ms var(--ease); } .news-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .news-date { display: inline-block; font-size: 11.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--clay); margin-bottom: 14px; } .news-item h2 { font-size: clamp(24px, 2.6vw, 32px); margin-bottom: 14px; } .news-item .slot { margin-top: 26px; } .teasers { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.2vw, 26px); } .teaser { display: block; text-decoration: none; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(24px, 2.6vw, 32px); box-shadow: var(--shadow-sm); transition: transform 280ms var(--ease), box-shadow 280ms var(--ease); } .teaser:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .teaser h3 { font-family: var(--font-display); font-weight: 400; font-size: 23px; letter-spacing: -0.015em; margin: 0 0 10px; } .teaser p { font-size: 15px; line-height: 1.6; color: var(--ink-soft); } .teaser .arrow { margin-top: 18px; color: var(--ink-faint); transition: transform 240ms var(--ease), color 240ms var(--ease); } .teaser:hover .arrow { transform: translateX(4px); color: var(--clay); } .note { background: var(--paper-2); border-left: 3px solid var(--clay); border-radius: var(--r-sm); padding: 20px 24px; margin-top: 32px; max-width: 64ch; } .note p { font-size: 15px; line-height: 1.65; color: var(--ink-soft); max-width: none; } /* soft panel used for contact blocks */ .panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(26px, 3.2vw, 40px); box-shadow: var(--shadow-sm); } .panel h3 { margin-bottom: 14px; } .panel + .panel { margin-top: 18px; } address { font-style: normal; line-height: 1.75; } .tel-list { list-style: none; } .tel-list li + li { margin-top: 4px; } .tel-list a { display: inline-block; font-size: 17px; font-weight: 500; font-feature-settings: "tnum" 1; letter-spacing: -0.01em; padding: 4px 0; text-decoration: none; border-bottom: 1px solid var(--line-strong); transition: border-color 180ms var(--ease); } .tel-list a:hover { border-color: var(--clay); } /* the big invitation block */ .invite { background: var(--forest); color: var(--paper); border-radius: var(--r-xl); padding: clamp(34px, 5vw, 68px); box-shadow: var(--shadow-md); } .invite h2 { color: var(--paper); } .invite p { color: rgba(250, 247, 241, 0.8); } .invite .kicker { color: var(--clay-light); } /* ------------------------------------------------------------------------- 12a. FAQ Built on
and , so every question opens and closes with no JavaScript at all and is reachable from the keyboard by default. site.js only adds the courtesy of closing the others. ------------------------------------------------------------------------- */ .faq { display: grid; gap: 12px; } .faq details { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease); } .faq details[open] { border-color: var(--line-strong); box-shadow: var(--shadow-md); } .faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: clamp(20px, 2.4vw, 26px) clamp(20px, 2.6vw, 30px); font-size: 17px; font-weight: 500; line-height: 1.45; cursor: pointer; list-style: none; border-radius: var(--r-lg); } .faq summary::-webkit-details-marker { display: none; } .faq summary::marker { content: ""; } .faq summary:hover { color: var(--clay); } .faq .faq-chev { flex: none; width: 22px; height: 22px; color: var(--clay); transition: transform 260ms var(--ease); } .faq details[open] .faq-chev { transform: rotate(180deg); } .faq .faq-body { padding: 0 clamp(20px, 2.6vw, 30px) clamp(22px, 2.6vw, 28px); } .faq .faq-body p { color: var(--ink-soft); font-size: 16px; line-height: 1.65; max-width: 62ch; } /* ------------------------------------------------------------------------- 12b. CO-PAY CALCULATOR An estimate built from the published rates. It is hidden until site.js turns it on, because a calculator that cannot calculate is worse than no calculator. The rates themselves are stated in the table above it, so nothing is lost when JavaScript does not run. ------------------------------------------------------------------------- */ .calc { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: clamp(26px, 3.2vw, 40px); } .calc[hidden] { display: none; } .calc-legend { font-size: 11.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--clay); margin-bottom: 12px; padding: 0; } .calc-field { margin-bottom: 26px; } .calc-field > label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 10px; } .money { position: relative; max-width: 320px; } .money-unit { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 14px; font-weight: 500; color: var(--ink-faint); pointer-events: none; } .money input { width: 100%; font-family: var(--font-body); font-size: 20px; font-weight: 500; font-feature-settings: "tnum" 1, "lnum" 1; letter-spacing: -0.015em; padding: 14px 16px 14px 58px; background: var(--paper); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--r-sm); min-height: 56px; transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease); } .money input:hover { border-color: var(--ink-faint); } .money input:focus { outline: none; border-color: var(--forest); box-shadow: 0 0 0 3px rgba(30, 59, 43, 0.12); background: var(--white); } /* who the bill is for */ .calc fieldset { border: 0; padding: 0; margin: 0 0 26px; } .seg { display: flex; flex-wrap: wrap; gap: 8px; } .seg-item { display: inline-flex; } .seg-item input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .seg-item span { display: inline-flex; align-items: center; min-height: 44px; padding: 11px 18px; font-size: 14.5px; font-weight: 500; border: 1px solid var(--line-strong); border-radius: var(--r-sm); cursor: pointer; transition: background 180ms var(--ease), border-color 180ms var(--ease), color 180ms var(--ease); } .seg-item span:hover { border-color: var(--ink-faint); } .seg-item input:checked + span { background: var(--forest); border-color: var(--forest); color: var(--paper); } .seg-item input:focus-visible + span { outline: 2px solid var(--forest); outline-offset: 3px; } .calc-out { border-top: 1px solid var(--line); padding-top: 24px; } .calc-row { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 12px 0; } .calc-row + .calc-row { border-top: 1px solid var(--line); } .calc-row .calc-key { font-size: 15.5px; color: var(--ink-soft); } .calc-row .calc-figure { font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 3vw, 34px); line-height: 1.1; letter-spacing: -0.02em; text-align: right; } .calc-row.is-blo .calc-figure { color: var(--clay); } .calc-note { margin-top: 18px; font-size: 14px; line-height: 1.6; color: var(--ink-faint); max-width: 56ch; } .calc-small { margin-top: 14px; font-size: 13.5px; line-height: 1.6; color: var(--ink-faint); max-width: 60ch; } /* ------------------------------------------------------------------------- 12c. PAGER The next page in the reading order, at the foot of every page. ------------------------------------------------------------------------- */ .pager { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; border-top: 1px solid var(--line); padding-top: clamp(28px, 3.4vw, 40px); margin-top: clamp(48px, 6vw, 80px); } .pager-link { display: flex; flex-direction: column; gap: 8px; text-decoration: none; padding: 18px 22px; border-radius: var(--r-lg); border: 1px solid transparent; transition: background 220ms var(--ease), border-color 220ms var(--ease); } .pager-link:hover { background: var(--white); border-color: var(--line); } .pager-next { grid-column: 2; text-align: right; align-items: flex-end; } .pager-label { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--clay); } .pager-label .arrow { transition: transform 240ms var(--ease); } .pager-prev:hover .pager-label .arrow { transform: translateX(-4px); } .pager-next:hover .pager-label .arrow { transform: translateX(4px); } .pager-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.2; letter-spacing: -0.018em; } /* ------------------------------------------------------------------------- 13. FORMS ------------------------------------------------------------------------- */ .form-field { margin-bottom: 22px; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; } .form-field label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 8px; } .form-field .req { font-weight: 400; color: var(--ink-faint); } .form-field input, .form-field select, .form-field textarea { width: 100%; font-family: var(--font-body); font-size: 16px; line-height: 1.5; padding: 14px 16px; background: var(--white); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--r-sm); min-height: 52px; transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease); } .form-field input:hover, .form-field select:hover, .form-field textarea:hover { border-color: var(--ink-faint); } .form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--forest); box-shadow: 0 0 0 3px rgba(30, 59, 43, 0.12); } .form-field textarea { min-height: 150px; resize: vertical; } .form-error { display: none; font-size: 14px; font-weight: 400; color: var(--clay); margin-top: 8px; } .form-field.has-error .form-error { display: block; } .form-field.has-error input, .form-field.has-error select, .form-field.has-error textarea { border-color: var(--clay); } .form-fallback { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(22px, 3vw, 32px); margin-top: 26px; } .form-fallback[hidden] { display: none; } .form-fallback textarea { width: 100%; min-height: 160px; padding: 14px 16px; font-family: var(--font-body); font-size: 15px; line-height: 1.6; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--white); color: var(--ink); resize: vertical; } /* ------------------------------------------------------------------------- 14. WHATSAPP DOCK (mobile) ------------------------------------------------------------------------- */ .wa-dock { display: none; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 50; background: rgba(30, 59, 43, 0.96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-radius: var(--r-md); padding: 7px; gap: 7px; box-shadow: var(--shadow-md); transition: transform 300ms var(--ease), opacity 300ms var(--ease); } .wa-dock a { flex: 1; white-space: nowrap; justify-content: center; min-height: 44px; border-radius: var(--r-sm); font-size: 14px; font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; padding: 11px 12px; } .wa-dock .dock-wa { background: var(--wa); color: var(--paper); } .wa-dock .dock-call { background: rgba(250, 247, 241, 0.12); color: var(--paper); } @media (max-width: 1023px) { .wa-dock { display: flex; } .wa-dock.is-stood-down, .wa-dock.is-away { transform: translateY(150%); opacity: 0; pointer-events: none; } body { padding-bottom: 76px; } } /* ------------------------------------------------------------------------- 15. FOOTER ------------------------------------------------------------------------- */ .site-footer { background: var(--forest); color: rgba(250, 247, 241, 0.8); font-size: 14.5px; line-height: 1.7; padding: clamp(52px, 6vw, 84px) 0 36px; } .site-footer .wordmark { margin-bottom: 14px; } .site-footer a { color: rgba(250, 247, 241, 0.86); } .site-footer a:hover { color: var(--paper); } .site-footer p { max-width: 42ch; } .footer-cols { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: clamp(28px, 4vw, 56px); padding-bottom: 36px; border-bottom: 1px solid var(--line-dark); } .footer-cols h2 { font-family: var(--font-body); font-size: 11.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(250, 247, 241, 0.5); margin-bottom: 14px; } .footer-cols ul { list-style: none; } .footer-cols li { margin-bottom: 7px; } .footer-cols a { text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 180ms var(--ease); } .footer-cols a:hover { border-bottom-color: var(--clay-2); } .footer-legal { padding-top: 26px; display: flex; flex-wrap: wrap; gap: 10px 32px; justify-content: space-between; color: rgba(250, 247, 241, 0.55); font-size: 13.5px; } .footer-legal p { max-width: none; } /* ------------------------------------------------------------------------- 16. 404 ------------------------------------------------------------------------- */ .page-404 { padding: clamp(80px, 12vw, 150px) 0 clamp(60px, 9vw, 110px); } /* ------------------------------------------------------------------------- 17. REVEAL A short rise on first sight. It runs once, it is small, and it is switched off entirely for anyone who asks for reduced motion. Content is visible with no JS at all: .reveal only dims once JS marks the page. ------------------------------------------------------------------------- */ .js .reveal { opacity: 0; transform: translateY(18px); } .js .reveal.is-in { opacity: 1; transform: none; transition: opacity 700ms var(--ease), transform 700ms var(--ease); transition-delay: var(--d, 0ms); } /* ------------------------------------------------------------------------- 18. RESPONSIVE ------------------------------------------------------------------------- */ @media (max-width: 1023px) { .stats { grid-template-columns: 1fr 1fr; } .stats > div:nth-child(2n) { border-right: 0; } .stats > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); } .teasers { grid-template-columns: 1fr; } .footer-cols { grid-template-columns: 1fr 1fr; } } @media (max-width: 767px) { body { font-size: 16.5px; } .grid-7-5, .grid-6-6, .grid-2 { grid-template-columns: 1fr; } .cards { grid-template-columns: 1fr; } .mini-ledger { grid-template-columns: 1fr; } .slot-pair { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } .footer-cols { grid-template-columns: 1fr; } .def-rows > div { grid-template-columns: 1fr; gap: 10px; } .plaque .p-grid { grid-template-columns: 1fr 1fr; gap: 22px 28px; } .fact-row { flex-direction: column; align-items: flex-start; gap: 6px; } .fact-value { text-align: left; } .btn-row { flex-direction: column; align-items: flex-start; } .pager { grid-template-columns: 1fr; gap: 10px; } .pager-next { grid-column: 1; text-align: left; align-items: flex-start; } .pager-link { padding: 16px 18px; } .calc-row { flex-direction: column; align-items: flex-start; gap: 2px; } .calc-row .calc-figure { text-align: left; } .seg-item, .seg-item span { width: 100%; } .stats { grid-template-columns: 1fr; } .stats > div { border-right: 0; border-bottom: 1px solid var(--line); } .stats > div:last-child { border-bottom: 0; } .timeline li { padding-left: 34px; } } @media (max-width: 400px) { .plaque .p-grid { grid-template-columns: 1fr; } } /* ------------------------------------------------------------------------- 19. MOTION PREFERENCE ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .js .reveal { opacity: 1; transform: none; } .nav-drawer, .nav-drawer.is-open { transition: none; } .btn:hover, .card:hover, .teaser:hover, .news-item:hover, .mini-ledger > div:hover { transform: none; } } [id] { scroll-margin-top: 100px; } /* ------------------------------------------------------------------------- 20. PRINT ------------------------------------------------------------------------- */ @media print { .wa-dock, .nav-desktop, .nav-toggle, .nav-drawer, .nav-overlay, .rail, .skip-link { display: none !important; } body { background: #fff; color: #000; padding-bottom: 0; font-size: 11pt; } .js .reveal { opacity: 1 !important; transform: none !important; } .site-header, .site-footer, .invite { background: #fff; color: #000; box-shadow: none; } .site-header { position: static; border-bottom: 1px solid #000; } .site-footer { border-top: 1px solid #000; } .site-footer a, .site-header a, .wordmark, .wordmark-sub, .footer-cols h2, .footer-legal, .invite h2, .invite p { color: #000; } .plaque, .plaque-stamp { background: #fff; color: #000; border: 1.5pt solid #000; box-shadow: none; } .plaque::after { display: none; } .plaque .p-eyebrow, .plaque .p-place, .plaque .p-note, .plaque .p-grid dt, .plaque-stamp .s-line, .plaque-stamp .s-note { color: #000; } .card, .ledger, .panel, .news-item, .teaser, .stats, .mini-ledger > div, .faq details { box-shadow: none; border: 1px solid #999; } .calc, .pager { display: none !important; } .faq .faq-body { display: block !important; } .faq .faq-chev { display: none; } .band { padding: 16pt 0; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; } }