/* ============================================================================ AWPS — typography parity with the original static site. Every value below is lifted directly from css/style.css so the WordPress build reads identically to africawanderingpeaksafaris.com. This file only sets type: family, size, weight, line-height, letter-spacing and text colour. Selectors are written at .elementor-element specificity (0,3,0) because the Elementor Global Kit emits its own heading rules at that weight; anything lower silently loses. Colours still come from the Kit through the awps-* aliases, so a brand change in Site Settings continues to flow through. Source reference: css/style.css --font-title Manrope --font-body Inter --font-script Dancing Script ========================================================================== */ /* ---------------------------------------------------------------- base -- body { font: 16px/1.75 Inter; color: #5E6D67 } h1–h5 { Manrope 800/1.25 } */ body, body .elementor-widget-text-editor, body .elementor-widget-theme-post-content { font-family: "Inter", sans-serif; font-size: 16px; line-height: 1.75; color: var(--awps-body, #5E6D67); } /* The 1.75 above has to be UNITLESS to be worth anything, and it has to outrank the Kit. Elementor writes its body type onto `.elementor-kit-N`, which sits on at (0,1,0) and beats the bare `body` selector at (0,0,1) regardless of load order. The Kit's value is a length, so children inherit the computed 28px verbatim instead of recomputing the ratio against their own size: 13.5px location lines and 14px card copy came out on a 28px leading instead of 23.6 and 24.5, which is what made every card, banner and section head on the site taller than the original. The attribute selector matches whatever kit id this install ends up with, so it keeps working if the Kit is ever recreated. */ body[class*="elementor-kit-"] { line-height: 1.75; } body h1, body h2, body h3, body h4, body h5, .elementor-widget-heading .elementor-heading-title { font-family: "Manrope", sans-serif; font-weight: 800; line-height: 1.25; color: var(--awps-ink, #1E2B27); } /* Section titles: .section-title { clamp(28px, 4vw, 42px) } Written at .elementor-element specificity so they outrank the Kit's own heading rules, which are emitted at .elementor-kit-N h2 weight. */ .elementor-element.elementor-widget-heading h1.elementor-heading-title { font-size: clamp(34px, 5vw, 56px); } .elementor-element.elementor-widget-heading h2.elementor-heading-title { font-size: clamp(28px, 4vw, 42px); } .elementor-element.elementor-widget-heading h3.elementor-heading-title { font-size: 22px; } .elementor-element.elementor-widget-heading h4.elementor-heading-title { font-size: 17px; } .elementor-element.elementor-widget-heading h5.elementor-heading-title { font-size: 15px; } /* ------------------------------------------------------------- eyebrow -- .eyebrow { Dancing Script 28px, green } */ .elementor-element.awps-eyebrow .elementor-heading-title { font-family: "Dancing Script", cursive; font-size: 28px; font-weight: 600; /* The source gives `.eyebrow` no line-height, so it inherits the body's 1.75 — 49px on a 28px script face. Elementor's 1.2 crops the ascenders and takes 15px out of every eyebrow block. This file loads last, so the value has to be right here: awps.css setting it earlier is silently overridden. */ line-height: 1.75; color: var(--awps-green, #3FA535); } /* The title is an inline-flex box 49px tall. If the widget keeps a line-height of its own, that strut is added to it on the baseline and the eyebrow comes out 57px; zeroing it lets the box alone set the height, and `vertical-align: top` keeps the descender space out of it. The result is the 49px the source's occupies. */ .elementor-element.awps-eyebrow { line-height: 0; } .elementor-element.awps-eyebrow .elementor-heading-title { vertical-align: top; } /* -------------------------------------------------------------- buttons -- .btn { Manrope 700 15px } .whatsapp-btn { Manrope 700 14px } */ .elementor-element .elementor-button, .elementor-element .elementor-button .elementor-button-text, body .elementor-button { font-family: "Manrope", sans-serif; font-weight: 700; font-size: 15px; } /* --------------------------------------------------------------- header -- nav.mainnav > li > a { Manrope 700 15px } topbar { 13.5px } */ body .elementor-nav-menu .elementor-item { font-family: "Manrope", sans-serif; font-weight: 700; font-size: 15px; } body .elementor-nav-menu--dropdown .elementor-item { font-size: 14.5px; font-weight: 500; } .awps-topbar .elementor-icon-list-item { font-size: 13.5px; } /* ---------------------------------------------------------- page banner -- .page-banner h1 { clamp(34px, 5vw, 56px) } .crumbs { Manrope 600 } */ .elementor-element.awps-page-banner-title .elementor-heading-title, .awps-page-banner .elementor-heading-title, .elementor-element.elementor-widget-theme-post-title h1.elementor-heading-title { font-size: clamp(34px, 5vw, 56px); /* The source has no banner-specific line-height, so the H1 takes the global 1.25 for headings — 70px at the 56px cap. 1.15 was 5px short on every page banner. */ line-height: 1.25; } /* `.page-banner .crumbs` sets family, weight and colour only — the size is inherited from the body, so 16px, not the 15px this was pinned to. */ .awps-crumbs, .awps-crumbs p { font-family: "Manrope", sans-serif; font-weight: 600; font-size: 16px; } /* ------------------------------------------------------------ trip nav -- .trip-nav a { Manrope 700 14px } */ .elementor-element.awps-trip-nav .elementor-icon-list-item { font-family: "Manrope", sans-serif; font-weight: 700; font-size: 14px; } /* ------------------------------------------------------------ day cards -- .day-card h3 { 21px, deep } p { 15.5px/1.65, ink @ .87 } .d-tag { 12.5px } */ .awps-day-card .elementor-widget-heading h3.elementor-heading-title { font-size: 21px; color: var(--awps-deep, #14463C); } .awps-day-card .elementor-widget-text-editor, .awps-day-card .elementor-widget-text-editor p { font-size: 15.5px; line-height: 1.65; color: var(--awps-ink, #1E2B27); opacity: .87; } .elementor-element.awps-day-tag .elementor-heading-title { font-size: 12.5px; font-weight: 800; letter-spacing: .1em; } .elementor-element.awps-chips .elementor-icon-list-item { font-size: 13px; font-weight: 700; } /* ------------------------------------------------------------ stat band -- .stat-band .v { 27px deep } .k { 12px uppercase green } */ .awps-stat-band .elementor-widget-heading h3.elementor-heading-title { font-size: 27px; color: var(--awps-deep, #14463C); line-height: 1.1; } .awps-stat-band .elementor-widget-text-editor, .awps-stat-band .elementor-widget-text-editor p { font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: var(--awps-green, #3FA535); font-weight: 700; font-family: "Manrope", sans-serif; } /* ---------------------------------------------------------- quote panel -- .quote-panel h3 { 26px } p { 15.5px/1.65 #b9cfc2 } */ .awps-quote-panel .elementor-widget-heading h3.elementor-heading-title { font-size: 26px; color: #fff; } .awps-quote-panel .elementor-widget-text-editor, .awps-quote-panel .elementor-widget-text-editor p { font-size: 15.5px; line-height: 1.65; color: #b9cfc2; } /* ----------------------------------------------------------------- facts -- .fact h4 { 15px deep } p { 14px/1.55 ink @ .85 } */ .awps-fact .elementor-icon-box-title, .awps-fact .elementor-icon-box-title a { font-family: "Manrope", sans-serif; font-size: 15px; color: var(--awps-deep, #14463C); } .awps-fact .elementor-icon-box-description { font-size: 14px; line-height: 1.55; color: var(--awps-ink, #1E2B27); opacity: .85; } /* ------------------------------------------------------- feature (about) -- .feature-list h4 { 17px } p { 14.5px } */ .elementor-widget-icon-box .elementor-icon-box-title { font-size: 17px; } .elementor-widget-icon-box .elementor-icon-box-description { font-size: 14.5px; } /* ------------------------------------------------------------ checks/tags -- .checks li { 600 } .tags span { 13px 700 } */ .elementor-element.awps-list-check .elementor-icon-list-text, .elementor-element.awps-list-x .elementor-icon-list-text { font-weight: 600; color: var(--awps-ink, #1E2B27); font-size: 16px; } .elementor-widget-icon-list .elementor-icon-list-text { font-size: 16px; } .elementor-element.awps-tags .elementor-icon-list-item { font-size: 13px; font-weight: 700; } /* ------------------------------------------------------------- cards -- .trip-card h3 { 18.5px } .loc/.days { 13.5px } .dest-card h3 { 22px } .sub { 13.5px } .cat-card h3 { 18px } */ .awps-trip-card .elementor-widget-theme-post-title h3.elementor-heading-title { font-size: 18.5px; } .elementor-element.awps-card-loc .elementor-icon-list-text { font-size: 13.5px; } .elementor-element.awps-card-days .elementor-icon-list-text { font-size: 13.5px; font-weight: 700; } .elementor-element.awps-card-tag .elementor-heading-title { font-size: 12.5px; font-weight: 800; } .awps-dest-card .elementor-heading-title { font-size: 22px; } .awps-cat-card .elementor-heading-title { font-size: 18px; } .awps-cat-card .elementor-button { font-size: 13.5px; font-weight: 700; } /* --------------------------------------------------------------- stats -- .stats .num { 40px lime } .lbl { Manrope 700 14.5px } */ .awps-stats .elementor-counter-number-wrapper { font-family: "Manrope", sans-serif; font-size: 40px; font-weight: 800; line-height: 1.1; } .awps-stats .elementor-counter-title { font-family: "Manrope", sans-serif; font-weight: 700; font-size: 14.5px; } @media (max-width: 767px) { .awps-stats .elementor-counter-number-wrapper { font-size: 32px; } } /* -------------------------------------------------------- testimonials -- .stars { 15px } p.txt { 15px } h4 { 16px } small { 13px } .av { 19px } */ .elementor-element.awps-stars .elementor-heading-title { font-size: 15px; letter-spacing: 2px; } .awps-testi-text, .awps-testi-text p { font-size: 15px; } .elementor-element.awps-testi-name .elementor-heading-title { font-size: 16px; font-weight: 800; } .awps-testi-role, .awps-testi-role p { font-size: 13px; } .elementor-element.awps-avatar .elementor-heading-title { font-size: 19px; font-weight: 800; } /* -------------------------------------------------------------- bands -- .cta-band h2 { clamp(30px, 4.5vw, 48px) } .newsletter h2 { clamp(24px, 3vw, 34px) } */ .awps-cta-band .elementor-widget-heading h2.elementor-heading-title { font-size: clamp(30px, 4.5vw, 48px); } .awps-newsletter .elementor-widget-heading h2.elementor-heading-title { font-size: clamp(24px, 3vw, 34px); } .awps-hero .elementor-widget-heading h1.elementor-heading-title, .elementor-element.awps-hero-title .elementor-heading-title { font-size: clamp(38px, 6vw, 72px); /* .hero h1 inherits the global 1.25 heading line-height in the original. */ line-height: 1.25; } .elementor-element.awps-hero-script .elementor-heading-title { font-size: clamp(26px, 3.4vw, 40px); } .elementor-element.awps-hero-sub, .elementor-element.awps-hero-sub p { font-size: 17px; } /* ------------------------------------------------------------- footer -- footer.site-footer { 14.5px } footer h3 { Manrope } */ .awps-footer, .awps-footer .elementor-widget-text-editor, .awps-footer .elementor-widget-text-editor p, .awps-footer .elementor-icon-list-text, .awps-footer .elementor-nav-menu .elementor-item { font-size: 14.5px; } .awps-footer .elementor-widget-heading h3.elementor-heading-title { font-family: "Manrope", sans-serif; font-size: 18px; color: #fff; } /* ---------------------------------------------------------- type cards -- .type-card h3 { 22px } .count { 13px uppercase } p { 14.5px/1.6 } */ .awps-photo-card .elementor-widget-heading h3.elementor-heading-title { font-size: 22px; } .awps-photo-card .elementor-widget-text-editor, .awps-photo-card .elementor-widget-text-editor p { font-size: 14.5px; line-height: 1.6; } /* --------------------------------------------------------- legal pages -- The Privacy / Terms prose keeps the body scale with tighter headings. */ .awps-legal-meta { font-size: 14px; opacity: .75; } /* ------------------------------------------------- scoped size overrides -- These sit after the generic heading scale so component-specific sizes win. */ .awps-day-card .elementor-element.elementor-widget-heading h3.elementor-heading-title { font-size: 21px; } .awps-stat-band .elementor-element.elementor-widget-heading h3.elementor-heading-title { font-size: 27px; } .awps-quote-panel .elementor-element.elementor-widget-heading h3.elementor-heading-title { font-size: 26px; } .awps-trip-card .elementor-element.elementor-widget-theme-post-title h3.elementor-heading-title { font-size: 18.5px; } .awps-dest-card .elementor-element.elementor-widget-theme-post-title h3.elementor-heading-title { font-size: 22px; } .awps-cat-card .elementor-element.elementor-widget-heading h3.elementor-heading-title { font-size: 18px; } .awps-photo-card .elementor-element.elementor-widget-heading h3.elementor-heading-title { font-size: 22px; } .awps-footer .elementor-element.elementor-widget-heading h3.elementor-heading-title { font-size: 18px; } .elementor-element.awps-testi-name .elementor-heading-title { font-size: 16px; } .elementor-element.awps-day-tag .elementor-heading-title { font-size: 12.5px; } .elementor-element.awps-card-tag .elementor-heading-title { font-size: 12.5px; } .elementor-element.awps-avatar .elementor-heading-title { font-size: 19px; } .elementor-element.awps-stars .elementor-heading-title { font-size: 15px; } .elementor-element.awps-hero-script .elementor-heading-title { font-size: clamp(26px, 3.4vw, 40px); } .elementor-element.awps-hero-title .elementor-heading-title { font-size: clamp(38px, 6vw, 72px); } .awps-cta-band .elementor-element.elementor-widget-heading h2.elementor-heading-title { font-size: clamp(30px, 4.5vw, 48px); } .awps-newsletter .elementor-element.elementor-widget-heading h2.elementor-heading-title { font-size: clamp(24px, 3vw, 34px); } .awps-fact .elementor-icon-box-title { font-size: 15px; } .awps-fact .elementor-icon-box-description { font-size: 14px; line-height: 1.55; } /* ============================================================================ FINAL OVERRIDES These repeat a handful of component sizes at the end of the cascade. The generic rules earlier in this file (the 16px icon-list default, the 17px h4, the 16px text-editor) are broad on purpose, and a few components need to sit underneath them. Ordering last is what settles it. ========================================================================== */ /* Trip card meta: .trip-card .loc / .days { 13.5px } Elementor ships its own `.elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text` rule at 0,3,0 and prints it inline (so, last). Matching its child combinator lifts these to 0,4,0, which is what it takes to win. */ .elementor-element.awps-card-loc .elementor-icon-list-item, .elementor-element.awps-card-loc .elementor-icon-list-item > .elementor-icon-list-text, .elementor-element.awps-card-days .elementor-icon-list-item, .elementor-element.awps-card-days .elementor-icon-list-item > .elementor-icon-list-text { font-size: 13.5px; } .elementor-element.awps-card-days .elementor-icon-list-item > .elementor-icon-list-text { font-weight: 700; } /* Itinerary chips and wildlife tags: 13px / 700 */ .elementor-element.awps-chips .elementor-icon-list-item, .elementor-element.awps-chips .elementor-icon-list-item > .elementor-icon-list-text, .elementor-element.awps-tags .elementor-icon-list-item, .elementor-element.awps-tags .elementor-icon-list-item > .elementor-icon-list-text { font-size: 13px; font-weight: 700; } /* Includes / excludes lists keep the body scale. */ .elementor-element.awps-list-check .elementor-icon-list-item > .elementor-icon-list-text, .elementor-element.awps-list-x .elementor-icon-list-item > .elementor-icon-list-text { font-size: 16px; font-weight: 600; } /* Testimonial card: .txt 15px, h4 16px, small 13px */ .awps-testi-card .elementor-element.awps-testi-text, .awps-testi-card .elementor-element.awps-testi-text p { font-size: 15px; line-height: 1.75; } .awps-testi-card .elementor-element.awps-testi-name .elementor-heading-title { font-size: 16px; } .awps-testi-card .elementor-element.awps-testi-role, .awps-testi-card .elementor-element.awps-testi-role p { font-size: 13px; } /* Destination card caption: .sub 13.5px */ .awps-dest-card .elementor-element.awps-dest-sub, .awps-dest-card .elementor-element.awps-dest-sub p { font-size: 13.5px; } /* Buttons are Manrope everywhere (.btn uses --font-title in the original). Elementor emits per-element button typography at .elementor-N .elementor-element weight, so this needs !important to stay consistent across every button. */ .elementor-button, .elementor-button .elementor-button-text, .elementor-widget-button .elementor-button { font-family: "Manrope", sans-serif !important; font-weight: 700 !important; } /* Hero copy */ .elementor-element.awps-hero-sub, .elementor-element.awps-hero-sub p { font-size: 17px; color: #e8f1ea; } /* ============================================================================ PARITY FIXES — from a side-by-side probe against the live site. Each rule below closes one measured difference; nothing here is a redesign. ========================================================================== */ /* [1] Section titles render ink in the original, not the link green that was leaking in from a higher-specificity rule. h1–h4 pinned to match: h1/h2 #1E2B27, h3/h4 #14463C. */ .elementor-widget-heading h1.elementor-heading-title, .elementor-widget-heading h2.elementor-heading-title, .elementor-element .elementor-widget-container > h1.elementor-heading-title, .elementor-element .elementor-widget-container > h2.elementor-heading-title { color: var(--awps-ink, #1E2B27); } .elementor-widget-heading h3.elementor-heading-title, .elementor-widget-heading h4.elementor-heading-title { color: var(--awps-deep, #14463C); } /* Headings that are deliberately white on a dark band keep their own colour. The `.elementor-widget` step is load-bearing, not decoration: without it these selectors are (0,2,0) and lose to the `h3.elementor-heading-title` rule above at (0,2,1), which turned every H3 on a dark band deep teal — destination card titles over their photo gradient, quote panels, photo captions. */ .awps-cta-band .elementor-widget .elementor-heading-title, .awps-newsletter .elementor-widget .elementor-heading-title, .awps-hero .elementor-widget .elementor-heading-title, .awps-page-banner .elementor-widget .elementor-heading-title, .awps-dest-overlay .elementor-widget .elementor-heading-title, .awps-quote-panel .elementor-widget .elementor-heading-title, .awps-footer .elementor-widget .elementor-heading-title, .awps-photo-cap .elementor-widget .elementor-heading-title, .awps-duo-tag .elementor-widget .elementor-heading-title, .awps-about-badge .elementor-widget .elementor-heading-title, .elementor-widget-theme-post-title h1.elementor-heading-title { color: #fff; } .awps-trip-card .elementor-widget-theme-post-title h3.elementor-heading-title { color: var(--awps-deep, #14463C); } /* [2] .eyebrow inherits the default 400 weight in the original. */ .elementor-element.awps-eyebrow .elementor-heading-title { font-weight: 400; } /* [3] .hero h1 uses the global 1.25 heading line-height, not a tighter one. */ .elementor-element.awps-hero-title .elementor-heading-title { line-height: 1.25; } /* [4] .topbar { font-size: 13.5px } applies to the text node itself. */ .awps-topbar .elementor-icon-list-item > .elementor-icon-list-text, .awps-topbar .elementor-icon-list-item > a > .elementor-icon-list-text { font-size: 13.5px !important; } /* [5] footer.site-footer { font-size: 14.5px } reaches the links too. */ .awps-footer .elementor-icon-list-item > a, .awps-footer .elementor-icon-list-item > a > .elementor-icon-list-text, .awps-footer .elementor-icon-list-item > .elementor-icon-list-text { font-size: 14.5px !important; } .awps-footer-bottom .elementor-icon-list-item > a, .awps-footer-bottom .elementor-icon-list-item > a > .elementor-icon-list-text { font-size: 13.5px !important; } /* [6] .trip-card .loc { color: var(--body) } */ .elementor-element.awps-card-loc .elementor-icon-list-item > .elementor-icon-list-text { color: var(--awps-body, #5E6D67); } /* ============================================================================ CONTENT WIDTHS — the source constrains two things that Elementor lets run to the full 1200px content width: .section-head { max-width: 640px; margin-bottom: 48px } .section-head.center { margin-inline: auto; text-align: center } the FAQ list { max-width: 820px; margin-inline: auto } (inline style) .legal { max-width: 820px; margin: 0 auto } Without the FAQ cap, `justify-content: space-between` throws the "+" glyph to the far right of a 1200px row instead of sitting beside the question. ========================================================================== */ /* Elementor puts `max-width: 100%` on every widget, so these caps need both the !important and an explicit width — without the width the widget shrinks to its content instead of filling up to the cap. */ .elementor-element.elementor-widget.awps-section-head { max-width: 640px !important; width: 100%; } .elementor-element.elementor-widget.awps-section-head--center { margin-inline: auto !important; text-align: center; } .elementor-element.elementor-widget.awps-narrow, .elementor-element.elementor-widget.awps-legal-flow { max-width: 820px !important; width: 100%; margin-inline: auto !important; }