body { background-color: white; /* Ensure the iframe has a white background */ } :root { --accent: #EF8F23; --ivjo-green: #97B91C; --ivjo-blue-60: rgba(50,153,202,0.6); --ivjo-light: #6EC1E4; --gray-mid: #ddd; --gray-dark: #333; --text: #1a1a1a; --font: 'Segoe UI', Arial, sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; } body { background: transparent; font-family: var(--font); color: var(--text); line-height: 1.6; } a { text-decoration: none; color: var(--accent); } .container { max-width: 1140px; margin: 2rem auto; padding: 0 1rem; display: flex; gap: 2rem; } .content { flex: 1; background: #fff; border: 1px solid var(--gray-mid); border-radius: 4px; padding: 2rem; min-width: 0; } .content h2 { font-size: 1.26rem; color: var(--gray-dark); margin: 2rem 0 .7rem; font-weight: 600; border-left: 4px solid var(--accent); padding-left: .8rem; } .content p { margin-bottom: 1rem; font-size: 1.08rem; } .mission-list { margin: 1rem 0 1.3rem 1.6em; font-size: 1.07rem; color: #444; } .mission-list li { margin-bottom: .5em; list-style: none; position: relative; } .mission-list li::before { content: "➔"; color: var(--accent); display: inline-block; width: 1.2em; margin-left: -1.5em; } /* Team */ .content .team-grid { display: flex; flex-wrap: wrap; gap: 1.8rem 2.1rem; margin-top: 1.5rem; margin-bottom: 1.5rem; } .teamperson { text-align: center; width: 144px; } .teamperson img { width: 110px; height: 110px; object-fit: cover; border-radius: 50%; border: 3px solid var(--accent); margin-bottom: .6em; } .teamperson .name { font-weight: 600; color: var(--gray-dark); font-size: 1.06rem; display: block; } .teamperson .role { color: var(--accent); font-size: .97rem; margin-top: .2em; display: block; } /* Contact */ .contactbox { background: #fff; border-left: 4px solid var(--accent); padding: 1.2em 1.3em; margin: 1.8em 0 .3em; font-size: 1.04rem; color: #333; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.1); max-width: 480px; } .content .cta { display: inline-block; margin: 1.2em 0 .4em; background: var(--accent); color: #fff; padding: .7rem 1.6rem; border-radius: 3px; font-weight: 600; transition: background .2s; } .content .cta:hover { background: #d67b1e; } /* Sidebar */ .sidebar { width: 280px; flex-shrink: 0; display: flex; flex-direction: column; gap: 1.5rem; position: sticky; top: 2rem; } .card { background: #fff; border: 1px solid var(--gray-mid); border-radius: 4px; overflow: hidden; } .card-header { background: var(--gray-mid); color: var(--gray-dark); padding: .8rem 1rem; font-size: 1rem; font-weight: 600; } .card-section { padding: .6rem 1rem; font-size: .95rem; font-weight: 600; color: var(--accent); border-bottom: 1px solid var(--gray-mid); } .card ul { list-style: none; } .card ul li a { display: block; padding: .6rem 1rem; font-size: .94rem; color: var(--gray-dark); transition: background .15s; } .card ul li a:hover { background: var(--gray-light); } .card.ivjo { border-color: var(--ivjo-green); } .card.ivjo .card-header { background: var(--ivjo-green); color: #fff; } .card.ivjo .card-section { background: var(--ivjo-blue-60); color: #fff; border-bottom-color: var(--ivjo-light); } .card.ivjo ul li a { color: var(--ivjo-green); } .card.ivjo ul li a:hover { background: var(--ivjo-light); color: #fff; } @media (max-width:900px) { .container { flex-direction: column; } .sidebar { position: static; width:100%; } }