========================================================= */ .aboutRoot{ /* isolate from global styles */ color: rgba(255,255,255,.92); background: radial-gradient(1200px 700px at 15% -10%, rgba(179,18,43,.18), transparent 55%), radial-gradient(900px 600px at 85% 0%, rgba(214,178,94,.14), transparent 55%), linear-gradient(180deg, #050607, #0A0D0F); } /* Make sure text styles don't inherit odd global rules */ .aboutRoot h1, .aboutRoot h2, .aboutRoot h3, .aboutRoot p, .aboutRoot li{ color: inherit; } /* Container: don't trust your global .container here */ .aboutRoot .container{ width: min(1180px, calc(100% - 48px)); margin-inline: auto; } /* ---------- HERO ---------- */ .aboutRoot .about-hero{ padding: clamp(70px, 8vw, 120px) 0 clamp(48px, 6vw, 84px); position: relative; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.10); } .aboutRoot .about-hero::after{ content:""; position:absolute; inset:auto 0 0 0; height:1px; background: linear-gradient(90deg, transparent, rgba(214,178,94,.55), rgba(179,18,43,.25), transparent); opacity:.75; pointer-events:none; } .aboutRoot .about-kicker{ display:inline-flex; align-items:center; gap:10px; padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); letter-spacing: .24em; text-transform: uppercase; font-size: 12px; color: rgba(255,255,255,.72); margin-bottom: 18px; } .aboutRoot .about-kicker::before{ content:""; width:10px; height:10px; border-radius:999px; background: radial-gradient(circle at 30% 30%, #F1D58A, #D6B25E); box-shadow: 0 0 0 5px rgba(214,178,94,.10); } .aboutRoot .about-hero h1{ font-size: clamp(40px, 5vw, 66px); line-height: 1.04; letter-spacing: -0.9px; margin: 0 0 16px; font-weight: 850; } .aboutRoot .about-hero .gold{ background: linear-gradient(90deg, #F1D58A, #D6B25E); -webkit-background-clip: text; background-clip: text; color: transparent; } .aboutRoot .about-lead{ max-width: 75ch; margin: 0; font-size: 17px; line-height: 1.75; color: rgba(255,255,255,.70); } /* ---------- SECTION SYSTEM ---------- */ .aboutRoot .about-section{ padding: clamp(62px, 7vw, 104px) 0; } .aboutRoot .about-band{ border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); background: radial-gradient(1100px 700px at 50% 0%, rgba(255,255,255,.03), transparent 62%), linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)); } .aboutRoot .section-header{ max-width: 760px; margin-bottom: 34px; } .aboutRoot .section-header h2{ font-size: clamp(26px, 3vw, 40px); line-height: 1.12; letter-spacing: -0.45px; margin: 0 0 10px; font-weight: 800; } .aboutRoot .section-header p{ margin: 0; font-size: 15.5px; line-height: 1.75; color: rgba(255,255,255,.70); } /* ---------- FEATURE GRID (premium panels) ---------- */ .aboutRoot .feature-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .aboutRoot .feature{ border-radius: 28px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); box-shadow: 0 16px 34px rgba(0,0,0,.45); padding: 24px; position: relative; overflow: hidden; } .aboutRoot .feature::after{ content:""; position:absolute; inset:auto -140px -160px auto; width: 420px; height: 420px; background: radial-gradient(circle at 30% 30%, rgba(214,178,94,.14), transparent 62%); transform: rotate(10deg); opacity:.9; pointer-events:none; } .aboutRoot .feature h3{ margin: 0 0 10px; font-size: 18px; letter-spacing: -0.2px; font-weight: 800; } .aboutRoot .feature p{ margin: 0; color: rgba(255,255,255,.70); line-height: 1.75; font-size: 14.8px; } /* ---------- SPLIT ---------- */ .aboutRoot .split{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 4vw, 52px); align-items: start; } .aboutRoot .clean-list{ list-style:none; margin: 0; padding: 0; border-radius: 28px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.02); overflow:hidden; } .aboutRoot .clean-list li{ padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.80); display:flex; gap: 12px; } .aboutRoot .clean-list li:last-child{ border-bottom: none; } .aboutRoot .clean-list li::before{ content:""; width:10px; height:10px; margin-top: 6px; border-radius:999px; background: radial-gradient(circle at 30% 30%, #F1D58A, #D6B25E); box-shadow: 0 0 0 5px rgba(214,178,94,.10); flex: 0 0 auto; } .aboutRoot .muted{ color: rgba(255,255,255,.62); opacity: 1; /* override your earlier “opacity only” approach */ line-height: 1.75; } /* ---------- BOUNDARIES (fix the white slabs) ---------- */ .aboutRoot .boundary-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .aboutRoot .boundary{ border-radius: 28px; border: 1px solid rgba(255,255,255,.12); background: radial-gradient(900px 520px at 20% 0%, rgba(179,18,43,.12), transparent 62%), radial-gradient(760px 520px at 90% 10%, rgba(214,178,94,.10), transparent 60%), rgba(255,255,255,.03); box-shadow: 0 18px 50px rgba(0,0,0,.55); padding: 24px; } .aboutRoot .boundary strong{ display:block; margin-bottom: 10px; font-size: 16px; letter-spacing: -0.15px; font-weight: 850; } .aboutRoot .boundary p{ margin: 0; color: rgba(255,255,255,.70); line-height: 1.75; font-size: 14.8px; } /* ---------- RESPONSIBLE ---------- */ .aboutRoot .responsible{ max-width: 760px; border-radius: 28px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.02); box-shadow: 0 14px 34px rgba(0,0,0,.45); padding: 24px; } .aboutRoot .responsible p{ margin: 0 0 12px; color: rgba(255,255,255,.72); line-height: 1.75; } .aboutRoot .responsible p:last-child{ margin-bottom: 0; } /* ---------- Responsive ---------- */ @media (max-width: 1020px){ .aboutRoot .feature-grid, .aboutRoot .boundary-grid, .aboutRoot .split{ grid-template-columns: 1fr; } } /* FIX: invisible links inside the Responsible box */ .aboutRoot .responsible a{ color: rgba(241, 213, 138, 0.95); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: rgba(214, 178, 94, 0.55); /* kill any gradient/clip/transparent text effects inherited globally */ background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; -webkit-text-fill-color: currentColor !important; } .aboutRoot .responsible a:hover{ color: rgba(255,255,255,0.92); text-decoration-color: rgba(241, 213, 138, 0.85); }