.elementor-kit-32{--e-global-color-primary:#1C1C1C;--e-global-color-secondary:#1F6F78;--e-global-color-text:#425563;--e-global-color-accent:#F16C20;--e-global-color-cndeep:#17466B;--e-global-color-cnteallt:#4B9299;--e-global-color-cnorglt:#FFAA5C;--e-global-color-cnorgdk:#D9620D;--e-global-color-cnhead:#17262E;--e-global-color-cnmuted:#65747B;--e-global-color-cnborder:#DDE6EA;--e-global-color-cnmist:#F5F8FA;--e-global-color-cnsand:#F4F1EA;--e-global-color-cnwarm:#FAFAF7;--e-global-color-cnwhite:#FFFFFF;--e-global-color-5ccab08:#D7E0E2;--e-global-color-e5a0863:#35515B;--e-global-color-c716a73:#123441;--e-global-color-3142724:#355663;--e-global-color-4825b17:#C7D1D5;--e-global-color-0b903de:#1F5D90;--e-global-color-3e5aaa2:#4A9546;--e-global-color-357d0b3:#333333;--e-global-color-3e23f8d:#666666;--e-global-color-e2130a4:#F7F8FA;--e-global-color-b965819:#E5E5E5;--e-global-typography-primary-font-family:"Host Grotesk";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Host Grotesk";--e-global-typography-secondary-font-weight:500;--e-global-typography-text-font-family:"Host Grotesk";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Host Grotesk";--e-global-typography-accent-font-weight:600;--e-global-typography-cnh1-font-family:"Host Grotesk";--e-global-typography-cnh1-font-size:56px;--e-global-typography-cnh1-font-weight:600;--e-global-typography-cnh1-line-height:1.08em;--e-global-typography-cnh1-letter-spacing:-1.2px;--e-global-typography-cnh2-font-family:"Host Grotesk";--e-global-typography-cnh2-font-size:40px;--e-global-typography-cnh2-font-weight:600;--e-global-typography-cnh2-line-height:1.15em;--e-global-typography-cnh2-letter-spacing:-0.7px;--e-global-typography-cnh3-font-family:"Host Grotesk";--e-global-typography-cnh3-font-size:28px;--e-global-typography-cnh3-font-weight:600;--e-global-typography-cnh3-line-height:1.2em;--e-global-typography-cnh3-letter-spacing:-0.3px;--e-global-typography-cnbody-font-family:"Host Grotesk";--e-global-typography-cnbody-font-size:18px;--e-global-typography-cnbody-font-weight:400;--e-global-typography-cnbody-line-height:1.65em;--e-global-typography-cnbody-letter-spacing:0px;--e-global-typography-cneyebrow-font-family:"Host Grotesk";--e-global-typography-cneyebrow-font-size:13px;--e-global-typography-cneyebrow-font-weight:600;--e-global-typography-cneyebrow-text-transform:uppercase;--e-global-typography-cneyebrow-line-height:1.2em;--e-global-typography-cneyebrow-letter-spacing:1.6px;--e-global-typography-cnbutton-font-family:"Host Grotesk";--e-global-typography-cnbutton-font-size:16px;--e-global-typography-cnbutton-font-weight:600;--e-global-typography-cnbutton-line-height:1.2em;--e-global-typography-cnbutton-letter-spacing:0.2px;color:var( --e-global-color-text );font-family:var( --e-global-typography-cnbody-font-family ), Sans-serif;font-size:var( --e-global-typography-cnbody-font-size );font-weight:var( --e-global-typography-cnbody-font-weight );line-height:var( --e-global-typography-cnbody-line-height );letter-spacing:var( --e-global-typography-cnbody-letter-spacing );}.elementor-kit-32 button,.elementor-kit-32 input[type="button"],.elementor-kit-32 input[type="submit"],.elementor-kit-32 .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-cnbutton-font-family ), Sans-serif;font-size:var( --e-global-typography-cnbutton-font-size );font-weight:var( --e-global-typography-cnbutton-font-weight );line-height:var( --e-global-typography-cnbutton-line-height );letter-spacing:var( --e-global-typography-cnbutton-letter-spacing );color:var( --e-global-color-cndeep );border-style:none;border-radius:6px 6px 6px 6px;padding:14px 26px 14px 26px;}.elementor-kit-32 button:hover,.elementor-kit-32 button:focus,.elementor-kit-32 input[type="button"]:hover,.elementor-kit-32 input[type="button"]:focus,.elementor-kit-32 input[type="submit"]:hover,.elementor-kit-32 input[type="submit"]:focus,.elementor-kit-32 .elementor-button:hover,.elementor-kit-32 .elementor-button:focus{background-color:var( --e-global-color-cndeep );color:var( --e-global-color-cnwhite );border-style:none;}.elementor-kit-32 e-page-transition{background-color:#FFBC7D;}.elementor-kit-32 a{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-kit-32 a:hover{color:var( --e-global-color-primary );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-kit-32 h1{color:var( --e-global-color-primary );font-family:var( --e-global-typography-cnh1-font-family ), Sans-serif;font-size:var( --e-global-typography-cnh1-font-size );font-weight:var( --e-global-typography-cnh1-font-weight );line-height:var( --e-global-typography-cnh1-line-height );letter-spacing:var( --e-global-typography-cnh1-letter-spacing );}.elementor-kit-32 h2{color:var( --e-global-color-cnhead );font-family:var( --e-global-typography-cnh2-font-family ), Sans-serif;font-size:var( --e-global-typography-cnh2-font-size );font-weight:var( --e-global-typography-cnh2-font-weight );line-height:var( --e-global-typography-cnh2-line-height );letter-spacing:var( --e-global-typography-cnh2-letter-spacing );}.elementor-kit-32 h3{color:var( --e-global-color-cnhead );font-family:var( --e-global-typography-cnh3-font-family ), Sans-serif;font-size:var( --e-global-typography-cnh3-font-size );font-weight:var( --e-global-typography-cnh3-font-weight );line-height:var( --e-global-typography-cnh3-line-height );letter-spacing:var( --e-global-typography-cnh3-letter-spacing );}.elementor-kit-32 h4{color:var( --e-global-color-cnhead );font-family:"Space Grotesk", Sans-serif;font-size:22px;font-weight:600;text-transform:capitalize;font-style:normal;text-decoration:none;line-height:1.25em;letter-spacing:0px;}.elementor-kit-32 h5{color:var( --e-global-color-cnhead );font-family:"Space Grotesk", Sans-serif;font-size:18px;}.elementor-kit-32 h6{color:var( --e-global-color-cnhead );font-family:"Space Grotesk", Sans-serif;font-size:15px;}.elementor-kit-32 label{color:var( --e-global-color-cnhead );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-kit-32 input:not([type="button"]):not([type="submit"]),.elementor-kit-32 textarea,.elementor-kit-32 .elementor-field-textual{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-primary );background-color:var( --e-global-color-cnwhite );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-cnborder );border-radius:6px 6px 6px 6px;padding:14px 16px 14px 16px;}.elementor-kit-32 input:focus:not([type="button"]):not([type="submit"]),.elementor-kit-32 textarea:focus,.elementor-kit-32 .elementor-field-textual:focus{background-color:var( --e-global-color-cnwhite );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-secondary );border-radius:6px 6px 6px 6px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;--container-default-padding-top:0px;--container-default-padding-right:24px;--container-default-padding-bottom:0px;--container-default-padding-left:24px;}.elementor-widget:not(:last-child){--kit-widget-spacing:16px;}.elementor-element{--widgets-spacing:16px 16px;--widgets-spacing-row:16px;--widgets-spacing-column:16px;}{}h1.entry-title{display:var(--page-title-display);}@media(min-width:2400px){.elementor-kit-32{font-size:var( --e-global-typography-cnbody-font-size );line-height:var( --e-global-typography-cnbody-line-height );letter-spacing:var( --e-global-typography-cnbody-letter-spacing );}.elementor-kit-32 h1{font-size:var( --e-global-typography-cnh1-font-size );line-height:var( --e-global-typography-cnh1-line-height );letter-spacing:var( --e-global-typography-cnh1-letter-spacing );}.elementor-kit-32 h2{font-size:var( --e-global-typography-cnh2-font-size );line-height:var( --e-global-typography-cnh2-line-height );letter-spacing:var( --e-global-typography-cnh2-letter-spacing );}.elementor-kit-32 h3{font-size:var( --e-global-typography-cnh3-font-size );line-height:var( --e-global-typography-cnh3-line-height );letter-spacing:var( --e-global-typography-cnh3-letter-spacing );}.elementor-kit-32 button,.elementor-kit-32 input[type="button"],.elementor-kit-32 input[type="submit"],.elementor-kit-32 .elementor-button{font-size:var( --e-global-typography-cnbutton-font-size );line-height:var( --e-global-typography-cnbutton-line-height );letter-spacing:var( --e-global-typography-cnbutton-letter-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;}}@media(max-width:1366px){.elementor-kit-32{font-size:var( --e-global-typography-cnbody-font-size );line-height:var( --e-global-typography-cnbody-line-height );letter-spacing:var( --e-global-typography-cnbody-letter-spacing );}.elementor-kit-32 h1{font-size:var( --e-global-typography-cnh1-font-size );line-height:var( --e-global-typography-cnh1-line-height );letter-spacing:var( --e-global-typography-cnh1-letter-spacing );}.elementor-kit-32 h2{font-size:var( --e-global-typography-cnh2-font-size );line-height:var( --e-global-typography-cnh2-line-height );letter-spacing:var( --e-global-typography-cnh2-letter-spacing );}.elementor-kit-32 h3{font-size:var( --e-global-typography-cnh3-font-size );line-height:var( --e-global-typography-cnh3-line-height );letter-spacing:var( --e-global-typography-cnh3-letter-spacing );}.elementor-kit-32 button,.elementor-kit-32 input[type="button"],.elementor-kit-32 input[type="submit"],.elementor-kit-32 .elementor-button{font-size:var( --e-global-typography-cnbutton-font-size );line-height:var( --e-global-typography-cnbutton-line-height );letter-spacing:var( --e-global-typography-cnbutton-letter-spacing );}}@media(max-width:1200px){.e-con{--container-default-padding-top:0px;--container-default-padding-right:24px;--container-default-padding-bottom:0px;--container-default-padding-left:24px;}}@media(max-width:1024px){.elementor-kit-32{--e-global-typography-cnh1-font-size:40px;--e-global-typography-cnh2-font-size:32px;--e-global-typography-cnh3-font-size:24px;--e-global-typography-cnbody-font-size:17px;--e-global-typography-cneyebrow-font-size:13px;--e-global-typography-cnbutton-font-size:15px;font-size:var( --e-global-typography-cnbody-font-size );line-height:var( --e-global-typography-cnbody-line-height );letter-spacing:var( --e-global-typography-cnbody-letter-spacing );}.elementor-kit-32 h1{font-size:var( --e-global-typography-cnh1-font-size );line-height:var( --e-global-typography-cnh1-line-height );letter-spacing:var( --e-global-typography-cnh1-letter-spacing );}.elementor-kit-32 h2{font-size:var( --e-global-typography-cnh2-font-size );line-height:var( --e-global-typography-cnh2-line-height );letter-spacing:var( --e-global-typography-cnh2-letter-spacing );}.elementor-kit-32 h3{font-size:var( --e-global-typography-cnh3-font-size );line-height:var( --e-global-typography-cnh3-line-height );letter-spacing:var( --e-global-typography-cnh3-letter-spacing );}.elementor-kit-32 button,.elementor-kit-32 input[type="button"],.elementor-kit-32 input[type="submit"],.elementor-kit-32 .elementor-button{font-size:var( --e-global-typography-cnbutton-font-size );line-height:var( --e-global-typography-cnbutton-line-height );letter-spacing:var( --e-global-typography-cnbutton-letter-spacing );}}@media(max-width:767px){.elementor-kit-32{--e-global-typography-cnh1-font-size:32px;--e-global-typography-cnh2-font-size:28px;--e-global-typography-cnh3-font-size:22px;--e-global-typography-cnbody-font-size:16px;--e-global-typography-cneyebrow-font-size:12px;--e-global-typography-cnbutton-font-size:15px;font-size:var( --e-global-typography-cnbody-font-size );line-height:var( --e-global-typography-cnbody-line-height );letter-spacing:var( --e-global-typography-cnbody-letter-spacing );}.elementor-kit-32 h1{font-size:var( --e-global-typography-cnh1-font-size );line-height:var( --e-global-typography-cnh1-line-height );letter-spacing:var( --e-global-typography-cnh1-letter-spacing );}.elementor-kit-32 h2{font-size:var( --e-global-typography-cnh2-font-size );line-height:var( --e-global-typography-cnh2-line-height );letter-spacing:var( --e-global-typography-cnh2-letter-spacing );}.elementor-kit-32 h3{font-size:var( --e-global-typography-cnh3-font-size );line-height:var( --e-global-typography-cnh3-line-height );letter-spacing:var( --e-global-typography-cnh3-letter-spacing );}.elementor-kit-32 h4{font-size:18px;}.elementor-kit-32 button,.elementor-kit-32 input[type="button"],.elementor-kit-32 input[type="submit"],.elementor-kit-32 .elementor-button{font-size:var( --e-global-typography-cnbutton-font-size );line-height:var( --e-global-typography-cnbutton-line-height );letter-spacing:var( --e-global-typography-cnbutton-letter-spacing );}.e-con{--container-default-padding-top:0px;--container-default-padding-right:20px;--container-default-padding-bottom:0px;--container-default-padding-left:20px;}}/* Start custom CSS *//* ========================================================= CHARLOTTE NETWORKS — GLOBAL DESIGN SYSTEM Version: 2.2.0 Date: 2026-09-21 Supersedes: v2.1.0 (archived) Optimization scope: - Preserves .elementor-kit-32s because page HTML snippets and Elementor page-level CSS also participate in the design system. - Repairs malformed mobile transition-hero CSS. - Removes temporary diagnostic heading override. - Reduces mobile hero animation/paint work. - Uses system-font fallback for mobile hero copy to reduce LCP - v2.1.0 strengthened the homepage .cn-hero text override so Elementor child typography cannot reintroduce Host Grotesk - v2.2.0 optimizes the actual homepage SVG hero on mobile by suppressing SMIL signal traffic and expensive SVG glow work while Host Grotesk webfont delivery is being optimized. ========================================================= */ /* ========================================================= 01 — DESIGN TOKENS Edit global values here first. ========================================================= */ :root { /* BRAND */ --cn-deep: #17466B; --cn-deep-bright: #1F5D90; --cn-orange: #F16C20; --cn-green: #4A9546; /* TEXT */ --cn-ink: #1C1C1C; --cn-text: #333333; --cn-muted: #666666; /* SURFACES */ --cn-white: #FFFFFF; --cn-light: #F7F8FA; --cn-border: #E5E5E5; /* EFFECTS */ --cn-shadow-soft: rgba(0,0,0,.08); --cn-shadow-medium: rgba(0,0,0,.12); --cn-post-shadow: 0 16px 38px rgba(23,70,107,.10); /* LAYOUT */ --cn-content-width: 1280px; --cn-reading-width: 1100px; --cn-post-reading-width: 820px; --cn-post-wide-width: 1080px; /* CORNERS */ --cn-radius-button: 8px; --cn-radius-card: 14px; --cn-radius-large: 18px; --cn-post-radius: 10px; /* ======================================================= PAGE HERO COLORS Each page gets a related but slightly different tone. ======================================================= */ --cn-hero-home: #17466B; --cn-hero-home-soft: #235A82; --cn-hero-services: #0D3B43; --cn-hero-services-soft: #165761; --cn-hero-industries: #242D4B; --cn-hero-industries-soft: #35446F; --cn-hero-about: #1B3A55; --cn-hero-about-soft: #2A526F; --cn-hero-contact: #16394D; --cn-hero-contact-soft: #22576C; } /* ========================================================= 02 — GLOBAL BUTTON SYSTEM ========================================================= */ .cn-button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 56px; padding: 15px 26px; border-radius: var(--cn-radius-button); text-decoration: none; font-size: 15px; font-weight: 700; line-height: 1; transition: transform .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease, filter .2s ease; } .cn-button:hover { transform: translateY(-2px); } .cn-button span { transition: transform .2s ease; } .cn-button:hover span { transform: translateX(3px); } .cn-button--primary { background: var(--cn-orange); border: 2px solid var(--cn-orange); color: var(--cn-deep); } .cn-button--primary:hover { filter: brightness(1.08); } .cn-button--secondary { background: transparent; border: 2px solid rgba(255,255,255,.30); color: var(--cn-white); } .cn-button--secondary:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.75); } /* ========================================================= 03 — COMMON UI ========================================================= */ .cn-eyebrow { color: var(--cn-orange); font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; } .cn-pips { display: inline-grid; grid-template-columns: repeat(4,8px); gap: 5px; } .cn-pips span { width: 8px; height: 8px; border-radius: 50%; background: var(--cn-border); } .cn-pips span:first-child { background: var(--cn-orange); } /* ========================================================= 04 — GLOBAL HERO SYSTEM ========================================================= */ .cn-hero { --hero-bg: var(--cn-deep); --hero-bg-soft: var(--cn-deep-bright); --hero-accent: var(--cn-orange); --hero-text: var(--cn-white); --hero-muted: rgba(255,255,255,.78); position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; width: 100%; min-height: 720px; color: var(--hero-text); background: radial-gradient( circle at 79% 45%, color-mix(in srgb, var(--hero-accent) 8%, transparent), transparent 27% ), radial-gradient( circle at 79% 48%, color-mix(in srgb, var(--hero-bg-soft) 72%, transparent), transparent 52% ), var(--hero-bg); } /* HERO CONTENT */ .cn-hero__inner { position: relative; z-index: 5; width: min( var(--cn-content-width), calc(100% - 48px) ); margin-inline: auto; padding: 130px 0 120px; } .cn-hero__copy { max-width: 875px; } .cn-hero__eyebrow { margin-bottom: 24px; color: var(--hero-accent) !important; font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; } .cn-hero__title { max-width: 875px; margin: 0; color: var(--hero-text) !important; font-size: clamp(46px,5.25vw,77px); font-weight: 700; line-height: 1; letter-spacing: -.045em; } .cn-hero__text { max-width: 730px; margin: 30px 0 0; color: var(--hero-muted) !important; font-size: 19px; line-height: 1.68; } .cn-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; } /* ELEMENTOR BUTTON PROTECTION */ .cn-hero .cn-button--primary { color: var(--cn-deep) !important; } .cn-hero .cn-button--secondary, .cn-hero .cn-button--secondary:hover { color: var(--cn-white) !important; } /* ========================================================= 05 — SHARED HERO MOTION ========================================================= */ .cn-hero__motion { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } /* GRID */ .cn-hero__grid { position: absolute; width: 900px; height: 900px; right: -210px; top: 50%; transform: translateY(-50%) rotate(-12deg); background-image: linear-gradient( rgba(255,255,255,.06) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.06) 1px, transparent 1px ); background-size: 58px 58px; background-position: 0 0; opacity: .30; -webkit-mask-image: radial-gradient( circle, #000, transparent 72% ); mask-image: radial-gradient( circle, #000, transparent 72% ); animation: cnHeroGrid 28s linear infinite; } /* RINGS */ .cn-hero__ring { position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.10); animation: cnHeroFloat 17s ease-in-out infinite alternate; } .cn-hero__ring--1 { width: 650px; height: 650px; right: -65px; top: 38px; } .cn-hero__ring--2 { width: 470px; height: 470px; right: 115px; top: 135px; border-color: color-mix( in srgb, var(--hero-accent) 24%, transparent ); animation-duration: 22s; } .cn-hero__ring--3 { width: 290px; height: 290px; right: 295px; top: 230px; opacity: .70; animation-duration: 14s; } /* NODES */ .cn-hero__node { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--hero-accent); box-shadow: 0 0 0 6px color-mix( in srgb, var(--hero-accent) 10%, transparent ), 0 0 24px color-mix( in srgb, var(--hero-accent) 45%, transparent ); animation: cnHeroPulse 4.5s ease-in-out infinite; } .cn-hero__node--1 { right: 35%; top: 31%; } .cn-hero__node--2 { right: 21%; top: 48%; animation-delay: .9s; } .cn-hero__node--3 { right: 10%; top: 25%; animation-delay: 1.8s; } .cn-hero__node--4 { right: 27%; top: 72%; animation-delay: 2.7s; } /* FOUR-PIP BRAND DETAIL */ .cn-hero__pips { position: absolute; right: 19%; top: 52%; display: grid; grid-template-columns: repeat(2,9px); gap: 8px; transform: rotate(45deg); opacity: .75; } .cn-hero__pips span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.27); } .cn-hero__pips span:first-child { background: var(--hero-accent); box-shadow: 0 0 20px color-mix( in srgb, var(--hero-accent) 50%, transparent ); animation: cnHeroPip 5.4s ease-in-out infinite; } /* TEXT-SIDE PROTECTION */ .cn-hero__fade { position: absolute; inset: 0; background: linear-gradient( 90deg, var(--hero-bg) 0%, color-mix( in srgb, var(--hero-bg) 94%, transparent ) 27%, color-mix( in srgb, var(--hero-bg) 62%, transparent ) 49%, transparent 78% ); } /* ========================================================= 06 — PAGE HERO COLORS / MODIFIERS ========================================================= */ /* HOME */ .cn-hero--home { --hero-bg: var(--cn-hero-home); --hero-bg-soft: var(--cn-hero-home-soft); } /* SERVICES */ .cn-hero--services { --hero-bg: var(--cn-hero-services); --hero-bg-soft: var(--cn-hero-services-soft); } /* INDUSTRIES */ .cn-hero--industries { --hero-bg: var(--cn-hero-industries); --hero-bg-soft: var(--cn-hero-industries-soft); } /* ABOUT */ .cn-hero--about { --hero-bg: var(--cn-hero-about); --hero-bg-soft: var(--cn-hero-about-soft); } /* CONTACT */ .cn-hero--contact { --hero-bg: var(--cn-hero-contact); --hero-bg-soft: var(--cn-hero-contact-soft); } /* ========================================================= 07 — SHARED INTERNAL PAGE HERO SYSTEM Used by Services, Industries, and About. ========================================================= */ .cn-page-hero{ --page-bg-1:#0D3B43; --page-bg-2:#092C35; --page-bg-3:#071F29; --page-accent-soft:rgba(89,183,173,.18); --page-eyebrow:#8FD4CD; --page-heading-soft:#DFF5F2; --page-ring:rgba(150,222,214,.22); --page-ring-soft:rgba(150,222,214,.15); --page-glow-1:rgba(90,202,190,.19); --page-glow-2:rgba(76,175,168,.08); --page-node:#8BD7CE; --page-node-bright:#E6FBF8; --page-crown:rgba(89,183,173,.18); --page-wash-1:rgba(5,25,31,.42); --page-wash-2:rgba(5,25,31,.12); position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center; width:100%; min-height:680px; color:#fff; font-family:"Host Grotesk",Arial,sans-serif; background: radial-gradient(circle at 78% 46%,var(--page-accent-soft) 0%,transparent 53%), linear-gradient(118deg,var(--page-bg-1) 0%,var(--page-bg-2) 53%,var(--page-bg-3) 100%) !important; } .cn-page-hero--services{ --page-bg-1:#0D3B43; --page-bg-2:#092C35; --page-bg-3:#071F29; --page-accent-soft:rgba(89,183,173,.18); --page-eyebrow:#8FD4CD; --page-heading-soft:#DFF5F2; --page-ring:rgba(150,222,214,.22); --page-ring-soft:rgba(150,222,214,.15); --page-glow-1:rgba(90,202,190,.19); --page-glow-2:rgba(76,175,168,.08); --page-node:#8BD7CE; --page-node-bright:#E6FBF8; --page-crown:rgba(89,183,173,.18); --page-wash-1:rgba(5,25,31,.42); --page-wash-2:rgba(5,25,31,.12); } .cn-page-hero--industries{ --page-bg-1:#242D4B; --page-bg-2:#1B2340; --page-bg-3:#12182E; --page-accent-soft:rgba(118,136,216,.20); --page-eyebrow:#AEB9EF; --page-heading-soft:#E3E7FF; --page-ring:rgba(181,191,244,.22); --page-ring-soft:rgba(181,191,244,.15); --page-glow-1:rgba(126,145,224,.19); --page-glow-2:rgba(96,114,204,.08); --page-node:#ABB9F0; --page-node-bright:#F0F2FF; --page-crown:rgba(118,136,216,.18); --page-wash-1:rgba(12,17,37,.44); --page-wash-2:rgba(12,17,37,.13); } .cn-page-hero--about{ --page-bg-1:#1B3A55; --page-bg-2:#142F47; --page-bg-3:#0E2234; --page-accent-soft:rgba(84,145,190,.18); --page-eyebrow:#9CC9E5; --page-heading-soft:#DCECF7; --page-ring:rgba(166,205,231,.20); --page-ring-soft:rgba(166,205,231,.14); --page-glow-1:rgba(100,166,210,.18); --page-glow-2:rgba(75,126,165,.08); --page-node:#A8D2E9; --page-node-bright:#EEF8FD; --page-crown:rgba(84,145,190,.18); --page-wash-1:rgba(10,28,42,.46); --page-wash-2:rgba(10,28,42,.14); } .cn-page-hero::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.16; background-image: linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:72px 72px; -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.15) 38%,#000 100%); mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.15) 38%,#000 100%); } .cn-page-hero::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg,var(--page-wash-1) 0%,var(--page-wash-2) 48%,transparent 76%); } .cn-page-hero__inner{ position:relative; z-index:5; width:min(var(--cn-content-width),calc(100% - 48px)); margin-inline:auto; padding:105px 0 92px; } .cn-page-hero__copy{ position:relative; z-index:8; width:min(700px,59%); } .cn-page-hero__eyebrow{ display:flex; align-items:center; gap:12px; margin:0 0 22px; color:var(--page-eyebrow) !important; font-size:13px; font-weight:700; line-height:1.2; letter-spacing:.15em; text-transform:uppercase; } .cn-page-hero__eyebrow::before{ content:""; width:34px; height:2px; flex:0 0 34px; background:var(--cn-orange); } .cn-page-hero__title{ max-width:780px; margin:0; color:#fff !important; font-size:clamp(52px,5.2vw,76px); font-weight:700; line-height:.98; letter-spacing:-.045em; } .cn-page-hero__title span{ display:block; color:var(--page-heading-soft) !important; } .cn-page-hero__text{ max-width:650px; margin:28px 0 0; color:rgba(255,255,255,.76) !important; font-size:19px; line-height:1.62; } .cn-page-hero__actions{ display:flex; align-items:center; flex-wrap:wrap; gap:18px; margin-top:35px; } .cn-page-hero__primary, .cn-page-hero__secondary{ box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:52px; padding:0 25px; border-radius:3px; font-size:15px; font-weight:700; line-height:1; text-decoration:none !important; transition:transform .2s ease,background-color .2s ease,border-color .2s ease,filter .2s ease; } .cn-page-hero__primary{ color:#fff !important; background:var(--cn-orange); border:1px solid var(--cn-orange); } .cn-page-hero__primary:hover{ color:#fff !important; transform:translateY(-2px); filter:brightness(.94); } .cn-page-hero__secondary{ color:#fff !important; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.28); } .cn-page-hero__secondary:hover{ color:#fff !important; transform:translateY(-2px); background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.48); } .cn-page-hero__meta{ display:flex; flex-wrap:wrap; gap:10px 27px; margin-top:57px; padding-top:21px; border-top:1px solid rgba(255,255,255,.11); color:rgba(255,255,255,.57); font-size:11px; font-weight:700; line-height:1.3; letter-spacing:.135em; text-transform:uppercase; } .cn-page-hero__meta span{ position:relative; } .cn-page-hero__meta span:not(:last-child)::after{ content:""; position:absolute; top:50%; right:-15px; width:3px; height:3px; border-radius:50%; background:rgba(240,145,54,.66); transform:translateY(-50%); } /* ========================================================= 08 — ABOUT / CONTACT HERO MODIFIERS Retained for pages using the shared hero system. ========================================================= */ .cn-hero--about .cn-hero__ring--1 { width: 560px; height: 560px; right: 3%; } .cn-hero--about .cn-hero__ring--3 { right: 350px; } .cn-hero--contact .cn-hero__ring--1 { width: 520px; height: 520px; } .cn-hero--contact .cn-hero__grid { opacity: .20; } /* ========================================================= 09 — HERO ANIMATIONS ========================================================= */ @keyframes cnHeroGrid { from { background-position: 0 0; } to { background-position: -58px 58px; } } @keyframes cnHeroFloat { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-15px,12px,0) scale(1.025); } } @keyframes cnHeroPulse { 0%, 100% { opacity: .4; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.15); } } @keyframes cnHeroPip { 0%, 70%, 100% { opacity: .45; } 76%, 84% { opacity: 1; } } /* ========================================================= 10 — NEWS / BLOG SYSTEM Legacy VT classes intentionally retained. ========================================================= */ .single-post .vt-news-post { max-width: var(--cn-reading-width); margin: 0 auto; padding: 40px 20px; font-family: Arial, Helvetica, sans-serif; color: var(--cn-ink); line-height: 1.7; } .single-post .vt-news-eyebrow { color: var(--cn-orange); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; } .single-post .vt-news-post h1 { font-size: 42px; line-height: 1.15; color: var(--cn-deep); margin: 0 0 15px; } .single-post .vt-news-meta { font-size: 14px; color: var(--cn-muted); margin-bottom: 24px; } .single-post .vt-news-intro { font-size: 20px; color: var(--cn-text); margin-bottom: 28px; } .single-post .vt-news-featured { margin: 0 0 35px; } .single-post .vt-news-featured img { display: block; width: 60%; max-width: 700px; height: auto; margin: 0 auto; border-radius: var(--cn-radius-card); box-shadow: 0 8px 28px var(--cn-shadow-soft); } .single-post .vt-news-content h2 { color: var(--cn-deep); font-size: 30px; margin: 38px 0 15px; } .single-post .vt-news-content h3 { color: var(--cn-deep); font-size: 24px; margin: 28px 0 10px; } .single-post .vt-news-content p { margin: 0 0 18px; } .single-post .vt-news-content ul { padding-left: 22px; margin: 0 0 24px; } .single-post .vt-news-content li { margin-bottom: 10px; } /* NEWS CALLOUT */ .single-post .vt-news-callout { background: linear-gradient( 135deg, var(--cn-deep), var(--cn-deep-bright) ); color: var(--cn-white); padding: 28px; border-radius: 16px; margin: 34px 0; } .single-post .vt-news-callout strong { color: var(--cn-white); } /* NEWS CTA */ .single-post .vt-news-cta { background: linear-gradient( 135deg, var(--cn-deep), var(--cn-orange) ); color: var(--cn-white); padding: 40px 28px; border-radius: var(--cn-radius-large); margin: 50px 0 35px; text-align: center; } .single-post .vt-news-cta-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; } .single-post .vt-news-cta h2 { color: var(--cn-white); font-size: 34px; margin: 0 0 10px; } .single-post .vt-news-cta p { max-width: 760px; margin: 0 auto 22px; } /* LEGACY BLOG BUTTONS */ .single-post .vt-btn-wrap { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; } .single-post .vt-btn { display: inline-block; padding: 14px 24px; border-radius: var(--cn-radius-button); text-decoration: none; font-weight: 700; transition: transform .2s ease; } .single-post .vt-btn:hover { transform: translateY(-2px); } .single-post .vt-btn-primary { background: var(--cn-white); color: var(--cn-deep); } .single-post .vt-btn-secondary { border: 2px solid rgba(255,255,255,.85); color: var(--cn-white); } /* ========================================================= 11 — NEWS AUTHOR / TRUST / RELATED ========================================================= */ .single-post .vt-news-author-box, .single-post .vt-news-trust-strip, .single-post .vt-news-related { border-top: 1px solid var(--cn-border); padding-top: 24px; margin-top: 24px; } .single-post .vt-news-author-box strong, .single-post .vt-news-trust-strip strong, .single-post .vt-news-related strong { color: var(--cn-deep); } .single-post .vt-news-related a { color: var(--cn-deep); text-decoration: none; font-weight: 700; } .single-post .vt-news-related a:hover { color: var(--cn-orange); } .single-post .vt-news-trust-strip, .single-post .vt-news-related { padding-left: 90px; } /* AUTHOR */ .single-post .vt-news-author-row { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; } .single-post .vt-news-author-text { flex: 1; min-width: 260px; } .single-post .vt-news-author-avatar { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; min-width: 72px; flex-shrink: 0; margin: 0; overflow: hidden; border-radius: 50%; background: linear-gradient( 135deg, var(--cn-deep), var(--cn-orange) ); color: var(--cn-white); font-size: 28px; font-weight: 700; line-height: 1; box-shadow: 0 6px 18px var(--cn-shadow-medium); border: 3px solid var(--cn-white); } .single-post .vt-news-author-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; } /* ========================================================= 12 — TABLET ========================================================= */ @media (max-width: 1024px) { .cn-page-hero { min-height:650px; } .cn-page-hero__copy { width:64%; } .cn-hero { min-height: 650px; } .cn-hero__inner { padding: 105px 0 100px; } .cn-hero__grid { opacity: .24; } .cn-hero__ring { opacity: .65; } } /* ========================================================= 13 — MOBILE ========================================================= */ @media (max-width: 768px) { /* INTERNAL PAGE HEROES */ .cn-page-hero { min-height:auto; } .cn-page-hero__inner { width:calc(100% - 36px); padding:78px 0 68px; } .cn-page-hero__copy { width:100%; } .cn-page-hero__title { max-width:540px; font-size:clamp(42px,12vw,58px); line-height:1; } .cn-page-hero__text { max-width:540px; font-size:17px; line-height:1.6; } .cn-page-hero__actions { align-items:stretch; flex-direction:column; width:min(100%,360px); } .cn-page-hero__primary, .cn-page-hero__secondary { width:100%; } .cn-page-hero__meta { max-width:430px; gap:9px 21px; margin-top:44px; } .cn-page-hero__meta span:not(:last-child)::after { right:-12px; } /* HERO */ .cn-hero { min-height: auto; } .cn-hero__inner { width: calc(100% - 40px); padding: 92px 0 78px; } .cn-hero__title { font-size: 43px; line-height: 1.04; } .cn-hero__title br { display: none; } .cn-hero__text { font-size: 17px; line-height: 1.62; } .cn-hero__actions { flex-direction: column; } .cn-button { width: 100%; } .cn-hero__grid { width: 520px; height: 520px; right: -330px; opacity: .18; } .cn-hero__ring--1 { width: 430px; height: 430px; right: -270px; top: 100px; } .cn-hero__ring--2 { width: 300px; height: 300px; right: -150px; top: 165px; } .cn-hero__ring--3 { display: none; } .cn-hero__pips { right: 7%; top: 38%; } .cn-services-system, .cn-industry-sector { opacity: .12 !important; } /* NEWS */ .single-post .vt-news-post h1 { font-size: 34px; } .single-post .vt-news-content h2 { font-size: 26px; } .single-post .vt-news-content h3 { font-size: 22px; } .single-post .vt-news-cta h2 { font-size: 28px; } .single-post .vt-news-featured img { width: 100%; max-width: 100%; } .single-post .vt-news-author-row { align-items: flex-start; gap: 14px; } .single-post .vt-news-author-avatar { width: 60px; height: 60px; min-width: 60px; font-size: 22px; } .single-post .vt-news-author-text { min-width: 0; } .single-post .vt-news-trust-strip, .single-post .vt-news-related { padding-left: 0; } } /* ========================================================= 14 — REDUCED MOTION / ACCESSIBILITY ========================================================= */ @media (prefers-reduced-motion: reduce) { .cn-hero *, .cn-hero *::before, .cn-hero *::after, .cn-page-hero *, .cn-page-hero *::before, .cn-page-hero *::after { animation: none !important; } } /* ========================================================= 15 — REMAINING PAGE PALETTES + INDUSTRY CARDS Remaining internal hero palettes and the industries grid. ========================================================= */ /* CONTACT */ .cn-page-hero--contact{ --page-bg-1:#16394D; --page-bg-2:#102F42; --page-bg-3:#0A2230; --page-accent-soft:rgba(75,157,183,.18); --page-eyebrow:#93CCDD; --page-heading-soft:#D9F0F5; --page-ring:rgba(157,213,226,.22); --page-ring-soft:rgba(157,213,226,.14); --page-glow-1:rgba(83,172,194,.18); --page-glow-2:rgba(55,125,148,.08); --page-node:#9AD4E1; --page-node-bright:#EFFBFD; --page-crown:rgba(83,172,194,.18); --page-wash-1:rgba(7,28,38,.46); --page-wash-2:rgba(7,28,38,.14); } /* CHARLOTTE MANAGED IT */ .cn-page-hero--managed-it{ --page-bg-1:#153E4D; --page-bg-2:#0E3340; --page-bg-3:#082630; --page-accent-soft:rgba(76,163,157,.18); --page-eyebrow:#8FD1C9; --page-heading-soft:#D9F3EF; --page-ring:rgba(145,215,206,.22); --page-ring-soft:rgba(145,215,206,.14); --page-glow-1:rgba(80,181,171,.19); --page-glow-2:rgba(55,133,127,.08); --page-node:#95D8CF; --page-node-bright:#EEFBF9; --page-crown:rgba(80,181,171,.18); --page-wash-1:rgba(5,29,35,.46); --page-wash-2:rgba(5,29,35,.13); } /* NEWS / IT INSIGHTS */ .cn-page-hero--news{ --page-bg-1:#26384A; --page-bg-2:#1C2E40; --page-bg-3:#122333; --page-accent-soft:rgba(101,146,187,.18); --page-eyebrow:#A1C5E1; --page-heading-soft:#DFEDF7; --page-ring:rgba(171,205,229,.22); --page-ring-soft:rgba(171,205,229,.14); --page-glow-1:rgba(106,157,198,.18); --page-glow-2:rgba(74,115,153,.08); --page-node:#ADD2EA; --page-node-bright:#F2F9FD; --page-crown:rgba(106,157,198,.18); --page-wash-1:rgba(13,28,40,.46); --page-wash-2:rgba(13,28,40,.14); } /* ========================================================= INDUSTRIES CARD GRID ========================================================= */ .cn-industry-grid{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; width:min(1360px,calc(100% - 64px)); max-width:1360px !important; margin-inline:auto; } .cn-industry-card{ width:100% !important; max-width:none !important; min-width:0; min-height:620px; display:flex !important; flex-direction:column !important; padding:34px; background:#FFFFFF; border:1px solid var(--cn-border); border-radius:var(--cn-radius-card); overflow:hidden; } /* TABLET / MOBILE */ @media(max-width:767px){ .cn-industry-grid{ grid-template-columns:1fr; width:calc(100% - 36px); gap:22px; } } .cn-industry-card .elementor-widget-button{ margin-top:auto !important; } .cn-industry-card__cta{ margin-top:auto !important; } /* ========================================================= 16 — FINAL SERVICES HERO Animated managed technology ecosystem. ========================================================= */ .cn-services-hero{ overflow:hidden; background: radial-gradient( circle at 79% 48%, rgba(83,183,172,.18) 0%, rgba(83,183,172,.055) 31%, transparent 58% ), linear-gradient( 118deg, #0D3B43 0%, #092C35 53%, #071F29 100% ) !important; } /* subtle grid */ .cn-services-hero::before{ opacity:.22; background-image: linear-gradient( rgba(164,226,218,.038) 1px, transparent 1px ), linear-gradient( 90deg, rgba(164,226,218,.038) 1px, transparent 1px ); background-size:64px 64px; animation: cnServicesGridDrift 32s linear infinite; } /* stronger reading-zone protection */ .cn-services-hero::after{ background: linear-gradient( 90deg, rgba(7,31,41,.98) 0%, rgba(7,31,41,.92) 30%, rgba(7,31,41,.67) 49%, rgba(7,31,41,.16) 72%, transparent 88% ); } /* ========================================================= ART STAGE ========================================================= */ .cn-services-hero__art{ position:absolute; z-index:3; width:min(760px,54vw); aspect-ratio:760 / 720; right:-35px; top:50%; transform: translateY(-50%) translateZ(0); pointer-events:none; opacity:.98; filter: drop-shadow( 0 0 55px rgba(78,177,168,.05) ); } .cn-services-hero__svg{ display:block; width:100%; height:auto; overflow:visible; transform-origin:52% 50%; animation: cnServicesSceneDrift 22s ease-in-out infinite alternate; } /* ========================================================= HALOS ========================================================= */ .cn-services-hero__halo{ fill:none; stroke:#9ADDD6; transform-origin:382px 363px; } .cn-services-hero__halo--outer{ stroke-width:1; stroke-opacity:.10; animation: cnServicesHaloOuter 18s ease-in-out infinite; } .cn-services-hero__halo--middle{ stroke-width:1; stroke-opacity:.15; stroke-dasharray:6 10; animation: cnServicesHaloSpin 45s linear infinite; } .cn-services-hero__halo--inner{ stroke-width:1.2; stroke-opacity:.18; stroke-dasharray:3 10; animation: cnServicesHaloSpinReverse 31s linear infinite; } /* ========================================================= INFRASTRUCTURE ========================================================= */ .cn-services-hero__secondary-lines{ fill:none; stroke:#92D6CF; stroke-width:1; stroke-opacity:.09; stroke-dasharray:4 9; } .cn-services-hero__routes use{ opacity:.72; } /* ========================================================= AMBIENT NODES ========================================================= */ .cn-services-hero__ambient-nodes{ fill:#9AD8D1; filter: url(#cnServicesTealGlow); } .cn-services-hero__ambient-nodes circle{ transform-box:fill-box; transform-origin:center; animation: cnServicesAmbientNode 6s ease-in-out infinite; } .cn-services-hero__ambient-nodes circle:nth-child(2n){ animation-delay:-2s; } .cn-services-hero__ambient-nodes circle:nth-child(3n){ animation-delay:-4s; } /* ========================================================= SERVICE NODES ========================================================= */ .cn-services-hero__service-node{ transform-box:fill-box; transform-origin:center; animation: cnServicesServiceNodeFloat 8s ease-in-out infinite; } .cn-services-hero__service-node:nth-child(2){ animation-delay:-1.5s; } .cn-services-hero__service-node:nth-child(3){ animation-delay:-3s; } .cn-services-hero__service-node:nth-child(4){ animation-delay:-4.5s; } .cn-services-hero__service-node:nth-child(5){ animation-delay:-6s; } .cn-services-hero__service-node circle:first-child{ fill:rgba(135,211,203,.035); stroke:#A1DED7; stroke-width:1; stroke-opacity:.26; } .cn-services-hero__service-node circle:last-child{ fill:#9CDCD5; filter: url(#cnServicesTealGlow); opacity:.84; } /* ========================================================= CENTRAL CORE ========================================================= */ .cn-services-hero__core{ transform-origin:382px 363px; animation: cnServicesCoreBreathe 8s ease-in-out infinite; } .cn-services-hero__core-ring{ fill:none; stroke:#9ADDD6; transform-origin:382px 363px; } .cn-services-hero__core-ring--3{ stroke-opacity:.10; stroke-width:1; stroke-dasharray:3 11; animation: cnServicesCoreRotate 36s linear infinite; } .cn-services-hero__core-ring--2{ stroke-opacity:.17; stroke-width:1; stroke-dasharray:8 13; animation: cnServicesCoreRotateReverse 29s linear infinite; } .cn-services-hero__core-ring--1{ stroke-opacity:.28; stroke-width:1.3; } .cn-services-hero__core-disc{ fill:rgba(105,195,185,.08); stroke:rgba(180,233,227,.26); stroke-width:1; filter: url(#cnServicesTealGlow); } .cn-services-hero__core image{ opacity:.95; filter: brightness(0) invert(1) drop-shadow( 0 0 14px rgba(145,220,213,.27) ); } /* ========================================================= ANIMATIONS ========================================================= */ @keyframes cnServicesGridDrift{ from{ background-position:0 0; } to{ background-position:-64px 64px; } } @keyframes cnServicesSceneDrift{ from{ transform: scale(1) translate3d(0,0,0); } to{ transform: scale(1.025) translate3d(-11px,7px,0); } } @keyframes cnServicesHaloOuter{ 0%, 100%{ opacity:.55; transform:scale(.99); } 50%{ opacity:1; transform:scale(1.015); } } @keyframes cnServicesHaloSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } } @keyframes cnServicesHaloSpinReverse{ from{ transform:rotate(360deg); } to{ transform:rotate(0deg); } } @keyframes cnServicesAmbientNode{ 0%, 100%{ opacity:.28; transform:scale(.82); } 50%{ opacity:.78; transform:scale(1.18); } } @keyframes cnServicesServiceNodeFloat{ 0%, 100%{ opacity:.72; transform: translate3d(0,0,0) scale(.97); } 50%{ opacity:1; transform: translate3d(0,-5px,0) scale(1.03); } } @keyframes cnServicesCoreBreathe{ 0%, 100%{ opacity:.86; transform:scale(.985); } 50%{ opacity:1; transform:scale(1.018); } } @keyframes cnServicesCoreRotate{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } } @keyframes cnServicesCoreRotateReverse{ from{ transform:rotate(360deg); } to{ transform:rotate(0deg); } } /* ========================================================= TABLET ========================================================= */ @media(max-width:1024px){ .cn-services-hero__art{ width:690px; right:-260px; opacity:.73; } } /* ========================================================= MOBILE ========================================================= */ @media(max-width:768px){ .cn-services-hero::after{ background: linear-gradient( 90deg, rgba(7,31,41,.97) 0%, rgba(7,31,41,.90) 53%, rgba(7,31,41,.61) 100% ); } .cn-services-hero__art{ width:530px; right:-365px; top:43%; opacity:.40; } .cn-services-hero__svg{ animation:none; transform:scale(.98); } .cn-services-hero__secondary-lines{ display:none; } .cn-services-hero__halo--outer{ opacity:.35; } .cn-services-hero__signals circle:nth-child(n+3){ display:none; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media(prefers-reduced-motion:reduce){ .cn-services-hero::before, .cn-services-hero__svg, .cn-services-hero__halo, .cn-services-hero__ambient-nodes circle, .cn-services-hero__service-node, .cn-services-hero__core, .cn-services-hero__core-ring{ animation:none !important; } .cn-services-hero__signals{ display:none; } } /* ========================================================= 17 — FINAL INDUSTRIES HERO Distributed business landscape. ========================================================= */ .cn-industries-landscape{ overflow:hidden; background: radial-gradient( circle at 80% 46%, rgba(118,136,216,.16) 0%, rgba(118,136,216,.05) 34%, transparent 61% ), linear-gradient( 118deg, #242D4B 0%, #1B2340 53%, #12182E 100% ) !important; } /* ========================================================= BACKGROUND GRID ========================================================= */ .cn-industries-landscape::before{ opacity:.16; background-image: linear-gradient( rgba(181,191,244,.028) 1px, transparent 1px ), linear-gradient( 90deg, rgba(181,191,244,.028) 1px, transparent 1px ); background-size:74px 74px; animation: cnIndustryLandscapeGrid 44s linear infinite; } /* ========================================================= COPY PROTECTION ========================================================= */ .cn-industries-landscape::after{ background: linear-gradient( 90deg, rgba(18,24,46,.99) 0%, rgba(18,24,46,.95) 30%, rgba(18,24,46,.72) 49%, rgba(18,24,46,.19) 73%, transparent 90% ); } /* ========================================================= ART STAGE ========================================================= */ .cn-industries-landscape__art{ position:absolute; z-index:3; width:min(900px,61vw); aspect-ratio:900 / 720; right:-55px; top:50%; transform:translateY(-50%); pointer-events:none; opacity:.98; } .cn-industries-landscape__svg{ display:block; width:100%; height:auto; overflow:visible; transform-origin:55% 50%; animation: cnIndustryLandscapeDrift 28s ease-in-out infinite alternate; } /* ========================================================= LANDSCAPE CONTOURS ========================================================= */ .cn-industries-landscape__contours{ fill:none; stroke:#AAB6EC; stroke-width:1; stroke-opacity:.055; stroke-dasharray:6 14; } /* ========================================================= MAIN ROUTES ========================================================= */ .cn-industries-landscape__routes use{ opacity:.74; stroke-dasharray:9 10; animation: cnIndustryLandscapeFlow 26s linear infinite; } /* ========================================================= CROSS LINKS ========================================================= */ .cn-industries-landscape__crosslinks{ fill:none; stroke:#AEB9EF; stroke-width:1; stroke-opacity:.07; stroke-dasharray:4 11; } /* ========================================================= INDUSTRY CLUSTERS ========================================================= */ .cn-industries-landscape__cluster{ transform-box:fill-box; transform-origin:center; animation: cnIndustryLandscapeClusterFloat 9s ease-in-out infinite; } .cn-industries-landscape__cluster:nth-of-type(2){ animation-delay:-1.5s; } .cn-industries-landscape__cluster:nth-of-type(3){ animation-delay:-3s; } .cn-industries-landscape__cluster:nth-of-type(4){ animation-delay:-4.5s; } .cn-industries-landscape__cluster:nth-of-type(5){ animation-delay:-6s; } .cn-industries-landscape__cluster:nth-of-type(6){ animation-delay:-7.5s; } .cn-industries-landscape__cluster .cluster-panel{ fill:rgba(135,148,214,.035); stroke:#B4BFF1; stroke-width:1; stroke-opacity:.19; } .cn-industries-landscape__cluster .cluster-panel--large{ fill:rgba(135,148,214,.045); stroke-opacity:.25; } .cn-industries-landscape__cluster .cluster-core{ fill:#B5C0F2; opacity:.87; filter:url(#cnIndustryLandscapeBlueGlow); transform-box:fill-box; transform-origin:center; animation: cnIndustryLandscapeCorePulse 5.5s ease-in-out infinite; } .cn-industries-landscape__cluster .cluster-core--large{ fill:#D0D6FF; } .cn-industries-landscape__cluster .cluster-node{ fill:#ABB8EF; opacity:.38; filter:url(#cnIndustryLandscapeBlueGlow); transform-box:fill-box; transform-origin:center; animation: cnIndustryLandscapeNodePulse 5.8s ease-in-out infinite; } .cn-industries-landscape__cluster .cluster-node:nth-of-type(2){ animation-delay:-1.8s; } .cn-industries-landscape__cluster .cluster-node:nth-of-type(3){ animation-delay:-3.6s; } .cn-industries-landscape__cluster .cluster-mini-line{ fill:none; stroke:#B0BCF0; stroke-width:1; stroke-opacity:.10; } /* ========================================================= AMBIENT NODES ========================================================= */ .cn-industries-landscape__ambient-nodes{ fill:#AAB7EC; filter:url(#cnIndustryLandscapeBlueGlow); } .cn-industries-landscape__ambient-nodes circle{ transform-box:fill-box; transform-origin:center; animation: cnIndustryLandscapeAmbientPulse 6.5s ease-in-out infinite; } .cn-industries-landscape__ambient-nodes circle:nth-child(2n){ animation-delay:-2s; } .cn-industries-landscape__ambient-nodes circle:nth-child(3n){ animation-delay:-4s; } /* ========================================================= CROWN SIGNATURE ========================================================= */ .cn-industries-landscape__signature{ transform-origin:786px 607px; animation: cnIndustryLandscapeSignature 8s ease-in-out infinite; } .cn-industries-landscape__signature circle:first-child{ fill:rgba(118,136,216,.025); stroke:#B5C0F1; stroke-width:1; stroke-opacity:.11; stroke-dasharray:4 10; } .cn-industries-landscape__signature circle:nth-child(2){ fill:rgba(118,136,216,.055); stroke:#B5C0F1; stroke-width:1; stroke-opacity:.18; } .cn-industries-landscape__signature image{ opacity:.86; filter: brightness(0) invert(1) drop-shadow( 0 0 15px rgba(145,160,226,.25) ); } /* ========================================================= ANIMATION ========================================================= */ @keyframes cnIndustryLandscapeGrid{ from{ background-position:0 0; } to{ background-position:-74px 74px; } } @keyframes cnIndustryLandscapeDrift{ from{ transform: scale(1) translate3d(0,0,0); } to{ transform: scale(1.018) translate3d(-10px,7px,0); } } @keyframes cnIndustryLandscapeFlow{ from{ stroke-dashoffset:0; } to{ stroke-dashoffset:-180; } } @keyframes cnIndustryLandscapeClusterFloat{ 0%, 100%{ opacity:.72; transform: translate3d(0,0,0) scale(.985); } 50%{ opacity:1; transform: translate3d(0,-6px,0) scale(1.022); } } @keyframes cnIndustryLandscapeCorePulse{ 0%, 100%{ opacity:.45; transform:scale(.88); } 50%{ opacity:1; transform:scale(1.15); } } @keyframes cnIndustryLandscapeNodePulse{ 0%, 100%{ opacity:.20; transform:scale(.80); } 50%{ opacity:.72; transform:scale(1.22); } } @keyframes cnIndustryLandscapeAmbientPulse{ 0%, 100%{ opacity:.22; transform:scale(.82); } 50%{ opacity:.74; transform:scale(1.18); } } @keyframes cnIndustryLandscapeSignature{ 0%, 100%{ opacity:.65; transform:scale(.985); } 50%{ opacity:.92; transform:scale(1.015); } } /* ========================================================= TABLET ========================================================= */ @media(max-width:1024px){ .cn-industries-landscape__art{ width:790px; right:-330px; opacity:.72; } } /* ========================================================= MOBILE ========================================================= */ @media(max-width:768px){ .cn-industries-landscape::after{ background: linear-gradient( 90deg, rgba(18,24,46,.98) 0%, rgba(18,24,46,.91) 55%, rgba(18,24,46,.64) 100% ); } .cn-industries-landscape__art{ width:590px; right:-420px; top:43%; opacity:.36; } .cn-industries-landscape__svg{ animation:none; transform:scale(.98); } .cn-industries-landscape__contours, .cn-industries-landscape__crosslinks{ display:none; } .cn-industries-landscape__cluster .cluster-node, .cn-industries-landscape__cluster .cluster-mini-line{ display:none; } .cn-industries-landscape__signals circle:nth-child(n+3){ display:none; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media(prefers-reduced-motion:reduce){ .cn-industries-landscape::before, .cn-industries-landscape__svg, .cn-industries-landscape__routes use, .cn-industries-landscape__cluster, .cn-industries-landscape__cluster .cluster-core, .cn-industries-landscape__cluster .cluster-node, .cn-industries-landscape__ambient-nodes circle, .cn-industries-landscape__signature{ animation:none !important; } .cn-industries-landscape__signals{ display:none; } } /* ========================================================= 18 — FINAL ABOUT HERO Animated story and constellation. ========================================================= */ .cn-about-hero{ overflow:hidden; background: radial-gradient( circle at 80% 43%, rgba(95,158,201,.18) 0%, rgba(95,158,201,.055) 32%, transparent 59% ), linear-gradient( 118deg, #1B3A55 0%, #142F47 53%, #0E2234 100% ) !important; } /* ========================================================= BACKGROUND GRID ========================================================= */ .cn-about-hero::before{ opacity:.19; background-image: linear-gradient( rgba(166,205,231,.035) 1px, transparent 1px ), linear-gradient( 90deg, rgba(166,205,231,.035) 1px, transparent 1px ); background-size:72px 72px; animation: cnAboutGridDrift 40s linear infinite; } /* ========================================================= COPY PROTECTION ========================================================= */ .cn-about-hero::after{ background: linear-gradient( 90deg, rgba(14,34,52,.99) 0%, rgba(14,34,52,.94) 30%, rgba(14,34,52,.70) 49%, rgba(14,34,52,.17) 73%, transparent 89% ); } /* ========================================================= ART STAGE ========================================================= */ .cn-about-hero__art{ position:absolute; z-index:3; width:min(820px,57vw); aspect-ratio:820 / 720; right:-35px; top:50%; transform:translateY(-50%); pointer-events:none; opacity:.98; } .cn-about-hero__svg{ display:block; width:100%; height:auto; overflow:visible; transform-origin:55% 50%; animation: cnAboutSceneDrift 27s ease-in-out infinite alternate; } /* ========================================================= CONSTELLATION ARCS ========================================================= */ .cn-about-hero__arcs{ fill:none; stroke:#A6CDE7; stroke-width:1; transform-origin:535px 330px; } .cn-about-hero__arcs ellipse:nth-child(1){ stroke-opacity:.08; animation: cnAboutArcBreathe 18s ease-in-out infinite; } .cn-about-hero__arcs ellipse:nth-child(2){ stroke-opacity:.12; stroke-dasharray:5 13; animation: cnAboutArcRotate 62s linear infinite; } .cn-about-hero__arcs ellipse:nth-child(3){ stroke-opacity:.16; stroke-dasharray:3 10; animation: cnAboutArcRotateReverse 44s linear infinite; } /* ========================================================= HISTORY CONNECTIONS ========================================================= */ .cn-about-hero__history-lines{ fill:none; stroke:#9CC9E5; stroke-width:1; stroke-opacity:.075; stroke-dasharray:4 10; } /* ========================================================= MAIN TIMELINE ========================================================= */ .cn-about-hero__timeline{ opacity:.84; stroke-dasharray:9 8; animation: cnAboutTimelineFlow 22s linear infinite; } /* ========================================================= MILESTONES ========================================================= */ .cn-about-hero__milestone{ transform-box:fill-box; transform-origin:center; animation: cnAboutMilestoneFloat 8s ease-in-out infinite; } .cn-about-hero__milestone:nth-child(2){ animation-delay:-2s; } .cn-about-hero__milestone:nth-child(3){ animation-delay:-4s; } .cn-about-hero__milestone:nth-child(4){ animation-delay:-6s; } .cn-about-hero__milestone .milestone-ring{ fill:rgba(114,172,210,.035); stroke:#A8D2E9; stroke-width:1; stroke-opacity:.24; } .cn-about-hero__milestone .milestone-core{ fill:#AED5EC; opacity:.88; filter:url(#cnAboutBlueGlow); } .cn-about-hero__milestone .milestone-small{ fill:#9BC9E3; opacity:.38; filter:url(#cnAboutBlueGlow); transform-box:fill-box; transform-origin:center; animation: cnAboutSmallNode 5.6s ease-in-out infinite; } .cn-about-hero__milestone .milestone-small:nth-of-type(2){ animation-delay:-1.8s; } .cn-about-hero__milestone .milestone-small:nth-of-type(3){ animation-delay:-3.6s; } /* ========================================================= CURRENT DESTINATION / CROWN ========================================================= */ .cn-about-hero__destination{ transform-origin:642px 220px; animation: cnAboutDestinationBreathe 8s ease-in-out infinite; } .cn-about-hero__destination-ring{ fill:none; stroke:#B5D8EC; transform-origin:642px 220px; } .cn-about-hero__destination-ring.ring-3{ stroke-width:1; stroke-opacity:.09; stroke-dasharray:3 11; animation: cnAboutDestinationRotate 42s linear infinite; } .cn-about-hero__destination-ring.ring-2{ stroke-width:1; stroke-opacity:.15; stroke-dasharray:8 14; animation: cnAboutDestinationRotateReverse 33s linear infinite; } .cn-about-hero__destination-ring.ring-1{ stroke-width:1.3; stroke-opacity:.26; } .cn-about-hero__destination-disc{ fill:rgba(96,160,202,.09); stroke:rgba(182,218,238,.26); stroke-width:1; filter:url(#cnAboutBlueGlow); } .cn-about-hero__destination image{ opacity:.96; filter: brightness(0) invert(1) drop-shadow( 0 0 16px rgba(134,190,222,.30) ); } /* ========================================================= FUTURE / FORWARD MOTION ========================================================= */ .cn-about-hero__future-line{ fill:none; stroke:#A8D2E9; stroke-width:1.25; stroke-opacity:.20; stroke-dasharray:4 8; } .cn-about-hero__future-nodes{ fill:#A8D2E9; filter:url(#cnAboutBlueGlow); } .cn-about-hero__future-nodes circle{ transform-box:fill-box; transform-origin:center; animation: cnAboutFuturePulse 5s ease-in-out infinite; } .cn-about-hero__future-nodes circle:nth-child(2){ animation-delay:-1.7s; } .cn-about-hero__future-nodes circle:nth-child(3){ animation-delay:-3.4s; } /* ========================================================= ANIMATIONS ========================================================= */ @keyframes cnAboutGridDrift{ from{ background-position:0 0; } to{ background-position:-72px 72px; } } @keyframes cnAboutSceneDrift{ from{ transform: scale(1) translate3d(0,0,0); } to{ transform: scale(1.018) translate3d(-9px,7px,0); } } @keyframes cnAboutArcBreathe{ 0%, 100%{ opacity:.50; transform:scale(.994); } 50%{ opacity:1; transform:scale(1.01); } } @keyframes cnAboutArcRotate{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } } @keyframes cnAboutArcRotateReverse{ from{ transform:rotate(360deg); } to{ transform:rotate(0deg); } } @keyframes cnAboutTimelineFlow{ from{ stroke-dashoffset:0; } to{ stroke-dashoffset:-170; } } @keyframes cnAboutMilestoneFloat{ 0%, 100%{ opacity:.72; transform: translate3d(0,0,0) scale(.98); } 50%{ opacity:1; transform: translate3d(0,-5px,0) scale(1.025); } } @keyframes cnAboutSmallNode{ 0%, 100%{ opacity:.22; transform:scale(.82); } 50%{ opacity:.72; transform:scale(1.20); } } @keyframes cnAboutDestinationBreathe{ 0%, 100%{ opacity:.88; transform:scale(.985); } 50%{ opacity:1; transform:scale(1.02); } } @keyframes cnAboutDestinationRotate{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } } @keyframes cnAboutDestinationRotateReverse{ from{ transform:rotate(360deg); } to{ transform:rotate(0deg); } } @keyframes cnAboutFuturePulse{ 0%, 100%{ opacity:.24; transform:scale(.86); } 50%{ opacity:.80; transform:scale(1.17); } } /* ========================================================= TABLET ========================================================= */ @media(max-width:1024px){ .cn-about-hero__art{ width:730px; right:-275px; opacity:.74; } } /* ========================================================= MOBILE ========================================================= */ @media(max-width:768px){ .cn-about-hero::after{ background: linear-gradient( 90deg, rgba(14,34,52,.98) 0%, rgba(14,34,52,.91) 55%, rgba(14,34,52,.63) 100% ); } .cn-about-hero__art{ width:560px; right:-385px; top:43%; opacity:.38; } .cn-about-hero__svg{ animation:none; transform:scale(.98); } .cn-about-hero__history-lines{ display:none; } .cn-about-hero__milestone .milestone-small{ display:none; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media(prefers-reduced-motion:reduce){ .cn-about-hero::before, .cn-about-hero__svg, .cn-about-hero__arcs ellipse, .cn-about-hero__timeline, .cn-about-hero__milestone, .cn-about-hero__milestone .milestone-small, .cn-about-hero__destination, .cn-about-hero__destination-ring, .cn-about-hero__future-nodes circle{ animation:none !important; } .cn-about-hero__signals{ display:none; } } /* ========================================================= 19 — FINAL NEWS HERO Animated information and insight engine. ========================================================= */ .cn-news-hero{ overflow:hidden; background: radial-gradient( circle at 80% 46%, rgba(101,146,187,.18) 0%, rgba(101,146,187,.055) 32%, transparent 59% ), linear-gradient( 118deg, #26384A 0%, #1C2E40 53%, #122333 100% ) !important; } /* ========================================================= MOVING BACKGROUND GRID ========================================================= */ .cn-news-hero::before{ opacity:.18; background-image: linear-gradient( rgba(171,205,229,.032) 1px, transparent 1px ), linear-gradient( 90deg, rgba(171,205,229,.032) 1px, transparent 1px ); background-size:70px 70px; animation: cnNewsGridDrift 38s linear infinite; } /* ========================================================= READING ZONE ========================================================= */ .cn-news-hero::after{ background: linear-gradient( 90deg, rgba(18,35,51,.99) 0%, rgba(18,35,51,.94) 29%, rgba(18,35,51,.70) 49%, rgba(18,35,51,.18) 73%, transparent 89% ); } /* ========================================================= ART STAGE ========================================================= */ .cn-news-hero__art{ position:absolute; z-index:3; width:min(820px,57vw); aspect-ratio:820 / 720; right:-25px; top:50%; transform:translateY(-50%); pointer-events:none; opacity:.98; } .cn-news-hero__svg{ display:block; width:100%; height:auto; overflow:visible; transform-origin:54% 49%; animation: cnNewsSceneDrift 25s ease-in-out infinite alternate; } /* ========================================================= BACKGROUND INFORMATION TRACKS ========================================================= */ .cn-news-hero__tracks{ fill:none; stroke:#A1C5E1; stroke-width:1; stroke-opacity:.065; stroke-dasharray:5 11; } /* ========================================================= SOURCE STREAM ROUTES ========================================================= */ .cn-news-hero__routes use{ opacity:.74; stroke-dasharray:8 9; animation: cnNewsDataFlow 22s linear infinite; } /* ========================================================= RAW SOURCE MODULES ========================================================= */ .cn-news-hero__source{ transform-box:fill-box; transform-origin:center; animation: cnNewsSourceFloat 8s ease-in-out infinite; } .cn-news-hero__source:nth-child(2){ animation-delay:-2.7s; } .cn-news-hero__source:nth-child(3){ animation-delay:-5.4s; } .cn-news-hero__source rect{ fill:rgba(132,174,207,.025); stroke:#9FC3DF; stroke-width:1; stroke-opacity:.19; } .cn-news-hero__source line{ stroke:#ABCBE3; stroke-width:2; stroke-linecap:round; opacity:.23; } .cn-news-hero__source circle{ fill:#A9CDE5; opacity:.60; filter:url(#cnNewsBlueGlow); transform-box:fill-box; transform-origin:center; animation: cnNewsNodePulse 5s ease-in-out infinite; } /* ========================================================= INSIGHT CORE ========================================================= */ .cn-news-hero__core{ transform-origin:530px 344px; animation: cnNewsCoreBreathe 8s ease-in-out infinite; } .cn-news-hero__core-ring{ fill:none; stroke:#AFCEE5; transform-origin:530px 344px; } .cn-news-hero__core-ring.ring-3{ stroke-width:1; stroke-opacity:.09; stroke-dasharray:3 11; animation: cnNewsCoreRotate 43s linear infinite; } .cn-news-hero__core-ring.ring-2{ stroke-width:1; stroke-opacity:.15; stroke-dasharray:8 14; animation: cnNewsCoreRotateReverse 34s linear infinite; } .cn-news-hero__core-ring.ring-1{ stroke-width:1.3; stroke-opacity:.26; } .cn-news-hero__core-disc{ fill:rgba(105,153,190,.09); stroke:rgba(185,215,235,.25); stroke-width:1; filter:url(#cnNewsBlueGlow); } .cn-news-hero__core image{ opacity:.96; filter: brightness(0) invert(1) drop-shadow( 0 0 16px rgba(150,192,220,.28) ); } /* ========================================================= ORGANIZED INSIGHT CARDS ========================================================= */ .cn-news-hero__insight{ transform-box:fill-box; transform-origin:center; animation: cnNewsInsightFloat 9s ease-in-out infinite; } .cn-news-hero__insight.insight-2{ animation-delay:-3s; } .cn-news-hero__insight.insight-3{ animation-delay:-6s; } .cn-news-hero__insight rect{ fill:rgba(140,183,213,.04); stroke:#B0CEE4; stroke-width:1; stroke-opacity:.26; } .cn-news-hero__insight line{ stroke:#BDD8EA; stroke-width:2; stroke-linecap:round; opacity:.34; } /* ========================================================= OUTPUT PATH ========================================================= */ .cn-news-hero__output-route{ stroke:#ABCBE3; stroke-width:1.7; stroke-opacity:.20; stroke-dasharray:5 8; animation: cnNewsOutputFlow 18s linear infinite; } /* ========================================================= AMBIENT NODES ========================================================= */ .cn-news-hero__ambient-nodes{ fill:#A7CBE4; filter:url(#cnNewsBlueGlow); } .cn-news-hero__ambient-nodes circle{ transform-box:fill-box; transform-origin:center; animation: cnNewsNodePulse 6s ease-in-out infinite; } .cn-news-hero__ambient-nodes circle:nth-child(2n){ animation-delay:-2s; } .cn-news-hero__ambient-nodes circle:nth-child(3n){ animation-delay:-4s; } /* ========================================================= ANIMATIONS ========================================================= */ @keyframes cnNewsGridDrift{ from{ background-position:0 0; } to{ background-position:-70px 70px; } } @keyframes cnNewsSceneDrift{ from{ transform: scale(1) translate3d(0,0,0); } to{ transform: scale(1.019) translate3d(-10px,6px,0); } } @keyframes cnNewsDataFlow{ from{ stroke-dashoffset:0; } to{ stroke-dashoffset:-160; } } @keyframes cnNewsOutputFlow{ from{ stroke-dashoffset:0; } to{ stroke-dashoffset:-120; } } @keyframes cnNewsSourceFloat{ 0%, 100%{ opacity:.68; transform: translate3d(0,0,0) scale(.985); } 50%{ opacity:1; transform: translate3d(0,-5px,0) scale(1.02); } } @keyframes cnNewsInsightFloat{ 0%, 100%{ opacity:.71; transform: translate3d(0,0,0) scale(.985); } 50%{ opacity:1; transform: translate3d(0,-6px,0) scale(1.018); } } @keyframes cnNewsNodePulse{ 0%, 100%{ opacity:.25; transform:scale(.84); } 50%{ opacity:.80; transform:scale(1.18); } } @keyframes cnNewsCoreBreathe{ 0%, 100%{ opacity:.88; transform:scale(.985); } 50%{ opacity:1; transform:scale(1.02); } } @keyframes cnNewsCoreRotate{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } } @keyframes cnNewsCoreRotateReverse{ from{ transform:rotate(360deg); } to{ transform:rotate(0deg); } } /* ========================================================= TABLET ========================================================= */ @media(max-width:1024px){ .cn-news-hero__art{ width:730px; right:-290px; opacity:.74; } } /* ========================================================= MOBILE ========================================================= */ @media(max-width:768px){ .cn-news-hero::after{ background: linear-gradient( 90deg, rgba(18,35,51,.98) 0%, rgba(18,35,51,.91) 55%, rgba(18,35,51,.63) 100% ); } .cn-news-hero__art{ width:560px; right:-395px; top:43%; opacity:.36; } .cn-news-hero__svg{ animation:none; transform:scale(.98); } .cn-news-hero__tracks{ display:none; } .cn-news-hero__sources{ opacity:.65; } .cn-news-hero__signals circle:nth-child(n+3){ display:none; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media(prefers-reduced-motion:reduce){ .cn-news-hero::before, .cn-news-hero__svg, .cn-news-hero__routes use, .cn-news-hero__source, .cn-news-hero__source circle, .cn-news-hero__core, .cn-news-hero__core-ring, .cn-news-hero__insight, .cn-news-hero__output-route, .cn-news-hero__ambient-nodes circle{ animation:none !important; } .cn-news-hero__signals{ display:none; } } /* ========================================================= 20 — FINAL CONTACT HERO Animated converging signals. ========================================================= */ .cn-contact-hero{ overflow:hidden; background: radial-gradient( circle at 80% 47%, rgba(75,157,183,.18) 0%, rgba(75,157,183,.055) 32%, transparent 59% ), linear-gradient( 118deg, #16394D 0%, #102F42 53%, #0A2230 100% ) !important; } /* ========================================================= BACKGROUND GRID ========================================================= */ .cn-contact-hero::before{ opacity:.17; background-image: linear-gradient( rgba(157,213,226,.032) 1px, transparent 1px ), linear-gradient( 90deg, rgba(157,213,226,.032) 1px, transparent 1px ); background-size:72px 72px; animation: cnContactGridDrift 42s linear infinite; } /* ========================================================= COPY PROTECTION ========================================================= */ .cn-contact-hero::after{ background: linear-gradient( 90deg, rgba(10,34,48,.99) 0%, rgba(10,34,48,.94) 30%, rgba(10,34,48,.70) 49%, rgba(10,34,48,.17) 73%, transparent 89% ); } /* ========================================================= ART STAGE ========================================================= */ .cn-contact-hero__art{ position:absolute; z-index:3; width:min(820px,57vw); aspect-ratio:820 / 720; right:-15px; top:50%; transform:translateY(-50%); pointer-events:none; opacity:.98; } .cn-contact-hero__svg{ display:block; width:100%; height:auto; overflow:visible; transform-origin:57% 49%; animation: cnContactSceneDrift 28s ease-in-out infinite alternate; } /* ========================================================= RESPONSE RINGS ========================================================= */ .cn-contact-hero__rings{ fill:none; stroke:#A2D5E0; stroke-width:1; transform-origin:527px 349px; } .cn-contact-hero__rings circle:nth-child(1){ stroke-opacity:.17; stroke-dasharray:4 10; animation: cnContactRingRotate 36s linear infinite; } .cn-contact-hero__rings circle:nth-child(2){ stroke-opacity:.11; stroke-dasharray:7 14; animation: cnContactRingRotateReverse 49s linear infinite; } .cn-contact-hero__rings circle:nth-child(3){ stroke-opacity:.07; animation: cnContactRingBreathe 17s ease-in-out infinite; } /* ========================================================= INBOUND ROUTES ========================================================= */ .cn-contact-hero__routes use{ opacity:.75; stroke-dasharray:8 9; animation: cnContactRouteFlow 24s linear infinite; } /* ========================================================= OUTER CONTACT SOURCES ========================================================= */ .cn-contact-hero__source{ transform-box:fill-box; transform-origin:center; animation: cnContactSourceFloat 8s ease-in-out infinite; } .cn-contact-hero__source:nth-child(2){ animation-delay:-2s; } .cn-contact-hero__source:nth-child(3){ animation-delay:-4s; } .cn-contact-hero__source:nth-child(4){ animation-delay:-6s; } .cn-contact-hero__source .source-ring{ fill:rgba(100,176,194,.025); stroke:#9FD3DE; stroke-width:1; stroke-opacity:.22; } .cn-contact-hero__source .source-core{ fill:#A5D8E2; opacity:.76; filter:url(#cnContactBlueGlow); transform-box:fill-box; transform-origin:center; animation: cnContactNodePulse 5.5s ease-in-out infinite; } /* ========================================================= RESPONSE LINES ========================================================= */ .cn-contact-hero__response-lines{ fill:none; stroke:#9FD3DE; stroke-width:1.2; stroke-opacity:.12; stroke-dasharray:4 9; } /* ========================================================= CENTRAL CORE ========================================================= */ .cn-contact-hero__core{ transform-origin:527px 349px; animation: cnContactCoreBreathe 8s ease-in-out infinite; } .cn-contact-hero__core-ring{ fill:none; stroke:#B0DEE7; transform-origin:527px 349px; } .cn-contact-hero__core-ring.ring-3{ stroke-width:1; stroke-opacity:.09; stroke-dasharray:3 11; animation: cnContactCoreRotate 41s linear infinite; } .cn-contact-hero__core-ring.ring-2{ stroke-width:1; stroke-opacity:.15; stroke-dasharray:8 14; animation: cnContactCoreRotateReverse 32s linear infinite; } .cn-contact-hero__core-ring.ring-1{ stroke-width:1.3; stroke-opacity:.27; } .cn-contact-hero__core-disc{ fill:rgba(91,167,184,.09); stroke:rgba(182,224,232,.25); stroke-width:1; filter:url(#cnContactBlueGlow); } .cn-contact-hero__core image{ opacity:.96; filter: brightness(0) invert(1) drop-shadow( 0 0 16px rgba(143,205,217,.30) ); } /* ========================================================= RESPONSE NODES ========================================================= */ .cn-contact-hero__response-nodes{ fill:#A5D8E2; filter:url(#cnContactBlueGlow); } .cn-contact-hero__response-nodes circle{ transform-box:fill-box; transform-origin:center; animation: cnContactResponsePulse 5.8s ease-in-out infinite; } .cn-contact-hero__response-nodes circle:nth-child(2){ animation-delay:-1.9s; } .cn-contact-hero__response-nodes circle:nth-child(3){ animation-delay:-3.8s; } /* ========================================================= ANIMATIONS ========================================================= */ @keyframes cnContactGridDrift{ from{ background-position:0 0; } to{ background-position:-72px 72px; } } @keyframes cnContactSceneDrift{ from{ transform: scale(1) translate3d(0,0,0); } to{ transform: scale(1.018) translate3d(-9px,6px,0); } } @keyframes cnContactRingRotate{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } } @keyframes cnContactRingRotateReverse{ from{ transform:rotate(360deg); } to{ transform:rotate(0deg); } } @keyframes cnContactRingBreathe{ 0%, 100%{ opacity:.48; transform:scale(.994); } 50%{ opacity:1; transform:scale(1.012); } } @keyframes cnContactRouteFlow{ from{ stroke-dashoffset:0; } to{ stroke-dashoffset:-170; } } @keyframes cnContactSourceFloat{ 0%, 100%{ opacity:.70; transform: translate3d(0,0,0) scale(.98); } 50%{ opacity:1; transform: translate3d(0,-5px,0) scale(1.025); } } @keyframes cnContactNodePulse{ 0%, 100%{ opacity:.28; transform:scale(.84); } 50%{ opacity:.84; transform:scale(1.18); } } @keyframes cnContactCoreBreathe{ 0%, 100%{ opacity:.88; transform:scale(.985); } 50%{ opacity:1; transform:scale(1.02); } } @keyframes cnContactCoreRotate{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } } @keyframes cnContactCoreRotateReverse{ from{ transform:rotate(360deg); } to{ transform:rotate(0deg); } } @keyframes cnContactResponsePulse{ 0%, 100%{ opacity:.25; transform:scale(.85); } 50%{ opacity:.80; transform:scale(1.18); } } /* ========================================================= TABLET ========================================================= */ @media(max-width:1024px){ .cn-contact-hero__art{ width:720px; right:-295px; opacity:.72; } } /* ========================================================= MOBILE ========================================================= */ @media(max-width:768px){ .cn-contact-hero::after{ background: linear-gradient( 90deg, rgba(10,34,48,.98) 0%, rgba(10,34,48,.91) 55%, rgba(10,34,48,.63) 100% ); } .cn-contact-hero__art{ width:540px; right:-380px; top:43%; opacity:.35; } .cn-contact-hero__svg{ animation:none; transform:scale(.98); } .cn-contact-hero__response-lines, .cn-contact-hero__response-nodes{ display:none; } .cn-contact-hero__signals circle:nth-child(n+3){ display:none; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media(prefers-reduced-motion:reduce){ .cn-contact-hero::before, .cn-contact-hero__svg, .cn-contact-hero__rings circle, .cn-contact-hero__routes use, .cn-contact-hero__source, .cn-contact-hero__source .source-core, .cn-contact-hero__core, .cn-contact-hero__core-ring, .cn-contact-hero__response-nodes circle{ animation:none !important; } .cn-contact-hero__signals{ display:none; } } /* ========================================================= 21 — FINAL MANAGED IT HERO Live operations topology. ========================================================= */ .cn-managed-ops{ overflow:hidden; background: radial-gradient( circle at 80% 48%, rgba(76,163,157,.18) 0%, rgba(76,163,157,.055) 32%, transparent 60% ), linear-gradient( 118deg, #153E4D 0%, #0E3340 53%, #082630 100% ) !important; } /* ========================================================= BACKGROUND GRID ========================================================= */ .cn-managed-ops::before{ opacity:.19; background-image: linear-gradient( rgba(145,215,206,.032) 1px, transparent 1px ), linear-gradient( 90deg, rgba(145,215,206,.032) 1px, transparent 1px ); background-size:64px 64px; animation: cnOpsGridDrift 36s linear infinite; } /* ========================================================= COPY PROTECTION ========================================================= */ .cn-managed-ops::after{ background: linear-gradient( 90deg, rgba(8,38,48,.99) 0%, rgba(8,38,48,.94) 28%, rgba(8,38,48,.70) 48%, rgba(8,38,48,.17) 72%, transparent 89% ); } /* ========================================================= ART STAGE ========================================================= */ .cn-managed-ops__art{ position:absolute; z-index:3; width:min(920px,62vw); aspect-ratio:920 / 720; right:-55px; top:50%; transform:translateY(-50%); pointer-events:none; opacity:.99; } .cn-managed-ops__svg{ display:block; width:100%; height:auto; overflow:visible; transform-origin:55% 50%; animation: cnOpsSceneDrift 23s ease-in-out infinite alternate; } /* ========================================================= HORIZONTAL OPERATIONS RAILS ========================================================= */ .cn-managed-ops__rails{ stroke:#9AD8D1; stroke-width:1; stroke-opacity:.09; stroke-dasharray:7 13; } .cn-managed-ops__rails line:nth-child(1){ animation: cnOpsRailFlow 24s linear infinite; } .cn-managed-ops__rails line:nth-child(2){ animation: cnOpsRailFlowReverse 20s linear infinite; } .cn-managed-ops__rails line:nth-child(3){ animation: cnOpsRailFlow 28s linear infinite; } /* ========================================================= DIVIDERS ========================================================= */ .cn-managed-ops__dividers{ stroke:#9AD8D1; stroke-width:1; stroke-opacity:.05; stroke-dasharray:3 12; } /* ========================================================= MODULES ========================================================= */ .cn-managed-ops__module{ transform-box:fill-box; transform-origin:center; animation: cnOpsModuleFloat 8s ease-in-out infinite; } .cn-managed-ops__module:nth-of-type(2){ animation-delay:-1.3s; } .cn-managed-ops__module:nth-of-type(3){ animation-delay:-2.6s; } .cn-managed-ops__module:nth-of-type(4){ animation-delay:-3.9s; } .cn-managed-ops__module:nth-of-type(5){ animation-delay:-5.2s; } .cn-managed-ops__module:nth-of-type(6){ animation-delay:-6.5s; } .cn-managed-ops__module rect{ fill:rgba(100,190,179,.025); stroke:#9FDCD4; stroke-width:1; stroke-opacity:.20; } .cn-managed-ops__module line{ stroke:#AFE5DE; stroke-width:2; stroke-linecap:round; opacity:.23; } .cn-managed-ops__module circle{ fill:#A5DDD6; opacity:.73; filter:url(#cnOpsTealGlow); transform-box:fill-box; transform-origin:center; animation: cnOpsStatusPulse 4.7s ease-in-out infinite; } /* ========================================================= OPERATIONS CORE ========================================================= */ .cn-managed-ops__core{ transform-origin:430px 360px; animation: cnOpsCoreBreathe 7s ease-in-out infinite; } .cn-managed-ops__core-panel{ fill:rgba(89,173,163,.045); stroke:#AFE5DE; stroke-width:1; stroke-opacity:.24; filter:url(#cnOpsTealGlow); } .cn-managed-ops__core-inner{ fill:rgba(89,173,163,.035); stroke:#AFE5DE; stroke-width:1; stroke-opacity:.14; } .cn-managed-ops__core .status-dot{ fill:#9EDDD5; transform-box:fill-box; transform-origin:center; animation: cnOpsStatusPulse 4.2s ease-in-out infinite; } .cn-managed-ops__core .status-dot-2{ animation-delay:-1.4s; } .cn-managed-ops__core .status-dot-3{ animation-delay:-2.8s; } .cn-managed-ops__core .core-line{ stroke:#B4E7E1; stroke-width:2; stroke-linecap:round; opacity:.22; } .cn-managed-ops__core image{ opacity:.97; filter: brightness(0) invert(1) drop-shadow( 0 0 18px rgba(145,220,211,.32) ); } /* ========================================================= SECURITY EMPHASIS ========================================================= */ .cn-managed-ops__module.module-security rect{ stroke-opacity:.32; } .cn-managed-ops__module.module-security .module-status{ fill:#D1F2EE; opacity:.95; } /* ========================================================= ACTIVE ROUTES ========================================================= */ .cn-managed-ops__routes use{ opacity:.78; stroke-dasharray:8 9; animation: cnOpsRouteFlow 19s linear infinite; } /* ========================================================= HEALTH NODES ========================================================= */ .cn-managed-ops__health{ fill:#9EDDD5; filter:url(#cnOpsTealGlow); } .cn-managed-ops__health circle{ transform-box:fill-box; transform-origin:center; animation: cnOpsHealthPulse 5.5s ease-in-out infinite; } .cn-managed-ops__health circle:nth-child(2n){ animation-delay:-1.8s; } .cn-managed-ops__health circle:nth-child(3n){ animation-delay:-3.6s; } /* ========================================================= ANIMATION ========================================================= */ @keyframes cnOpsGridDrift{ from{ background-position:0 0; } to{ background-position:-64px 64px; } } @keyframes cnOpsSceneDrift{ from{ transform: scale(1) translate3d(0,0,0); } to{ transform: scale(1.02) translate3d(-10px,6px,0); } } @keyframes cnOpsRailFlow{ from{ stroke-dashoffset:0; } to{ stroke-dashoffset:-170; } } @keyframes cnOpsRailFlowReverse{ from{ stroke-dashoffset:-170; } to{ stroke-dashoffset:0; } } @keyframes cnOpsRouteFlow{ from{ stroke-dashoffset:0; } to{ stroke-dashoffset:-150; } } @keyframes cnOpsModuleFloat{ 0%, 100%{ opacity:.70; transform: translate3d(0,0,0) scale(.985); } 50%{ opacity:1; transform: translate3d(0,-5px,0) scale(1.02); } } @keyframes cnOpsStatusPulse{ 0%, 100%{ opacity:.28; transform:scale(.84); } 50%{ opacity:.90; transform:scale(1.18); } } @keyframes cnOpsCoreBreathe{ 0%, 100%{ opacity:.88; transform:scale(.986); } 50%{ opacity:1; transform:scale(1.02); } } @keyframes cnOpsHealthPulse{ 0%, 100%{ opacity:.22; transform:scale(.82); } 50%{ opacity:.82; transform:scale(1.20); } } /* ========================================================= TABLET ========================================================= */ @media(max-width:1024px){ .cn-managed-ops__art{ width:800px; right:-345px; opacity:.74; } } /* ========================================================= MOBILE ========================================================= */ @media(max-width:768px){ .cn-managed-ops::after{ background: linear-gradient( 90deg, rgba(8,38,48,.98) 0%, rgba(8,38,48,.91) 55%, rgba(8,38,48,.63) 100% ); } .cn-managed-ops__art{ width:610px; right:-445px; top:43%; opacity:.36; } .cn-managed-ops__svg{ animation:none; transform:scale(.98); } .cn-managed-ops__dividers{ display:none; } .cn-managed-ops__signals circle:nth-child(n+3){ display:none; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media(prefers-reduced-motion:reduce){ .cn-managed-ops::before, .cn-managed-ops__svg, .cn-managed-ops__rails line, .cn-managed-ops__module, .cn-managed-ops__module circle, .cn-managed-ops__core, .cn-managed-ops__core .status-dot, .cn-managed-ops__routes use, .cn-managed-ops__health circle{ animation:none !important; } .cn-managed-ops__signals{ display:none; } } /* ========================================================= 22 — GLOBAL SINGLE BLOG POST SYSTEM Apply these classes to the Elementor Single Post template. Writers edit only the WordPress post fields and content. ========================================================= */ /* HERO: outer Elementor container class = cn-post-hero */ .cn-post-hero { position: relative; overflow: hidden; padding: clamp(64px, 9vw, 112px) 24px clamp(90px, 12vw, 144px); color: var(--cn-white); background: repeating-linear-gradient( 45deg, transparent, transparent 24px, rgba(255,255,255,.045) 24px, rgba(255,255,255,.045) 26px ), linear-gradient(135deg, rgba(23,70,107,.98), rgba(31,93,144,.94)); border-bottom: 8px solid var(--cn-orange); } .cn-post-hero > .e-con-inner { width: min(100%, var(--cn-post-wide-width)); margin-inline: auto; } /* EYEBROW: Post Info widget class = cn-post-eyebrow */ .cn-post-eyebrow { max-width: 920px; margin: 0 0 22px; } .cn-post-eyebrow .elementor-post-info { margin: 0; padding: 0; list-style: none; } .cn-post-eyebrow .elementor-post-info__item, .cn-post-eyebrow .elementor-post-info__terms-list, .cn-post-eyebrow a { color: var(--cn-orange) !important; font-family: "Host Grotesk", Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: .18em; text-decoration: none; text-transform: uppercase; } .cn-post-eyebrow a:hover { color: var(--cn-white) !important; } /* TITLE: Post Title widget class = cn-post-title */ .cn-post-title .elementor-heading-title, .cn-post-title h1 { max-width: 920px; margin: 0; color: var(--cn-white); font-family: "Host Grotesk", Arial, sans-serif; font-size: clamp(42px, 6vw, 72px); font-weight: 700; line-height: 1.04; letter-spacing: -0.035em; } /* DESCRIPTION: Post Excerpt widget class = cn-post-description */ .cn-post-description { max-width: 760px; margin-top: 24px; } .cn-post-description p, .cn-post-description .elementor-widget-container { margin: 0; color: rgba(255,255,255,.84); font-family: "Host Grotesk", Arial, sans-serif; font-size: clamp(19px, 2.1vw, 24px); line-height: 1.55; } /* FEATURED IMAGE: Featured Image widget class = cn-post-image */ .cn-post-image { position: relative; z-index: 2; width: min(calc(100% - 44px), 960px); margin: clamp(-72px, -7vw, -48px) auto 0; } .cn-post-image .elementor-widget-container { overflow: hidden; background: var(--cn-white); border: 8px solid var(--cn-white); border-radius: 14px; box-shadow: 0 22px 50px rgba(23,70,107,.18); } .cn-post-image img { display: block; width: 100%; aspect-ratio: 16 / 8.5; object-fit: cover; } /* ARTICLE AREA: outer Elementor container class = cn-post-body-wrap */ .cn-post-body-wrap { margin-top: -70px; padding: 142px 22px 84px; background: var(--cn-light); } /* POST CONTENT: Post Content widget class = cn-post-body */ .cn-post-body { width: min(100%, var(--cn-post-reading-width)); margin-inline: auto; } .cn-post-body > .elementor-widget-container { padding: clamp(34px, 6vw, 68px); color: var(--cn-text); background: var(--cn-white); border: 1px solid var(--cn-border); border-top: 5px solid var(--cn-deep-bright); box-shadow: var(--cn-post-shadow); } .cn-post-body p, .cn-post-body li { color: var(--cn-text); font-family: "Host Grotesk", Arial, sans-serif; font-size: 18px; line-height: 1.78; } .cn-post-body p { margin: 0 0 1.45em; } .cn-post-body h2, .cn-post-body h3, .cn-post-body h4 { color: var(--cn-deep); font-family: "Host Grotesk", Arial, sans-serif; font-weight: 700; } .cn-post-body h2 { position: relative; margin: 2em 0 .75em; padding-bottom: 16px; font-size: clamp(28px, 4vw, 36px); line-height: 1.2; } .cn-post-body h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 76px; height: 4px; background: var(--cn-orange); } .cn-post-body h3 { margin: 1.8em 0 .65em; padding: 4px 0 4px 15px; font-size: 25px; line-height: 1.3; border-left: 4px solid var(--cn-deep-bright); } .cn-post-body h4 { margin: 1.6em 0 .6em; font-size: 21px; line-height: 1.35; } .cn-post-body a { color: var(--cn-deep-bright); font-weight: 700; text-decoration-color: rgba(241,108,32,.65); text-decoration-thickness: 2px; text-underline-offset: 3px; } .cn-post-body a:hover { color: var(--cn-orange); } /* Ordinary blockquotes automatically become branded callout boxes. */ .cn-post-body blockquote, .cn-post-body .wp-block-quote { margin: 34px 0; padding: 24px 28px; color: var(--cn-deep); background: var(--cn-light); border: 1px solid var(--cn-border); border-left: 6px solid var(--cn-orange); box-shadow: 0 8px 20px rgba(23,70,107,.06); } .cn-post-body blockquote p { margin: 0; color: inherit; font-size: 20px; font-weight: 700; line-height: 1.55; } /* Ordinary lists automatically become structured information panels. */ .cn-post-body ul, .cn-post-body ol { margin: 28px 0 34px; padding: 22px 28px 22px 52px; background: rgba(31,93,144,.055); border: 1px solid rgba(31,93,144,.18); border-radius: 8px; } .cn-post-body li { margin: 7px 0; padding-left: 5px; } .cn-post-body li::marker { color: var(--cn-orange); font-weight: 700; } /* The editor's Separator block becomes a branded article divider. */ .cn-post-body hr, .cn-post-body .wp-block-separator { width: 100%; height: 1px; margin: 48px 0; background: linear-gradient( 90deg, transparent 0, var(--cn-border) 18%, var(--cn-orange) 48%, var(--cn-orange) 52%, var(--cn-border) 82%, transparent 100% ); border: 0; } .cn-post-body figure, .cn-post-body .wp-block-image { margin: 38px 0; } .cn-post-body figure img, .cn-post-body .wp-block-image img { display: block; max-width: 100%; height: auto; border: 6px solid var(--cn-white); border-radius: 8px; box-shadow: 0 0 0 1px var(--cn-border), 0 12px 28px rgba(23,70,107,.10); } .cn-post-body figcaption { margin-top: 10px; color: var(--cn-muted); font-size: 14px; line-height: 1.5; text-align: center; } .cn-post-body table { width: 100%; margin: 34px 0; border-collapse: collapse; background: var(--cn-white); border: 1px solid var(--cn-border); } .cn-post-body th { padding: 14px 16px; color: var(--cn-white); background: var(--cn-deep); text-align: left; } .cn-post-body td { padding: 13px 16px; border-bottom: 1px solid var(--cn-border); } .cn-post-body tr:nth-child(even) td { background: var(--cn-light); } .cn-post-body code { padding: .15em .35em; color: var(--cn-deep); background: var(--cn-light); border: 1px solid var(--cn-border); border-radius: 4px; } .cn-post-body pre { max-width: 100%; margin: 34px 0; padding: 20px 22px; overflow-x: auto; color: var(--cn-white); background: var(--cn-ink); border-radius: 8px; } .cn-post-body pre code { padding: 0; color: inherit; background: transparent; border: 0; } /* CTA: saved Elementor template/global widget class = cn-post-cta */ .cn-post-cta { width: min(100%, var(--cn-post-reading-width)); margin: 58px auto 0; padding: clamp(34px, 6vw, 52px); color: var(--cn-white); background: repeating-linear-gradient( 45deg, transparent, transparent 22px, rgba(255,255,255,.05) 22px, rgba(255,255,255,.05) 24px ), linear-gradient(135deg, rgba(23,70,107,.99), rgba(31,93,144,.95)); border-top: 6px solid var(--cn-orange); border-radius: var(--cn-post-radius); box-shadow: 0 18px 36px rgba(23,70,107,.18); } .cn-post-cta h2, .cn-post-cta .elementor-heading-title { margin: 0 0 12px; color: var(--cn-white); font-size: clamp(28px, 4vw, 36px); line-height: 1.2; } .cn-post-cta p { max-width: 650px; margin: 0 0 24px; color: rgba(255,255,255,.84); font-size: 17px; line-height: 1.65; } .cn-post-cta .elementor-button, .cn-post-cta .cn-post-cta-button { display: inline-block; padding: 14px 24px; color: var(--cn-deep) !important; background: var(--cn-orange); border: 0; border-radius: 6px; font-weight: 700; text-decoration: none; transition: transform .2s ease, background-color .2s ease; } .cn-post-cta .elementor-button:hover, .cn-post-cta .cn-post-cta-button:hover { color: var(--cn-deep) !important; background: var(--cn-white); transform: translateY(-2px); } @media (max-width: 767px) { .cn-post-hero { padding-top: 54px; padding-bottom: 92px; } .cn-post-title .elementor-heading-title, .cn-post-title h1 { font-size: clamp(38px, 11vw, 52px); } .cn-post-image { width: calc(100% - 28px); margin-top: -58px; } .cn-post-image .elementor-widget-container { border-width: 5px; border-radius: 10px; } .cn-post-body-wrap { margin-top: -50px; padding: 106px 14px 58px; } .cn-post-body > .elementor-widget-container { padding: 34px 24px; } .cn-post-body p, .cn-post-body li { font-size: 17px; } .cn-post-body ul, .cn-post-body ol { padding: 20px 22px 20px 42px; } .cn-post-body table { display: block; max-width: 100%; overflow-x: auto; white-space: nowrap; } .cn-post-cta { margin-top: 42px; border-radius: 8px; } .cn-post-cta .elementor-button, .cn-post-cta .cn-post-cta-button { display: block; width: 100%; text-align: center; } } @media (prefers-reduced-motion: reduce) { .cn-post-cta .elementor-button, .cn-post-cta .cn-post-cta-button { transition: none; } } /* ========================================================= VEITH TECHNOLOGIES → CHARLOTTE NETWORKS HERO TRANSITION Dedicated overrides for the migration/rebrand page. ========================================================= */ /* ========================================================= HERO LAYOUT ========================================================= */ .cn-transition-hero .cn-page-hero__inner { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) !important; align-items: center !important; gap: 48px !important; width: min( var(--cn-content-width), calc(100% - 48px) ) !important; margin-inline: auto !important; padding: 82px 0 74px !important; } /* Override the shared internal-hero 59% copy width. This was the rule squeezing "Technologies" into multiple lines. */ .cn-transition-hero .cn-page-hero__copy { position: relative; z-index: 8; width: 100% !important; max-width: 610px !important; min-width: 0 !important; } /* ========================================================= COPY ========================================================= */ .cn-transition-hero .cn-page-hero__eyebrow { margin: 0 0 22px !important; } .cn-transition-hero .cn-page-hero__title { width: 100% !important; max-width: 610px !important; margin: 0 !important; font-size: clamp(46px, 3.8vw, 62px) !important; line-height: 1.01 !important; letter-spacing: -.04em !important; word-break: normal !important; overflow-wrap: normal !important; hyphens: none !important; } .cn-transition-hero .cn-page-hero__text { width: 100% !important; max-width: 570px !important; margin: 28px 0 0 !important; font-size: 18px !important; line-height: 1.62 !important; word-break: normal !important; overflow-wrap: normal !important; } .cn-transition-hero .cn-page-hero__meta { width: 100% !important; max-width: 570px !important; margin: 32px 0 0 !important; padding-top: 20px !important; } /* ========================================================= ART STAGE Override the absolute Services-page art positioning. ========================================================= */ .cn-transition-hero .cn-transition-hero__art { position: relative !important; right: auto !important; top: auto !important; z-index: 3; width: 100% !important; max-width: 720px !important; aspect-ratio: 760 / 720; margin: 0 !important; transform: translate(26px, -16px) scale(1.08) !important; transform-origin: center center !important; pointer-events: none; opacity: .98; } .cn-transition-hero .cn-transition-hero__svg { display: block; width: 100% !important; height: auto !important; overflow: visible; transform-origin: 52% 50%; } /* ========================================================= VEITH / LEGACY SIDE ========================================================= */ .cn-transition-hero__legacy-core { opacity: .82; } .cn-transition-hero__vt-logo { opacity: .96; filter: drop-shadow(0 0 10px rgba(143,212,205,.14)) drop-shadow(0 0 20px rgba(143,212,205,.08)); } .cn-transition-hero__legacy-ring { transform-origin: 216px 360px; animation: cnLegacyRingSpin 95s linear infinite; } /* ========================================================= CHARLOTTE NETWORKS SIDE ========================================================= */ .cn-transition-hero__cn-core { transform-origin: 538px 362px; transform: scale(1.05); filter: drop-shadow(0 0 12px rgba(143,212,205,.10)) drop-shadow(0 0 24px rgba(143,212,205,.05)); } .cn-transition-hero__cn-ring { transform-origin: 538px 362px; animation: cnCNRingSpin 70s linear infinite; } /* ========================================================= CENTER TRANSITION NODE ========================================================= */ .cn-transition-hero__change-node { transform-origin: 395px 347px; animation: cnTransitionPulse 4.5s ease-in-out infinite; } /* ========================================================= ANIMATIONS ========================================================= */ @keyframes cnLegacyRingSpin { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } @keyframes cnCNRingSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes cnTransitionPulse { 0%, 100% { opacity: .72; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } } /* ========================================================= SMALL DESKTOP / LAPTOP ========================================================= */ @media (max-width: 1200px) { .cn-transition-hero .cn-page-hero__inner { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr) !important; gap: 32px !important; padding: 72px 0 66px !important; } .cn-transition-hero .cn-page-hero__copy { max-width: 540px !important; } .cn-transition-hero .cn-page-hero__title { max-width: 540px !important; font-size: clamp(44px, 4.25vw, 56px) !important; } .cn-transition-hero .cn-page-hero__text, .cn-transition-hero .cn-page-hero__meta { max-width: 520px !important; } .cn-transition-hero .cn-transition-hero__art { transform: translate(12px, -8px) scale(1.03) !important; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .cn-transition-hero { min-height: auto; } .cn-transition-hero .cn-page-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, .92fr) !important; gap: 24px !important; width: calc(100% - 40px) !important; padding: 62px 0 58px !important; } .cn-transition-hero .cn-page-hero__copy { width: 100% !important; max-width: none !important; } .cn-transition-hero .cn-page-hero__title { max-width: 500px !important; font-size: clamp(42px, 5.2vw, 52px) !important; } .cn-transition-hero .cn-page-hero__text, .cn-transition-hero .cn-page-hero__meta { max-width: 500px !important; } .cn-transition-hero .cn-transition-hero__art { width: 100% !important; max-width: 600px !important; transform: translate(10px, -4px) scale(1) !important; opacity: .84; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 768px) { .cn-transition-hero::after { background: linear-gradient( 90deg, rgba(7,31,41,.97) 0%, rgba(7,31,41,.90) 60%, rgba(7,31,41,.58) 100% ); } .cn-transition-hero .cn-page-hero__inner { display: block !important; width: calc(100% - 36px) !important; padding: 82px 0 52px !important; } .cn-transition-hero .cn-page-hero__copy { width: 100% !important; max-width: none !important; } .cn-transition-hero .cn-page-hero__title { width: 100% !important; max-width: 560px !important; font-size: clamp(40px, 11vw, 54px) !important; line-height: 1 !important; } .cn-transition-hero .cn-page-hero__text { width: 100% !important; max-width: 540px !important; font-size: 17px !important; } .cn-transition-hero .cn-page-hero__meta { width: 100% !important; max-width: 500px !important; margin-top: 28px !important; letter-spacing: .11em; } .cn-transition-hero .cn-transition-hero__art { width: min(620px,115vw) !important; max-width: none !important; margin: 18px auto -30px !important; right: auto !important; top: auto !important; transform: translateX(4%) scale(.96) !important; opacity: .76; } .cn-transition-hero .cn-transition-hero__svg { animation: none; } .cn-transition-hero__legacy-core { opacity: .88; } .cn-transition-hero__vt-logo { opacity: 1; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .cn-transition-hero__legacy-ring, .cn-transition-hero__cn-ring, .cn-transition-hero__change-node { animation: none !important; } } /* ========================================================= 99 — PERFORMANCE GUARDRAILS ========================================================= */ /* Cookie consent is frequently selected as the mobile LCP text element. Keep it independent of custom webfont timing. */ #cookieadmin_notice, #cookieadmin_notice * { font-family: Arial, Helvetica, sans-serif !important; } /* MOBILE FONT STRATEGY Homepage LCP testing showed Elementor child typography rules can override font inheritance from .cn-hero. Force only the homepage hero's text-bearing elements to a system font on mobile. This preserves icon/SVG font behavior and desktop branding. Remove after Host Grotesk is served as optimized WOFF2 with font-display: swap and mobile LCP is revalidated. */ @media (max-width: 768px) { .cn-hero h1, .cn-hero h2, .cn-hero h3, .cn-hero h4, .cn-hero h5, .cn-hero h6, .cn-hero p, .cn-hero a, .cn-hero button, .cn-hero .elementor-heading-title, .cn-hero .elementor-widget-text-editor, .cn-hero .elementor-widget-text-editor p, .cn-hero .elementor-button, .cn-hero .elementor-button-text { font-family: Arial, Helvetica, sans-serif !important; } .cn-page-hero, .cn-transition-hero { font-family: Arial, Helvetica, sans-serif; } } /* MOBILE HERO PAINT STRATEGY Keep decorative hero artwork visible but static on mobile. This removes continuous animation work from Lighthouse's throttled mobile path without deleting the design. */ @media (max-width: 768px) { .cn-hero *, .cn-hero *::before, .cn-hero *::after, .cn-page-hero *, .cn-page-hero *::before, .cn-page-hero *::after, .cn-services-hero *, .cn-services-hero *::before, .cn-services-hero *::after, .cn-industries-landscape *, .cn-industries-landscape *::before, .cn-industries-landscape *::after, .cn-about-hero *, .cn-about-hero *::before, .cn-about-hero *::after, .cn-news-hero *, .cn-news-hero *::before, .cn-news-hero *::after, .cn-contact-hero *, .cn-contact-hero *::before, .cn-contact-hero *::after, .cn-managed-ops *, .cn-managed-ops *::before, .cn-managed-ops *::after, .cn-transition-hero *, .cn-transition-hero *::before, .cn-transition-hero *::after { animation: none !important; } .cn-button, .cn-page-hero__primary, .cn-page-hero__secondary { transition-duration: .12s; } /* Homepage SVG hero: SMIL / is not stopped by CSS animation:none, so remove the moving signal group entirely on mobile. Also remove SVG glow filters from the remaining nodes. */ .cn-hero .cn-signals, .cn-hero .cn-status-pips { display: none !important; } .cn-hero .cn-network-nodes { filter: none !important; } .cn-hero .cn-map-rings, .cn-hero .cn-network-nodes circle, .cn-hero .cn-status-pip--live { animation: none !important; } } @media (prefers-reduced-motion: reduce) { .cn-button, .cn-page-hero__primary, .cn-page-hero__secondary { transition: none !important; } }/* End custom CSS */ /* Start Custom Fonts CSS */@font-face { font-family: 'Host Grotesk'; font-style: normal; font-weight: 400; font-display: auto; src: url('https://charlottenetworks.com/wp-content/uploads/2026/08/HostGrotesk-Regular.ttf') format('truetype'); } @font-face { font-family: 'Host Grotesk'; font-style: normal; font-weight: 500; font-display: auto; src: url('https://charlottenetworks.com/wp-content/uploads/2026/08/HostGrotesk-Medium.ttf') format('truetype'); } @font-face { font-family: 'Host Grotesk'; font-style: normal; font-weight: 600; font-display: auto; src: url('https://charlottenetworks.com/wp-content/uploads/2026/08/HostGrotesk-SemiBold.ttf') format('truetype'); } /* End Custom Fonts CSS */