/* ============================================================ 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%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; } /* ── 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: rgba(65, 64, 66, 0.5); box-shadow: 0 2px 12px rgba(0,0,0,.4); } .site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 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; gap: 2rem; padding-inline: 1.5rem; } /* Left nav: Home pinned to far left, How It Works keeps natural spacing toward center. */ .site-nav--left { justify-content: flex-start; gap: 4rem; } .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: 17.4px; line-height: 20.71px; letter-spacing: 0; text-transform: uppercase; color: #ffffff; text-decoration: none; transition: color var(--ease); } .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 */ .hero-main__body { position: relative; z-index: 2; flex: 1; display: flex; align-items: flex-start; padding-bottom: 2rem; } .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); /* Trigger matches dropdown rows: Source Sans Pro at 29.34/28.43. */ 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(18px, 2.2vw, 32px); 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; } @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: 1.5rem; } .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(224px, 56vw, 1000px); height: auto; max-width: 100%; } .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(14px, 2.2vw, 29.34px); line-height: 1.1; letter-spacing: 0; text-transform: uppercase; /* Line-wrap knob: narrower = more line breaks (shorter lines), wider = fewer/longer lines. Was 700px. */ max-width: 560px; 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; } /* 3-button variant for live page: OFFICIAL RULES | POST ON X | LANGUAGE */ .hero-main__bottom--live { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 1rem; } .hero-main__bottom--live > *:last-child { justify-self: end; } .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 exactly: same padding, font, size. */ 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; } /* ── How to Play Section ───────────────────────────────────── */ .htp-section { position: relative; background: #fff; /* Bottom padding kept small so the .htp-legal stanza sits at the bottom edge of the section (like cs-footer__npn and brand-section__legal), instead of floating in the middle with empty space below it. Top padding scales with viewport so the gap below the gray-line separator stays proportional on mobile. */ padding: clamp(2rem, 6vw, 5rem) 0 1.5rem; /* Subtle separator from the Stay-in-Touch section above, matching the border-bottom on .cd-section. */ border-top: 1px solid var(--light-gray); } .htp-section__title { font-family: var(--font-condensed); font-weight: 700; font-size: clamp(28px, 8.5vw, 72.85px); /* line-height slightly > 1 so the glyph fits inside its line box. With the old 0.63 the glyph extended above the box, pulling the title visually closer to whatever sat above the section, and caused wrapping lines (e.g. translated titles on phones) to overlap. */ line-height: 1.05; text-transform: uppercase; text-align: center; color: var(--text); letter-spacing: 0; margin-bottom: 2.5rem; } /* 5-column grid that all 4 step rows share, so img/num/title/divider/desc line up vertically across rows. Each `auto` column auto-sizes to the widest content in that column across all rows; `1fr` fills the rest. */ /* The shared `.container` caps at 1200px (--max-w); on wide displays this was throttling the grid below it. Let the htp-section's container grow so the steps' own max-width (set on `.htp-steps`) can actually take effect. Heading is text-align: center so it stays centered as the container widens. */ .htp-section .container { max-width: clamp(1300px, 85vw, 1700px); } .htp-steps { /* Max-width grows with viewport above ~1530px so the desc column (1fr in the grid below) gets extra room on wider monitors instead of the text wrapping into 3+ short lines. Caps at 1700px so the grid doesn't go silly-wide on ultra-wide displays. `margin-inline: auto` keeps the whole grid centered as the container expands. */ max-width: clamp(1300px, 85vw, 1700px); margin-inline: auto; padding-inline: 2rem; display: grid; grid-template-columns: auto auto auto auto 1fr; /* Column gap shrinks more aggressively on phones (8 px floor instead of 16 px) so the bigger referee image has room to breathe alongside the description text without overflowing the viewport. */ column-gap: clamp(.5rem, 2.5vw, 3rem); row-gap: clamp(1rem, 2vw, 1.5rem); align-items: center; /* Title now lives in .htp-step__right (next to desc) so that mobile can restructure title+desc as a single flex-column block. DOM order is now img, num, divider, title, desc; explicit grid-column on each child keeps the desktop visual order img | num | title | divider | desc. `dense` lets the auto-placer fill the col-3 hole left when col-4 is placed before col-3 in the source. */ grid-auto-flow: row dense; } .htp-step__img { grid-column: 1; } .htp-step__num { grid-column: 2; } .htp-step__title { grid-column: 3; } .htp-step__divider { grid-column: 4; } .htp-step__desc { grid-column: 5; } /* `.htp-step` and its left/right wrappers dissolve into the parent grid so their children (img, num, title, divider, desc) sit as direct grid items — required for the shared-column-tracks alignment. */ .htp-step, .htp-step__left, .htp-step__right { display: contents; } .htp-step:first-child .htp-step__right { transform: translateX(-30px); /* negative = left, positive = right */ } .htp-step__img { /* Bumped mobile min from 80 → 110 so the referee stays a visual anchor instead of shrinking smaller than the number circle on phones. */ width: clamp(110px, 18vw, 220px); height: auto; object-fit: contain; flex-shrink: 0; /* Step 1 is wider than steps 2-4, so the auto-sized image column is wider than steps 2-4 need. Center every image in the column so each referee's canvas — and therefore the body inside it — lines up vertically. */ justify-self: center; } /* Step 1's referee shares its canvas with the flag, making the body read smaller than steps 2-4. Enlarge the image and pull step 2 up with a negative margin so step 2's image overlaps the flag tail — the four referee bodies appear similar in size, and the flag still anchors the "watch for the signal" cue without bleeding into step 2's frame. */ .htp-step__img[src*="Signal1"] { width: clamp(150px, 24vw, 300px); /* was 130 / 21vw / 260 */ margin-bottom: clamp(-2.25rem, -4vw, -1rem); /* HORIZONTAL ALIGNMENT — Signal1 (negative = left, positive = right) */ transform: translateX(-2%); } /* The Signal*.png assets are transparent PNGs. Signal2 sits on top of Signal1's flag tail via the negative margin above, so it needs an opaque white fill (matching the section background) to actually cover the flag. */ .htp-step__img[src*="Signal2"] { background: #fff; position: relative; /* HORIZONTAL ALIGNMENT — Signal2 (negative = left, positive = right) */ transform: translateX(4%); } .htp-step__img[src*="Signal3"] { /* HORIZONTAL ALIGNMENT — Signal3 (negative = left, positive = right) */ transform: translateX(-4%); } .htp-step__num { /* Lowered mobile min from 70 → 55 so the circle yields visual priority to the bigger referee image at narrow widths. */ --circle-size: clamp(55px, 9vw, 130px); width: var(--circle-size); height: var(--circle-size); border-radius: 50%; border: clamp(3px, .35vw, 5px) solid var(--green); display: flex; align-items: center; justify-content: center; font-family: var(--font-condensed); font-weight: 700; font-size: calc(var(--circle-size) * 0.58); line-height: 1; color: var(--green); flex-shrink: 0; /* DIN Next's number glyphs have asymmetric ascender / sidebearing metrics that make the digit appear nudged toward 11 o'clock inside a perfect circle. border-box keeps the circle's outer size locked while small padding-top / padding-left nudge the flex-centered digit toward true visual center (down + right). */ box-sizing: border-box; padding-top: 0.15em; /* padding-left: 0.02em; */ } .htp-step__title { font-family: var(--font-condensed); font-weight: 700; /* Scales proportionally across viewport just like the number circle: desktop max matches the original 40.13 px; min keeps readability on phones. */ font-size: clamp(16px, 3vw, 40.13px); line-height: 1.05; letter-spacing: 0; text-transform: uppercase; color: var(--green); flex-shrink: 0; } .htp-step__divider { width: clamp(2px, .25vw, 3px); height: clamp(60px, 9vw, 110px); background: var(--text); /* Extra breathing room around the divider on top of the grid column-gap, preserving the visual emphasis from the original design. */ margin-inline: clamp(.5rem, 2vw, 2rem); } .htp-step__desc { /* Bold condensed to match the step title across the divider. Scales proportionally with the title and the number circle so the right-side text shrinks at the same rate as everything else. */ font-family: var(--font-condensed); font-size: clamp(13px, 1.9vw, 25.19px); line-height: 1.2; font-weight: 700; color: var(--green); letter-spacing: 0; } /* Legal stanza — flows below the step rows as the last visible block, like cs-footer__npn and brand-section__legal. Spacing lives above it (so it anchors visually to the section's bottom edge); the section's small padding-bottom is what's left below. */ .htp-legal { font-family: var(--font); font-weight: 500; font-size: 7pt; line-height: 1.25; color: var(--text); letter-spacing: 0; text-align: left; margin: clamp(2rem, 4.5vw, 3.5rem) 0 0; padding-inline: 1.5rem; /* Per design direction: this abbreviated-terms stanza is shown only on mobile (it sits below How to Play on small viewports). The mobile rule in the @media block below flips it back to display: block. */ display: none; } /* ── Follow Us Section ─────────────────────────────────────── */ .follow-section { position: relative; /* Match kick-still aspect (1920x1080 = 16:9) so cover doesn't crop. */ aspect-ratio: 16 / 9; background: url('../kick-still.jpg') center / cover no-repeat; display: flex; align-items: flex-end; overflow: hidden; } /* Follow-section darkening overlay removed — image displays at full brightness. */ .follow-section__content { position: relative; z-index: 1; padding: 3rem; } .follow-section__title { font-family: var(--font-condensed); font-weight: 700; /* Matches .brand-section__title (48.39px) so the "Follow us for updates" block reads at the same scale as the "We're on your corner." headline in the section above. */ font-size: 48.39px; line-height: 48.66px; letter-spacing: 0; text-transform: uppercase; color: var(--white); margin-bottom: .25rem; } /* Link sized to match the heading so "@Enterprise" and "Follow us for updates" render at the same visual weight, per design direction. */ .follow-section__link { font-family: var(--font-condensed); font-weight: 700; font-size: 48.39px; line-height: 1; letter-spacing: 0; color: var(--white); text-decoration: none; } .follow-section__link:hover { color: var(--green-light); } .follow-section__legal { font-family: var(--font); font-size: 8pt; line-height: 1.2; color: #ffffff; letter-spacing: 0; margin-top: 1rem; font-weight: 500; } /* ── Legacy Hero (sweepstakes.html until redesigned) ───────── */ .hero { position: relative; background: var(--green); color: var(--white); overflow: hidden; text-align: center; padding-block: 6rem 5rem; } .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 50%, rgba(74,163,106,.18) 0%, transparent 60%), radial-gradient(ellipse at 80% 20%, rgba(74,163,106,.3) 0%, transparent 50%); pointer-events: none; } .hero--cs { padding-block: 8rem 7rem; background: var(--green); } .hero__eyebrow { display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--green-light); background: rgba(74,163,106,.15); border: 1px solid rgba(74,163,106,.35); padding: .35rem 1rem; border-radius: var(--radius-pill); margin-bottom: 1.5rem; } .hero__title { font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; margin-bottom: 1.25rem; position: relative; } .hero__title .accent { color: var(--green-light); } .hero__subtitle { font-size: clamp(1rem, 2.5vw, 1.3rem); font-weight: 400; opacity: .85; max-width: 620px; margin-inline: auto; margin-bottom: 2.5rem; } .hero__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } /* ── Countdown (legacy — used by sweepstakes hero) ─────────── */ .countdown-wrap { margin-bottom: 3rem; } .countdown-label { font-size: .8rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; opacity: .7; margin-bottom: 1rem; } .countdown { display: flex; gap: 1rem; justify-content: center; align-items: flex-start; flex-wrap: wrap; } .countdown__unit { display: flex; flex-direction: column; align-items: center; gap: .4rem; } .countdown__digits { display: flex; gap: .25rem; } .countdown__digit { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius-lg); width: 54px; height: 64px; display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; backdrop-filter: blur(4px); transition: background .3s; } .countdown__label-unit { font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .65; } .countdown__sep { font-size: 2.5rem; font-weight: 700; opacity: .4; padding-top: .4rem; } /* ── Buttons ───────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .8rem 2rem; border-radius: var(--radius); font-size: 1rem; font-weight: 700; letter-spacing: .01em; transition: all var(--ease); white-space: nowrap; border: 2px solid transparent; } .btn--primary { background: var(--green); color: var(--white); border-color: var(--green); } .btn--primary:hover { background: var(--green-dark); border-color: var(--green-dark); color: var(--white); } .btn--white { background: var(--white); color: var(--green); border-color: var(--white); } .btn--white:hover { background: var(--off-white); color: var(--green-dark); border-color: var(--off-white); } .btn--outline { background: transparent; color: var(--white); border-color: rgba(255,255,255,.5); } .btn--outline:hover { background: rgba(255,255,255,.1); border-color: var(--white); color: var(--white); } .btn--outline-green { background: transparent; color: var(--green); border-color: var(--green); } .btn--outline-green:hover { background: var(--green); color: var(--white); } .btn--lg { padding: 1rem 2.5rem; font-size: 1.1rem; } .btn--sm { padding: .5rem 1.25rem; font-size: .875rem; } .btn--full { width: 100%; } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn .spinner { width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .6s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ── Subscribe Form ────────────────────────────────────────── */ .subscribe-form { display: flex; gap: .75rem; max-width: 500px; margin-inline: auto; flex-wrap: wrap; } .subscribe-form input[type="email"] { flex: 1; min-width: 220px; padding: .85rem 1.25rem; border: 2px solid rgba(255,255,255,.3); border-radius: var(--radius); background: rgba(255,255,255,.1); color: var(--white); font-size: 1rem; outline: none; transition: border-color var(--ease); } .subscribe-form input[type="email"]::placeholder { color: rgba(255,255,255,.5); } .subscribe-form input[type="email"]:focus { border-color: var(--green-light); } .subscribe-form .btn { flex-shrink: 0; } .form-note { font-size: .78rem; opacity: .6; margin-top: .75rem; text-align: center; } /* ── Alert / Message Banner ────────────────────────────────── */ .alert { padding: 1rem 1.5rem; border-radius: var(--radius-lg); font-size: .9rem; font-weight: 400; margin-top: 1rem; display: none; } .alert--success { background: rgba(74,163,106,.12); border: 1px solid rgba(74,163,106,.35); color: var(--green); } .alert--error { background: rgba(192,57,43,.08); border: 1px solid rgba(192,57,43,.3); color: var(--error); } .alert.visible { display: block; } /* ── Feature Cards ─────────────────────────────────────────── */ .cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; } .card { background: var(--white); border: 1px solid var(--light-gray); border-radius: var(--radius-xl); padding: 2rem; transition: box-shadow var(--ease), transform var(--ease); } .card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .card__icon { width: 56px; height: 56px; background: var(--green-pale); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; } .card__icon svg { width: 28px; height: 28px; fill: var(--green); } .card__title { font-size: 1.1rem; font-weight: 700; margin-bottom: .6rem; color: var(--text); } .card__body { font-size: .9rem; color: var(--text-secondary); line-height: 1.7; } /* ── Steps ─────────────────────────────────────────────────── */ .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2rem; } .step { text-align: center; position: relative; } .step__num { width: 64px; height: 64px; border-radius: 50%; background: var(--green); color: var(--white); font-size: 1.5rem; font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; box-shadow: 0 4px 16px rgba(74,163,106,.35); } .step__title { font-size: 1.05rem; font-weight: 700; margin-bottom: .5rem; } .step__body { font-size: .9rem; color: var(--text-secondary); } /* ── Prize Section ─────────────────────────────────────────── */ .prize-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; } .prize-card { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: var(--radius-xl); padding: 2rem; text-align: center; transition: background var(--ease), transform var(--ease); } .prize-card:hover { background: rgba(255,255,255,.13); transform: translateY(-3px); } .prize-card--grand { background: rgba(255,255,255,.14); border-color: rgba(74,163,106,.5); box-shadow: 0 0 0 1px rgba(74,163,106,.25); } .prize-card__badge { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: var(--green-light); color: var(--white); padding: .3rem .8rem; border-radius: var(--radius-pill); margin-bottom: 1rem; } .prize-card__value { font-size: 2.5rem; font-weight: 800; color: var(--green-light); margin-bottom: .25rem; line-height: 1; } .prize-card__title { font-size: 1.1rem; font-weight: 700; color: var(--white); margin-bottom: .5rem; } .prize-card__desc { font-size: .85rem; opacity: .75; } /* ── Registration Form ─────────────────────────────────────── */ .form-page { background: var(--off-white); min-height: 100vh; display: flex; flex-direction: column; } .form-card { background: var(--white); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden; } .form-card__header { background: var(--green); color: var(--white); padding: 2rem 2.5rem; } .form-card__title { font-size: 1.6rem; font-weight: 800; margin-bottom: .25rem; } .form-card__subtitle { opacity: .8; font-size: .95rem; } .form-card__body { padding: 2.5rem; } .form-section-title { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--green); margin-bottom: 1.25rem; padding-bottom: .5rem; border-bottom: 2px solid var(--green-pale); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.5rem; } .form-grid--3 { grid-template-columns: 1fr 1fr 1fr; } .form-group { display: flex; flex-direction: column; gap: .4rem; } .form-group--full { grid-column: 1 / -1; } .form-label { font-size: .85rem; font-weight: 600; color: var(--text); } .form-label .req { color: var(--error); margin-left: .15rem; } .form-input { padding: .75rem 1rem; border: 1.5px solid var(--light-gray); border-radius: var(--radius); font-size: .95rem; color: var(--text); background: var(--white); outline: none; transition: border-color var(--ease), box-shadow var(--ease); } .form-input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(74,163,106,.1); } .form-input.error { border-color: var(--error); } .form-input::placeholder { color: var(--mid-gray); } .form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23555' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; } .field-error { font-size: .78rem; color: var(--error); } .form-hint { font-size: .78rem; color: var(--dark-gray); } .checkbox-group { display: flex; gap: .75rem; align-items: flex-start; } .checkbox-group input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--green); flex-shrink: 0; margin-top: .15rem; cursor: pointer; } .checkbox-label { font-size: .875rem; color: var(--text-secondary); line-height: 1.5; } .checkbox-label a { color: var(--green); font-weight: 600; } .form-footer { padding: 1.5rem 2.5rem 2rem; border-top: 1px solid var(--light-gray); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .form-footer__note { font-size: .8rem; color: var(--dark-gray); } .form-footer__note a { color: var(--green); } .progress-bar-wrap { height: 4px; background: var(--light-gray); border-radius: 2px; margin-bottom: 2rem; } .progress-bar { height: 100%; background: var(--green); border-radius: 2px; transition: width .4s ease; } .progress-steps { display: flex; gap: 0; margin-bottom: 2.5rem; } .progress-step { flex: 1; text-align: center; position: relative; } .progress-step__dot { width: 28px; height: 28px; border-radius: 50%; background: var(--light-gray); border: 2px solid var(--light-gray); color: var(--mid-gray); font-size: .8rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0 auto .5rem; transition: all var(--ease); } .progress-step__dot.done { background: var(--green); border-color: var(--green); color: var(--white); } .progress-step__dot.active { background: var(--white); border-color: var(--green); color: var(--green); } .progress-step__label { font-size: .72rem; font-weight: 600; color: var(--mid-gray); } .progress-step__label.active { color: var(--green); } .progress-step::before { content: ''; position: absolute; top: 13px; right: 50%; left: -50%; height: 2px; background: var(--light-gray); } .progress-step:first-child::before { display: none; } .progress-step.done::before { background: var(--green); } /* ── Section Headings ──────────────────────────────────────── */ .section-head { text-align: center; margin-bottom: 3.5rem; } .section-head__eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--green); margin-bottom: .75rem; } .section-head--white .section-head__eyebrow { color: var(--green-light); } .section-head__title { font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin-bottom: .75rem; } .section-head--white .section-head__title { color: var(--white); } .section-head__sub { font-size: 1.05rem; color: var(--text-secondary); max-width: 560px; margin-inline: auto; } .section-head--white .section-head__sub { color: rgba(255,255,255,.75); } /* ── Accordion / FAQ ───────────────────────────────────────── */ .accordion { display: flex; flex-direction: column; gap: .75rem; } .accordion-item { background: var(--white); border: 1px solid var(--light-gray); border-radius: var(--radius-lg); overflow: hidden; } .accordion-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; font-size: .95rem; font-weight: 600; color: var(--text); text-align: left; gap: 1rem; transition: background var(--ease); } .accordion-btn:hover { background: var(--off-white); } .accordion-btn .icon { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--green-pale); color: var(--green); font-size: 1.1rem; transition: transform var(--ease); } .accordion-item.open .accordion-btn .icon { transform: rotate(45deg); } .accordion-body { max-height: 0; overflow: hidden; transition: max-height .3s ease; } .accordion-body p { padding: 0 1.5rem 1.25rem; font-size: .9rem; color: var(--text-secondary); line-height: 1.7; } /* ── Footer ────────────────────────────────────────────────── */ .site-footer { background: #0d1f14; color: rgba(255,255,255,.6); padding-block: 3rem 2rem; } .site-footer__grid { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: start; margin-bottom: 2.5rem; } .footer-brand__name { font-size: 1rem; font-weight: 700; color: var(--white); margin-bottom: .35rem; } .footer-brand__tagline { font-size: .8rem; } .footer-links { display: flex; gap: 1.5rem; flex-wrap: wrap; } .footer-links a { color: rgba(255,255,255,.6); font-size: .85rem; transition: color var(--ease); } .footer-links a:hover { color: var(--white); } .site-footer__bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: 1.5rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: .8rem; } .footer-legal { display: flex; gap: 1.25rem; flex-wrap: wrap; } .footer-legal a { color: rgba(255,255,255,.5); font-size: .78rem; } .footer-legal a:hover { color: var(--white); } /* ── Legal Sub-page ────────────────────────────────────────── */ .legal-page { background: var(--off-white); min-height: 100vh; } .legal-content { background: var(--white); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); padding: 3rem; margin-block: 2rem; } .legal-content h1 { font-size: 2rem; font-weight: 800; margin-bottom: .5rem; color: var(--green); } .legal-content .meta { font-size: .85rem; color: var(--mid-gray); margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--light-gray); } .legal-content h2 { font-size: 1.2rem; font-weight: 700; margin-top: 2rem; margin-bottom: .75rem; } .legal-content p, .legal-content li { font-size: .95rem; color: var(--text-secondary); line-height: 1.8; margin-bottom: .75rem; } .legal-content ul { list-style: disc; padding-left: 1.5rem; } .legal-content a { color: var(--green); } /* ── Success / Shutdown States ─────────────────────────────── */ .state-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 3rem 1.5rem; background: var(--green); color: var(--white); } .state-icon { width: 100px; height: 100px; background: rgba(255,255,255,.12); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 2rem; font-size: 3rem; border: 2px solid rgba(255,255,255,.2); } .state-title { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; margin-bottom: 1rem; } .state-body { font-size: 1.1rem; opacity: .8; max-width: 520px; margin-inline: auto; margin-bottom: 2.5rem; } /* ── Success overlay ───────────────────────────────────────── */ .success-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 200; align-items: center; justify-content: center; padding: 1.5rem; } .success-overlay.visible { display: flex; } .success-modal { background: var(--white); border-radius: var(--radius-xl); padding: 3rem 2.5rem; max-width: 500px; width: 100%; text-align: center; box-shadow: var(--shadow-lg); } .success-modal__icon { font-size: 3.5rem; margin-bottom: 1rem; } .success-modal__title { font-size: 1.6rem; font-weight: 800; margin-bottom: .5rem; } .success-modal__body { color: var(--text-secondary); margin-bottom: 2rem; } /* ── Trust Strip ───────────────────────────────────────────── */ .trust-strip { border-top: 1px solid var(--light-gray); border-bottom: 1px solid var(--light-gray); padding-block: 1rem; background: var(--off-white); } .trust-strip__inner { display: flex; justify-content: center; gap: 2.5rem; flex-wrap: wrap; align-items: center; } .trust-item { display: flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 600; color: var(--dark-gray); } .trust-item svg { width: 18px; height: 18px; fill: var(--green); } /* ── Toast ─────────────────────────────────────────────────── */ .toast { position: fixed; bottom: 2rem; right: 2rem; background: var(--text); color: var(--white); padding: 1rem 1.5rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); font-size: .9rem; font-weight: 400; z-index: 300; transform: translateY(120%); transition: transform .3s ease; max-width: 340px; } .toast.visible { transform: translateY(0); } .toast--success { background: var(--green); } .toast--error { background: var(--error); } /* ── Utility ───────────────────────────────────────────────── */ .text-center { text-align: center; } .text-green { color: var(--green); } .text-light { color: rgba(255,255,255,.75); } .font-bold { font-weight: 700; } .mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; } .mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; } .mb-4 { margin-bottom: 2rem; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } .divider { height: 1px; background: var(--light-gray); margin-block: 2rem; } .hidden { display: none !important; } /* ── Responsive ────────────────────────────────────────────── */ /* ── Utility ─── */ .hl-green { color: var(--green-light); } /* ── Post-Launch: POST ON X button ────────────────────────── */ .btn-post-x { display: inline-block; background: var(--green); color: var(--white); padding: .75rem 1.75rem; font-family: var(--font-condensed); font-weight: 800; font-size: 1rem; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; border: none; cursor: pointer; transition: background var(--ease); } .btn-post-x:hover { background: var(--green-dark); color: var(--white); } /* ── Post-Launch: Extra Chance to Win form ─────────────────── */ .sw-entry-section { background: var(--green-light); padding: 4.5rem 1.5rem; text-align: center; } .sw-entry-section__title { font-family: var(--font-condensed); font-weight: 900; font-size: clamp(2rem, 4.5vw, 3.5rem); text-transform: uppercase; color: #414042; letter-spacing: .03em; margin-bottom: .75rem; } .sw-entry-section__sub { font-size: 1rem; font-weight: 600; color: #414042; max-width: 560px; margin: 0 auto 2.5rem; line-height: 1.6; } .sw-form { max-width: 680px; margin-inline: auto; text-align: left; } .sw-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: .75rem; } .sw-form-row--full { grid-template-columns: 1fr; } .sw-input { width: 100%; padding: .85rem 1rem; border: 1.5px solid rgba(0,0,0,.25); background: var(--white); font-size: .95rem; color: var(--text); outline: none; transition: border-color var(--ease); font-family: var(--font); } .sw-input:focus { border-color: var(--green-dark); } .sw-input::placeholder { color: var(--mid-gray); } .sw-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23555' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-color: var(--white); padding-right: 2.5rem; cursor: pointer; } .sw-form-checks { margin: 1.25rem 0 .75rem; display: flex; flex-direction: column; gap: .65rem; text-align: left; } .sw-check-row { display: flex; align-items: flex-start; gap: .6rem; font-size: .88rem; color: #414042; font-weight: 400; line-height: 1.5; } .sw-check-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--green-dark); margin-top: .15rem; flex-shrink: 0; cursor: pointer; } .sw-form-legal { font-size: .78rem; color: rgba(0,0,0,.55); text-align: center; margin: .5rem 0 1.5rem; } .sw-form-legal a { color: #414042; font-weight: 600; } .btn-sw-submit { display: block; width: 100%; padding: 1.1rem; background: var(--green-dark); color: var(--white); font-family: var(--font-condensed); font-weight: 900; font-size: 1.3rem; letter-spacing: .1em; text-transform: uppercase; border: none; cursor: pointer; transition: background var(--ease); margin-top: 1rem; } .btn-sw-submit:hover { background: var(--green); } .btn-sw-submit:disabled { opacity: .5; cursor: not-allowed; } /* ── Post-Launch: Cars Won section ─────────────────────────── */ .cars-won-section { background: var(--green-light); padding: 5rem 1.5rem 4rem; position: relative; overflow: hidden; text-align: center; min-height: 540px; } .cars-won-bubbles { position: absolute; inset: 0; pointer-events: none; } .car-bubble { position: absolute; width: 68px; height: 68px; border-radius: 50%; background: var(--white); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; animation: bubbleFloat 6s ease-in-out infinite; } @keyframes bubbleFloat { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-18px) rotate(3deg); } } .cars-won-center { position: relative; z-index: 1; } .cars-won-counter { display: inline-block; background: #111; padding: .6rem 1.75rem; margin-bottom: .5rem; } .cars-won-counter__num { font-family: var(--font-condensed); font-weight: 900; font-size: clamp(4rem, 10vw, 7rem); color: var(--white); line-height: 1; display: block; font-variant-numeric: tabular-nums; } .cars-won-title { font-family: var(--font-condensed); font-weight: 900; font-size: clamp(2.5rem, 5vw, 4rem); text-transform: uppercase; color: #414042; line-height: 1.05; margin-bottom: .75rem; } .cars-won-sub { font-family: var(--font-condensed); font-weight: 800; font-size: clamp(1.1rem, 2.2vw, 1.6rem); text-transform: uppercase; color: var(--white); max-width: 560px; margin: 0 auto 2.5rem; } .winners-ticker { overflow: hidden; position: relative; z-index: 1; } .winners-ticker__track { display: flex; gap: 2rem; animation: tickerScroll 24s linear infinite; width: max-content; } @keyframes tickerScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .winner-tag { display: flex; flex-direction: column; align-items: center; gap: .4rem; flex-shrink: 0; } .winner-tag__name { border: 2px solid var(--white); padding: .45rem 1.1rem; font-family: var(--font-condensed); font-weight: 700; font-size: .95rem; letter-spacing: .1em; text-transform: uppercase; color: var(--white); white-space: nowrap; } .winner-tag__flag { font-size: 1.4rem; } /* ── Post-Launch: Live X Feed section ──────────────────────── */ .x-feed-section { background: var(--green-light); padding: 4rem 1.5rem; border-top: 2px solid rgba(0,0,0,.1); } .x-feed-section__title { font-family: var(--font-condensed); font-weight: 900; font-size: clamp(2.5rem, 5vw, 4rem); text-transform: uppercase; text-align: center; color: var(--white); letter-spacing: .04em; margin-bottom: 2rem; } .x-feed-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; max-width: 920px; margin-inline: auto; } .x-tweet-card { background: rgba(0,0,0,.22); border-radius: var(--radius-lg); padding: 1.25rem; display: flex; flex-direction: column; gap: .5rem; } .x-tweet-card__header { display: flex; align-items: center; gap: .75rem; } .x-tweet-card__avatar { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.3); flex-shrink: 0; } .x-tweet-card__handle { font-family: var(--font-condensed); font-weight: 700; font-size: 1rem; color: var(--white); } .x-tweet-card__text { font-size: .9rem; color: var(--white); line-height: 1.55; } .x-tweet-card__text .hashtag { color: #7dd8ff; font-weight: 600; } .x-tweet-card__time { font-size: .78rem; color: rgba(255,255,255,.55); } /* ── Post-Launch: Brand section CTA ────────────────────────── */ .brand-section__cta { display: inline-block; margin-top: 1.75rem; background: var(--green-light); color: var(--white); padding: .85rem 2rem; font-family: var(--font-condensed); font-weight: 800; font-size: 1.1rem; letter-spacing: .1em; text-transform: uppercase; border-radius: var(--radius-pill); text-decoration: none; transition: background var(--ease); } .brand-section__cta:hover { background: var(--green-dark); color: var(--white); } /* ── Post-Launch: Inline FAQ ────────────────────────────────── */ .faq-inline-section { background: var(--green-light); padding: 5rem 1.5rem; border-top: 2px solid rgba(0,0,0,.1); } .faq-inline-section__heading { font-family: var(--font-condensed); font-weight: 900; font-size: clamp(2rem, 5vw, 3.5rem); text-transform: uppercase; text-align: center; line-height: 1.1; margin-bottom: 2.5rem; } .faq-inline-section__heading .hl-dark { color: #414042; } .faq-inline-section__heading .hl-white { color: var(--white); } .faq-inline-list { max-width: 860px; margin-inline: auto; display: flex; flex-direction: column; gap: 1.5rem; } .faq-inline-item__q { font-family: var(--font-condensed); font-weight: 800; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .07em; color: #414042; margin-bottom: .35rem; } .faq-inline-item__a { font-size: .95rem; color: var(--white); line-height: 1.75; } /* ── Post-Launch: Official Rules section ───────────────────── */ .rules-section { background: var(--green-light); padding: 5rem 1.5rem; text-align: center; border-top: 2px solid rgba(0,0,0,.1); } .rules-section__eyebrow { font-family: var(--font-condensed); font-weight: 900; font-size: clamp(1.4rem, 3vw, 2.2rem); text-transform: uppercase; letter-spacing: .08em; color: #414042; margin-bottom: 1rem; } .rules-section__title { font-family: var(--font-condensed); font-weight: 900; font-size: clamp(2rem, 5vw, 3.5rem); text-transform: uppercase; letter-spacing: .06em; color: var(--white); margin-bottom: 2rem; } .rules-section__tbd { font-family: var(--font-condensed); font-weight: 900; font-size: clamp(1.5rem, 3.5vw, 2.5rem); text-transform: uppercase; color: #414042; } /* ── Responsive: post-launch additions ─────────────────────── */ /* Header nav collapse threshold — kicks in at the same width as the footer stacks (see 1050 px footer rule below), so both transitions happen on the same screen size instead of jumping in two separate steps. */ @media (max-width: 1050px) { .site-nav--left, .site-nav--right { display: none; } .hamburger { display: flex; position: absolute; right: 1rem; } .mobile-nav { display: flex; } .site-header__inner { display: flex; justify-content: center; align-items: center; position: relative; padding-inline: 1rem; } .site-logo { margin: 0 auto; } /* Hero: release the aspect-ratio lock so the section grows to fit its content (logo + subtitle + bottom bar) instead of clipping against a too-short fixed-proportion box. Min-height keeps it tall enough. */ .hero-main { aspect-ratio: auto; } } /* Footer logo "stubborn" threshold — stack to a column the moment the grid's first 1fr column would become narrower than the now-larger Enterprise logo (~265-340 px wide), or the 7-link nav row (after adding Privacy Choices) stops fitting inside the middle auto column. Threshold raised to 1200 px to give the wider nav row room before stacking. Above this, grid layout. Below, logo on its own row above the links. */ @media (max-width: 1200px) { .cs-footer__top { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; } /* Nav also stacks vertically here so the 6-link row never overflows the footer's inner width. Without this, the outer layout stacks but the nav itself still tries to render in one row and clips. */ .cs-footer__nav { flex-direction: column; gap: .75rem; } .cs-footer__nav-link + .cs-footer__nav-link::before { display: none; } .cs-footer__nav-link { padding: 0; } } @media (max-width: 768px) { :root { --hdr-h: 62px; } /* Stay in Touch — section padding now handled by the clamp() in .stay-touch-section base styles, no mobile-specific override needed. */ .stay-touch-h2 { font-size: .97rem; } .stay-touch-btn { padding: .5rem 2rem; font-size: 29.34px; width: 100%; display: block; text-align: center; } .hero-main { /* Mobile uses the 375x270 mobile key visual (aspect ~1.39). */ aspect-ratio: auto; min-height: 380px; } .hero-main__hashtag { font-size: clamp(3rem, 14vw, 6rem); } .hero-main__bottom { padding: 1rem; } .hero-main__bottom--live { grid-template-columns: 1fr auto; } .hero-main__bottom--live .btn-post-x { display: none; } /* Hero text stays at top on mobile */ .hero-main__body { align-items: flex-start; padding-bottom: 1rem; } .hero-main__content { padding: 1rem 1rem 1rem; } /* Bottom bar: equal-height buttons */ .hero-main__bottom { padding: 1rem 1.25rem; } .btn-rules, .hero-lang-trigger { font-size: clamp(12px, 3.5vw, 14px); padding: clamp(.45rem, 1.6vw, .6rem) clamp(.8rem, 2.8vw, 1.1rem); line-height: 1; } .hero-lang-trigger::before { font-size: clamp(12px, 3.5vw, 14px); } .hero-lang-trigger__flag { width: clamp(16px, 5vw, 20px); } /* Language dropdown rows */ .rules-lang-btn { font-size: clamp(12px, 3.5vw, 14px); padding: clamp(.45rem, 1.6vw, .6rem) clamp(.8rem, 2.8vw, 1.1rem); min-width: clamp(100px, 35vw, 140px); grid-template-columns: 20px 12px 1fr; gap: .35rem; justify-content: center; line-height: 1; } .rules-lang-btn::before { font-size: clamp(12px, 3.5vw, 14px); } .rules-lang-btn__flag { width: clamp(16px, 5vw, 20px); } .hero-legal { font-size: .6rem; text-align: left; } .x-feed-grid { grid-template-columns: 1fr; } .sw-form-row { grid-template-columns: 1fr; } .cars-won-section { min-height: 440px; padding: 3.5rem 1.5rem 3rem; } .car-bubble { width: 52px; height: 52px; font-size: 1.2rem; } .cd-tile { min-width: 0; } .cd-tile__num { width: clamp(60px, 17vw, 143px); height: clamp(45px, 13vw, 98px); font-size: clamp(36px, 12vw, 80px); padding: 4px 0 0 0; } .cd-tile__label { font-size: clamp(13px, 3.5vw, 39.06px); } /* How to Play — mobile redesign per design direction: - shared 5-column desktop grid → flex column, one step per row - each step is a 2-item flex row: image | text-stack - text-stack is .htp-step__right (now contains both title and desc) laid out as a vertical flex column, centered against the image - vertical divider and number circle hide (the mobile signal art has the number circle baked into the image) - title (green) sits above description (black) - title BRs are suppressed so each title reads on a single line (i18n strings have a leading space before each
for spacing) */ .htp-steps { display: flex; flex-direction: column; gap: clamp(1.5rem, 5vw, 2.5rem); /* Block widened (380px → 460px) and inner padding tightened (1rem → .25rem) so the image sits further left and the text column gets more horizontal room to stretch to the right. The block still centers in the viewport via `margin-inline: auto`. */ max-width: 460px; margin-inline: auto; padding-inline: .25rem; /* Reset desktop grid props so the flex layout takes over cleanly. */ grid-template-columns: none; } /* Two-column grid with an explicit, fixed image column. minmax(0, 1fr) stops grid from auto-expanding column 2 when the text's min-content (longest unbreakable word) exceeds the 1fr space — that auto-expansion can shift columns differently across locales because word lengths vary by language (e.g. German "Gewinnspielen" vs English "win"). Explicit grid-column on the children pins them so they can't auto-flow elsewhere if a future child is added/reordered. */ .htp-step { display: grid; grid-template-columns: clamp(80px, 22vw, 130px) minmax(0, 1fr); column-gap: clamp(.75rem, 3vw, 1.5rem); align-items: start; /* Force the grid container to fill its flex parent (.htp-steps). Without this, a grid-container-as-flex-item shrinks to its content's max-content when that max-content fits within the parent's cross-size — which then centers the whole row. Short-title locales (en, es) triggered this, longer-title locales (fr, de) did not, producing a locale-dependent horizontal shift of Signal1. `minmax(0, 1fr)` alone wasn't enough because it only caps col-2's TRACK at 1fr; it doesn't stop the grid CONTAINER from shrink-fitting around its content. */ width: 100%; } .htp-step__left { display: flex; align-items: flex-start; min-width: 0; grid-column: 1; } .htp-step__right { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: .15rem; min-width: 0; grid-column: 2; } /* Reset the desktop-only -30px nudge applied to the first step's right column. That rule (above, outside the media query) is for the desktop grid layout where it aligns the first title with the row's text track; on mobile it shifts step 1's text 30px left of steps 2-4 and breaks the vertical column alignment. */ .htp-step:first-child .htp-step__right { transform: none; } .htp-step__num, .htp-step__divider { display: none; } /* Reset the desktop explicit grid-column on every child so they fall back to natural flex flow. */ .htp-step__img, .htp-step__title, .htp-step__desc { grid-column: auto; } .htp-step__img { width: clamp(80px, 22vw, 130px); /* Reset desktop step-specific overrides so the mobile signal art lays out cleanly without negative margins, transforms, or backgrounds. */ margin: 0; transform: none; background: transparent; } /* Neutralize the desktop Signal1 / Signal2 / Signal3 overrides (larger width, negative margin, white fill, x-shifts) — the mobile signal art is sized and framed independently per step. */ /* All four mobile signal PNGs have their referee bodies at roughly the same horizontal offset within the canvas (~+17% right of center), so Signal1 with no transform aligns naturally with Signal4 (also no transform). The visible misalignment is between Signal2 / Signal3 (which carry their own X nudges below) and the Signal1 / Signal4 baseline — tune the knobs on Signal2 / Signal3 to align them with step 1. */ .htp-step__img[src*="Signal1"] { width: clamp(80px, 22vw, 130px); margin: 0; transform: none; } /* KNOB — Signal2 horizontal nudge on mobile. Negative = shift left, positive = shift right. Tune until step 2's referee aligns vertically with step 1's referee. */ .htp-step__img[src*="Signal2"] { background: transparent; transform: translateX(-2%); } /* Signal3's mobile asset has its visible figure offset right inside the transparent canvas, so a small negative X nudge re-centers the referee in line with the other steps' images. */ .htp-step__img[src*="Signal3"] { transform: translateX(-4%); } .htp-step__title { font-size: clamp(20px, 5.5vw, 28px); line-height: 1.1; margin: 0; } /* Drop the desktop stacking
s on mobile — titles read as a single line. The leading-space pattern in the i18n string keeps the words separated visually after the BR collapses. */ .htp-step__title br { display: none; } .htp-step__desc { margin: 0; } /* Steps 1-3 stay top-aligned (set by `align-items: flex-start` on .htp-step above) so their titles line up with the top of the figure. Step 4's mobile asset puts the referee at the top of the canvas with the numbered circle below, so the figure's vertical midpoint is in the upper half of the image — centering the text-stack against the full image bounding box lines "Play Again" up with the referee figure rather than stranding it at the top of the empty area above. */ .htp-step:last-child { align-items: center; } /* Brand section — aspect-ratio removed so section grows for content. Swap to mobile storefront art (the desktop crop pixelates on small viewports). Anchor content to the TOP on mobile so the copy sits above the storefront scene instead of overlapping it. */ .brand-section { aspect-ratio: auto; min-height: 460px; background-image: url('../storefront-mobile.png'); align-items: flex-start; } /* US locales (en-US / es-US) get the Enterprise Car Sales storefront on mobile, mirroring the desktop swap from were-on-your-corner-global.jpg → were-on-your-corner-us.jpg in the base rule above. */ body.locale-us .brand-section { background-image: url('../storefront-car-sales-mobile.png'); } /* Padding scales with viewport so the gap between heading/body/tagline stays visually proportional as the screen shrinks (the previous fixed rem values made the spacing look too generous on narrow viewports). Top padding is bumped extra so the heading sits a bit below the section edge rather than crowding it. */ .brand-section__content { padding: clamp(2rem, 8vw, 3rem) clamp(1rem, 4vw, 1.5rem) clamp(.5rem, 2vw, .75rem); } /* Higher font-size floor + faster growth rate so the title holds its visual weight on narrow viewports instead of collapsing to 1.6rem. margin-bottom scales with viewport to match. */ .brand-section__title { white-space: normal; font-size: clamp(2rem, 7.5vw, 2.8rem); line-height: 1.1; margin-bottom: clamp(.5rem, 2.5vw, 1.25rem); } .brand-section__body { white-space: normal; font-size: clamp(15px, 4vw, 21.39px); line-height: 1.35; margin-bottom: clamp(.5rem, 2vw, 1rem); } .brand-section__tagline { font-size: clamp(15px, 4vw, 21.39px); } .brand-section__legal { white-space: normal; font-size: 8pt; margin-top: 0.75rem; } /* Follow section — aspect-ratio drives height. Swap to mobile kick-still art (the desktop crop pixelates on small viewports). Anchor content to the TOP so the heading + link sit above the kick still image, matching the storefront treatment. */ .follow-section { background-image: url('../kick-still-mobile.png'); align-items: flex-start; } .follow-section__content { padding: clamp(2rem, 8vw, 3rem) clamp(1rem, 4vw, 1.5rem); } .follow-section__title { font-size: clamp(2rem, 7.5vw, 2.8rem); line-height: 1.1; margin-bottom: clamp(.1rem, .8vw, .35rem); } /* Match the heading size so "@Enterprise" reads at the same weight. */ .follow-section__link { font-size: clamp(2rem, 7.5vw, 2.8rem); line-height: 1; } /* Countdown — bump top-padding so the heading isn't crowded against the hero image above, and tighten the gap between the heading and the countdown tiles below (the desktop 2 rem margin-bottom reads as too much vertical air at mobile scale). */ .cd-section { padding-top: 2.5rem; } .cd-section__title { margin-bottom: 1rem; } /* (Get Notified top-padding bump lives in the later @media block at the bottom of the file, because the .optin-section base rule sits AFTER this @media block and would otherwise win the cascade.) */ /* Opt-in form — section padding handled by base clamp() now. Mobile-only font + line-height tweaks so the wrapped disclaimer and checkbox label read tighter than the desktop defaults (1.6 line-height on the disclaimer and the inherited ~1.5 on the checkbox row drift too loose when the text wraps onto 2-3 lines at narrow widths). */ .optin-disclaimer { font-size: .75rem; line-height: 1.3; margin-bottom: 1.5rem; } .optin-check-row { font-size: .88rem; line-height: 1.2; text-align: left; } .optin-submit { padding: .7rem 2rem .3rem; font-size: 29.34px; width: 100%; } /* Coming soon FAQ — section padding handled by base clamp(). The bottom mobile bump lives in the later @media block at the bottom of the file, because the .faq-cs-section base rule sits AFTER this @media block and would otherwise win the cascade. */ .faq-cs-list { gap: 1.25rem; } .faq-cs-item__q { font-size: 1rem; } .faq-cs-item__a { font-size: .9rem; } /* Coming soon footer */ .cs-footer { padding: 3.5rem 1.5rem; } .hero { padding-block: 4rem 3.5rem; } .hero--cs { padding-block: 5rem 4rem; } .section { padding-block: 3.5rem; } .form-grid { grid-template-columns: 1fr; } .form-grid--3 { grid-template-columns: 1fr; } .form-card__body { padding: 1.5rem; } .form-card__header { padding: 1.5rem; } .form-footer { padding: 1.25rem 1.5rem 1.5rem; flex-direction: column; align-items: flex-start; } .site-footer__grid { grid-template-columns: 1fr; } .site-footer__bottom { flex-direction: column; align-items: flex-start; } .legal-content { padding: 1.75rem; } .countdown__digit { width: 44px; height: 54px; font-size: 1.6rem; } .header-cta { display: none; } .progress-step__label { font-size: .65rem; } .subscribe-form { flex-direction: column; } .subscribe-form input[type="email"] { min-width: unset; } } @media (max-width: 480px) { .countdown { gap: .5rem; } .countdown__digit { width: 38px; height: 46px; font-size: 1.4rem; } .countdown__sep { font-size: 2rem; } .prize-card__value { font-size: 2rem; } .cd-tiles { gap: .5rem; } .cd-tile { min-width: 60px; } /* Coming soon: small phones */ .hero-main__content { padding: 1rem 1rem .75rem; } .hero-main__hashtag { font-size: clamp(2.4rem, 12vw, 4rem); } .optin-title { font-size: clamp(1.6rem, 7vw, 2.4rem); } .optin-ty-h1 { font-size: clamp(2.4rem, 10vw, 4rem); } .optin-ty-h2 { font-size: clamp(1rem, 4.5vw, 1.5rem); } .cs-footer { padding: 2.5rem 1rem; } /* .faq-cs-section padding handled by base clamp(). */ } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } @media print { .site-header, .site-footer, .btn { display: none !important; } .legal-content { box-shadow: none; padding: 0; } body { font-size: 12pt; } } /* ── Coming Soon: Opt-in Thank You state ───────────────────── */ .optin-thankyou { display: none; } .optin-thankyou.visible { display: block; } .optin-ty-h1 { font-family: var(--font-condensed); font-weight: 900; font-size: clamp(3rem, 7vw, 5.5rem); text-transform: uppercase; color: var(--green); line-height: 1; margin-bottom: 1.25rem; } .optin-ty-h2 { font-family: var(--font-condensed); font-weight: 700; font-size: clamp(1.25rem, 3vw, 2rem); color: var(--text); line-height: 1.3; max-width: 620px; margin-inline: auto; } /* ── Coming Soon: FAQ ──────────────────────────────────────── */ .faq-cs-section { background: #fff; /* Three-value padding: top / horizontal / bottom. Top floor bumped to 2.5rem (and max to 5.5rem) so the gap between the gray-line above and the heading reads with extra breathing room; bottom kept tighter. */ padding: clamp(2.5rem, 6vw, 5.5rem) clamp(1rem, 3vw, 1.5rem) clamp(1.5rem, 5vw, 4.5rem); /* Matches the .htp-section / .cd-section separator pattern. */ border-top: 1px solid var(--light-gray); } .faq-cs-section__heading { font-family: var(--font-condensed); font-weight: 700; /* Matches .stay-touch-h1 / .optin-title so the FAQ heading reads at the same scale as the Stay-in-Touch / Opt-in headers (rather than the much larger .cd-section__title / .htp-section__title pair). */ font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.1; text-transform: uppercase; text-align: center; color: var(--text); letter-spacing: 0; margin-bottom: 2.5rem; } .faq-cs-list { max-width: 860px; margin-inline: auto; display: flex; flex-direction: column; gap: 1.75rem; } .faq-cs-item__q { /* FAQ questions match step description size per direction. */ font-family: var(--font-condensed); font-weight: 700; font-size: 25.19px; line-height: 29.49px; text-transform: uppercase; letter-spacing: 0; color: var(--green); margin-bottom: .35rem; } .faq-cs-item__a { /* Body text: medium, not condensed, pure black. Unbolded for coming-soon via inline !important override (the global body * { font-weight: 700 !important } in coming-soon/index.html would otherwise force the answers bold). */ font-family: var(--font); font-weight: 400; font-size: .97rem; color: #000; line-height: 1.4; } /* ── Coming Soon: Opt-in Form ──────────────────────────────── */ .optin-section { background: #fff; /* Sits between the cd-section gray-line (above) and the htp-section gray-line (below) — vertical padding scales with viewport so neither gap reads as oversized on mobile. */ padding: clamp(1.5rem, 5vw, 4rem) clamp(1rem, 3vw, 1.5rem); } .optin-inner { max-width: 780px; margin-inline: auto; text-align: center; } .optin-title { font-family: var(--font-condensed); font-weight: 900; font-size: clamp(2rem, 5vw, 3.2rem); color: var(--text); line-height: 1.1; margin-bottom: 1rem; text-transform: uppercase; } .optin-sub { font-size: 17px; line-height: 1.3; color: #000; margin-bottom: .75rem; } /* The i18n string puts a hard
before "launch" so desktop reads as two lines ("...tournament and sweepstakes" / "launch on June 11, 2026."). On mobile the natural wrap is already two lines (and at a different point), so suppress the forced break to avoid a stranded third row. Trailing space before the
survives the hidden BR so words stay separated. */ @media (max-width: 768px) { .optin-sub br { display: none; } } .optin-disclaimer { font-size: .8rem; color: #000; line-height: 1.6; margin-bottom: 2rem; /* Narrow the disclaimer so it wraps onto two roughly-equal lines. */ max-width: 31rem; margin-inline: auto; } .optin-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.25rem; } .optin-input { width: 100%; padding: .75rem 1rem; border: 1.5px solid #000; border-radius: 0; font-size: 1rem; font-family: var(--font); color: var(--text); background: #fff; outline: none; transition: border-color .2s; } .optin-input:focus { border-color: var(--green); } .optin-select { cursor: pointer; } /* Force the same placeholder gray on both the text inputs and the unselected country dropdown. Browser default ::placeholder uses ~54%-of-black (≈#757575), not 54%-of-input-color, so we set the value explicitly on both so they read as identical. Options themselves stay full-color when the menu opens. */ .optin-input::placeholder { color: #757575; opacity: 1; } .optin-select:invalid { color: #757575; } .optin-select option { color: var(--text); } .optin-check-row { display: flex; align-items: center; justify-content: center; gap: .75rem; font-size: .95rem; color: #000; margin-bottom: 1.5rem; cursor: pointer; } .optin-check-row input[type="checkbox"] { width: 22px; height: 22px; /* appearance: none + manual border so the box gets a reliable black outline across browsers (native checkboxes ignore plain `border`). :checked rule restores the visual tick via a CSS background-image. */ appearance: none; -webkit-appearance: none; border: 1.5px solid #000; border-radius: 2px; background: #fff; flex-shrink: 0; cursor: pointer; display: inline-block; } .optin-check-row input[type="checkbox"]:checked { background: var(--green); border-color: var(--green); background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: center; background-size: 16px 16px; } .optin-submit { background: var(--green); color: #fff; border: none; /* Asymmetric vertical padding (top .7rem / bottom .3rem) keeps the total button height the same as the prior symmetric .5rem/.5rem but nudges the text down to true visual center — DIN Next Condensed's metrics place the glyph slightly above the line-box's geometric center. */ padding: .7rem 3rem .3rem; font-family: var(--font-condensed); font-weight: 700; font-size: 29.34px; line-height: 28.43px; letter-spacing: 0; text-align: center; text-transform: uppercase; border-radius: 6px; cursor: pointer; transition: background .2s; /* Match the natural width of .stay-touch-btn ("Click Here" is wider than "Submit"). */ min-width: 15rem; } .optin-submit:hover { background: var(--green-dark); } @media (max-width: 600px) { .optin-fields { grid-template-columns: 1fr; } } /* ── Coming Soon: Stay in Touch ───────────────────────────── */ .stay-touch-section { background: #fff; /* Vertical padding scales with viewport — both the gap above (below the follow-section image) and the gap below (above the gray-line separator under the Click Here button) get the same breathing room. Floor raised from 1.5rem to 2rem and max from 4rem to 4.5rem for a touch more space. */ padding: clamp(2rem, 5.5vw, 4.5rem) clamp(1rem, 3vw, 1.5rem); } .stay-touch-inner { max-width: 780px; margin-inline: auto; text-align: center; } .stay-touch-h1 { font-family: var(--font-condensed); font-weight: 900; font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.1; text-transform: uppercase; color: var(--text); letter-spacing: 0; margin-bottom: 1rem; } .stay-touch-h2 { /* Body-style copy: medium weight, pure black, comfortable reading size. line-height is unitless so the inter-line gap stays proportional to the font-size at every viewport (instead of locking to a fixed 25.4 px that read too loose on mobile). */ font-family: var(--font); font-weight: 500; font-size: 17px; line-height: 1.2; color: #000; margin-bottom: 2rem; } /* The i18n string puts a hard
before "delivered" so desktop reads as two lines ("...and special offers" / "delivered directly to your inbox."). Suppress on mobile so the narrow viewport gets a natural wrap instead of a stranded third row. Trailing space before the
survives the hidden BR so "offers delivered" stays separated. */ @media (max-width: 768px) { .stay-touch-h2 br { display: none; } } .stay-touch-btn { display: inline-block; background: var(--green); color: #fff; /* Same asymmetric padding as .optin-submit — nudges "Click Here" down to true visual center against the DIN Next Condensed glyph metrics. */ padding: .7rem 3rem .3rem; font-family: var(--font-condensed); font-weight: 700; font-size: 29.34px; line-height: 28.43px; letter-spacing: 0; text-align: center; text-transform: uppercase; text-decoration: none; border-radius: 6px; transition: background var(--ease); /* Match the Submit button so both render at the same size. */ min-width: 15rem; } .stay-touch-btn:hover { background: var(--green-dark); color: #fff; } /* ── Coming Soon: Footer ─────────────────────────────────── */ .cs-footer { background: var(--green); padding: 2.5rem 2.5rem 3rem; scroll-margin-top: var(--hdr-h); } .cs-footer__top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem; margin-bottom: 2rem; } .cs-footer__logo-link { display: block; flex-shrink: 0; } .cs-footer__logo-img { /* Matches .site-logo__img (44px) so the header and footer logos read at the same scale. max-width override stops the global `img { max-width: 100% }` rule from shrinking the SVG when its parent column narrows. */ height: 44px; width: auto; max-width: none; display: block; } .cs-footer__nav { display: flex; align-items: center; justify-content: center; /* Allow the row of footer links to wrap onto a second line at narrower viewports (between full desktop and the <=768px column stack) so items have adequate room and the privacy-choices icon stops crowding the next link's vertical separator. */ flex-wrap: wrap; row-gap: .5rem; } .cs-footer__nav-link { font-family: var(--font); font-weight: 500; font-size: 14px; color: #fff; text-decoration: none; /* Responsive horizontal padding — 24 px on desktop, shrinks to ~10 px just before the 768 px stack-to-column breakpoint so the 6-link row doesn't overflow the footer's middle grid column in the 800-900 px range. */ padding: 0 clamp(.6rem, 1.5vw, 1.5rem); white-space: nowrap; position: relative; } .cs-footer__nav-link + .cs-footer__nav-link::before { content: ''; position: absolute; left: 0; top: 15%; height: 70%; width: 1px; background: rgba(255,255,255,.4); } /* When the nav wraps to multiple lines, the first link of each new row is tagged via JS (markFooterRowStarts in app.js) so its leading vertical separator is suppressed. Without this the row-start link shows a stray pipe at its left edge. */ .cs-footer__nav-link--row-start::before { display: none; } .cs-footer__nav-link:hover { color: #fff; text-decoration: underline; text-decoration-color: #fff; } /* Privacy Choices CCPA icon — sits inline before the link text. The link uses an inner span for i18n so locale changes don't replace the icon. */ .cs-footer__nav-link--with-icon { display: inline-flex; align-items: center; gap: .35rem; } .cs-footer__privacy-icon { height: .85em; width: auto; flex-shrink: 0; } .cs-footer__locale { flex-shrink: 0; } .cs-footer__locale-select { background: transparent; border: 1px solid #fff; color: #fff; padding: .35rem .75rem; font-family: var(--font); font-size: .9rem; cursor: pointer; border-radius: 2px; } .cs-footer__locale-select option { color: #000; } .cs-footer__npn { font-family: var(--font); font-weight: 400; font-size: 10pt; line-height: 1.5; color: #ffffff; text-align: center; max-width: 900px; margin-inline: auto; } .cs-footer__npn strong { font-weight: 700; } /* Trademark / copyright stanza beneath the NPN sweepstakes legal copy. Same white-on-green styling and size as .cs-footer__npn; the margin-top adds the visual gap requested between the two legal blocks. */ .cs-footer__trademark { font-family: var(--font); font-weight: 400; font-size: 10pt; line-height: 1.5; color: #ffffff; text-align: center; max-width: 900px; margin-inline: auto; margin-top: 1.5rem; } @media (max-width: 768px) { .cs-footer { padding: 2rem 1.25rem 3rem; } .cs-footer__top { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; } .cs-footer__nav { flex-direction: column; gap: .75rem; } .cs-footer__nav-link + .cs-footer__nav-link::before { display: none; } .cs-footer__nav-link { padding: 0; } /* ── Mobile overrides that must come AFTER the coming-soon base rules (.optin-section / .faq-cs-section base styles sit above ~line 2450, which is AFTER the main @media block near the top of this file — so overrides for them have to live HERE to win the cascade). ───── */ .optin-section { padding-top: 2.5rem; } .faq-cs-section { padding-bottom: 4.5rem; } }