/* ============================================================ CXR RECRUITING AWARDS — GLOBAL STYLES styles.css GoDaddy static hosting | WordPress-migration ready ============================================================ */ /* ─── Google Fonts loaded in of every page ─────────── */ /* Roboto 300/400/500/700/900 + Roboto Condensed 700 */ /* ─── Brand Variables ──────────────────────────────────────── */ :root { /* Core CXR colors */ --color-red: #ce1021; --color-red-dark: #9b0d19; --color-navy: #104466; --color-navy-deep: #0d354f; --color-white: #ffffff; --color-light-gray: #f4f5f6; --color-off-white: #f7f6f4; --color-dark-text: #1a1a1a; --color-muted-text: #555560; /* Awards program identity colors */ --color-charcoal: #1a1a2e; --color-charcoal-mid: #22223a; --color-gold: #C9973A; --color-gold-light: #E8C07A; --color-gold-pale: #f5e8cc; /* Typography */ --font-base: 'Roboto', sans-serif; --font-display: 'Roboto Condensed', sans-serif; /* Spacing */ --section-padding: 72px 0; --section-padding-sm: 48px 0; --container-width: 1160px; --container-padding: 0 24px; /* Effects */ --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); --card-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12); --card-radius: 6px; --card-radius-sm: 4px; } /* ─── Reset ────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-base); font-size: 16px; font-weight: 400; line-height: 1.6; color: var(--color-dark-text); background-color: var(--color-white); } img { max-width: 100%; height: auto; display: block; } a { color: var(--color-red); text-decoration: none; } a:hover { text-decoration: underline; } ul, ol { list-style: none; } /* ─── Container ────────────────────────────────────────────── */ .container { width: 100%; max-width: var(--container-width); margin: 0 auto; padding: var(--container-padding); box-sizing: border-box; } /* ─── Section backgrounds ──────────────────────────────────── */ .section-white { background-color: var(--color-white); padding: var(--section-padding); } .section-gray { background-color: var(--color-off-white); padding: var(--section-padding); } .section-navy { background-color: var(--color-navy); padding: var(--section-padding); } .section-dark { background-color: var(--color-charcoal); padding: var(--section-padding); } /* ─── Section header pattern ───────────────────────────────── */ .section-label { font-family: var(--font-base); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-red); margin: 0 0 8px 0; display: block; } .section-label-gold { color: var(--color-gold); } .section-heading { font-family: var(--font-display); font-size: 32px; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; color: var(--color-dark-text); margin: 0 0 4px 0; } .section-heading-light { font-family: var(--font-display); font-size: 32px; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; color: var(--color-white); margin: 0 0 4px 0; } .section-accent-bar { width: 48px; height: 4px; background-color: var(--color-red); border-radius: 2px; margin: 10px 0 28px 0; } .section-accent-bar-gold { width: 48px; height: 4px; background-color: var(--color-gold); border-radius: 2px; margin: 10px 0 28px 0; } /* ─── Typography utilities ─────────────────────────────────── */ .body-text { font-size: 15px; font-weight: 400; line-height: 1.75; color: var(--color-muted-text); } .body-text-light { font-size: 15px; font-weight: 400; line-height: 1.75; color: rgba(255, 255, 255, 0.72); } .text-center { text-align: center; } .text-gold { color: var(--color-gold); } .text-red { color: var(--color-red); } .text-white { color: var(--color-white); } .text-muted { color: var(--color-muted-text); } /* ─── Layout helpers ───────────────────────────────────────── */ .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; } .two-col-narrow { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start; } .three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .four-col { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } @media (max-width: 960px) { .two-col, .two-col-narrow { grid-template-columns: 1fr; gap: 40px; } .three-col { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .three-col, .four-col { grid-template-columns: 1fr; } .section-heading, .section-heading-light { font-size: 26px; } } /* ─── Scroll reveal animation ──────────────────────────────── */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.55s ease, transform 0.55s ease; } .reveal.visible { opacity: 1; transform: translateY(0); }