/* ========================================================= TECH GREEN STEPS — Careers Page Colors, spacing & type matched to the brand reference. Icons throughout use Font Awesome (see CDN link). ========================================================= */ :root { --tgs-green-dark: #0b3d2e; /* primary brand dark green (headings, buttons, footer) */ --tgs-green-darker: #082e23; /* hover state */ --tgs-gold: #c9a227; /* accent gold/mustard (rule + tagline bar) */ --tgs-text-body: #4a4f4d; /* paragraph text */ --tgs-bg-panel: #f7f7f7; /* left panel off-white background */ --tgs-bg-white: #ffffff; --tgs-border: #e7e7e7; --font-display: 'Poppins', 'Segoe UI', sans-serif; --font-body: 'Inter', 'Segoe UI', sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-body); background: var(--tgs-bg-white); -webkit-font-smoothing: antialiased; } /* --------------------------------------------------------- HERO SECTION --------------------------------------------------------- */ .careers-hero { width: 100%; background: var(--tgs-bg-panel); } .careers-hero__inner { max-width: min(1600px, 94%); margin: 0 auto; display: grid; grid-template-columns: minmax(320px, 460px) 1fr; align-items: center; min-height: 480px; } /* ---------------- LEFT: content ---------------- */ .careers-hero__content { padding: 64px 56px 64px 64px; } .careers-hero__title { font-family: var(--font-display); font-weight: 800; font-size: 56px; line-height: 1.05; color: var(--tgs-green-dark); letter-spacing: -0.5px; } .careers-hero__subtitle { font-family: var(--font-display); font-weight: 600; font-size: 20px; color: var(--tgs-green-dark); margin-top: 14px; } .careers-hero__rule { display: block; width: 56px; height: 3px; background: var(--tgs-gold); margin: 18px 0 20px; border-radius: 2px; } .careers-hero__text { font-family: var(--font-body); font-size: 15.5px; line-height: 1.7; color: var(--tgs-text-body); max-width: 380px; margin-bottom: 32px; } /* ---------------- CTA button ---------------- */ .careers-hero__cta { display: inline-flex; align-items: center; gap: 10px; background: var(--tgs-green-dark); color: #ffffff; font-family: var(--font-body); font-weight: 600; font-size: 15px; text-decoration: none; padding: 14px 26px; border-radius: 8px; border: 1px solid var(--tgs-green-dark); transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease; box-shadow: 0 6px 16px rgba(11, 61, 46, 0.18); } .careers-hero__cta-icon { flex-shrink: 0; color: #ffffff; font-size: 16px; } .careers-hero__cta-arrow { flex-shrink: 0; color: #ffffff; font-size: 13px; transition: transform 0.25s ease; } .careers-hero__cta:hover { background: var(--tgs-green-darker); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(11, 61, 46, 0.26); } .careers-hero__cta:hover .careers-hero__cta-arrow { transform: translateX(4px); } .careers-hero__cta:focus-visible { outline: 3px solid var(--tgs-gold); outline-offset: 3px; } .careers-hero__cta:active { transform: translateY(0); } /* ---------------- RIGHT: media ---------------- */ .careers-hero__media { position: relative; height: 100%; min-height: 480px; background: var(--tgs-bg-white); overflow: hidden; } .careers-hero__image { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* ========================================================= RESPONSIVE — hero ========================================================= */ @media (max-width: 1024px) { .careers-hero__title { font-size: 46px; } .careers-hero__content { padding: 48px 40px; } } @media (max-width: 860px) { .careers-hero__inner { grid-template-columns: 1fr; } .careers-hero__media { order: -1; min-height: 320px; } .careers-hero__content { padding: 40px 28px 48px; } .careers-hero__text { max-width: 100%; } } @media (max-width: 480px) { .careers-hero__title { font-size: 38px; } .careers-hero__subtitle { font-size: 17px; } .careers-hero__media { min-height: 260px; } } /* ========================================================= CURRENT OPENINGS SECTION ========================================================= */ .openings { width: 100%; background: var(--tgs-bg-white); padding: 88px 0; } .openings__inner { max-width: min(1600px, 94%); margin: 0 auto; padding: 0 64px; } .openings__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 44px; } .openings__title { font-family: var(--font-display); font-weight: 700; font-size: 30px; color: var(--tgs-green-dark); } .openings__rule { display: block; width: 44px; height: 3px; background: var(--tgs-gold); margin: 12px 0 14px; border-radius: 2px; } .openings__subtitle { font-family: var(--font-body); font-size: 15px; color: var(--tgs-text-body); } .openings__view-all { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; margin-top: 6px; font-family: var(--font-body); font-weight: 600; font-size: 14.5px; color: var(--tgs-green-dark); text-decoration: none; transition: gap 0.25s ease, color 0.25s ease; } .openings__view-all i { font-size: 13px; transition: transform 0.25s ease; } .openings__view-all:hover { color: var(--tgs-green-darker); } .openings__view-all:hover i { transform: translateX(4px); } /* ---------------- job card grid ---------------- */ .openings__grid--single { display: flex; justify-content: flex-start; } /* ---------------- job card ---------------- */ .job-card { display: flex; gap: 24px; align-items: flex-start; width: 100%; max-width: 760px; background: var(--tgs-bg-white); border: 1px solid var(--tgs-border); border-radius: 16px; padding: 32px; box-shadow: 0 4px 14px rgba(11, 61, 46, 0.06); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .job-card:hover { transform: translateY(-4px); box-shadow: 0 18px 34px rgba(11, 61, 46, 0.14); border-color: rgba(11, 61, 46, 0.25); } .job-card__icon { flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #eef4f1; color: var(--tgs-green-dark); font-size: 20px; transition: background 0.3s ease, transform 0.3s ease; } .job-card:hover .job-card__icon { background: var(--tgs-green-dark); color: #ffffff; transform: scale(1.06); } .job-card__body { flex: 1 1 auto; min-width: 0; } .job-card__top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 12px; } .job-card__title { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--tgs-green-dark); } .job-card__badges { display: flex; gap: 8px; flex-wrap: wrap; } .job-card__badge { font-family: var(--font-body); font-weight: 600; font-size: 11.5px; letter-spacing: 0.2px; padding: 4px 11px; border-radius: 999px; white-space: nowrap; } .job-card__badge--fresher { background: #eef4f1; color: var(--tgs-green-dark); } .job-card__badge--experienced { background: #fbf2df; color: #8a6a14; } .job-card__meta { display: flex; flex-wrap: wrap; gap: 18px; list-style: none; margin-bottom: 16px; } .job-card__meta li { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: 13.5px; color: var(--tgs-text-body); } .job-card__meta i { color: var(--tgs-gold); font-size: 13px; flex-shrink: 0; } .job-card__desc { font-family: var(--font-body); font-size: 14.5px; line-height: 1.7; color: var(--tgs-text-body); max-width: 560px; } @media (max-width: 640px) { .openings { padding: 64px 0; } .openings__inner { padding: 0 24px; } .openings__header { flex-direction: column; align-items: flex-start; } .job-card { flex-direction: column; padding: 24px; } } /* ========================================================= INTERNSHIP PROGRAM SECTION ========================================================= */ .internship { width: 100%; background: var(--tgs-bg-panel); } .internship__inner { max-width: min(1600px, 94%); margin: 0 auto; display: grid; grid-template-columns: minmax(320px, 460px) 1fr; align-items: center; min-height: 460px; } /* ---------------- LEFT: content ---------------- */ .internship__content { padding: 64px 56px 64px 64px; } .internship__title { font-family: var(--font-display); font-weight: 700; font-size: 30px; color: var(--tgs-green-dark); } .internship__rule { display: block; width: 44px; height: 3px; background: var(--tgs-gold); margin: 12px 0 18px; border-radius: 2px; } .internship__text { font-family: var(--font-body); font-size: 15px; line-height: 1.7; color: var(--tgs-text-body); max-width: 400px; margin-bottom: 26px; } .internship__list { list-style: none; display: flex; flex-direction: column; gap: 6px; } .internship__list li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px; border: 1px solid transparent; font-family: var(--font-body); font-size: 14.5px; font-weight: 500; color: var(--tgs-text-body); transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } .internship__list li:hover { background: var(--tgs-bg-white); border-color: var(--tgs-border); box-shadow: 0 6px 16px rgba(11, 61, 46, 0.08); transform: translateX(4px); } .internship__list i { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--tgs-green-dark); color: #ffffff; font-size: 11px; transition: background 0.25s ease, transform 0.25s ease; } .internship__list li:hover i { background: var(--tgs-gold); transform: scale(1.1); } /* ---------------- RIGHT: media ---------------- */ .internship__media { position: relative; height: 100%; min-height: 460px; background: var(--tgs-bg-white); overflow: hidden; box-shadow: inset 0 0 0 1px var(--tgs-border); } .internship__image { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 0.5s ease; } .internship__media:hover .internship__image { transform: scale(1.03); } @media (max-width: 1024px) { .internship__title { font-size: 26px; } .internship__content { padding: 48px 40px; } } @media (max-width: 860px) { .internship__inner { grid-template-columns: 1fr; } .internship__media { order: -1; min-height: 300px; } .internship__content { padding: 40px 28px 48px; } .internship__text { max-width: 100%; } } @media (max-width: 480px) { .internship__title { font-size: 24px; } .internship__media { min-height: 240px; } } /* ========================================================= WORK WITH US SECTION ========================================================= */ .work-with-us { width: 100%; background: var(--tgs-bg-white); padding: 88px 0; } .work-with-us__inner { max-width: min(1600px, 94%); margin: 0 auto; padding: 0 64px; } .work-with-us__header { text-align: center; max-width: 640px; margin: 0 auto 52px; } .work-with-us__title { font-family: var(--font-display); font-weight: 700; font-size: 30px; color: var(--tgs-green-dark); } .work-with-us__rule { display: block; width: 44px; height: 3px; background: var(--tgs-gold); margin: 12px auto 16px; border-radius: 2px; } .work-with-us__subtitle { font-family: var(--font-body); font-size: 15px; line-height: 1.7; color: var(--tgs-text-body); } /* ---------------- layout: grid + quote ---------------- */ .work-with-us__content { display: grid; grid-template-columns: 1fr 300px; align-items: stretch; gap: 32px; } .work-with-us__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } /* ---------------- value card ---------------- */ .value-card { background: var(--tgs-bg-white); border: 1px solid var(--tgs-border); border-radius: 16px; padding: 28px 20px; text-align: center; box-shadow: 0 4px 14px rgba(11, 61, 46, 0.06); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .value-card:hover { transform: translateY(-6px); box-shadow: 0 18px 34px rgba(11, 61, 46, 0.14); border-color: rgba(11, 61, 46, 0.25); } .value-card__icon { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #eef4f1; color: var(--tgs-green-dark); font-size: 24px; transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease; } .value-card:hover .value-card__icon { background: var(--tgs-green-dark); color: #ffffff; transform: scale(1.08) rotate(-4deg); } .value-card__title { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--tgs-green-dark); margin-bottom: 10px; } .value-card__text { font-family: var(--font-body); font-size: 13.5px; line-height: 1.65; color: var(--tgs-text-body); } /* ---------------- quote card ---------------- */ .work-with-us__quote { background: var(--tgs-green-dark); border-radius: 16px; padding: 32px 28px; display: flex; flex-direction: column; justify-content: center; box-shadow: 0 10px 28px rgba(11, 61, 46, 0.22); transition: transform 0.3s ease, box-shadow 0.3s ease; } .work-with-us__quote:hover { transform: translateY(-6px); box-shadow: 0 18px 38px rgba(11, 61, 46, 0.3); } .work-with-us__quote-icon { color: var(--tgs-gold); font-size: 26px; margin-bottom: 14px; } .work-with-us__quote-text { font-family: var(--font-body); font-size: 15px; line-height: 1.7; color: #ffffff; margin-bottom: 20px; } .work-with-us__quote-rule { display: block; width: 36px; height: 2px; background: var(--tgs-gold); margin-bottom: 18px; border-radius: 2px; } .work-with-us__quote-tag { font-family: var(--font-display); font-weight: 600; font-size: 14.5px; line-height: 1.6; color: #ffffff; opacity: 0.92; } /* ========================================================= RESPONSIVE — Work With Us ========================================================= */ @media (max-width: 1024px) { .work-with-us__content { grid-template-columns: 1fr; } .work-with-us__grid { grid-template-columns: repeat(2, 1fr); } .work-with-us__quote { order: -1; } } @media (max-width: 640px) { .work-with-us { padding: 64px 0; } .work-with-us__inner { padding: 0 24px; } .work-with-us__grid { grid-template-columns: 1fr; } }