/* ========================================================================== Apostle Vincent L. Greaves Sr. Ministries — design tokens -------------------------------------------------------------------------- This file is the contract. index.html and the five inner pages consume it. Change a value here, the whole site follows. Do not hardcode brand colors or type sizes anywhere else. Brand hexes below were sampled from the ministry's own artwork (assets/images/banner-bg-3.jpg, banner-bg-4.jpg on the live site), not picked by eye. ========================================================================== */ :root { /* --- brand primitives ------------------------------------------------- Measured. banner-bg-3 swoosh + verse bar sample #A00022/#9C0121/#A20226; the cream field is 15.6% of the image. banner-bg-4 is the purple field. */ --vlg-crimson: #A00122; /* THE accent: swoosh + verse bar */ --vlg-crimson-deep: #7C0119; /* hover/active */ --vlg-purple: #4E0B60; /* banner-bg-4 field */ --vlg-purple-deep: #2A0636; --vlg-ink: #1B0B25; /* deepest brand shadow -> footer */ --vlg-gold: #FDD00A; /* his tie */ --vlg-gold-antique: #DEBD54; /* background swirls */ --vlg-cream: #FBE4BB; /* banner field */ --vlg-cream-light: #FFF1D6; /* --- semantic --------------------------------------------------------- Point components at these, never at the primitives above. */ --color-bg: #F7F2E9; /* warm counterpart to the reference's #F5F5F5 */ /* Not #FFFFFF. Pure white against the warm cream page reads flat and pasted-on; a trace of the anchor hue is imperceptible as colour but settles the cards into the paper. */ --color-surface: oklch(99% 0.006 75); --color-text: var(--vlg-ink); --color-text-muted: #5A4A5F; --color-accent: var(--vlg-crimson); --color-accent-hover: var(--vlg-crimson-deep); --color-on-accent: #FFFFFF; --color-footer-bg: var(--vlg-ink); --color-footer-link: var(--vlg-gold-antique); --color-focus: var(--vlg-gold); /* !! HARD RULE: gold is NEVER text on a light background. #FDD00A on #FFFFFF is 1.48:1 — unreadable, fails WCAG outright. Gold is only ever: text on --vlg-ink / --vlg-purple, a fill, a rule, or the focus ring. Use --vlg-gold-antique (10.3:1 on ink) for footer links. There is no exception to this. */ /* --- type ------------------------------------------------------------- Fluid, and lands exactly on the reference's measured desktop metrics: h1 78.8px / h2 47.1px / weight 500 / letter-spacing -0.02em at >=1280px. Two families, as the reference has: Manrope carries headings and the site title, Poppins carries everything else — prose, nav, buttons, labels. Manrope alone was half the pairing and made the page read flatter than the reference at the same sizes. */ --font-display: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-sans: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-h1: clamp(2.5rem, 1.5513rem + 4.2174vw, 4.925rem); /* 40 -> 78.8px */ --font-h2: clamp(1.75rem, 1.2830rem + 2.0761vw, 2.94375rem); /* 28 -> 47.1px */ --font-card-title: clamp(1.5rem, 1.1500rem + 1.5556vw, 2.25rem); /* 24 -> 36px */ --font-lead: clamp(1rem, 0.9417rem + 0.2593vw, 1.125rem); /* 16 -> 18px */ --font-body: 1rem; --font-small: 0.875rem; --font-micro: 0.75rem; --tracking-tight: -0.02em; /* the reference's heading tracking */ --tracking-wide: 0.08em; /* eyebrows / small caps */ --weight-heading: 500; /* reference headings are 500, NOT 700 */ --weight-body: 400; --weight-btn: 700; --leading-tight: 1.05; --leading-snug: 1.25; --leading-body: 1.6; /* --- spacing (4px base) ----------------------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --bento-gap: var(--space-6); /* 24px */ --page-max: 1320px; --page-gutter: var(--space-6); /* --- radius ----------------------------------------------------------- The 24px-card / 0px-button contradiction IS the signature of this design language. Keep the tension; don't "fix" it. */ --radius-card: 24px; --radius-pill: 999px; --radius-btn: 0; /* --- borders ----------------------------------------------------------- */ --border-btn: 5px; /* reference; steps to 3px under 768 in site.css */ --btn-pad: 16px 20.8px; /* reference */ /* --- elevation -------------------------------------------------------- The reference is flat. Depth arrives on hover only. */ --shadow-card: none; --shadow-card-hover: 0 12px 32px rgba(27, 11, 37, 0.12); --shadow-nav: 0 1px 0 rgba(27, 11, 37, 0.08); /* --- scrim ------------------------------------------------------------ Mandatory under text on any photo card. The reference's overlay text is unreadable in places; ours cannot be, structurally. The stops must hold on the SHORTEST photo card, not the tallest. This is a percentage gradient of the card, but the text block is a fixed height and is anchored to the bottom — so on a 570px card the copy sits in the bottom 26% (deep in the dark end) while on a 260px card the same copy reaches 73% of the way up. An earlier version faded to fully transparent at 72% and measured 7:1 on the tall Mission card but 1.28:1 on the short Schedule one — white type on a white wall, invisible. It only ever passed because every photo card happened to be tall. So: never reach 0. The 0.22 floor at the top costs the photo a little brightness; unreadable copy costs more. Verified by sampling rendered pixels behind the glyphs, not computed styles — nothing can see through a photograph. */ --scrim-photo: linear-gradient(to top, rgba(27, 11, 37, 0.92) 0%, rgba(27, 11, 37, 0.82) 40%, rgba(27, 11, 37, 0.58) 75%, rgba(27, 11, 37, 0.22) 100%); /* --- motion ------------------------------------------------------------ One curve for the whole site: a decisive out-ease, no overshoot. Nothing bounces — this is a ministry site, not a toy. */ --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1); --motion-fast: 0.25s var(--ease-out); /* Scroll reveal. --stagger-step is per-item; at 8 bento cards the last one starts 8 x 70ms = 560ms after the first, which still reads as one gesture rather than a queue. Raise it and the grid starts to feel like it is loading. */ --dur-reveal: 0.55s; --stagger-step: 70ms; /* The timeline line draws for as long as its dots take to finish landing: 8 years x --year-step + one --dur-reveal to settle. */ --year-step: 90ms; --dur-timeline: 1.15s; }