/* Fixed Official Brand Color Variables */ :root { --main-teal: #006180; --muted-gold: #b89a46; --btn-teal: #017D8B; --bg-warm-grey: #f7f5f0; --bg-card-white: #ffffff; --hover-light-grey: #f6f6f6; --text-muted: #666666; --text-dark: #292929; --text-canvas-grey: #D7D7D7; --btn-dark: #515151; } /* Global Base Style - All White Page Background */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, Helvetica, sans-serif !important; } body { background-color: #ffffff; color: var(--text-muted); line-height: 1.7; } h1, h2, h3 { font-weight: bold !important; text-align: center; } .container { width: 90%; max-width: 1200px; margin: 0 auto; padding: 0 15px; } .section-divider { height: 1px; background: linear-gradient(to right, transparent, var(--muted-gold), transparent); width: 120px; margin: 30px auto; } /* Core Trinity Card Style (Same as Attached Reference Image) */ .trinity-top-card { background: var(--bg-card-white); border-radius: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.07); overflow: hidden; transition: all 0.3s ease; } .trinity-top-card:hover { background-color: var(--hover-light-grey); transform: translateY(-4px); box-shadow: 0 8px 22px rgba(0,0,0,0.09); } /* Full top image for 3 pillar cards */ .card-full-img { width: 100%; height: 260px; object-fit: cover; display:block; } .card-inner-content { padding: 32px 28px; } /* Normal General Cards (Ecosystem + Platform) */ .common-card { background: var(--bg-card-white); border-radius:16px; box-shadow:0 3px 10px rgba(0,0,0,0.05); padding:32px 28px; transition:all 0.3s ease; } .common-card:hover { background-color: var(--hover-light-grey); transform: translateY(-3px); box-shadow:0 7px 18px rgba(0,0,0,0.07); } /* Utility Text & Layout */ .text-main-teal { color: var(--main-teal); } .text-muted-gold { color: var(--muted-gold); } .text-warm-bg { color: var(--bg-warm-grey); } .text-dark { color: var(--text-dark); } .text-canvas-grey { color: var(--text-canvas-grey); } .py-16 { padding: 4rem 0; } .py-20 { padding: 5rem 0; } .mb-4 { margin-bottom: 1rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2rem; } .mb-12 { margin-bottom: 3rem; } .mb-16 { margin-bottom: 4rem; } .mr-3 { margin-right: 0.75rem; } .mr-6 { margin-right: 1.5rem; } .flex { display: flex; } .grid { display: grid; } .grid-cols-3 { grid-template-columns: repeat(3,1fr); gap:3rem; } .grid-cols-2 { grid-template-columns: repeat(2,1fr); gap:3rem; } .grid-process-2col { grid-template-columns: repeat(2,1fr); gap:2rem; } .items-center { align-items: center; } .text-center { text-align: center; } .leading-relaxed { line-height:1.65; } /* Process Number Badge */ .process-number { width:40px; height:40px; border-radius:50%; background:var(--muted-gold); color:#fff; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; margin-right:18px; } .process-text { color:var(--text-dark); font-weight:normal !important; } /* CTA Button Style */ .cta-wrap { display:flex; gap:24px; justify-content:center; flex-wrap:wrap; margin-top:32px; } .btn-solid { background:var(--btn-dark); color:var(--bg-warm-grey); border:none; padding:15px 32px; border-radius:3px; font-size:14px; cursor:pointer; text-decoration: none !important; transition: all 0.3s ease; } .btn-solid:hover { background:var(--muted-gold); color:var(--bg-warm-grey); text-decoration: none !important; } .btn-outline { background:var(--btn-dark); color:var(--bg-warm-grey); border:1px solid var(--btn-dark); padding:15px 32px; border-radius:3px; font-size:14px; cursor:pointer; text-decoration: none !important; transition: all 0.3s ease; } .btn-outline:hover { background:var(--muted-gold); color:var(--bg-warm-grey); border-color:var(--muted-gold); text-decoration: none !important; } /* Mobile Responsive */ @media(max-width:768px){ .grid-cols-3,.grid-cols-2,.grid-process-2col {grid-template-columns:1fr;} }