/* * Think Macro — Shared Design System Stylesheet * tm-styles.css * * Hosted on GitHub Pages and referenced by all GHL pages. * Update this file to push brand/style changes to every page simultaneously. * * Font imports are handled by GHL global header — do not duplicate. * If testing locally, add this to : * */ /* ── RESET & VARIABLES ─────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --navy: #0C111D; --navy-2: #0F1825; --navy-3: #080D17; --teal: #41BEB0; --teal-dark: #006F87; --teal-mid: #117E90; --white: #FFFFFF; --mist: #C5CCD6; --steel: #7C8696; --slate: #3A4252; --teal-glow: rgba(65,190,176,0.10); --teal-border: rgba(65,190,176,0.18); --teal-strong: rgba(65,190,176,0.40); --card-bg: rgba(15,24,37,0.85); } html { scroll-behavior: smooth; } body { font-family: 'Inter', sans-serif; background: var(--navy); color: var(--mist); line-height: 1.6; overflow-x: hidden; } body::before { content: ''; position: fixed; inset: 0; background-image: linear-gradient(rgba(65,190,176,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(65,190,176,0.025) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; z-index: 0; } section, nav, footer { position: relative; z-index: 1; } .container { max-width: 1160px; margin: 0 auto; padding: 0 40px; } /* NAV */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 999; height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 0 48px; background: rgba(12,17,29,0.94); backdrop-filter: blur(16px); border-bottom: 1px solid var(--teal-border); } .logo { font-family:'Montserrat',sans-serif; font-weight:900; font-size:17px; color:var(--white); text-decoration:none; letter-spacing:.06em; line-height:1.1; } .logo span { color:var(--teal); display:block; } .nav-links { display:flex; align-items:center; gap:28px; list-style:none; } .nav-links a { font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--steel); text-decoration:none; transition:color .2s; } .nav-links a:hover { color:var(--teal); } .btn { display:inline-flex; align-items:center; gap:7px; font-family:'Montserrat',sans-serif; font-weight:700; font-size:12px; letter-spacing:.08em; text-transform:uppercase; padding:11px 22px; border-radius:40px; text-decoration:none; border:none; cursor:pointer; transition:all .2s; } .btn-teal { background:var(--teal); color:var(--navy); } .btn-teal:hover { background:#56d4c6; transform:translateY(-1px); box-shadow:0 8px 28px rgba(65,190,176,.35); } .btn-ghost { background:transparent; color:var(--white); border:1px solid var(--teal-strong); } .btn-ghost:hover { border-color:var(--teal); color:var(--teal); } /* HERO */ .hero { min-height:100vh; display:flex; align-items:center; padding:100px 0 80px; overflow:hidden; } .hero::after { content:''; position:absolute; top:15%; right:-5%; width:700px; height:700px; background:radial-gradient(circle,rgba(65,190,176,.06) 0%,transparent 65%); pointer-events:none; } .hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; } .badge { display:inline-flex; align-items:center; gap:8px; background:rgba(65,190,176,.08); border:1px solid var(--teal-border); border-radius:40px; padding:5px 14px 5px 10px; margin-bottom:22px; } .badge .dot { width:7px; height:7px; border-radius:50%; background:var(--teal); animation:blink 2s ease-in-out infinite; } .badge span { font-size:10px; font-weight:600; color:var(--teal); letter-spacing:.12em; text-transform:uppercase; } @keyframes blink { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(1.6)} } .hero h1 { font-family:'Montserrat',sans-serif; font-weight:900; font-size:54px; line-height:1.08; color:var(--white); margin-bottom:22px; } .hero h1 em { font-style:italic; color:var(--teal); } .hero p { font-size:16px; line-height:1.8; color:var(--mist); max-width:460px; margin-bottom:36px; } .hero-ctas { display:flex; gap:14px; align-items:center; } /* TICKER */ .ticker { background:var(--teal); padding:13px 0; overflow:hidden; } .ticker-track { display:flex; gap:48px; animation:scroll 28s linear infinite; white-space:nowrap; } @keyframes scroll { from{transform:translateX(0)} to{transform:translateX(-50%)} } .ticker-item { font-family:'Montserrat',sans-serif; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--navy); display:flex; align-items:center; gap:10px; } .ticker-item .sep { opacity:.35; } /* SECTION SHARED */ .section-label { display: inline-flex; align-items: center; gap: 7px; font-size:10px; font-weight:700; color:var(--teal); letter-spacing:.16em; text-transform:uppercase; margin-bottom:18px; background: rgba(65,190,176,.08); border: 1px solid rgba(65,190,176,.22); border-radius: 40px; padding: 5px 13px 5px 9px; } .section-label::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--teal); flex-shrink:0; box-shadow: 0 0 6px rgba(65,190,176,.9); } .section-h2 { font-family:'Montserrat',sans-serif; font-weight:900; font-size:42px; line-height:1.15; color:var(--white); margin-bottom:16px; } .section-h2 em { font-style:italic; background: linear-gradient(135deg, #41BEB0 0%, #7dd9d1 60%, #41BEB0 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 0 18px rgba(65,190,176,.35)); } .section-sub { font-size:16px; color:var(--steel); line-height:1.75; max-width:540px; margin-bottom:52px; } /* PROCESS */ .process { padding:96px 0; } .process-inner { text-align:center; } .process-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:56px; position:relative; } .process-steps::before { content:''; position:absolute; top:35px; left:17%; right:17%; height:1px; background:linear-gradient(90deg,transparent,var(--teal-border) 30%,var(--teal-border) 70%,transparent); } .pstep { text-align:center; } .pstep-num { width:70px; height:70px; border-radius:50%; background:var(--teal-glow); border:1px solid var(--teal-border); display:flex; align-items:center; justify-content:center; font-family:'JetBrains Mono',monospace; font-size:18px; color:var(--teal); margin:0 auto 18px; } .pstep h4 { font-family:'Montserrat',sans-serif; font-weight:700; font-size:17px; color:var(--white); margin-bottom:10px; } .pstep p { font-size:13px; color:var(--steel); line-height:1.7; } /* CLIENT WIN */ .client-win { padding:80px 0; background:var(--navy-3); } .win-card { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; background:linear-gradient(135deg,rgba(65,190,176,.07) 0%,rgba(0,111,135,.06) 100%); border:1px solid var(--teal-border); border-radius:24px; padding:56px; position:relative; overflow:hidden; } .win-card::after { content:''; position:absolute; top:-60px; right:-60px; width:280px; height:280px; background:radial-gradient(circle,rgba(65,190,176,.07) 0%,transparent 70%); pointer-events:none; } .win-label { font-size:10px; font-weight:600; color:var(--teal); letter-spacing:.16em; text-transform:uppercase; margin-bottom:14px; } .win-quote { font-family:'Montserrat',sans-serif; font-size:22px; font-weight:700; color:var(--white); line-height:1.45; margin-bottom:18px; } .win-meta { font-size:12px; color:var(--steel); line-height:1.7; } .win-stats { display:grid; grid-template-columns:1fr 1fr; gap:16px; } .wstat { background:rgba(12,17,29,.85); border:1px solid var(--teal-border); border-radius:12px; padding:18px; } .wstat-val { font-family:'Montserrat',sans-serif; font-weight:900; font-size:32px; color:var(--teal); line-height:1; } .wstat-lbl { font-size:11px; color:var(--steel); margin-top:5px; } /* CTA */ .cta-sec { padding:120px 0; text-align:center; position:relative; overflow:hidden; } .cta-sec::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at center,rgba(65,190,176,.055) 0%,transparent 68%); } .cta-sec h2 { font-family:'Montserrat',sans-serif; font-weight:900; font-size:50px; color:var(--white); line-height:1.15; margin-bottom:18px; position:relative; } .cta-sec h2 em { font-style:italic; color:var(--teal); } .cta-sec p { font-size:17px; color:var(--steel); max-width:520px; margin:0 auto 44px; line-height:1.75; position:relative; } .cta-btns { display:flex; justify-content:center; gap:14px; position:relative; } .cta-trust { display:flex; justify-content:center; gap:28px; margin-top:36px; flex-wrap:wrap; position:relative; } .trust-item { display:flex; align-items:center; gap:7px; font-size:12px; color:var(--steel); } .trust-item::before { content:'✓'; color:var(--teal); font-weight:700; } /* FOOTER */ footer { background:#050910; border-top:1px solid rgba(58,66,82,.35); padding:36px 0; } .footer-inner { display:flex; align-items:center; justify-content:space-between; } .footer-copy { font-size:11px; color:var(--steel); } .footer-links { display:flex; gap:20px; list-style:none; } .footer-links a { font-size:11px; color:var(--steel); text-decoration:none; transition:color .2s; } .footer-links a:hover { color:var(--teal); } /* SCROLL ANIMATIONS */ .fadein { opacity:0; transform:translateY(22px); transition:opacity .65s ease,transform .65s ease; } .fadein.vis { opacity:1; transform:translateY(0); } .fadein-d1{transition-delay:.1s} .fadein-d2{transition-delay:.2s} .fadein-d3{transition-delay:.3s}