/* ============================================================ Enterprise Sweepstakes — Shared Stylesheet ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800;900&family=Inter:wght@300;400;500;600;700;800&family=Source+Sans+Pro:wght@400;600;700&display=swap'); /* ── DIN Next LT Pro (brand font, non-condensed) ────────────── */ @font-face { font-family: 'DIN Next LT Pro'; src: url('../DIN%20Next%20LT%20Pro%20Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'DIN Next LT Pro'; src: url('../DIN%20Next%20LT%20Pro%20Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'DIN Next LT Pro'; src: url('../din-next-lt-pro-light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'DIN Next LT Pro'; src: url('../DIN%20Next%20LT%20Pro%20Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; } /* ── DIN Next LT Pro Bold Condensed (fonnts.com) ───────────── Used for body text and subheadlines — i.e. everywhere except the site header navigation. */ @font-face { font-family: 'DIN Next LT Pro Cond'; src: url('../fonnts.com-DINNextLTPro-BoldCondensed-1.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'DIN Next LT Pro Cond'; src: url('../din-next-lt-pro-light-condensed.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; } /* ── Custom Properties ─────────────────────────────────────── */ :root { --green: #4aa36a; --green-dark: #4aa36a; --green-mid: #4aa36a; --green-light: #4aa36a; --green-pale: rgba(74,163,106,.1); --white: #ffffff; --off-white: #f5f5f5; --light-gray: #c8c8c8; --mid-gray: #aaaaaa; --dark-gray: #555555; --enterprise-gray: #414042; --text: #414042; /* brand charcoal — replaces black */ --text-secondary: #5a5a5a; --error: #c0392b; --success: #4aa36a; --warning: #f39c12; /* Body text → DIN Next LT Pro Medium (500). Inherits from . */ --font: 'DIN Next LT Pro', 'Helvetica Neue', Arial, sans-serif; /* Headlines / subheadlines → fonnts.com DIN Next LT Pro Bold Condensed. */ --font-condensed: 'DIN Next LT Pro Cond', 'DIN Next LT Pro', 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif; /* Site header nav → DIN Next LT Pro (non-condensed). */ --font-nav: 'DIN Next LT Pro', 'Helvetica Neue', Arial, sans-serif; --radius: 4px; --radius-lg: 8px; --radius-xl: 16px; --radius-pill: 999px; --shadow-sm: 0 1px 4px rgba(0,0,0,.10); --shadow-md: 0 4px 16px rgba(0,0,0,.14); --shadow-lg: 0 8px 40px rgba(0,0,0,.18); --ease: 0.2s ease; --max-w: 1200px; --hdr-h: 72px; } /* ── Reset ─────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; overflow-x: hidden; /* Green html background fills the area visible during overscroll (keeps native scroll behavior intact — no overscroll-behavior trickery). */ background: var(--green); } body { font-family: var(--font); font-weight: 500; /* DIN Next LT Pro Medium for all body copy */ font-size: 16px; line-height: 1.6; color: var(--text); background: var(--white); -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* Subheadlines (h1–h6) default to the brand condensed bold */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-condensed); font-weight: 700; } img { max-width: 100%; height: auto; display: block; } a { color: var(--green); text-decoration: none; transition: color var(--ease); } a:hover { color: var(--green-dark); } ul { list-style: none; } button { cursor: pointer; font-family: var(--font); border: none; background: none; } input, select, textarea { font-family: var(--font); font-size: 1rem; } /* ── Layout ────────────────────────────────────────────────── */ .container { width: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: 1.5rem; } .container--narrow { max-width: 760px; } .container--wide { max-width: 1400px; } .section { padding-block: 5rem; } .section--sm { padding-block: 3rem; } .section--lg { padding-block: 7rem; } .section--green { background: var(--green); color: var(--white); } .section--off-white { background: var(--off-white); } .section--dark { background: #0d1f14; color: var(--white); } /* ── Header ────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 100; height: var(--hdr-h); background: transparent; box-shadow: none; } .site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 100%; padding-inline: 0; max-width: 100%; } /* Site Logo */ .site-logo { display: flex; align-items: center; justify-content: center; text-decoration: none; } .site-logo__img { height: 44px; width: auto; object-fit: contain; } .site-logo__name { font-size: 1.2rem; font-weight: 800; color: var(--white); letter-spacing: .01em; text-transform: uppercase; line-height: 1.15; } .site-logo__name small { display: block; font-size: .62rem; font-weight: 400; letter-spacing: .14em; opacity: .75; } /* Site Nav */ .site-nav { display: flex; align-items: center; /* Font scales with the viewport, and the gaps are in `em` so the spacing grows with the text — keeping the links evenly spaced relative to their size at every width (instead of a fixed 14px / 6rem that never scaled). */ font-size: clamp(16px, 1.3vw, 24px); gap: 2em; padding-inline: 1.5rem; } /* Left nav: the three links spread across the ENTIRE left column — Home at the far-left edge, FAQs out by the logo, How to Play centered between them. space-between fills the whole 1fr grid column; the em gap is just a minimum so they never collide on narrower desktops. Padding insets them from the viewport edge (start) and from the logo (end). */ .site-nav--left { justify-content: space-between; gap: 1.5em; padding-inline: 3em 4em; } .site-nav--right { justify-content: flex-end; } .site-nav a { /* Site header nav keeps the original (non-condensed) DIN Pro per direction. */ font-family: var(--font-nav); font-weight: 700; font-size: 1em; /* inherits the responsive size from .site-nav */ line-height: 1.48; letter-spacing: 0; text-transform: uppercase; color: #ffffff; text-decoration: none; transition: color var(--ease); white-space: nowrap; } .site-nav a:hover { color: #ffffff; opacity: .85; } /* Hamburger button — hidden on desktop */ .hamburger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 40px; height: 40px; background: none; border: none; cursor: pointer; padding: 4px; z-index: 110; } .hamburger span { display: block; width: 24px; height: 2px; background: var(--white); border-radius: 2px; transition: transform .25s ease, opacity .25s ease; } .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; } .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile nav panel — hidden by default */ .mobile-nav { display: none; flex-direction: column; background: var(--enterprise-gray); padding: 0; max-height: 0; overflow: hidden; transition: max-height .3s ease, padding .3s ease; } .mobile-nav.open { max-height: 300px; padding: .75rem 0; } .mobile-nav a { font-family: var(--font-nav); font-weight: 700; font-size: 1.1rem; letter-spacing: .1em; text-transform: uppercase; color: #ffffff; text-decoration: none; padding: .75rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,.08); transition: background var(--ease), color var(--ease); } .mobile-nav a:last-child { border-bottom: none; } .mobile-nav a:hover { background: rgba(255,255,255,.08); color: var(--white); } /* Legacy lang switcher (still used in some pages) */ .site-header__right { display: flex; align-items: center; gap: 1.5rem; justify-content: flex-end; } .lang-switcher { display: flex; align-items: center; gap: .25rem; } .lang-btn { padding: .28rem .45rem; font-size: .75rem; font-weight: 600; color: rgba(255,255,255,.7); border-radius: var(--radius); transition: all var(--ease); letter-spacing: .04em; border: 1px solid transparent; background: none; cursor: pointer; } .lang-btn:hover, .lang-btn.active { color: var(--white); background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.3); } .lang-btn.active { font-weight: 700; } .lang-divider { color: rgba(255,255,255,.3); font-size: .75rem; } .header-cta { padding: .5rem 1.25rem; background: var(--white); color: var(--green); border-radius: var(--radius); font-size: .875rem; font-weight: 700; transition: all var(--ease); white-space: nowrap; } .header-cta:hover { background: var(--off-white); color: var(--green-dark); } /* ── Language Dropdown (hero) ──────────────────────────────── */ .lang-dropdown { position: relative; } .lang-dropdown-btn { background: rgba(0,0,0,.45); color: var(--white); border: 2px solid rgba(255,255,255,.55); padding: .6rem 1.25rem; font-family: var(--font-condensed); font-weight: 700; font-size: .95rem; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: background var(--ease); } .lang-dropdown-btn:hover { background: rgba(0,0,0,.65); } .lang-dropdown-menu { display: none; position: absolute; bottom: calc(100% + 8px); right: 0; background: #1a1a1a; border: 1px solid rgba(255,255,255,.15); min-width: 170px; z-index: 10; } .lang-dropdown.open .lang-dropdown-menu { display: block; } .lang-dropdown-menu .lang-btn { display: block; width: 100%; text-align: left; padding: .65rem 1.25rem; color: rgba(255,255,255,.75); font-size: .9rem; font-weight: 600; border-radius: 0; border: none; letter-spacing: .03em; } .lang-dropdown-menu .lang-btn:hover { background: var(--green); color: var(--white); } .lang-dropdown-menu .lang-btn.active { background: var(--green-dark); color: var(--white); } /* ── Hero (campaign main hero) ─────────────────────────────── */ .hero-main { position: relative; /* Lock to the desktop key-visual's aspect (1440x749) so the full image is visible without cropping. */ aspect-ratio: 1440 / 749; min-height: 520px; display: flex; flex-direction: column; color: var(--white); overflow: hidden; margin-top: calc(-1 * var(--hdr-h)); padding-top: var(--hdr-h); } .hero-main__bg-wrap { position: absolute; inset: 0; z-index: 0; } .hero-main__bg { width: 100%; height: 100%; object-fit: cover; object-position: center; } .persp-letter { display: inline-block; line-height: 1; } /* Body row: content pushed toward top so the car illustration below stays visible. */ .hero-main__body { position: relative; z-index: 2; flex: 1; display: flex; align-items: flex-start; padding-top: 1rem; padding-bottom: 1rem; } .hero-main__content { flex: 1; text-align: center; padding: 1rem 1.5rem 1rem; } /* "WIN A CAR" highlight — text inherits the surrounding subtitle font/size exactly, so the green paints behind the lettering with no padding and no resizing. line-height: 1 keeps the box height equal to the inherited font-size so the green hugs the cap area as tightly as possible. `transform: translateY` on the OUTER span positions the whole highlight (green + text together) on the page; `transform: translateY` on the INNER span shifts only the lettering vertically inside the green box, leaving the green's position and size untouched. */ .btn-win-a-car { display: inline-block; background: var(--green); color: var(--white); /* padding-block: top + bottom padding around the text. em units so the gap scales proportionally with the font-size of whatever context the box is dropped into. padding-inline: left + right padding. px units so you can tweak the box width 1–2 px at a time without affecting the vertical sizing. */ padding-block: 0.05em; padding-inline: 3px; font-family: inherit; font-weight: inherit; font-size: inherit; line-height: 1; letter-spacing: inherit; text-transform: inherit; vertical-align: baseline; /* Knob 1: position of the whole highlight on the page. */ transform: translateY(-0.1em); /* Inline content within doesn't accept margins/transforms directly — the inner wrapper is where text-only positioning happens. */ overflow: visible; } /* Knob 2: lettering position INSIDE the green box. Translate only — does not affect the outer's size or position. Increase the value (less negative or positive) to drop the text lower inside the green. */ .btn-win-a-car > span { display: inline-block; transform: translateY(0.1em); } /* Hero language dropdown wrapper — sits in bottom bar, right side */ .hero-lang-dropdown { position: relative; z-index: 3; } .hero-lang-trigger { display: flex; align-items: center; justify-content: center; gap: clamp(.3rem, .8vw, .6rem); background: var(--green); color: var(--white); border: none; padding: clamp(.35rem, .9vw, .55rem) clamp(.5rem, 1.5vw, 1rem); font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif; font-weight: 600; font-size: clamp(14px, 2.2vw, 29.34px); line-height: 1; letter-spacing: 0; text-transform: uppercase; cursor: pointer; transition: background var(--ease); white-space: nowrap; text-align: center; } .hero-lang-trigger::before { content: '+'; /* Match the language text size, full opacity per direction. */ font-size: inherit; line-height: inherit; opacity: 1; } .hero-lang-trigger:hover { background: var(--green-dark); } .hero-lang-trigger__flag { width: clamp(20px, 1.5vw, 28px); height: auto; display: inline-block; vertical-align: middle; } /* Rules panel — drops UP above the trigger */ .hero-lang-dropdown .lang-dropdown-menu { display: none; position: absolute; bottom: 100%; top: auto; right: 0; background: transparent; border: none; min-width: unset; z-index: 20; } .hero-lang-dropdown.open .lang-dropdown-menu { display: flex; } /* Individual flag+language rows — matches FULL Drop down button.png */ .rules-lang-panel { flex-direction: column; gap: 0; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 6px 20px rgba(0,0,0,.25); } .rules-lang-btn { display: grid; grid-template-columns: 36px 18px 1fr; align-items: center; gap: .6rem; background: var(--green); border: none; color: #ffffff; padding: .55rem 1rem; /* Source Sans Pro per the dropdown design export. */ font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif; font-weight: 600; font-size: 29.34px; line-height: 28.43px; letter-spacing: 0; text-transform: uppercase; text-decoration: none; transition: background var(--ease), filter var(--ease); min-width: 240px; white-space: nowrap; border-bottom: 1px solid rgba(255,255,255,.12); } .rules-lang-panel .rules-lang-btn:last-child { border-bottom: none; } .rules-lang-btn:hover, .rules-lang-btn:focus-visible { background: var(--green); filter: brightness(1.08); color: var(--white); } .rules-lang-btn__flag { width: 32px; height: auto; display: block; margin-inline: auto; image-rendering: -webkit-optimize-contrast; } .rules-lang-btn::before { content: '+'; /* + sign matches the text size per direction, full opacity. */ font-size: inherit; line-height: inherit; opacity: 1; text-align: center; } /* Hero legal fine print */ .hero-legal { font-size: .68rem; color: #ffffff; text-transform: uppercase; letter-spacing: .04em; line-height: 1.5; text-align: right; } /* Hero "No Purchase Necessary" stanza — center flex item inside the bottom bar. */ .hero-main__npn { flex: 1; text-align: center; font-family: var(--font); font-weight: 500; font-size: 8pt; line-height: 1.2; color: #ffffff; letter-spacing: 0; padding-inline: 1rem; /* Narrow the stanza so it wraps onto a few roughly-equal lines instead of one very long row. */ max-width: 36rem; margin-inline: auto; position: relative; top: .75rem; } @media (max-width: 1024px) { .hero-main__npn { display: none; } } .hero-main__hashtag { font-family: var(--font-condensed); font-weight: 700; font-size: clamp(3.5rem, 11vw, 9.5rem); text-transform: uppercase; line-height: .92; letter-spacing: .01em; margin-bottom: 0.75rem; } .hero-main__hashtag .hl-green { color: var(--green-light); } .hero-main__logo { display: block; margin-inline: auto; /* Cap raised from 704px → 1000px so the logo continues scaling on wide displays (above ~1257px viewport, where 56vw hits the old cap). The hero-main__subtitle in index.html is paired to this same clamp — keep its max in sync if changing this. */ width: clamp(180px, 44vw, 800px); height: auto; } .hero-main__subtitle { font-family: var(--font-condensed); font-weight: 700; /* Matches .btn-rules ("Official Rules" button below) so the two read at the same visual size on desktop. The slower 2.2vw growth rate (vs. an earlier 3.375vw) means iPad widths stay smaller than the 29.34 px desktop max — critical so the wrapped subtitle doesn't bulk down and overlap the car in the key visual as the hero collapses from desktop → iPad. */ font-size: clamp(12px, 2.2vw, 30px) !important; line-height: 1.1; letter-spacing: 0; text-transform: uppercase; max-width: 680px; margin: 0 auto; color: #ffffff; } /* Hero bottom bar */ .hero-main__bottom { position: absolute; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: clamp(.75rem, 2vw, 1.5rem) clamp(1rem, 2.5vw, 2rem); gap: clamp(.5rem, 1.5vw, 1rem); z-index: 2; } .hero-main__bottom > .btn-rules, .hero-main__bottom > .lang-dropdown { position: relative; bottom: clamp(1rem, 2.5vw, 2.5rem); } /* Live page hero bottom bar — column flex: Row 1: .hero-main__buttons row (4 equal-width children) Row 2: .hero-main__npn (legal text, full-width, below) */ .hero-main__bottom--live { display: flex; flex-direction: column; align-items: stretch; gap: 1.5rem; padding-inline: clamp(1rem, 3vw, 3rem); } /* Inner row that holds the 4 button-style children. flex: 1 1 0 on each child forces equal width regardless of content length. */ .hero-main__buttons { display: flex; justify-content: center; align-items: stretch; gap: clamp(1.5rem, 3vw, 3rem); width: 100%; } .hero-main__buttons > .btn-rules, .hero-main__buttons > .btn-post-x, .hero-main__buttons > .hero-lang-dropdown { /* Content-width like the coming-soon hero buttons (source of truth): each button hugs its label instead of being stretched to a 280px column. */ flex: 0 0 auto; } .hero-main__buttons > .hero-lang-dropdown { display: flex; flex-direction: column; } .hero-main__buttons > .hero-lang-dropdown .hero-lang-trigger { width: 100%; flex: 1; } .btn-rules { display: inline-flex; align-items: center; justify-content: center; text-align: center; background: var(--green); color: var(--white); /* Match the English language selector (.hero-lang-trigger) exactly: same padding, font, size — restores the compact deployed coming-soon sizing that a later live-page edit had enlarged (padding 2–4rem / var(--font-nav)). */ padding: clamp(.35rem, .9vw, .55rem) clamp(.5rem, 1.5vw, 1rem); font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif; font-weight: 600; font-size: clamp(14px, 2.2vw, 29.34px); line-height: 1; letter-spacing: 0; text-transform: uppercase; text-decoration: none; transition: background var(--ease); white-space: nowrap; } .btn-rules:hover { background: var(--green-dark); color: var(--white); } .btn-rules:hover { background: var(--green-dark); color: var(--white); } /* ── Countdown Section (campaign) ──────────────────────────── */ .cd-section { background: var(--white); /* Vertical padding scales with viewport so the gap above + below the gray-line separator stays proportional on mobile (was a fixed 3.5 rem ≈ 56 px which looked oversized on small phones). */ padding: clamp(1.5rem, 5vw, 3.5rem) clamp(1rem, 3vw, 1.5rem); text-align: center; border-bottom: 1px solid var(--light-gray); } .cd-section__title { font-family: var(--font-condensed); font-weight: 700; font-size: clamp(28px, 8.5vw, 72.85px); /* Matches the FAQ heading's ~1.07 ratio so the two lines of "COUNTDOWN TO KICK-OFF" don't overlap when wrapped on phones. */ line-height: 1.05; text-transform: uppercase; letter-spacing: 0; color: var(--text); margin-bottom: 2rem; } .cd-tiles { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; } .cd-tile { display: flex; flex-direction: column; align-items: center; gap: .35rem; min-width: 143px; } .cd-tile__num { background: var(--green-light); /* Fixed box per design spec: 143 × 98 with the digits centered. */ width: 143px; height: 98px; /* Asymmetric padding compensates for the condensed font's high cap-position so the digits sit visually centered in the box rather than skewed up. */ padding: 10px 0 0 0; font-family: var(--font-condensed); font-weight: 700; font-size: 80px; line-height: 1; color: var(--white); font-variant-numeric: tabular-nums; display: flex; align-items: center; justify-content: center; } .cd-tile__label { font-family: var(--font); font-weight: 500; font-size: 39.06px; line-height: 1; margin-top: .2rem; letter-spacing: 0; text-transform: uppercase; color: var(--green-light); } /* ── Brand / Car Section ───────────────────────────────────── */ .brand-section { position: relative; /* Match source image aspect (1920x1080 = 16:9) so cover doesn't crop. */ aspect-ratio: 16 / 9; /* Default = global storefront. US locales swap via body.locale-us below. */ background: url('../were-on-your-corner-global.jpg') center / cover no-repeat; display: flex; align-items: flex-end; overflow: hidden; } body.locale-us .brand-section { background-image: url('../were-on-your-corner-us.jpg'); } .brand-section__content { position: relative; z-index: 1; /* Bottom padding kept small so the text drops onto the pavement portion of the image, which serves as the dark backdrop for legibility (in place of the previous overlay). */ padding: 3.5rem 3rem 1rem; /* Widened so the body lines "On corners…" and "With a chance…" fit on a single line each (the longer English line is ~760 px at 21.39 px). */ max-width: 880px; color: var(--white); } .brand-section__title { font-family: var(--font-condensed); font-weight: 700; font-size: 48.39px; line-height: 53.52px; letter-spacing: 0; text-transform: uppercase; margin-bottom: 1.25rem; } /* "on your corner." highlight — same approach: inherit the title font/size exactly, no padding, line-height: 1 so the green hugs the lettering instead of padding to the parent's larger line-height. Outer translateY positions the whole highlight; inner translateY shifts only the lettering inside without resizing the green. */ .brand-section__hl { display: inline-block; background: var(--green-light); color: var(--white); /* padding-block: top + bottom padding around the text. em units so the gap scales proportionally with the font-size — same value works for "on your corner." at 48.39 px and "updates" at 58.9 px. padding-inline: left + right padding. px units so you can tweak the box width 1–2 px at a time without affecting the vertical sizing. */ padding-block: 0.03em; padding-inline: 5px; font-family: inherit; font-weight: inherit; font-size: inherit; line-height: 1; letter-spacing: inherit; text-transform: inherit; vertical-align: baseline; /* Knob 1: position of the whole highlight on the page. */ transform: translateY(-0.1em); overflow: visible; } /* Knob 2: lettering position INSIDE the green box. */ .brand-section__hl > span { display: inline-block; transform: translateY(0.1em); } .brand-section__body { font-family: var(--font); font-size: 21.39px; line-height: 25.4px; margin-bottom: 1rem; /* Regular weight applies to the whole stanza, including the lead-in text "Enterprise is here for X fans." that sits as a bare text node before the merged span. !important required to win against the coming-soon-wide `body, body * { font-weight: 700 !important }` override. */ font-weight: 400 !important; color: #ffffff; } /* Merged "On corners… With a chance…" stanza — flowing inline as one paragraph and rendered at regular weight. !important required to win against the coming-soon-wide `body, body * { font-weight: 700 !important }` override declared in sites/coming-soon/index.html. max-width caps the line length to ~80% of the brand-section content area so the natural wrap falls inside the storefront art rather than spanning the full image. inline-block lets max-width take effect on a phrasing span. */ .brand-section__body-merged { font-weight: 400 !important; display: inline-block; max-width: 80%; } .brand-section__tagline { font-family: var(--font); font-weight: 700; font-size: 21.39px; line-height: 25.4px; color: #ffffff; } .brand-section__legal { font-family: var(--font); font-size: 8pt; line-height: 1.2; color: #ffffff; letter-spacing: 0; margin-top: 1rem; font-weight: 500; /* Each sentence (separated by
) stays on a single line; no wrapping. */ white-space: nowrap; } /* Live page brand section — F5 photo + bottom-left content cluster + pill CTA. Photo bottom half is asphalt road (designed negative space); content sits there so the building, employee, car, and ball above stay unobstructed. */ .brand-section--live { aspect-ratio: 1250 / 584; /* Fallback color shows if the photo fails to load, so white-on-photo text never lands on a white page background and disappears. */ background-color: var(--enterprise-gray); background-image: url('/assets/Enterprise_Brand_F5-RGB.jpg'); background-position: center right; background-size: cover; background-repeat: no-repeat; align-items: flex-start; min-height: 500px; } body.locale-us .brand-section--live { background-image: url('/assets/Enterprise_Brand_F5-RGB.jpg'); } .brand-section--live .brand-section__content { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; padding: clamp(2.5rem, 5vh, 4rem) 2rem 0 clamp(2rem, 5vw, 5rem); max-width: 640px; } .brand-section--live .brand-section__title { font-size: clamp(2rem, 5vw, 4rem); line-height: 1.05; color: var(--white); margin: 0; } .brand-section--live .brand-section__cta { margin-top: 0; } .brand-section--live .brand-section__legal { font-size: .7rem; line-height: 1.4; margin: 0; white-space: normal; color: var(--white); } /* ── Live page brand section: smaller text to match PSD ─────── */ .brand-section--top .brand-section__content { /* Desktop vertical position of the whole cluster (title + paragraph + tagline). Lowered from 3.75rem to lift the group up on the image; their relative spacing is unchanged. Mobile keeps its own padding-top in the max-width:768 block. */ padding-top: 2.5rem; /* Left margin matches the Follow Us section on desktop. */ padding-left: clamp(4.5rem, 6.5vw, 6.5rem); } .brand-section--top .brand-section__title { font-size: clamp(1.5rem, 3vw, 2.5rem); line-height: 1.1; margin-bottom: .75rem; } .brand-section--top .brand-section__body { font-size: clamp(.75rem, 1.15vw, .95rem); line-height: 1.3; } .brand-section--top .brand-section__tagline { /* Match the paragraph above (which the inline