/** * Theme Name: Tangerine * Theme URI: https://github.com/mominadil/Tangerine * Description: Child theme of Hello Elementor for Tangerine Mortgages. Design * tokens (colours, type, buttons) live in assets/css/tokens.css. * Author: Adil Momin * Template: hello-elementor * Version: 1.1.0 * Requires PHP: 7.4 * Text Domain: tangerine * License: GNU General Public License v2 or later * License URI: https://www.gnu.org/licenses/gpl-2.0.html */ /* * Tokens are loaded as a separate stylesheet by functions.php, not @imported * here — an @import blocks rendering until it resolves, and it would also be * invisible to Elementor's CSS handling. * * Reference tokens, never raw hex values, so a design change stays a one-line * edit in tokens.css. */ /* ─── Base ─────────────────────────────────────────────────────────────── */ body { font-family: var(--tg-font-body); font-size: calc(var(--tg-text-md) + 1px); line-height: var(--tg-leading-relaxed); color: var(--tg-color-text); background-color: var(--tg-color-surface); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: var(--tg-font-heading); color: var(--tg-color-heading); font-weight: var(--tg-weight-bold); } h1 { font-size: var(--tg-text-hero); font-weight: var(--tg-weight-black); line-height: var(--tg-leading-hero); letter-spacing: var(--tg-tracking-display); color: var(--tg-color-heading-hi); } h2 { font-size: var(--tg-text-h2); line-height: var(--tg-leading-h2); letter-spacing: var(--tg-tracking-display); } h3 { font-size: var(--tg-text-h3); line-height: var(--tg-leading-tight); letter-spacing: var(--tg-tracking-display); } h4 { font-size: var(--tg-text-stat); line-height: var(--tg-leading-tight); letter-spacing: var(--tg-tracking-display); } h5 { font-size: var(--tg-text-lg); line-height: var(--tg-leading-normal); } h6 { font-size: var(--tg-text-md); line-height: var(--tg-leading-snug); } a { color: var(--tg-color-primary); text-decoration: none; } a:hover, a:focus-visible { color: var(--tg-color-primary-hi); text-decoration: underline; } hr, .tg-divider { height: 1px; border: 0; background: var(--tg-color-border); } /* Never remove the focus ring outright — keyboard users lose all orientation. Restyle it instead. */ :focus-visible { outline: 2px solid var(--tg-color-focus); outline-offset: 2px; } ::selection { background: var(--tg-color-primary); color: var(--tg-color-on-primary); } /* ─── Layout ───────────────────────────────────────────────────────────── */ .tg-section { padding: var(--tg-section-py) var(--tg-gutter); background: var(--tg-color-surface); } .tg-section--lg { padding-block: var(--tg-section-py-lg); } .tg-container { width: 100%; max-width: var(--tg-container-max); margin-inline: auto; } /* ─── Eyebrow ────────────────────────────────────────────────────────────── * The small chevron + tracked caption + gold rule above each section heading. */ /* 9px is what 8 of the homepage's 9 eyebrows use; the Independent section is the lone 12px outlier and overrides this below. */ .tg-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: calc(var(--tg-text-2xs) + 1px); font-weight: var(--tg-weight-semibold); letter-spacing: var(--tg-tracking-eyebrow); text-transform: uppercase; color: var(--tg-color-text); } .tg-eyebrow__rule { display: block; width: 64px; height: 2px; background: var(--tg-gradient-rule); border: 0; } /* ─── Buttons ────────────────────────────────────────────────────────────── * Pill, 48px tall, gradient fill, with a 32px circular icon inset on the right. * The padding is asymmetric because of that icon: 24px leading, 8px trailing. * * Scoped to Elementor and block button classes too, so a button dropped into * the editor picks this up without extra work. */ .tg-btn, .elementor-button, .wp-block-button__link, button, input[type="submit"] { display: inline-flex; align-items: center; justify-content: center; gap: var(--tg-btn-gap); min-height: var(--tg-btn-height); padding: var(--tg-btn-padding-y) var(--tg-btn-padding-end) var(--tg-btn-padding-y) var(--tg-btn-padding-x); border: 0; border-radius: var(--tg-btn-radius); font-family: var(--tg-font-body); font-size: var(--tg-btn-font-size); font-weight: var(--tg-btn-font-weight); line-height: var(--tg-leading-none); letter-spacing: var(--tg-btn-tracking); text-transform: uppercase; text-decoration: none; cursor: pointer; transition: filter .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease; } .tg-btn:hover, .elementor-button:hover, .wp-block-button__link:hover { text-decoration: none; } /* Primary — gradient pill */ .tg-btn--primary, .elementor-button, .wp-block-button__link, input[type="submit"] { background: var(--tg-gradient-primary); color: var(--tg-color-on-primary); } /* The gradient can't be transitioned, so hover brightens the whole fill instead of cross-fading to a second gradient. */ .tg-btn--primary:hover, .elementor-button:hover, .wp-block-button__link:hover, input[type="submit"]:hover { filter: brightness(1.08); color: var(--tg-color-on-primary); } /* Secondary — outlined, used beside the primary in the calculator */ .tg-btn--secondary { background: transparent; border: var(--tg-btn-border-width) solid var(--tg-color-border-outline); color: var(--tg-color-on-outline); text-transform: none; font-family: var(--tg-font-ui); font-size: var(--tg-text-sm); font-weight: var(--tg-weight-medium); letter-spacing: var(--tg-tracking-normal); } .tg-btn--secondary:hover { border-color: var(--tg-color-primary); color: var(--tg-color-heading); } /* Flat — the Final CTA's button. The design paints this one with the file's named "Orange" variable (#FE7934) rather than the button gradient every other CTA uses; see tokens.css on why the two oranges differ. */ .tg-btn--flat, .tg-btn--flat:hover { background: var(--tg-color-primary-alt); color: var(--tg-color-heading); } /* Gold — the active state of the Fixed/Variable toggle */ .tg-btn--gold { min-height: auto; padding: var(--tg-space-3) var(--tg-space-7); background: var(--tg-gradient-gold); border-radius: var(--tg-radius-full); color: var(--tg-color-on-secondary); text-transform: none; letter-spacing: var(--tg-tracking-normal); } /* The circular icon badge inset at the trailing edge of a button. */ .tg-btn__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: var(--tg-btn-icon-size); height: var(--tg-btn-icon-size); border-radius: var(--tg-radius-full); background: #fff; color: #000; } /* 24px glyph inside the 32px badge, matching the design's own icon/badge ratio. */ .tg-btn__icon svg { display: block; width: 24px; height: 24px; } /* Disabled applies to every variant. */ .tg-btn[disabled], .elementor-button[disabled], button[disabled], input[type="submit"][disabled] { opacity: .55; cursor: not-allowed; filter: none; } /* ─── Cards ────────────────────────────────────────────────────────────── */ .tg-card { padding: var(--tg-space-10); background: var(--tg-color-surface-alt); border: 1px solid var(--tg-color-border-card); border-radius: var(--tg-radius-md); } .tg-card--raised { background: var(--tg-color-surface-raised); } /* ─── Logo ─────────────────────────────────────────────────────────────── */ .tg-logo, .site-header .custom-logo-link img { display: block; width: auto; height: var(--tg-logo-height); } @media (max-width: 767px) { .tg-logo, .site-header .custom-logo-link img { height: var(--tg-logo-height-mobile); } } /* .tg-logo also lands on Elementor's Site Logo widget wrapper, not the itself, so the height rule targets the descendant image directly. flex:none + max-width:none: inside the header's flex row the wrapper was allowed to shrink and the img capped at 100% of it, squeezing the 71x53 mark to 66x53. */ .tg-logo { flex: 0 0 auto; } .tg-logo img { display: block; height: var(--tg-logo-height); width: auto; max-width: none; } /* ─── Site header (Elementor Header template) ───────────────────────────── * Fixed over the page rather than pushing content down, so the bar sits * transparently on the hero photo the way the Figma frame draws it. * * It only stays transparent at the very top. Once the page scrolls, content * would otherwise track visibly behind the logo and the MENU label — there is * nothing between them and the section underneath — so the bar picks up the * page's own surface colour. assets/js/header.js adds .is-scrolled; the * colour deliberately matches --tg-color-surface rather than contrasting with * it, so the bar reads as the page continuing rather than as a separate strip. */ .tg-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background-color: transparent; transition: background-color .3s ease, padding .3s ease; } .tg-header.is-scrolled { background-color: var(--tg-color-surface); } /* Client review 16 Oct: the header carries the footer's colour logo, which is bigger than the white mark so its TANGERINE MORTGAGES wordmark stays legible (68px fits the bar's existing content height, so nothing below moves). At the top of the page the bar is still transparent, so a soft dark gradient sits behind it to keep the gold wordmark off the bright hero photos (Figma "Client review · 16 Oct", Fix A). Once scrolled the bar is solid and the gradient fades out. */ .tg-header .tg-logo img { height: 68px; } .tg-header::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 240px; background: linear-gradient(180deg, rgba(10, 9, 8, .85) 0%, rgba(10, 9, 8, .5) 45%, rgba(10, 9, 8, 0) 100%); pointer-events: none; z-index: -1; transition: opacity .3s ease; } .tg-header.is-scrolled::before { opacity: 0; } /* Client review 16 Oct: hover state for the service pages' rate columns ("This month's rate ranges", section 0d2005d; the five service pages share its element ids). The hovered column takes the first column's featured look (orange label, the slanted orange blade under the figure) and lifts slightly; the others step back. The blade is the first column's own 26632a8 shape: 64x7, sitting on the figure's bottom edge. Mouse only, so a tap on a phone doesn't leave a column stuck dimmed. */ .elementor-element-0d2005d .elementor-element-1c6e960 > .e-con { transition: opacity .3s ease, transform .3s ease; } .elementor-element-0d2005d .elementor-element-1c6e960 .elementor-widget-heading .elementor-heading-title { transition: color .3s ease; } /* Label = a column's first heading, figure = the heading right after it. (Not "the heading with the from/up to prefix": Commercial's "3 ways" has none.) */ .elementor-element-0d2005d .elementor-element-1c6e960 > .e-con:not(:first-child) .elementor-widget-heading:first-child + .elementor-widget-heading { position: relative; } .elementor-element-0d2005d .elementor-element-1c6e960 > .e-con:not(:first-child) .elementor-widget-heading:first-child + .elementor-widget-heading::after { content: ""; position: absolute; top: 100%; left: 0; width: 64px; height: 7px; background: linear-gradient(90deg, #EF8630 0%, #DE4807 100%); clip-path: polygon(0 0, 83.33% 0, 100% 100%, 0 100%); transform: scaleX(0); transform-origin: left center; transition: transform .35s ease; } @media (hover: hover) { .elementor-element-0d2005d .elementor-element-1c6e960:has(> .e-con:hover) > .e-con:not(:hover) { opacity: .45; } .elementor-element-0d2005d .elementor-element-1c6e960 > .e-con:hover { transform: translateY(-4px); } .elementor-element-0d2005d .elementor-element-1c6e960 > .e-con:hover .elementor-widget-heading:first-child .elementor-heading-title { color: #FF5A1E; } .elementor-element-0d2005d .elementor-element-1c6e960 > .e-con:not(:first-child):hover .elementor-widget-heading:first-child + .elementor-widget-heading::after { transform: scaleX(1); } } /* Client review 16 Oct: floating WhatsApp button, bottom right on every page (functions.php, tangerine_whatsapp_float). WhatsApp green with the white mark; on a mouse, hovering slides a "Chat on WhatsApp" label out to its left. z-index 40 keeps it over the page but under the calculator's sheets (50), the fixed header (100), Elementor popups and the off-canvas menu. */ .tg-wa-float { position: fixed; right: 24px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 40; display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; background: #25D366; box-shadow: 0 10px 28px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .08) inset; color: #fff; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; } .tg-wa-float svg { width: 30px; height: 30px; } .tg-wa-float:hover, .tg-wa-float:focus { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0, 0, 0, .4), 0 0 0 1px rgba(255, 255, 255, .12) inset; } .tg-wa-float:focus-visible { outline: 2px solid #FF5A1E; outline-offset: 3px; } .tg-wa-float__label { position: absolute; right: calc(100% + 12px); top: 50%; padding: 9px 14px; border-radius: 100px; background: #12100E; border: 1px solid rgba(255, 255, 255, .1); font: 600 15px/1 "Hanken Grotesk", sans-serif; letter-spacing: .02em; white-space: nowrap; color: #F5F2ED; opacity: 0; pointer-events: none; transform: translate(6px, -50%); transition: opacity .2s ease, transform .2s ease; } @media (hover: hover) { .tg-wa-float:hover .tg-wa-float__label, .tg-wa-float:focus-visible .tg-wa-float__label { opacity: 1; transform: translate(0, -50%); } } @media (max-width: 767px) { .tg-wa-float { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: 54px; height: 54px; } .tg-wa-float svg { width: 28px; height: 28px; } } @media print { .tg-wa-float { display: none; } } @media (max-width: 767px) { .tg-header .tg-logo img { height: 52px; } .tg-header::before { height: 180px; } } /* Fixed header removes the bar from flow; without this every page's first section starts underneath it. */ body { padding-top: calc(var(--tg-header-py) * 2 + var(--tg-logo-height)); } .tg-menu-trigger { display: inline-flex; align-items: center; gap: var(--tg-space-3); cursor: pointer; } /* Hamburger bars are two empty Containers, not an SVG or icon widget — see scripts/build-header.php for why. Sized here instead of via Elementor's own width/height controls, which weren't worth the schema risk for two divs. */ .tg-menu-trigger__bars { display: inline-flex; flex-direction: column; justify-content: space-between; width: 20px; height: 8px; } .tg-menu-trigger__bar { display: block; height: 2px; width: 100%; background: var(--tg-color-heading-hi); border-radius: 1px; } .tg-menu-trigger__label { font-size: var(--tg-text-sm); font-weight: var(--tg-weight-semibold); letter-spacing: var(--tg-tracking-menu); color: var(--tg-color-heading-hi); } /* The Off-Canvas widget sits in normal document flow until Elementor's own frontend JS opens it; this only fixes it in place and gives it the highest stacking context so it covers the fixed header too. */ .tg-off-canvas { position: fixed; inset: 0; z-index: 200; } /* Elementor's heading/text-editor widgets render real h1-h6/p tags, which carry browser default margins. Harmless in body copy, but it breaks the tight, hand-tuned spacing everywhere these widgets are reused as UI labels (button text, numbers, nav items) rather than prose. Reset broadly, scoped to Elementor's own wrapper classes so normal page content is unaffected. */ .elementor-widget-heading .elementor-heading-title, .elementor-widget-text-editor p { margin: 0; } /* The global Kit paints every heading widget's inner title with the brand orange and the primary font weight: `.elementor-widget-heading .elementor-heading-title { color: …; font-weight: … }`. Two classes, which outranks both the h1-h6 rules at the top of this file (one element) and every .tg-* wrapper class (one class) — so without this, every heading widget on the site renders orange, and the hero headline drops from 800 to 700. The .tg-* class sits on the widget wrapper while the colour lands on the child it contains, which is why no wrapper rule can reach it. Restating the tag rules one notch more specific (0,2,1 beats 0,2,0) hands headings back to the design system. A span carries no tag rule of its own, so it instead takes colour and weight from whichever .tg-* wrapper holds it — that is what every UI label built from a heading widget relies on. */ .elementor-widget-heading h1.elementor-heading-title { color: var(--tg-color-heading-hi); font-weight: var(--tg-weight-black); } .elementor-widget-heading :is(h2, h3, h4, h5, h6).elementor-heading-title { color: var(--tg-color-heading); font-weight: var(--tg-weight-bold); } .elementor-widget-heading span.elementor-heading-title { color: inherit; font-weight: inherit; } /* ─── Mega menu ──────────────────────────────────────────────────────────── * Content built from scripts/build-off-canvas.php as native Elementor widgets * (container, heading, text-editor, image) — every text node, image, and link * here is editable from wp-admin's Elementor panel. Only the decorative * shapes (the eyebrow arrow, each row's hover chevron, the close X, the * preview's scrim) are empty Containers styled below, and the hover-swap * behaviour is assets/js/mega-menu.js — neither has a native Elementor * equivalent. * * Values below (colours, sizes, spacing) are extracted from the mega menu's * own Figma frame, which has its own precise numbers distinct from the rest * of the site — the panel background, muted text colours, dividers, and both * headline sizes here are all specific to this canvas, not the sitewide * tokens. Several are hardcoded rather than pulled from tokens.css for that * reason: they're this canvas's own values, not reusable roles yet. */ /* Flex direction, alignment and gaps for the containers below come from their own Elementor settings (scripts/build-off-canvas.php, tangerine_flex()) and are deliberately not repeated here — Elementor's container defaults outrank a single-class rule, so a stylesheet copy would be either redundant or, worse, silently disagree. This file owns colour, type, borders and positioning; the build script owns layout. */ .tg-mega-menu { position: relative; width: 100vw; height: 100vh; background: #0A0908; font-family: var(--tg-font-body); } .tg-mega-menu__left { flex: 1 1 auto; padding: 30px 56px 67px 100px; /* Figma: address ends 67px above the bottom */ overflow-y: auto; } .tg-mega-menu__logo { display: inline-block; width: fit-content; /* Content column is indented 44px past the logo (100px vs the logo's own 56px) — pulled back rather than giving the column two different padding-lefts. */ margin-left: -44px; margin-bottom: 127px; } .tg-mega-menu__logo-img img { display: block; height: var(--tg-logo-height); width: auto; } /* Figma: 16px label, 8px gap, 64x2 gold rule, then straight into the first row's top border — 26px from the eyebrow's top to the list. */ .tg-mega-menu__eyebrow { position: relative; margin-bottom: 10px; } .tg-mega-menu__eyebrow::after { content: ""; position: absolute; left: 0; top: calc(100% + 8px); width: 64px; height: 2px; background: #B38842; } /* A small double-chevron, drawn with a clip-path rather than an SVG or icon widget — the polygon reproduces the Figma frame's own SVG path exactly, expressed in percentages so it holds at any element size. Its own color is set here (not inherited from .tg-mega-menu__eyebrow) because the Figma frame only paints the arrow orange — the "MORTGAGES" label beside it stays the row's normal muted grey (.tg-eyebrow's own color), so this can't cascade from a shared parent color. */ .tg-mega-menu__eyebrow-arrow { flex: 0 0 auto; width: 10px; height: 10px; color: var(--tg-color-primary); background: currentColor; clip-path: polygon(0 0, 30% 0, 100% 50%, 30% 100%, 0 100%, 70% 50%); } /* 520px is the services column's own width in the Figma frame — without it the rows stretch the full left column and the dividers run visibly too long. */ .tg-mega-menu__services { width: 100%; max-width: 520px; } .tg-mega-menu__service { padding-block: 18px; border-top: 1px solid rgb(255 255 255 / 7%); color: #8A8072; text-decoration: none; transition: color .18s ease; } .tg-mega-menu__service:last-child { border-bottom: 1px solid rgb(255 255 255 / 7%); } .tg-mega-menu__service-number { font-size: 13px; font-weight: var(--tg-weight-semibold); letter-spacing: 0.06em; color: #3A3733; min-width: 1.5em; transition: color .18s ease; } .tg-mega-menu__service-title { flex: 1 1 auto; font-size: 32px; font-weight: var(--tg-weight-bold); line-height: normal; /* 42px at 32px: the Figma rows are 18 + 42 + 18 = 78 */ letter-spacing: var(--tg-tracking-display); color: inherit; } .tg-mega-menu__service-chevron { flex: 0 0 auto; width: 13px; height: 13px; opacity: 0; background: var(--tg-color-primary); clip-path: polygon(0 0, 30% 0, 100% 50%, 30% 100%, 0 100%, 70% 50%); transition: opacity .18s ease; } .tg-mega-menu__service:hover, .tg-mega-menu__service:focus-visible, .tg-mega-menu__service.is-active { color: var(--tg-color-heading); } .tg-mega-menu__service:hover .tg-mega-menu__service-number, .tg-mega-menu__service:focus-visible .tg-mega-menu__service-number, .tg-mega-menu__service.is-active .tg-mega-menu__service-number { color: var(--tg-color-primary); } .tg-mega-menu__service:hover .tg-mega-menu__service-chevron, .tg-mega-menu__service:focus-visible .tg-mega-menu__service-chevron, .tg-mega-menu__service.is-active .tg-mega-menu__service-chevron { opacity: 1; } .tg-mega-menu__secondary { margin-top: 58px; /* Figma: list ends at 626, links at 684 */ } .tg-mega-menu__secondary a { color: var(--tg-color-text); font-size: calc(var(--tg-text-base) + 1px); font-weight: var(--tg-weight-medium); text-decoration: none; } .tg-mega-menu__secondary a:hover { color: var(--tg-color-heading-hi); } .tg-mega-menu__hint { margin-top: auto; padding-top: var(--tg-space-11); font-size: 15px; font-weight: var(--tg-weight-semibold); letter-spacing: var(--tg-tracking-wide); color: #4A453F; } .tg-mega-menu__contact { margin-top: 22px; /* Figma: hint 786, address 820 */ font-size: 15px; font-weight: var(--tg-weight-semibold); letter-spacing: var(--tg-tracking-eyebrow); color: #5C554B; } .tg-mega-menu__preview { position: relative; flex: 0 0 620px !important; /* Figma 2473:3520: x 820, 620 wide */ width: 620px !important; overflow: hidden; background-color: #1C1A18; } .tg-mega-menu__preview-img { position: absolute; inset: 0; } .tg-mega-menu__preview-img img { display: block; width: 100%; height: 100%; object-fit: cover; } .tg-mega-menu__preview-scrim { position: absolute; inset: 0; /* The design's scrim is a separate 420px block starting at the panel's 53% mark on a 900px-tall frame, not a full-height gradient — same visual result expressed as one gradient so it still holds at any viewport height. */ background: linear-gradient(180deg, rgb(10 9 8 / 0%) 0%, rgb(10 9 8 / 0%) 53%, rgb(10 9 8 / 95%) 100%); } .tg-mega-menu__preview-copy { position: absolute; left: var(--tg-space-13); right: var(--tg-space-13); bottom: var(--tg-space-13); z-index: 1; } .tg-mega-menu__preview-eyebrow { font-size: 12px; font-weight: var(--tg-weight-semibold); letter-spacing: var(--tg-tracking-wide); color: var(--tg-color-primary); } .tg-mega-menu__preview-heading { color: var(--tg-color-heading); font-size: var(--tg-text-h3); /* Stated here rather than left to the h3 tag rule: the widget's inner h3 now inherits its weight from this wrapper (see the heading rule above). */ font-weight: var(--tg-weight-bold); line-height: var(--tg-leading-tight); /* mega-menu.js sets a real newline into this element's textContent on hover-swap (two-line headings like the Expat service); this is what makes that newline actually break the line instead of collapsing to a space the way inline text normally would. */ /* white-space: pre-line; */ } .tg-mega-menu__preview-description { color: var(--tg-color-text-hero); font-size: calc(var(--tg-text-base) + 1px); line-height: var(--tg-leading-normal); max-width: 32em; } .tg-mega-menu__preview-cta { width: fit-content; font-size: 14px; letter-spacing: 0.05em; } /* Close button, top-right of the panel. Two crossing bars rather than a Unicode "×" character or an icon widget — matches the Figma frame's own X exactly (two straight strokes corner to corner). */ .tg-menu-close { position: absolute; top: 48px; right: var(--tg-space-13); z-index: 2; width: fit-content; color: var(--tg-color-heading-hi); cursor: pointer; } .tg-menu-close__icon { position: relative; flex: 0 0 auto; width: 18px; height: 18px; } .tg-menu-close__icon::before, .tg-menu-close__icon::after { content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 1.6px; background: currentColor; border-radius: 1px; } .tg-menu-close__icon::before { transform: rotate(45deg); } .tg-menu-close__icon::after { transform: rotate(-45deg); } .tg-menu-close__label { font-size: var(--tg-text-sm); font-weight: var(--tg-weight-semibold); letter-spacing: var(--tg-tracking-menu); } @media (max-width: 900px) { .tg-mega-menu { flex-direction: column; overflow-y: auto; } .tg-mega-menu__left { width: 100%; max-width: none; padding-left: 56px; } .tg-mega-menu__logo { margin-left: 0; } .tg-mega-menu__preview { flex: 0 0 auto; width: 100%; min-height: 360px; } } /* Client review (9 Oct) 4.1, 5.1, 6.2: the menu's small print and the preview card's label were too small and too faint to read. */ .tg-mega-menu__secondary a { font-size: 20px; color: #BDB5A8; } .tg-mega-menu__contact { font-size: 15px; color: #8A8177; } .tg-mega-menu__preview-eyebrow { font-size: 14px; font-weight: 700; color: #FF8A4C; text-shadow: 0 1px 8px rgb(0 0 0 / 60%); } .tg-mega-menu__preview-description { font-size: 17px; color: #E2DCD2; text-shadow: 0 1px 8px rgb(0 0 0 / 50%); } /* Phones — Figma 2473:7336 "Menu · Option B — Split preview / Mobile", 393x852: bar 64 (logo 48x36 at 20,14; CLOSE right), 32, MORTGAGES + five 58px rows with 7% hairlines, 32, the link row and address, 32, the 353x300 preview card. All of it fits one screen, so nothing here should scroll sideways. The 900px block above left the preview at the desktop's 620px (its flex and width are !important), which pushed the panel 227px wider than the phone and was most of the "glitchy" look; those are overridden here with !important for that reason. 100dvh, not 100vh: mobile browsers count the space behind their toolbar in vh, so the panel's bottom was cut off and jumped as the toolbar showed and hid. */ @media (max-width: 767px) { .tg-mega-menu { height: 100vh; height: 100dvh; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .tg-mega-menu__left { flex: 0 0 auto; padding: 14px 20px 0; overflow: visible; } .tg-mega-menu__logo { margin: 0 0 36px; /* + the column's own 10px gap = Figma's 46 */ } .tg-mega-menu__logo-img img { height: 36px; } .tg-menu-close { top: 23px; right: 20px; } .tg-mega-menu__eyebrow { margin-bottom: 0; } .tg-mega-menu__services { max-width: none; margin-top: 10px; } .tg-mega-menu__service { padding-block: 12px; } .tg-mega-menu__service-number { min-width: 29px; } .tg-mega-menu__service-title { font-size: 24px; line-height: 34px; letter-spacing: -0.52px; } .tg-mega-menu__secondary { flex-wrap: wrap; gap: 12px 34px !important; margin-top: 32px; } .tg-mega-menu__secondary a { font-size: 17px; line-height: 26px; color: #BDB5A8; } .tg-mega-menu__hint { display: none; } .tg-mega-menu__contact { margin-top: 12px; } .tg-mega-menu__preview { /* the panel is a wrapping row here, so a 300px basis would set the width */ flex: 0 0 auto !important; width: calc(100% - 40px) !important; height: 300px; min-height: 0; margin: 28px 20px 20px; border-radius: 16px; } .tg-mega-menu__preview-scrim { background: linear-gradient(180deg, rgb(0 0 0 / 0%) 25%, rgb(0 0 0 / 55%) 55%, rgb(0 0 0 / 90%) 100%); } .tg-mega-menu__preview-copy { left: 20px; right: 20px; bottom: 16px; width: auto !important; /* Elementor's container width otherwise ignores right */ } .tg-mega-menu__preview-heading { font-size: 18px; line-height: 1.18; letter-spacing: -0.4px; } .tg-mega-menu__preview-description { font-size: 16px; line-height: 1.5; color: #E2DCD2; } } /* ─── Motion ───────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ─── Homepage: Hero ─────────────────────────────────────────────────────── * Pulled up by the fixed header's own height so the header sits transparently * over the hero photo, exactly as the Figma frame draws it — every other * section instead starts below the header via body's padding-top; this is * the one section that needs to sit behind it. */ .tg-hero { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: var(--tg-hero-height); margin-top: calc(var(--tg-header-py) * -2 - var(--tg-logo-height)); /* 79px, not a scale step: the Figma frame puts the 245px copy block at y=500 in an 824px hero, which leaves exactly that much beneath it. */ padding: 30px 70px; overflow: hidden; } .tg-hero::after { content: ""; position: absolute; inset: 0; background: var(--tg-gradient-hero-scrim); pointer-events: none; } .tg-hero__copy { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--tg-space-7); max-width: 787px; } .tg-hero__headline { margin: 0; } .tg-hero__sub { display: flex; flex-direction: column; align-items: flex-start; gap: var(--tg-space-6); max-width: 485px; } .tg-hero__text { margin: 0; color: var(--tg-color-text-hero); font-size: calc(var(--tg-text-base) + 1px); line-height: var(--tg-leading-snug); } .tg-hero__cta { width: auto !important; padding: 8px 8px 8px 24px; } /* ─── Homepage: Independent ──────────────────────────────────────────────── * h3/paragraph colour, size, and line-height all come from the sitewide base * rules (h3, body) already in this file — they happen to match the design * exactly, so .tg-independent__title/__text carry no overrides beyond a * margin reset and a shared max-width on the copy column. */ .tg-independent { display: flex; flex-direction: column; gap: var(--tg-space-12); overflow: hidden; /* the glow bleeds past the section edge, like the Figma frame clips it */ } /* The one eyebrow in the design that isn't 9px — see .tg-eyebrow. */ .tg-independent .tg-eyebrow { gap: var(--tg-space-4); } .tg-independent__content { position: relative; display: flex; /* flex-wrap: wrap; */ justify-content: space-between; gap: var(--tg-space-15); } .tg-independent__copy { display: flex; flex-direction: column; gap: var(--tg-space-7); max-width: 580px; width: auto; } .tg-independent__title, .tg-independent__text { margin: 0; } .tg-independent__motif { position: relative; display: flex; flex-direction: column; gap: var(--tg-space-2); /* margin-top: -79px; */ } .tg-independent__glow { position: absolute; z-index: 0; top: -250px; right: -150px; width: 900px; height: 900px; background: var(--tg-gradient-glow); pointer-events: none; } .tg-independent__bars { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: 12px; } .tg-independent__lenders { display: flex; align-items: flex-end; gap: 31px; } .tg-independent__bar { display: block; } .tg-independent__chevron { display: block; align-self: center; /* margin-left: 60px; /* 72px total gap after the lender bars */ */ } /* ─── Independent: motion ────────────────────────────────────────────────── * The comparison row (container e5d3eca) animates as one chain, not as three * independent loops. A pulse crosses the four lender bars left to right, the * chevron flashes as the hand-off, then the "Your side" group lifts: * * THE LENDERS ▸▸▸▸ ⌄ hand-off ▸ YOUR SIDE * * That ordering is the whole point. The labels either side already read * "THE LENDERS" and "YOUR SIDE", so the motion states the same sentence — * every lender is scanned, then it comes to you. Three unsynchronised loops * would be decoration; one chain is an argument. * * Everything shares --tg-chain and differs only by animation-delay, so the * rhythm is retimed from a single value. Each element's keyframes are active * for roughly the first fifth of the cycle and idle for the rest; the delays * are what spread those active windows into a sequence. Raising --tg-chain * slows the whole chain without disturbing the order. * * Entrance and chain are deliberately on different elements — the rise scales * the widget div, the chain moves the inside it. One transform each, so * neither overwrites the other. Both on one element would mean the infinite * chain silently discarding the entrance transform. * * Only .tg-independent__lenders and .tg-independent__bar exist as classes * here: the chevron, the "You" bar and the Tangerine image carry none (see * the dead rules above this block), so they're addressed by Elementor id. * Those ids are stable in the database and change only if the widget is * deleted and rebuilt. * * The sitewide prefers-reduced-motion block above already caps every * animation-duration at .01ms, so none of this needs its own opt-out. */ .elementor-element-e5d3eca { --tg-chain: 4.2s; } /* Bars are flat #2A2825 against a dark surface, so brightness reads far more clearly than opacity. The lift is small on purpose: these are the lenders being compared, and they shouldn't out-compete the gold bar beside them. */ @keyframes tg-chain-lender { 0% { filter: brightness(1); transform: translateY(0); } 7% { filter: brightness(1.75); transform: translateY(-5px); } 17%, 100% { filter: brightness(1); transform: translateY(0); } } /* The chevron is the hinge between the two halves, so it leans the way it points — a small shove toward "your side" rather than a symmetric throb. */ @keyframes tg-chain-chevron { 0% { filter: brightness(1); transform: translateX(0) scale(1); } 8% { filter: brightness(1.4); transform: translateX(5px) scale(1.16); } 20%, 100% { filter: brightness(1); transform: translateX(0) scale(1); } } /* The payoff, so it travels furthest. Gold (#DFBE61 → #AD803D) already stands apart from the grey lenders; brightness is kept low so it warms rather than blows out. */ @keyframes tg-chain-you { 0% { filter: brightness(1); transform: translateY(0); } 9% { filter: brightness(1.18); transform: translateY(-9px); } 24%, 100% { filter: brightness(1); transform: translateY(0); } } .tg-independent__lenders .tg-independent__bar img, .elementor-element-29c9832 img, .elementor-element-0b4bac9 img { animation-duration: var(--tg-chain); animation-timing-function: ease-in-out; animation-iteration-count: infinite; will-change: filter, transform; } .tg-independent__lenders .tg-independent__bar img { animation-name: tg-chain-lender; } .elementor-element-29c9832 img { animation-name: tg-chain-chevron; } .elementor-element-0b4bac9 img { animation-name: tg-chain-you; } /* The sequence. .18s between lenders keeps the wave moving without the first bar resetting before the last has lifted; the wider gaps before the chevron and the gold bar are the beat that makes it read as a hand-off rather than a fifth and sixth bar in the same wave. The chain finishes around 1.7s, leaving the rest of the cycle still — it should register in peripheral vision, not demand attention while someone is reading the copy alongside. */ .tg-independent__lenders .tg-independent__bar:nth-child(1) img { animation-delay: 0s; } .tg-independent__lenders .tg-independent__bar:nth-child(2) img { animation-delay: .18s; } .tg-independent__lenders .tg-independent__bar:nth-child(3) img { animation-delay: .36s; } .tg-independent__lenders .tg-independent__bar:nth-child(4) img { animation-delay: .54s; } .elementor-element-29c9832 img { animation-delay: .76s; } .elementor-element-0b4bac9 img { animation-delay: .96s; } /* Bars grow out of the baseline, so the origin is the bottom edge — the row is already align-items: flex-end, which keeps them seated while scaling. */ @keyframes tg-bar-rise { from { transform: scaleY(.05); opacity: 0; } to { transform: scaleY(1); opacity: 1; } } @keyframes tg-you-rise { from { transform: translateY(28px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Scroll-driven, so it plays when the row is actually looked at rather than on load, where it would be missed entirely — this section sits well below the fold. Gated behind @supports because Firefox has no view() timeline yet: there the bars simply render in place, static and correct, instead of being stuck at opacity 0 waiting for a trigger that never fires. */ @supports (animation-timeline: view()) { .tg-independent__lenders .tg-independent__bar, .elementor-element-29c9832, .elementor-element-0b4bac9 { animation: tg-bar-rise .7s cubic-bezier(.16, .84, .44, 1) both; animation-timeline: view(); animation-range: entry 10% cover 28%; transform-origin: bottom center; } /* The chevron is the hinge between the two sides and the "You" bar is the payoff, so both arrive after all four lenders have risen. */ .elementor-element-29c9832, .elementor-element-0b4bac9 { animation-name: tg-you-rise; transform-origin: center; } .tg-independent__lenders .tg-independent__bar:nth-child(2) { animation-range: entry 13% cover 30%; } .tg-independent__lenders .tg-independent__bar:nth-child(3) { animation-range: entry 16% cover 32%; } .tg-independent__lenders .tg-independent__bar:nth-child(4) { animation-range: entry 19% cover 34%; } .elementor-element-29c9832 { animation-range: entry 22% cover 36%; } .elementor-element-0b4bac9 { animation-range: entry 25% cover 40%; } } /* .tg-independent__tangerine { position: relative; width: 39.375px; height: 157.5px; } */ .tg-independent__bar-first { position: absolute; top: 50%; left: 50%; width: auto !important; height: auto !important; transform: translate(230%, -60%); max-width: none; } .tg-independent__tangerine-img img { width: 39.375px; height: 157.5px; object-fit: none; background-color: #000; } .tg-independent__tangerine-img { position: absolute; top: 50%; left: 50%; width: 331.466px; height: 449.591px; transform: translate(-30%, -35%); max-width: none; /* the asset's own canvas is padded for its baked-in glow */ } .tg-independent__baseline { position: relative; z-index: 1; width: 555px; max-width: 100%; height: 1px; margin-top: var(--tg-space-6); background: var(--tg-color-border-solid); border: 0; } .tg-independent__labels { position: relative; z-index: 1; display: flex; justify-content: space-between; width: 555px; max-width: 100%; } .tg-independent__label { font-size: calc(var(--tg-text-xs) + 1px); font-weight: var(--tg-weight-semibold); letter-spacing: var(--tg-tracking-label); text-transform: uppercase; color: var(--tg-color-muted); } .tg-independent__label--you { color: var(--tg-color-text); } /* ─── Homepage: About ────────────────────────────────────────────────────── * h2 colour/size/line-height and the stat numbers' h4 styling both come from * the sitewide base rules and already match the design exactly. */ .tg-about { display: flex; flex-direction: column; gap: var(--tg-space-11); } .tg-about__row { display: flex; align-items: center; gap: var(--tg-space-14); } .tg-about__image { display: block; flex-shrink: 0; width: 560px; height: 620px; border-radius: var(--tg-radius-lg); object-fit: cover; } .tg-about__copy { display: flex; flex: 1 0 0; flex-direction: column; gap: var(--tg-space-9); min-width: 0; } .tg-about__title { margin: 0; max-width: 612px; } .tg-about__text { margin: 0; color: var(--tg-color-text); font-size: calc(var(--tg-text-lg) + 1px); line-height: var(--tg-leading-normal); } .tg-about__stats { display: flex; flex-direction: column; width: 100%; padding-top: var(--tg-space-1); } .tg-about__stats-rule { width: 100%; height: 1px; background: var(--tg-color-border); border: 0; } .tg-about__stats-row { display: flex; /* 40px doesn't land on a spacing step (falls between --tg-space-10/34 and --tg-space-11/44) — used literally rather than nudging a real measured value to the nearest token. */ gap: 40px; width: 100%; } .tg-about__stat { display: flex; flex: 1 0 0; flex-direction: column; gap: var(--tg-space-1); min-width: 0; padding-block: var(--tg-space-7); } .tg-about__stat-number { margin: 0; } .tg-about__stat-label { margin: 0; color: var(--tg-color-text); font-size: calc(var(--tg-text-sm) + 1px); font-weight: var(--tg-weight-medium); } /* ─── Homepage: Calculator ───────────────────────────────────────────────── * Layout/typography for the intro copy only — the interactive Controls+ * Results body's styling lives with its own markup in * assets/partials/calculator-content.php, see that file for why. */ .tg-calculator { display: flex; flex-direction: column; align-items: center; gap: 50px; /* not on the spacing scale (between --tg-space-12/48 and --tg-space-13/56) */ } .tg-calculator__intro { display: flex; flex-direction: column; align-items: center; gap: var(--tg-space-6); max-width: 720px; text-align: center; } .tg-calculator__title { margin: 0; } .tg-calculator__subtitle { margin: 0; color: var(--tg-color-text); font-size: calc(var(--tg-text-lg) + 1px); line-height: var(--tg-leading-normal); } /* ─── Homepage: Why Us ───────────────────────────────────────────────────── * h2/h5 size, weight, colour, and line-height come from the sitewide base * rules; feature titles only need a font-weight override down to semibold * (h5's base rule is bold). */ .tg-why { display: flex; flex-direction: column; align-items: center; gap: var(--tg-space-13); } .tg-why__intro { display: flex; flex-direction: column; align-items: center; gap: var(--tg-space-6); max-width: 680px; text-align: center; } .tg-why__title { margin: 0; } .tg-why__subtitle { margin: 0; max-width: 424px; color: var(--tg-color-text-alt); font-size: calc(var(--tg-text-md) + 1px); line-height: var(--tg-leading-snug); } .tg-why__row { display: flex; align-items: center; width: 100%; gap: var(--tg-space-12); } .tg-why__feats { display: flex; flex: 1 0 0; flex-direction: column; gap: var(--tg-space-11); min-width: 0; } .tg-why__feature { display: flex; flex-direction: column; align-items: center; gap: var(--tg-space-5); max-width: 260px; margin-inline: auto; text-align: center; } .tg-why__icon { display: flex; align-items: center; justify-content: center; padding: 13px; /* not on the spacing scale (between --tg-space-4/12 and --tg-space-5/14) */ background: linear-gradient(180deg, var(--tg-color-surface-alt), #000); border: 1px solid var(--tg-color-secondary-edge); border-radius: var(--tg-radius-pill); box-shadow: var(--tg-shadow-faint), var(--tg-shadow-inset); } .tg-why__icon svg { display: block; width: 24px; height: 24px; } .tg-why__feature-title { margin: 0; font-weight: var(--tg-weight-semibold); } .tg-why__feature-desc { margin: 0; color: var(--tg-color-text-alt); font-size: calc(var(--tg-text-xs) + 1px); line-height: var(--tg-leading-snug); } .tg-why__center-image { display: block; flex-shrink: 0; width: 360px; height: 480px; border-radius: 14px; /* not on the radius scale (between --tg-radius-sm/3 and --tg-radius-md/16... closer to md, but distinct) */ object-fit: cover; } @media (max-width: 1100px) { .tg-why__row { flex-wrap: wrap; justify-content: center; } } /* ─── Homepage: How It Works ─────────────────────────────────────────────── * Four fixed-width cards on a horizontal scroller. The Figma frame lays the * row out wider than the section itself so the fourth card is clipped at the * right edge — kept as a real overflow-x scroller rather than shrunk to fit, * since the 400px card width is a fixed value in the design. */ .tg-steps { display: flex; flex-direction: column; align-items: flex-start; gap: 52px; /* not on the spacing scale (between --tg-space-12/48 and --tg-space-13/56) */ } .tg-steps__intro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--tg-space-5); max-width: 680px; } .tg-steps__title { margin: 0; } .tg-steps__subtitle { margin: 0; color: var(--tg-color-text); font-size: calc(var(--tg-text-lg) + 1px); line-height: var(--tg-leading-normal); } /* Full-bleed to the section's right edge: the design runs the track past the 56px gutter so the clipped fourth card reads as "there is more", which a track stopping at the gutter would lose. */ .tg-steps__scroll { width: calc(100% + var(--tg-gutter)); margin-right: calc(var(--tg-gutter) * -1); overflow-x: auto; overflow-y: clip; } .tg-steps__track { display: flex; align-items: flex-start; gap: var(--tg-space-6); width: max-content; padding-right: var(--tg-gutter); } .tg-steps__card { display: flex; flex-direction: column; align-items: flex-start; flex-shrink: 0; width: 400px; height: 520px; overflow: hidden; border-radius: var(--tg-radius-md); background: var(--tg-color-surface-card); } .tg-steps__card-img, .tg-steps__card-img img { display: block; width: 100%; height: 300px; object-fit: cover; } /* Fills the card's remaining height, with the copy optically centred in it — the cards' descriptions run to different line counts. */ .tg-steps__card-body { display: flex; flex: 1 0 0; flex-direction: column; justify-content: center; gap: var(--tg-space-2); min-height: 0; width: 100%; padding: 26px; /* not on the spacing scale (between --tg-space-9/26... exact) */ } .tg-steps__card-step { color: var(--tg-color-primary); font-size: var(--tg-text-2xs); font-weight: var(--tg-weight-semibold); letter-spacing: var(--tg-tracking-label); } .tg-steps__card-title { color: var(--tg-color-heading); font-size: 21px; font-weight: var(--tg-weight-semibold); /* -0.21/21 = -0.01em: half the display tracking the h1-h6 rules use. */ letter-spacing: -0.01em; } .tg-steps__card-desc { margin: 0; color: var(--tg-color-text-card); font-size: calc(var(--tg-text-sm) + 1px); line-height: var(--tg-leading-snug); } /* ─── Homepage: Services ─────────────────────────────────────────────────── * Five photo cards over two rows — one wide + one narrow at 420px, then three * equal at 340px. Widths are ratios rather than Figma's literal pixels; see * scripts/sections/section-services.php for why. */ .tg-svc { display: flex; flex-direction: column; align-items: flex-start; gap: var(--tg-space-11); } .tg-svc__intro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--tg-space-5); max-width: 720px; } .tg-svc__title { margin: 0; } .tg-svc__subtitle { margin: 0; color: var(--tg-color-text); font-size: calc(var(--tg-text-lg) + 1px); line-height: var(--tg-leading-normal); } .tg-svc__grid { display: flex; flex-direction: column; gap: var(--tg-space-6); width: 100%; } .tg-svc__row { display: flex; align-items: stretch; gap: var(--tg-space-6); width: 100%; } .tg-svc__card { position: relative; display: flex; min-width: 0; overflow: hidden; border-radius: var(--tg-radius-md); background: var(--tg-color-surface-raised); } /* Figma's 868:424 split, expressed as grow ratios so the pair fills the content box at any width instead of stopping 16px short of the gutter. */ .tg-svc__card--wide { flex: 868 1 0; } .tg-svc__card--narrow { flex: 424 1 0; } .tg-svc__card--third { flex: 1 1 0; } .tg-svc__row--tall .tg-svc__card { height: 420px; } .tg-svc__row--short .tg-svc__card { height: 340px; } .tg-svc__card-img, .tg-svc__card-img img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; } /* Bottom-weighted, so the caption stays legible while the top of the photo keeps its full contrast. The midpoint stop is what stops it reading as a flat wash across the whole card. */ .tg-svc__card-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / 0%) 0%, rgb(5 3 0 / 12%) 50%, rgb(5 3 0 / 90%) 100%); } .tg-svc__card-copy { position: absolute; left: 26px; right: 26px; bottom: 26px; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--tg-space-3); } .tg-svc__card-title { color: var(--tg-color-heading); font-size: 23px; font-weight: var(--tg-weight-semibold); /* -0.23/23 = -0.01em, the same half-tracking the step cards use. */ letter-spacing: -0.01em; } .tg-svc__card-desc { margin: 0; color: var(--tg-color-text-onimage); font-size: var(--tg-text-sm); } @media (max-width: 900px) { .tg-svc__row { flex-wrap: wrap; } .tg-svc__card { flex: 1 1 100%; } } /* ─── Homepage: Success Stories ──────────────────────────────────────────── * Three equal testimonial cards, each stretched to the tallest so the * attribution rows align across all three whatever the quote length. */ .tg-stories { display: flex; flex-direction: column; align-items: flex-start; gap: var(--tg-space-12); } .tg-stories__intro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--tg-space-5); } .tg-stories__title { margin: 0; } .tg-stories__row { display: flex; align-items: stretch; gap: var(--tg-space-6); width: 100%; } .tg-story { display: flex; flex: 1 1 0; flex-direction: column; /* Elementor's per-card --flex-wrap: wrap let the name jump into a second column whenever the slider's equal-height card was shorter than its copy. */ flex-wrap: nowrap !important; /* Pins the attribution row to the card's bottom edge. */ justify-content: space-between; align-items: flex-start; min-width: 0; padding: 30px; /* not on the spacing scale (between --tg-space-9/26 and --tg-space-10/34) */ border: 1px solid var(--tg-color-border-card); border-radius: var(--tg-radius-md); /* Figma reads #1C1B18 here; --tg-color-surface-alt is #1C1B19, a single step apart in one channel, so the existing token is reused rather than adding a near-duplicate. */ background: var(--tg-color-surface-alt); } .tg-story__quote-block { display: flex; flex-direction: column; align-items: flex-start; gap: var(--tg-space-6); width: 100%; } .tg-story__stars svg { display: block; width: 91px; height: 15px; } .tg-story__quote { margin: 0; color: var(--tg-color-heading); font-size: var(--tg-text-lg); font-weight: var(--tg-weight-semibold); line-height: 1.46; /* not on the leading scale (between --tg-leading-tight/1.18 and --tg-leading-snug/1.5) */ letter-spacing: -0.005em; /* -0.09/18 */ } .tg-story__person { display: flex; align-items: center; gap: var(--tg-space-4); padding-top: var(--tg-space-8); } .tg-story__avatar, .tg-story__avatar img { display: block; flex-shrink: 0; width: 46px; height: 46px; border-radius: var(--tg-radius-full); object-fit: cover; } .tg-story__person-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; } .tg-story__name { color: var(--tg-color-heading); font-size: var(--tg-text-base); font-weight: var(--tg-weight-semibold); } .tg-story__role { color: var(--tg-color-text); font-size: calc(var(--tg-text-xs) + 1px); font-weight: var(--tg-weight-medium); } @media (max-width: 900px) { .tg-stories__row { flex-wrap: wrap; } .tg-story { flex: 1 1 100%; } } /* ─── Homepage: Bank Strip ───────────────────────────────────────────────── * Sixteen lender logos on white tiles, centred in rows of 6 / 6 / 4. * * Tile width and logo aspect ratio are per-lender values from the frame — the * marks come at very different intrinsic ratios, so one uniform tile would * letterbox some and crop others. They're grouped in the table at the end of * this block so all sixteen read together rather than scattering through the * section's build script. */ .tg-banks { display: flex; flex-direction: column; align-items: center; gap: var(--tg-space-10); /* Asymmetric in the frame: 64px above, 60px below. */ padding-block: var(--tg-section-py) 60px; } .tg-banks__intro { display: flex; flex-direction: column; align-items: center; gap: var(--tg-space-5); max-width: 760px; text-align: center; } .tg-banks__title { margin: 0; /* This section's heading is smaller and lighter than the sitewide h2. */ font-size: 34px; font-weight: var(--tg-weight-semibold); line-height: 1.16; letter-spacing: -0.015em; /* -0.51/34 */ } .tg-banks__subtitle { margin: 0; max-width: 558px; color: var(--tg-color-text); font-size: 19px; /* not on the type scale (between --tg-text-base/15 and --tg-text-md/17) */ line-height: var(--tg-leading-snug); } .tg-banks__grid { display: flex; flex-direction: column; align-items: center; gap: var(--tg-space-8); } .tg-banks__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--tg-space-8); } /* White because the marks are full-colour and would fail on the near-black page; the tile is the logo's own safe area, not a card. */ .tg-banks__tile { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: var(--tile-width); padding: var(--tg-space-6); border-radius: var(--tg-radius-tile); background: #fff; } .tg-banks__logo, .tg-banks__logo img { display: block; width: 100%; height: auto; aspect-ratio: var(--logo-ratio); object-fit: contain; } /* Every lender gets the same tile (client review 10.3/10.4). The logos themselves are area-normalised on one 600x220 canvas (banks_normalise.py), so equal tiles give equal visual weight; the frame's per-lender widths made Mashreq and friends look smaller. */ .tg-banks__tile { --tile-width: 170px; --logo-ratio: 600 / 220; padding: 12px 14px; } /* ─── Homepage: Insights ─────────────────────────────────────────────────── * Three article cards under a heading row that also holds a "view all" link, * pushed to the right and aligned to the title's baseline. */ .tg-insights { display: flex; flex-direction: column; align-items: flex-start; gap: var(--tg-space-11); } .tg-insights__intro { display: flex; /* Bottom-aligned, not centred: the link sits on the heading's baseline. */ align-items: flex-end; justify-content: space-between; width: 100%; } .tg-insights__heading { display: flex; flex-direction: column; align-items: flex-start; gap: var(--tg-space-5); } .tg-insights__title { margin: 0; } .tg-insights__view-all { color: var(--tg-color-heading); font-size: var(--tg-text-sm); font-weight: var(--tg-weight-semibold); letter-spacing: var(--tg-tracking-btn); /* The arrow is part of the label, and the design's double space before it is meaningful spacing rather than a typo. */ white-space: pre; text-decoration: none; transition: color .18s ease; } .tg-insights__view-all:hover { color: var(--tg-color-primary); } .tg-insights__row { display: flex; align-items: stretch; gap: var(--tg-space-6); width: 100%; } .tg-insights__card { display: flex; flex: 1 1 0; flex-direction: column; align-items: flex-start; min-width: 0; height: 400px; overflow: hidden; border: 1px solid var(--tg-color-border-card); border-radius: var(--tg-radius-md); background: var(--tg-color-surface-alt); text-decoration: none; } .tg-insights__card-img, .tg-insights__card-img img { display: block; width: 100%; height: 236px; object-fit: cover; } .tg-insights__card-body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--tg-space-5); width: 100%; padding: var(--tg-space-8) 26px 26px; } .tg-insights__tag { display: inline-flex; padding: 5px var(--tg-space-4); border-radius: var(--tg-radius-full); background: var(--tg-color-surface-pill); color: var(--tg-color-primary); font-size: var(--tg-text-3xs); font-weight: var(--tg-weight-semibold); letter-spacing: var(--tg-tracking-label); } .tg-insights__card-title { color: var(--tg-color-heading); font-size: 20px; font-weight: var(--tg-weight-semibold); line-height: 1.24; letter-spacing: -0.01em; /* -0.2/20 */ } .tg-insights__card-meta { color: var(--tg-color-text); font-size: calc(var(--tg-text-xs) + 1px); font-weight: var(--tg-weight-medium); } @media (max-width: 900px) { .tg-insights__row { flex-wrap: wrap; } .tg-insights__card { flex: 1 1 100%; } } /* ─── Homepage: FAQ ──────────────────────────────────────────────────────── * Photo with a floating "approved" badge on the left, accordion on the right. * Open/close is assets/js/accordion.js; everything visual is here, including * the ×/+ marker, so the two states can't drift apart in the markup. */ .tg-faq { display: flex; flex-direction: column; align-items: flex-start; gap: var(--tg-space-12); } .tg-faq__title { margin: 0; } .tg-faq__row { display: flex; align-items: flex-start; gap: var(--tg-space-12); width: 100%; } .tg-faq__media { position: relative; flex-shrink: 0; width: 520px; height: 560px; } .tg-faq__image, .tg-faq__image img { display: block; width: 100%; height: 100%; border-radius: var(--tg-radius-md); object-fit: cover; } .tg-faq__badge { position: absolute; left: 20px; bottom: 20px; display: flex; align-items: center; gap: var(--tg-space-3); padding: var(--tg-space-4) 18px var(--tg-space-4) var(--tg-space-6); border-radius: var(--tg-radius-badge); background: #fff; } .tg-faq__badge-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: var(--tg-radius-full); background: var(--tg-color-primary); } .tg-faq__badge-label { color: var(--tg-color-on-light); font-size: var(--tg-text-sm); font-weight: var(--tg-weight-semibold); } .tg-faq__list { display: flex; flex: 1 1 0; flex-direction: column; min-width: 0; } .tg-faq__item { display: flex; flex-direction: column; align-items: flex-start; gap: var(--tg-space-5); width: 100%; padding-block: var(--tg-space-8); } .tg-faq__rule { width: 100%; height: 1px; background: var(--tg-color-border); } .tg-faq__question { display: flex; align-items: center; justify-content: space-between; gap: var(--tg-space-6); width: 100%; padding-top: var(--tg-space-1); cursor: pointer; } .tg-faq__question-text { color: var(--tg-color-heading); font-size: var(--tg-text-lg); font-weight: var(--tg-weight-semibold); } /* The marker is one element whose glyph and colour swap on the open state, rather than two elements toggled in the markup. */ .tg-faq__marker { flex: 0 0 auto; color: var(--tg-color-text); font-size: 22px; font-weight: var(--tg-weight-medium); line-height: 1; transition: color .18s ease; } .tg-faq__marker::before { content: "+"; } .tg-faq__item.is-open .tg-faq__marker { color: var(--tg-color-primary); } .tg-faq__item.is-open .tg-faq__marker::before { content: "×"; } /* Closed answers stay in the DOM — findable by search, and the section still reads correctly if the script never runs. */ .tg-faq__answer { margin: 0; color: var(--tg-color-text); font-size: calc(var(--tg-text-base) + 1px); line-height: 1.55; /* not on the leading scale (between --tg-leading-snug/1.5 and --tg-leading-normal/1.58) */ } .tg-faq__item:not(.is-open) .tg-faq__answer { display: none; } @media (max-width: 900px) { .tg-faq__row { flex-wrap: wrap; } .tg-faq__media { width: 100%; } } /* ─── Homepage: Final CTA ────────────────────────────────────────────────── * One rounded band: copy left, a full-height photo right. Padding is * asymmetric in the frame (40px above, 80px below) because this section sits * directly on the footer. */ .tg-cta { display: flex; flex-direction: column; align-items: flex-start; padding: var(--tg-space-10) var(--tg-gutter) 80px; background: var(--tg-color-surface); } .tg-cta__band { display: flex; align-items: center; width: 100%; overflow: hidden; border-radius: var(--tg-radius-xl); background: var(--tg-color-surface-card); } .tg-cta__copy { display: flex; flex: 1 1 0; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--tg-space-7); min-width: 0; padding: 72px var(--tg-space-12) 72px var(--tg-space-14); } .tg-cta__title { margin: 0; } .tg-cta__text { margin: 0; max-width: 460px; color: var(--tg-color-text-alt); font-size: calc(var(--tg-text-lg) + 1px); line-height: var(--tg-leading-normal); } /* Stretches to the band's height, which the copy column sets. */ .tg-cta__image, .tg-cta__image img { display: block; flex-shrink: 0; align-self: stretch; width: 540px; height: 100%; object-fit: cover; } @media (max-width: 900px) { .tg-cta__band { flex-wrap: wrap; } .tg-cta__copy { padding: var(--tg-space-12) var(--tg-space-10); } .tg-cta__image, .tg-cta__image img { width: 100%; height: 300px; } } /* ─── Site footer (Elementor Footer template) ────────────────────────────── * Figma node 2238:1165. Built as a Theme Builder template, not a homepage * section — see scripts/build-footer.php, including its note on why this * block's type doesn't match the rest of the design system. */ .tg-footer { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--tg-space-12); overflow: hidden; /* 80px gutter here, against every other section's 56px. */ padding: var(--tg-section-py) 80px var(--tg-space-8); background: var(--tg-color-surface-footer); } .tg-footer__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--tg-space-6); width: 100%; } .tg-footer__row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--tg-space-12); width: 100%; padding-bottom: var(--tg-space-8); border-bottom: 1px solid var(--tg-color-border-footer); } .tg-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--tg-space-6); width: 357px; } .tg-footer__logo, .tg-footer__logo img { display: block; width: 182px; height: auto; } .tg-footer__blurb, .tg-footer__address { margin: 0; color: var(--tg-color-text-footer); font-family: var(--tg-font-ui); font-size: 19px; font-weight: var(--tg-weight-medium); line-height: var(--tg-leading-normal); } .tg-footer__socials { display: flex; gap: var(--tg-space-4); padding-top: var(--tg-space-2); } .tg-footer__social { display: inline-flex; align-items: center; justify-content: center; padding: var(--tg-space-3); border-radius: 18px; background: var(--tg-color-surface-social); transition: filter .18s ease; } .tg-footer__social:hover { filter: brightness(1.25); } .tg-footer__social--brand { background: var(--tg-gradient-fill); } .tg-footer__social svg { display: block; width: 18px; height: 18px; } .tg-footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: var(--tg-space-4); } .tg-footer__col-title { color: var(--tg-color-heading-hi); font-family: var(--tg-font-footer-title); font-size: 18px; font-weight: var(--tg-weight-semibold); letter-spacing: 0.05em; /* 0.8/16 */ } .tg-footer__link { color: var(--tg-color-text-footer-link); font-family: var(--tg-font-footer-link); font-size: calc(var(--tg-text-sm) + 1px); line-height: 1.55; /* 21.7/14 */ text-decoration: none; transition: color .18s ease; } .tg-footer__link:hover { color: var(--tg-color-heading-hi); } .tg-footer__legal { display: flex; align-items: center; justify-content: space-between; gap: var(--tg-space-6); width: 100%; } .tg-footer__legal-item { margin: 0; color: var(--tg-color-text-footer); font-family: var(--tg-font-ui); font-size: calc(var(--tg-text-sm) + 1px); font-weight: var(--tg-weight-medium); line-height: var(--tg-leading-normal); } /* The oversized mark behind the columns. Painted as a mask rather than an image so it takes its colour from the rule, and left out of the flow entirely so it can't affect the footer's height. */ .tg-footer__watermark { position: absolute; top: 204px; left: calc(75% - 37px); width: 363px; height: 271px; opacity: .03; background: #fff; mask-image: url("assets/images/footer-logo.png"); mask-repeat: no-repeat; mask-size: contain; mask-position: center; pointer-events: none; } @media (max-width: 900px) { .tg-footer { padding-inline: var(--tg-gutter); } .tg-footer__row { flex-wrap: wrap; gap: var(--tg-space-10); } .tg-footer__brand { width: 100%; } .tg-footer__legal { flex-wrap: wrap; gap: var(--tg-space-2); } .tg-footer__watermark { display: none; } } /* ─── Client review (9 Oct) 1.1: minimum type sizes ──────────────────────── Measured on every live page at 1440 and 393 (textaudit.js): these are the pieces of body copy and fine print that read too small. Sizes set in the Elementor widgets were raised in the editor data; these are the ones the theme or page CSS sets. !important because page-level CSS sets some of them with element selectors. Floor: body 15px (phones 14px), fine print 13px. */ .tg-hero__text, .tg-hero__text p { font-size: 20px !important; line-height: 1.55 !important; } .tg-why__feature-desc, .tg-why__feature-desc p, .tg-steps__card-desc, .tg-steps__card-desc p { font-size: 17px !important; line-height: 1.55 !important; } .e-n-accordion .elementor-widget-text-editor p { font-size: 17px !important; line-height: 1.65 !important; } .elementor-element-f0a1013, .elementor-element-f0a1013 p { font-size: 17px !important; } .elementor-element-f0a1018, .elementor-element-f0a1018 p, .elementor-element-f0a1031, .elementor-element-f0a1031 p, .elementor-element-f0a1032, .elementor-element-f0a1032 p { font-size: 16px !important; color: #8A8177 !important; } .elementor-element-ab11001, .elementor-element-ab11001 p { font-size: 16px !important; color: #8A8072 !important; } @media (max-width: 767px) { .tg-hero__text, .tg-hero__text p { font-size: 17px !important; } .tg-why__feature-desc, .tg-why__feature-desc p, .tg-steps__card-desc, .tg-steps__card-desc p, .tg-svc__card-desc, .tg-svc__card-desc p, .e-n-accordion .elementor-widget-text-editor p { font-size: 16px !important; } } /* Background videos always cover their container. Elementor sizes the