/* Crown & Compass Global — Digital Transformation Readiness page styles Extracted from the current stylesheet in original cascade order. Keep global style.css unchanged during the first live test. */ /* Theme Name: Crown & Compass Global Author: Crown & Compass Global Description: Custom WordPress theme for Crown & Compass Global Business Operations website. Version: 1.0 Text Domain: crown-and-compass-global */ /* ========================================== CONTRACT BASICS MODAL ========================================== */ /* CLOSE BUTTON */ /* TAB BAR */ /* MODAL BODY */ /* INTRO TEXT */ /* CONTENT CARDS */ /* DRAFTING LIST */ /* QUOTE */ /* MOBILE */ /* ========================= NAVIGATION ========================= */ /* ========================= HERO ========================= */ /* ========================= DIAGNOSTIC / WHERE DO YOU NEED HELP ========================= */ /* Three HORIZONTAL rows */ /* Text left — button right */ /* Blue button */ /* MOBILE */ /* ========================= BUSINESS OPERATIONS SERVICES Reference-style wider layout ========================= */ /* TABLET */ /* MOBILE */ /* ========================= PRIVACY / TRUST BAND Wider reference layout ========================= */ /* ========================= STATISTICS BAND ========================= */ /* Little orange line under each headline */ /* TABLET */ /* MOBILE */ /* ========================= FLOATING CONSULTATION CTA ========================= */ /* ========================= GLOBAL SITE FOOTER ========================= */ /* ========================= FOOTER TYPOGRAPHY ========================= */ /* ========================= COMPANY / LOGO COLUMN ========================= */ /* ========================= CONTACT COLUMN ========================= */ /* ========================= SERVICES COLUMN ========================= */ /* ========================= NEWSLETTER ========================= */ /* ========================= FOOTER RESPONSIVE ========================= */ /* ================================================== JLG GLOBAL TYPOGRAPHY SCALE Larger typography to match reference design ================================================== */ /* ---------- NAVIGATION ---------- */ /* ---------- HERO ---------- */ /* ---------- SECTION HEADINGS ---------- */ /* ---------- SECTION INTRO TEXT ---------- */ /* ---------- WHERE DO YOU NEED HELP ---------- */ /* ---------- SERVICE CARDS ---------- */ /* ---------- PRIVACY / TRUST SECTION ---------- */ /* ---------- STATISTICS ---------- */ /* ---------- FLOATING CTA ---------- */ /* ================================================== FOOTER TYPOGRAPHY ================================================== */ /* ---------- MOBILE TYPOGRAPHY ---------- */ /* ================================================== JLG REFERENCE TYPOGRAPHY — FINAL SCALE Match original THG reference proportions ================================================== */ /* HEADER / NAV */ /* HEADER LOGO / JLG TEXT */ /* HERO EYEBROW */ /* HERO MAIN HEADLINE */ /* MAIN SECTION HEADINGS */ /* LITTLE LINE UNDER SECTION HEADINGS */ /* SECTION INTRO COPY */ /* ================================================== WHERE DO YOU NEED HELP ================================================== */ /* ================================================== SERVICE CARDS ================================================== */ /* ================================================== TRUST SECTION ================================================== */ /* ================================================== STATS ================================================== */ /* ================================================== FLOATING CONSULTATION BUTTON ================================================== */ /* ================================================== FOOTER — SCALE EVERYTHING UP TOO ================================================== */ /* ================================================== MOBILE — DON'T LET DESKTOP SIZES GET RIDICULOUS ================================================== */ /* Wider content proportions to match reference */ /* ========================= SERVICES SECTION HEADER Match reference layout ========================= */ /* ========================= HERO HEADLINE WIDTH / WRAPPING Match reference proportions ========================= */ /* More breathing room under hero headline */ /* Center the hero content vertically */ /* ========================================== HEADER / NAVIGATION — MATCH CCG REFERENCE ========================================== */ /* Make the whole header taller */ /* Header inner container */ /* JLG circle */ /* JLG text beside circle */ /* Navigation links */ /* More breathing room between nav links */ /* ========================================== FINAL HEADER / NAV SIZE Bigger navigation + no active blue line ========================================== */ /* Make header taller */ /* Navigation container */ /* ALL navigation links */ /* REMOVE blue line from current/active page */ /* Remove underline if it was created with ::after */ /* Make JLG brand larger too */ /* ========================================== FINAL NAVBAR OVERRIDE ========================================== */ /* JLG brand area */ /* Circle JLG mark */ /* Navigation container */ /* ACTUAL navigation links */ /* Remove active blue underline */ /* In case underline was created with a pseudo-element */ /* ========================================== NAVIGATION FONT ========================================== */ /* ========================================== NAVIGATION HOVER UNDERLINE ========================================== */ /* Expand line on hover */ /* ========================================== SECTION HEADING BLUE DIVIDERS ========================================== */ /* Where Do You Need Help? */ /* ========================================== BLUE SECTION DIVIDER LINES ========================================== */ /* ========================================== INFORMATION OPERATIONS HERO ========================================== */ /* Grid / dark overlay */ /* MOBILE */ /* ========================================== INFORMATION OPERATIONS DOES THIS SOUND FAMILIAR? ========================================== */ /* MOBILE */ /* ========================================== INFORMATION OPERATIONS MAIN CONTENT ========================================== */ /* TWO-COLUMN LAYOUT */ /* ========================================== SIDEBAR ========================================== */ /* INFO BUTTON */ /* TOOLTIP */ /* ========================================== RIGHT-SIDE CONTENT ========================================== */ /* ========================================== ASSESS / ORGANIZE / GOVERN / SUSTAIN ========================================== */ /* ========================================== RESPONSIVE ========================================== */ /* ========================================== INFORMATION OPERATIONS DOES THIS SOUND FAMILIAR? ========================================== */ /* MOBILE */ /* ========================================== INFORMATION OPERATIONS MAIN CONTENT — FINAL SCALE / SPACING ========================================== */ /* SIDEBAR */ /* RIGHT SIDE EYEBROW */ /* INTRODUCTION */ /* HOW JLG HELPS */ /* FOUR CARDS */ /* TABLET / MOBILE */ /* ========================================== INFORMATION OPERATIONS ALIGNMENT / WIDTH POLISH ========================================== */ /* Give the whole section a little more vertical balance */ /* ========================================== INFORMATION OPERATIONS ALIGNMENT / WIDTH POLISH ========================================== */ /* Give the whole section a little more vertical balance */ /* ========================================== STATS BAND — CLEAN WIDE VERSION ========================================== */ /* ========================================== INFORMATION OPERATIONS FINAL REFERENCE LAYOUT ========================================== */ /* LEFT SIDEBAR */ /* RIGHT CONTENT */ /* HOW JLG HELPS */ /* FOUR PROCESS CARDS */ /* TABLET */ /* MOBILE */ /* ========================================== CONTRACT & COMMERCIAL OPERATIONS FAMILIAR SECTION - TEXT SIZE ========================================== */ /* ========================================== CONTRACT PAGE — SIDEBAR SECTION SPACING ========================================== */ /* Give the second sidebar heading breathing room */ /* ========================================== CONTRACT PAGE — HOW JLG HELPS SPACING ========================================== */ /* ========================================== HOW JLG HELPS — TOP SPACING ========================================== */ /* ========================================== CONTRACT PAGE SERVICES INCLUDE / TYPICAL ENGAGEMENTS ========================================== */ /* HEADINGS */ /* LISTS */ /* BLUE CHECKMARK */ /* MOBILE */ /* ========================================== DIGITAL TRANSFORMATION READINESS FAMILIAR SECTION ========================================== */ .digital-readiness-page .familiar-band{ padding:72px 24px 78px; } .digital-readiness-page .familiar-band-inner{ max-width:1180px; } .digital-readiness-page .familiar-lead{ font-size:19px; line-height:1.55; margin:0 0 18px; } .digital-readiness-page .familiar-band-inner h2{ font-size:36px; line-height:1.2; } .digital-readiness-page .pain-list{ gap:22px 58px; } .digital-readiness-page .pain-list li{ font-size:20px; line-height:1.55; } /* ========================================== DIGITAL TRANSFORMATION READINESS FAMILIAR SECTION — MATCH REFERENCE ========================================== */ .digital-readiness-page .familiar-band{ padding:52px 24px 58px; } .digital-readiness-page .familiar-band-inner{ max-width:900px; margin:0 auto; } /* TOP INTRO — narrower so it wraps like reference */ .digital-readiness-page .familiar-lead{ max-width:760px; margin:0 auto 30px; text-align:center; font-size:19px; line-height:1.5; color:var(--ink-soft); } .digital-readiness-page .familiar-lead strong{ color:var(--accent-dark); font-weight:700; } /* HEADING */ .digital-readiness-page .familiar-band-inner h2{ font-size:30px; line-height:1.2; margin:0; } .digital-readiness-page .familiar-band-inner .rule{ margin:22px auto 32px; } /* TWO-COLUMN BULLETS */ .digital-readiness-page .pain-list{ grid-template-columns:1fr 1fr; gap:18px 46px; text-align:left; } .digital-readiness-page .pain-list li{ font-size:17px; line-height:1.55; } /* MOBILE */ @media (max-width:760px){ .digital-readiness-page .familiar-lead{ font-size:17px; } .digital-readiness-page .familiar-band-inner h2{ font-size:28px; } .digital-readiness-page .pain-list{ grid-template-columns:1fr; } } /* ========================================== DIGITAL READINESS — FONT SIZE BOOST ========================================== */ /* Intro sentence */ .digital-readiness-page .familiar-lead{ font-size:21px; line-height:1.5; } /* Main heading */ .digital-readiness-page .familiar-band-inner h2{ font-size:36px; } /* Bullet text */ .digital-readiness-page .pain-list li{ font-size:19px; line-height:1.55; } /* ========================================== DIGITAL READINESS — SPREAD BULLETS OUT ========================================== */ .digital-readiness-page .familiar-band-inner{ max-width:1180px; } .digital-readiness-page .pain-list{ width:100%; grid-template-columns:1fr 1fr; column-gap:90px; row-gap:22px; } /* DIGITAL READINESS — KEEP INTRO ON ONE LINE */ .digital-readiness-page .familiar-lead{ max-width:none; width:100%; white-space:nowrap; } @media (max-width:760px){ .digital-readiness-page .familiar-lead{ white-space:normal; } } /* ================================================== JLG GLOBAL TYPOGRAPHY SYSTEM ================================================== */ /* ========================================== BODY / GENERAL COPY — ASSISTANT ========================================== */ /* Body copy specifically */ /* ========================================== ALL HEADINGS — LORA ========================================== */ /* Small/card/sidebar headings */ /* Hero headings */ /* ========================================== HEADER / NAVIGATION — MONTSERRAT ========================================== */ /* ========================================== FLOATING CONSULTATION CTA — MONTSERRAT ========================================== */ /* ========================================== ENTIRE FOOTER — MONTSERRAT ========================================== */ /* ========================================== DIGITAL READINESS — BRIDGE CALLOUT RESTORE ========================================== */ .digital-readiness-page .bridge-statement{ display:block; margin:30px 0 52px; padding:28px 34px; background: linear-gradient( 135deg, rgba(54,78,105,0.16) 0%, rgba(54,78,105,0.08) 55%, rgba(255,255,255,0.96) 100% ); border-left:4px solid #364E69; font-family:"Assistant", serif !important; font-size:18px; font-weight:500; line-height:1.65; color:var(--ink); border-radius:0 6px 6px 0; } /* ================================================== JLG GLOBAL TYPOGRAPHY — SIZE ADJUSTMENT ================================================== */ /* BODY COPY — ASSISTANT */ /* MAJOR PAGE HEADINGS */ /* SIDEBAR HEADINGS */ /* SIDEBAR ITEMS */ /* FOUR PROCESS CARDS */ /* PRIVACY / TRUST CARDS */ /* STATS BAND */ /* DOES THIS SOUND FAMILIAR */ /* MAIN SERVICE PAGE COPY */ /* CALLOUT / BRIDGE STATEMENTS */ /* ========================================== PRIVACY / TRUST CARDS — LARGER TYPOGRAPHY ========================================== */ /* ========================================== PRIVACY / TRUST CARDS — WIDER LAYOUT ========================================== */ /* ========================================== LANDING PAGE — LARGER SERVICE CARD COPY ========================================== */ /* Intro/tagline inside each service card */ /* Main description inside service cards */ /* Orange check-list items */ /* ========================================== WHERE DO YOU NEED HELP — LARGER COPY ========================================== */ /* Description on the left side of each row */ /* Blue destination buttons */ /* ========================================== LANDING PAGE — FINAL SUPPORTING TEXT SIZES ========================================== */ /* Not sure where to start?... */ /* Three focused service areas, one partner... */ /* BUSINESS OPERATIONS eyebrow */ /* ========================================== GLOBAL BLUE DIVIDER LINES — LONGER ========================================== */ /* ========================================== FINAL FLOATING CONSULTATION SIZE ========================================== */ /* ========================================== FINAL STATS BAND HEIGHT + DIVIDERS ========================================== */ /* ========================================== SERVICE CARDS — TIGHTER VERTICAL SPACING ========================================== */ /* Reduce overall top/bottom padding inside cards */ /* Tighten heading → italic tagline */ /* Tighten tagline → description */ /* Tighten description → checklist */ /* Slightly tighten space between checklist items */ /* Keep button from having excessive space above it */ /* ========================================== FOOTER — NEWSLETTER SIZE REFINEMENT ========================================== */ /* Newsletter heading */ /* Email field */ /* Subscribe button */ /* Copyright */ /* ========================================== FOOTER — CLEAN / COMPACT FINAL LAYOUT ========================================== */ /* Overall footer spacing */ /* Smaller logo block */ /* Company paragraph — biggest height saver */ /* Social icons closer to company copy */ /* Footer column headings */ /* Shorter lines under headings */ /* Contact information */ /* What We Do links */ /* Newsletter heading */ /* Newsletter row */ /* Copyright */ /* ================================================== JLG FOOTER — REDESIGN ================================================== */ /* ========================================== ALL FOOTER TYPOGRAPHY ========================================== */ /* ========================================== COMPANY COLUMN ========================================== */ /* ========================================== SMALL COLUMN HEADERS ========================================== */ /* ========================================== CONTACT ========================================== */ /* ========================================== WHAT WE DO ========================================== */ /* ========================================== NEWSLETTER ========================================== */ /* HOVER */ /* CLICK / PRESSED */ /* ========================================== SECOND CONSULTATION CTA ========================================== */ /* ========================================== COPYRIGHT BOTTOM BAR ========================================== */ /* ========================================== RESPONSIVE ========================================== */ /* ========================================== NEWSLETTER EMAIL ROW — FINAL ALIGNMENT ========================================== */ /* EMAIL */ /* SUBSCRIBE BUTTON */ /* HOVER */ /* PRESSED */ /* ========================================== FOOTER — FINAL TEXT + DIVIDER ALIGNMENT ========================================== */ /* JUSTIFY COMPANY BLURB */ /* ========================================== MATCH ALL COLUMN HEADER DIVIDERS ========================================== */ /* Make these three columns use the full available width of their grid column */ /* Keep all three section labels consistent */ /* Make every divider line identical */ /* ================================================== FOOTER HEADINGS — CENTER + PERFECTLY ALIGNED RULES ================================================== */ /* The three footer section headings */ /* The three lines directly underneath */ /* ========================================== STATS BAND — SITEWIDE GRAY BACKGROUND ========================================== */ /* ================================================== STATS BAND — BODY TEXT OFF-WHITE ================================================== */ /* KEEP STAT HEADINGS PURE WHITE */ /* ================================================== STATS BAND — VERTICAL DIVIDERS ================================================== */ /* ================================================== DIAGNOSTIC BUTTONS — JLG BLUE ================================================== */ /* ========================================================= JLG BUSINESS OPERATIONS — HERO BACKGROUND IMAGE ========================================================= */ /* ========================================================= SERVICE PAGE HEROES — MATCH LANDING PAGE ========================================================= */ /* Small uppercase service label */ /* Main hero headline */ /* ========================================================= FAMILIAR SECTION — TYPOGRAPHY ========================================================= */ /* Section heading */ /* Bullet text */ /* Keep the bullet itself proportional */ /* ========================================================= INFORMATION OPERATIONS — MAIN CONTENT PROPORTIONS ========================================================= */ /* Overall section width */ /* ========================================== SIDEBAR ========================================== */ /* Sidebar rows */ /* Info "i" column */ /* ========================================== MAIN CONTENT ========================================== */ /* How JLG Helps heading */ /* ========================================== FOUR HOW-JLG-HELPS CARDS ========================================== */ /* ========================================================= INFORMATION OPERATIONS — SIDEBAR POPUPS ========================================================= */ /* ========================================================= CONTRACT & COMMERCIAL OPERATIONS — FAMILIAR SECTION Match Information Operations sizing ========================================================= */ /* ========================================================= CONTRACT & COMMERCIAL OPERATIONS — MAIN CONTENT SIZING Match Information Operations ========================================================= */ /* ========================================== SIDEBAR ========================================== */ /* Sidebar rows */ /* Info "i" column */ /* ========================================== MAIN CONTENT ========================================== */ /* How JLG Helps heading */ /* ========================================== FOUR HOW-JLG-HELPS CARDS ========================================== */ /* ========================================================= CONTRACT & COMMERCIAL — SIDEBAR POPUPS ========================================================= */ /* ========================================================= CONTRACT PAGE — SERVICES / TYPICAL ENGAGEMENTS ========================================================= */ /* Section headings */ /* Individual list items */ /* Checkmarks */ /* ========================================================= CONTRACT BASICS MODAL — FINAL SIZING ALL FOUR TABS ========================================================= */ /* Overall modal box */ /* ========================================== TOP TAB BAR ========================================== */ /* ========================================== MODAL CONTENT AREA ========================================== */ /* Intro paragraph at top of each tab */ /* ========================================== INDIVIDUAL TOPIC BOXES ========================================== */ /* Agreement / Consideration / Clarity / etc. */ /* Topic descriptions */ /* Lists inside Harnessing Our Strengths */ /* Pull quote in Harnessing Our Strengths */ /* ========================================================= DIGITAL TRANSFORMATION READINESS — FINAL SIZING Match Information Operations + Contract Operations ========================================================= */ /* ========================================================= DOES THIS SOUND FAMILIAR ========================================================= */ .digital-readiness-page .familiar-band h2{ font-size:40px !important; line-height:1.2 !important; } .digital-readiness-page .pain-list li{ font-size:20px !important; line-height:1.55 !important; } /* ========================================================= SIDEBAR ========================================================= */ .digital-readiness-page .sidebar{ width:100% !important; } .digital-readiness-page .sidebar h4{ font-size:26px !important; line-height:1.2 !important; margin-bottom:16px !important; } /* Sidebar rows */ .digital-readiness-page .side-list li{ min-height:62px !important; } .digital-readiness-page .side-list a{ font-size:19px !important; line-height:1.25 !important; padding:18px 18px !important; } /* Info "i" column */ .digital-readiness-page .tip-toggle{ width:52px !important; min-width:52px !important; font-size:22px !important; } /* ========================================================= MAIN CONTENT ========================================================= */ .digital-readiness-page .main-content{ width:100% !important; min-width:0; } /* Main introduction paragraph */ .digital-readiness-page .main-content .lead{ font-size:22px !important; line-height:1.55 !important; max-width:100% !important; } /* ========================================================= BRIDGE / GARBAGE-IN-GARBAGE-OUT CALLOUT ========================================================= */ .digital-readiness-page .bridge{ font-size:22px !important; line-height:1.55 !important; padding:28px 34px !important; margin-top:30px !important; margin-bottom:48px !important; } /* ========================================================= HOW JLG HELPS ========================================================= */ .digital-readiness-page .section-heading{ font-size:35px !important; line-height:1.2 !important; margin-top:54px !important; } /* Four cards */ .digital-readiness-page .steps{ width:100% !important; display:grid !important; grid-template-columns:repeat(4, minmax(0, 1fr)) !important; gap:24px !important; } .digital-readiness-page .step{ min-width:0 !important; min-height:300px !important; padding:30px 28px !important; } /* Assess / Clean / Prepare / Validate */ .digital-readiness-page .step-label{ font-size:22px !important; } /* Card body text */ .digital-readiness-page .step p{ font-size:17px !important; line-height:1.55 !important; margin-top:18px !important; } /* ========================================================= DIGITAL READINESS — SIDEBAR POPUPS ========================================================= */ .digital-readiness-page .side-tip{ width:380px !important; max-width:380px !important; padding:22px 24px !important; font-family:"Assistant", sans-serif !important; font-size:18px !important; line-height:1.55 !important; border-left:4px solid #364E69 !important; border-radius:6px !important; box-shadow:0 12px 32px rgba(15,27,45,0.14) !important; } /* ========================================== DIGITAL READINESS — BRIDGE STATEMENT ========================================== */ .digital-readiness-page .bridge-statement{ font-family:"Assistant", sans-serif !important; font-size:20px !important; font-weight:400 !important; line-height:1.55 !important; padding:24px 32px !important; margin:32px 0 42px !important; border-left:4px solid #364E69 !important; } .digital-readiness-page .bridge-statement strong{ font-weight:800 !important; } /* Filled logos */ /* ================================================== FOOTER SOCIALS — CENTER UNDER COMPANY BLURB ================================================== */ /* ========================================================= JLG HERO BACKGROUND COLOR — SITEWIDE ========================================================= */ .digital-readiness-hero { background-color: #364E69 !important; } /* ========================================================= HERO OVERLAY — LIGHTER JLG BLUE, NO GRID ========================================================= */ .digital-readiness-hero{ background-color:#364E69 !important; } /* ========================================================= JLG FOOTER — FULL-WIDTH SKYLINE ========================================================= */ /* Full-width skyline behind footer content */ /* Keep all footer information ABOVE the skyline */ /* Existing decorative overlay stays behind content too */ /* ========================================================= HEADER — JLG LOGO ========================================================= */ /* ========================================================= FOOTER — JLG LOGO ALIGNMENT ========================================================= */ /* ========================================================= CONTRACT & COMMERCIAL OPERATIONS — HERO BACKGROUND IMAGE ========================================================= */ /* Dark overlay — matches Information Operations treatment */ /* Keep hero content above background overlay */ /* ========================================================= DIGITAL TRANSFORMATION READINESS — HERO BACKGROUND ========================================================= */ .digital-hero{ background-color:#364E69 !important; background-image: url("assets/images/jlg-hero-digital-readiness.png") !important; background-repeat:no-repeat !important; background-position:center center !important; background-size:cover !important; } .digital-hero::before{ content:""; position:absolute; inset:0; background:rgba(15,27,45,0.78); pointer-events:none; } .digital-hero > *{ position:relative; z-index:1; } /* ========================================================= CCG BUSINESS OPERATIONS — HERO CONTENT / POSITION ========================================================= */ /* ========================= BREADCRUMB ========================= */ /* ========================= BUSINESS OPERATIONS LABEL ========================= */ /* ========================= HERO HEADLINE ========================= */ /* ========================= HERO SUPPORTING COPY ========================= */ /* ========================= HERO BUTTON ROW ========================= */ /* Shared button */ /* ========================= GOLD PRIMARY BUTTON ========================= */ /* ========================= SECONDARY OUTLINE BUTTON ========================= */ /* ========================= MOBILE ========================= */ /* ========================================================= CCG HERO BREADCRUMB — GOLD ========================================================= */ /* Current page */ /* HOME LINK */ /* RADIANT GOLD SHIMMER ON HOVER */ /* ========================================================= CCG FLOATING CONSULTATION TAB GOLD / CHAMPAGNE ANIMATED GRADIENT ========================================================= */ /* Arrow */ /* HOVER */ /* Optional soft shine sweep */ /* Keep the actual text above the shine layer */ /* ========================================================= CCG HERO — ROTATING GLOBE LAYER ========================================================= */ /* Actual 3D globe */ /* Make Globe.GL canvas fill our container */ /* Hero copy always stays above globe */ /* Dark veil so the globe never competes with the copy */ /* Responsive sizing */ /* ========================================================= CCG HEADER — STEP 1 TRANSPARENT LOGO + HAMBURGER ========================================================= */ /* Logo */ /* Hamburger */ /* GOLD HOVER */ /* WordPress admin bar */ /* ========================================================= CCG HEADER — CLEANUP ========================================================= */ /* 1. REMOVE BOTTOM LINE */ /* 2. HAMBURGER — NO MOVEMENT, ONLY GOLD HOVER */ /* Kill the staggered movement completely */ /* 3. MAKE LOGO MUCH BIGGER */ /* Give the larger logo enough vertical room */ /* ========================================================= CCG HEADER — FINAL POSITIONING OVERRIDE ========================================================= */ /* ========================================================= LOGO ========================================================= */ /* ========================================================= HAMBURGER ========================================================= */ /* Hamburger lines */ /* ========================================================= HAMBURGER HOVER — COLOR ONLY NO MOVEMENT ========================================================= */ /* ========================================================= CCG HEADER — SIZE REFINEMENT ========================================================= */ /* LOGO: smaller and tucked back into the corner */ /* HEADER POSITIONING */ /* HAMBURGER: smaller + tighter */ /* All three lines exactly the same */ /* Hover = gold glow ONLY */ /* Move only the logo farther left */ /* ========================================= CCG LOGO — GOLD GLOW HOVER ========================================= */ /* ========================================= CCG MENU — GOLD GLOW HOVER ========================================= */ /* ========================================= CCG GLOBE — LIGHT / GLOW TREATMENT ========================================= */ /* ========================================================= BUSINESS OPERATIONS — DIAGNOSTIC SECTION CCG COLOR REFRESH ========================================================= */ /* SECTION BACKGROUND */ /* HEADING */ /* GOLD GRADIENT RULE */ /* INTRO TEXT */ /* ========================================================= DIAGNOSTIC ROWS ========================================================= */ /* ROW TEXT */ /* ========================================================= ROW HOVER Subtle lift — same visual language as our other cards ========================================================= */ /* ========================================================= SERVICE BUTTONS ========================================================= */ /* ========================================================= BUTTON HOVER — GOLD TEXT + GLOW ========================================================= */ /* ========================================= DIAGNOSTIC BUTTONS — MIDNIGHT ROYAL ========================================= */ /* GOLD REFLECTION */ /* SWEEP THE REFLECTION ACROSS ON HOVER */ /* ========================================= DIAGNOSTIC BUTTON — GOLD TEXT + ONE-WAY GLEAM ========================================= */ /* Gold light strip — stays hidden off left */ /* Hover state */ /* Run gleam ONLY forward */ /* ========================================================= BUSINESS OPERATIONS — SERVICE CARDS CCG COLOR + HOVER REFRESH ========================================================= */ /* SECTION HEADING */ /* GOLD GRADIENT RULE */ /* SECTION SUBCOPY */ /* ========================================================= SERVICE CARDS ========================================================= */ /* CARD HOVER */ /* CARD HEADINGS */ /* ITALIC SUBHEAD / TAGLINE */ /* BODY TEXT */ /* CHECKMARKS */ /* ========================================================= SERVICE CARD BUTTONS EXACT SAME MIDNIGHT + GLEAM TREATMENT ========================================================= */ /* GLEAM STRIP */ /* HOVER */ /* ONE-WAY GLEAM */ /* ========================================================= GLOBAL TRUST / VALUE CARDS Privacy-First, AI-Assisted, Human-Approved Reusable across all pages ========================================================= */ /* Section heading */ /* Gold gradient divider under heading */ /* ========================================================= CARD GRID ========================================================= */ /* Subtle card lift */ /* ========================================================= CARD HEADINGS ========================================================= */ /* ========================================================= CARD BODY COPY ========================================================= */ /* ========================================================= GOLD GRADIENT TOP STRIP ========================================================= */ /* ========================================================= GLOBAL STATS / CREDIBILITY BAND Reusable across all pages ========================================================= */ /* ========================================================= GRID ========================================================= */ /* ========================================================= EACH STAT ========================================================= */ /* Soft fading vertical separators */ /* ========================================================= MAIN STAT NUMBER / HEADING ========================================================= */ /* ========================================================= GOLD GRADIENT RULE ========================================================= */ /* ========================================================= DESCRIPTION COPY ========================================================= */ /* ========================================================= RESPONSIVE ========================================================= */ /* ========================================================= FOOTER — GLOBAL TYPOGRAPHY ========================================================= */ /* All normal footer writing = Assistant */ /* Keep existing heading fonts as-is */ /* ========================================================= FOOTER — FINAL BACKGROUND RESET ========================================================= */ /* ========================================================= REMOVE OLD FOOTER SKYLINE ========================================================= */ /* ========================================================= NEW CCG FOOTER SKYLINE ========================================================= */ /* ========================================================= FOOTER — LOWER CONTENT INTO SKYLINE ========================================================= */ /* Move copyright lower too */ /* ========================================= FOOTER HEADINGS — GOLD ========================================= */ /* ========================================= FOOTER SUBSCRIBE BUTTON GOLD + ONE-WAY GLEAM ========================================= */ /* Gleam strip */ /* Hover */ /* One-way gleam */ /* ========================================================= CCG FOOTER — FINAL MASTER OVERRIDE DO NOT ADD OLDER FOOTER RULES BELOW THIS BLOCK ========================================================= */ /* ========================================================= FOOTER SHELL ========================================================= */ /* Kill old pseudo-element skylines permanently */ /* ========================================================= FOUR-COLUMN FOOTER GRID ========================================================= */ /* ========================================================= COLUMN 1 — LARGE LOGO REMOVE LOGO FROM NORMAL GRID HEIGHT ========================================================= */ /* Logo link is positioned independently */ /* Actual logo */ /* ========================================================= COLUMN 2 — COMPANY ========================================================= */ /* ========================================================= SOCIAL ICONS ========================================================= */ /* ========================================================= COLUMN HEADINGS ========================================================= */ /* Gold/faint divider underneath */ /* ========================================================= WHAT WE DO ========================================================= */ /* Current page */ /* ========================================================= THE COMPASS ========================================================= */ /* Email + button row */ /* Email field */ /* ========================================================= SUBSCRIBE — GOLD GLEAM ========================================================= */ /* Gleam */ /* ========================================================= REQUEST CONSULTATION ========================================================= */ /* ========================================================= SKYLINE THIS IS A BACKGROUND LAYER — NOT ITS OWN SECTION ========================================================= */ /* ========================================================= COPYRIGHT ========================================================= */ /* ========================================================= RESPONSIVE ========================================================= */ /* ========================================================= CCG FULLSCREEN NAVIGATION — MASTER ========================================================= */ /* OPEN STATE */ /* ========================================================= INNER PANEL ========================================================= */ /* ========================================================= NAVIGATION LINKS ========================================================= */ /* LITTLE NUMBERS */ /* BIG PAGE NAME */ /* ========================================================= HOVER ========================================================= */ /* GOLD UNDERSCORE / LIGHT TRAIL */ /* ========================================================= ACTIVE PAGE ========================================================= */ /* ========================================================= MENU FOOTER ========================================================= */ /* CONSULTATION LINK */ /* ========================================================= HAMBURGER ABOVE OVERLAY ========================================================= */ /* ========================================================= HAMBURGER → X ========================================================= */ /* ========================================================= PREVENT PAGE SCROLL WHEN MENU IS OPEN ========================================================= */ /* ========================================================= MOBILE ========================================================= */ /* ========================================================= CCG FULLSCREEN NAV — FINAL POLISH ========================================================= */ /* ========================================================= 1. SMOOTH SLIDE-IN / SLIDE-OUT ========================================================= */ /* ========================================================= 2. SPREAD MENU ITEMS OUT MORE ========================================================= */ /* ========================================================= 3. NO AUTOMATIC CURRENT-PAGE HIGHLIGHT Footer keeps that behavior — menu does NOT. ========================================================= */ /* Remove permanent underline from current page */ /* But current page STILL gets the normal hover effect */ /* ========================================================= 4. REQUEST A CONSULTATION — GOLD GLEAM ========================================================= */ /* Moving light strip */ /* Hover glow */ /* One-way gleam */ /* ========================================================= NAV — LOWER BOTTOM DIVIDER ========================================================= */ /* ========================================================= INFORMATION OPERATIONS — HERO ========================================================= */ /* ========================================================= BACKGROUND ARTWORK ========================================================= */ /* ========================================================= LEGIBILITY OVERLAY ========================================================= */ /* ========================================================= CONTENT ========================================================= */ /* ========================================================= BREADCRUMB ========================================================= */ /* ========================================================= INFO OPS BREADCRUMB — MATCH BUSINESS OPERATIONS ========================================================= */ /* EVERYTHING in breadcrumb stays gold */ /* Clickable breadcrumb pieces */ /* One-way gleam across the WORDS */ /* ========================================================= EYEBROW ========================================================= */ /* ========================================================= HEADLINE ========================================================= */ /* ========================================================= BODY ========================================================= */ /* ========================================================= BUTTON ROW ========================================================= */ /* ========================================================= BUTTON BASE ========================================================= */ /* ========================================================= PRIMARY — GOLD ========================================================= */ /* Gleam */ /* ========================================================= SECONDARY — OUTLINE ========================================================= */ /* ========================================================= RESPONSIVE ========================================================= */ /* ========================================================= INFORMATION OPS HERO — SOFTEN BACKGROUND ARTWORK ========================================================= */ /* Darken/fade the artwork around edges + behind text */ /* ========================================================= INFO OPS — ANIMATION LAYER FIX ========================================================= */ /* Static artwork at bottom */ /* Dark/legibility treatment above artwork */ /* THIS is the missing piece */ /* ========================================================= INFO OPS — SHIFT COMPLETE PARTICLE SYSTEM UP ========================================================= */ /* ========================================================= INFO OPS FLOW — RESPONSIVE CANVAS Prevents paths from being clipped on narrow screens ========================================================= */ /* HALF-SCREEN / SMALL DESKTOP */ /* Around your half-screen size */ /* TABLET */ /* MOBILE */ /* Actual hero writing/buttons remain above animation */ /* ========================================================= INFO OPS — FLOW PARTICLES FOLLOWING PAINTED STREAMS ========================================================= */ /* ========================================================= FINAL TIGHTENING — INFORMATION FLOW PATHS ========================================================= */ /* PATH A — UPPER OUTER */ /* PATH B — UPPER INNER */ /* PATH C — CENTER / PINCH */ /* PATH D — LOWER INNER */ /* PATH E — LOWER OUTER */ /* ========================================================= MOTION ========================================================= */ /* ========================================================= DIFFERENT SPEEDS / DELAYS ========================================================= */ /* ========================================================= INFORMATION OPERATIONS DOES THIS SOUND FAMILIAR? ========================================================= */ /* ========================================================= SECTION HEADING ========================================================= */ /* ========================================================= CARD GRID ========================================================= */ /* ========================================================= CARD ========================================================= */ /* GOLD STRIP */ /* ========================================================= CARD HEADER ========================================================= */ /* Small fading line underneath category */ /* ========================================================= PAIN POINTS ========================================================= */ /* ========================================================= HOVER ========================================================= */ /* ========================================================= SMOOTH HERO → SECTION SCROLL ========================================================= */ /* ========================================================= RESPONSIVE ========================================================= */ /* ========================================================= INFORMATION OPERATIONS — HOW WE WORK ========================================================= */ /* ========================================================= HEADING ========================================================= */ /* ========================================================= PROCESS WRAPPER ========================================================= */ /* ========================================================= CONNECTING LINE ========================================================= */ /* little moving gleam */ /* ========================================================= INDIVIDUAL STEP ========================================================= */ /* ========================================================= NUMBER NODE ========================================================= */ /* ========================================================= TEXT ========================================================= */ /* ========================================================= RESPONSIVE ========================================================= */ /* ========================================================= INFORMATION OPERATIONS — GOLD SECTION DIVIDER ========================================================= */ /* Main soft gold line */ /* Very soft glow underneath */ /* Tiny traveling highlight */ /* ========================================================= INFORMATION OPERATIONS — SERVICE EXPLORER ========================================================= */ /* ========================================================= INTRO ========================================================= */ /* ========================================================= TWO-COLUMN EXPLORER ========================================================= */ /* ========================================================= LEFT NAV ========================================================= */ /* ACTIVE + HOVER */ /* ========================================================= RIGHT PANEL ========================================================= */ /* ========================================================= PANEL HEADING ========================================================= */ /* ========================================================= OUTCOMES ========================================================= */ /* ========================================================= RESPONSIVE ========================================================= */ /* ========================================================= INFORMATION OPERATIONS — RELATED SERVICES ========================================================= */ /* ========================================================= HEADING ========================================================= */ /* ========================================================= GRID ========================================================= */ /* ========================================================= CARD ========================================================= */ /* Gold top accent */ /* ========================================================= TEXT ========================================================= */ /* ========================================================= HOVER ========================================================= */ /* subtle gleam across top accent */ /* ========================================================= RESPONSIVE ========================================================= */ /* ========================================================= INFO OPS SERVICE NAV — EVENLY FILL FULL HEIGHT ========================================================= */ /* ========================================================= CONTRACT & COMMERCIAL OPERATIONS — HERO ========================================================= */ /* ========================================================= BACKGROUND IMAGE ========================================================= */ /* ========================================================= NAVY LEGIBILITY / EDGE BLENDING ========================================================= */ /* ========================================================= HERO CONTENT ========================================================= */ /* ========================================================= BREADCRUMB ========================================================= */ /* ========================================================= HEADLINE ========================================================= */ /* ========================================================= LEDE ========================================================= */ /* ========================================================= BUTTON ROW ========================================================= */ /* ========================================================= BUTTON BASE ========================================================= */ /* PRIMARY */ /* ========================================================= CONTRACT HERO — PRIMARY BUTTON GLEAM ========================================================= */ /* SECONDARY */ /* ========================================================= RESPONSIVE ========================================================= */ /* ========================================================= CONTRACT HERO — CCG COLOR WASH + SOFT FADE ========================================================= */ /* ========================================================= CONTRACT HERO — LIFECYCLE MOTION ========================================================= */ /* ========================================================= TRAVELING GOLD PULSE ========================================================= */ /* LEFT: document → handshake → disappear into center */ /* RIGHT: emerge → admin → renewal → analytics */ /* ========================================================= LEFT TRAVEL — EARLIER FADE ========================================================= */ /* ========================================================= RIGHT TRAVEL ========================================================= */ /* ========================================================= ICON HALOS ========================================================= */ /* Match these to the painted icons */ /* ========================================================= SEQUENTIAL NODE BREATHING ========================================================= */ /* ========================================================= CONTRACTS — DOES THIS SOUND FAMILIAR ========================================================= */ /* ========================================================= HEADING ========================================================= */ /* ========================================================= TWO-COLUMN ISSUE GRID ========================================================= */ /* ========================================================= ISSUE ========================================================= */ /* faint contract-register hover */ /* ========================================================= NUMBER ========================================================= */ /* ========================================================= COPY ========================================================= */ /* subtle gold accent appears on hover */ /* ========================================================= RESPONSIVE ========================================================= */ /* ========================================================= CONTRACT LIFECYCLE ========================================================= */ /* ========================================================= HEADING ========================================================= */ /* ========================================================= LIFECYCLE RAIL ========================================================= */ /* main line */ /* ========================================================= STAGES ========================================================= */ /* ========================================================= RETURN / RENEWAL LOOP ========================================================= */ /* ========================================================= RESPONSIVE ========================================================= */ /* ========================================================= LIFECYCLE STAGE — ACTIVE SEQUENCE ========================================================= */ /* 01 */ /* 02 */ /* 03 */ /* 04 */ /* ========================================================= RENEW • AMEND • RENEGOTIATE — AUTOMATIC GOLD GLEAM ========================================================= */ /* ========================================================= CONTRACT & COMMERCIAL OPERATIONS — SERVICE NAVIGATOR ========================================================= */ /* ========================================================= HEADING ========================================================= */ /* ========================================================= SIX SERVICE TABS ========================================================= */ /* subtle navy variation */ /* NUMBER */ /* TITLE */ /* ARROW */ /* ========================================================= ACTIVE SERVICE TAB ========================================================= */ /* ========================================================= SERVICE DETAIL PANEL ========================================================= */ /* giant decorative number */ /* ========================================================= SERVICE PANEL — DECORATIVE SYMBOL WATERMARK ========================================================= */ /* 01 — CONTRACT LIFECYCLE MANAGEMENT */ /* 02 — CONTRACT DRAFTING SUPPORT */ /* 03 — CONTRACT REVIEW & ANALYSIS */ /* 04 — CONTRACT ADMINISTRATION */ /* 05 — COMMERCIAL OPERATIONS SUPPORT */ /* 06 — CONTRACT ANALYTICS */ /* small number */ /* panel title */ /* description */ /* ========================================================= THREE DETAIL ITEMS ========================================================= */ /* ========================================================= CONTRACT BASICS — ELEVATED CARD LAUNCHER ========================================================= */ /* ========================================================= HEADING ========================================================= */ /* ========================================================= FOUR BASICS CARDS ========================================================= */ /* subtle shine layer */ /* arrow */ /* number */ /* ========================================================= HOVER ========================================================= */ /* ========================================================= RESPONSIVE ========================================================= */ /* ========================================================= CONTRACT BASICS — CARD TEXT ========================================================= */ /* ========================================================= CCG CONTRACT BASICS MODAL — FINAL REDESIGN ========================================================= */ /* ========================================================= OVERLAY ========================================================= */ /* ========================================================= MODAL SHELL ========================================================= */ /* ========================================================= TOP NAVIGATION ========================================================= */ /* Individual tab */ /* Hover */ /* Active tab */ /* Gold active indicator */ /* ========================================================= CLOSE BUTTON ========================================================= */ /* ========================================================= BODY ========================================================= */ /* ========================================================= PANEL CHANGE ========================================================= */ /* ========================================================= INTRODUCTION ========================================================= */ /* ========================================================= TOPIC CARDS ========================================================= */ /* Gold vertical accent */ /* Hover */ /* ========================================================= TOPIC TITLES ========================================================= */ /* ========================================================= TOPIC COPY ========================================================= */ /* ========================================================= DRAFTING / DETAIL LISTS ========================================================= */ /* ========================================================= PULL QUOTE ========================================================= */ /* ========================================================= CLOSING TEXT ========================================================= */ /* ========================================================= SCROLLBAR — SUBTLE CCG TREATMENT ========================================================= */ /* ========================================================= MOBILE ========================================================= */ /* ========================================================= CONTRACTS — CONVERGING GRADIENT DIVIDER ========================================================= */ /* ========================================================= BASE NAVY LINES ========================================================= */ /* ========================================================= GLEAM LAYER ========================================================= */ /* ========================================================= LEFT SIDE outside → center ========================================================= */ /* ========================================================= RIGHT SIDE outside → center ========================================================= */ /* ========================================================= CENTER GOLD DIAMOND ========================================================= */ /* diamond reacts ONCE when gleams arrive */ /* ========================================================= CONTRACT DIVIDER — SCROLL-ACTIVATED GLEAM ========================================================= */ /* animated gradient layer */ /* LEFT LINE: gleam travels from far left → diamond */ /* RIGHT LINE: gleam travels from far right → diamond */ /* ========================================================= CONTRACTS — ENGAGEMENT SCOPE ========================================================= */ /* ========================================================= HEADING ========================================================= */ /* ========================================================= SPLIT PANEL ========================================================= */ /* center divider */ /* ========================================================= COLUMNS ========================================================= */ /* ========================================================= LIST ========================================================= */ /* Gold/navy check */ /* subtle interaction */ /* ========================================================= RESPONSIVE ========================================================= */ /* ========================================================= CONTRACT SCOPE — MIDNIGHT PANEL ========================================================= */ /* ========================================================= COLUMN HEADINGS ========================================================= */ /* ========================================================= LIST TEXT ========================================================= */ /* Hover becomes brighter rather than navy */ /* ========================================================= CHECKMARKS ========================================================= */ /* ========================================================= CENTER DIVIDER ========================================================= */ /* ========================================================= CONTRACTS — RELATED SERVICES TRANSITION ========================================================= */ /* ========================================================= CONTRACTS — RELATED SERVICES BACKGROUND ========================================================= */ /* ========================================================= CONTRACT LIFECYCLE — SOFT GRADIENT BACKGROUND ========================================================= */ /* ========================================================= CONTRACT BASICS — FULL WIDTH GRADIENT BAND ========================================================= */ /* ========================================================= CONTRACT DIVIDER — CENTER BETWEEN SECTIONS ========================================================= */ /* ========================================================= CONTRACT DIVIDER — TIGHT TRANSITION ========================================================= */ /* ========================================================= BUSINESS OPS — MATCH PRIMARY BUTTON ANIMATION ========================================================= */ /* gleam layer */ /* hover */ /* one clean pass */ /* ========================================================= DIGITAL TRANSFORMATION READINESS — HERO UPGRADE ========================================================= */ .digital-hero .info-ops-hero-inner{ max-width:1100px; margin:0 auto; padding-left:32px; padding-right:32px; text-align:center; } /* EYEBROW */ .digital-hero .info-ops-eyebrow{ margin-bottom:22px; } /* MAIN HEADLINE */ .digital-hero h1{ max-width:1000px; margin: 0 auto; font-family:"Lora", serif; font-size:clamp(48px, 5vw, 76px); font-weight:600; line-height:1.05; letter-spacing:-.02em; color:#FFFFFF; } /* SUPPORTING COPY */ .digital-hero-lede{ max-width:720px; margin: 28px auto 0; font-family:"Assistant", sans-serif; font-size:18px; font-weight:400; line-height:1.65; color:rgba(255,255,255,.84); } /* BUTTON ROW */ .digital-hero-actions{ display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:16px; margin-top:32px; } /* ========================================================= GOLD HERO BUTTON Same visual family as sibling Business Operations pages ========================================================= */ .digital-hero .hero-btn-gold{ position:relative; overflow:hidden; background: linear-gradient( 110deg, #D4A017 0%, #E0C77F 35%, #F0DEAE 50%, #D4A017 68%, #BC8810 100% ); background-size:220% 100%; background-position:100% 50%; color:#131B35; border:1px solid rgba(212,160,23,.8); transition: transform .3s ease, box-shadow .3s ease, background-position .65s ease; } .digital-hero .hero-btn-gold:hover{ transform:translateY(-3px); background-position:0% 50%; box-shadow: 0 12px 28px rgba(0,0,0,.22), 0 0 20px rgba(212,160,23,.22); } /* ========================================================= OUTLINE BUTTON ========================================================= */ .digital-hero .hero-btn-outline{ background:rgba(255,255,255,.03); color:#FFFFFF; border: 1px solid rgba(255,255,255,.55); backdrop-filter:blur(2px); transition: color .3s ease, border-color .3s ease, background .3s ease, transform .3s ease; } .digital-hero .hero-btn-outline:hover{ transform:translateY(-3px); color:#F0DEAE; border-color:#D4A017; background: rgba(212,160,23,.08); } /* ========================================================= SMOOTH ANCHOR MOVEMENT ========================================================= */ /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width:700px){ .digital-hero h1{ font-size:clamp(40px, 11vw, 56px); } .digital-hero-lede{ font-size:16px; } .digital-hero-actions{ flex-direction:column; } .digital-hero-actions .hero-btn{ width:min(100%, 320px); text-align:center; } } /* ========================================================= DIGITAL HERO — MATCH GOLD BUTTON ANIMATION ========================================================= */ .digital-hero .hero-btn-gold{ position:relative; overflow:hidden; background: linear-gradient( 135deg, #F0DEAE 0%, #D4A017 48%, #8A650F 100% ); background-size:200% 200%; background-position:0% 50%; color:#131B35; border:1px solid rgba(212,160,23,.75); box-shadow: 0 8px 22px rgba(212,160,23,.18); transition: transform .3s ease, box-shadow .3s ease, background-position .55s ease, color .3s ease; } /* moving shine */ .digital-hero .hero-btn-gold::before{ content:""; position:absolute; top:-40%; left:-70%; width:42%; height:180%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.55), transparent ); transform:skewX(-20deg); transition:left .65s ease; pointer-events:none; } /* hover */ .digital-hero .hero-btn-gold:hover{ transform:translateY(-3px); background-position:100% 50%; color:#131B35; box-shadow: 0 12px 30px rgba(212,160,23,.30), 0 0 20px rgba(240,222,174,.20); } /* shine sweeps across ON hover */ .digital-hero .hero-btn-gold:hover::before{ left:130%; } /* ========================================================= DIGITAL HERO — CCG BRAND COLOR WASH MATCH INFO OPS + CONTRACTS ========================================================= */ /* Full branded overlay over the EXISTING hero artwork */ /* Keep all hero copy/buttons above the color wash */ /* ========================================================= DIGITAL HERO — CCG BRAND COLOR WASH MATCH INFO OPS + CONTRACTS ========================================================= */ /* Full branded overlay over the EXISTING hero artwork */ /* Keep all hero copy/buttons above the color wash */ /* ========================================================= DIGITAL HERO — SOFT EDGE VIGNETTE ========================================================= */ /* ========================================================= DIGITAL HERO — NEW BACKGROUND ARTWORK ========================================================= */ .digital-hero{ position:relative; overflow:hidden; background:#1D2952; } /* IMAGE LAYER */ .digital-hero-bg{ position:absolute; inset:0; z-index:0; } .digital-hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:center center; display:block; } /* ========================================================= CCG COLOR / LEGIBILITY OVERLAY ========================================================= */ .digital-hero-overlay{ position:absolute; inset:0; z-index:1; pointer-events:none; background: /* overall CCG blue wash */ linear-gradient( 90deg, rgba(29,41,82,.40) 0%, rgba(59,75,120,.30) 48%, rgba(41,56,97,.38) 100% ), /* dark center behind hero copy */ radial-gradient( ellipse at 50% 46%, rgba(19,27,53,.54) 0%, rgba(29,41,82,.28) 43%, transparent 72% ), /* soft edge vignette */ linear-gradient( 90deg, rgba(19,27,53,.30) 0%, transparent 18%, transparent 82%, rgba(19,27,53,.26) 100% ); } /* HERO CONTENT ABOVE IMAGE */ .digital-hero .info-ops-hero-inner{ position:relative; z-index:2; } /* ========================================== DIGITAL TRANSFORMATION HERO — IMAGE TUNING ========================================== */ .digital-hero { position: relative; overflow: hidden; } .digital-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to right, rgba(29, 41, 82, .72) 0%, rgba(29, 41, 82, .20) 16%, rgba(29, 41, 82, 0) 34%, rgba(29, 41, 82, 0) 66%, rgba(29, 41, 82, .20) 84%, rgba(29, 41, 82, .72) 100% ), linear-gradient( to bottom, rgba(29, 41, 82, .35) 0%, rgba(29, 41, 82, 0) 25%, rgba(29, 41, 82, 0) 72%, rgba(29, 41, 82, .55) 100% ); pointer-events: none; z-index: 1; } .digital-hero .hero-content, .digital-hero .hero-inner { position: relative; z-index: 2; } /* ========================================================= DIGITAL HERO — ACTUAL IMAGE ZOOM OUT ========================================================= */ .digital-hero-bg{ position:absolute; inset:0; overflow:hidden; background:#1D2952; } .digital-hero{ background-image:none !important; background:#1D2952 !important; } /* ========================================================= DIGITAL HERO — SHOW MORE OF BACKGROUND ARTWORK ========================================================= */ .digital-hero-bg img{ width:100% !important; height:100% !important; object-fit:cover !important; object-position:center 44% !important; transform:scale(.99); display:block !important; } /* ========================================================= DIGITAL HERO — SVG ROAD STREAMS ========================================================= */ .digital-road-svg{ position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; } /* SVG fills hero exactly */ .digital-road-svg svg{ width:100%; height:100%; display:block; } /* ========================================================= BASE PATH Invisible except for animated dash ========================================================= */ .digital-road-path{ fill:none; stroke:#D4A017; stroke-width:3; stroke-linecap:round; opacity:0; vector-effect:non-scaling-stroke; filter: drop-shadow(0 0 2px rgba(240,222,174,.25)) drop-shadow(0 0 5px rgba(212,160,23,.12)); stroke-dasharray: 48 900; animation: digitalRoadStream 7.5s linear infinite; } /* ========================================================= THREE STREAM VARIATIONS ========================================================= */ .digital-road-path-1{ stroke:#D4A017; stroke-width:3; opacity:.52; animation-delay:0s; } .digital-road-path-2{ stroke:#E0C77F; stroke-width:2.3; opacity:.38; animation-delay:-2.5s; } .digital-road-path-3{ stroke:#F0DEAE; stroke-width:2; opacity:.28; animation-delay:-5s; } /* ========================================================= STREAM MOTION ========================================================= */ @keyframes digitalRoadFlow{ 0%{ stroke-dashoffset:0; } 100%{ stroke-dashoffset:-458; } } .digital-road-path-4{ stroke:#E0C77F; stroke-width:2; opacity:.30; animation-delay:-1.3s; } .digital-road-path-5{ stroke:#D4A017; stroke-width:2.4; opacity:.34; animation-delay:-4.1s; } .digital-road-path-6{ stroke:#F0DEAE; stroke-width:1.8; opacity:.24; animation-delay:-6.2s; } .digital-road-path-7{ stroke:#E0C77F; stroke-width:1.8; opacity:.26; animation-delay:-.8s; } .digital-road-path-8{ stroke:#D4A017; stroke-width:2.2; opacity:.34; animation-delay:-2.1s; } .digital-road-path-9{ stroke:#F0DEAE; stroke-width:1.6; opacity:.22; animation-delay:-4.8s; } .digital-road-path-10{ stroke:#D4A017; stroke-width:1.8; opacity:.28; animation-delay:-7.1s; } .digital-road-path{ stroke-dasharray: 28 430; } .digital-road-path{ transform: translate(29%, 9%); } .digital-road-path{ animation-duration:9.5s; } .digital-road-path{ fill:none; stroke-linecap:round; stroke-dasharray:28 430; filter: drop-shadow(0 0 3px rgba(212,160,23,.40)) drop-shadow(0 0 7px rgba(224,199,127,.18)); animation:digitalRoadFlow 8s linear infinite; } .digital-road-path{ stroke:url(#roadStreamGold) !important; } /* ========================================================= DIGITAL HERO — HALF-SCREEN / NARROW DESKTOP FIX DOES NOT AFFECT FULL SCREEN ========================================================= */ @media (max-width:1200px){ /* Keep hero composition centered */ .digital-hero .info-ops-hero-inner{ width:min(760px, 88%) !important; margin:0 auto !important; } /* Slightly reduce headline size only on narrower screens */ .digital-hero h1{ font-size:clamp(42px, 5.2vw, 58px) !important; line-height:1.08 !important; } /* Keep supporting copy from stretching too wide */ .digital-hero-lede{ max-width:700px !important; margin-left:auto !important; margin-right:auto !important; } /* Reposition ONLY the road animation layer */ .digital-road-svg{ transform: translate(18%, 8%) !important; transform-origin:center center !important; } } @media (max-width:1200px){ .digital-road-svg{ transform:translate(-32%, 8%) !important; transform-origin:center center !important; } } /* ========================================================= DIGITAL TRANSFORMATION READINESS — READINESS CHECK ========================================================= */ .digital-readiness-check{ position:relative; background:#F4F1E8; padding: 88px 32px 96px; overflow:hidden; } .digital-readiness-check-inner{ width:min(1240px, 100%); margin:0 auto; } /* ========================================================= HEADING ========================================================= */ .digital-readiness-check-heading{ max-width:850px; margin: 0 auto 54px; text-align:center; } .digital-readiness-check-eyebrow{ display:block; margin-bottom:12px; font-family:"Assistant", sans-serif; font-size:12px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:#D4A017; } .digital-readiness-check-heading h2{ margin:0; font-family:"Lora", serif; font-size: clamp( 36px, 4vw, 50px ); font-weight:600; line-height:1.12; color:#1D2952; } .digital-readiness-check-rule{ width:100px; height:2px; margin: 22px auto 24px; background: linear-gradient( 90deg, transparent 0%, #E0C77F 20%, #D4A017 50%, #E0C77F 80%, transparent 100% ); } .digital-readiness-check-intro{ max-width:760px; margin:0 auto; font-family:"Assistant", sans-serif; font-size:18px; line-height:1.6; color:#343F68; } .digital-readiness-check-intro strong{ color:#8A650F; font-weight:800; } /* ========================================================= DIAGNOSTIC GRID ========================================================= */ .digital-readiness-check-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 22px; } /* ========================================================= DIAGNOSTIC ITEM ========================================================= */ .digital-readiness-check-item{ position:relative; display:grid; grid-template-columns: 54px minmax(0, 1fr); gap:20px; align-items:center; min-height:108px; padding: 22px 26px; background: rgba(255,255,255,.58); border: 1px solid rgba(29,41,82,.10); border-left: 3px solid rgba(212,160,23,.65); box-shadow: 0 5px 18px rgba(29,41,82,.035); transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease; } /* ========================================================= NUMBER / CHECKPOINT ========================================================= */ .digital-readiness-check-number{ position:relative; width:46px; height:46px; display:flex; align-items:center; justify-content:center; border: 1px solid rgba(212,160,23,.55); border-radius:50%; color:#D4A017; font-family:"Lora", serif; font-size:15px; font-weight:700; background: rgba(244,241,232,.72); box-shadow: 0 0 0 rgba(212,160,23,0); transition: background .28s ease, color .28s ease, box-shadow .28s ease, transform .28s ease; } /* ========================================================= COPY ========================================================= */ .digital-readiness-check-item p{ margin:0; font-family:"Assistant", sans-serif; font-size:17px; line-height:1.52; color:#34343A; } /* ========================================================= HOVER ========================================================= */ .digital-readiness-check-item:hover{ transform: translateY(-3px); background: rgba(255,255,255,.82); border-left-color:#D4A017; box-shadow: 0 12px 28px rgba(29,41,82,.09); } .digital-readiness-check-item:hover .digital-readiness-check-number{ background:#1D2952; color:#F0DEAE; transform:scale(1.04); box-shadow: 0 0 8px rgba(212,160,23,.22); } /* ========================================================= CLOSING STATEMENT ========================================================= */ .digital-readiness-check-closing{ max-width:900px; margin: 82px auto 0; padding-top:28px; border-top: 1px solid rgba(29,41,82,.12); text-align:center; } .digital-readiness-check-closing strong{ display:block; margin-bottom:8px; font-family:"Lora", serif; font-size:22px; font-weight:600; color:#1D2952; } .digital-readiness-check-closing span{ display:block; max-width:720px; margin:0 auto; font-family:"Assistant", sans-serif; font-size:16px; line-height:1.6; color:#585C68; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width:800px){ .digital-readiness-check{ padding: 72px 24px 80px; } .digital-readiness-check-grid{ grid-template-columns:1fr; } } @media (max-width:520px){ .digital-readiness-check{ padding: 62px 20px 68px; } .digital-readiness-check-item{ grid-template-columns: 44px 1fr; gap:15px; padding: 20px 18px; } .digital-readiness-check-number{ width:40px; height:40px; font-size:13px; } .digital-readiness-check-item p{ font-size:16px; } } /* ========================================================= DIGITAL READINESS — LUXURY GOLD GLEAM ========================================================= */ .digital-readiness-check-intro strong{ display:inline; font-weight:800; background: linear-gradient( 110deg, #8A650F 0%, #8A650F 38%, #D4A017 44%, #F0DEAE 48%, #FFF4C7 50%, #F0DEAE 52%, #D4A017 56%, #8A650F 62%, #8A650F 100% ); background-size:300% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; animation: digitalGarbageLuxuryGleam 7s ease-in-out infinite; } @keyframes digitalGarbageLuxuryGleam{ /* Rest before the gleam begins */ 0%, 10%{ background-position:150% 50%; } /* SLOW sweep across the entire phrase */ 75%{ background-position:-150% 50%; } /* Rest after the gleam finishes */ 76%, 100%{ background-position:-150% 50%; } } /* ========================================================= DIGITAL CAPABILITIES — SECTION ========================================================= */ .digital-capabilities{ position:relative; padding: 92px 32px 100px; background: linear-gradient( 135deg, #FFFFFF 0%, #F7F8FC 46%, rgba(52,63,104,.08) 100% ); overflow:hidden; } .digital-capabilities-inner{ width:min(1240px, 100%); margin:0 auto; } /* ========================================================= HEADING ========================================================= */ .digital-capabilities-heading{ max-width:900px; margin: 0 auto 48px; text-align:center; } .digital-capabilities-eyebrow{ display:block; margin-bottom:12px; font-family:"Assistant", sans-serif; font-size:12px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:#D4A017; } .digital-capabilities-heading h2{ margin:0; font-family:"Lora", serif; font-size:clamp(38px,4vw,52px); font-weight:600; line-height:1.12; color:#1D2952; } .digital-capabilities-rule{ width:94px; height:2px; margin: 22px auto 24px; background: linear-gradient( 90deg, transparent, #E0C77F, #D4A017, #E0C77F, transparent ); } .digital-capabilities-heading p{ margin:0 auto; max-width:880px; font-family:"Assistant", sans-serif; font-size:17px; line-height:1.7; color:#525764; } /* ========================================================= SELECTOR NAV ========================================================= */ .digital-capability-nav{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; margin-bottom:20px; } .digital-capability-tab{ position:relative; display:flex; align-items:center; min-height:74px; padding: 18px 22px; border: 1px solid rgba(29,41,82,.16); background: linear-gradient( 135deg, #1D2952 0%, #293861 100% ); color:#FFFFFF; text-align:left; font-family:"Assistant", sans-serif; font-size:15px; font-weight:700; cursor:pointer; transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease; } .digital-capability-tab span{ flex:0 0 auto; margin-right:18px; font-family:"Lora", serif; font-size:17px; color:#D4A017; } .digital-capability-tab::after{ content:"›"; position:absolute; right:18px; font-size:22px; color:rgba(240,222,174,.55); transition: transform .25s ease, color .25s ease; } .digital-capability-tab:hover{ transform:translateY(-2px); box-shadow: 0 8px 20px rgba(29,41,82,.12); } .digital-capability-tab:hover::after{ transform:translateX(3px); color:#F0DEAE; } .digital-capability-tab.active{ background: linear-gradient( 135deg, #343F68 0%, #1D2952 62%, #293861 100% ); border-color:#D4A017; box-shadow: inset 3px 0 0 #D4A017, 0 8px 22px rgba(29,41,82,.10); } .digital-capability-tab.active::after{ color:#D4A017; } /* ========================================================= READINESS PANEL ========================================================= */ .digital-readiness-panel{ display:none; position:relative; padding: 38px 40px 42px; border: 1px solid rgba(29,41,82,.12); background: linear-gradient( 110deg, rgba(244,241,232,.94) 0%, rgba(244,241,232,.76) 33%, rgba(255,255,255,.95) 52%, rgba(52,63,104,.08) 100% ); box-shadow: 0 14px 32px rgba(29,41,82,.07); } .digital-readiness-panel.active{ display:block; animation: digitalPanelIn .36s ease; } @keyframes digitalPanelIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } } /* ========================================================= PANEL HEADING ========================================================= */ .digital-readiness-panel-heading{ display:flex; align-items:center; gap:18px; margin-bottom:18px; } .digital-readiness-panel-number{ display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:50%; background:#1D2952; border: 1px solid #D4A017; font-family:"Lora", serif; font-size:16px; font-weight:700; color:#F0DEAE; } .digital-readiness-panel-kicker{ display:block; margin-bottom:4px; font-family:"Assistant", sans-serif; font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:#BC8810; } .digital-readiness-panel h3{ margin:0; font-family:"Lora", serif; font-size:clamp(28px,3vw,36px); font-weight:600; color:#1D2952; } .digital-readiness-panel-description{ max-width:920px; margin: 0 0 34px 70px; font-family:"Assistant", sans-serif; font-size:16px; line-height:1.65; color:#555A65; } /* ========================================================= CURRENT → PREPARATION → READY ========================================================= */ .digital-readiness-flow{ display:grid; grid-template-columns: minmax(0,1fr) 34px minmax(0,1fr) 34px minmax(0,1fr); align-items:stretch; gap:10px; } .digital-readiness-state{ position:relative; min-height:170px; padding: 24px 24px 22px; border: 1px solid rgba(29,41,82,.10); background: rgba(255,255,255,.72); } .digital-readiness-state-middle{ background: linear-gradient( 145deg, rgba(224,199,127,.15), rgba(255,255,255,.86) ); border-color: rgba(212,160,23,.28); } .digital-readiness-state-ready{ background: linear-gradient( 145deg, rgba(52,63,104,.10), rgba(255,255,255,.90) ); } .digital-state-label{ display:block; margin-bottom:12px; font-family:"Assistant", sans-serif; font-size:11px; font-weight:800; letter-spacing:.17em; text-transform:uppercase; color:#BC8810; } .digital-readiness-state strong{ display:block; margin-bottom:10px; font-family:"Lora", serif; font-size:20px; color:#1D2952; } .digital-readiness-state p{ margin:0; font-family:"Assistant", sans-serif; font-size:14px; line-height:1.55; color:#5C6069; } .digital-readiness-arrow{ display:flex; align-items:center; justify-content:center; font-family:"Lora", serif; font-size:26px; color:#D4A017; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width:900px){ .digital-capability-nav{ grid-template-columns: repeat(2,minmax(0,1fr)); } .digital-readiness-flow{ grid-template-columns:1fr; gap:12px; } .digital-readiness-arrow{ transform:rotate(90deg); min-height:24px; } .digital-readiness-panel-description{ margin-left:0; } } @media (max-width:560px){ .digital-capabilities{ padding: 72px 20px 80px; } .digital-capability-nav{ grid-template-columns:1fr; } .digital-readiness-panel{ padding: 28px 22px 30px; } } /* ========================================================= DIGITAL TRANSFORMATION — READINESS METHOD ========================================================= */ .digital-method{ position:relative; padding: 94px 32px 102px; background: linear-gradient( 135deg, #F7F8FC 0%, #FFFFFF 38%, rgba(244,241,232,.70) 72%, rgba(231,211,168,.24) 100% ); overflow:hidden; } /* very soft blue atmosphere */ .digital-method::before{ content:""; position:absolute; width:520px; height:520px; left:-210px; top:-230px; border-radius:50%; background: radial-gradient( circle, rgba(52,63,104,.10) 0%, rgba(52,63,104,.035) 44%, transparent 72% ); pointer-events:none; } .digital-method-inner{ position:relative; z-index:1; width:min(1240px, 100%); margin:0 auto; } /* ========================================================= HEADING ========================================================= */ .digital-method-heading{ max-width:880px; margin: 0 auto 72px; text-align:center; } .digital-method-eyebrow{ display:block; margin-bottom:12px; font-family:"Assistant", sans-serif; font-size:12px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:#B6810D; } .digital-method-heading h2{ margin:0; font-family:"Lora", serif; font-size: clamp( 38px, 4.2vw, 54px ); font-weight:600; line-height:1.1; color:#1D2952; } .digital-method-heading-rule{ width:96px; height:2px; margin: 22px auto 24px; background: linear-gradient( 90deg, transparent 0%, #E0C77F 18%, #D4A017 50%, #E0C77F 82%, transparent 100% ); } .digital-method-heading p{ max-width:780px; margin:0 auto; font-family:"Assistant", sans-serif; font-size:17px; line-height:1.7; color:#555B6C; } /* ========================================================= PATHWAY ========================================================= */ .digital-method-path{ position:relative; display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:38px; } /* ========================================================= MUTED BASE TRACK ========================================================= */ .digital-method-track{ position:absolute; left:11%; right:11%; top:34px; height:2px; background: linear-gradient( 90deg, rgba(29,41,82,.14), rgba(52,63,104,.34), rgba(29,41,82,.14) ); z-index:0; overflow:visible; } /* ========================================================= GOLD PROGRESS TRACK ========================================================= */ .digital-method-track-progress{ position:absolute; inset: 0 auto 0 0; width:0%; background: linear-gradient( 90deg, #554009 0%, #B6810D 26%, #D4A017 52%, #E0C77F 76%, #F0DEAE 100% ); box-shadow: 0 0 7px rgba(212,160,23,.22); transition:none; } /* glowing leading edge */ .digital-method-track-progress::after{ content:""; position:absolute; right:-5px; top:50%; width:10px; height:10px; border-radius:50%; transform: translateY(-50%); background:#F0DEAE; box-shadow: 0 0 5px rgba(240,222,174,.95), 0 0 12px rgba(212,160,23,.55); opacity:0; } /* ========================================================= STAGES ========================================================= */ .digital-method-stage{ position:relative; z-index:2; text-align:center; } /* ========================================================= MARKERS ========================================================= */ .digital-method-marker{ width:68px; height:68px; margin: 0 auto 22px; display:flex; align-items:center; justify-content:center; border-radius:50%; background: linear-gradient( 145deg, #F4F1E8 0%, #FFFFFF 100% ); border: 2px solid rgba(52,63,104,.45); box-shadow: 0 7px 20px rgba(29,41,82,.08); transition: border-color .35s ease, background .35s ease, box-shadow .35s ease, transform .35s ease; } .digital-method-marker span{ font-family:"Lora", serif; font-size:17px; font-weight:700; color:#343F68; transition: color .35s ease; } /* ========================================================= STAGE LABEL ========================================================= */ .digital-method-label{ display:block; margin-bottom:11px; font-family:"Lora", serif; font-size:25px; font-weight:600; color:#1D2952; transition: color .35s ease, transform .35s ease; } .digital-method-stage p{ max-width:250px; margin:0 auto; font-family:"Assistant", sans-serif; font-size:15px; line-height:1.62; color:#5C616D; } /* ========================================================= ACTIVE STAGE ========================================================= */ .digital-method-stage.is-active .digital-method-marker{ transform: translateY(-3px); border-color:#D4A017; background: linear-gradient( 145deg, #1D2952 0%, #343F68 100% ); box-shadow: 0 7px 18px rgba(29,41,82,.16), 0 0 0 5px rgba(224,199,127,.10), 0 0 18px rgba(212,160,23,.18); } .digital-method-stage.is-active .digital-method-marker span{ color:#F0DEAE; } .digital-method-stage.is-active .digital-method-label{ color:#B6810D; transform: translateY(-2px); } /* ========================================================= ANIMATION ========================================================= */ .digital-method.is-animating .digital-method-track-progress{ animation: digitalMethodProgress 6.7s linear forwards; } .digital-method.is-animating .digital-method-track-progress::after{ animation: digitalMethodTraveler 4.6s ease forwards; } @keyframes digitalMethodProgress { /* Start at Assess */ 0% { width: 0%; } /* Travel to Clean */ 20% { width: 33.33%; } /* Pause at Clean */ 30% { width: 33.33%; } /* Travel to Prepare */ 48% { width: 66.66%; } /* Pause at Prepare */ 58% { width: 66.66%; } /* Travel to Validate */ 78% { width: 100%; } /* Stay at Validate */ 100% { width: 100%; } } @keyframes digitalMethodTraveler{ 0%{ opacity:0; } 5%{ opacity:1; } 92%{ opacity:1; } 100%{ opacity:0; } } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width:900px){ .digital-method{ padding: 80px 26px 88px; } .digital-method-path{ grid-template-columns: repeat(2,minmax(0,1fr)); gap: 54px 30px; } .digital-method-track{ display:none; } } @media (max-width:560px){ .digital-method{ padding: 68px 20px 74px; } .digital-method-path{ grid-template-columns:1fr; gap:42px; } } /* ========================================================= BUSINESS OPERATIONS FAMILY — HERO BREADCRUMB ========================================================= */ /* subtle polished hover */ /* animated gold line enters underneath */ /* ========================================================= DIGITAL HERO — BREADCRUMB CLEAN OVERRIDE ========================================================= */ .digital-hero .ccg-hero-breadcrumb{ position:relative; display:flex; align-items:center; justify-content:center; gap:9px; width:max-content; max-width:90%; margin: 0 auto 24px; font-family:"Assistant", sans-serif !important; font-size:13px; font-weight:400 !important; line-height:1.3; letter-spacing:0; opacity:1; transform:none; animation:none; white-space:nowrap; } /* REMOVE THE LINE UNDERNEATH COMPLETELY */ .digital-hero .ccg-hero-breadcrumb::after{ display:none !important; content:none !important; } /* DIVIDERS */ .digital-hero .ccg-breadcrumb-divider{ color:rgba(240,222,174,.62); font-weight:400; } /* ========================================================= GOLD TEXT + MOVING GLEAM ========================================================= */ .digital-hero .ccg-hero-breadcrumb a, .digital-hero .ccg-breadcrumb-current{ font-family:"Assistant", sans-serif !important; font-weight:400 !important; text-decoration:none !important; background: linear-gradient( 110deg, #B6810D 0%, #D4A017 38%, #F0DEAE 46%, #FFF4C7 50%, #F0DEAE 54%, #D4A017 62%, #B6810D 100% ); background-size:300% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:#D4A017; animation: digitalBreadcrumbGleam 6.5s ease-in-out infinite; } /* ========================================================= CLEAN SWEEP ACROSS THE WORDS ========================================================= */ @keyframes digitalBreadcrumbGleam{ /* sit in normal gold */ 0%, 12%{ background-position:150% 50%; } /* gleam slowly crosses ALL the way through */ 68%{ background-position:-150% 50%; } /* rest before restarting */ 69%, 100%{ background-position:-150% 50%; } } /* KEEP HOVER QUIET */ .digital-hero .ccg-hero-breadcrumb a:hover{ text-shadow:none; } /* ========================================================= DIGITAL READINESS — RELATED SERVICES ========================================================= */ .digital-related-services{ background: linear-gradient( 135deg, rgba(255,255,255,1) 0%, rgba(247,248,252,.96) 48%, rgba(244,241,232,.82) 100% ); } /* ========================================================= CONTACT US PAGE — HERO ========================================================= */ /* subtle edge fade / depth */ /* ========================================================= INNER CONTENT ========================================================= */ /* ========================================================= BREADCRUMB ========================================================= */ /* reuse sitewide hover gleam */ /* ========================================================= EYEBROW ========================================================= */ /* ========================================================= MAIN HEADING ========================================================= */ /* ========================================================= INTRO COPY ========================================================= */ /* ========================================================= SMALL GOLD ACCENT UNDER HERO COPY ========================================================= */ /* ========================================================= TABLET ========================================================= */ /* ========================================================= MOBILE ========================================================= */ /* ========================================================= CONTACT HERO — LIVE CONVERGING PATH ANIMATION ========================================================= */ /* ========================================================= CURVED PATHS ========================================================= */ /* LEFT SIDE */ /* RIGHT SIDE */ /* ========================================================= CURVE MOVEMENT ========================================================= */ /* ========================================================= SMALL GOLD NODES ========================================================= */ /* LEFT NODES */ /* RIGHT NODES */ /* ========================================================= NODE PULSE ========================================================= */ /* ========================================================= VERY SOFT CENTER FADE Keeps animation away from headline ========================================================= */ /* ========================================================= KEEP HERO COPY ABOVE MOTION ========================================================= */ /* ========================================================= MOBILE ========================================================= */ /* ========================================================= CONTACT HERO — LIVE NETWORK OVERLAY ========================================================= */ /* ========================================================= MOVING GOLD TRACES ========================================================= */ /* LEFT SIDE */ /* ========================================================= LEFT TRACE MOVEMENT ========================================================= */ /* ========================================================= RIGHT TRACE MOVEMENT ========================================================= */ /* ========================================================= PULSING GOLD NODES ========================================================= */ /* ========================================================= KEEP COPY ABOVE NETWORK ========================================================= */ /* LEFT-SIDE NODE PULSES */ /* RIGHT-SIDE NODE PULSES */ /* ========================================================= CONTACT — START THE CONVERSATION ========================================================= */ /* two-column composition */ /* ========================================================= LEFT ========================================================= */ /* ========================================================= RIGHT PANEL ========================================================= */ /* giant ghost number */ /* tiny ambient gold glow */ /* ========================================================= MOBILE ========================================================= */ /* ========================================================= CONTACT FORM SECTION — FINAL TWO-COLUMN LAYOUT ========================================================= */ /* ========================================================= LEFT SIDE ========================================================= */ /* ========================================================= LEFT SIDE ========================================================= */ /* LOGO */ /* DIRECT CONTACT CARD */ /* ========================================================= RIGHT SIDE — FORM CARD ========================================================= */ /* FORM INTRO */ /* ========================================================= RESPONSIVE ========================================================= */ /* ========================================================= FLUENT FORMS — CCG CONTACT PAGE STYLING ========================================================= */ /* whole form */ /* FIELD SPACING */ /* LABELS */ /* required asterisk */ /* ========================================================= TEXT INPUTS / EMAIL / TEXTAREA ========================================================= */ /* placeholder */ /* FOCUS STATE */ /* TEXTAREAS */ /* ========================================================= RADIO + CHECKBOX OPTIONS ========================================================= */ /* option text */ /* radio + checkbox base */ /* radio shape */ /* checkbox shape */ /* selected radio */ /* selected checkbox */ /* checkbox check mark */ /* hover */ /* ========================================================= FIELD GROUPS WITH RADIO / CHECKBOX LISTS ========================================================= */ /* add a little breathing room after question label */ /* ========================================================= CCG CONSULTATION SUBMIT BUTTON ========================================================= */ /* OUR OWN TEXT LAYER */ /* ========================================================= FLUENT FORMS — SUBMIT LOADING STATE ========================================================= */ /* ========================================================= HOVER ========================================================= */ /* ACTUAL MOVING GLEAM ACROSS THE WORDS */ /* MOVES THE BRIGHT BAND ACROSS THE LETTERS */ /* ========================================================= VALIDATION ERRORS ========================================================= */ /* ========================================================= MOBILE ========================================================= */ /* ========================================================= CONTACT — WHAT HAPPENS NEXT ========================================================= */ /* heading */ /* ========================================================= PROCESS PATH ========================================================= */ /* connecting line */ /* cards */ /* number circles */ /* Step number hover pop */ /* ========================================================= MOBILE ========================================================= */ /* ========================================================= FLUENT FORMS — SUCCESS MESSAGE ========================================================= */ /* small success accent */ /* any paragraphs Fluent Forms inserts */ /* ========================================================= RADIO / CHECKBOX — IMMEDIATE SELECTED STATE ========================================================= */ /* make state changes repaint immediately */ /* ========================================================= ABOUT PAGE — HERO ========================================================= */ /* HERO */ /* ========================================================= HERO INNER ========================================================= */ /* ========================================================= LEFT COPY ========================================================= */ /* CTA */ /* ========================================================= ABOUT HERO — BACKGROUND ART ========================================================= */ /* ========================================================= RESPONSIVE ========================================================= */ /* ========================================================= ABOUT — WHAT WE BELIEVE ========================================================= */ /* Subtle architectural line */ /* ----------------------------------------- LEFT SIDE ----------------------------------------- */ /* Small gold architectural detail */ /* ----------------------------------------- RIGHT SIDE ----------------------------------------- */ /* The emotional pivot */ /* ========================================================= RESPONSIVE ========================================================= */ /* ========================================== ABOUT — BELIEF CALLOUT EMPHASIS ========================================== */ /* ========================================== ABOUT — BELIEF COMPASS ART ========================================== */ /* ORBIT RINGS */ /* CENTRAL COMPASS */ /* DIAGONAL POINTS */ /* CENTER */ /* ORBITING GOLD POINTS */ /* SUBTLE ROTATION */ /* ACCESSIBILITY */ /* ========================================================= ABOUT — HOW WE WORK ========================================================= */ /* HEADING */ /* PATH */ /* STEP */ /* GOLD PROCESS NODES */ /* subtle metallic sheen */ /* NAVY NUMBERS */ /* HOVER */ /* ========================================================= RESPONSIVE ========================================================= */ /* ========================================================= ABOUT US — HOW WE WORK FINAL TEXT COLOR OVERRIDE ========================================================= */ /* SECTION INTRO */ /* STEP HEADINGS */ /* STEP BODY COPY */ /* GOLD NODES */ /* NAVY NUMBERS */ /* CONNECTING LINE */ /* ========================================================= ABOUT US — BRAND SIGNATURE ========================================================= */ /* faint top/bottom transition lines */ /* EACH STATEMENT */ /* middle line gets gold italic emphasis */ /* subtle hover lift */ /* ========================================================= RESPONSIVE ========================================================= */ /* ========================================================= ABOUT SIGNATURE — IDLE BACKGROUND MOTION ========================================================= */ /* LARGE NAVIGATION RINGS */ /* DRIFT */ /* LITTLE GOLD NODES */ /* VERY SOFT BREATHING LIGHT */ /* ACCESSIBILITY */ /* ========================================================= ABOUT SIGNATURE — BRIGHTER GOLD + BLUE MOTION ========================================================= */ /* ========================================================= NAVIGATION RINGS ========================================================= */ /* GOLD OUTER RING */ /* BLUE RING */ /* GOLD + BLUE INNER RING */ /* ========================================================= FLOATING NODES ========================================================= */ /* GOLD NODE */ /* BLUE NODE */ /* ========================================================= CENTRAL GOLD + BLUE BREATHING GLOW ========================================================= */ /* ========================================================= REDUCED MOTION ========================================================= */ /* ========================================================= ABOUT US — OUR FOUNDER ========================================================= */ /* ========================================================= LEFT — FOUNDER SEAL ========================================================= */ /* LinkedIn hover label */ /* ========================================================= RIGHT — COPY ========================================================= */ /* Final principle callout */ /* ========================================================= RESPONSIVE ========================================================= */ /* ========================================================= FOUNDER SIGNATURE STAMP ========================================================= */ /* hover */ /* LinkedIn micro-label */ /* ========================================================= FOUNDER EMBOSSED SIGNATURE STAMP ========================================================= */ /* ========================================================= HOVER — DEEPEN THE EMBOSS ========================================================= */ /* ========================================================= LINKEDIN LABEL ========================================================= */ /* ========================================================= FOUNDER EMBOSSED STAMP — CENTERED ABOVE NAME ========================================================= */ /* ========================================================= FOUNDER SECTION — STOP ALL IDLE MOTION ========================================================= */ /* ========================================== FOUNDER STAMP — FINAL OVERRIDE ========================================== */ /* Kill any image hover animation too */ /* ========================================== FOUNDER SECTION — FINAL POSITION / HEIGHT ========================================== */ /* ========================================== FOUNDER STAMP — COMPLETELY STATIC ========================================== */ /* KEEP OUR FINAL POSITIONING */ /* ========================================== FOUNDER CLOSING STATEMENT ========================================== */ /* SMALL GOLD LABEL */ /* MAIN CLOSING THOUGHT */ /* EACH THOUGHT GETS ITS OWN LINE */ /* GOLD EMPHASIS ON THE FINAL LINE */ /* First two statements */ /* Final founder principle */ /* ========================================================= PUBLIC SECTOR SERVICES HERO ========================================================= */ /* HERO */ /* INNER WIDTH */ /* COPY AREA */ /* BREADCRUMB */ /* HOME BREADCRUMB — GOLD TEXT SWEEP */ /* sweep ONLY when hovered */ /* EYEBROW */ /* HEADING */ /* BODY COPY */ /* BUTTON ROW */ /* BOTH BUTTONS */ /* PRIMARY */ /* SECONDARY */ /* ========================================================= RESPONSIVE ========================================================= */ /* ========================================================= PUBLIC SECTOR HERO — COLOR GRADE + EDGE FADE ========================================================= */ /* Soft edge vignette around ALL sides */ /* keep actual hero content above overlays */ /* ========================================================= PUBLIC SECTOR HERO — SUBTLE BACKGROUND DRIFT ========================================================= */ /* Accessibility */ /* ========================================================= PUBLIC SECTOR WHAT EFFECTIVE GOVERNMENT OPERATIONS REQUIRE ========================================================= */ /* ========================================================= INNER CONTAINER ========================================================= */ /* ========================================================= INTRO ========================================================= */ /* ========================================================= REQUIREMENTS LIST ========================================================= */ /* ========================================================= EACH REQUIREMENT ROW ========================================================= */ /* ========================================================= GIANT NUMBER ========================================================= */ /* ========================================================= VERTICAL GOLD DIVIDER ========================================================= */ /* ========================================================= COPY ========================================================= */ /* ========================================================= VERY FAINT "DOCUMENT / BLUEPRINT" DETAIL ========================================================= */ /* ========================================================= HOVER ========================================================= */ /* ========================================================= LITTLE TOP ARCHITECTURAL ACCENT Gives the section a Public Sector identity ========================================================= */ /* ========================================================= TABLET ========================================================= */ /* ========================================================= MOBILE ========================================================= */ /* ========================================================= PUBLIC SECTOR — BUSINESS OPERATIONS FOR GOVERNMENT ========================================================= */ /* subtle background structure */ /* ========================================================= INTRO ========================================================= */ /* GOLD TEXT — BASE STATE */ /* Run the shine when JS adds this class */ /* ========================================================= CAPABILITY STACK ========================================================= */ /* ========================================================= EACH FEATURE BLOCK ========================================================= */ /* alternate direction */ /* ========================================================= OVERSIZED NUMBER ========================================================= */ /* ========================================================= HEADING SIDE ========================================================= */ /* small signature line */ /* ========================================================= BODY SIDE ========================================================= */ /* ========================================================= CAPABILITY LIST ========================================================= */ /* ========================================================= CTA ========================================================= */ /* ========================================================= HOVER — VERY SUBTLE ========================================================= */ /* ========================================================= THIN GOLD THREAD THROUGH SECTION ========================================================= */ /* ========================================================= TABLET ========================================================= */ /* ========================================================= MOBILE ========================================================= */ /* ========================================================= PUBLIC SECTOR — WHO WE SUPPORT DISTINCT 2x2 ECOSYSTEM MATRIX ========================================================= */ /* INNER */ /* ========================================================= TOP INTRO — FULL WIDTH ========================================================= */ /* ========================================================= 2x2 MATRIX ========================================================= */ /* CENTER VERTICAL DIVIDER */ /* CENTRAL COMPASS POINT */ /* ========================================================= EACH QUADRANT ========================================================= */ /* horizontal divider between rows */ /* ========================================================= NUMBERS ========================================================= */ /* ========================================================= COPY ========================================================= */ /* ========================================================= ARROW ========================================================= */ /* ========================================================= SUBTLE INTERNAL ACCENT ========================================================= */ /* very faint document-line texture */ /* ========================================================= HOVER ========================================================= */ /* ========================================================= TABLET ========================================================= */ /* ========================================================= MOBILE ========================================================= */ /* 01 — top left */ /* 02 — top right */ /* 03 — bottom left */ /* 04 — bottom right */ /* ========================================================= PUBLIC SECTOR SUPPORT MATRIX — TRUE CENTER CROSS ========================================================= */ /* Remove the old per-card horizontal borders */ /* Create ONE true horizontal center divider */ /* CENTER HORIZONTAL DIVIDER — does not consume a pseudo-element */ /* ========================================================= WHO WE SUPPORT — FINAL CENTER ALIGNMENT ========================================================= */ /* Make the upper + lower halves exactly equal */ /* Put the hover accent directly on the quadrant edge */ /* Move TOP arrows slightly closer to the center line */ /* 01 */ /* 02 */ /* ========================================================= PUBLIC SECTOR — DESIGNED TO WORK WITHIN YOUR ENVIRONMENT ========================================================= */ /* INNER */ /* ========================================================= INTRO ========================================================= */ /* ========================================================= FOUR PRINCIPLES ========================================================= */ /* EACH PRINCIPLE */ /* NUMBER */ /* HEADING */ /* BODY */ /* ========================================================= GOLD TOP ACCENT ========================================================= */ /* ========================================================= HOVER ========================================================= */ /* ========================================================= SUBTLE BACKGROUND LINEWORK ========================================================= */ /* ========================================================= FINAL CTA ========================================================= */ /* CTA BUTTON */ /* ========================================================= TABLET ========================================================= */ /* ========================================================= MOBILE ========================================================= */ /* ========================================================= PUBLIC SECTOR FINAL CTA — GOLD HOVER GLEAM ========================================================= */ /* actual gleam strip */ /* keep text + arrow above shine */ /* hover */ /* ========================================================= PUBLIC SECTOR HERO PRIMARY BUTTON — GOLD HOVER GLEAM ========================================================= */ /* ========================================================= HOME PAGE HERO ========================================================= */ /* ========================================================= SLIDE STACK ========================================================= */ /* ========================================================= OVERLAY / COLOR GRADE ========================================================= */ /* subtle vignette */ /* ========================================================= HERO INNER ========================================================= */ /* ========================================================= HERO COPY ========================================================= */ /* ========================================================= HERO BUTTONS ========================================================= */ /* PRIMARY */ /* GOLD GLEAM */ /* SECONDARY */ /* ========================================================= FIVE-SLIDE NAVIGATION ========================================================= */ /* ========================================================= NAV ITEM ========================================================= */ /* NUMBER */ /* LABEL */ /* ========================================================= PROGRESS LINE ========================================================= */ /* the JS will restart this each time a slide becomes active */ /* ========================================================= FOCUS ACCESSIBILITY ========================================================= */ /* ========================================================= TABLET ========================================================= */ /* ========================================================= MOBILE ========================================================= */ @media(max-width:700px){ /* horizontal scroll for 5 nav options */ } /* ========================================================= REDUCED MOTION ========================================================= */ /* ========================================================= HOME HERO — SIZE REFINEMENT ========================================================= */ /* smaller overall copy block */ /* smaller heading */ /* slightly smaller eyebrow */ /* slightly smaller paragraph */ /* slightly tighter buttons */ /* ========================================================= BACK THE ARTWORK UP A LITTLE ========================================================= */ /* ========================================================= HOME — IDENTITY STATEMENT ========================================================= */ /* INNER LAYOUT */ /* ========================================================= LEFT SIDE ========================================================= */ /* ========================================================= RIGHT SIDE COPY ========================================================= */ /* ========================================================= GOLD RULE ========================================================= */ /* reveal the rule when section is in view */ /* ========================================================= SUBTLE STRUCTURAL DETAIL ========================================================= */ /* ========================================================= TOP / BOTTOM HAIRLINES ========================================================= */ /* ========================================================= TABLET ========================================================= */ /* ========================================================= MOBILE ========================================================= */ /* ========================================================= HOME IDENTITY — COMPASS AXIS REFINEMENT ========================================================= */ /* slightly tighter overall composition */ /* ========================================================= LEFT ========================================================= */ /* make first line quieter */ /* make italic line the star */ /* ========================================================= RIGHT ========================================================= */ /* ========================================================= CENTRAL AXIS ========================================================= */ /* vertical line */ /* center diamond */ /* horizontal coordinate line extending right */ /* ========================================================= GHOSTED COMPASS GEOMETRY ========================================================= */ /* small compass cross inside ghost ring */ /* ========================================================= GOLD RULE ========================================================= */ /* ========================================================= BOTTOM HAIRLINE ========================================================= */ /* ========================================================= RESPONSIVE ========================================================= */ /* ========================================================= HOME — WHERE DO YOU NEED HELP? THREE-DISCIPLINE NAVIGATOR ========================================================= */ /* ========================================================= INNER ========================================================= */ /* ========================================================= INTRO ========================================================= */ /* ========================================================= CONNECTED DISCIPLINE SYSTEM ========================================================= */ /* long shared line running through all three */ /* ========================================================= EACH DISCIPLINE ========================================================= */ /* ========================================================= NUMBER ========================================================= */ /* little gold node on the shared line */ /* ========================================================= COPY ========================================================= */ /* italic promise */ /* supporting detail */ /* ========================================================= EXPLORE LINK ========================================================= */ /* ========================================================= GOLD HOVER TRACK ========================================================= */ /* ========================================================= VERY SUBTLE HOVER GLOW ========================================================= */ /* ========================================================= HOVER ========================================================= */ /* ========================================================= SUBTLE BACKGROUND ARCHITECTURE ========================================================= */ /* ========================================================= TABLET ========================================================= */ /* ========================================================= MOBILE ========================================================= */ /* ========================================================= HOME — COMMERCIAL + PUBLIC SECTOR SPLIT ENVIRONMENT SECTION ========================================================= */ /* ========================================================= MAIN SPLIT ========================================================= */ /* ========================================================= EACH SIDE ========================================================= */ /* ========================================================= COMMERCIAL SIDE ========================================================= */ /* subtle architecture */ /* ========================================================= PUBLIC SIDE ========================================================= */ /* faint institutional linework */ /* ========================================================= NUMBERS ========================================================= */ /* ========================================================= EYEBROW ========================================================= */ /* ========================================================= HEADING ========================================================= */ /* ========================================================= LEAD ========================================================= */ /* ========================================================= BODY ========================================================= */ /* ========================================================= LINKS ========================================================= */ /* ========================================================= CENTER AXIS ========================================================= */ /* vertical line */ /* center diamond housing */ /* inner gold diamond */ /* ========================================================= CENTER HORIZONTAL CONNECTORS ========================================================= */ /* ========================================================= SIDE HOVER ========================================================= */ /* ========================================================= CONNECTING PRINCIPLE ========================================================= */ /* ========================================================= TABLET ========================================================= */ /* ========================================================= MOBILE ========================================================= */ /* ========================================================= HOME ENVIRONMENTS — PREVENT ITALIC HEADING CLIPPING ========================================================= */ /* ========================================================= HOME DISCIPLINES — ALIGN BOTTOM LINKS ========================================================= */ /* ========================================================= HOME DISCIPLINES — FINAL VERTICAL ALIGNMENT FIX Keeps all 3 Explore links on the same baseline ========================================================= */ /* Each entire column becomes a flex column */ /* Copy area fills all remaining vertical space */ /* Keep all titles in the same title zone */ /* Keep all gold promises in the same zone */ /* Keep description area consistent */ /* Push Explore link to bottom of every column */ /* ========================================================= HOME DISCIPLINES — OPTICAL TITLE ALIGNMENT ========================================================= */ /* Information Operations is only one line, so lift ONLY the visible heading without disturbing anything underneath it. */ /* ========================================================= HOME ENVIRONMENTS — FINAL COLUMN ALIGNMENT ========================================================= */ /* Lock both sides to the same starting point */ /* Same space reserved for the main heading on both sides */ /* Same space reserved for the lead paragraph */ /* Same space reserved for supporting copy */ /* Keep the links aligned at the bottom of the content system */ /* ========================================================= HOME PHILOSOPHY — MOVING GOLD TEXT GLEAM ========================================================= */ /* ========================================================= HOME — THE COMPASS ========================================================= */ /* ========================================================= HEADER ========================================================= */ /* ========================================================= CAROUSEL ========================================================= */ /* ========================================================= TOP CONTROLS ========================================================= */ /* ========================================================= ARROWS ========================================================= */ /* ========================================================= VIEWPORT ========================================================= */ /* ========================================================= TRACK ========================================================= */ /* ========================================================= INDIVIDUAL ISSUE ========================================================= */ /* ========================================================= ISSUE LINK / LAYOUT ========================================================= */ /* ========================================================= COVER ========================================================= */ /* large faint compass circle */ /* diagonal gold architectural line */ /* ========================================================= COVER TOP ========================================================= */ /* ========================================================= COVER CENTER ========================================================= */ /* ========================================================= COVER BOTTOM ========================================================= */ /* ========================================================= ISSUE INFORMATION ========================================================= */ /* hide full editorial copy on peek cards */ /* ========================================================= DATE ========================================================= */ /* ========================================================= ISSUE TITLE ========================================================= */ /* ========================================================= ISSUE EXCERPT ========================================================= */ /* ========================================================= READ EDITION ========================================================= */ /* ========================================================= COVER HOVER ========================================================= */ /* ========================================================= DIFFERENT EDITION GEOMETRY ========================================================= */ /* ========================================================= PAGINATION ========================================================= */ /* ========================================================= VIEW ALL EDITIONS ========================================================= */ /* ========================================================= RESPONSIVE — TABLET ========================================================= */ /* ========================================================= RESPONSIVE — MOBILE ========================================================= */ /* ========================================================= HOME — THE COMPASS TITLE SEAL ========================================================= */ /* ========================================================= THE COMPASS — JS MEASUREMENT MODE Prevents hidden layout measurements from animating ========================================================= */ /* ========================================================= THE COMPASS — AUGUST COVER / COMPASS ROSE STYLE ========================================================= */ /* ========================================================= DOUBLE FRAME ========================================================= */ /* ========================================================= TOP META ========================================================= */ /* ========================================================= MASTHEAD ========================================================= */ /* ========================================================= FEATURE STORY ========================================================= */ /* ========================================================= COMPASS ROSE ART ========================================================= */ /* second ring */ /* compass needle / cross */ /* ========================================================= DATE ========================================================= */ /* ========================================================= THE COMPASS — AUGUST COVER FINAL EDITORIAL LAYOUT ========================================================= */ /* TOP META */ /* MASTHEAD */ /* ornament above title */ /* THE COMPASS */ /* MONTHLY BRIEFING */ /* ========================================================= FEATURE AREA ========================================================= */ /* 01 / FEATURE */ /* tiny gold underline */ /* FEATURE HEADLINE */ /* ========================================================= DATE AT BOTTOM ========================================================= */ /* little ornament above date */ /* ========================================================= KEEP THE NEW COVER CLEAN ========================================================= */ /* ========================================================= THE COMPASS — SHARED COVER SYSTEM JULY / JUNE / MAY / APRIL ========================================================= */ /* ========================================================= DOUBLE FRAME ========================================================= */ /* ========================================================= TOP META ========================================================= */ /* ========================================================= MASTHEAD ========================================================= */ /* ========================================================= FEATURE AREA ========================================================= */ /* ========================================================= DATE ========================================================= */ /* ========================================================= JULY — INFORMATION FIELD ========================================================= */ /* ========================================================= JUNE — INTERSECTION ========================================================= */ /* ========================================================= MAY — ORBITAL ========================================================= */ /* ========================================================= APRIL — CONCENTRIC / MINIMAL ========================================================= */ /* ========================================================= KEEP ALL ART BEHIND THE WRITING ========================================================= */ /* ========================================================= QUIET OLD GENERIC DECORATION ========================================================= */ /* ========================================================= THE COMPASS — FOOTER SUBSCRIPTION STATES ========================================================= */ /* invisible spam trap */ /* status message */ /* loading */ /* ========================================================= THE COMPASS — PNG COVER ARTWORK MASTER OVERRIDE Illustrator artwork underneath live WordPress typography ========================================================= */ /* ========================================================= COVER SHELL ========================================================= */ /* ========================================================= PNG ARTWORK LAYER ========================================================= */ /* Actual Illustrator PNG */ /* ========================================================= KILL OLD CSS-GENERATED COVER ART ========================================================= */ /* Remove old style-specific decorative backgrounds */ /* Quiet old cover pseudo-art */ /* ========================================================= GOLD FRAME — ABOVE ARTWORK ========================================================= */ /* ========================================================= ALL LIVE WORDPRESS CONTENT ABOVE PNG ========================================================= */ /* Individual live elements */ /* ========================================================= ENSURE ALL FIVE NEW ARTWORKS USE FULL COVER ========================================================= */ /* ========================================================= MOBILE ========================================================= */ /* ========================================================= THE COMPASS — FEATURE TYPOGRAPHY REFINEMENT ========================================================= */ /* 01 / FEATURE */ /* Small gold divider beneath FEATURE */ /* FEATURE HEADLINE */ /* Remove old extra divider if one exists below headline */ /* ========================================================= THE COMPASS — BESPOKE COVER TYPESETTING Typography fitted around each Illustrator artwork ========================================================= */ /* ========================================================= SHARED TYPOGRAPHY FOUNDATION ========================================================= */ /* tiny gold line under 01 / FEATURE */ /* ========================================================= 01 — AUGUST HORIZONTAL ROLLED PARCHMENT Text stays ABOVE the scroll as much as possible ========================================================= */ /* Give August date its own lower-left home */ /* ========================================================= 02 — JULY LARGE UNROLLED PARCHMENT ON RIGHT Narrow left editorial column ========================================================= */ /* ========================================================= 03 — JUNE ARCHIVAL LETTER + FOUNTAIN PEN Keep feature title entirely in navy territory ========================================================= */ /* ========================================================= 04 — MAY SLENDER DIAGONAL ROLLED DOCUMENT Tightest left-side column ========================================================= */ /* ========================================================= 05 — APRIL WORLD MAP + NAVIGATOR'S COMPASS Text sits ABOVE map in the open navy field ========================================================= */ /* ========================================================= DATE — CONSISTENT ACROSS ALL FIVE ========================================================= */ /* ========================================================= KEEP MASTHEAD ABOVE EVERYTHING ========================================================= */ /* ========================================================= SMALLER SCREENS ========================================================= */ /* ========================================================= THE COMPASS — TYPOGRAPHY FLOW FIX Restore masthead + feature structure ========================================================= */ /* Keep cover as the original vertical layout */ /* TOP BRAND */ /* MASTHEAD — restore normal flow */ /* FEATURE — IMPORTANT: NO ABSOLUTE POSITIONING */ /* DATE — restore bottom anchoring through flex */ /* ========================================================= AUGUST ========================================================= */ /* ========================================================= JULY ========================================================= */ /* ========================================================= JUNE ========================================================= */ /* ========================================================= MAY ========================================================= */ /* ========================================================= APRIL ========================================================= */ /* ========================================================= THE COMPASS — FINAL TUNING AUGUST + APRIL ONLY ========================================================= */ /* AUGUST — lift and tighten */ /* APRIL — move title into clean navy */ /* ========================================================= THE COMPASS — SMOOTH MOTION CSS ONLY / SAFE ========================================================= */ /* JS uses this class while calculating positions. Those calculations should NEVER animate. */ /* ========================================================= THE COMPASS — FINAL CAROUSEL MOTION Fast width handoff + smooth track glide ========================================================= */ /* DEFAULT / OUTGOING CARD */ /* ACTIVE CARD */ /* Hidden measurement pass must never animate */ /* ========================================================= FIX ITALIC LORA DESCENDER CLIPPING ========================================================= */ /* ========================================================= HOME HERO — ITALIC LINE POSITION FIX Give the Lora "f" a little more breathing room ========================================================= */ /* ========================================================= CONTACT PAGE — SOCIAL ICONS ========================================================= */ /* Bluesky + LinkedIn use filled paths */ /* Hover */ /* LinkedIn — coming soon */ /* ========================================================= CCG HEADER — ALLOW HERO LINKS UNDER TRANSPARENT AREA ========================================================= */ /* Transparent header shell must not block the page underneath */ /* But the actual logo still needs to be clickable */ /* And the hamburger still needs to be clickable */ /* ========================================================= HOME HERO — LOWER CONTENT TO CLEAR HEADER LOGO ========================================================= */ /* ========================================================= PUBLIC SECTOR HERO — LOWER CONTENT SLIGHTLY ========================================================= */ /* ========================================================= FULLSCREEN NAV — FIT ALL 7 LINKS ========================================================= */ /* ========================================================= MOBILE FOOTER — FIX LOGO / TEXT OVERLAP ========================================================= */ /* ========================================================= HOME HERO — HALF-SCREEN / MID-WIDTH FIX ========================================================= */ /* ========================================================= HOME HERO — MOBILE FINAL SPACING + NAV FIX ========================================================= */ @media (max-width:700px){ /* Keep enough room for both buttons above the nav */ /* Slightly tighter mobile headline */ /* ===================================================== MOBILE HERO NAVIGATION ===================================================== */ } /* ========================================================= HOME HERO — MOBILE NAV FIT ALL 5 ITEMS ========================================================= */ /* ========================================================= HOME HERO — MOBILE SHOW FULL ARTWORK ========================================================= */ /* ========================================================= ABOUT HERO — MOBILE BALANCED ARTWORK ========================================================= */ /* ========================================================= CONTRACT HERO — MOBILE FULL ARTWORK BAND ========================================================= */ @media (max-width:650px){ /* ===================================================== FULL CONTRACT ARTWORK ===================================================== */ /* Keep the normal dark treatment across the hero */ /* CONTENT */ /* BREADCRUMB */ /* HEADLINE */ /* SUPPORTING COPY */ /* BUTTONS */ } /* ========================================================= DIGITAL HERO — MOBILE SHIFT IMAGE TO SHOW MORE BRIDGE ========================================================= */ @media (max-width:650px){ .digital-hero-bg img{ object-position:85% 44% !important; } } /* ========================================================= DIGITAL HERO — MOBILE ROAD STREAM ALIGNMENT ========================================================= */ @media (max-width:650px){ .digital-road-svg{ transform: translate(-85%, 8%) !important; transform-origin:center center !important; } } /* ========================================================= DIGITAL HERO — MOBILE ROAD STREAM Shift right + lean toward road ========================================================= */ @media (max-width:650px){ .digital-road-svg{ transform: translate(-72%, 8%) rotate(10deg) !important; transform-origin: 50% 90% !important; } } /* ========================================================= PUBLIC SECTOR HERO — MOBILE IMAGE POSITION + DRIFT ========================================================= */ /* ========================================================= ABOUT FOUNDER — MOBILE STAMP POSITION ========================================================= */ /* ========================================================= ABOUT FOUNDER — MOBILE MOVE WHOLE SECTION DOWN ========================================================= */ /* ========================================================= ABOUT FOUNDER — MOBILE Preserve perfect position + restore bottom space ========================================================= */ /* ========================================================= GLOBAL TRUST CARDS — MOBILE Stack Privacy / AI / Human cards vertically ========================================================= */ /* ========================================================= INFORMATION OPERATIONS — MOBILE SERVICE EXPLORER Restore full service navigation above active panel ========================================================= */ /* ========================================================= CONTRACT SERVICES — MOBILE NAVIGATION Stack all six capability tabs vertically ========================================================= */ /* ========================================================= PUBLIC SECTOR — MOBILE Hide support arrows ========================================================= */ /* ========================================================= PUBLIC SECTOR — MOBILE Restore dividers between stacked support items ========================================================= */ /* ========================================================= HOME IDENTITY — SHOW FULL ITALIC DESCENDERS ========================================================= */ /* ========================================================= HOME — COMMERCIAL HEADING Keep "growth." on the same italic line ========================================================= */ /* ========================================================= BUSINESS OPERATIONS — STAT BAND SUBHEADINGS ========================================================= */ /* ========================================================= BUSINESS OPS — FOURTH STAT TITLE Give "Startups to Fortune 500 Experience at Scale" more room ========================================================= */ /* ========================================================= BUSINESS OPERATIONS HERO — NEW TITLE ========================================================= */ /* MOBILE */ /* ========================================================= CONTRACT HERO — TITLE TREATMENT ========================================================= */ /* ========================================================= DIGITAL TRANSFORMATION READINESS — HERO TITLE ========================================================= */ .dtr-hero-title-main, .dtr-hero-title-accent{ display:block; } .dtr-hero-title-accent{ margin-top:6px; font-style:italic; font-weight:500; background:linear-gradient( 90deg, #F0DEAE 0%, #D4A017 45%, #E0C77F 72%, #BC8810 100% ); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; padding-bottom:.10em; } .digital-readiness-check-content{ min-width:0; } .digital-readiness-check-title{ margin:0 0 8px; font-family:"Lora", serif !important; font-size:20px; font-weight:600; line-height:1.2; color:#1D2952; } .digital-readiness-check-item p{ margin:0; } /* ========================================================= DIGITAL READINESS — ASSESSMENT FLOW LISTS ========================================================= */ .digital-readiness-state-list{ margin:14px 0 0; padding:0; list-style:none; } .digital-readiness-state-list li{ position:relative; margin:0 0 9px; padding-left:18px; line-height:1.55; } .digital-readiness-state-list li:last-child{ margin-bottom:0; } .digital-readiness-state-list li::before{ content:""; position:absolute; left:0; top:.7em; width:5px; height:5px; border-radius:50%; background:#D4A017; } /* ========================================================= DTR HERO — SHIFT ROAD ANIMATION RIGHT ON DESKTOP ONLY ========================================================= */ @media (min-width:1201px){ .digital-road-svg{ transform:translate(-10%, 0) !important; transform-origin:center center !important; } } /* ========================================================= DTR — MOBILE REPAIR Related Services + Hero Composition ========================================================= */ @media (max-width:700px){ /* ----------------------------------------- HERO — GIVE HEADER / BREADCRUMB ROOM ----------------------------------------- */ .digital-hero .info-ops-hero-inner{ width:calc(100% - 36px) !important; padding-left:0 !important; padding-right:0 !important; padding-top:135px !important; } .digital-hero .ccg-hero-breadcrumb{ width:100% !important; max-width:100% !important; margin: 0 auto 28px !important; justify-content:center !important; flex-wrap:wrap !important; gap:6px 9px !important; font-size:11px !important; line-height:1.35 !important; text-align:center !important; } /* ----------------------------------------- HERO TITLE ----------------------------------------- */ .digital-hero h1{ max-width:100% !important; font-size:clamp(34px, 9.2vw, 44px) !important; line-height:1.08 !important; letter-spacing:-.025em !important; } .digital-hero .dtr-hero-title-accent{ margin-top:7px !important; font-size:.94em !important; line-height:1.08 !important; } /* ----------------------------------------- HERO BODY ----------------------------------------- */ .digital-hero-lede{ max-width:92% !important; margin-top:24px !important; font-size:16px !important; line-height:1.58 !important; } /* ----------------------------------------- HERO BUTTONS ----------------------------------------- */ .digital-hero-actions{ width:100% !important; margin-top:28px !important; gap:12px !important; } .digital-hero-actions .hero-btn{ width:100% !important; max-width:320px !important; min-height:50px !important; padding: 0 18px !important; font-size:13px !important; text-align:center !important; } } /* ========================================================= DTR HERO — RESTORE SHARED HERO BUTTON BASE ========================================================= */ .digital-hero .hero-btn{ position:relative; display:inline-flex !important; align-items:center !important; justify-content:center !important; min-height:54px !important; height:auto !important; padding:14px 28px !important; border-radius:4px; font-family:"Assistant", sans-serif !important; font-size:15px !important; font-weight:700; line-height:1.2 !important; text-align:center; text-decoration:none !important; box-sizing:border-box !important; } /* ========================================================= DTR — MOBILE HERO BUTTON SIZE FIX ========================================================= */ @media (max-width:700px){ .digital-hero-actions{ display:flex !important; flex-direction:column !important; align-items:center !important; gap:12px !important; width:100% !important; } .digital-hero-actions .hero-btn{ width:min(100%, 320px) !important; min-height:54px !important; height:54px !important; padding:0 22px !important; flex:0 0 54px !important; } } /* ========================================================= DTR — MOBILE HERO BOTTOM BREATHING ROOM Match Business Operations spacing ========================================================= */ @media (max-width:700px){ .digital-hero .info-ops-hero-inner{ padding-bottom:70px !important; } } /* ========================================================= DTR HERO — RESTORE DESKTOP / LAPTOP HERO HEIGHT Match sibling service hero proportions MOBILE UNTOUCHED ========================================================= */ @media (min-width:701px){ .digital-hero{ min-height:610px !important; display:flex !important; align-items:center !important; justify-content:center !important; padding: 54px 32px 36px !important; box-sizing:border-box !important; } }