.elementor-kit-110{--e-global-color-primary:#23282F;--e-global-color-secondary:#4D545F;--e-global-color-text:#5F6672;--e-global-color-accent:#F9423A;--e-global-color-glink:#23282F;--e-global-color-glheading:#333A45;--e-global-color-glprose:#4D545F;--e-global-color-glbody:#5F6672;--e-global-color-glmuted:#69707C;--e-global-color-glinvtext:#FFFFFF;--e-global-color-glaccent:#F9423A;--e-global-color-glaccenthov:#BF3629;--e-global-color-glrule:#F0F0F2;--e-global-color-glruleinv:#1E1E1E;--e-global-color-glinteract:#A1A1AA;--e-global-color-glcanvas:#FFFFFF;--e-global-color-glhover:#FAFAFB;--e-global-color-glsunken:#F8F9FA;--e-global-color-glmutedbg:#F4F4F6;--e-global-color-glinverse:#111111;--e-global-color-glaction:#000000;--e-global-color-glactionhov:#262626;--e-global-color-glrose300:#FFC2BC;--e-global-color-glrose400:#FF978E;--e-global-color-glrose500:#FF6E60;--e-global-color-glrose700:#BF3629;--e-global-color-glrose900:#8C271E;--e-global-color-gltick:#E5E7EB;--e-global-color-gltickmaj:#D1D5DB;--e-global-color-gldatafill:#E11D2E;--e-global-color-glplategrn:#F2F7E4;--e-global-color-glplateamb:#FBF6E3;--e-global-color-glplateazu:#FDF6EF;--e-global-color-gllinegrn:#D8E7AB;--e-global-color-gllineamb:#F0E0A9;--e-global-color-gllineazu:#F2DDC6;--e-global-typography-primary-font-family:"Helvetica Neue";--e-global-typography-primary-font-weight:400;--e-global-typography-secondary-font-family:"Helvetica Neue";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Helvetica Neue";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Helvetica Neue";--e-global-typography-accent-font-weight:500;--e-global-typography-gldisplay-font-family:"Helvetica Neue";--e-global-typography-gldisplay-font-size:61.04px;--e-global-typography-gldisplay-font-weight:400;--e-global-typography-gldisplay-line-height:1.1em;--e-global-typography-gldisplay-letter-spacing:0px;--e-global-typography-gleditorial-font-family:"Helvetica Neue";--e-global-typography-gleditorial-font-size:48.83px;--e-global-typography-gleditorial-font-weight:400;--e-global-typography-gleditorial-line-height:1.08em;--e-global-typography-gleditorial-letter-spacing:0px;--e-global-typography-gleditorialt-font-family:"Helvetica Neue";--e-global-typography-gleditorialt-font-size:39.06px;--e-global-typography-gleditorialt-font-weight:400;--e-global-typography-gleditorialt-line-height:1.08em;--e-global-typography-gleditorialt-letter-spacing:0px;--e-global-typography-glheadinglg-font-family:"Helvetica Neue";--e-global-typography-glheadinglg-font-size:31.25px;--e-global-typography-glheadinglg-font-weight:400;--e-global-typography-glheadinglg-line-height:1.16em;--e-global-typography-glheadinglg-letter-spacing:0px;--e-global-typography-glheadingsm-font-family:"Helvetica Neue";--e-global-typography-glheadingsm-font-size:25px;--e-global-typography-glheadingsm-font-weight:400;--e-global-typography-glheadingsm-line-height:1.25em;--e-global-typography-glheadingsm-letter-spacing:0px;--e-global-typography-glheadingmd-font-family:"Helvetica Neue";--e-global-typography-glheadingmd-font-size:20px;--e-global-typography-glheadingmd-font-weight:400;--e-global-typography-glheadingmd-line-height:1.35em;--e-global-typography-glheadingmd-letter-spacing:0px;--e-global-typography-gltitle-font-family:"Helvetica Neue";--e-global-typography-gltitle-font-size:20px;--e-global-typography-gltitle-font-weight:400;--e-global-typography-gltitle-line-height:1.25em;--e-global-typography-gltitle-letter-spacing:0px;--e-global-typography-glbodylg-font-family:"Helvetica Neue";--e-global-typography-glbodylg-font-size:16px;--e-global-typography-glbodylg-font-weight:400;--e-global-typography-glbodylg-line-height:1.55em;--e-global-typography-glbodylg-letter-spacing:0px;--e-global-typography-glbodymd-font-family:"Helvetica Neue";--e-global-typography-glbodymd-font-size:16px;--e-global-typography-glbodymd-font-weight:400;--e-global-typography-glbodymd-line-height:1.6em;--e-global-typography-glbodymd-letter-spacing:0px;--e-global-typography-glbodysm-font-family:"Helvetica Neue";--e-global-typography-glbodysm-font-size:12.8px;--e-global-typography-glbodysm-font-weight:400;--e-global-typography-glbodysm-line-height:1.5em;--e-global-typography-glbodysm-letter-spacing:0px;--e-global-typography-glcaption-font-family:"Helvetica Neue";--e-global-typography-glcaption-font-size:12.8px;--e-global-typography-glcaption-font-weight:400;--e-global-typography-glcaption-line-height:1.5em;--e-global-typography-glcaption-letter-spacing:0px;--e-global-typography-gleyebrow-font-family:"Helvetica Neue";--e-global-typography-gleyebrow-font-size:12.8px;--e-global-typography-gleyebrow-font-weight:400;--e-global-typography-gleyebrow-text-transform:uppercase;--e-global-typography-gleyebrow-line-height:1em;--e-global-typography-gleyebrow-letter-spacing:0.64px;--e-global-typography-glactionlg-font-family:"Helvetica Neue";--e-global-typography-glactionlg-font-size:12.8px;--e-global-typography-glactionlg-font-weight:400;--e-global-typography-glactionlg-text-transform:uppercase;--e-global-typography-glactionlg-line-height:1em;--e-global-typography-glactionlg-letter-spacing:0.768px;--e-global-typography-glactionmd-font-family:"Helvetica Neue";--e-global-typography-glactionmd-font-size:12.8px;--e-global-typography-glactionmd-font-weight:400;--e-global-typography-glactionmd-text-transform:uppercase;--e-global-typography-glactionmd-line-height:1em;--e-global-typography-glactionmd-letter-spacing:0.64px;--e-global-typography-glkicker-font-family:"Helvetica Neue";--e-global-typography-glkicker-font-size:10.24px;--e-global-typography-glkicker-font-weight:400;--e-global-typography-glkicker-text-transform:uppercase;--e-global-typography-glkicker-line-height:1.5em;--e-global-typography-glkicker-letter-spacing:0.819px;--e-global-typography-glmetric-font-family:"Helvetica Neue";--e-global-typography-glmetric-font-size:12.8px;--e-global-typography-glmetric-font-weight:400;--e-global-typography-glmetric-line-height:1em;--e-global-typography-glmetric-letter-spacing:0px;color:#23282F;font-family:"Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;font-size:16px;font-weight:400;line-height:1.6em;letter-spacing:0px;}.elementor-kit-110 button,.elementor-kit-110 input[type="button"],.elementor-kit-110 input[type="submit"],.elementor-kit-110 .elementor-button{background-color:#000000;font-family:"Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;font-size:12.8px;font-weight:400;text-transform:uppercase;line-height:1em;letter-spacing:0.64px;color:#FFFFFF;border-style:none;border-radius:0px 0px 0px 0px;}.elementor-kit-110 button:hover,.elementor-kit-110 button:focus,.elementor-kit-110 input[type="button"]:hover,.elementor-kit-110 input[type="button"]:focus,.elementor-kit-110 input[type="submit"]:hover,.elementor-kit-110 input[type="submit"]:focus,.elementor-kit-110 .elementor-button:hover,.elementor-kit-110 .elementor-button:focus{background-color:#262626;color:#FFFFFF;}.elementor-kit-110 e-page-transition{background-color:#FFBC7D;}.elementor-kit-110 p{margin-block-end:0px;}.elementor-kit-110 a{color:#23282F;font-family:"Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;font-size:16px;font-weight:400;line-height:1.6em;letter-spacing:0px;}.elementor-kit-110 a:hover{color:#F9423A;}.elementor-kit-110 h1{color:#333A45;font-family:"Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;font-size:61.04px;font-weight:400;line-height:1.08em;letter-spacing:0px;}.elementor-kit-110 h2{color:#333A45;font-family:"Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;font-size:48.83px;font-weight:400;line-height:1.1em;letter-spacing:0px;}.elementor-kit-110 h3{color:#333A45;font-family:"Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;font-size:39.06px;font-weight:400;line-height:1.16em;letter-spacing:0px;}.elementor-kit-110 h4{color:#333A45;font-family:"Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;font-size:31.25px;font-weight:400;line-height:1.16em;letter-spacing:0px;}.elementor-kit-110 h5{color:#333A45;font-family:"Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;font-size:25px;font-weight:400;line-height:1.25em;letter-spacing:0px;}.elementor-kit-110 h6{color:#333A45;font-family:"Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;font-size:20px;font-weight:400;line-height:1.35em;letter-spacing:0px;}.elementor-kit-110 img{border-radius:0px 0px 0px 0px;}.elementor-kit-110 label{color:#23282F;}.elementor-kit-110 input:not([type="button"]):not([type="submit"]),.elementor-kit-110 textarea,.elementor-kit-110 .elementor-field-textual{font-family:"Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;font-size:16px;font-weight:400;line-height:1.5em;letter-spacing:0px;color:#23282F;background-color:#FFFFFF;border-style:solid;border-width:1px 1px 1px 1px;border-color:#F0F0F2;border-radius:0px 0px 0px 0px;padding:12px 14px 12px 14px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1400px;}.e-con{--container-max-width:1400px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-110{--e-global-typography-gldisplay-font-size:48.83px;--e-global-typography-gleditorial-font-size:39.06px;--e-global-typography-gleditorialt-font-size:35px;--e-global-typography-glheadinglg-font-size:28px;--e-global-typography-glheadingsm-font-size:22.5px;}.elementor-kit-110 h1{font-size:48.83px;}.elementor-kit-110 h2{font-size:39.06px;}.elementor-kit-110 h3{font-size:35px;}.elementor-kit-110 h4{font-size:28px;}.elementor-kit-110 h5{font-size:22.5px;}.elementor-kit-110 h6{font-size:20px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-110{--e-global-typography-gldisplay-font-size:39.06px;--e-global-typography-gleditorial-font-size:31.25px;--e-global-typography-gleditorialt-font-size:31.25px;--e-global-typography-glheadinglg-font-size:25px;--e-global-typography-glheadingsm-font-size:20px;}.elementor-kit-110 h1{font-size:39.06px;}.elementor-kit-110 h2{font-size:31.25px;}.elementor-kit-110 h3{font-size:31.25px;}.elementor-kit-110 h4{font-size:25px;}.elementor-kit-110 h5{font-size:20px;}.elementor-kit-110 h6{font-size:20px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}} /* Start custom CSS *//* ══════════════════════════════════════════════════════════════════════════ TALENTnext — Gridline system layer -------------------------------------------------------------------------- Paste this into Elementor → Site Settings → Custom CSS (once). It is a port of web/src/gridline/tokens/primitives.css and semantic.css, plus the three sitewide marks every section reuses — the architectural frame, the blueprint lattice and the crosshair. The section templates reference these tokens by name, exactly as the app's components do, so re-theming is re-pointing an alias here and never editing a section. Required by: talentnext-hero.json, talentnext-archetypes.json, and every section template after them. The header and footer templates are self-contained and do not need it. ══════════════════════════════════════════════════════════════════════════ */ :root { /* ──────────────────────────────────────────────────────────────────────── Layer 1 — Primitives. Raw, context-free values. Nothing outside this file should reference a primitive directly; sections consume the semantic aliases further down. ──────────────────────────────────────────────────────────────────────── */ /* ── Where these values come from ───────────────────────────────────── Every colour primitive below reads a Global Colour from the Brandkit, with the literal as its fallback. That makes the kit's Global Colours panel the single source of truth: editing one there re-tints the widgets AND these tokens together, so a section's CSS block and the panel can never drift onto two different reds. The fallback is not decoration — it is what lets any template render correctly before the kit is imported, or if it never is. The semantic aliases further down still point at these primitives, so the two-layer architecture is unchanged: sections consume roles, roles resolve to primitives, primitives resolve to the kit. ──────────────────────────────────────────────────────────────────── */ /* Colour — Rose, the single accent family, rebased on the brand #F9423A */ --gl-rose-50: #fff7f6; --gl-rose-100: #ffedeb; --gl-rose-200: #ffdcd9; --gl-rose-300: var(--e-global-color-glrose300, #ffc2bc); --gl-rose-400: var(--e-global-color-glrose400, #ff978e); /* hero glow, outer stop */ --gl-rose-500: var(--e-global-color-glrose500, #ff6e60); /* hero glow, mid stop */ --gl-rose-600: var(--e-global-color-glaccent, #f9423a); /* THE accent */ --gl-rose-700: var(--e-global-color-glrose700, #bf3629); /* accent, pressed / hover */ --gl-rose-800: #a02d23; --gl-rose-900: var(--e-global-color-glrose900, #8c271e); --gl-crimson-700: #be185d; --gl-signal-600: var(--e-global-color-gldatafill, #e11d2e); /* quantitative marks, warmer than the accent */ /* Colour — Plate tints (three grounds, and the ruled marks drawn on them) The Tal band shows three things Tal does, one after another on a timer, and three panels that differ only in their contents read as one panel redrawing itself. A change of ground is what makes them read as three places rather than one. ALL THREE ARE NOW THE ACCENT'S OWN RED, and they are named after the PANEL rather than after a colour. They used to be green, amber and azure — three unrelated hues, which made the band a small second palette sitting inside a page with exactly one accent in it. Worse, two of the three had drifted warm enough to read as yellow, and yellow beside a red accent is the one neighbour that makes the accent look dirty. What separates the tones now is TEMPERATURE inside the one red, not hue: `read` is the neutral tint of the accent itself, `ask` is pushed a few units towards coral, `voice` a few units the other way towards rose. Side by side in a swatch they are nearly the same colour; arriving one after another under a white card, with the mesh putting each one's weight in a different corner, they are plainly three different grounds. Named for the PANEL because a colour name is the one thing that can go stale here — `azure` was already lying, and the moment the other two went red all three were. A panel name cannot. FOUR STEPS EACH, because a plate is a mesh and not a fill: -50 the base wash, nearly white; what the middle of the plate is -100 the first pool, bled in from one corner -150 the second pool, bled in from another -200 the marks drawn on the ground None of these is contrast-safe and none may carry type — a darker step would have to be added first. They are also deliberately NOT Global Colours in the kit: twelve near-identical near-whites that can never hold type are noise in a palette a designer picks roles from. */ --gl-plate-read-50: #fff7f6; --gl-plate-read-100: #feeae8; --gl-plate-read-150: #fff2f0; --gl-plate-read-200: #f9d6d4; --gl-plate-ask-50: #fff8f5; --gl-plate-ask-100: #feeae5; --gl-plate-ask-150: #fff0ed; --gl-plate-ask-200: #f8d6cd; --gl-plate-voice-50: #fff6f7; --gl-plate-voice-100: #fde9ec; --gl-plate-voice-150: #fef1f0; --gl-plate-voice-200: #f6d6d9; /* Colour — Neutral ramp. Half-steps exist where the source used two near-identical greys for genuinely different roles. */ --gl-neutral-0: var(--e-global-color-glcanvas, #ffffff); --gl-neutral-25: var(--e-global-color-glhover, #fafafb); /* card hover wash */ --gl-neutral-50: var(--e-global-color-glsunken, #f8f9fa); /* inset panel / alternating module */ --gl-neutral-100: var(--e-global-color-glmutedbg, #f4f4f6); /* secondary button rest */ --gl-neutral-175: var(--e-global-color-glrule, #f0f0f2); /* THE grid rule */ --gl-neutral-200: #ececef; /* the grid rule's pre-lightening value */ --gl-neutral-250: var(--e-global-color-gltick, #e5e7eb); /* meter track, ruler tick */ --gl-neutral-300: #e2e8f0; /* progress track */ --gl-neutral-400: var(--e-global-color-gltickmaj, #d1d5db); /* ruler tick (major), inert marker */ --gl-neutral-450: var(--e-global-color-glinteract, #a1a1aa); /* interactive border, hover */ --gl-neutral-500: #9ca3af; /* crosshair glyph */ --gl-neutral-600: #71717a; --gl-neutral-640: var(--e-global-color-glmuted, #69707c); /* caption / metric, cool — 5.0:1 */ --gl-neutral-650: #6b7280; --gl-neutral-675: var(--e-global-color-glbody, #5f6672); /* body copy, cool — 5.8:1 */ --gl-neutral-700: #52525b; --gl-neutral-725: var(--e-global-color-glprose, #4d545f); /* prose, cool — 7.8:1 */ --gl-neutral-750: #4b5563; --gl-neutral-775: #3f3f46; --gl-neutral-780: var(--e-global-color-glheading, #333a45); /* heading, second tier — 11.4:1 */ --gl-neutral-790: var(--e-global-color-glink, #23282f); /* heading ink — dark, never black — 14.7:1 */ --gl-neutral-795: var(--e-global-color-glruleinv, #1e1e1e); /* hairline on the dark surfaces */ --gl-neutral-800: #18181b; --gl-neutral-850: #111827; --gl-neutral-900: var(--e-global-color-glinverse, #111111); /* text, primary */ --gl-neutral-950: #0e1013; /* video letterbox */ --gl-neutral-1000: var(--e-global-color-glaction, #000000); /* primary action */ --gl-neutral-1000-hover: var(--e-global-color-glactionhov, #262626); --gl-green-50: #f0fdf4; --gl-green-600: #16a34a; /* Typeface — one face for the whole system. Helvetica Neue ships with macOS/iOS and is not licensable through Google Fonts, so it is a platform stack rather than a webfont import: the app downloads no font file at all. Regular (400) is the one cut every platform in this stack actually has. */ --gl-font-sans-stack: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif; --gl-font-sans: var(--gl-font-sans-stack); /* Two aliases survive from when the system had a second, mono face. Both now resolve to the same stack, so no rule needed changing. */ --gl-font-mono: var(--gl-font-sans-stack); --gl-font-accent-mono: var(--gl-font-sans-stack); /* Type — weight */ --gl-weight-light: 300; --gl-weight-regular: 400; --gl-weight-medium: 500; --gl-weight-semibold: 600; --gl-weight-bold: 700; /* Type — size. One modular scale: 1rem (16px) base, 1.25 ratio (the "major third"). Every type size in the system is a step on it. The three steps above h1 exist only because the hero headline runs past h1 — they are the same ratio carried further, not a second scale. */ --gl-scale-6xl: 11.6415rem; /* 186.26px */ --gl-scale-5xl: 9.3132rem; /* 149.01px */ --gl-scale-4xl: 7.4506rem; /* 119.21px */ --gl-scale-3xl: 5.9605rem; /* 95.37px */ --gl-scale-2xl: 4.7684rem; /* 76.29px */ --gl-scale-h1: 3.8147rem; /* 61.04px */ --gl-scale-h2: 3.0518rem; /* 48.83px */ --gl-scale-h3: 2.4414rem; /* 39.06px */ --gl-scale-h4: 1.9531rem; /* 31.25px */ --gl-scale-h5: 1.5625rem; /* 25px */ --gl-scale-h6: 1.25rem; /* 20px */ --gl-scale-p: 1rem; /* 16px */ --gl-scale-small: 0.8rem; /* 12.8px */ --gl-scale-footnote: 0.64rem; /* 10.24px */ /* Role sizes. Fluid roles clamp between two steps of the scale above, so a heading is never off-scale at any viewport width — only which step it has reached changes. */ --gl-size-display: clamp(var(--gl-scale-h3), 5.2vw, var(--gl-scale-h1)); --gl-size-editorial: clamp(var(--gl-scale-h4), 4.4vw, var(--gl-scale-h2)); --gl-size-editorial-tight: clamp( var(--gl-scale-h4), 3.6vw, var(--gl-scale-h3) ); --gl-size-mono-display: clamp(var(--gl-scale-h5), 3.2vw, var(--gl-scale-h3)); --gl-size-heading-lg: clamp(var(--gl-scale-h5), 2.6vw, var(--gl-scale-h4)); --gl-size-heading-sm: clamp(var(--gl-scale-h6), 1.9vw, var(--gl-scale-h5)); --gl-size-mono-heading: var(--gl-scale-h6); --gl-size-heading-md: var(--gl-scale-h6); --gl-size-title: var(--gl-scale-h6); /* The h6 step (20px) is the heading tier's floor and belongs to it alone: keeping the largest body role a full ratio step below the smallest heading is what makes the two tiers read as different things when every one of them is the same weight. bodyLg is "large body" by leading and measure, not by size. */ --gl-size-body-lg: var(--gl-scale-p); --gl-size-body-base: var(--gl-scale-p); --gl-size-body-md: var(--gl-scale-p); --gl-size-body-sm: var(--gl-scale-small); --gl-size-caption: var(--gl-scale-small); --gl-size-micro: var(--gl-scale-small); --gl-size-nano: var(--gl-scale-footnote); /* Type — line height */ --gl-leading-flat: 1; --gl-leading-display: 1.08; --gl-leading-tight: 1.1; --gl-leading-snug: 1.16; --gl-leading-title: 1.25; --gl-leading-heading: 1.35; --gl-leading-normal: 1.5; --gl-leading-relaxed: 1.55; --gl-leading-body: 1.6; /* Type — letter spacing. The negative half of this ramp is entirely unused: every role in the system tracks at 0. Positive tracking for small uppercase marks is the live half — all-caps genuinely needs the room, and that is the only place letter-spacing is set at all. */ --gl-tracking-normal: 0; --gl-tracking-wide: 0.05em; --gl-tracking-wider: 0.06em; --gl-tracking-widest: 0.08em; /* Space — 2px base, 4px rhythm */ --gl-space-0: 0; --gl-space-1: 0.25rem; /* 4 */ --gl-space-2: 0.375rem; /* 6 */ --gl-space-3: 0.5rem; /* 8 */ --gl-space-4: 0.625rem; /* 10 */ --gl-space-5: 0.75rem; /* 12 */ --gl-space-6: 0.875rem; /* 14 */ --gl-space-7: 1rem; /* 16 */ --gl-space-8: 1.125rem; /* 18 */ --gl-space-9: 1.25rem; /* 20 */ --gl-space-10: 1.375rem; /* 22 */ --gl-space-11: 1.5rem; /* 24 */ --gl-space-12: 1.75rem; /* 28 */ --gl-space-13: 2rem; /* 32 */ --gl-space-14: 2.25rem; /* 36 */ --gl-space-15: 2.5rem; /* 40 */ --gl-space-16: 2.75rem; /* 44 */ --gl-space-17: 3rem; /* 48 */ --gl-space-18: 3.25rem; /* 52 */ --gl-space-19: 3.5rem; /* 56 */ --gl-space-20: 4rem; /* 64 */ --gl-space-21: 4.5rem; /* 72 */ --gl-space-22: 5.5rem; /* 88 */ --gl-space-23: 6rem; /* 96 */ /* Fluid space — the module gutters that hold the architectural frame */ --gl-space-gutter-sm: clamp(1.25rem, 3.5vw, 3rem); /* 20 → 48 */ --gl-space-gutter-md: clamp(1.5rem, 4vw, 3rem); /* 24 → 48 */ --gl-space-gutter-lg: clamp(2rem, 4vw, 4rem); /* 32 → 64 */ --gl-space-gutter-xl: clamp(2rem, 5vw, 6rem); /* 32 → 96 */ --gl-space-block-sm: clamp(2.25rem, 4vh, 3.25rem); /* 36 → 52 */ --gl-space-block-md: clamp(2.5rem, 4.5vw, 4rem); /* 40 → 64 */ --gl-space-block-lg: clamp(3.5rem, 7vh, 5.5rem); /* 56 → 88 */ --gl-space-block-xl: clamp(4rem, 8vh, 6rem); /* 64 → 96 */ /* Border — width & radius. Gridline is a square system: actions carry zero radius by rule, and radius is reserved for content surfaces. */ --gl-border-width-hairline: 1px; --gl-border-width-rule: 1.5px; --gl-border-width-thick: 2px; --gl-radius-none: 0; --gl-radius-xs: 1px; --gl-radius-sm: 2px; --gl-radius-md: 6px; --gl-radius-lg: 8px; --gl-radius-xl: 12px; --gl-radius-2xl: 20px; --gl-radius-full: 9999px; /* Elevation */ --gl-shadow-xs: 0 2px 8px rgba(0, 0, 0, 0.03); --gl-shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.05); --gl-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.06); --gl-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.08); --gl-shadow-phone: drop-shadow(0 25px 40px rgba(0, 0, 0, 0.12)); /* Motion */ --gl-duration-fast: 150ms; --gl-duration-moderate: 300ms; --gl-duration-slow: 500ms; --gl-ease-standard: ease-out; --gl-ease-inout: cubic-bezier(0.4, 0, 0.2, 1); /* Ambient float loops used by the hero cards */ --gl-float-duration-a: 6s; --gl-float-duration-b: 6.5s; --gl-float-duration-c: 5.5s; /* Layout — the architectural frame. The measure the two constant vertical rules sit on, and that the header and every section re-apply so their own edges land exactly on those rules. One token, so all of them move together — never hard-code the number. Two terms, binding at different sizes. The 1400px cap governs desktop; the 95vw term governs everything narrower, where the page should keep hugging the viewport with a thin margin rather than sitting in a well. */ --gl-frame-max-width: min(1400px, 95vw); --gl-header-height: 78px; --gl-measure-prose: 680px; --gl-measure-header: 960px; --gl-measure-hero: 1240px; --gl-measure-form: 680px; --gl-measure-stage: 1160px; /* Z-index — one ordered scale, no magic numbers in sections */ --gl-z-below: -1; --gl-z-base: 1; --gl-z-raised: 2; --gl-z-stage: 3; --gl-z-floating: 4; --gl-z-content: 5; --gl-z-decoration: 10; --gl-z-header: 100; --gl-z-overlay: 200; /* ──────────────────────────────────────────────────────────────────────── Layer 2 — Semantic aliases. Role-named tokens. This is the ONLY layer the section templates consume. Re-theming means re-pointing an alias here, never editing a section's own CSS. ──────────────────────────────────────────────────────────────────────── */ /* Surface */ --gl-color-surface-canvas: var(--gl-neutral-0); --gl-color-surface-raised: var(--gl-neutral-0); --gl-color-surface-hover: var(--gl-neutral-25); --gl-color-surface-sunken: var(--gl-neutral-50); --gl-color-surface-muted: var(--gl-neutral-100); --gl-color-surface-inverse: var(--gl-neutral-900); --gl-color-surface-letterbox: var(--gl-neutral-950); --gl-color-surface-accent-soft: rgba(255, 72, 55, 0.08); --gl-color-surface-success: var(--gl-green-50); /* Border — the system draws hairlines in exactly TWO colours, and which one a mark uses is decided by the surface beneath it and by nothing else: light surfaces --gl-color-border-rule #f0f0f2 dark surfaces --gl-color-border-inverse #1e1e1e `--gl-color-border-rule` is the load-bearing token of the whole system: the two constant verticals, every module divider, every hairline — and, because the blueprint lattice below is drawn from these same two tokens, every grid line as well. A drawn grid line and a drawn border are the same mark, and they frequently meet, so they must never be two slightly different greys. */ --gl-color-border-rule: var(--gl-neutral-175); --gl-color-border-inverse: var(--gl-neutral-795); /* These role names survive so no section stylesheet needed changing, but they are no longer distinct VALUES — side by side, four near-identical light greys read as inconsistency rather than as hierarchy. If a genuine second light hairline is ever wanted, re-point one here. */ --gl-color-border-subtle: var(--gl-color-border-rule); --gl-color-border-elevated: var(--gl-color-border-rule); --gl-color-border-strong: var(--gl-color-border-rule); --gl-color-border-dashed: var(--gl-color-border-rule); --gl-color-border-media: var(--gl-color-border-rule); /* Deliberately OUTSIDE the two-colour rule: these are not resting borders but interaction states on form controls. Folding them onto `--gl-color-border-rule` would leave a focused field looking identical to an idle one, which is a change to what the form communicates. `-interactive` also doubles as a small solid fill (the footer's legal dot), which is not a border at all. */ --gl-color-border-interactive: var(--gl-neutral-450); --gl-color-border-selected: var(--gl-neutral-1000); /* Text — two rules shape this ramp. Headings are dark but never black; the darkest tone in the system is #23282f, a cool near-black that still reads as a colour rather than as maximum ink. Prose is lighter than the headings by a clear margin, and that separation is what carries hierarchy, since weight never varies and tracking is 0 everywhere. Everything clears WCAG AA on white: the lightest tier here (captions, the smallest type in the system) is 5.0:1. */ --gl-color-text-primary: var(--gl-neutral-790); /* 14.7:1 — headings */ --gl-color-text-heading: var(--gl-neutral-780); /* 11.4:1 — headings */ --gl-color-text-secondary: var(--gl-neutral-725); /* 7.8:1 — prose */ --gl-color-text-body: var(--gl-neutral-675); /* 5.8:1 — prose on panels */ --gl-color-text-muted: var(--gl-neutral-640); /* 5.0:1 — captions */ --gl-color-text-metric: var(--gl-neutral-640); --gl-color-text-inverse: var(--gl-neutral-0); /* Not a straight neutral swap of -secondary: that token is tuned for white backgrounds and reads too low-contrast reversed onto black. */ --gl-color-text-inverse-secondary: rgba(255, 255, 255, 0.74); --gl-color-text-accent: var(--gl-rose-600); --gl-color-text-decoration: var(--gl-neutral-500); --gl-color-text-success: var(--gl-green-600); /* Accent */ --gl-color-accent: var(--gl-rose-600); --gl-color-accent-hover: var(--gl-rose-700); --gl-color-accent-glow: rgba(255, 72, 55, 0.35); /* Quantitative marks — meter fills and timeline markers. The source deliberately warms these off the rose accent. */ --gl-color-data-fill: var(--gl-signal-600); --gl-color-data-track: var(--gl-neutral-250); --gl-color-data-track-alt: var(--gl-neutral-300); --gl-color-data-inert: var(--gl-neutral-400); /* The plate tones, one set per Tal-band tab. A tone is FIVE values in the section's own stylesheet — a ground, two pools, an angle and two corners — of which four are colours and live here. */ --gl-color-surface-plate-read: var(--gl-plate-read-50); --gl-color-surface-plate-read-pool-a: var(--gl-plate-read-100); --gl-color-surface-plate-read-pool-b: var(--gl-plate-read-150); --gl-color-surface-plate-ask: var(--gl-plate-ask-50); --gl-color-surface-plate-ask-pool-a: var(--gl-plate-ask-100); --gl-color-surface-plate-ask-pool-b: var(--gl-plate-ask-150); --gl-color-surface-plate-voice: var(--gl-plate-voice-50); --gl-color-surface-plate-voice-pool-a: var(--gl-plate-voice-100); --gl-color-surface-plate-voice-pool-b: var(--gl-plate-voice-150); --gl-color-plate-line-read: var(--gl-plate-read-200); --gl-color-plate-line-ask: var(--gl-plate-ask-200); --gl-color-plate-line-voice: var(--gl-plate-voice-200); /* Scrollbars — see the base rules further down. */ --gl-color-scroll-thumb: var(--gl-neutral-400); --gl-color-scroll-thumb-hover: var(--gl-neutral-450); /* Ruler / gauge marks — the vertical measuring rule in the deliverables band. Two identical tick tracks are stacked: the base track in grey, and an accent copy on top whose `clip-path` is revealed from the bottom up, so the scale reads as filling with elapsed progress. */ --gl-color-tick: var(--gl-neutral-250); --gl-color-tick-major: var(--gl-neutral-400); --gl-color-tick-progress: var(--gl-color-accent); /* Action — primary is the black square button, not the accent */ --gl-color-action-primary-bg: var(--gl-neutral-1000); --gl-color-action-primary-bg-hover: var(--gl-neutral-1000-hover); --gl-color-action-primary-fg: var(--gl-neutral-0); --gl-color-action-secondary-bg: var(--gl-neutral-100); --gl-color-action-secondary-bg-hover: #eaeaea; --gl-color-action-secondary-fg: var(--gl-color-text-primary); --gl-color-action-ghost-fg: var(--gl-color-text-secondary); --gl-color-action-ghost-fg-hover: var(--gl-color-text-primary); --gl-color-action-ghost-bg-hover: var(--gl-neutral-50); --gl-color-focus-ring: var(--gl-rose-600); /* ------------------------------------------------------------------------ Control sizing — shared by Button, TextField and PillOption so the three line up on a row without per-component magic numbers. The vertical halves are literals rather than steps off the spacing scale because they are solving for a target HEIGHT, not for a rhythm. Both button labels are 12.8px on leading 1, so the content box is a fixed 12.8px and the padding is whatever makes up the difference: lg 14 + 12.8 + 14 -> 48.96px pad 18.08 md 11 + 12.8 + 11 -> 41.76px pad 14.48 Scaling the padding itself by 1.2 would NOT give a 1.2x button, since the label's own 12.8px does not scale with it — hence the arithmetic. Only Button reads the first two; the field and pill tokens are separate and were left alone, so inputs did not grow with the buttons. ---------------------------------------------------------------------- */ --gl-control-padding-lg: 18.08px var(--gl-space-12); /* 18.08 28 */ --gl-control-padding-md: 14.48px var(--gl-space-10); /* 14.48 22 */ --gl-control-padding-field: var(--gl-space-5) var(--gl-space-6); /* 12 14 */ --gl-control-padding-pill: var(--gl-space-5) var(--gl-space-7); /* 12 16 */ /* Media treatment — the accent tint over photography. A flat overlay at 30%, derived from the accent token via color-mix, so a re-themed accent re-tints the photography automatically. */ --gl-color-media-tint: color-mix( in srgb, var(--gl-color-accent) 30%, transparent ); /* Hero ambient glow */ --gl-gradient-hero-glow: radial-gradient( ellipse 85% 100% at 50% 100%, rgba(255, 72, 55, 0.65) 0%, rgba(255, 110, 96, 0.45) 28%, rgba(255, 151, 142, 0.2) 55%, transparent 78% ); /* The accent-word text fill, as a CSS gradient. In the app this backs hero-v2's slow sweep; here it is the SAFETY NET under the plate below — see the note there. Rose stops only, never a raw hex, so re-theming the accent re-tints this too. */ --gl-gradient-accent-text: linear-gradient( 100deg, var(--gl-rose-700) 0%, var(--gl-rose-600) 30%, var(--gl-rose-500) 50%, var(--gl-rose-600) 70%, var(--gl-rose-700) 100% ); /* The hero's accent word ("TALENT") is filled with a supplied gradient plate rather than a CSS gradient — the artwork's ramp runs deep rose on the left out to a near-white pink on the right, which no stop list reproduces exactly. Painted through the letterforms with `background-clip: text`, so it behaves as a fill, not a background box. ⚠ THIS URL MUST RESOLVE. The word is painted with `background-clip: text` over a transparent fill, so if the file 404s there is nothing to paint through the letterforms and the headline goes INVISIBLE — it still takes up its space, which is what makes the failure look like a layout bug rather than a missing asset. The hero layers `--gl-gradient-accent-text` underneath as a safety net, so a missing plate now costs the exact artwork rather than the whole headline. */ --gl-image-accent-plate: url("/wp-content/uploads/2026/09/maskgradient.png"); /* The blueprint lattice — the hero's backdrop and the spacer panels that open other sections. Its lines are drawn in the border tokens, not in colours of their own: a grid line and a module's hairline are the same mark doing the same job, and they frequently meet, so painting them in two near-but-not-quite greys shows the join as a visible step. */ --gl-gradient-blueprint: linear-gradient( to right, var(--gl-color-border-rule) 1px, transparent 1px ), linear-gradient(to bottom, var(--gl-color-border-rule) 1px, transparent 1px); --gl-gradient-blueprint-inverse: linear-gradient( to right, var(--gl-color-border-inverse) 1px, transparent 1px ), linear-gradient( to bottom, var(--gl-color-border-inverse) 1px, transparent 1px ); /* The lattice is defined by how many cells span the canvas, not by a fixed cell width, because the grid has to line up with the two sitewide verticals at every viewport width. Every box that draws it is exactly as wide as the canvas column, so sizing the columns as `100% / n` puts a line precisely on the left rule and closes the last cell precisely on the right one — no half-column sliver cropped off at the edge, which is what a fixed cell width leaves behind at all but a handful of window widths. */ --gl-blueprint-columns: 25; --gl-blueprint-cell-x: calc(100% / var(--gl-blueprint-columns)); /* The row height in px, since a vertical percentage would resolve against each box's own height and make the cells different shapes in every section. Derived from the same division so the cells stay square — it is off by the two hairlines' share (2px / 25, well under a tenth of a pixel) and reads as exact. */ --gl-blueprint-cell: calc( var(--gl-frame-max-width) / var(--gl-blueprint-columns) ); --gl-mask-blueprint: radial-gradient( ellipse 65% 55% at 50% 45%, rgba(0, 0, 0, 1) 15%, rgba(0, 0, 0, 0) 75% ); } /* ══════════════════════════════════════════════════════════════════════════ The architectural frame -------------------------------------------------------------------------- Two constant 1px verticals run uninterrupted from the top of the sticky header to the bottom of the footer; no section may bleed past them. Each section is a ruled box inside them, closed off at the bottom by the same hairline, so consecutive sections never double up on a 2px seam. In the app the verticals are drawn once, by GridCanvas, for the whole page. Drawn per section they render identically — the sections stack edge to edge with no gaps — and that is what lets each one ship as its own Elementor template. Add `tn-section` to any section's top-level container. Set the container's own Content Width to Boxed / 1400px so the panel reads correctly; the `min()` term is the half Elementor's control cannot express, which is why this one declaration has to win. ══════════════════════════════════════════════════════════════════════════ */ .tn-section { font-family: var(--gl-font-sans); background-color: var(--gl-color-surface-canvas); } .tn-section > .e-con-inner { max-width: var(--gl-frame-max-width) !important; position: relative; border-left: var(--gl-border-width-hairline) solid var(--gl-color-border-rule); border-right: var(--gl-border-width-hairline) solid var(--gl-color-border-rule); border-bottom: var(--gl-border-width-hairline) solid var(--gl-color-border-rule); } /* The footer sits inside the same frame as everything above it, so it takes the same two rails. In the app this is not a decision the footer makes at all: one `GridCanvas` wraps the whole document and its left and right borders ARE the rails, running unbroken from the first section to the last line of the footer. The port draws them per module instead, which means any module that is not a `.tn-section` has to say so - and the footer, being a theme-builder template of its own, was the one that did not. No bottom rule here. The section rule carries one because a section closes against the next; the footer closes against the accent line above the copyright, which is already the strongest horizontal in the module. */ .tn-footer > .e-con-inner { max-width: var(--gl-frame-max-width) !important; position: relative; border-left: var(--gl-border-width-hairline) solid var(--gl-color-border-rule); border-right: var(--gl-border-width-hairline) solid var(--gl-color-border-rule); } /* Sections hosting a full-bleed treatment (the hero's glow, a pinned stage) clip their own overflow so nothing escapes the frame. */ .tn-section--clip > .e-con-inner { overflow: hidden; } /* ══════════════════════════════════════════════════════════════════════════ The crosshair -------------------------------------------------------------------------- The `+` registration mark, borrowed from technical drawing: it marks the corners of a module so the eye reads the layout as a measured plan rather than as a web page. Purely decorative. Add `tn-crosshairs` to an empty container placed as the first child of a section's frame, and it draws the top pair. `tn-crosshairs--bottom` draws the bottom pair instead. ══════════════════════════════════════════════════════════════════════════ */ .tn-crosshairs { position: absolute !important; inset: 0; pointer-events: none; z-index: var(--gl-z-decoration); } .tn-crosshairs::before, .tn-crosshairs::after { content: "+"; position: absolute; top: var(--gl-space-5); font-family: var(--gl-font-mono); font-size: var(--gl-size-body-sm); line-height: var(--gl-leading-flat); color: var(--gl-color-text-decoration); user-select: none; } .tn-crosshairs::before { left: var(--gl-space-6); } .tn-crosshairs::after { right: var(--gl-space-6); } .tn-crosshairs--bottom::before, .tn-crosshairs--bottom::after { top: auto; bottom: var(--gl-space-5); } /* ══════════════════════════════════════════════════════════════════════════ The blueprint lattice -------------------------------------------------------------------------- Faded out radially so it reads only behind the copy and never competes with whatever art the section is carrying. Add `tn-blueprint` to an empty container inside a section's frame. ══════════════════════════════════════════════════════════════════════════ */ .tn-blueprint { position: absolute !important; inset: 0; pointer-events: none; z-index: var(--gl-z-base); background-image: var(--gl-gradient-blueprint); /* Columns as a share of the box, rows in px — see the token block. The box is the full width of the canvas column, so `left top` starts the lattice on the left rule and the 25th column closes on the right one. */ background-size: var(--gl-blueprint-cell-x) var(--gl-blueprint-cell); background-position: left top; -webkit-mask-image: var(--gl-mask-blueprint); mask-image: var(--gl-mask-blueprint); } /* The inverse lattice, for dark bands. Same cell size, so the two are interchangeable and stay on one grid. */ .tn-blueprint--inverse { background-image: var(--gl-gradient-blueprint-inverse); } /* ══════════════════════════════════════════════════════════════════════════ Document base -------------------------------------------------------------------------- The part of the app's reset (gridline/styles/reset.css) that the sections actually depend on. Everything else in that file is per-element defaults the templates set explicitly on their own widgets. ══════════════════════════════════════════════════════════════════════════ */ html { /* THE 1rem base the whole modular scale is measured from. Every type size in the token block above is a rem step off this — `--gl-scale-h1: 3.8147rem` is the 61.04px rung — so if a theme sets its own root size (62.5% is a common one, which would make it 38.1px) the entire scale rescales with it. Pinning it is what makes the port's type match the app's at all, and it is not optional. */ font-size: 16px; color-scheme: light; background-color: var(--gl-color-surface-canvas); /* In-page anchors land below the sticky bar, not underneath it. */ scroll-behavior: smooth; scroll-padding-top: var(--gl-header-height); /* `vw` units measure the viewport INCLUDING the space a scrollbar takes up, but the scrollbar only ever eats into the right edge — so a full-bleed element sized with `100vw` (the deliverables band, the two footer bars) comes out slightly too wide and shifted, leaving a sliver of the page's own background exposed on the right only. Reserving a stable gutter up front removes that mismatch at the source, for every full-bleed element at once, rather than patching each one. */ scrollbar-gutter: stable; } /* `position: sticky` — which is how both pinned sections are built — stops working the moment an ancestor becomes a scroll container, and `overflow-x: hidden` on html or body makes one: per spec, a single non-`visible` axis computes the other to `auto`. Plenty of themes set exactly that, and the app itself does (it pins with GSAP, so it does not care). `clip` prevents the same horizontal bleed WITHOUT creating a scroll container, so it is the one safe substitute. It lives here rather than in a section's own stylesheet because BOTH pinned sections depend on it — in one template, importing the other alone would silently break its pin. */ html, body { overflow-x: clip; } body { font-family: var(--gl-font-sans); background-color: var(--gl-color-surface-canvas); color: var(--gl-color-text-primary); font-weight: var(--gl-weight-regular); /* Not cosmetic at this type size: the system runs one weight everywhere and leans on long headline settings, and unsmoothed Regular reads noticeably heavier and coarser than the app does. */ text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ══════════════════════════════════════════════════════════════════════════ Scrollbars — every scroller on the site, drawn once -------------------------------------------------------------------------- The default bar is a 15px slab of system chrome with a hard-edged grey thumb running corner to corner, and on a page whose entire visual argument is fine rules and generous white space it is the single least considered thing on screen. WHAT MAKES IT THIN IS THE TRANSPARENT BORDER, not the track width. The track stays 10px, which is what the pointer has to hit; the thumb takes a 3px transparent border and `background-clip: content-box`, so what is PAINTED is a 4px capsule floating in the middle of a 10px lane. Narrowing the track itself would have given a 4px target, which is a thing you chase rather than grab. The same trick is why the thumb has real margins at the ends of its travel rather than butting into the corners. Two declarations of everything, and both are needed for a while yet: `scrollbar-width` / `scrollbar-color` is the standard and is what Firefox reads; the `::-webkit-scrollbar` pseudo-elements are what Chrome and Safari read, and they are the only one of the two that can express the inset capsule. `scrollbar-width` is not inherited, hence the `*`. Note the interaction with `scrollbar-gutter: stable` above: styling the WebKit pseudo-elements opts that engine out of overlay scrollbars, so the bar takes real layout space. The gutter is already reserved for exactly that reason, so nothing shifts. ══════════════════════════════════════════════════════════════════════════ */ * { scrollbar-width: thin; scrollbar-color: var(--gl-color-scroll-thumb) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; } ::-webkit-scrollbar-thumb { background-color: var(--gl-color-scroll-thumb); /* 3px of transparent border either side of a 10px track leaves a 4px capsule. `content-box` is what keeps the border transparent rather than filled. */ border: 3px solid transparent; background-clip: content-box; border-radius: var(--gl-radius-full); } ::-webkit-scrollbar-thumb:hover { background-color: var(--gl-color-scroll-thumb-hover); } ::selection { background-color: var(--gl-color-accent); color: var(--gl-color-text-inverse); } :focus-visible { outline: var(--gl-border-width-thick) solid var(--gl-color-focus-ring); outline-offset: 1px; } /* The app's reset makes every image a block. Elementor renders them inline-block, which leaves the image sitting in a line box — a few px of phantom height under it, enough to overflow any of the fixed-height media boxes these sections use (the interview plates, the how-it-works frame, the archetype cards). Scoped to image widgets so icon glyphs elsewhere are left alone. */ .tn-section .elementor-widget-image img, .tn-deliv .elementor-widget-image img { display: block; } /* Respect the viewer's motion preference. Each section's script checks this too and skips its timeline, but the ambient CSS loops — the hero's three floating cards — are not scripted at all, so without this they would keep moving. The app relies on exactly this rule for the same reason. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }/* End custom CSS */