/* Theme Name: MoeBiker Giveaway Theme URI: https://moebiker.com/ Author: Muhammad Ali Author URI: https://moebiker.com/ Description: Landing page theme for the MoeBiker / NAMIL annual motorcycle giveaway. Bold poster-style one-pager with a countdown, entry form wired to ActiveCampaign, and an editable content panel in the Customizer. Built from the Claude Design "MoeBiker Landing v3" comp. Version: 1.3.1 Requires at least: 6.0 Tested up to: 6.7 Requires PHP: 8.0 License: All Rights Reserved Text Domain: moebiker-giveaway */ /* ============================================================ SELF-HOSTED FONTS (no third-party request, no render block) ============================================================ */ @font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/anton-400.woff2) format('woff2'); } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 900; font-stretch: 62% 125%; font-display: swap; src: url(fonts/archivo-var.woff2) format('woff2'); } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/barlow-400.woff2) format('woff2'); } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/barlow-500.woff2) format('woff2'); } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/barlow-600.woff2) format('woff2'); } /* ============================================================ DESIGN TOKENS ============================================================ */ :root { --paper: #F4F1EA; --sand: #EDE9E0; --sand-deep: #DCD7CD; --ink: #141414; --red: #C4241A; /* deepened so cream/white text on it clears WCAG AA */ --red-bright: #D62B1F; /* the original, for large decorative fills only */ --red-ink: #A81C13; /* red for links / small text on light backgrounds */ --body: #2F2C2A; --soft: #4F4B46; --muted: #57534C; /* was #6E6A66 — now ~6:1 on --paper */ --muted-dark: #A7A29A; /* was #9A958E — now ~5.4:1 on --ink */ --rule: rgba(20,20,20,.28); --font-display: 'Anton', 'Oswald', 'Arial Narrow', sans-serif; --font-label: 'Archivo', 'Arial Narrow', system-ui, sans-serif; --font-body: 'Barlow', system-ui, -apple-system, sans-serif; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--paper); } html { scroll-behavior: smooth; } body { font-family: var(--font-body); color: var(--ink); -webkit-font-smoothing: antialiased; /* NOTE: no overflow-x here — it turns into a scroll container and breaks anchor jumps / scrollIntoView. Horizontal overflow is clipped on .mbk-page instead (overflow: clip, which has no scroll-container effect). */ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Anchor jumps must clear the sticky header, or the heading lands behind it */ section[id], #top, #form, [data-hero-section] { scroll-margin-top: 108px; } @media (max-width: 900px) { section[id], #top, #form, [data-hero-section] { scroll-margin-top: 82px; } } @media (max-width: 560px) { section[id], #top, #form, [data-hero-section] { scroll-margin-top: 68px; } } img { max-width: 100%; height: auto; } a { color: var(--red-ink); text-decoration: none; } a:hover { color: var(--ink); } ::selection { background: var(--red); color: var(--paper); } input, select, button, textarea { font-family: var(--font-body); } .mbk-label { font-family: var(--font-label); font-variation-settings: 'wdth' 88; font-weight: 700; text-transform: uppercase; } .mbk-display { font-family: var(--font-display); text-transform: uppercase; } /* skip link */ .mbk-skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--ink); color: var(--paper); padding: 10px 16px; font-family: var(--font-label); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; } .mbk-skip:focus { left: 8px; top: 8px; color: var(--paper); } /* ============================================================ PAGE SHELL ============================================================ */ .mbk-page { background: var(--paper); color: var(--ink); font-family: var(--font-body); overflow-x: clip; /* clips the marquee/rotated overflow without becoming a scroll container */ position: relative; } .mbk-noise { position: fixed; inset: 0; z-index: 120; pointer-events: none; opacity: .1; background-image: radial-gradient(var(--ink) 1px, transparent 1.3px); background-size: 5px 5px; } .mbk-progress { position: fixed; top: 0; left: 0; right: 0; height: 4px; background: var(--red); transform: scaleX(0); transform-origin: 0 50%; z-index: 130; } /* ============================================================ HEADER ============================================================ */ .mbk-header { position: sticky; top: 0; z-index: 90; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 12px 26px; background: var(--paper); border-bottom: 3px solid var(--ink); } .mbk-header__logo { display: flex; align-items: center; gap: 10px; color: var(--ink); } .mbk-header__logo img { height: 70px; width: auto; display: block; } .mbk-header__nav { display: flex; gap: 24px; justify-content: center; font-family: var(--font-label); font-variation-settings: 'wdth' 88; font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; } .mbk-header__nav a { color: var(--ink); display: inline-block; padding: 8px 2px; } .mbk-header__nav a:hover { color: var(--red); } .mbk-header__actions { display: flex; gap: 18px; align-items: center; justify-content: flex-end; } .mbk-header__phone { font-family: var(--font-display); text-transform: uppercase; font-size: 16px; letter-spacing: .03em; color: var(--ink); } .mbk-header__phone:hover { color: var(--red); } /* Sticker / offset-shadow button */ .mbk-btn { display: inline-flex; align-items: center; gap: 12px; background: var(--red); color: var(--paper); border: 3px solid var(--ink); box-shadow: 7px 7px 0 var(--ink); font-family: var(--font-display); text-transform: uppercase; font-size: 22px; letter-spacing: .06em; padding: 20px 30px; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; } .mbk-btn:hover { color: var(--paper); transform: translate(3px, 3px); box-shadow: 4px 4px 0 var(--ink); } .mbk-btn:active { transform: translate(7px, 7px); box-shadow: 0 0 0 var(--ink); } .mbk-btn--sm { font-size: 15px; padding: 11px 18px; border-width: 2.5px; box-shadow: 4px 4px 0 var(--ink); } .mbk-btn--sm:hover { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ink); } .mbk-btn--ink { background: var(--ink); } .mbk-btn--ink.mbk-btn--shadow-red { box-shadow: 6px 6px 0 var(--red); } .mbk-btn--ink.mbk-btn--shadow-red:hover { box-shadow: 3px 3px 0 var(--red); } .mbk-btn--ghost-paper { background: var(--red); border-color: var(--paper); box-shadow: 7px 7px 0 var(--paper); } .mbk-btn--ghost-paper:hover { box-shadow: 4px 4px 0 var(--paper); } .mbk-btn__arrow { font-size: 20px; line-height: 1; } .mbk-rules-link { font-family: var(--font-label); font-variation-settings: 'wdth' 88; font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--ink); padding-bottom: 3px; } .mbk-rules-link:hover { color: var(--ink); } /* ============================================================ MARQUEES ============================================================ */ .mbk-marquee-top { background: var(--ink); color: var(--paper); padding: 9px 0; overflow: hidden; } .mbk-marquee-top__track, .mbk-marquee__track { display: flex; width: max-content; white-space: nowrap; } .mbk-marquee-top__track { font-family: var(--font-label); font-variation-settings: 'wdth' 88; font-weight: 700; font-size: 12px; letter-spacing: .15em; text-transform: uppercase; } .mbk-marquee-top__track span, .mbk-marquee__track span { padding-right: 34px; } .mbk-marquee-top__track .star { color: var(--red); } .mbk-marquee { background: var(--red); color: var(--paper); padding: 11px 0; overflow: hidden; border-bottom: 3px solid var(--ink); } .mbk-marquee__track { font-family: var(--font-display); text-transform: uppercase; font-size: 30px; letter-spacing: .03em; } .mbk-marquee__track span { padding-right: 38px; } .mbk-marquee__track .star { color: var(--ink); } /* ============================================================ HERO ============================================================ */ .mbk-hero { position: relative; border-bottom: 3px solid var(--ink); display: grid; grid-template-columns: 1.18fr .82fr; align-items: stretch; } .mbk-hero__copy { padding: 52px 26px 38px; border-right: 3px solid var(--ink); } .mbk-hero__badge-pill { display: inline-flex; align-items: center; gap: 9px; background: var(--ink); color: var(--paper); padding: 7px 13px; font-family: var(--font-label); font-variation-settings: 'wdth' 88; font-weight: 700; font-size: 12px; letter-spacing: .15em; text-transform: uppercase; margin-bottom: 26px; transform: rotate(-1.2deg); } .mbk-dot { width: 7px; height: 7px; background: var(--red); border-radius: 50%; } .mbk-hero__title { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(52px, 9.4vw, 160px); line-height: 1; letter-spacing: -.005em; margin: 0; } .mbk-word { display: block; overflow: hidden; padding-bottom: .04em; } .mbk-word > span { display: block; } .mbk-hero__title .mbk-word:nth-child(2) { padding-bottom: .06em; } .mbk-hero__title .is-red { color: var(--red); -webkit-text-stroke: 2px var(--ink); } .mbk-hero__rule { height: 6px; background: var(--ink); margin: 22px 0 26px; } .mbk-hero__lead-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 36px; flex-wrap: wrap; } .mbk-hero__lead { font-size: 18px; line-height: 1.5; color: var(--body); max-width: 520px; margin: 0; text-wrap: pretty; } .mbk-hero__cta { display: flex; align-items: center; gap: 20px; } .mbk-hero__art { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; min-height: 560px; background: var(--paper); } .mbk-hero__rays { position: absolute; inset: -24%; background: repeating-conic-gradient(from 0deg at 50% 55%, var(--red) 0deg 6deg, transparent 6deg 12deg); opacity: .16; } .mbk-hero__art-inner { position: relative; width: 100%; padding: 0 8px; } .mbk-hero__art-inner img { width: 100%; height: auto; display: block; } .mbk-hero__seal { position: absolute; right: 16px; bottom: 16px; width: 132px; height: 132px; } /* ============================================================ SPONSOR BAR ============================================================ */ .mbk-sponsors { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; padding: 16px 26px; border-bottom: 3px solid var(--ink); background: var(--sand); } .mbk-sponsors__label { font-family: var(--font-label); font-variation-settings: 'wdth' 88; font-weight: 700; font-size: 12px; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); } .mbk-sponsors a { display: flex; align-items: center; } .mbk-sponsors img { height: 84px; width: auto; display: block; } .mbk-sponsors img.is-namil { mix-blend-mode: multiply; } .mbk-sponsors__divider { width: 3px; height: 20px; background: var(--ink); } /* ============================================================ GENERIC SECTION HEAD ============================================================ */ .mbk-section { padding: 66px 26px; border-bottom: 3px solid var(--ink); } .mbk-section--paper { background: var(--paper); } .mbk-section--sand { background: var(--sand); } .mbk-section--ink { background: var(--ink); color: var(--paper); } .mbk-section--red { background: var(--red); color: var(--paper); } .mbk-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding-bottom: 20px; border-bottom: 3px solid var(--ink); margin-bottom: 40px; } .mbk-section--ink .mbk-head { border-color: var(--paper); } .mbk-head__title { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(30px, 4vw, 62px); line-height: .95; margin: 0; } .mbk-head__num { font-family: var(--font-label); font-variation-settings: 'wdth' 88; font-weight: 700; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .mbk-section--ink .mbk-head__num { color: var(--muted-dark); } /* ============================================================ PRIZE TABLE ============================================================ */ #prize { padding: 66px 26px 0; } .mbk-prize-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding-bottom: 20px; border-bottom: 3px solid var(--ink); } .mbk-prize-row { display: grid; grid-template-columns: 210px 1fr auto; gap: 24px; align-items: baseline; padding: 26px 0; border-bottom: 2px solid var(--rule); } .mbk-prize-row:last-child { padding: 26px 0 52px; border-bottom: none; } .mbk-prize-row__k { font-family: var(--font-label); font-variation-settings: 'wdth' 88; font-weight: 700; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); } .mbk-prize-row__v { font-size: 17px; line-height: 1.5; color: var(--body); max-width: 620px; } .mbk-prize-row__n { font-family: var(--font-display); font-size: clamp(38px, 4.6vw, 72px); line-height: .9; } .mbk-prize-row__n.is-red { color: var(--red); } /* ============================================================ COUNTDOWN ============================================================ */ .mbk-cd { padding: 56px 26px; border-bottom: 3px solid var(--ink); } .mbk-cd__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 30px; } .mbk-cd__head h2 { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(28px, 3.6vw, 56px); line-height: .95; margin: 0; } .mbk-cd__deadline { font-family: var(--font-label); font-variation-settings: 'wdth' 88; font-weight: 700; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-dark); } .mbk-cd__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .mbk-cd__cell { border: 3px solid var(--paper); padding: 22px 18px 14px; } .mbk-cd__cell.is-seconds { border-color: var(--red); background: var(--red); } .mbk-cd__n { font-family: var(--font-display); font-size: clamp(48px, 7.4vw, 116px); line-height: .88; } .mbk-cd__l { font-family: var(--font-label); font-variation-settings: 'wdth' 88; font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-dark); margin-top: 10px; } .mbk-cd__cell.is-seconds .mbk-cd__l { color: rgba(244,241,234,.8); } /* ============================================================ ENTRY FORM ============================================================ */ #form { padding: 66px 26px; } .mbk-form-grid { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 52px; align-items: start; } .mbk-form-aside { position: sticky; top: 96px; align-self: start; } .mbk-form-aside h2 { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(50px, 8vw, 140px); line-height: .84; margin: 0 0 22px; -webkit-text-stroke: 2px var(--ink); } .mbk-form-aside p { font-size: 18px; line-height: 1.5; margin: 0 0 26px; max-width: 400px; color: rgba(244,241,234,.92); } .mbk-form-aside__list { display: grid; font-family: var(--font-label); font-variation-settings: 'wdth' 88; font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; border-top: 2px solid rgba(244,241,234,.5); } .mbk-form-aside__list span { padding: 13px 0; border-bottom: 2px solid rgba(244,241,234,.5); } .mbk-form-card { background: var(--paper); color: var(--ink); border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); padding: 34px; } .mbk-form { display: grid; gap: 20px; } .mbk-form label { display: grid; gap: 7px; font-family: var(--font-label); font-variation-settings: 'wdth' 88; font-weight: 700; font-size: 12px; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); } .mbk-form label .req { color: var(--red); } .mbk-form input { background: #fff; border: 2px solid var(--ink); color: var(--ink); font-size: 17px; padding: 12px; outline: none; } .mbk-form input:focus { border-color: var(--red); } .mbk-form input.is-error { border-color: var(--red); background: #FCEBE9; } .mbk-form__row-2 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); gap: 20px; } .mbk-form__row-addr { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,.8fr) minmax(0,.9fr); gap: 20px; } .mbk-form input[name="state"] { text-transform: uppercase; } .mbk-form__consent { font-size: 13.5px; line-height: 1.55; color: var(--soft); margin: 2px 0 0; font-style: italic; font-weight: 600; } .mbk-form__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .mbk-form__recaptcha-note { font-family: var(--font-label); font-variation-settings: 'wdth' 88; font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .mbk-form__recaptcha-note a { color: var(--muted); text-decoration: underline; } .mbk-form button[type="submit"] { background: var(--ink); color: var(--paper); border: 3px solid var(--ink); font-family: var(--font-display); font-size: 24px; letter-spacing: .06em; text-transform: uppercase; padding: 20px; cursor: pointer; margin-top: 6px; transition: transform .12s ease, box-shadow .12s ease, opacity .2s ease; } .mbk-form button[type="submit"]:hover { transform: translate(3px,3px); box-shadow: -3px -3px 0 var(--red); } .mbk-form button[type="submit"][disabled] { opacity: .55; cursor: default; transform: none; box-shadow: none; } .mbk-form__error { background: #FCEBE9; border: 2px solid var(--red); color: #8A1B12; padding: 12px 14px; font-size: 14px; font-weight: 600; } .mbk-form__success { padding: 48px 8px; text-align: center; } .mbk-form__success-check { width: 64px; height: 64px; color: var(--red); display: block; margin: 0 auto 18px; } .mbk-form__success .big { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(38px, 6vw, 56px); line-height: 1; color: var(--red); margin-bottom: 14px; -webkit-text-stroke: 1.5px var(--ink); } .mbk-form__success p { font-size: 17px; line-height: 1.5; color: var(--soft); margin: 0 auto; max-width: 340px; } .mbk-form__again { margin-top: 22px; background: none; border: none; font-family: var(--font-label); font-variation-settings: 'wdth' 88; font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--muted); padding: 0 0 3px; cursor: pointer; } .mbk-form__again:hover { color: var(--ink); border-color: var(--ink); } /* ============================================================ FILM ============================================================ */ .mbk-film-grid { display: grid; grid-template-columns: minmax(300px, 390px) 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; } .mbk-film__frame { position: relative; border: 3px solid var(--ink); box-shadow: 11px 11px 0 var(--red); background: var(--ink); aspect-ratio: 9 / 16; overflow: hidden; } .mbk-film__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .mbk-film__tag { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; background: linear-gradient(180deg, rgba(20,20,20,.75), rgba(20,20,20,0)); font-family: var(--font-label); font-variation-settings: 'wdth' 88; font-weight: 700; font-size: 12px; letter-spacing: .15em; text-transform: uppercase; color: var(--paper); pointer-events: none; } .mbk-film__tag > span:first-child { display: flex; align-items: center; gap: 7px; } .mbk-film__tag .muted { color: rgba(244,241,234,.7); } .mbk-film__sound { position: absolute; left: 12px; bottom: 12px; background: var(--red); color: var(--paper); border: 2.5px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); font-family: var(--font-display); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; padding: 9px 14px; cursor: pointer; } .mbk-film__body h3 { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(36px, 5.4vw, 86px); line-height: .86; margin: 0 0 20px; } .mbk-film__body h3 .is-red { color: var(--red); -webkit-text-stroke: 1.5px var(--ink); } .mbk-film__body p { font-size: 18px; line-height: 1.5; color: var(--body); max-width: 560px; margin: 0 0 30px; } .mbk-film__stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; max-width: 600px; margin-bottom: 30px; } .mbk-film__stat { border: 3px solid var(--ink); padding: 16px 18px; } .mbk-film__stat.is-red { background: var(--red); color: var(--paper); } .mbk-film__stat .n { font-family: var(--font-display); font-size: 38px; line-height: 1; } .mbk-film__stat .l { font-family: var(--font-label); font-variation-settings: 'wdth' 88; font-weight: 700; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-top: 6px; } .mbk-film__stat.is-red .l { color: rgba(244,241,234,.85); } /* ============================================================ DREAM RIDE ============================================================ */ .mbk-dream { position: relative; background: var(--ink); color: var(--paper); border-bottom: 3px solid var(--ink); overflow: hidden; } .mbk-dream__grid { position: relative; display: grid; grid-template-columns: 1.02fr .98fr; align-items: stretch; } .mbk-dream__copy { padding: clamp(48px, 6vw, 86px) 26px; border-right: 3px solid var(--red); } .mbk-dream__pill { display: inline-block; background: var(--red); color: var(--paper); padding: 7px 14px; font-family: var(--font-label); font-variation-settings: 'wdth' 88; font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 22px; transform: rotate(-1.5deg); } .mbk-dream__copy h2 { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(46px, 7.6vw, 132px); line-height: .85; margin: 0 0 24px; } .mbk-dream__copy h2 .is-red { color: var(--red); -webkit-text-stroke: 2px var(--paper); } .mbk-dream__copy p { font-size: 18px; line-height: 1.5; color: rgba(244,241,234,.82); max-width: 520px; margin: 0 0 30px; } .mbk-dream__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; } .mbk-dream__tags span { border: 2.5px solid var(--paper); padding: 9px 15px; font-family: var(--font-display); font-size: 17px; letter-spacing: .05em; text-transform: uppercase; } .mbk-dream__tags span.is-red { background: var(--red); border-color: var(--red); } .mbk-dream__art { position: relative; min-height: clamp(420px, 56vh, 660px); overflow: hidden; background: #1B1A19; } .mbk-dream__art-stripes { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(214,43,31,.5) 0 3px, transparent 3px 16px); } .mbk-dream__art-img { position: absolute; inset: 0; transform: scale(1.18); display: flex; align-items: center; justify-content: center; } .mbk-dream__art-img img { width: 78%; height: auto; opacity: .92; filter: drop-shadow(0 20px 40px rgba(0,0,0,.5)); } .mbk-dream__art-fade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,20,20,.35) 0%, rgba(20,20,20,.1) 40%, rgba(20,20,20,.6) 100%); pointer-events: none; } .mbk-dream__art-cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding: 20px 22px; pointer-events: none; } .mbk-dream__art-cap span:first-child { font-family: var(--font-label); font-variation-settings: 'wdth' 88; font-weight: 700; font-size: 12px; letter-spacing: .15em; text-transform: uppercase; color: rgba(244,241,234,.8); } .mbk-dream__art-cap span:last-child { font-family: var(--font-display); font-size: clamp(30px, 3.4vw, 54px); line-height: .9; color: var(--red); -webkit-text-stroke: 1.5px var(--paper); } /* ============================================================ HOW IT WORKS ============================================================ */ .mbk-how-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; } .mbk-how-card { border: 3px solid var(--ink); padding: 24px; } .mbk-how-card.is-red { background: var(--red); color: var(--paper); } .mbk-how-card .n { font-family: var(--font-display); font-size: 44px; line-height: 1; margin-bottom: 12px; color: var(--red); } .mbk-how-card.is-red .n { color: var(--paper); } .mbk-how-card h3 { font-family: var(--font-display); text-transform: uppercase; font-size: 22px; margin: 0 0 10px; } .mbk-how-card p { font-size: 16px; line-height: 1.5; margin: 0; color: var(--soft); } .mbk-how-card.is-red p { color: rgba(244,241,234,.9); } /* ============================================================ WINNERS ============================================================ */ .mbk-winners-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px,100%),1fr)); gap: 34px; } .mbk-winner__frame { overflow: hidden; border: 3px solid var(--ink); } .mbk-winner__img { height: clamp(240px, 42vw, 400px); background: var(--sand-deep); position: relative; overflow: hidden; } .mbk-winner__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .mbk-winner__placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: repeating-linear-gradient(135deg, rgba(20,20,20,.05) 0 12px, transparent 12px 24px), var(--sand-deep); color: var(--muted); text-align: center; padding: 24px; } .mbk-winner__placeholder svg { width: 46px; height: 46px; opacity: .5; } .mbk-winner__placeholder span { font-family: var(--font-label); font-variation-settings: 'wdth' 88; font-weight: 700; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; } .mbk-winner__placeholder-hint { opacity: .7; font-size: 12px !important; } /* reCAPTCHA v3: hide the floating badge — attribution shown inline in the form */ .grecaptcha-badge { visibility: hidden; } /* Address autocomplete dropdown (our own, styled to the form) */ .mbk-ac-menu { position: absolute; left: 0; right: 0; top: calc(100% + 2px); z-index: 60; margin: 0; padding: 0; list-style: none; background: #fff; border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); max-height: 260px; overflow-y: auto; } .mbk-ac-item { padding: 10px 12px; font-family: var(--font-body); font-size: 15px; color: var(--soft); border-top: 1px solid rgba(20,20,20,.12); cursor: pointer; } .mbk-ac-item:first-child { border-top: none; } .mbk-ac-item:hover, .mbk-ac-item.is-active { background: var(--sand); color: var(--ink); } .mbk-winner__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-top: 16px; } .mbk-winner__meta h3 { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(24px, 3.4vw, 34px); line-height: 1; margin: 0; } .mbk-winner__meta .yr { font-family: var(--font-display); font-size: 20px; color: var(--red); } .mbk-winner p { font-size: 16px; line-height: 1.55; color: var(--soft); margin: 10px 0 0; max-width: 460px; } /* ============================================================ FAQ ============================================================ */ #faq .mbk-head { margin-bottom: 4px; } .mbk-faq__item { border-bottom: 2px solid var(--rule); } .mbk-faq__q { width: 100%; background: none; border: none; color: var(--ink); text-align: left; padding: 24px 0; display: grid; grid-template-columns: 54px 1fr 34px; align-items: center; gap: 14px; cursor: pointer; } .mbk-faq__q .num { font-family: var(--font-display); font-size: 20px; color: var(--red); } .mbk-faq__q .txt { font-family: var(--font-display); text-transform: uppercase; font-size: 24px; letter-spacing: .02em; } .mbk-faq__q .ico { font-family: var(--font-display); color: var(--red); font-size: 28px; line-height: 1; text-align: right; transition: transform .35s cubic-bezier(.2,.8,.2,1); } .mbk-faq__item.is-open .mbk-faq__q .ico { transform: rotate(135deg); } .mbk-faq__a { overflow: hidden; max-height: 0; transition: max-height .45s cubic-bezier(.2,.8,.2,1); } .mbk-faq__item.is-open .mbk-faq__a { max-height: 600px; } .mbk-faq__a p { font-size: 17px; line-height: 1.6; color: var(--soft); margin: 0; padding: 4px 0 26px 68px; max-width: 820px; } /* ============================================================ FINAL CTA ============================================================ */ .mbk-final { background: var(--paper); padding: 64px 26px 56px; text-align: center; border-bottom: 3px solid var(--ink); } .mbk-final img { width: min(420px, 72vw); height: auto; margin: 0 auto 8px; display: block; } .mbk-final p { font-family: var(--font-label); font-variation-settings: 'wdth' 88; font-weight: 700; font-size: 12px; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); margin: 0 0 24px; } /* ============================================================ MOBILE STICKY BAR ============================================================ */ .mbk-mobilebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 110; display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--ink); border-top: 3px solid var(--red); } .mbk-mobilebar__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .mbk-mobilebar__txt .a { font-family: var(--font-display); text-transform: uppercase; font-size: 17px; line-height: 1; color: var(--paper); } .mbk-mobilebar__txt .b { font-family: var(--font-label); font-variation-settings: 'wdth' 88; font-weight: 700; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-dark); } .mbk-mobilebar .mbk-btn { flex: none; background: var(--red); border: 2.5px solid var(--paper); box-shadow: none; font-size: 16px; letter-spacing: .06em; padding: 13px 18px; } .mbk-mobilebar .mbk-btn:hover { transform: none; box-shadow: none; } /* ============================================================ FOOTER ============================================================ */ .mbk-footer { background: var(--ink); color: var(--muted-dark); padding: 36px 26px 32px; } .mbk-footer__legal { font-size: 12px; line-height: 1.7; color: #948E85; margin: 0 0 30px; max-width: 1100px; } .mbk-footer__legal a { color: var(--muted-dark); } .mbk-footer__row { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding-top: 22px; border-top: 2px solid rgba(244,241,234,.22); font-family: var(--font-label); font-variation-settings: 'wdth' 88; font-weight: 700; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; } .mbk-footer__row nav { display: flex; gap: 10px 22px; flex-wrap: wrap; } .mbk-footer__row nav a, .mbk-footer__social a { color: var(--muted-dark); display: inline-block; padding: 8px 2px; } .mbk-footer__row nav a:hover, .mbk-footer__social a:hover { color: var(--paper); } .mbk-footer__social { display: flex; gap: 10px 20px; flex-wrap: wrap; } /* ============================================================ MOTION The hidden pre-animation state is applied ONLY while JS is actively animating (.is-animating), so if the script or the motion library fails to load, nothing is ever hidden. ============================================================ */ .mbk-page.is-animating [data-reveal] { opacity: 0; } .mbk-page.is-animating [data-word] > span { transform: translateY(106%); } @media (prefers-reduced-motion: reduce) { .mbk-page.is-animating [data-reveal] { opacity: 1; } .mbk-page.is-animating [data-word] > span { transform: none; } } /* ============================================================ RESPONSIVE (mirrors the source comp breakpoints) ============================================================ */ @media (max-width: 1150px) { .mbk-form__row-addr { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } } @media (max-width: 900px) { .mbk-header { grid-template-columns: auto 1fr; gap: 12px; padding: 10px 16px; } .mbk-header__nav { display: none; } .mbk-header__logo img { height: 52px; } .mbk-header__actions a.mbk-header__phone { display: none; } .mbk-hero { grid-template-columns: 1fr; } .mbk-hero__copy { border-right: none; border-bottom: 3px solid var(--ink); padding: 34px 16px 30px; } .mbk-hero__art { min-height: 300px; padding: 22px 0; } .mbk-hero__seal { width: 92px; height: 92px; right: 10px; bottom: 10px; } .mbk-sponsors { flex-direction: column; align-items: center; gap: 14px; padding: 18px 16px; text-align: center; } .mbk-sponsors__label { letter-spacing: .16em; } .mbk-sponsors img { height: 64px; max-width: 78vw; object-fit: contain; } .mbk-sponsors__divider { width: 44px; height: 3px; } #prize { padding: 44px 16px 0; } .mbk-prize-row { grid-template-columns: 1fr; gap: 6px; } .mbk-prize-row__n { justify-self: start; } .mbk-cd { padding: 40px 16px; } .mbk-cd__grid { grid-template-columns: 1fr 1fr; } #form, #film, #how, #winner, #faq { padding: 44px 16px; } .mbk-section { padding: 44px 16px; } .mbk-form-grid { grid-template-columns: 1fr; gap: 26px; } .mbk-form-aside { position: static; } .mbk-form__row-2, .mbk-form__row-addr { grid-template-columns: 1fr; } .mbk-film-grid { grid-template-columns: 1fr; } .mbk-film__frame { max-height: none; } .mbk-dream__grid { grid-template-columns: 1fr; } .mbk-dream__copy { border-right: none; border-bottom: 3px solid var(--red); padding: 40px 16px; } .mbk-dream__art { min-height: 300px; } .mbk-how-grid { grid-template-columns: 1fr 1fr; gap: 14px; } .mbk-winners-grid { grid-template-columns: 1fr; gap: 30px; } .mbk-winner__meta h3 { font-size: 26px; } #faq .mbk-faq__a p { padding-left: 0; } .mbk-faq__q { grid-template-columns: 34px 1fr 26px; padding: 18px 0; } .mbk-footer { padding: 28px 16px 104px; } .mbk-footer__row { grid-template-columns: 1fr; gap: 22px; } .mbk-mobilebar { display: flex; } } @media (max-width: 560px) { .mbk-how-grid { grid-template-columns: 1fr; } .mbk-film__stats { grid-template-columns: 1fr 1fr; } .mbk-marquee__track { font-size: 22px; } .mbk-header { padding: 8px 12px; gap: 8px; } .mbk-header__logo img { height: 44px; } .mbk-header__actions .mbk-btn--sm { font-size: 13px; padding: 9px 13px; box-shadow: 3px 3px 0 var(--ink); } .mbk-sponsors img { height: 56px; } .mbk-form-card { padding: 20px; box-shadow: 6px 6px 0 var(--ink); } .mbk-dream__tags span { font-size: 15px; padding: 8px 12px; } .mbk-film__stat { padding: 13px 14px; } .mbk-film__stat .n { font-size: 30px; } .mbk-btn { font-size: 18px; } .mbk-form button[type="submit"] { font-size: 20px; } }