/* ========== Theme Tokens (easy future theme switch) ========== */ :root { --clr-bg: #ffffff; --clr-surface: #f7f7f7; --clr-text: #2f2f2f; --clr-muted: #6a6a6a; --clr-primary: #d81736; /* brand red */ --clr-accent: #222222; --maxw: 1200px; --radius: 10px; --shadow-sm: 0 6px 20px rgba(0, 0, 0, 0.08); --shadow-lg: 0 25px 80px rgba(0, 0, 0, 0.18); /* Professional spacing scale */ --space-xs: 8px; --space-sm: 16px; --space-md: 24px; --space-lg: 32px; --space-xl: 48px; --space-2xl: 64px; --space-3xl: 80px; --space-4xl: 96px; /* Dynamic navbar height - set by JavaScript */ --navbar-height: 64px; /* fallback value */ } /* Optional dark theme hook (toggle by adding `.theme-dark` to ) */ html.theme-dark { --clr-bg: #0f1012; /* deep neutral slate */ --clr-surface: #15171a; /* card surface */ --clr-text: #e6e8ea; /* primary text */ --clr-muted: #b1b6bb; /* secondary text */ --clr-accent: #e6e8ea; /* nav link color */ --shadow-sm: 0 6px 20px rgba(0, 0, 0, 0.5); --shadow-lg: 0 25px 80px rgba(0, 0, 0, 0.7); } /* ========== Base ========== */ * { box-sizing: border-box; } html, body { height: 100%; } html { scroll-behavior: smooth; } body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif; color: var(--clr-text); background: var(--clr-bg); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: opacity 0.18s ease; overflow-x: hidden; } html.app-hidden body { opacity: 0; } img { width: 100%; height: auto; display: block; } .container { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--space-md); } .section { padding: var(--space-3xl) 0; } .section--tight { padding: var(--space-lg) 0; } .section--loose { padding: var(--space-4xl) 0; } h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.02em; } /* Fluid headings scale with viewport width and a touch of height */ h1 { font-size: clamp(28px, 4.6vw + 0.4vh, 64px); margin-bottom: var(--space-md); } h2 { font-size: clamp(22px, 3.2vw + 0.2vh, 40px); margin-bottom: var(--space-md); } h3 { font-size: clamp(16px, 2.2vw + 0.2vh, 24px); margin-bottom: var(--space-sm); } /* Section headings need more space above */ .section h2:first-child { margin-bottom: var(--space-lg); } p { color: #555555; margin: 0 0 var(--space-sm); line-height: 1.6; } .btn { appearance: none; border: 0; cursor: pointer; background: var(--clr-primary); color: #fff; padding: var(--space-sm) var(--space-md); border-radius: 6px; font-weight: 700; transition: transform 0.08s ease, box-shadow 0.2s ease, opacity 0.2s ease; display: inline-block; text-decoration: none; margin: var(--space-sm) 0; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); opacity: 0.9; } /* Inline icon in buttons */ .btn .icon-inline { width: 18px; height: 18px; margin-left: 8px; vertical-align: middle; filter: invert(1); /* ensure white */ display: inline-block; } /* ========== Reusable bits ========== */ .card { background: var(--clr-surface); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; padding: var(--space-md); } .hero { position: relative; color: #111; min-height: 340px; padding: var(--space-md); background-size: cover; background-position: center; isolation: isolate; display: flex; align-items: center; } .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.35) 70% ); z-index: 0; } .hero__inner { position: relative; z-index: 1; color: #fff; text-align: left; } .hero__kicker { font-weight: 700; letter-spacing: 0.2px; margin-bottom: var(--space-xs); opacity: 0.9; } /* Hero titles scale a bit more aggressively across sizes */ .hero__title { font-size: clamp(28px, 4.8vw + 0.6vh, 72px); line-height: 1.05; color: #ffffff; font-weight: 900; max-width: 60%; } /* Optional: fluid paragraph sizing within hero blocks */ .hero p, .hero__subtitle { font-size: clamp(14px, 1.2vw + 0.3vh, 20px); } /* Dark theme component tweaks */ html.theme-dark .navbar--scrolled { background: rgba(10, 11, 13, 0.8); backdrop-filter: blur(12px); box-shadow: var(--shadow-sm); } html.theme-dark .nav-link { color: var(--clr-accent); } html.theme-dark .nav-link:hover { color: var(--clr-primary); } html.theme-dark .hamburger__line { background: var(--clr-accent); } html.theme-dark .mobile-nav { background: rgba(15, 16, 18, 0.95); backdrop-filter: blur(10px); } html.theme-dark .backtotop { background: #1b1d20; border-color: #2a2d31; color: var(--clr-text); } html.theme-dark .backtotop::after { filter: invert(1); } html.theme-dark .card { background: var(--clr-surface); } html.theme-dark .sector-card { background: var(--clr-surface); } html.theme-dark .sector-card span { background: rgba(21, 23, 26, 0.95); color: var(--clr-text); border-top-color: #2a2d31; } html.theme-dark .sector-card:hover span { background: rgba(21, 23, 26, 0.85); } html.theme-dark .action-card::before { background: linear-gradient(45deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.45)); } html.theme-dark .business-card { background: var(--clr-surface); } html.theme-dark .business-card-content h3 { color: var(--clr-text); } html.theme-dark .business-card-content p { color: var(--clr-muted); } html.theme-dark .cta-overlay { background: #1b1d20; border-top-color: var(--clr-primary); } html.theme-dark .footer { background: #141517; } html.theme-dark .footer__links li { color: #cfd3d7; } html.theme-dark .footer-link { color: #cfd3d7; } html.theme-dark .input, html.theme-dark .textarea { background: #0f1012; border-color: #2a2d31; color: var(--clr-text); } html.theme-dark .contact-form-section .input, html.theme-dark .contact-form-section .textarea { background: #1b1d20; border-bottom-color: #2a2d31; color: var(--clr-text); } html.theme-dark .map-container { box-shadow: var(--shadow-sm); } /* Dark hero text overrides for contrast on light hero images */ html.theme-dark .hero__title { color: #f0f2f5; } html.theme-dark .hero__subtitle { background: rgba(0, 0, 0, 0.4); color: #f3f4f6; } /* Contact hero tweaks for more character */ .hero--contact { align-items: flex-end; } .hero--contact .hero__inner { padding-bottom: var(--space-xl); } .hero--contact .hero__kicker { display: inline-block; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: var(--space-sm); } .hero--contact .hero__title { color: #ffffff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); } .hero__subtitle { max-width: 600px; margin-top: var(--space-xs); color: #1a1a1a; font-weight: 200; background: rgba(255, 255, 255, 0.7); display: inline-block; padding: 6px 10px; border-radius: 6px; } /* Sister-sites hero: lock consistent starting position regardless of title length */ .hero--sister { align-items: flex-start; /* top-align text block */ } .hero--sister .hero__inner { padding-top: calc(var(--navbar-height) + var(--space-2xl)); padding-bottom: var(--space-xl); max-width: 1200px; } .hero--sister .hero__title { max-width: 680px; /* consistent line length across pages */ } .hero--sister .hero__subtitle { max-width: 680px; } @media (max-width: 768px) { .hero--sister .hero__inner { padding-top: calc(var(--navbar-height) + var(--space-lg)); padding-bottom: var(--space-lg); } .hero--sister .hero__title, .hero--sister .hero__subtitle { max-width: 100%; } } .grid { display: grid; gap: var(--space-md); } .grid--2 { grid-template-columns: repeat(1, 1fr); } .grid--3 { grid-template-columns: repeat(1, 1fr); } .grid--4 { grid-template-columns: repeat(1, 1fr); } .grid--5 { grid-template-columns: repeat(2, 1fr); } @media (min-width: 760px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } .grid--5 { grid-template-columns: repeat(5, 1fr); } } @media (min-width: 1200px) { .grid--5 { grid-template-columns: repeat(5, 1fr); } } /* Inline divider bar used in designs */ .rule { height: 1px; background: #aaa9a9; margin: var(--space-2xl) 0; } /* Simple link underline accent like the design tabs */ .nav-underline { position: relative; padding-bottom: 14px; } .nav-underline--active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--clr-primary); border-radius: 2px; } /* Footer spacing below the injected footer image */ .footer-spacer { height: 24px; } /* Contact form */ .form { display: grid; gap: var(--space-md); } .form .row { display: grid; gap: var(--space-md); grid-template-columns: 1fr; } @media (min-width: 760px) { .form .row { grid-template-columns: 1fr 1fr; } } .input, .textarea { width: 100%; padding: var(--space-sm) 14px; border-radius: 4px; border: 1px solid #e1e1e1; background: #fff; color: var(--clr-text); font-size: 15px; } .textarea { min-height: 120px; resize: vertical; } /* Sticky back-to-top button (matches the tiny round in the comps) */ .backtotop { position: fixed; right: 18px; bottom: 18px; z-index: 50; width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; background: #fff; border: 1px solid #e7e7e7; box-shadow: var(--shadow-sm); color: var(--clr-text); text-decoration: none; } .backtotop:hover { transform: translateY(-2px); } .backtotop::after { content: ""; width: 18px; height: 18px; background: url("/assets/svg/icons/icon-up-arrow.svg") center/contain no-repeat; display: block; filter: none; } /* ===== Navbar ===== */ .navbar { background: transparent; box-shadow: none; position: fixed; top: 0; left: 0; right: 0; z-index: 1000; transition: background-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease; } .navbar--scrolled { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); box-shadow: var(--shadow-sm); } /* Transparent navbar allows full viewport usage */ /* Fade-in once injected (no spacer reserved to avoid CLS) */ #site-nav:not(.is-loaded) { opacity: 0; min-height: 0; } #site-nav.is-loaded { opacity: 1; transition: opacity 0.18s ease; } .navbar__inner { display: flex; align-items: center; justify-content: space-between; padding: 14px var(--space-md); } .navbar__actions { display: flex; align-items: center; gap: var(--space-md); } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--clr-accent); cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; padding: 0; } .theme-toggle svg { width: 20px; height: 20px; display: block; } .theme-toggle:hover { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.06); } html.theme-dark .theme-toggle:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.08); } .navbar__logo { display: flex; align-items: center; gap: var(--space-xs); font-weight: 700; color: var(--clr-accent); text-decoration: none; } .navbar__logo img { height: 48px; width: auto; display: block; /* Prevent layout shift during loading */ min-width: 113px; /* Adjusted for actual logo dimensions */ } .navbar__nav { display: flex; gap: var(--space-md); } .nav-link { color: var(--clr-accent); font-weight: 500; text-decoration: none; padding-bottom: 6px; position: relative; } .nav-link:hover { color: var(--clr-primary); } .nav-link--active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--clr-primary); border-radius: 2px; } /* Dark mode transparent navbar contrast handling */ html.theme-dark .navbar:not(.navbar--scrolled) .nav-link { color: #141414; } html.theme-dark .navbar:not(.navbar--scrolled) .nav-link:hover { color: var(--clr-primary); } html.theme-dark .navbar:not(.navbar--scrolled) .theme-toggle { color: #141414; } html.theme-dark .navbar.navbar--scrolled .nav-link { color: var(--clr-accent); } html.theme-dark .navbar.navbar--scrolled .nav-link:hover { color: var(--clr-primary); } html.theme-dark .navbar.navbar--scrolled .theme-toggle { color: var(--clr-accent); } .navbar__cta { font-size: 14px; padding: 10px 16px; text-decoration: none; } /* ===== Hamburger Menu ===== */ .hamburger { display: none; flex-direction: column; justify-content: center; align-items: center; width: 32px; height: 32px; background: none; border: none; cursor: pointer; padding: 4px; transition: transform 0.3s ease; } .hamburger__line { width: 24px; height: 2px; background: var(--clr-accent); border-radius: 2px; transition: all 0.3s ease; transform-origin: center; } .hamburger__line:not(:last-child) { margin-bottom: 5px; } /* Hamburger Animation to X */ .hamburger--active .hamburger__line:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger--active .hamburger__line:nth-child(2) { opacity: 0; transform: scaleX(0); } .hamburger--active .hamburger__line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ===== Mobile Navigation ===== */ .mobile-nav { position: fixed; top: var(--navbar-height); left: 0; right: 0; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); box-shadow: var(--shadow-lg); z-index: 999; max-height: 0; overflow: hidden; transition: max-height 0.3s ease, box-shadow 0.3s ease; } .mobile-nav--active { max-height: 100vh; } .mobile-nav__content { padding: var(--space-xl) var(--space-md); opacity: 0; transform: translateY(-10px); transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s; } .mobile-nav--active .mobile-nav__content { opacity: 1; transform: translateY(0); } .mobile-nav__links { display: flex; flex-direction: column; gap: var(--space-md); margin-bottom: var(--space-xl); } .mobile-nav__link { color: var(--clr-accent); font-weight: 600; font-size: 18px; text-decoration: none; padding: var(--space-sm) 0; border-bottom: 1px solid #f0f0f0; transition: color 0.2s ease; } .mobile-nav__link:hover { color: var(--clr-primary); } .mobile-nav__link:last-child { border-bottom: none; } .btn--mobile { width: 100%; text-align: center; padding: var(--space-md); font-size: 16px; } /* ===== Footer ===== */ .footer { background: #3c3c3c; color: #fff; padding: var(--space-xl) var(--space-md); } /* Prevent footer pop-in */ #site-footer { display: block; min-height: 120px; } /* Only pages tagged with .no-hero use flex layout to pin footer */ body.no-hero { display: flex; flex-direction: column; min-height: 100vh; } body.no-hero #site-footer { margin-top: auto; } #site-footer:not(.is-loaded) { opacity: 0; } #site-footer.is-loaded { opacity: 1; transition: opacity 0.18s ease; } .footer__inner { display: grid; gap: var(--space-lg); grid-template-columns: 1fr; } @media (min-width: 900px) { .footer__inner { grid-template-columns: 1fr 1fr 1fr; } } .footer__col h3 { font-size: 18px; margin-bottom: var(--space-sm); font-weight: 700; } .footer__logo { display: flex; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-sm); } .footer__logo img { height: 40px; } .footer__social { margin-top: var(--space-sm); } .footer__social span { display: block; font-size: 16px; font-weight: 600; margin-bottom: var(--space-xs); color: #ffffff; } .social-icons { display: flex; gap: var(--space-sm); margin-top: var(--space-xs); } .social-icon { display: inline-block; width: 32px; height: 32px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 16px; transition: background 0.2s ease; } .social-icon img { filter: invert(1); } .social-icon:hover { background: rgba(255, 255, 255, 0.2); } .footer__links { list-style: none; padding: 0; margin: 0; } .footer__links li { margin-bottom: 6px; color: #e0e0e0; font-size: 15px; } .footer-link { color: #e0e0e0; text-decoration: underline; } .footer-link:hover { color: #e0e0e0; text-decoration: underline; } .footer p { margin-bottom: var(--space-xs); line-height: 1.4; color: #e0e0e0; } /* ===== New Components ===== */ .sector-card { --sector-bar-height: 40px; display: flex; flex-direction: column; align-items: stretch; text-align: left; padding: 0; border-radius: var(--radius); background: var(--clr-bg); box-shadow: var(--shadow-sm); overflow: hidden; position: relative; transition: transform 0.2s ease, box-shadow 0.2s ease; } .sector-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } .sector-card img { width: 100%; height: 140px; object-fit: cover; border-radius: 0; margin: 0; } .sector-card span { position: absolute; bottom: 0; left: 0; right: 0; height: var(--sector-bar-height); display: flex; align-items: center; justify-content: flex-start; padding: 10px 12px; background: rgba(255, 255, 255); font-size: 14px; font-weight: 700; color: var(--clr-text); line-height: 1.3; border-top: 1px solid #e7e7e7; transition: all 0.35s ease; } .sector-card:hover span { height: 100%; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.85); padding: 14px 18px; font-size: 16px; text-align: center; border-top: 0; } .action-card { height: 200px; background-size: cover; background-position: center; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; transition: transform 0.2s ease; text-decoration: none; } .action-card:hover { transform: scale(1.02); } .action-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(45deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3)); } .action-card h3 { color: white; font-size: 24px; font-weight: 800; position: relative; z-index: 1; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); } .icon-circle { width: 40px; height: 40px; border-radius: 50%; background: var(--clr-primary); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-md); font-size: 18px; } .icon-circle img { width: 22px; height: 22px; filter: invert(1); /* make black icons appear white on brand circle */ display: block; } .mission-vision-card { display: flex; flex-direction: column; align-items: flex-start; padding: var(--space-md); background: var(--clr-bg); border-radius: var(--radius); box-shadow: var(--shadow-sm); } /* Core values circular icons (filled like mission/vision) */ .value-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; background: var(--clr-primary); margin-right: 8px; vertical-align: middle; box-shadow: var(--shadow-sm); } .value-icon img { width: 22px; height: 22px; display: block; filter: invert(1); } /* About page intro card tweaks */ .about-intro h2 { line-height: 1.15; margin-bottom: var(--space-sm); } .about-intro p { line-height: 1.9; max-width: 620px; } /* Overlap the first section with the hero */ .about-overlap { padding-top: 0; } .about-overlap .container { margin-top: calc(-1 * var(--space-2xl)); } .about-overlap .about-intro { position: relative; z-index: 2; box-shadow: var(--shadow-lg); } .about-intro { padding: var(--space-xl); min-height: 280px; } @media (max-width: 768px) { .about-intro { min-height: 320px; } } /* Center title block */ .about-intro .grid { align-items: center; } .about-intro-title { display: flex; align-items: center; justify-content: center; text-align: center; } .business-card { background: var(--clr-bg); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; display: flex; flex-direction: column; height: 100%; text-decoration: none; position: relative; /* allow full-card link overlay */ } .business-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } .business-card img { width: 100%; height: 200px; object-fit: cover; } .business-card-content { padding: var(--space-sm); display: flex; flex-direction: column; gap: var(--space-xs); } .business-card-content h3 { font-size: 16px; margin-bottom: var(--space-xs); color: var(--clr-text); } .business-card-content p { font-size: 14px; color: var(--clr-muted); margin-bottom: var(--space-sm); line-height: 1.5; } .read-more { color: var(--clr-primary); text-decoration: none; font-size: 14px; font-weight: 600; } .read-more:hover { text-decoration: underline; } /* Full-card clickable overlay without changing DOM order */ .card-link { position: absolute; inset: 0; z-index: 1; } /* Business page custom grid to match 2 / 4 / 4 layout */ .sectors-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg) var(--space-md); align-items: stretch; grid-auto-flow: row dense; } .sectors-grid .sectors-intro { grid-column: 1 / span 2; /* occupy two columns in the first row */ grid-row: 1; padding: var(--space-md); display: flex; align-items: center; } .sectors-grid > .business-card:first-of-type { grid-column: 3 / span 2; grid-row: 1; } /* Ensure robust placement if a full-card link is inside the card */ .sectors-grid > .business-card .card-link:first-child { grid-column: auto; } @media (max-width: 768px) { .sectors-grid { grid-template-columns: 1fr; } .sectors-grid .sectors-intro, .sectors-grid .business-card { grid-column: auto; grid-row: auto; } } /* Chairman overlay similar to CTA */ .chairman-wrap { position: relative; } .chairman-img { width: 50%; height: auto; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-sm); display: block; } .chairman-overlay { position: absolute; top: 15%; right: 5%; width: clamp(420px, 55%, 720px); padding: var(--space-lg); background: white; border-radius: var(--radius); border-top: 3px solid var(--clr-primary); box-shadow: var(--shadow-lg); } @media (max-width: 768px) { .chairman-overlay { position: static; width: 100%; margin-top: var(--space-sm); padding: var(--space-md); } .chairman-img { width: 100%; height: auto; } } /* Dark theme colors for chairman overlay only (keep layout) */ html.theme-dark .chairman-overlay { background: #1b1d20; border-top-color: var(--clr-primary); color: var(--clr-text); } /* Contact Layout */ .contact-layout { display: grid; grid-template-columns: 45% 55%; gap: var(--space-2xl); align-items: stretch; margin-top: var(--space-lg); } .contact-form-section { padding: 0; } .contact-form-section h2 { margin-bottom: var(--space-md); } .contact-info-section { height: 100%; } .contact-info-card { position: relative; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow-sm); height: 70%; } .contact-info-card > img { width: 100%; height: 100%; object-fit: cover; } .contact-info-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; background: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.8) 100% ); display: flex; align-items: flex-end; padding: var(--space-lg); color: white; } .contact-blocks { display: flex; gap: var(--space-lg); width: 100%; justify-content: space-between; align-items: flex-end; } .contact-block { display: flex; flex-direction: row; align-items: flex-start; text-align: left; gap: var(--space-sm); flex: 1; } .contact-icon { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-size: 16px; flex: 0 0 36px; } .contact-icon img { width: 18px; height: 18px; filter: invert(1); } .contact-details { font-size: 14px; line-height: 1.4; display: flex; flex-direction: column; justify-content: flex-end; } .contact-value { margin-top: 2px; } .contact-link { color: white; text-decoration: underline; } .contact-address { direction: ltr; text-align: left; } .contact-details strong { color: white; font-size: 16px; font-weight: 700; display: block; margin-bottom: 4px; } .contact-header { display: flex; align-items: center; gap: var(--space-xs); margin-top: 2px; } .contact-header .contact-icon { width: 26px; height: 26px; font-size: 14px; flex: 0 0 26px; display: inline-flex; align-items: center; justify-content: center; } .contact-header .contact-icon img { width: 18px; height: 18px; filter: invert(1); } .contact-header strong { margin: 0; line-height: 1; display: inline-block; } .btn--full { width: 100%; padding: var(--space-md); font-size: 16px; margin-top: var(--space-md); } /* Underline inputs like in the comps */ .contact-form-section .input, .contact-form-section .textarea { background: #fff; border: 0; border-bottom: 2px solid #e7e7e7; border-radius: 0; padding: var(--space-sm) var(--space-sm); font-size: 15px; } .contact-form-section .textarea { min-height: 120px; } .contact-form-section .input:focus, .contact-form-section .textarea:focus { outline: none; border-bottom-color: var(--clr-primary) !important; } /* Mobile responsiveness */ @media (max-width: 768px) { .contact-layout { grid-template-columns: 1fr; gap: var(--space-lg); margin-top: var(--space-md); } .contact-form-section { padding: 0; order: 2; } .contact-info-section { order: 1; } .contact-info-card { height: 300px; } .contact-blocks { flex-direction: column; gap: var(--space-sm); } .contact-block { align-items: flex-end; text-align: right; } .contact-block .contact-header { align-self: flex-end; } .contact-block .contact-address { direction: ltr; text-align: right; } .contact-icon { margin-top: 2px; } /* Adjust grid spacing for mobile */ .grid { gap: var(--space-sm); } /* Reduce icon circle margin */ .icon-circle { margin-bottom: var(--space-sm); } } .map-container { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); } .map-container iframe { display: block; } .stat-item { text-align: center; padding: var(--space-md) var(--space-sm); } .cta-section { position: relative; border-radius: var(--radius); } .cta-media-wrap { position: relative; display: inline-block; max-width: 100%; } .cta-media-wrap img { display: block; width: 100%; height: auto; border-radius: var(--radius); } .cta-media-wrap::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); pointer-events: none; } .cta-overlay { position: absolute; right: var(--space-md); bottom: var(--space-md); width: min(520px, 92%); padding: var(--space-lg); background: white; border-radius: var(--radius); border-top: 2px solid var(--clr-primary); box-shadow: var(--shadow-lg); } @media (max-width: 768px) { .cta-media-wrap { width: 100% !important; } .cta-overlay { position: static; width: 100%; margin-top: var(--space-sm); padding: var(--space-md); } .grid--5 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(2, 1fr); } .navbar__nav { display: none; } .navbar__cta { display: none; } .hamburger { display: flex; } .hero__title { font-size: 28px; } .action-card h3 { font-size: 20px; } .contact-info-overlay { padding: var(--space-md); } .form { gap: var(--space-sm); } .form .row { gap: var(--space-sm); } .contact-item { margin-bottom: 12px; } .mission-vision-card { padding: var(--space-sm); } .business-card-content { padding: var(--space-sm); } .business-card-content h3 { font-size: 14px; } .business-card-content p { font-size: 12px; } } @media (max-width: 480px) { :root { --space-xs: 6px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 56px; --space-4xl: 64px; } .grid--5 { grid-template-columns: repeat(2, 1fr); } .grid--4 { grid-template-columns: repeat(1, 1fr); } .grid--3 { grid-template-columns: repeat(1, 1fr); } .grid--2 { grid-template-columns: repeat(1, 1fr); } .container { padding-inline: var(--space-sm); } .section { padding: var(--space-lg) 0; } .hero { min-height: 280px; padding: var(--space-sm); display: flex; align-items: center; } .hero__title { font-size: 24px; } .navbar__inner { padding: var(--space-sm) var(--space-sm); } .navbar__logo span { display: none; } .footer__inner { grid-template-columns: 1fr; gap: var(--space-md); } .cta-overlay { padding: var(--space-sm); } .cta-overlay h2 { font-size: 20px; } } /* ===== Open Roles Page ===== */ .roles-hero { background: var(--clr-bg); border-bottom: 1px solid #e7e7e7; } html.theme-dark .roles-hero { border-bottom-color: #2a2d31; } .roles-hero__inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--space-lg); min-height: 360px; margin-top: var(--navbar-height); padding: var(--space-2xl) 0; } .roles-hero__content { display: flex; align-items: center; background: rgba(0, 0, 0, 0.7); border-radius: var(--radius); padding: var(--space-xl); } html:not(.theme-dark) .roles-hero__content { background: #f3f5f7; } .roles-hero__title { line-height: 1; } .roles-hero__line1 { display: block; font-size: clamp(28px, 4.2vw, 44px); color: #fff; } .roles-hero__line2 { display: block; font-size: clamp(28px, 4.2vw, 44px); color: #fff; padding-left: 28%; } html:not(.theme-dark) .roles-hero__line1, html:not(.theme-dark) .roles-hero__line2 { color: #111; } .roles-hero__media { position: relative; overflow: hidden; border-radius: var(--radius); } .roles-hero__media img { width: 50vw; max-width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(100%); margin-left: auto; } .roles-main { padding: var(--space-2xl) 0 var(--space-3xl); } .roles-search { display: flex; justify-content: center; margin-bottom: var(--space-xl); } .roles-search input { width: min(780px, 92%); padding: 14px 18px; border-radius: 999px; border: 1px solid #e1e1e1; background: #fff; color: var(--clr-text); font-size: clamp(14px, 1.4vw, 16px); box-shadow: var(--shadow-sm); } html.theme-dark .roles-search input { background: #0f1012; border-color: #2a2d31; color: var(--clr-text); } .roles-filter { display: flex; justify-content: center; margin: calc(var(--space-md) * -0.5) 0 var(--space-xl); } .roles-filter select { width: min(420px, 92%); padding: 10px 14px; border-radius: 8px; border: 1px solid #e1e1e1; background: #fff; color: var(--clr-text); box-shadow: var(--shadow-sm); font-size: clamp(14px, 1.4vw, 16px); } @media (max-width: 480px) { .roles-search input { width: 92%; } .roles-filter select { width: 92%; } } html.theme-dark .roles-filter select { background: #0f1012; border-color: #2a2d31; color: var(--clr-text); } .roles-list { display: grid; gap: var(--space-lg); } .roles-group { padding-top: var(--space-md); } .roles-group h2 { font-size: 20px; color: var(--clr-text); margin-bottom: var(--space-sm); } .role-item { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-top: 1px solid #2a2d31; } html:not(.theme-dark) .role-item { border-top-color: #e7e7e7; } .role-meta { font-size: 12px; color: var(--clr-muted); margin-top: 2px; } .role-title { font-weight: 600; color: var(--clr-text); text-decoration: none; } .role-item { cursor: pointer; } .role-item:hover .role-title { color: var(--clr-primary); text-decoration: underline; } .role-detail { margin-top: var(--space-2xl); } .role-detail__header { margin-bottom: var(--space-xl); text-align: center; } .role-detail__header h1 { font-size: clamp(28px, 4vw, 36px); margin-bottom: var(--space-sm); } .role-detail__meta { color: var(--clr-muted); font-size: 18px; } .role-detail__content { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-2xl); align-items: start; } .role-detail__info { background: var(--clr-surface); padding: var(--space-xl); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .role-detail__desc p { margin-bottom: var(--space-sm); line-height: 1.6; } .role-detail__reqs ul { margin: var(--space-sm) 0; padding-left: var(--space-lg); } .role-detail h3 { font-size: 20px; margin: var(--space-xl) 0 var(--space-sm); color: var(--clr-text); } .role-detail h3:first-of-type { margin-top: 0; } /* Modern Form Styles */ .role-apply-form { background: var(--clr-bg); border: 1px solid #e7e7e7; border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; } html.theme-dark .role-apply-form { border-color: #2a2d31; } .role-apply-form__header { background: var(--clr-primary); color: white; padding: var(--space-lg); text-align: center; } .role-apply-form__header h3 { margin: 0 0 var(--space-xs); font-size: 22px; } .role-apply-form__header p { margin: 0; opacity: 0.9; font-size: 14px; } .role-apply-form__body { padding: var(--space-xl); } .form-group { margin-bottom: var(--space-lg); } .form-group:last-child { margin-bottom: 0; } .form-label { display: block; font-weight: 600; margin-bottom: var(--space-xs); color: var(--clr-text); font-size: 14px; } .form-input, .form-textarea { width: 100%; padding: 12px 16px; border: 2px solid #e1e1e1; border-radius: 8px; background: var(--clr-bg); color: var(--clr-text); font-size: 15px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .form-input:focus, .form-textarea:focus { outline: none; border-color: var(--clr-primary); box-shadow: 0 0 0 3px rgba(216, 23, 54, 0.1); } html.theme-dark .form-input, html.theme-dark .form-textarea { border-color: #2a2d31; background: var(--clr-surface); } html.theme-dark .form-input:focus, html.theme-dark .form-textarea:focus { border-color: var(--clr-primary); } .form-textarea { resize: vertical; min-height: 100px; } .form-file { width: 100%; padding: 8px 12px; border: 2px dashed #e1e1e1; border-radius: 8px; background: var(--clr-bg); color: var(--clr-text); font-size: 14px; transition: border-color 0.2s ease, background 0.2s ease; } .form-file:hover { border-color: var(--clr-primary); background: rgba(216, 23, 54, 0.02); } html.theme-dark .form-file { border-color: #2a2d31; background: var(--clr-surface); } html.theme-dark .form-file:hover { border-color: var(--clr-primary); } .form-help { display: block; margin-top: 4px; font-size: 12px; color: var(--clr-muted); } .role-apply-btn { width: 100%; background: var(--clr-primary); color: white; border: none; padding: 16px 24px; border-radius: 8px; font-weight: 700; font-size: 16px; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; display: flex; align-items: center; justify-content: center; gap: 8px; } .role-apply-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(216, 23, 54, 0.3); } .role-apply-btn:active { transform: translateY(0); } @media (max-width: 900px) { .role-detail__content { grid-template-columns: 1fr; gap: var(--space-xl); } } @media (max-width: 1024px) { .roles-hero__inner { grid-template-columns: 1fr; gap: var(--space-md); } .roles-hero__media { order: 2; height: 260px; } .roles-hero__content { order: 1; } } @media (max-width: 640px) { .roles-hero__content { padding: var(--space-md); border-radius: var(--radius); width: 100%; } .roles-hero__media { height: 200px; } .roles-hero__media img { width: 100%; height: 100%; object-fit: cover; max-width: 100%; } } /* ===== Careers page fullscreen background ===== */ /* Vector ray grid using gradient lines (resolution-independent) */ .careers-viewport { --ray-gap: 110px; /* distance between diagonal lines */ --ray-thickness: 1px; /* line thickness */ --ray-color: rgba(220, 0, 32, 0.35); --bg-color: #ffffff; margin-top: var(--navbar-height); height: calc(100vh - var(--navbar-height)); height: calc(100svh - var(--navbar-height)); position: relative; display: grid; place-items: center; overflow: hidden; background: var(--bg-color); } html.theme-dark .careers-viewport { --ray-color: rgba(216, 23, 54, 0.35); --bg-color: #0f1012; } /* Masked gradient lines so color applies only where stripes exist */ .careers-viewport::before, .careers-viewport::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; /* keep lines behind content */ } .careers-viewport::before { background: linear-gradient( to bottom, var(--bg-color) 0%, var(--clr-primary) 50%, var(--bg-color) 100% ); -webkit-mask-image: repeating-linear-gradient( 60deg, #000 0, #000 var(--ray-thickness), transparent var(--ray-thickness), transparent var(--ray-gap) ); mask-image: repeating-linear-gradient( 60deg, #000 0, #000 var(--ray-thickness), transparent var(--ray-thickness), transparent var(--ray-gap) ); } .careers-viewport::after { background: linear-gradient( to bottom, var(--bg-color) 0%, var(--clr-primary) 50%, var(--bg-color) 100% ); -webkit-mask-image: repeating-linear-gradient( -60deg, #000 0, #000 var(--ray-thickness), transparent var(--ray-thickness), transparent var(--ray-gap) ); mask-image: repeating-linear-gradient( -60deg, #000 0, #000 var(--ray-thickness), transparent var(--ray-thickness), transparent var(--ray-gap) ); } .careers-logo { width: min(60vw, 580px); height: auto; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35)); z-index: 1; user-select: none; pointer-events: none; } .careers-content { display: flex; flex-direction: column; align-items: center; gap: 28px; transform: translateY(-4vh); /* raise logo & CTA a bit */ position: relative; z-index: 1; /* render above ray layers */ } .careers-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: var(--space-md); padding: 14px 18px 14px 18px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(216, 23, 54, 0.25); color: #fff; border-radius: 999px; text-decoration: none; font-weight: 700; box-shadow: var(--shadow-sm); backdrop-filter: blur(6px); transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .careers-cta .icon { width: 18px; height: 18px; filter: invert(1); } .careers-cta:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.16); border-color: rgba(216, 23, 54, 0.35); box-shadow: var(--shadow-lg); } /* Light theme variant */ html:not(.theme-dark) .careers-cta { background: rgba(0, 0, 0, 0.6); border-color: rgba(216, 23, 54, 0.75); color: #fff; } html:not(.theme-dark) .careers-cta:hover { background: rgba(0, 0, 0, 0.72); }