/* ============================================================ ATHENS CHURCH — Design Tokens Bookmania, Tangier, and Quasimoda are served by Adobe Fonts (Typekit) — see the in application-content.lava, which MUST be present before this file loads. Helvetica Neue LT Pro is self-hosted here, pointing at the live copies in the Athens-Church/athens-brand GitHub Pages repo (branding.athenschurch.com), which sends access-control-allow-origin: * — no local /fonts folder needed. Import this after the Typekit link in any Athens Church HTML page. ============================================================ */ /* ---------- HELVETICA NEUE LT PRO · subheading · key weights ---------- */ @font-face { font-family:'Helvetica Neue LT Pro'; src:url('https://branding.athenschurch.com/fonts/helvetica-neue/HelveticaNeueLTPro-UltLt.otf') format('opentype'); font-weight:200; font-style:normal; font-display:swap; } @font-face { font-family:'Helvetica Neue LT Pro'; src:url('https://branding.athenschurch.com/fonts/helvetica-neue/HelveticaNeueLTPro-Th.otf') format('opentype'); font-weight:300; font-style:normal; font-display:swap; } @font-face { font-family:'Helvetica Neue LT Pro'; src:url('https://branding.athenschurch.com/fonts/helvetica-neue/HelveticaNeueLTPro-ThIt.otf') format('opentype'); font-weight:300; font-style:italic; font-display:swap; } @font-face { font-family:'Helvetica Neue LT Pro'; src:url('https://branding.athenschurch.com/fonts/helvetica-neue/HelveticaNeueLTPro-Lt.otf') format('opentype'); font-weight:350; font-style:normal; font-display:swap; } @font-face { font-family:'Helvetica Neue LT Pro'; src:url('https://branding.athenschurch.com/fonts/helvetica-neue/HelveticaNeueLTPro-LtIt.otf') format('opentype'); font-weight:350; font-style:italic; font-display:swap; } @font-face { font-family:'Helvetica Neue LT Pro'; src:url('https://branding.athenschurch.com/fonts/helvetica-neue/HelveticaNeueLTPro-Roman.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:'Helvetica Neue LT Pro'; src:url('https://branding.athenschurch.com/fonts/helvetica-neue/HelveticaNeueLTPro-It.otf') format('opentype'); font-weight:400; font-style:italic; font-display:swap; } @font-face { font-family:'Helvetica Neue LT Pro'; src:url('https://branding.athenschurch.com/fonts/helvetica-neue/HelveticaNeueLTPro-Md.otf') format('opentype'); font-weight:500; font-style:normal; font-display:swap; } @font-face { font-family:'Helvetica Neue LT Pro'; src:url('https://branding.athenschurch.com/fonts/helvetica-neue/HelveticaNeueLTPro-MdIt.otf') format('opentype'); font-weight:500; font-style:italic; font-display:swap; } @font-face { font-family:'Helvetica Neue LT Pro'; src:url('https://branding.athenschurch.com/fonts/helvetica-neue/HelveticaNeueLTPro-Bd.otf') format('opentype'); font-weight:700; font-style:normal; font-display:swap; } @font-face { font-family:'Helvetica Neue LT Pro'; src:url('https://branding.athenschurch.com/fonts/helvetica-neue/HelveticaNeueLTPro-BdIt.otf') format('opentype'); font-weight:700; font-style:italic; font-display:swap; } @font-face { font-family:'Helvetica Neue LT Pro'; src:url('https://branding.athenschurch.com/fonts/helvetica-neue/HelveticaNeueLTPro-Hv.otf') format('opentype'); font-weight:800; font-style:normal; font-display:swap; } @font-face { font-family:'Helvetica Neue LT Pro'; src:url('https://branding.athenschurch.com/fonts/helvetica-neue/HelveticaNeueLTPro-HvIt.otf') format('opentype'); font-weight:800; font-style:italic; font-display:swap; } @font-face { font-family:'Helvetica Neue LT Pro'; src:url('https://branding.athenschurch.com/fonts/helvetica-neue/HelveticaNeueLTPro-Blk.otf') format('opentype'); font-weight:900; font-style:normal; font-display:swap; } @font-face { font-family:'Helvetica Neue LT Pro'; src:url('https://branding.athenschurch.com/fonts/helvetica-neue/HelveticaNeueLTPro-BlkIt.otf') format('opentype'); font-weight:900; font-style:italic; font-display:swap; } /* Condensed + Extended families keep the LT Pro name and live next to the base weights */ @font-face { font-family:'Helvetica Neue LT Pro Cn'; src:url('https://branding.athenschurch.com/fonts/helvetica-neue/HelveticaNeueLTPro-Cn.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:'Helvetica Neue LT Pro Cn'; src:url('https://branding.athenschurch.com/fonts/helvetica-neue/HelveticaNeueLTPro-MdCn.otf') format('opentype'); font-weight:500; font-style:normal; font-display:swap; } @font-face { font-family:'Helvetica Neue LT Pro Cn'; src:url('https://branding.athenschurch.com/fonts/helvetica-neue/HelveticaNeueLTPro-BdCn.otf') format('opentype'); font-weight:700; font-style:normal; font-display:swap; } @font-face { font-family:'Helvetica Neue LT Pro Ex'; src:url('https://branding.athenschurch.com/fonts/helvetica-neue/HelveticaNeueLTPro-Ex.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:'Helvetica Neue LT Pro Ex'; src:url('https://branding.athenschurch.com/fonts/helvetica-neue/HelveticaNeueLTPro-MdEx.otf') format('opentype'); font-weight:500; font-style:normal; font-display:swap; } @font-face { font-family:'Helvetica Neue LT Pro Ex'; src:url('https://branding.athenschurch.com/fonts/helvetica-neue/HelveticaNeueLTPro-BdEx.otf') format('opentype'); font-weight:700; font-style:normal; font-display:swap; } :root { /* ---------- Brand palette ---------- */ --cinnabar: #EF413D; --charcoal: #242423; --alabaster: #F2F2E9; --blue-gray: #5D6A91; --peach: #FAC088; --aluminum: #B8B8B2; --alabaster-88: rgba(242,242,233,0.88); --alabaster-64: rgba(242,242,233,0.64); --alabaster-40: rgba(242,242,233,0.40); --alabaster-16: rgba(242,242,233,0.16); --alabaster-08: rgba(242,242,233,0.08); --charcoal-88: rgba(36,36,35,0.88); --charcoal-64: rgba(36,36,35,0.64); --charcoal-48: rgba(36,36,35,0.48); --charcoal-16: rgba(36,36,35,0.16); --charcoal-08: rgba(36,36,35,0.08); --surface-softest: #F2F2E9; --surface-soft: #E5E5DA; --surface-medium: #B8B8B2; --surface-strong: #5D6A91; --surface-strongest:#242423; /* ---------- Type families (Bookmania/Tangier/Quasimoda via Typekit, Helvetica Neue LT Pro self-hosted) ---------- */ --font-heading: "Bookmania", Georgia, "Times New Roman", serif; --font-display: "Tangier", Georgia, serif; --font-subheading: "Helvetica Neue LT Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-subheading-ex: "Helvetica Neue LT Pro Ex", "Helvetica Neue LT Pro", Helvetica, Arial, sans-serif; --font-body: "Quasimoda", "Helvetica Neue LT Pro", Helvetica, Arial, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace; /* ---------- Type scale ---------- */ --text-hairline: 11px; --text-caption: 12px; --text-small: 14px; --text-body: 16px; --text-lead: 18px; --text-h4: 22px; --text-h3: 28px; --text-h2: 40px; --text-h1: 56px; --text-display: 96px; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.06em; --tracking-wider: 0.14em; --tracking-widest: 0.18em; /* ---------- Space scale ---------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px; /* ---------- Radii ---------- */ --r-none: 0; --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-xl: 22px; --r-pill: 999px; /* ---------- Elevation ---------- */ --shadow-sm: 0 1px 2px rgba(36,36,35,0.06), 0 1px 1px rgba(36,36,35,0.04); --shadow-md: 0 6px 18px rgba(36,36,35,0.08), 0 2px 6px rgba(36,36,35,0.05); --shadow-lg: 0 24px 48px rgba(36,36,35,0.14), 0 8px 16px rgba(36,36,35,0.06); /* ---------- Motion ---------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 420ms; /* ---------- Layout ---------- */ --container: 1240px; --gutter: 32px; --hairline: 1px solid var(--charcoal-16); --hairline-inverse: 1px solid var(--alabaster-16); } .ac-eyebrow { font-family: var(--font-subheading); font-weight: 500; font-size: var(--text-hairline); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--charcoal-64); } .ac-eyebrow--cinnabar { color: var(--cinnabar); } .ac-eyebrow--inverse { color: var(--alabaster-64); } .ac-h1, .ac-h2, .ac-h3, .ac-h4 { font-family: var(--font-heading); font-style: italic; font-weight: 500; letter-spacing: var(--tracking-tight); line-height: 1.05; color: var(--charcoal); } .ac-h1 { font-size: var(--text-h1); } .ac-h2 { font-size: var(--text-h2); } .ac-h3 { font-size: var(--text-h3); line-height: 1.15; } .ac-h4 { font-size: var(--text-h4); line-height: 1.2; } .ac-display { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: var(--text-display); line-height: 0.9; letter-spacing: var(--tracking-tight); color: var(--charcoal); } .ac-body { font-family: var(--font-body); font-size: var(--text-body); line-height: 1.65; color: var(--charcoal-88); } .ac-lead { font-family: var(--font-body); font-size: var(--text-lead); line-height: 1.55; color: var(--charcoal-88); } .ac-mono { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--charcoal-64); }