/* ========================================================================= REUNITING AFTER WAR — Design System Somber & tactical. Black / red / paper-white. Oswald + Barlow. ========================================================================= */ /* ---------- Fonts ---------- */ /* Loaded via in : Oswald, Barlow, Great Vibes */ /* ---------- Tokens ---------- */ :root { --ink: #0c0e11; /* page background */ --ink-2: #12151a; /* raised surface */ --ink-3: #191d24; /* cards */ --ink-4: #222732; /* hover / borders raised */ --line: rgba(255,255,255,.09); --line-2: rgba(255,255,255,.16); --paper: #f3f2ee; /* primary text on dark */ --paper-dim: #c7c9cd; /* secondary text */ --muted: #8b9098; /* tertiary text */ --red: #b01e28; /* RAW red — the logo crimson, used throughout */ --red-2: #b01e28; /* unified to the logo crimson */ --red-text: #b01e28; /* logo crimson for small accents too */ --red-hover: #97141d; /* darker crimson for hover/press */ --red-ink: #7d141c; /* deep red */ --header-bg: #f1f1ee; /* light header background */ --header-line: rgba(0,0,0,.09); --khaki: #b8a884; /* tactical warm accent */ --gold: #c9a24b; /* seal / trust accent */ --maxw: 1180px; --gap: clamp(1rem, 3vw, 2rem); --radius: 3px; --radius-lg: 6px; --shadow: 0 18px 50px -20px rgba(0,0,0,.75); --ease: cubic-bezier(.22,.61,.36,1); --ff-display: "Oswald", "Arial Narrow", sans-serif; --ff-body: "Barlow", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --ff-script: "Great Vibes", cursive; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } body { font-family: var(--ff-body); background: var(--ink); color: var(--paper); line-height: 1.6; font-size: 1.0625rem; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } ul { list-style: none; padding: 0; } ::selection { background: var(--red); color: #fff; } /* ---------- Layout ---------- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.15rem, 4vw, 2rem); } .section { padding-block: clamp(3.75rem, 9vw, 7rem); position: relative; } .section--tight { padding-block: clamp(2.75rem, 6vw, 4.5rem); } .bg-2 { background: var(--ink-2); } .bg-grad { background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%); } /* ---------- Typography ---------- */ .eyebrow { font-family: var(--ff-display); text-transform: uppercase; letter-spacing: .28em; font-weight: 600; font-size: .74rem; color: var(--red-text); display: inline-flex; align-items: center; gap: .7rem; } .eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--red); display: inline-block; } .eyebrow.is-center { justify-content: center; } h1, h2, h3, h4 { font-family: var(--ff-display); font-weight: 600; line-height: 1.04; letter-spacing: .01em; text-transform: uppercase; } h1 { font-size: clamp(2.4rem, 6.5vw, 4.6rem); font-weight: 700; } h2 { font-size: clamp(1.9rem, 4.6vw, 3.1rem); font-weight: 600; } h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); } h4 { font-size: 1.05rem; letter-spacing: .06em; } .display-xl { font-size: clamp(2.8rem, 8vw, 5.6rem); font-weight: 700; } .script { font-family: var(--ff-script); text-transform: none; color: var(--red-2); letter-spacing: 0; font-weight: 400; } .lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--paper-dim); font-weight: 400; } .muted { color: var(--muted); } .measure { max-width: 62ch; } .measure-sm { max-width: 48ch; } .center { text-align: center; } .mx-auto { margin-inline: auto; } /* ---------- Buttons ---------- */ .btn { --btn-bg: var(--red); --btn-fg: #fff; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; font-family: var(--ff-display); text-transform: uppercase; letter-spacing: .12em; font-weight: 600; font-size: .85rem; padding: .95rem 1.7rem; background: var(--btn-bg); color: var(--btn-fg); border: 1.5px solid var(--btn-bg); border-radius: var(--radius); transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s, color .18s; will-change: transform; } .btn:hover { background: var(--red-hover); border-color: var(--red-hover); transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn--ghost { --btn-bg: transparent; --btn-fg: var(--paper); border-color: var(--line-2); } .btn--ghost:hover { background: rgba(255,255,255,.06); border-color: var(--paper); color: var(--paper); } .btn--lg { padding: 1.1rem 2.2rem; font-size: .95rem; } .btn--sm { padding: .7rem 1.2rem; font-size: .78rem; } .btn-row { display: flex; flex-wrap: wrap; gap: .9rem; } .btn .arrow { transition: transform .18s var(--ease); } .btn:hover .arrow { transform: translateX(4px); } .link-arrow { font-family: var(--ff-display); text-transform: uppercase; letter-spacing: .12em; font-weight: 600; font-size: .82rem; color: var(--red-text); display: inline-flex; align-items: center; gap: .5rem; } .link-arrow .arrow { transition: transform .18s var(--ease); } .link-arrow:hover .arrow { transform: translateX(4px); } /* ---------- Header ---------- */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; background: var(--header-bg); border-bottom: 1px solid var(--header-line); transition: box-shadow .3s var(--ease); } .site-header.is-solid { box-shadow: 0 8px 26px -16px rgba(0,0,0,.55); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 74px; } /* Wordmark logotype (renders clean on dark) */ .brand { display: inline-flex; align-items: center; gap: .7rem; } .brand__mark { width: 40px; height: 40px; flex: none; } .brand__badge { width: 46px; height: 46px; border-radius: 50%; background: var(--paper); display: grid; place-items: center; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); } .brand__badge img { width: 34px; height: 34px; object-fit: contain; } .footer-brand .brand__badge { width: 54px; height: 54px; } .footer-brand .brand__badge img { width: 40px; height: 40px; } .brand__logo { height: 44px; width: auto; display: block; } .footer-brand .brand__logo { height: auto; width: 250px; max-width: 72vw; } @media (max-width: 560px){ .brand__logo { height: 36px; } } .logotype { font-family: var(--ff-display); line-height: .82; text-transform: uppercase; } .logotype .l1, .logotype .l2 { display: block; } .logotype .l1 { font-weight: 700; font-size: 1.16rem; letter-spacing: .04em; color: var(--paper); } .logotype .l2 { font-weight: 700; font-size: 1.16rem; letter-spacing: .04em; color: var(--paper); position: relative; } .logotype .script-after { font-family: var(--ff-script); text-transform: none; color: var(--red-2); font-size: 1.35rem; line-height: .5; letter-spacing: 0; font-weight: 400; position: absolute; left: -6px; top: -.55em; transform: rotate(-6deg); } .logotype--stack .row { display: flex; align-items: baseline; gap: .35rem; } .nav { display: flex; align-items: center; gap: 1.5rem; } .nav__list { display: flex; align-items: center; gap: 1.2rem; } .nav__link { font-family: var(--ff-display); text-transform: uppercase; letter-spacing: .1em; font-size: .82rem; font-weight: 600; color: #474c54; padding: .3rem 0; position: relative; transition: color .18s; } .nav__link::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; background: var(--red); transition: width .22s var(--ease); } .nav__link:hover { color: var(--ink); } .nav__link:hover::after, .nav__link[aria-current="page"]::after { width: 100%; } .nav__link[aria-current="page"] { color: var(--ink); } .nav-toggle { display: none; width: 44px; height: 44px; background: transparent; border: 1px solid rgba(0,0,0,.22); border-radius: var(--radius); position: relative; } .nav-toggle span { position: absolute; left: 11px; right: 11px; height: 2px; background: var(--ink); transition: transform .25s var(--ease), opacity .2s; } .nav-toggle span:nth-child(1) { top: 15px; } .nav-toggle span:nth-child(2) { top: 21px; } .nav-toggle span:nth-child(3) { top: 27px; } body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); } body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; } body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } @media (max-width: 1200px) { .nav-toggle { display: block; z-index: 120; } .nav { position: fixed; inset: 0 0 0 auto; width: min(86vw, 360px); background: var(--ink-2); border-left: 1px solid var(--line); flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 6rem 2rem 2rem; gap: 0; transform: translateX(100%); visibility: hidden; transition: transform .35s var(--ease), visibility 0s linear .35s; box-shadow: var(--shadow); } body.nav-open .nav { transform: translateX(0); visibility: visible; transition: transform .35s var(--ease), visibility 0s; } .nav__list { flex-direction: column; align-items: stretch; gap: 0; width: 100%; } .nav__link { padding: 1rem 0; border-bottom: 1px solid var(--line); font-size: 1rem; color: var(--paper-dim); } .nav__link:hover, .nav__link[aria-current="page"] { color: var(--paper); } .nav__link::after { display: none; } .nav-toggle { border-color: rgba(0,0,0,.22); } .nav-toggle span { background: var(--ink); } .nav .btn { margin-top: 1.5rem; } .nav-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); opacity: 0; visibility: hidden; transition: opacity .3s; z-index: 110; } body.nav-open .nav-backdrop { opacity: 1; visibility: visible; } } /* ---------- Hero ---------- */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; isolation: isolate; } .hero--short { min-height: 62vh; } .hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; } .hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .hero__media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(8,10,13,.55) 0%, rgba(8,10,13,.35) 45%, rgba(8,10,13,.92) 100%), linear-gradient(90deg, rgba(8,10,13,.8) 0%, rgba(8,10,13,.25) 60%); } .hero__inner { padding-block: 9rem 4rem; position: relative; z-index: 2; width: 100%; } .hero__inner.is-center { text-align: center; margin-inline: auto; } .hero h1 { margin-top: 1.2rem; text-shadow: 0 2px 30px rgba(0,0,0,.5); } .hero .lead { margin-top: 1.5rem; } .hero .btn-row { margin-top: 2.2rem; } .hero__inner.is-center .btn-row { justify-content: center; } .hero__inner.is-center .eyebrow { justify-content: center; } .scroll-cue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 3; color: var(--paper-dim); font-family: var(--ff-display); text-transform: uppercase; letter-spacing: .2em; font-size: .68rem; display: flex; flex-direction: column; align-items: center; gap: .5rem; } .scroll-cue .line { width: 1px; height: 40px; background: linear-gradient(var(--red), transparent); animation: cue 2s var(--ease) infinite; } @keyframes cue { 0%{transform:scaleY(0);transform-origin:top;} 45%{transform:scaleY(1);transform-origin:top;} 55%{transform:scaleY(1);transform-origin:bottom;} 100%{transform:scaleY(0);transform-origin:bottom;} } /* page banner (interior heroes) */ .pagehead { position: relative; padding-block: clamp(7rem, 14vw, 11rem) clamp(2.5rem,6vw,4rem); isolation: isolate; overflow: hidden; } .pagehead--short { padding-block: clamp(5.5rem, 11vw, 8rem) clamp(2rem,5vw,3rem); } .pagehead__media { position: absolute; inset: 0; z-index: -2; } .pagehead__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.25) contrast(1.05); } .pagehead__media::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(8,10,13,.7), rgba(8,10,13,.88)), linear-gradient(90deg, rgba(8,10,13,.85), rgba(8,10,13,.45)); } .pagehead h1 { margin-top: 1rem; } .pagehead .lead { margin-top: 1.1rem; } .breadcrumb { font-family: var(--ff-display); text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; color: var(--muted); } .breadcrumb a:hover { color: var(--paper); } /* ---------- Stat band ---------- */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; } .stat { background: var(--ink-2); padding: clamp(1.5rem,3vw,2.4rem) 1.2rem; text-align: center; } .stat__num { font-family: var(--ff-display); font-weight: 700; font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1; color: var(--paper); } .stat__num .u { color: var(--red-2); } .stat__label { font-family: var(--ff-display); text-transform: uppercase; letter-spacing: .14em; font-size: .74rem; color: var(--muted); margin-top: .7rem; } @media (max-width: 720px){ .stats { grid-template-columns: repeat(2, 1fr); } } /* ---------- Grid helpers ---------- */ .grid { display: grid; gap: clamp(1.1rem, 2.4vw, 1.8rem); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 940px){ .grid-3, .grid-4 { grid-template-columns: repeat(2,1fr); } } @media (max-width: 640px){ .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } .split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .split--media-first .split__media { order: -1; } @media (max-width: 900px){ .split { grid-template-columns: 1fr; } .split--media-first .split__media { order: 0; } } /* ---------- Cards ---------- */ .card { background: var(--ink-3); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.4rem, 2.6vw, 2rem); transition: transform .2s var(--ease), border-color .2s, background .2s; } .card:hover { transform: translateY(-4px); border-color: var(--line-2); } .card__k { font-family: var(--ff-display); color: var(--red-text); font-weight: 700; font-size: 1rem; letter-spacing: .1em; } .card h3 { margin-block: .6rem .6rem; } .card p { color: var(--paper-dim); } /* process steps */ .step { position: relative; background: var(--ink-3); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.6rem,3vw,2.2rem); overflow: hidden; } .step__n { font-family: var(--ff-display); font-weight: 700; font-size: 3.4rem; line-height: 1; color: rgba(255,255,255,.07); position: absolute; top: .6rem; right: 1rem; } .step h3 { margin-bottom: .7rem; } .step p { color: var(--paper-dim); } .step .num-badge { display:inline-flex; width: 44px; height:44px; align-items:center; justify-content:center; border:1.5px solid var(--red); color: var(--red-2); font-family: var(--ff-display); font-weight:700; border-radius: 50%; margin-bottom: 1rem; } /* feature (icon) list */ .feature { display: flex; gap: 1rem; align-items: flex-start; } .feature__ico { flex: none; width: 46px; height: 46px; border: 1px solid var(--line-2); border-radius: var(--radius); display: grid; place-items: center; color: var(--red-2); } .feature h3 { font-size: 1.15rem; margin-bottom: .35rem; } .feature p { color: var(--paper-dim); font-size: .98rem; } /* image frame */ .frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); } .frame img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.15) contrast(1.03); } .frame--tall { aspect-ratio: 4/5; } .frame--wide { aspect-ratio: 16/10; } .frame__cap { position: absolute; left: 0; bottom: 0; right: 0; padding: 1.2rem; background: linear-gradient(transparent, rgba(8,10,13,.9)); font-family: var(--ff-display); text-transform: uppercase; letter-spacing: .1em; font-size: .74rem; color: var(--paper-dim); } .accent-bar { width: 54px; height: 3px; background: var(--red); border: 0; margin: 1.4rem 0; } .accent-bar.is-center { margin-inline: auto; } /* ---------- Testimonials ---------- */ .quote { background: var(--ink-3); border: 1px solid var(--line); border-left: 3px solid var(--red); border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2rem); position: relative; height: 100%; } .quote__mark { font-family: Georgia, serif; font-size: 4rem; line-height: .5; color: rgba(176,30,40,.4); height: 1.4rem; display: block; } .quote p { font-size: 1.08rem; color: var(--paper); font-style: italic; } .quote__who { margin-top: 1.2rem; font-family: var(--ff-display); text-transform: uppercase; letter-spacing: .06em; font-size: .82rem; } .quote__who b { color: var(--paper); font-weight: 600; } .quote__who span { color: var(--muted); display: block; letter-spacing: .1em; font-size: .72rem; margin-top: .15rem; } .pull { border-left: 3px solid var(--red); padding: 1.4rem 0 1.4rem 1.8rem; } .pull p { font-family: var(--ff-display); text-transform: uppercase; font-weight: 600; font-size: clamp(1.4rem,3vw,2.1rem); line-height: 1.15; color: var(--paper); } .pull cite { display: block; margin-top: 1rem; font-style: normal; color: var(--red-text); font-family: var(--ff-display); letter-spacing: .1em; font-size: .8rem; text-transform: uppercase; } /* ---------- Honor wall ---------- */ .honor { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 1.1rem; } .honor__card { background: var(--ink-3); border: 1px solid var(--line); border-top: 3px solid var(--red); border-radius: var(--radius-lg); padding: 1.6rem; text-align: center; } .honor__card .rank-ico { width: 40px; height: 40px; margin: 0 auto .9rem; color: var(--khaki); } .honor__name { font-family: var(--ff-display); text-transform: uppercase; font-weight: 600; font-size: 1.15rem; color: var(--paper); letter-spacing: .04em; } .honor__rank { color: var(--paper-dim); font-size: .92rem; margin-top: .3rem; } .honor__branch { font-family: var(--ff-display); text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; color: var(--red-text); margin-top: .5rem; } .honor__meta { color: var(--muted); font-size: .8rem; margin-top: .8rem; border-top: 1px solid var(--line); padding-top: .8rem; } /* ---------- Leadership ---------- */ .person { text-align: left; } .person__badge { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; font-family: var(--ff-display); font-weight: 700; font-size: 1.2rem; color: var(--red-2); background: var(--ink-3); margin-bottom: 1rem; } .person__name { font-family: var(--ff-display); text-transform: uppercase; font-weight: 600; font-size: 1.1rem; color: var(--paper); } .person__role { color: var(--paper-dim); font-size: .92rem; margin-top: .2rem; } .person__tag { display:inline-block; margin-top:.6rem; font-family:var(--ff-display); text-transform:uppercase; letter-spacing:.12em; font-size:.66rem; color:var(--gold); border:1px solid rgba(201,162,75,.4); padding:.2rem .5rem; border-radius:2px; } /* ---------- Supporters ---------- */ .supporter { display: flex; flex-direction: column; gap: .5rem; } .supporter__type { font-family: var(--ff-display); text-transform: uppercase; letter-spacing: .14em; font-size: .68rem; color: var(--red-text); } .supporter__name { font-family: var(--ff-display); text-transform: uppercase; font-weight: 600; font-size: 1.35rem; color: var(--paper); } /* ---------- CTA band ---------- */ .cta-band { position: relative; isolation: isolate; overflow: hidden; } .cta-band__media { position: absolute; inset: 0; z-index: -2; } .cta-band__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.4) contrast(1.05); } .cta-band__media::after { content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(9,11,14,.94), rgba(9,11,14,.7)); } .cta-band .price { font-family: var(--ff-display); font-weight: 700; color: var(--red-2); } /* ---------- Trust strip ---------- */ .trust { display: flex; flex-wrap: wrap; gap: 1rem 2.4rem; align-items: center; justify-content: center; } .trust__item { display: flex; align-items: center; gap: .6rem; font-family: var(--ff-display); text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; color: var(--paper-dim); } .trust__item svg { color: var(--red-2); flex: none; } /* ---------- Forms ---------- */ .field { display: flex; flex-direction: column; gap: .45rem; margin-bottom: 1.1rem; } .field label { font-family: var(--ff-display); text-transform: uppercase; letter-spacing: .1em; font-size: .74rem; color: var(--paper-dim); } .field input, .field textarea, .field select { background: var(--ink); border: 1px solid var(--line-2); border-radius: var(--radius); color: var(--paper); padding: .85rem 1rem; font: inherit; transition: border-color .18s, box-shadow .18s; } .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--red-2); box-shadow: 0 0 0 3px rgba(176,30,40,.5); } .field textarea { min-height: 140px; resize: vertical; } /* ---------- Footer ---------- */ .site-footer { background: #08090b; border-top: 1px solid var(--line); padding-block: clamp(3rem,6vw,4.5rem) 2rem; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.5rem; } @media (max-width: 860px){ .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } } @media (max-width: 520px){ .footer-grid { grid-template-columns: 1fr; } } .footer-col h3, .footer-col h4 { font-size: .82rem; letter-spacing: .16em; color: var(--muted); margin-bottom: 1.1rem; text-transform: uppercase; } .footer-col ul { display: flex; flex-direction: column; gap: .6rem; } .footer-col a { color: var(--paper-dim); font-size: .95rem; transition: color .15s; } .footer-col a:hover { color: var(--red-text); } .footer-about p { color: var(--muted); font-size: .92rem; margin-top: 1rem; max-width: 34ch; } .footer-contact li { color: var(--paper-dim); font-size: .95rem; margin-bottom: .55rem; display:flex; gap:.6rem; align-items:flex-start; } .footer-contact svg { color: var(--red-2); flex:none; margin-top: 3px; } .footer-bottom { border-top: 1px solid var(--line); margin-top: 2.5rem; padding-top: 1.6rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; } .footer-bottom p { color: var(--muted); font-size: .82rem; } .badge-501 { display:inline-flex; align-items:center; gap:.5rem; border:1px solid rgba(201,162,75,.4); color: var(--gold); border-radius: 2px; padding:.35rem .7rem; font-family:var(--ff-display); text-transform:uppercase; letter-spacing:.12em; font-size:.68rem; } /* ---------- Reveal animation ---------- */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal.in { opacity: 1; transform: none; } .reveal[data-d="1"]{ transition-delay:.08s; } .reveal[data-d="2"]{ transition-delay:.16s; } .reveal[data-d="3"]{ transition-delay:.24s; } .reveal[data-d="4"]{ transition-delay:.32s; } /* ---------- Misc ---------- */ .divider { height:1px; background: var(--line); border:0; } .tag-list { display:flex; flex-wrap:wrap; gap:.5rem; } .tag { font-family: var(--ff-display); text-transform:uppercase; letter-spacing:.1em; font-size:.7rem; color: var(--paper-dim); border:1px solid var(--line-2); border-radius:2px; padding:.3rem .7rem; } .skip-link { position:absolute; left:-999px; top:0; background: var(--red); color:#fff; padding:.6rem 1rem; z-index:200; } .skip-link:focus { left: 1rem; top: 1rem; } :focus-visible { outline: 2px solid var(--red-2); outline-offset: 3px; } .note { background: var(--ink-3); border:1px solid var(--line); border-left:3px solid var(--khaki); border-radius: var(--radius-lg); padding: 1.3rem 1.5rem; color: var(--paper-dim); } /* ============================================================ Round 2 additions — honor photos, gallery, news, newsletter ============================================================ */ /* Honor Wall — photo memorial cards */ .honor--photos { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } .honor__card--photo { text-align: center; display: flex; flex-direction: column; } .honor__photo { width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: 50% 22%; border-radius: var(--radius); margin-bottom: 1.1rem; background: #000; filter: grayscale(1) contrast(1.05); transition: filter .45s var(--ease); } .honor__card--photo:hover .honor__photo { filter: grayscale(0) contrast(1.02); } .honor__tribute { color: var(--paper-dim); font-size: .93rem; line-height: 1.55; margin-top: 1rem; border-top: 1px solid var(--line); padding-top: 1rem; text-align: left; } .honor__tribute em { color: var(--paper); font-style: italic; } /* Photo gallery */ .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap: .8rem; } .gallery__item { position: relative; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); aspect-ratio: 4/3; background: var(--ink-2); } .gallery__item.is-tall { aspect-ratio: 3/4; } .gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .gallery__item:hover img { transform: scale(1.06); } .gallery__item::after { content:""; position:absolute; inset:0; box-shadow: inset 0 -40px 40px -20px rgba(8,10,13,.5); pointer-events:none; } /* News / press */ .news-featured { position: relative; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--line); isolation: isolate; } .news-featured__media { position: absolute; inset: 0; z-index: -2; } .news-featured__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.3) contrast(1.05); } .news-featured__media::after { content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(9,11,14,.94), rgba(9,11,14,.6)); } .news-featured__body { padding: clamp(2rem,5vw,3.5rem); max-width: 640px; } .news-card { display: flex; flex-direction: column; background: var(--ink-3); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.4rem,2.5vw,1.9rem); transition: transform .2s var(--ease), border-color .2s; height: 100%; } .news-card:hover { transform: translateY(-4px); border-color: var(--line-2); } .news-card__type { font-family: var(--ff-display); text-transform: uppercase; letter-spacing: .16em; font-size: .68rem; color: var(--red-text); } .news-card h3 { margin: .5rem 0 .7rem; font-size: 1.2rem; } .news-card p { color: var(--paper-dim); font-size: .95rem; flex: 1; } .news-card .link-arrow { margin-top: 1.2rem; } /* Newsletter / Mailchimp */ .mc-form { display: flex; gap: .7rem; flex-wrap: wrap; max-width: 520px; } .mc-form input[type=email] { flex: 1; min-width: 220px; background: var(--ink); border: 1px solid var(--line-2); border-radius: var(--radius); color: var(--paper); padding: .95rem 1.1rem; font: inherit; } .mc-form input[type=email]:focus { outline: none; border-color: var(--red-2); box-shadow: 0 0 0 3px rgba(176,30,40,.5); } .mc-hp { position: absolute; left: -5000px; } /* mailchimp bot honeypot */ .archive-frame { width: 100%; height: 620px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; } /* Donorbox embed */ .donorbox-wrap { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: #fff; } .donorbox-wrap iframe { width: 100%; min-width: 100%; max-width: 100%; min-height: 685px; border: 0; display: block; } /* ---------- Supporter logos ---------- */ .supporter__logo { background: #fff; border-radius: var(--radius); height: 130px; display: flex; align-items: center; justify-content: center; padding: 1.3rem 1.6rem; margin-bottom: 1.3rem; overflow: hidden; } .supporter__logo img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; } /* Homepage logo strip */ .logo-strip { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; align-items: stretch; } .logo-strip .chip { background: #fff; border-radius: var(--radius); height: 96px; flex: 1 1 190px; max-width: 235px; display: flex; align-items: center; justify-content: center; padding: 1rem 1.4rem; transition: transform .2s var(--ease); } .logo-strip .chip:hover { transform: translateY(-3px); } .logo-strip .chip img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; }