/* Helvetica Now Display – webfont bundle */ @font-face { font-family: 'Helvetica Now Display'; src: url('./fonts/HelveticaNowDisplay-ExtraLightItalic.woff2') format('woff2'), url('./fonts/HelveticaNowDisplay-ExtraLightItalic.woff') format('woff'); font-weight: 275; font-style: italic; font-display: swap; } @font-face { font-family: 'Helvetica Now Display'; src: url('./fonts/HelveticaNowDisplay-ThinItalic.woff2') format('woff2'), url('./fonts/HelveticaNowDisplay-ThinItalic.woff') format('woff'); font-weight: 250; font-style: italic; font-display: swap; } @font-face { font-family: 'Helvetica Now Display'; src: url('./fonts/HelveticaNowDisplay-Light.woff2') format('woff2'), url('./fonts/HelveticaNowDisplay-Light.woff') format('woff'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Helvetica Now Display'; src: url('./fonts/HelveticaNowDisplay-LightItalic.woff2') format('woff2'), url('./fonts/HelveticaNowDisplay-LightItalic.woff') format('woff'); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: 'Helvetica Now Display'; src: url('./fonts/HelveticaNowDisplay-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Helvetica Now Display'; src: url('./fonts/HelveticaNowDisplay-RegularItalic.woff2') format('woff2'), url('./fonts/HelveticaNowDisplay-RegularItalic.woff') format('woff'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Helvetica Now Display'; src: url('./fonts/HelveticaNowDisplay-Medium.woff2') format('woff2'), url('./fonts/HelveticaNowDisplay-Medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Helvetica Now Display'; src: url('./fonts/HelveticaNowDisplay-MediumItalic.woff2') format('woff2'), url('./fonts/HelveticaNowDisplay-MediumItalic.woff') format('woff'); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: 'Helvetica Now Display'; src: url('./fonts/HelveticaNowDisplay-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Helvetica Now Display'; src: url('./fonts/HelveticaNowDisplay-BoldItalic.woff2') format('woff2'), url('./fonts/HelveticaNowDisplay-BoldItalic.woff') format('woff'); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: 'Helvetica Now Display'; src: url('./fonts/HelveticaNowDisplay-ExtraBold.woff2') format('woff2'), url('./fonts/HelveticaNowDisplay-ExtraBold.woff') format('woff'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Helvetica Now Display'; src: url('./fonts/HelveticaNowDisplay-ExtraBoldItalic.otf') format('opentype'); font-weight: 800; font-style: italic; font-display: swap; } @font-face { font-family: 'Helvetica Now Display'; src: url('./fonts/HelveticaNowDisplay-Black.woff2') format('woff2'), url('./fonts/HelveticaNowDisplay-Black.woff') format('woff'); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Helvetica Now Display'; src: url('./fonts/HelveticaNowDisplay-BlackItalic.woff2') format('woff2'), url('./fonts/HelveticaNowDisplay-BlackItalic.woff') format('woff'); font-weight: 900; font-style: italic; font-display: swap; } /* ======================================================= Helvetica Now Display — Site Typography (Ghost / Homa) Core preloads recommended in : - HelveticaNowDisplay-Regular.woff2 - HelveticaNowDisplay-Bold.woff2 - HelveticaNowDisplay-Black.woff2 This file contains: 1) @font-face (already present in your kit) 2) Global defaults (body + headings) 3) Editorial utility classes (load-on-use for extra weights) 4) Responsive type sizing ======================================================= */ /* 1) Global defaults */ :root{ --hnd: 'Helvetica Now Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --lh: 1.55; } body{ font-family: var(--hnd); font-weight: 400; /* Regular */ line-height: var(--lh); font-style: normal; letter-spacing: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6, .site-title, .post-card-title, .hero-title{ font-family: var(--hnd); font-weight: 700; /*Bold */ font-style: normal; letter-spacing: -0.01em; line-height: 1.1; } strong, b { font-weight: 700; } /* Bold emphasis */ em, i { font-style: italic; } /* Will select 400i/700 automatically */ /* 2) Editorial utilities (use when you want extra impact) NOTE: These weights only download when used on the page. */ .hero-title--black { font-weight: 900; } /* Black for marquee headlines */ .pullquote, .stat-emphasis { font-weight: 700; } /* Bold for quotes/stats */ .section-subtitle { font-weight: 500; } /* Medium for subheads */ .kicker { font-weight: 500; text-transform: uppercase; letter-spacing: .06em; } .meta, .byline, .caption, .small { font-weight: 300; } /* Light for quiet text */ .caption{ font-size: .9rem; opacity: .8; } .lede{ font-weight: 400; font-size: 1.125rem; line-height: 1.6; } /* Intro paragraph */ /* 3) Buttons & CTAs */ .button, .cta, .btn { font-family: var(--hnd); font-weight: 700; /* Bold for clarity */ } /* 4) Responsive type sizes (tweak to taste) */ h1{ font-size: clamp(2rem, 3.5vw, 3rem); } h2{ font-size: clamp(1.5rem, 2.4vw, 2.25rem); } h3{ font-size: clamp(1.25rem, 1.8vw, 1.6rem); } .lede{ font-size: clamp(1.05rem, 1.1vw, 1.25rem); } /* === Headings: ExtraBold + slightly smaller === */ h1, h2, h3, h4, h5, h6, .site-title, .post-card-title, .hero-title, .section-title { font-family: 'Helvetica Now Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important; font-weight: 700 !important; /* Bold */ font-style: normal; letter-spacing: -0.01em; } /* Adjust sizes (example tweaks) */ h1, .hero-title { font-size: clamp(1.8rem, 3vw, 2.5rem); } h2 { font-size: clamp(1.5rem, 2.2vw, 2rem); } h3 { font-size: clamp(1.25rem, 1.8vw, 1.6rem); } /* === Compact & Elegant heading scale === */ h1, .hero-title { font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.18; } h2 { font-size: clamp(1.35rem, 2.0vw, 1.9rem); line-height: 1.22; } h3 { font-size: clamp(1.2rem, 1.6vw, 1.55rem); line-height: 1.28; } h4 { font-size: clamp(1.1rem, 1.4vw, 1.35rem); line-height: 1.32; } .post-card-title { font-size: clamp(1.05rem, 1.3vw, 1.25rem); line-height: 1.28; } /* Keep headers Bold by default */ h1, h2, h3, h4, .hero-title, .post-card-title { font-weight: 700; letter-spacing: -0.01em; } /* Shrink homepage non-hero post titles (~15% smaller) */ .home-template .text-h5 { font-size: 85% !important; /* about 15% smaller */ line-height: 1.25 !important; font-weight: 700 !important; /* keep Bold look */ letter-spacing: -0.01em; } /* Tighter hero headline text */ .home-template .hero-title { letter-spacing: -0.03em !important; /* tighter tracking */ line-height: 1.1 !important; /* optional: reduce vertical spacing */ } /* 1) Modern, precise: any homepage card/article that CONTAINS an image */ .home-template article:has(img) h2, .home-template article:has(img) h3, .home-template .post-card:has(img) .post-card-title, .home-template .card:has(img) .card-title, .home-template .card:has(img) .post-title, .home-template .card:has(img) .text-h5, .home-template .card:has(img) .text-h6 { font-size: clamp(0.95rem, 1.2vw, 1.25rem) !important; /* ≈30–35% smaller */ line-height: 1.22 !important; font-weight: 700; letter-spacing: -0.01em; } /* 2) Fallback for browsers that don't fully support :has() — match common title classes on homepage */ .home-template .post-feed :is(.post-card-title, .post-title, .card-title, .text-h5, .text-h6), .home-template .grid :is(.post-card-title, .post-title, .card-title, .text-h5, .text-h6), .home-template .cards :is(.post-card-title, .post-title, .card-title, .text-h5, .text-h6), .home-template .read-more :is(.post-card-title, .post-title, .card-title, .text-h5, .text-h6) { font-size: clamp(0.95rem, 1.2vw, 1.25rem) !important; line-height: 1.22 !important; font-weight: 700; letter-spacing: -0.01em; } /* Keep hero headline as-is */ .home-template .hero-title { font-size: clamp(2rem, 3.5vw, 3rem) !important; } /* Header container: keep logo/nav inside the same grid width */ .gh-head, .gh-head-inner, .header, .header .inner { box-sizing: border-box; max-width: 1200px; /* tweak: 1080–1280px usually looks great */ margin: 0 auto; padding-inline: 24px; /* side padding so nothing hugs the edge */ } /* If the theme uses a full-bleed bar, ensure the inner wrapper is centered */ .gh-head > .gh-head-inner, .header > .inner { max-width: inherit; margin: 0 auto; padding-inline: inherit; } /* Keep logo inside the main content grid */ .gh-head .logo, .header .logo, img.logo { display: block; max-width: 180px; /* adjust size if needed */ height: auto; margin-left: 24px; /* push it in from the edge */ } /* Constrain the whole header so logo + nav sit inside page width */ .gh-head, .header { max-width: 1200px; /* align with your content grid */ margin: 0 auto; /* center within full window */ padding-inline: 24px; /* breathing room left/right */ box-sizing: border-box; } /* === Make menu links bold grey === */ .gh-head .gh-nav a, .header .nav a { font-weight: 700 !important; /* true Bold */ color: #5a5a5a !important; /* medium grey */ text-decoration: none; letter-spacing: -0.01em; } /* Hover + active states */ .gh-head .gh-nav a:hover, .header .nav a:hover, .gh-head .gh-nav .nav-current a, .header .nav .nav-current a { color: #3a3a3a !important; /* darker grey on hover/active */ } /* === Remove divider bars between nav items === */ .gh-head .gh-nav li, .header .nav li { border: none !important; } /* If theme adds pseudo-elements for dividers */ .gh-head .gh-nav li::before, .gh-head .gh-nav li::after, .header .nav li::before, .header .nav li::after { content: none !important; } /* === Make menu links bold grey === */ .gh-head .gh-nav a, .header .nav a { font-weight: 700 !important; /* true Bold */ color: #5a5a5a !important; /* medium grey */ text-decoration: none; letter-spacing: -0.01em; } /* Hover + active states */ .gh-head .gh-nav a:hover, .header .nav a:hover, .gh-head .gh-nav .nav-current a, .header .nav .nav-current a { color: #3a3a3a !important; /* darker grey on hover/active */ } /* === Remove divider bars between nav items === */ .gh-head .gh-nav li, .header .nav li { border: none !important; } /* If theme adds pseudo-elements for dividers */ .gh-head .gh-nav li::before, .gh-head .gh-nav li::after, .header .nav li::before, .header .nav li::after { content: none !important; } /* Constrain + center the header row */ .gh-head, header.gh-head, .header { width: 100%; } .gh-head .gh-head-inner, header.gh-head .gh-head-inner, .header .inner, .gh-head > .inner, .gh-head > div:not(.overlay):not(.backdrop) { max-width: 1200px; /* match your main content width */ margin: 0 auto; /* center it */ padding-inline: 24px; /* breathing room on left/right */ box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; } /* Make sure the logo respects the padding and doesn't hug the edge */ .gh-head .gh-head-logo, .header .logo, img.logo { display: block; max-width: 180px; /* adjust if you want it smaller/larger */ height: auto; } /* Use your Helvetica in the header */ .gh-head, .gh-head * { font-family: 'Helvetica Now Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important; } /* True bold + grey for menu links (desktop + mobile) */ .gh-head nav a, .gh-head .gh-nav a, .gh-head .gh-nav a span, .header nav a, .header .nav a, .header .nav a span { font-weight: 700 !important; /* Bold */ color: #5a5a5a !important; /* medium grey */ text-decoration: none !important; letter-spacing: -0.01em; } /* Hover/active darker */ .gh-head .gh-nav a:hover, .gh-head .gh-nav .nav-current a, .header .nav a:hover, .header .nav .nav-current a { color: #3a3a3a !important; } /* Remove dividers between nav items (borders & pseudo-elements) */ .gh-head .gh-nav li, .header .nav li { border: 0 !important; } .gh-head .gh-nav li::before, .gh-head .gh-nav li::after, .header .nav li::before, .header .nav li::after { content: none !important; border: 0 !important; } /* Force menu font to Bold + grey */ .gh-head .gh-nav a, .gh-head .gh-nav a span { font-family: 'Helvetica Now Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; font-weight: 700 !important; /* Bold */ color: #5a5a5a !important; /* grey instead of black */ letter-spacing: -0.01em; text-decoration: none !important; } /* Hover/active state */ .gh-head .gh-nav a:hover, .gh-head .gh-nav .nav-current a { color: #3a3a3a !important; }